From 9c264100406c0be1f93051089fd427e4d1d22c72 Mon Sep 17 00:00:00 2001
From: Danny Atthaya <dannyatthaya9@gmail.com>
Date: Wed, 23 Jun 2021 10:47:03 +0700
Subject: [PATCH] Add draggable

---
 .../js/components/BadasoContentAddField.vue   | 12 ++++-
 src/resources/js/lang/modules/en.js           |  3 ++
 src/resources/js/lang/modules/id.js           |  3 ++
 src/resources/js/pages/content/add.vue        | 53 +++++++++++++++++++
 src/resources/js/pages/content/edit.vue       | 53 +++++++++++++++++++
 5 files changed, 122 insertions(+), 2 deletions(-)

diff --git a/src/resources/js/components/BadasoContentAddField.vue b/src/resources/js/components/BadasoContentAddField.vue
index cdf2653..994bd95 100644
--- a/src/resources/js/components/BadasoContentAddField.vue
+++ b/src/resources/js/components/BadasoContentAddField.vue
@@ -14,7 +14,11 @@
         :placeholder="$t('content.fill.field.addField.name.placeholder')"
         v-model="field.name"
         size="12"
-        :alert="$v.field.name.$error ? $t('vuelidate.required', [ $t('content.fill.field.addField.name.title')]) : ''"
+        :alert="$v.field.type.$error ? [
+          $v.field.name.required ? '' : $t('vuelidate.required', [ $t('content.fill.field.addField.name.title')]),
+          $v.field.name.alphaNum ? '' : $t('vuelidate.alphaNum', [ $t('content.fill.field.addField.name.title')]),
+          $v.field.name.nonNumericOnFirstChar ? '' : $t('vuelidate.nonNumericOnFirstChar'),
+        ] : ''"
       ></badaso-text>
     </td>
     <td v-show="show">
@@ -42,10 +46,12 @@
 </template>
 
 <script>
-import { required } from "vuelidate/lib/validators";
+import { required, alphaNum, helpers } from "vuelidate/lib/validators";
 
 import contentHelper from '../utils/content-helper'
 
