From 46acb27dca58dee73769d1eaa04c1503ea44ae45 Mon Sep 17 00:00:00 2001
From: Matteo Cominetti <matteo@cominetti.org>
Date: Thu, 8 Oct 2020 10:42:08 +0100
Subject: [PATCH] feat(ui): adds new stream dialog

---
 frontend/src/components/SidebarStream.vue     |  2 +-
 frontend/src/components/dialogs/NewBranch.vue |  2 +
 frontend/src/components/dialogs/NewStream.vue | 85 +++++++++++++++++++
 frontend/src/views/Stream.vue                 | 39 ++++++++-
 frontend/src/views/Streams.vue                | 53 +++++++++++-
 5 files changed, 174 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/dialogs/NewStream.vue

diff --git a/frontend/src/components/SidebarStream.vue b/frontend/src/components/SidebarStream.vue
index ccec83682..dfed77e9b 100644
--- a/frontend/src/components/SidebarStream.vue
+++ b/frontend/src/components/SidebarStream.vue
@@ -49,7 +49,7 @@
       </v-card-text>
     </v-card>
 
-    <v-card rounded="lg" class="mt-2 pa-4" elevation="0">
+    <v-card rounded="lg" class="mt-5 pa-4" elevation="0">
       <v-card-title class="subtitle-1">Collaborators</v-card-title>
       <v-card-actions class="ml-2 mr-2">
         <v-btn small fab color="primary">
