Merge pull request #61 from uasoft-indonesia/feature/v2/draggable

fix ordering
uasoft-indonesia · Jun 23, 2021 · b46f3df · b46f3df
2 parents b85a612 + c80b039
commit b46f3df
Showing 1 changed file with 55 additions and 2 deletions.
diff --git a/src/resources/js/components/BadasoContent.vue b/src/resources/js/components/BadasoContent.vue
@@ -45,10 +45,28 @@
               <vs-button
                 color="danger"
                 type="relief"
-                @click="dropItem(items, key)"
+                @click="dropItem(item, key)"
               >
                 <vs-icon icon="delete"></vs-icon>
               </vs-button>
+              <vs-button
+                color="warning"
+                type="relief"
+                @click="moveUp(index)"
+                v-if="Object.values(items.data).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.data).length > 1"
+                :disabled="index === Object.values(items.data).length - 1"
+              >
+                <vs-icon icon="expand_more"></vs-icon>
+              </vs-button>
             </td>
           </tr>
           <tr :key="items.name + '-' + key + '-opened'" v-if="opened.includes(index)">
@@ -164,7 +182,7 @@ export default {
         color: "danger",
         title: this.$t("action.delete.title"),
         text: this.$t("action.delete.text"),
-        accept: () => this.$delete(items.data, key),
+        accept: () => this.$delete(this.items.data, key),
         acceptText: this.$t("action.delete.accept"),
         cancelText: this.$t("action.delete.cancel"),
         cancel: () => {},
@@ -182,6 +200,41 @@ export default {
     openCopyItemDialog(item) {
       this.willCopyItem = item
       this.copyItemDialog = true
+    },
+    moveDown(index) {
+      const temp = []
+      var tempObject = {}
+      for (const item in this.items.data) {
+        if (Object.hasOwnProperty.call(this.items.data, item)) {
+          temp.push(this.items.data[item])
+        }
+      }
+      [temp[index], temp[index + 1]] = [temp[index + 1], temp[index]]
+      
+      tempObject = this.convertArrayToObject(temp, 'name')
+      this.items.data = tempObject
+    },
+    moveUp(index) {
+      const temp = []
+      var tempObject = {}
+      for (const item in this.items.data) {
+        if (Object.hasOwnProperty.call(this.items.data, item)) {
+          temp.push(this.items.data[item])
+        }
+      }
+      [temp[index], temp[index - 1]] = [temp[index - 1], temp[index]]
+      
+      tempObject = this.convertArrayToObject(temp, 'name')
+      this.items.data = tempObject
+    },
+    convertArrayToObject(array, key) {
+      const initialValue = {};
+      return array.reduce((obj, item) => {
+        return {
+          ...obj,
+          [item[key]]: item,
+        };
+      }, initialValue);
     }
   },
 };