From 98fbdf63f3bdac720fd514ae0ca7c04243445164 Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Sat, 7 Dec 2019 18:24:14 +0800
Subject: [PATCH] Refactor: Use form utils in PinCreateModal

---
 .../components/pin_edit/PinCreateModal.vue    | 47 ++++++++-----------
 pinry-spa/src/components/utils/ModelForm.js   | 12 +++++
 2 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/pinry-spa/src/components/pin_edit/PinCreateModal.vue b/pinry-spa/src/components/pin_edit/PinCreateModal.vue
index 32db3cb..e9400af 100644
--- a/pinry-spa/src/components/pin_edit/PinCreateModal.vue
+++ b/pinry-spa/src/components/pin_edit/PinCreateModal.vue
@@ -9,7 +9,7 @@
           <div class="columns">
             <div class="column">
               <FileUpload
-                :previewImageURL="form.url.value"
+                :previewImageURL="createModel.form.url.value"
                 v-on:imageUploadSucceed="onUploadDone"
                 v-on:imageUploadProcessing="onUploadProcessing"
               ></FileUpload>
@@ -17,33 +17,33 @@
             <div class="column">
               <b-field label="Image URL"
                        v-show="!disableUrlField"
-                       :type="form.url.type"
-                       :message="form.url.error">
+                       :type="createModel.form.url.type"
+                       :message="createModel.form.url.error">
                 <b-input
                   type="text"
-                  v-model="form.url.value"
+                  v-model="createModel.form.url.value"
                   placeholder="where to fetch the image"
                   maxlength="256"
                 >
                 </b-input>
               </b-field>
               <b-field label="Image Referer"
-                       :type="form.referer.type"
-                       :message="form.referer.error">
+                       :type="createModel.form.referer.type"
+                       :message="createModel.form.referer.error">
                 <b-input
                   type="text"
-                  v-model="form.referer.value"
+                  v-model="createModel.form.referer.value"
                   placeholder="where to find the pin"
                   maxlength="256"
                 >
                 </b-input>
               </b-field>
               <b-field label="Descripton"
-                       :type="form.description.type"
-                       :message="form.description.error">
+                       :type="createModel.form.description.type"
+                       :message="createModel.form.description.error">
                 <b-input
                   type="textarea"
-                  v-model="form.description.value"
+                  v-model="createModel.form.description.value"
                   placeholder="idea from this pin"
                   maxlength="1024"
                 >
@@ -51,7 +51,7 @@
               </b-field>
               <b-field label="Tags">
                 <b-taginput
-                  v-model="form.tags.value"
+                  v-model="createModel.form.tags.value"
                   ellipsis
                   icon="label"
                   placeholder="Add a tag">
@@ -99,11 +99,11 @@ export default {
     FilterSelect,
   },
   data() {
-    const form = ModelForm.createFormModel(fields);
-    form.tags.value = [];
+    const createModel = ModelForm.fromFields(fields);
+    createModel.form.tags.value = [];
     return {
       disableUrlField: false,
-      form,
+      createModel,
       formUpload: {
         imageId: null,
       },
@@ -144,24 +144,17 @@ export default {
     createPin() {
       const self = this;
       let promise;
-      if (isURLBlank(this.form.url.value) && this.formUpload.imageId === null) {
+      if (isURLBlank(this.createModel.form.url.value) && this.formUpload.imageId === null) {
         return;
       }
       if (this.formUpload.imageId === null) {
-        const data = {
-          url: this.form.url.value,
-          referer: this.form.referer.value,
-          description: this.form.description.value,
-          tags: this.form.tags.value,
-        };
+        const data = this.createModel.asDataByFields(fields);
         promise = API.Pin.createFromURL(data);
       } else {
-        const data = {
-          referer: this.form.referer.value,
-          description: this.form.description.value,
-          tags: this.form.tags.value,
-          image_by_id: this.formUpload.imageId,
-        };
+        const data = this.createModel.asDataByFields(
+          ['referer', 'description', 'tags'],
+        );
+        data.image_by_id = this.formUpload.imageId;
         promise = API.Pin.createFromUploaded(data);
       }
       promise.then(
diff --git a/pinry-spa/src/components/utils/ModelForm.js b/pinry-spa/src/components/utils/ModelForm.js
index 43da7ed..ae9115d 100644
--- a/pinry-spa/src/components/utils/ModelForm.js
+++ b/pinry-spa/src/components/utils/ModelForm.js
@@ -48,6 +48,17 @@ function FormHelper(form, fields = []) {
     );
     return data;
   }
+
+  function asDataByFields(requiredFields) {
+    const data = {};
+    requiredFields.forEach(
+      (fieldName) => {
+        data[fieldName] = self[fieldName].value;
+      },
+    );
+    return data;
+  }
+
   function assignToForm(data) {
     Object.entries(data).forEach(
       (dataField) => {
@@ -72,6 +83,7 @@ function FormHelper(form, fields = []) {
     markFieldAsDanger,
     resetField,
     asData,
+    asDataByFields,
     assignToForm,
     resetAllFields,
   };