Feature: Add board edit function (board name could be changed)

pinry-spa/src/components/BoardEdit.vue

@@ -3,27 +3,48 @@
     <form action="">
       <div class="modal-card" style="width: auto">
         <header class="modal-card-head">
-          <p class="modal-card-title">Board Create</p>
+          <p class="modal-card-title">{{ UIMeta.title }}</p>
         </header>
         <section class="modal-card-body">
-              <b-field label="Name"
-                       :type="form.name.type"
-                       :message="form.name.error">
+          <div v-if="!isEdit">
+            <b-field label="Name"
+                       :type="createModel.form.name.type"
+                       :message="createModel.form.name.error">
                 <b-input
                   type="text"
-                  v-model="form.name.value"
+                  v-model="createModel.form.name.value"
                   placeholder="board name"
                   maxlength="128"
                   >
                 </b-input>
               </b-field>
+          </div>
+          <div v-if="isEdit">
+            <b-field label="Name"
+                       :type="editModel.form.name.type"
+                       :message="editModel.form.name.error">
+                <b-input
+                  type="text"
+                  v-model="editModel.form.name.value"
+                  placeholder="board name"
+                  maxlength="128"
+                  >
+                </b-input>
+              </b-field>
+          </div>
         </section>
         <footer class="modal-card-foot">
           <button class="button" type="button" @click="$parent.close()">Close</button>
           <button
+            v-if="!isEdit"
             @click="createBoard"
             class="button is-primary">Create Board
           </button>
+          <button
+            v-if="isEdit"
+            @click="saveBoardChanges"
+            class="button is-primary">Save Changes
+          </button>
         </footer>
       </div>
     </form>
@@ -39,23 +60,61 @@ const fields = ['name'];
 export default {
   name: 'BoardEditModal',
   data() {
-    const model = ModelForm.fromFields(fields);
+    const createModel = ModelForm.fromFields(fields);
+    const editModel = ModelForm.fromFields(fields);
     return {
-      form: model.form,
-      helper: model,
+      UIMeta: {
+        title: 'Board Create',
+      },
+      createModel,
+      editModel,
     };
   },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
+    board: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  created() {
+    if (this.isEdit) {
+      this.UIMeta.title = 'Board Edit';
+      this.editModel.assignToForm(this.board);
+    }
+  },
   methods: {
+    saveBoardChanges() {
+      const self = this;
+      const promise = API.Board.saveChanges(
+        this.board.id,
+        this.editModel.asData(),
+      );
+      promise.then(
+        (resp) => {
+          self.$emit('boardSaved', resp);
+          self.$parent.close();
+        },
+        (resp) => {
+          self.editModel.markFieldsAsDanger(resp.data);
+        },
+      );
+    },
     createBoard() {
       const self = this;
-      const promise = API.Board.create(this.form.name.value);
+      const promise = API.Board.create(this.createModel.form.name.value);
       promise.then(
         (resp) => {
           self.$emit('boardCreated', resp);
           self.$parent.close();
         },
         (resp) => {
-          self.helper.markFieldsAsDanger(resp.data);
+          self.createModel.markFieldsAsDanger(resp.data);
         },
       );
     },

pinry-spa/src/components/Boards.vue

@@ -24,6 +24,7 @@
                       v-show="shouldShowEdit(item.id)"
                       :board="item"
                       v-on:board-delete-succeed="reset"
+                      v-on:board-save-succeed="reset"
                     ></BoardEditorUI>
                     <router-link :to="{ name: 'board', params: { boardId: item.id } }">
                       <img :src="item.preview_image_url"

pinry-spa/src/components/api.js

@@ -27,6 +27,13 @@ const Board = {
     const url = `${API_PREFIX}boards-auto-complete/?submitter__username=${username}`;
     return axios.get(url);
   },
+  saveChanges(boardId, fieldsForm) {
+    const url = `${API_PREFIX}boards/${boardId}/`;
+    return axios.patch(
+      url,
+      fieldsForm,
+    );
+  },
   addToBoard(boardId, pinIds) {
     const url = `${API_PREFIX}boards/${boardId}/`;
     return axios.patch(

pinry-spa/src/components/editors/BoardEditUI.vue

@@ -8,7 +8,7 @@
            custom-size="mdi-24px">
          </b-icon>
       </span>
-      <span class="icon-container">
+      <span class="icon-container" @click="editBoard">
        <b-icon
          type="is-light"
          icon="pencil"
@@ -21,6 +21,8 @@
 
 <script>
 import API from '../api';
+import modals from '../modals';
+
 
 export default {
   name: 'BoardEditor',
@@ -33,6 +35,16 @@ export default {
     },
   },
   methods: {
+    onBoardSaved() {
+      this.$emit('board-save-succeed');
+    },
+    editBoard() {
+      modals.openBoardEdit(
+        this,
+        this.board,
+        this.onBoardSaved,
+      );
+    },
     deleteBoard() {
       this.$buefy.dialog.confirm({
         message: 'Delete this Board?',

pinry-spa/src/components/modals.js

@@ -28,6 +28,23 @@ function openBoardCreate(vm) {
   );
 }
 
+function openBoardEdit(vm, board, onSaved) {
+  vm.$buefy.modal.open(
+    {
+      parent: vm,
+      component: BoardEdit,
+      props: {
+        board,
+        isEdit: true,
+      },
+      events: {
+        boardSaved: onSaved,
+      },
+      hasModalCard: true,
+    },
+  );
+}
+
 function openLogin(vm, onSucceed) {
   vm.$buefy.modal.open({
     parent: vm,
@@ -52,6 +69,7 @@ function openSignUp(vm, onSignUpSucceed) {
 
 export default {
   openBoardCreate,
+  openBoardEdit,
   openPinCreate,
   openLogin,
   openSignUp,

pinry-spa/src/components/utils/ModelForm.js

@@ -24,8 +24,8 @@ function FormHelper(form, fields = []) {
     self[fieldName].error = errorMsg;
     self[fieldName].type = 'is-danger';
   }
-  function markFieldsAsDanger(errorRespObjecct) {
-    Object.entries(errorRespObjecct).forEach(
+  function markFieldsAsDanger(errorRespObject) {
+    Object.entries(errorRespObject).forEach(
       (errorTuple) => {
         const [key, error] = errorTuple;
         let msg;
@@ -38,6 +38,26 @@ function FormHelper(form, fields = []) {
       },
     );
   }
+  function asData() {
+    const data = {};
+    Object.entries(form).forEach(
+      (formField) => {
+        const [name, value] = formField;
+        data[name] = value.value;
+      },
+    );
+    return data;
+  }
+  function assignToForm(data) {
+    Object.entries(data).forEach(
+      (dataField) => {
+        const [key, value] = dataField;
+        if (key in self) {
+          self[key].value = value;
+        }
+      },
+    );
+  }
   function resetAllFields() {
     fields.forEach(
       (fieldName) => {
@@ -46,11 +66,13 @@ function FormHelper(form, fields = []) {
     );
   }
   return {
-    form,
+    form: self,
     fields,
     markFieldsAsDanger,
     markFieldAsDanger,
     resetField,
+    asData,
+    assignToForm,
     resetAllFields,
   };
 }