feat(frontend): ... more stuff. got bored to make actual atomic commits

2020-12-20 02:21:14 +02:00
parent a4aa7afa85
commit 147f215ff9
8 changed files with 96 additions and 244 deletions
@@ -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>
@@ -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 },
@@ -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)
    }
@@ -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 },
@@ -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>
@@ -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')
    }
  }
 }
@@ -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: {
@@ -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">