Feature: PinEdit works well

pinry-spa/src/components/PHeader.vue

@@ -127,8 +127,6 @@ export default {
     onSignUpSucceed() {
       this.initializeUser(true);
     },
-    onPinCreated() {
-    },
     logOut() {
       api.User.logOut().then(
         () => {
@@ -140,9 +138,8 @@ export default {
       modals.openLogin(this, this.onLoginSucceed);
     },
     createPin() {
-      modals.openPinCreate(
+      modals.openPinEdit(
         this,
-        this.onPinCreated,
         { username: this.user.meta.username },
       );
     },

pinry-spa/src/components/api.js

@@ -92,6 +92,13 @@ const Pin = {
       url,
     );
   },
+  updateById(pinId, data) {
+    const url = `${API_PREFIX}pins/${pinId}/`;
+    return axios.patch(
+      url,
+      data,
+    );
+  },
 };
 
 

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

@@ -22,7 +22,7 @@
            custom-size="mdi-24px">
          </b-icon>
       </span>
-      <span class="icon-container" v-if="isOwner">
+      <span class="icon-container" v-if="isOwner" @click="editPin">
        <b-icon
          type="is-light"
          icon="pencil"
@@ -90,6 +90,17 @@ export default {
         },
       });
     },
+    editPin() {
+      const props = {
+        username: this.currentUsername,
+        existedPin: this.pin,
+        isEdit: true,
+      };
+      modals.openPinEdit(
+        this,
+        props,
+      );
+    },
     deletePin() {
       this.$buefy.dialog.confirm({
         message: 'Delete this Pin?',

pinry-spa/src/components/modals.js

@@ -5,16 +5,13 @@ import BoardEdit from './BoardEdit.vue';
 import Add2Board from './pin_edit/Add2Board.vue';
 
 
-function openPinCreate(vm, onCreate, props = null) {
+function openPinEdit(vm, props = null) {
   vm.$buefy.modal.open(
     {
       parent: vm,
       component: PinCreateModal,
       props,
       hasModalCard: true,
-      events: {
-        'create.succeed': onCreate,
-      },
     },
   );
 }
@@ -83,7 +80,7 @@ export default {
   openBoardCreate,
   openBoardEdit,
   openAdd2Board,
-  openPinCreate,
+  openPinEdit,
   openLogin,
   openSignUp,
 };

pinry-spa/src/components/pin_edit/PinCreateModal.vue

@@ -3,47 +3,47 @@
     <form action="">
       <div class="modal-card" style="width: auto">
         <header class="modal-card-head">
-          <p class="modal-card-title">New Pin</p>
+          <p class="modal-card-title">{{ editorMeta.title }}</p>
         </header>
         <section class="modal-card-body">
           <div class="columns">
             <div class="column">
               <FileUpload
-                :previewImageURL="createModel.form.url.value"
+                :previewImageURL="pinModel.form.url.value"
                 v-on:imageUploadSucceed="onUploadDone"
                 v-on:imageUploadProcessing="onUploadProcessing"
               ></FileUpload>
             </div>
             <div class="column">
               <b-field label="Image URL"
-                       v-show="!disableUrlField"
+                       v-show="!disableUrlField && !isEdit"
-                       :type="createModel.form.url.type"
+                       :type="pinModel.form.url.type"
-                       :message="createModel.form.url.error">
+                       :message="pinModel.form.url.error">
                 <b-input
                   type="text"
-                  v-model="createModel.form.url.value"
+                  v-model="pinModel.form.url.value"
                   placeholder="where to fetch the image"
                   maxlength="256"
                 >
                 </b-input>
               </b-field>
               <b-field label="Image Referer"
-                       :type="createModel.form.referer.type"
+                       :type="pinModel.form.referer.type"
-                       :message="createModel.form.referer.error">
+                       :message="pinModel.form.referer.error">
                 <b-input
                   type="text"
-                  v-model="createModel.form.referer.value"
+                  v-model="pinModel.form.referer.value"
                   placeholder="where to find the pin"
                   maxlength="256"
                 >
                 </b-input>
               </b-field>
               <b-field label="Descripton"
-                       :type="createModel.form.description.type"
+                       :type="pinModel.form.description.type"
-                       :message="createModel.form.description.error">
+                       :message="pinModel.form.description.error">
                 <b-input
                   type="textarea"
-                  v-model="createModel.form.description.value"
+                  v-model="pinModel.form.description.value"
                   placeholder="idea from this pin"
                   maxlength="1024"
                 >
@@ -51,14 +51,14 @@
               </b-field>
               <b-field label="Tags">
                 <b-taginput
-                  v-model="createModel.form.tags.value"
+                  v-model="pinModel.form.tags.value"
                   ellipsis
                   icon="label"
                   placeholder="Add a tag">
                 </b-taginput>
               </b-field>
             </div>
-            <div class="column">
+            <div class="column" v-if="!isEdit">
               <FilterSelect
                 :allOptions="boardOptions"
                 v-on:selected="onSelectBoard"
@@ -69,9 +69,15 @@
         <footer class="modal-card-foot">
           <button class="button" type="button" @click="$parent.close()">Close</button>
           <button
+            v-if="!isEdit"
             @click="createPin"
             class="button is-primary">Create Pin
           </button>
+          <button
+            v-if="isEdit"
+            @click="savePin"
+            class="button is-primary">Save Changes
+          </button>
         </footer>
       </div>
     </form>
@@ -93,26 +99,49 @@ const fields = ['url', 'referer', 'description', 'tags'];
 
 export default {
   name: 'PinCreateModal',
-  props: ['username'],
+  props: {
+    username: {
+      type: String,
+      default: null,
+    },
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
+    existedPin: {
+      type: Object,
+      default: null,
+    },
+  },
   components: {
     FileUpload,
     FilterSelect,
   },
   data() {
-    const createModel = ModelForm.fromFields(fields);
+    const pinModel = ModelForm.fromFields(fields);
-    createModel.form.tags.value = [];
+    pinModel.form.tags.value = [];
     return {
       disableUrlField: false,
-      createModel,
+      pinModel,
       formUpload: {
         imageId: null,
       },
       boardId: null,
       boardOptions: [],
+      editorMeta: {
+        title: 'New Pin',
+      },
     };
   },
   created() {
     this.fetchBoardList();
+    if (this.isEdit) {
+      this.editorMeta.title = 'Edit Pin';
+      this.pinModel.form.url.value = this.existedPin.url;
+      this.pinModel.form.referer.value = this.existedPin.referer;
+      this.pinModel.form.description.value = this.existedPin.description;
+      this.pinModel.form.tags.value = this.existedPin.tags;
+    }
   },
   methods: {
     fetchBoardList() {
@@ -141,17 +170,31 @@ export default {
     onUploadDone(imageId) {
       this.formUpload.imageId = imageId;
     },
+    savePin() {
+      const self = this;
+      const data = this.pinModel.asDataByFields(
+        ['referer', 'description', 'tags'],
+      );
+      const promise = API.Pin.updateById(this.existedPin.id, data);
+      promise.then(
+        (resp) => {
+          bus.bus.$emit(bus.events.refreshPin);
+          self.$emit('pinUpdated', resp);
+          self.$parent.close();
+        },
+      );
+    },
     createPin() {
       const self = this;
       let promise;
-      if (isURLBlank(this.createModel.form.url.value) && this.formUpload.imageId === null) {
+      if (isURLBlank(this.pinModel.form.url.value) && this.formUpload.imageId === null) {
         return;
       }
       if (this.formUpload.imageId === null) {
-        const data = this.createModel.asDataByFields(fields);
+        const data = this.pinModel.asDataByFields(fields);
         promise = API.Pin.createFromURL(data);
       } else {
-        const data = this.createModel.asDataByFields(
+        const data = this.pinModel.asDataByFields(
           ['referer', 'description', 'tags'],
         );
         data.image_by_id = this.formUpload.imageId;