diff --git a/frontend/src/components/dialogs/NewBranch.vue b/frontend/src/components/dialogs/NewBranch.vue
index e8353e615..4f2e053b8 100644
--- a/frontend/src/components/dialogs/NewBranch.vue
+++ b/frontend/src/components/dialogs/NewBranch.vue
@@ -59,6 +59,8 @@ export default {
   methods: {
     open() {
       this.dialog = true
+      this.name = ""
+      this.description = ""
       return new Promise((resolve, reject) => {
         this.resolve = resolve
         this.reject = reject
diff --git a/frontend/src/components/dialogs/NewStream.vue b/frontend/src/components/dialogs/NewStream.vue
new file mode 100644
index 000000000..586a34717
--- /dev/null
+++ b/frontend/src/components/dialogs/NewStream.vue
@@ -0,0 +1,85 @@
+<template>
+  <v-dialog v-model="show" width="500" @keydown.esc="cancel">
+    <v-card class="pa-4">
+      <v-card-title class="subtitle-1">New Stream</v-card-title>
+
+      <v-card-text class="pl-2 pr-2 pt-0 pb-0">
+        <v-form>
+          <v-container>
+            <v-row>
+              <v-col cols="12" class="pb-0">
+                <v-text-field
+                  v-model="name"
+                  label="Name"
+                  required
+                  filled
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" class="pt-0 pb-0">
+                <v-textarea
+                  v-model="description"
+                  filled
+                  rows="2"
+                  label="Description"
+                ></v-textarea>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-form>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="primary" text @click.native="agree">Create</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+<script>
+export default {
+  data: () => ({
+    dialog: false,
+    name: "",
+    description: ""
+  }),
+  computed: {
+    show: {
+      get() {
+        return this.dialog
+      },
+      set(value) {
+        this.dialog = value
+        if (value === false) {
+          this.cancel()
+        }
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.dialog = true
+      this.name = ""
+      this.description = ""
+      return new Promise((resolve, reject) => {
+        this.resolve = resolve
+        this.reject = reject
+      })
+    },
+    agree() {
+      this.resolve({
+        result: true,
+        name: this.name,
+        description: this.description
+      })
+      this.dialog = false
+    },
+    cancel() {
+      this.resolve({
+        result: false
+      })
+      this.dialog = false
+    }
+  }
+}
+</script>
diff --git a/frontend/src/views/Stream.vue b/frontend/src/views/Stream.vue
index 7ff970789..351a62d10 100644
--- a/frontend/src/views/Stream.vue
+++ b/frontend/src/views/Stream.vue
@@ -11,12 +11,13 @@
               <v-subheader class="text-uppercase">Branches:</v-subheader>
 
               <v-chip-group
+                v-model="selectedBranch"
                 mandatory
                 class="ml-3"
                 active-class="primary--text text--accent-1"
               >
                 <v-chip
-                  v-for="(branch, i) in stream.branches.items"
+                  v-for="(branch, i) in branches"
                   :key="i"
                   class="mb-3"
                   small
@@ -37,6 +38,13 @@
               <new-branch ref="newBranchDialog"></new-branch>
 
               <div class="clear"></div>
+
+              <p
+                v-if="branches[selectedBranch].description"
+                class="subtitle-1 font-weight-light ml-4 mt-2"
+              >
+                {{ branches[selectedBranch].description }}
+              </p>
             </v-card>
           </v-col>
         </v-row>
@@ -44,6 +52,25 @@
           <v-col>
             <v-card rounded="lg" class="pa-5" elevation="0">
               <v-subheader class="text-uppercase">Commits:</v-subheader>
+
+              <v-card-text>
+                <p
+                  v-if="branches[selectedBranch].commits.items.length === 0"
+                  class="subtitle-1 font-weight-light"
+                >
+                  There are no commits in this 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? -->
+                </div>
+              </v-card-text>
             </v-card>
           </v-col>
         </v-row>
@@ -72,9 +99,15 @@ export default {
       }
     }
   },
-  data: () => ({}),
+  data: () => ({ selectedBranch: 0 }),
+  computed: {
+    branches() {
+      //reverse without changing original array
+      return this.stream.branches.items.slice().reverse()
+    }
+  },
   watch: {
-    stream(val) {
+    selectedBranch(val) {
       console.log(val)
     }
   },
diff --git a/frontend/src/views/Streams.vue b/frontend/src/views/Streams.vue
index 13d9f4439..4e4ccd106 100644
--- a/frontend/src/views/Streams.vue
+++ b/frontend/src/views/Streams.vue
@@ -4,9 +4,22 @@
       <v-col cols="3">
         <sidebar-home></sidebar-home>
       </v-col>
-      <v-col cols="9">
+      <v-col v-if="user" cols="9">
         <v-card rounded="lg" class="pa-5" elevation="0">
           <v-card-title>Your Streams</v-card-title>
+          <v-btn
+            class="ml-3 mt-5 text-right"
+            color="primary"
+            elevation="0"
+            small
+            @click="newStream"
+          >
+            <v-icon small class="mr-1">mdi-plus-box-outline</v-icon>
+            new stream
+          </v-btn>
+
+          <new-stream ref="newStreamDialog"></new-stream>
+
           <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>
@@ -19,20 +32,54 @@
   </v-container>
 </template>
 <script>
+import gql from "graphql-tag"
 import StreamBox from "../components/StreamBox"
 import SidebarHome from "../components/SidebarHome"
+import NewStream from "../components/dialogs/NewStream"
 import userQuery from "../graphql/user.gql"
 
 export default {
   name: "Streams",
-  components: { StreamBox, SidebarHome },
+  components: { StreamBox, SidebarHome, NewStream },
   apollo: {
     user: {
       prefetch: true,
       query: userQuery
     }
   },
-  data: () => ({})
+  data: () => ({}),
+  methods: {
+    newStream() {
+      this.$refs.newStreamDialog.open().then((dialog) => {
+        if (!dialog.result) return
+
+        this.$apollo
+          .mutate({
+            mutation: gql`
+              mutation streamCreate($myStream: StreamCreateInput!) {
+                streamCreate(stream: $myStream)
+              }
+            `,
+            variables: {
+              myStream: {
+                name: dialog.name,
+                description: dialog.description
+              }
+            }
+          })
+          .then((data) => {
+            // Result
+            console.log(data)
+
+            this.$apollo.queries.user.refetch()
+          })
+          .catch((error) => {
+            // Error
+            console.error(error)
+          })
+      })
+    }
+  }
 }
 </script>
 <style>