From 147f215ff92a10c2fbf136abe144a1ca61818c52 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sun, 20 Dec 2020 02:21:14 +0200
Subject: [PATCH] feat(frontend): ... more stuff. got bored to make actual
 atomic commits

---
 frontend/src/components/FeedCommit.vue     |  20 ++-
 frontend/src/components/FeedStream.vue     |  27 +---
 frontend/src/components/ListItemCommit.vue |  10 +-
 frontend/src/components/ListItemStream.vue |  58 +++-----
 frontend/src/components/ListItemUser.vue   |  43 ------
 frontend/src/components/SidebarStream.vue  | 151 +++++++--------------
 frontend/src/components/UserAvatar.vue     |  28 +---
 frontend/src/components/UserInfoCard.vue   |   3 +-
 8 files changed, 96 insertions(+), 244 deletions(-)
 delete mode 100644 frontend/src/components/ListItemUser.vue

diff --git a/frontend/src/components/FeedCommit.vue b/frontend/src/components/FeedCommit.vue
index d3b5d2796..d6084aea9 100644
--- a/frontend/src/components/FeedCommit.vue
+++ b/frontend/src/components/FeedCommit.vue
@@ -1,12 +1,7 @@
 <template>
   <div>
     <div class="text-center" style="position: absolute">
-      <user-avatar
-        :id="user.id"
-        :avatar="user.avatar"
-        :name="user.name"
-        :size="30"
-      />
+      <user-avatar :id="user.id" :avatar="user.avatar" :name="user.name" :size="30" />
     </div>
     <div class="ml-12">
       <v-row class="caption">
@@ -14,9 +9,7 @@
           <v-icon small>mdi-history</v-icon>
           &nbsp; You have
           <strong>
-            <span v-if="commit.items">
-              {{ commit.items.length }} new commits
-            </span>
+            <span v-if="commit.items">{{ commit.items.length }} new commits</span>
             <span v-else>a new commit</span>
           </strong>
           in
@@ -36,7 +29,7 @@
             {{ commit.message }}
           </router-link>
         </v-card-title>
-        <v-expansion-panels v-else flat color="background2">
+        <v-expansion-panels v-else multiple :value="expando" flat color="background2">
           <v-expansion-panel>
             <v-expansion-panel-header class="pl-4" color="background2">
               <span class="subtitle-2">
@@ -72,7 +65,7 @@
   </div>
 </template>
 <script>
-import UserAvatar from "./UserAvatar"
+import UserAvatar from './UserAvatar'
 
 export default {
   components: { UserAvatar },
@@ -89,6 +82,11 @@ export default {
         return {}
       }
     }
+  },
+  data() {
+    return {
+      expando: [0]
+    }
   }
 }
 </script>
diff --git a/frontend/src/components/FeedStream.vue b/frontend/src/components/FeedStream.vue
index dad50164f..36e7908d0 100644
--- a/frontend/src/components/FeedStream.vue
+++ b/frontend/src/components/FeedStream.vue
@@ -1,12 +1,7 @@
 <template>
   <div>
     <div class="text-center" style="position: absolute">
-      <user-avatar
-        :id="user.id"
-        :avatar="user.avatar"
-        :name="user.name"
-        :size="30"
-      />
+      <user-avatar :id="user.id" :avatar="user.avatar" :name="user.name" :size="30" />
     </div>
     <div class="ml-12">
       <v-row class="caption">
@@ -26,9 +21,9 @@
                 {{ stream.name }}
               </router-link>
             </v-card-title>
-            <v-card-subtitle>
+            <!-- <v-card-subtitle>
               {{ stream.description }}
-            </v-card-subtitle>
+            </v-card-subtitle> -->
           </v-col>
 
           <v-col cols="5" class="caption text-right">
@@ -79,16 +74,8 @@
               <span>{{ stream.collaborators.length }}</span>
 
               <span class="ma-2"></span>
-              <v-icon
-                v-if="stream.isPublic"
-                v-tooltip="`Link sharing on`"
-                small
-              >
-                mdi-link
-              </v-icon>
-              <v-icon v-else v-tooltip="`Link sharing off`" small>
-                mdi-link-lock
-              </v-icon>
+              <v-icon v-if="stream.isPublic" v-tooltip="`Link sharing on`" small>mdi-link</v-icon>
+              <v-icon v-else v-tooltip="`Link sharing off`" small>mdi-link-lock</v-icon>
             </div>
           </v-col>
         </v-row>
