feat(ui): edit commit message

frontend/src/components/dialogs/CommitDialog.vue

@@ -0,0 +1,105 @@
+<template>
+  <v-dialog v-model="show" width="500" @keydown.esc="cancel">
+    <v-card class="pa-4">
+      <v-card-title class="subtitle-1">Edit Commit</v-card-title>
+
+      <v-card-text class="pl-2 pr-2 pt-0 pb-0">
+        <v-form
+          ref="form"
+          v-model="valid"
+          lazy-validation
+          @submit.prevent="agree"
+        >
+          <v-container>
+            <v-row>
+              <v-col cols="12" class="pb-0">
+                <v-text-field
+                  v-model="commit.message"
+                  label="Message"
+                  :rules="nameRules"
+                  required
+                  filled
+                  autofocus
+                ></v-text-field>
+              </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,
+    commit: {},
+    nameRules: [],
+    valid: true
+  }),
+  computed: {
+    show: {
+      get() {
+        return this.dialog
+      },
+      set(value) {
+        this.dialog = value
+        if (value === false) {
+          this.cancel()
+        }
+      }
+    }
+  },
+  watch: {
+    "commit.name"(val) {
+      this.nameRules = []
+    }
+  },
+  methods: {
+    open(commit, streamId) {
+      this.dialog = true
+      if (this.$refs.form) this.$refs.form.resetValidation()
+
+      this.commit = {
+        message: commit.message,
+        id: commit.id,
+        streamId: streamId
+      }
+
+      return new Promise((resolve, reject) => {
+        this.resolve = resolve
+        this.reject = reject
+      })
+    },
+    agree() {
+      this.nameRules = [
+        (v) => !!v || "Please write a commit message",
+        (v) => (v && v.length >= 3) || "Message must be at least 3 characters"
+      ]
+
+      let self = this
+      setTimeout(function () {
+        if (self.$refs.form.validate()) {
+          self.resolve({
+            result: true,
+            commit: self.commit
+          })
+          self.dialog = false
+        }
+      })
+    },
+    cancel() {
+      this.resolve({
+        result: false
+      })
+      this.dialog = false
+    }
+  }
+}
+</script>

frontend/src/graphql/commit.gql

@@ -0,0 +1,36 @@
+query Stream($streamid: String!, $id: String!) {
+  stream(id: $streamid) {
+    id
+    name
+    description
+    isPublic
+    createdAt
+    updatedAt
+    collaborators {
+      id
+      name
+      role
+    }
+    branches {
+      totalCount
+    }
+    commits {
+      totalCount
+    }
+    commit(id: $id) {
+      id
+      message
+      authorName
+      authorId
+      createdAt
+      realObject {
+        id
+        speckleType
+        applicationId
+        createdAt
+        totalChildrenCount
+        data
+      }
+    }
+  }
+}

frontend/src/views/Commit.vue

@@ -8,12 +8,22 @@
         <v-row>
           <v-col class="pt-0">
             <v-card class="pa-5" elevation="0" rounded="lg">
-              <!-- <v-card-title class="mr-8">
-                {{ commit.message }}
-              </v-card-title> -->
+              <v-card-title class="mr-8">
+                {{ stream.commit.message }}
+              </v-card-title>
               <!-- TODO need an endpoint to get a commit by ID
                -->
               <v-subheader class="text-uppercase">WORK IN PROGRESS</v-subheader>
+
+              <commit-dialog ref="commitDialog"></commit-dialog>
+              <v-btn
+                small
+                icon
+                style="position: absolute; right: 15px; top: 15px"
+                @click="editBranch"
+              >
+                <v-icon small>mdi-pencil-outline</v-icon>
+              </v-btn>
             </v-card>
           </v-col>
         </v-row>
@@ -22,40 +32,61 @@
   </v-container>
 </template>
 <script>
+import gql from "graphql-tag"
 import SidebarStream from "../components/SidebarStream"
-import streamQuery from "../graphql/stream.gql"
+import streamCommitQuery from "../graphql/commit.gql"
+import CommitDialog from "../components/dialogs/CommitDialog"
 
 export default {
   name: "Commit",
-  components: { SidebarStream },
+  components: { SidebarStream, CommitDialog },
   data: () => ({ selectedBranch: 0 }),
   apollo: {
     stream: {
       prefetch: true,
-      query: streamQuery,
+      query: streamCommitQuery,
       variables() {
         // Use vue reactive properties here
         return {
-          id: this.$route.params.streamid
+          streamid: this.$route.params.streamId,
+          id: this.$route.params.commitId
         }
       }
     }
-    // commit: {
-    //   prefetch: true,
-    //   query: streamQuery,
-    //   variables() {
-    //     // Use vue reactive properties here
-    //     return {
-    //       id: this.$route.params.id
-    //     }
-    //   }
-    // }
   },
   computed: {},
   watch: {
     stream(val) {
       console.log(val)
     }
+  },
+  methods: {
+    editBranch() {
+      this.$refs.commitDialog
+        .open(this.stream.commit, this.stream.id)
+        .then((dialog) => {
+          if (!dialog.result) return
+
+          this.$apollo
+            .mutate({
+              mutation: gql`
+                mutation commitUpdate($myCommit: CommitUpdateInput!) {
+                  commitUpdate(commit: $myCommit)
+                }
+              `,
+              variables: {
+                myCommit: { ...dialog.commit }
+              }
+            })
+            .then((data) => {
+              this.$apollo.queries.stream.refetch()
+            })
+            .catch((error) => {
+              // Error
+              console.error(error)
+            })
+        })
+    }
   }
 }
 </script>