feat(ui): adds edit user and edit server, list item commit

frontend/src/AppFrontend.vue

@@ -55,3 +55,21 @@ export default {
   })
 }
 </script>
+<style>
+.v-card__text,
+.v-card__title {
+  word-break: normal !important;
+}
+
+.streamid {
+  font-family: monospace !important;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+</style>

frontend/src/components/FeedStream.vue

@@ -81,16 +81,4 @@ export default {
   }
 }
 </script>
-<style scoped>
-.streamid {
-  font-family: monospace !important;
-}
-
-a {
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-</style>
+<style scoped></style>

frontend/src/components/ListItemCommit.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-row>
+    <v-col cols="7">
+      <div class="subtitle-2">
+        <router-link :to="'/streams/' + streamId + '/commits/' + commit.id">
+          {{ commit.message }}
+        </router-link>
+      </div>
+      <div class="caption">
+        {{ commit.authorName }} committed
+        <timeago :datetime="commit.createdAt"></timeago>
+      </div>
+    </v-col>
+    <!-- <v-spacer></v-spacer> -->
+    <v-col cols="5" class="caption text-right">
+      <div>
+        <span class="streamid">
+          <router-link :to="'/streams/' + streamId + '/commits/' + commit.id">
+            {{ commit.id }}
+          </router-link>
+        </span>
+      </div>
+    </v-col>
+  </v-row>
+</template>
+<script>
+export default {
+  props: ["commit", "streamId"]
+}
+</script>

frontend/src/components/ListItemStream.vue

@@ -6,7 +6,7 @@
           {{ stream.name }}
         </router-link>
       </div>
-      <div>
+      <div class="caption">
         {{ stream.description }}
       </div>
     </v-col>

frontend/src/components/SidebarHome.vue

@@ -1,47 +1,72 @@
 <template>
   <div>
-    <v-sheet rounded="lg" class="pa-4 text-center" style="position: relative">
-      <v-avatar class="mb-4" color="grey lighten-3" size="64">
-        <v-img v-if="user.avatar" :src="user.avatar" />
-        <v-img
-          v-else
-          :src="`https://robohash.org/` + user.id + `.png?size=64x64`"
-        />
-      </v-avatar>
-      <div>
-        <strong>{{ user.name }}</strong>
-      </div>
-      <div>{{ user.company }}</div>
-      <div class="pt-2 pb-2">
-        <i>{{ user.bio }}</i>
-      </div>
-      <code>{{ user.id }}</code>
+    <v-card
+      elevation="0"
+      rounded="lg"
+      class="pa-4 text-center"
+      style="position: relative"
+    >
+      <v-card-title class="justify-center">
+        <v-avatar class="mb-4" color="grey lighten-3" size="64">
+          <v-img v-if="user.avatar" :src="user.avatar" />
+          <v-img
+            v-else
+            :src="`https://robohash.org/` + user.id + `.png?size=64x64`"
+          />
+        </v-avatar>
 
+        <span>{{ user.name }}</span>
+      </v-card-title>
+      <v-card-text>
+        <p class="subtitle-1">{{ user.company }}</p>
+        <p>
+          {{ user.bio }}
+        </p>
+        <code>{{ user.id }}</code>
+      </v-card-text>
       <v-btn
         small
         icon
-        style="position: absolute; right: 20px; top: 20px"
+        style="position: absolute; right: 15px; top: 15px"
         @click="editUser"
       >
         <v-icon small>mdi-pencil-outline</v-icon>
       </v-btn>
 
       <user-dialog ref="editUserDialog"></user-dialog>
-    </v-sheet>
+    </v-card>
 
-    <v-sheet rounded="lg" class="mt-5 pa-4 text-center">
-      <div>
-        <strong>{{ serverInfo.name }}</strong>
-      </div>
-      <div>{{ serverInfo.company }}</div>
-      <div>{{ serverInfo.description }}</div>
-      <div v-if="serverInfo.adminContact">
-        {{ serverInfo.adminContact }}
-      </div>
-      <code v-if="serverInfo.canonicalUrl">
-        {{ serverInfo.canonicalUrl }}
-      </code>
-    </v-sheet>
+    <v-card
+      rounded="lg"
+      class="mt-5 pa-4 text-center"
+      style="position: relative"
+      elevation="0"
+    >
+      <v-card-title class="justify-center text-wrap">
+        {{ serverInfo.name }}
+      </v-card-title>
+      <v-card-text>
+        <p class="subtitle-1">{{ serverInfo.company }}</p>
+        <p>{{ serverInfo.description }}</p>
+        <p v-if="serverInfo.adminContact">
+          Contact: {{ serverInfo.adminContact }}
+        </p>
+        <code v-if="serverInfo.canonicalUrl">
+          {{ serverInfo.canonicalUrl }}
+        </code>
+      </v-card-text>
+      <v-btn
+        v-if="user.role === `server:admin`"
+        small
+        icon
+        style="position: absolute; right: 15px; top: 15px"
+        @click="editServer"
+      >
+        <v-icon small>mdi-pencil-outline</v-icon>
+      </v-btn>
+
+      <server-dialog ref="editServerDialog"></server-dialog>
+    </v-card>
   </div>
 </template>
 <script>
@@ -49,9 +74,10 @@ import userQuery from "../graphql/user.gql"
 import serverQuery from "../graphql/server.gql"
 import gql from "graphql-tag"
 import UserDialog from "../components/dialogs/UserDialog"
+import ServerDialog from "../components/dialogs/ServerDialog"
 
 export default {
-  components: { UserDialog },
+  components: { UserDialog, ServerDialog },
   data: () => ({ user: {}, serverInfo: {} }),
   apollo: {
     user: {
@@ -76,11 +102,7 @@ export default {
               }
             `,
             variables: {
-              myUser: {
-                name: dialog.user.name,
-                company: dialog.user.company,
-                bio: dialog.user.bio //TODO: this is not working https://github.com/specklesystems/Server/issues/30
-              }
+              myUser: { ...dialog.user }
             }
           })
           .then((data) => {
@@ -91,6 +113,30 @@ export default {
             console.error(error)
           })
       })
+    },
+    editServer() {
+      this.$refs.editServerDialog.open(this.serverInfo).then((dialog) => {
+        if (!dialog.result) return
+        console.log(dialog)
+        this.$apollo
+          .mutate({
+            mutation: gql`
+              mutation serverInfoUpdate($myServerInfo: ServerInfoUpdateInput!) {
+                serverInfoUpdate(info: $myServerInfo)
+              }
+            `,
+            variables: {
+              myServerInfo: { ...dialog.server }
+            }
+          })
+          .then((data) => {
+            this.$apollo.queries.serverInfo.refetch()
+          })
+          .catch((error) => {
+            // Error
+            console.error(error)
+          })
+      })
     }
   }
 }

frontend/src/components/SidebarStream.vue

@@ -7,7 +7,7 @@
       <v-btn
         small
         icon
-        style="position: absolute; right: 20px; top: 20px"
+        style="position: absolute; right: 15px; top: 15px"
         @click="editStream"
       >
         <v-icon small>mdi-pencil-outline</v-icon>
@@ -109,7 +109,7 @@ export default {
     editStream() {
       this.$refs.editStreamDialog.open(this.stream).then((dialog) => {
         if (!dialog.result) return
-        console.log(dialog)
+
         this.$apollo
           .mutate({
             mutation: gql`
@@ -118,12 +118,8 @@ export default {
               }
             `,
             variables: {
-              myStream: {
-                id: dialog.stream.id,
-                name: dialog.stream.name,
-                description: dialog.stream.description,
-                isPublic: dialog.stream.isPublic //TODO: this is not working https://github.com/specklesystems/Server/issues/30
-              }
+              myStream: { ...dialog.stream }
+              //isPublic: dialog.stream.isPublic //TODO: this is not working https://github.com/specklesystems/Server/issues/30
             }
           })
           .then((data) => {

frontend/src/components/dialogs/ServerDialog.vue

@@ -0,0 +1,140 @@
+<template>
+  <v-dialog v-model="show" width="500" @keydown.esc="cancel">
+    <v-card class="pa-4">
+      <v-card-title class="subtitle-1">Edit Server Info</v-card-title>
+
+      <v-card-text class="pl-2 pr-2 pt-0 pb-0">
+        <v-form ref="form" v-model="valid" lazy-validation>
+          <v-container>
+            <v-row>
+              <v-col cols="12" class="pb-0">
+                <v-text-field
+                  v-model="server.name"
+                  label="Name"
+                  :rules="nameRules"
+                  required
+                  filled
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" class="pt-0 pb-0">
+                <v-text-field
+                  v-model="server.company"
+                  filled
+                  label="Company"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" class="pt-0 pb-0">
+                <v-textarea
+                  v-model="server.description"
+                  filled
+                  rows="2"
+                  label="Description"
+                ></v-textarea>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" class="pt-0 pb-0">
+                <v-text-field
+                  v-model="server.adminContact"
+                  filled
+                  label="Admin Contact"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" class="pt-0 pb-0">
+                <v-textarea
+                  v-model="server.termsOfService"
+                  filled
+                  rows="4"
+                  label="TermsOf Service"
+                ></v-textarea>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-form>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn :disabled="!valid" color="primary" text @click.native="agree">
+          Save
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+<script>
+export default {
+  data: () => ({
+    dialog: false,
+    server: {},
+    nameRules: [],
+    valid: true
+  }),
+  computed: {
+    show: {
+      get() {
+        return this.dialog
+      },
+      set(value) {
+        this.dialog = value
+        if (value === false) {
+          this.cancel()
+        }
+      }
+    }
+  },
+  watch: {
+    "server.name"(val) {
+      this.nameRules = []
+    }
+  },
+  methods: {
+    open(server) {
+      this.dialog = true
+      if (this.$refs.form) this.$refs.form.resetValidation()
+
+      this.server = {
+        name: server.name,
+        company: server.company,
+        description: server.description,
+        termsOfService: server.termsOfService,
+        adminContact: server.adminContact
+      }
+
+      return new Promise((resolve, reject) => {
+        this.resolve = resolve
+        this.reject = reject
+      })
+    },
+    agree() {
+      this.nameRules = [
+        (v) => !!v || "Servers need a name too!",
+        (v) => (v && v.length <= 100) || "Name must be less than 25 characters",
+        (v) => (v && v.length >= 3) || "Name must be at least 3 characters"
+      ]
+
+      let self = this
+      setTimeout(function () {
+        if (self.$refs.form.validate()) {
+          self.resolve({
+            result: true,
+            server: self.server
+          })
+          self.dialog = false
+        }
+      })
+    },
+    cancel() {
+      this.resolve({
+        result: false
+      })
+      this.dialog = false
+    }
+  }
+}
+</script>

frontend/src/components/dialogs/StreamDialog.vue

@@ -82,7 +82,13 @@ export default {
       if (this.$refs.form) this.$refs.form.resetValidation()
 
       if (stream) {
-        this.stream = { ...stream }
+        this.stream = {
+          id: stream.id,
+          name: stream.name,
+          description: stream.description,
+          isPublic: stream.isPublic
+        }
+
         this.isEdit = true
       } else {
         this.stream = { isPublic: true }

frontend/src/components/dialogs/UserDialog.vue

@@ -79,7 +79,7 @@ export default {
       this.dialog = true
       if (this.$refs.form) this.$refs.form.resetValidation()
 
-      this.user = { ...user }
+      this.user = { name: user.name, company: user.company, bio: user.bio }
 
       return new Promise((resolve, reject) => {
         this.resolve = resolve

frontend/src/views/Home.vue

@@ -80,6 +80,9 @@ export default {
       ) {
         activity.push(...this.user.commits.items)
       }
+
+      if (activity.length === 1) return activity
+
       activity.sort(this.compareUpdates)
 
       let group = []

frontend/src/views/Stream.vue

@@ -76,14 +76,18 @@
                   {{ branches[selectedBranch].name }} branch just yet, try
                   sending something...
                 </p>
+
                 <div
                   v-for="(commit, i) in branches[selectedBranch].commits.items"
                   :key="i"
                 >
-                  <div class="subtitle-2 mb-5">
-                    {{ commit.message }}
-                  </div>
-                  <!-- TODO: add more info and maby let user create a new commit? -->
+                  <list-item-commit
+                    :commit="commit"
+                    :stream-id="stream.id"
+                  ></list-item-commit>
+                  <v-divider
+                    v-if="i < branches[selectedBranch].commits.items.length - 1"
+                  ></v-divider>
                 </div>
               </v-card-text>
             </v-card>
@@ -97,11 +101,12 @@
 import gql from "graphql-tag"
 import SidebarStream from "../components/SidebarStream"
 import BranchDialog from "../components/dialogs/BranchDialog"
+import ListItemCommit from "../components/ListItemCommit"
 import streamQuery from "../graphql/stream.gql"
 
 export default {
   name: "Stream",
-  components: { SidebarStream, BranchDialog },
+  components: { SidebarStream, BranchDialog, ListItemCommit },
   data: () => ({ selectedBranch: 0 }),
   apollo: {
     stream: {
@@ -122,7 +127,7 @@ export default {
     }
   },
   watch: {
-    selectedBranch(val) {
+    stream(val) {
       console.log(val)
     }
   },
@@ -164,18 +169,6 @@ export default {
 }
 </script>
 <style scoped>
-.streamid {
-  font-family: monospace !important;
-}
-
-a {
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
 .v-item-group {
   float: left;
 }

frontend/src/views/Streams.vue

@@ -22,7 +22,7 @@
 
           <v-card-text v-if="user.streams && user.streams.items">
             <div v-for="(stream, i) in user.streams.items" :key="i">
-              <stream-box :stream="stream"></stream-box>
+              <list-item-stream :stream="stream"></list-item-stream>
               <v-divider v-if="i < user.streams.items.length - 1"></v-divider>
             </div>
           </v-card-text>
@@ -33,14 +33,14 @@
 </template>
 <script>
 import gql from "graphql-tag"
-import StreamBox from "../components/StreamBox"
+import ListItemStream from "../components/ListItemStream"
 import SidebarHome from "../components/SidebarHome"
 import StreamDialog from "../components/dialogs/StreamDialog"
 import userQuery from "../graphql/user.gql"
 
 export default {
   name: "Streams",
-  components: { StreamBox, SidebarHome, StreamDialog },
+  components: { ListItemStream, SidebarHome, StreamDialog },
   apollo: {
     user: {
       prefetch: true,
@@ -83,16 +83,4 @@ export default {
   }
 }
 </script>
-<style>
-.streamid {
-  font-family: monospace !important;
-}
-
-a {
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-</style>
+<style></style>

modules/core/graph/schemas/branchesAndCommits.graphql

@@ -1,12 +1,12 @@
 extend type Stream {
-  commits( limit: Int! = 25, cursor: String ): CommitCollection
-  commit( id: String! ): Commit
-  branches( limit: Int! = 25, cursor: String ): BranchCollection
-  branch( name: String! ): Branch
+  commits(limit: Int! = 25, cursor: String): CommitCollection
+  commit(id: String!): Commit
+  branches(limit: Int! = 25, cursor: String): BranchCollection
+  branch(name: String!): Branch
 }
 
 extend type User {
-  commits( limit: Int! = 25, cursor: String ): CommitCollectionUser
+  commits(limit: Int! = 25, cursor: String): CommitCollectionUser
 }
 
 type Branch {
@@ -14,7 +14,7 @@ type Branch {
   name: String!
   author: User!
   description: String!
-  commits( limit: Int! = 25, cursor: String ): CommitCollection
+  commits(limit: Int! = 25, cursor: String): CommitCollection
 }
 
 type Commit {
@@ -34,7 +34,7 @@ type CommitCollectionUserNode {
   message: String
   streamId: String
   streamName: String
-  createdAt: String
+  createdAt: DateTime
 }
 
 type BranchCollection {
@@ -56,23 +56,23 @@ type CommitCollectionUser {
 }
 
 extend type Mutation {
-  branchCreate( branch: BranchCreateInput! ): String!
+  branchCreate(branch: BranchCreateInput!): String!
     @hasRole(role: "server:user")
     @hasScope(scope: "streams:write")
-  branchUpdate( branch: BranchUpdateInput! ): Boolean!
+  branchUpdate(branch: BranchUpdateInput!): Boolean!
     @hasRole(role: "server:user")
     @hasScope(scope: "streams:write")
-  branchDelete( branch: BranchDeleteInput! ): Boolean!
+  branchDelete(branch: BranchDeleteInput!): Boolean!
     @hasRole(role: "server:user")
     @hasScope(scope: "streams:write")
 
-  commitCreate( commit: CommitCreateInput! ): String!
+  commitCreate(commit: CommitCreateInput!): String!
     @hasRole(role: "server:user")
     @hasScope(scope: "streams:write")
-  commitUpdate( commit: CommitUpdateInput! ): Boolean!
+  commitUpdate(commit: CommitUpdateInput!): Boolean!
     @hasRole(role: "server:user")
     @hasScope(scope: "streams:write")
-  commitDelete( commit: CommitDeleteInput! ): Boolean!
+  commitDelete(commit: CommitDeleteInput!): Boolean!
     @hasRole(role: "server:user")
     @hasScope(scope: "streams:write")
 }
@@ -82,38 +82,38 @@ extend type Subscription {
   """
   Subscribe to branch created event
   """
-  branchCreated( streamId: String! ): JSONObject
+  branchCreated(streamId: String!): JSONObject
     @hasRole(role: "server:user")
     @hasScope(scope: "streams:read")
   """
   Subscribe to branch updated event.
   """
-  branchUpdated( streamId: String!, branchId: String ): JSONObject
+  branchUpdated(streamId: String!, branchId: String): JSONObject
     @hasRole(role: "server:user")
     @hasScope(scope: "streams:read")
   """
   Subscribe to branch deleted event
   """
-  branchDeleted( streamId: String! ): JSONObject
+  branchDeleted(streamId: String!): JSONObject
     @hasRole(role: "server:user")
     @hasScope(scope: "streams:read")
 
   """
   Subscribe to commit created event
   """
-  commitCreated( streamId: String! ): JSONObject
+  commitCreated(streamId: String!): JSONObject
     @hasRole(role: "server:user")
     @hasScope(scope: "streams:read")
   """
   Subscribe to commit updated event.
   """
-  commitUpdated( streamId: String!, commitId: String ): JSONObject
+  commitUpdated(streamId: String!, commitId: String): JSONObject
     @hasRole(role: "server:user")
     @hasScope(scope: "streams:read")
   """
   Subscribe to commit deleted event
   """
-  commitDeleted( streamId: String! ): JSONObject
+  commitDeleted(streamId: String!): JSONObject
     @hasRole(role: "server:user")
     @hasScope(scope: "streams:read")
 }

modules/core/graph/schemas/server.graphql

@@ -34,7 +34,9 @@ type Scope {
 }
 
 extend type Mutation {
-  serverInfoUpdate( info: ServerInfoUpdateInput! ): Boolean
+  serverInfoUpdate(info: ServerInfoUpdateInput!): Boolean
+    @hasRole(role: "server:admin")
+    @hasScope(scope: "server:setup")
 }
 
 input ServerInfoUpdateInput {