@@ -97,8 +84,8 @@
   </div>
 </template>
 <script>
-import BtnClickCopy from "./BtnClickCopy"
-import UserAvatar from "./UserAvatar"
+import BtnClickCopy from './BtnClickCopy'
+import UserAvatar from './UserAvatar'
 
 export default {
   components: { BtnClickCopy, UserAvatar },
diff --git a/frontend/src/components/ListItemCommit.vue b/frontend/src/components/ListItemCommit.vue
index 72c009605..94628bd4c 100644
--- a/frontend/src/components/ListItemCommit.vue
+++ b/frontend/src/components/ListItemCommit.vue
@@ -1,6 +1,6 @@
 <template>
   <v-row>
-    <v-col cols="1" style="margin-top: 8px;">
+    <v-col cols="1" style="margin-top: 8px">
       <user-avatar
         :id="commit.authorId"
         :avatar="commit.authorAvatar"
@@ -34,16 +34,16 @@
   </v-row>
 </template>
 <script>
-  import UserAvatar from "./UserAvatar"
+import UserAvatar from './UserAvatar'
 
 export default {
-  components: {UserAvatar},
-  props: ["commit", "streamId"],
+  components: { UserAvatar },
+  props: ['commit', 'streamId'],
   computed: {
     commitDate() {
       if (!this.commit) return null
       let date = new Date(this.commit.createdAt)
-      let options = { year: "numeric", month: "long", day: "numeric" }
+      let options = { year: 'numeric', month: 'long', day: 'numeric' }
 
       return date.toLocaleString(undefined, options)
     }
diff --git a/frontend/src/components/ListItemStream.vue b/frontend/src/components/ListItemStream.vue
index 46e591595..c18ee13c7 100644
--- a/frontend/src/components/ListItemStream.vue
+++ b/frontend/src/components/ListItemStream.vue
@@ -1,11 +1,7 @@
 <template>
-  <v-card
-    class="pa-5 mb-2 elevation-0"
-    color="background2"
-    :to="'/streams/' + stream.id"
-  >
+  <v-card class="pa-5 mb-2 elevation-0" color="background2" :to="'/streams/' + stream.id">
     <v-row>
-      <v-col cols="6">
+      <v-col cols="8" class="align-self-center">
         <div class="subtitle-2">
           {{ stream.name }}
         </div>
@@ -16,43 +12,21 @@
           , updated
           <timeago :datetime="stream.updatedAt"></timeago>
         </div>
+        <v-divider class="my-3" />
+        <v-chip small class="mr-3">
+          <v-icon small left>mdi-source-branch</v-icon>
+          {{ stream.branches.totalCount }} branches
+        </v-chip>
+        <v-chip small class="mr-3">
+          <v-icon small left>mdi-source-commit</v-icon>
+          {{ stream.commits.totalCount }} commits
+        </v-chip>
+
+        <v-icon v-if="stream.isPublic" v-tooltip="`Link sharing on`" small>mdi-link</v-icon>
+        <v-icon v-else v-tooltip="`Link sharing off`" small>mdi-shield-lock</v-icon>
       </v-col>
-      <v-col cols="6" class="caption text-right">
+      <v-col cols="4" class="caption text-right align-self-center">
         <div>
-          <span class="ma-2"></span>
-          <v-icon
-            v-tooltip="
-              stream.branches.totalCount +
-              ' branch' +
-              (stream.branches.totalCount === 1 ? '' : 'es')
-            "
-            small
-          >
-            mdi-source-branch
-          </v-icon>
-          &nbsp;
-          <span>{{ stream.branches.totalCount }}</span>
-          &nbsp;
-          <v-icon
-            v-tooltip="
-              stream.commits.totalCount +
-              ' commit' +
-              (stream.commits.totalCount === 1 ? '' : 's')
-            "
-            small
-          >
-            mdi-history
-          </v-icon>
-          &nbsp;
-          <span>{{ stream.commits.totalCount }}</span>
-          &nbsp;
-          <v-icon v-if="stream.isPublic" v-tooltip="`Link sharing on`" small>
-            mdi-link
-          </v-icon>
-          &nbsp;&nbsp;&nbsp;
-          <v-icon v-else v-tooltip="`Link sharing off`" small>
-            mdi-shield-lock
-          </v-icon>
           <user-avatar
             v-for="user in stream.collaborators"
             :id="user.id"
@@ -67,7 +41,7 @@
   </v-card>
 </template>
 <script>
-import UserAvatar from "../components/UserAvatar"
+import UserAvatar from '../components/UserAvatar'
 
 export default {
   components: { UserAvatar },
diff --git a/frontend/src/components/ListItemUser.vue b/frontend/src/components/ListItemUser.vue
deleted file mode 100644
index fb8376066..000000000
--- a/frontend/src/components/ListItemUser.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <v-row align="center">
-    <v-col cols="1">
-      <v-avatar color="background" size="40">
-        <v-img v-if="user.avatar" :src="user.avatar" />
-        <v-img
-          v-else
-          :src="`https://robohash.org/` + user.id + `.png?size=40x40`"
-        />
-      </v-avatar>
-    </v-col>
-    <v-col cols="7">
-      <div class="subtitle-2">
-        <!-- <router-link :to="'streams/' + stream.id"> -->
-        {{ user.name }}
-        <!-- </router-link> -->
-      </div>
-      <div class="caption">
-        {{ user.company }}
-      </div>
-    </v-col>
-    <v-col cols="2" justify="center" class="caption">
-      <i>
-        {{ user.role.replace("stream:", "") }}
-      </i>
-    </v-col>
-    <v-col cols="2" justify="center">
-      <v-btn
-        v-if="!isUniqueStreamOwner"
-        icon
-        small
-        @click="userRemoveClick(user.id)"
-      >
-        <v-icon small color="error">mdi-account-remove-outline</v-icon>
-      </v-btn>
-    </v-col>
-  </v-row>
-</template>
-<script>
-export default {
-  props: ["user", "userRemoveClick", "isUniqueStreamOwner"]
-}
-</script>
diff --git a/frontend/src/components/SidebarStream.vue b/frontend/src/components/SidebarStream.vue
index eecfcc2ec..78451e3cc 100644
--- a/frontend/src/components/SidebarStream.vue
+++ b/frontend/src/components/SidebarStream.vue
@@ -12,14 +12,19 @@
           {{ stream.name }}
         </div>
       </v-card-title>
-      <v-divider></v-divider>
+      <v-divider class="mx-4"></v-divider>
       <v-card-text>
+        <p class="caption grey--text mt-0 pb-0">
+          Created
+          <timeago :datetime="stream.createdAt"></timeago>
+          ({{ streamDate }})
+        </p>
         <p>
           <v-icon small>mdi-source-branch</v-icon>
           &nbsp;
           <span>
             {{ stream.branches.totalCount }}
-            branch{{ stream.branches.totalCount === 1 ? "" : "es" }}
+            branch{{ stream.branches.totalCount === 1 ? '' : 'es' }}
           </span>
         </p>
         <p>
@@ -27,38 +32,38 @@
           &nbsp;
           <span>
             {{ stream.commits.totalCount }}
-            commit{{ stream.commits.totalCount === 1 ? "" : "s" }}
+            commit{{ stream.commits.totalCount === 1 ? '' : 's' }}
           </span>
         </p>
         <p>
           <span v-if="stream.isPublic">
             <v-icon small>mdi-link</v-icon>
-            link sharing on
+            &nbsp; link sharing on
           </span>
           <span v-else>
-            <v-icon small>mdi-link-lock</v-icon>
-            link sharing off
+            <v-icon small>mdi-shield-lock</v-icon>
+            &nbsp; link sharing off
           </span>
         </p>
-        <p>
-          Created
-          <timeago :datetime="stream.createdAt"></timeago>
-        </p>
-        <p>
-          Updated
-          <timeago :datetime="stream.updatedAt"></timeago>
-        </p>
-        <v-btn v-if="userRole === 'owner'" block small @click="editStream">
+        <v-btn v-if="userRole === 'owner'" block small @click="editStreamDialog = true">
           Edit
           <v-icon small class="ml-3">mdi-cog-outline</v-icon>
         </v-btn>
-        <stream-dialog ref="streamDialog"></stream-dialog>
+        <v-dialog v-model="editStreamDialog" max-width="500">
+          <edit-stream-dialog
+            :stream-id="stream.id"
+            :name="stream.name"
+            :is-public="stream.isPublic"
+            :open="editStreamDialog"
+            @close="editClosed"
+          />
+        </v-dialog>
       </v-card-text>
 
       <v-card-title><h5>Collaborators</h5></v-card-title>
       <v-card-text>
-        <v-row v-for="(collab, i) in stream.collaborators" :key="i">
-          <v-col sm="3">
+        <v-row v-for="(collab, i) in stream.collaborators" :key="i" no-gutters>
+          <v-col sm="3" class="mb-2">
             <user-avatar
               :id="collab.id"
               :size="40"
@@ -66,51 +71,36 @@
               :name="collab.name"
             ></user-avatar>
           </v-col>
-          <v-col>
+          <v-col class="mb-2">
             <span class="text-body-2">{{ collab.name }}</span>
             <br />
-            <span class="caption">{{ collab.role.split(":")[1] }}</span>
+            <span class="caption">{{ collab.role.split(':')[1] }}</span>
           </v-col>
         </v-row>
-        <v-btn v-if="userRole === 'owner'" block small @click="shareStream">
+        <v-btn v-if="userRole === 'owner'" block small @click="dialogShare = true">
           Manage
           <v-icon small class="ml-3">mdi-account-multiple</v-icon>
         </v-btn>
-        <!-- <v-btn
-          v-if="canEdit"
-          small
-          outlined
-          text
-          color=""
-          class="mt-3"
-          @click="shareStream"
-        >
-          Manage
-          <v-icon small class="ml-3">mdi-account-multiple</v-icon>
-        </v-btn> -->
-        <v-dialog v-model="dialogShare">
-          <h1>WIP</h1>
+        <v-dialog v-model="dialogShare" max-width="500">
+          <stream-share-dialog
+            :users="stream.collaborators"
+            :stream-id="stream.id"
+            :user-id="userId"
+            @close="dialogShare = false"
+          ></stream-share-dialog>
         </v-dialog>
-        <!--         <stream-share-dialog
-          v-if="stream"
-          ref="streamShareDialog"
-          :users="stream.collaborators"
-          :stream-id="stream.id"
-          :user-id="userId"
-        ></stream-share-dialog> -->
       </v-card-text>
     </div>
   </v-card>
 </template>
 <script>
-import gql from "graphql-tag"
-import StreamDialog from "../components/dialogs/StreamDialog"
-import StreamShareDialog from "../components/dialogs/StreamShareDialog"
-import UserAvatar from "../components/UserAvatar"
+import EditStreamDialog from '../components/dialogs/EditStreamDialog'
+import StreamShareDialog from '../components/dialogs/StreamShareDialog'
+import UserAvatar from '../components/UserAvatar'
 
 export default {
   components: {
-    StreamDialog,
+    EditStreamDialog,
     StreamShareDialog,
     UserAvatar
   },
@@ -124,70 +114,29 @@ export default {
       default: null
     }
   },
-  apollo: {},
   data: () => ({
+    editStreamDialog: false,
     dialogShare: false
   }),
   computed: {
     isHomeRoute() {
-      return this.$route.name === "stream"
+      return this.$route.name === 'stream'
     },
     userId() {
-      return localStorage.getItem("uuid")
+      return localStorage.getItem('uuid')
+    },
+    streamDate() {
+      if (!this.stream) return null
+      let date = new Date(this.stream.createdAt)
+      let options = { year: 'numeric', month: 'short', day: 'numeric' }
+
+      return date.toLocaleString(undefined, options)
     }
   },
   methods: {
-    shareStream() {
-      this.dialogShare = true
-    },
-    editStream() {
-      this.$refs.streamDialog.open(this.stream).then((dialog) => {
-        if (!dialog.result) return
-        //DELETE STREAM
-        if (dialog.delete) {
-          this.$apollo
-            .mutate({
-              mutation: gql`
-                mutation streamDelete($id: String!) {
-                  streamDelete(id: $id)
-                }
-              `,
-              variables: {
-                id: this.stream.id
-              }
-            })
-            .then((data) => {
-              this.$router.push({
-                name: "streams"
-              })
-            })
-            .catch((error) => {
-              // Error
-              console.error(error)
-            })
-          return
-        }
-        //EDIT STREAM
-        this.$apollo
-          .mutate({
-            mutation: gql`
-              mutation streamUpdate($myStream: StreamUpdateInput!) {
-                streamUpdate(stream: $myStream)
-              }
-            `,
-            variables: {
-              myStream: { ...dialog.stream }
-              //isPublic: dialog.stream.isPublic //TODO: this is not working https://github.com/specklesystems/Server/issues/30
-            }
-          })
-          .then((data) => {
-            this.$apollo.queries.stream.refetch()
-          })
-          .catch((error) => {
-            // Error
-            console.error(error)
-          })
-      })
+    editClosed() {
+      this.editStreamDialog = false
+      this.$emit('refresh')
     }
   }
 }
diff --git a/frontend/src/components/UserAvatar.vue b/frontend/src/components/UserAvatar.vue
index 024ed7f96..d7e6da1b5 100644
--- a/frontend/src/components/UserAvatar.vue
+++ b/frontend/src/components/UserAvatar.vue
@@ -2,28 +2,16 @@
   <div style="display: inline-block">
     <v-menu offset-x open-on-hover>
       <template #activator="{ on, attrs }">
-        <v-avatar
-          class="ma-1"
-          color="grey lighten-3"
-          :size="size"
-          v-bind="attrs"
-          v-on="on"
-        >
+        <v-avatar class="ma-1" color="grey lighten-3" :size="size" v-bind="attrs" v-on="on">
           <v-img v-if="avatar" :src="avatar" />
-          <v-img
-            v-else
-            :src="`https://robohash.org/` + id + `.png?size=40x40`"
-          />
+          <v-img v-else :src="`https://robohash.org/` + id + `.png?size=40x40`" />
         </v-avatar>
       </template>
       <v-card style="width: 200px" :to="isSelf ? '/profile' : '/profile/' + id">
         <v-card-text v-if="!$apollo.loading" class="text-center">
           <v-avatar class="my-4" color="grey lighten-3" :size="40">
             <v-img v-if="avatar" :src="avatar" />
-            <v-img
-              v-else
-              :src="`https://robohash.org/` + id + `.png?size=40x40`"
-            />
+            <v-img v-else :src="`https://robohash.org/` + id + `.png?size=40x40`" />
           </v-avatar>
           <br />
           <b>{{ user.name }}</b>
@@ -31,9 +19,7 @@
           {{ user.company }}
           <br />
           {{
-            user.bio
-              ? user.bio
-              : "This user prefers to keep an air of mystery around themselves."
+            user.bio ? user.bio : 'This user prefers to keep an air of mystery around themselves.'
           }}
           <br />
         </v-card-text>
@@ -42,7 +28,7 @@
   </div>
 </template>
 <script>
-import userQuery from "../graphql/userById.gql"
+import userQuery from '../graphql/userById.gql'
 
 export default {
   props: {
@@ -59,10 +45,10 @@ export default {
   },
   computed: {
     isSelf() {
-      return this.id === localStorage.getItem("uuid")
+      return this.id === localStorage.getItem('uuid')
     },
     loggedInUserId() {
-      return localStorage.getItem("uuid")
+      return localStorage.getItem('uuid')
     }
   },
   apollo: {
diff --git a/frontend/src/components/UserInfoCard.vue b/frontend/src/components/UserInfoCard.vue
index bc5404ea2..c485f96c9 100644
--- a/frontend/src/components/UserInfoCard.vue
+++ b/frontend/src/components/UserInfoCard.vue
@@ -9,6 +9,7 @@
           v-tooltip="'Change your profile picture.'"
           color="transparent"
           text
+          :disabled="!isSelf"
           class="elevation-0 pa-0 ma-0"
         >
           <v-avatar class="elevation-1" size="124" @click="avatarDialog = true">
@@ -59,7 +60,7 @@
           <b>Email:</b>
           {{ user.email }}
         </p>
-        <span v-if="isSelf" class="caption">Your user id: {{ user.id }}</span>
+        <span v-if="isSelf" class="caption">Your id: {{ user.id }}</span>
       </v-card-text>
       <v-card-actions>
         <v-btn v-if="isSelf" block small @click="userDialog = true">