+const nonNumericOnFirstChar = (value) => helpers.regex(value, /^(?![0-9_])\w+$/)
+
 export default {
   name : "BadasoContentAddField",
   data: () => ({
@@ -74,6 +80,8 @@ export default {
       },
       name: {
         required,
+        alphaNum,
+        nonNumericOnFirstChar: nonNumericOnFirstChar(this.name)
       },
     },
   },
diff --git a/src/resources/js/lang/modules/en.js b/src/resources/js/lang/modules/en.js
index db0eb08..8696e71 100644
--- a/src/resources/js/lang/modules/en.js
+++ b/src/resources/js/lang/modules/en.js
@@ -1,4 +1,7 @@
 export default {
+  vuelidate: {
+    nonNumericOnFirstChar: 'No numeric on first character.'
+  },
   action: {
     yes: "Yes",
     no: "No"
diff --git a/src/resources/js/lang/modules/id.js b/src/resources/js/lang/modules/id.js
index 423658a..ee00aa9 100644
--- a/src/resources/js/lang/modules/id.js
+++ b/src/resources/js/lang/modules/id.js
@@ -1,4 +1,7 @@
 export default {
+  vuelidate: {
+    nonNumericOnFirstChar: 'Tidak boleh diawali oleh angka.'
+  },
   action: {
     yes: "Ya",
     no: "Tidak"
diff --git a/src/resources/js/pages/content/add.vue b/src/resources/js/pages/content/add.vue
index afe5062..b950890 100644
--- a/src/resources/js/pages/content/add.vue
+++ b/src/resources/js/pages/content/add.vue
@@ -102,6 +102,24 @@
                     >
                       <vs-icon icon="delete"></vs-icon>
                     </vs-button>
+                    <vs-button
+                      color="warning"
+                      type="relief"
+                      @click="moveUp(index)"
+                      v-if="Object.values(items).length > 1"
+                      :disabled="index === 0"
+                    >
+                      <vs-icon icon="expand_less"></vs-icon>
+                    </vs-button>
+                    <vs-button
+                      color="warning"
+                      type="relief"
+                      @click="moveDown(index)"
+                      v-if="Object.values(items).length > 1"
+                      :disabled="index === Object.values(items).length - 1"
+                    >
+                      <vs-icon icon="expand_more"></vs-icon>
+                    </vs-button>
                   </td>
                 </tr>
                 <tr :key="items.name + '-' + key + '-opened'" v-if="opened.includes(index)">
@@ -282,6 +300,41 @@ export default {
           text: ""
         };
       }
+    },
+    moveDown(index) {
+      const temp = []
+      var tempObject = {}
+      for (const item in this.items) {
+        if (Object.hasOwnProperty.call(this.items, item)) {
+          temp.push(this.items[item])
+        }
+      }
+      [temp[index], temp[index + 1]] = [temp[index + 1], temp[index]]
+      
+      tempObject = this.convertArrayToObject(temp, 'name')
+      this.items = tempObject
+    },
+    moveUp(index) {
+      const temp = []
+      var tempObject = {}
+      for (const item in this.items) {
+        if (Object.hasOwnProperty.call(this.items, item)) {
+          temp.push(this.items[item])
+        }
+      }
+      [temp[index], temp[index - 1]] = [temp[index - 1], temp[index]]
+      
+      tempObject = this.convertArrayToObject(temp, 'name')
+      this.items = tempObject
+    },
+    convertArrayToObject(array, key) {
+      const initialValue = {};
+      return array.reduce((obj, item) => {
+        return {
+          ...obj,
+          [item[key]]: item,
+        };
+      }, initialValue);
     }
   },
 };
diff --git a/src/resources/js/pages/content/edit.vue b/src/resources/js/pages/content/edit.vue
index 32ba6d2..880700a 100644
--- a/src/resources/js/pages/content/edit.vue
+++ b/src/resources/js/pages/content/edit.vue
@@ -121,6 +121,24 @@
                     >
                       <vs-icon icon="delete"></vs-icon>
                     </vs-button>
+                    <vs-button
+                      color="warning"
+                      type="relief"
+                      @click="moveUp(index)"
+                      v-if="Object.values(items).length > 1"
+                      :disabled="index === 0"
+                    >
+                      <vs-icon icon="expand_less"></vs-icon>
+                    </vs-button>
+                    <vs-button
+                      color="warning"
+                      type="relief"
+                      @click="moveDown(index)"
+                      v-if="Object.values(items).length > 1"
+                      :disabled="index === Object.values(items).length - 1"
+                    >
+                      <vs-icon icon="expand_more"></vs-icon>
+                    </vs-button>
                   </td>
                 </tr>
                 <tr
@@ -329,6 +347,41 @@ export default {
         };
       }
     },
+    moveDown(index) {
+      const temp = []
+      var tempObject = {}
+      for (const item in this.items) {
+        if (Object.hasOwnProperty.call(this.items, item)) {
+          temp.push(this.items[item])
+        }
+      }
+      [temp[index], temp[index + 1]] = [temp[index + 1], temp[index]]
+      
+      tempObject = this.convertArrayToObject(temp, 'name')
+      this.items = tempObject
+    },
+    moveUp(index) {
+      const temp = []
+      var tempObject = {}
+      for (const item in this.items) {
+        if (Object.hasOwnProperty.call(this.items, item)) {
+          temp.push(this.items[item])
+        }
+      }
+      [temp[index], temp[index - 1]] = [temp[index - 1], temp[index]]
+      
+      tempObject = this.convertArrayToObject(temp, 'name')
+      this.items = tempObject
+    },
+    convertArrayToObject(array, key) {
+      const initialValue = {};
+      return array.reduce((obj, item) => {
+        return {
+          ...obj,
+          [item[key]]: item,
+        };
+      }, initialValue);
+    }
   },
 };
 </script>