Update label page

frontend/api/routes/labels.js

@@ -37,7 +37,7 @@ router.get('/:labelId', (req, res) => {
 })
 
 // Update a label.
-router.put('/:labelId', (req, res) => {
+router.patch('/:labelId', (req, res) => {
   const labelIndex = db.findIndex(item => item.id === parseInt(req.params.labelId))
   if (labelIndex !== -1) {
     db[labelIndex] = req.body

frontend/components/containers/LabelList.vue

@@ -0,0 +1,61 @@
+<template>
+  <label-list
+    :headers="headers"
+    :labels="items"
+    :selected="selected"
+    @update-selected="updateSelected"
+    @update-label="handleUpdateLabel"
+  />
+</template>
+
+<script>
+import { mapState, mapActions, mapMutations } from 'vuex'
+import LabelList from '@/components/organisms/LabelList'
+
+export default {
+  components: {
+    LabelList
+  },
+  data() {
+    return {
+      headers: [
+        {
+          text: 'Name',
+          align: 'left',
+          value: 'text'
+        },
+        {
+          text: 'Shortkey',
+          value: 'suffix_key'
+        },
+        {
+          text: 'Color',
+          sortable: false,
+          value: 'background_color'
+        }
+      ]
+    }
+  },
+
+  computed: {
+    ...mapState('labels', ['items', 'selected'])
+  },
+
+  created() {
+    this.getLabelList()
+  },
+
+  methods: {
+    ...mapActions('labels', ['getLabelList', 'updateLabel']),
+    ...mapMutations('labels', ['updateSelected']),
+
+    handleUpdateLabel(payload) {
+      const data = {
+        projectId: this.$route.params.id,
+        ...payload
+      }
+      this.updateLabel(data)
+    }
+  }
+}
+</script>

frontend/components/organisms/LabelList.vue

@@ -0,0 +1,139 @@
+<template>
+  <v-data-table
+    :value="selected"
+    :headers="headers"
+    :items="labels"
+    item-key="id"
+    :search="search"
+    show-select
+    @input="update"
+  >
+    <template v-slot:top>
+      <v-text-field
+        v-model="search"
+        prepend-inner-icon="search"
+        label="Search"
+        single-line
+        hide-details
+        filled
+      />
+    </template>
+    <template v-slot:item.text="{ item }">
+      <v-edit-dialog
+        :return-value.sync="item.text"
+      >
+        {{ item.text }}
+        <template v-slot:input>
+          <v-text-field
+            v-model="item.text"
+            label="Edit"
+            single-line
+          />
+        </template>
+      </v-edit-dialog>
+    </template>
+    <template v-slot:item.suffix_key="{ item }">
+      <v-edit-dialog
+        :return-value.sync="item.suffix_key"
+        large
+        persistent
+        @save="updateShortcut({ id: item.id, suffix_key: newKey })"
+      >
+        <div>{{ item.suffix_key }}</div>
+        <template v-slot:input>
+          <div class="mt-4 title">
+            Update key
+          </div>
+        </template>
+        <template v-slot:input>
+          <v-select
+            :value="item.suffix_key"
+            :items="keys"
+            label="Key"
+            @input="setNewKey"
+          />
+        </template>
+      </v-edit-dialog>
+    </template>
+    <template v-slot:item.background_color="{ item }">
+      <v-edit-dialog
+        :return-value.sync="item.background_color"
+        large
+        persistent
+        @save="updateColor({ id:item.id, background_color: newColor })"
+      >
+        <v-chip :color="item.background_color" dark>
+          {{ item.background_color }}
+        </v-chip>
+        <template v-slot:input>
+          <div class="mt-4 title">
+            Update color
+          </div>
+        </template>
+        <template v-slot:input>
+          <v-color-picker
+            :value="item.backgroundColor"
+            show-swatches
+            hide-mode-switch
+            width="800"
+            :mode.sync="mode"
+            class="ma-2"
+            @input="setNewColor"
+          />
+        </template>
+      </v-edit-dialog>
+    </template>
+  </v-data-table>
+</template>
+
+<script>
+export default {
+  props: {
+    headers: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    labels: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    selected: {
+      type: Array,
+      default: () => [],
+      required: true
+    }
+  },
+  data() {
+    return {
+      search: '',
+      newKey: null,
+      newColor: null,
+      keys: 'abcdefghijklmnopqrstuvwxyz'.split(''),
+      mode: 'hexa',
+      color: '#FF00FF'
+    }
+  },
+  methods: {
+    setNewKey(value) {
+      this.newKey = value
+    },
+    setNewColor(value) {
+      this.newColor = value
+    },
+    update(selected) {
+      this.$emit('update-selected', selected)
+    },
+    updateRole(payload) {
+      this.$emit('update-role', payload)
+    },
+    updateShortcut(payload) {
+      this.$emit('update-label', payload)
+    },
+    updateColor(payload) {
+      this.$emit('update-label', payload)
+    }
+  }
+}
+</script>

frontend/pages/projects/_id/labels/index.vue

@@ -1,4 +1,14 @@
 <template>
+  <v-card>
+    <v-card-title>
+      <!--
+      <member-addition-button />
+      <member-deletion-button />
+      -->
+    </v-card-title>
+    <label-list />
+  </v-card>
+  <!--
   <v-content>
     <v-container
       fluid
@@ -10,13 +20,6 @@
         <v-flex>
           <v-card>
             <v-card-title>
-              <v-btn
-                class="mb-2 text-capitalize"
-                color="primary"
-                @click="openAddModal"
-              >
-                Add Label
-              </v-btn>
               <Modal
                 ref="childDialogue"
                 :title="addModal.title"
@@ -40,14 +43,6 @@
                   class="ma-2"
                 />
               </Modal>
-              <v-btn
-                class="mb-2 ml-2 text-capitalize"
-                outlined
-                :disabled="selected.length === 0"
-                @click="openRemoveModal"
-              >
-                Remove
-              </v-btn>
               <Modal
                 ref="removeDialogue"
                 :title="removeModal.title"
@@ -63,191 +58,24 @@
                 </v-list>
               </Modal>
             </v-card-title>
-            <v-data-table
-              v-model="selected"
-              :headers="headers"
-              :items="labels"
-              item-key="id"
-              :search="search"
-              show-select
-            >
-              <template v-slot:top>
-                <v-text-field
-                  v-model="search"
-                  prepend-inner-icon="search"
-                  label="Search"
-                  single-line
-                  hide-details
-                  filled
-                />
-              </template>
-              <template v-slot:item.name="{ item }">
-                <v-edit-dialog
-                  :return-value.sync="item.name"
-                >
-                  {{ item.name }}
-                  <template v-slot:input>
-                    <v-text-field
-                      v-model="item.name"
-                      label="Edit"
-                      single-line
-                    />
-                  </template>
-                </v-edit-dialog>
-              </template>
-              <template v-slot:item.shortcut="{ item }">
-                <v-edit-dialog
-                  :return-value.sync="item.shortcut"
-                  large
-                  persistent
-                  @save="save"
-                >
-                  <div>{{ item.shortcut }}</div>
-                  <template v-slot:input>
-                    <div class="mt-4 title">
-                      Update key
-                    </div>
-                  </template>
-                  <template v-slot:input>
-                    <v-select
-                      v-model="item.shortcut"
-                      :items="keys"
-                      label="Key"
-                    />
-                  </template>
-                </v-edit-dialog>
-              </template>
-              <template v-slot:item.color="{ item }">
-                <v-edit-dialog
-                  :return-value.sync="item.color"
-                  large
-                  persistent
-                  @save="save"
-                >
-                  <v-chip :color="item.color" dark>
-                    {{ item.color }}
-                  </v-chip>
-                  <template v-slot:input>
-                    <div class="mt-4 title">
-                      Update color
-                    </div>
-                  </template>
-                  <template v-slot:input>
-                    <v-color-picker
-                      v-model="item.color"
-                      show-swatches
-                      hide-mode-switch
-                      width="800"
-                      :mode.sync="mode"
-                      class="ma-2"
-                    />
-                  </template>
-                </v-edit-dialog>
-              </template>
-            </v-data-table>
           </v-card>
         </v-flex>
       </v-layout>
     </v-container>
   </v-content>
+  -->
 </template>
 
 <script>
-import Modal from '~/components/Modal'
+import LabelList from '@/components/containers/LabelList'
 
 export default {
   layout: 'project',
   components: {
-    Modal
+    LabelList
   },
-  data: () => ({
-    dialog: false,
-    search: '',
-    isLoading: false,
-    selected: [],
-    selectedUser: null,
-    keys: 'abcdefghijklmnopqrstuvwxyz'.split(''),
-    mode: 'hexa',
-    color: '#FF00FF',
-    addModal: {
-      title: 'Add Label',
-      button: 'Add Label'
-    },
-    removeModal: {
-      title: 'Remove Label',
-      button: 'Yes, remove'
-    },
-    headers: [
-      {
-        text: 'Name',
-        align: 'left',
-        value: 'name'
-      },
-      {
-        text: 'Shortkey',
-        value: 'shortcut'
-      },
-      {
-        text: 'Color',
-        sortable: false,
-        value: 'color'
-      }
-    ],
-    labels: [
-      {
-        id: 1,
-        name: 'Location',
-        color: '#E91E63',
-        shortcut: 'l',
-        fat: 6.0
-      },
-      {
-        id: 2,
-        name: 'Organization',
-        color: '#03A9F4',
-        shortcut: 'o',
-        fat: 9.0
-      },
-      {
-        id: 3,
-        name: 'Person',
-        color: '#009688',
-        shortcut: 'p',
-        fat: 16.0
-      },
-      {
-        id: 4,
-        name: 'Money',
-        color: '#FF6F00',
-        shortcut: 'm',
-        fat: 3.7
-      },
-      {
-        id: 5,
-        name: 'Other',
-        color: '#333333',
-        shortcut: 't',
-        fat: 16.0
-      }
-    ]
-  }),
-
-  methods: {
-    save() {
-      // send server
-    },
-    cancel() {
-    },
-    open() {
-    },
-    close() {
-    },
-    openAddModal() {
-      this.$refs.childDialogue.open()
-    },
-    openRemoveModal() {
-      this.$refs.removeDialogue.open()
-    }
+  validate({ params }) {
+    return /^\d+$/.test(params.id)
   }
 }
 </script>

frontend/services/label.service.js

@@ -1,32 +1,29 @@
 import ApiService from '@/services/api.service'
 
-class MemberService {
+class LabelService {
   constructor() {
     this.request = new ApiService()
   }
 
-  getMemberList(projectId) {
-    return this.request.get(`/projects/${projectId}/users`)
+  getLabelList(projectId) {
+    return this.request.get(`/projects/${projectId}/labels`)
   }
 
-  addMember(projectId, userId, role) {
-    const data = {
-      id: userId,
-      role
-    }
-    return this.request.post(`/projects/${projectId}/users`, data)
+  addLabel(projectId, payload) {
+    return this.request.post(`/projects/${projectId}/labels`, payload)
   }
 
-  deleteMember(projectId, userId) {
-    return this.request.delete(`/projects/${projectId}/users/${userId}`)
+  deleteLabel(projectId, labelId) {
+    return this.request.delete(`/projects/${projectId}/labels/${labelId}`)
   }
 
-  updateMemberRole(projectId, userId, role) {
+  updateLabel(projectId, labelId, payload) {
     const data = {
-      role
+      id: labelId,
+      ...payload
     }
-    return this.request.patch(`/projects/${projectId}/users/${userId}`, data)
+    return this.request.patch(`/projects/${projectId}/labels/${labelId}`, data)
   }
 }
 
-export default new MemberService()
+export default new LabelService()

frontend/store/labels.js

@@ -53,7 +53,7 @@ export const actions = {
       })
   },
   updateLabel({ commit }, data) {
-    LabelService.updateLabel(data.projectId, data.labelId, data)
+    LabelService.updateLabel(data.projectId, data.id, data)
       .then((response) => {
         commit('updateLabel', response)
       })