ayanova/src/views/adm-global-select-templates.vue

@@ -27,7 +27,7 @@
               >
               </v-select>
             </v-col>
-            <div>WORKING ARRAY: {{ workingArray }}</div>
+            <!-- <div>WORKING ARRAY: {{ workingArray }}</div> -->
 
             <!-- <div>
               TEMPLATE:
@@ -38,7 +38,7 @@
               available fields:
               {{ availableFields }}
             </div> -->
-            <!-- <template v-for="item in obj">
+            <template v-for="(item, index) in workingArray">
               <v-col :key="item.key" cols="12" sm="6" lg="4" xl="3" px-2>
                 <v-card>
                   <v-card-title>
@@ -49,35 +49,32 @@
                   </v-card-subtitle>
                   <v-card-text>
                     <v-checkbox
-                      v-model="item.visible"
+                      v-model="item.include"
                       :readOnly="formState.readOnly"
-                      :label="t('FormFieldVisible')"
+                      :label="t('Include')"
                       :ref="item.key"
-                      :disabled="item.stockRequired"
+                      :disabled="item.required"
-                      @change="visibleChanged(item)"
+                      @change="includeChanged(item)"
                     ></v-checkbox>
-                    <v-checkbox
+                    <!-- RE-ORDER CONTROL -->
-                      v-model="item.required"
+                    <div class="d-flex justify-space-between">
-                      :readOnly="formState.readOnly"
+                      <v-btn large icon @click="move('start', index)"
-                      :label="t('FormFieldEntryRequired')"
+                        ><v-icon large>fa-step-backward</v-icon></v-btn
-                      :disabled="item.stockRequired"
+                      >
-                      @change="requiredChanged(item)"
+                      <v-btn large icon @click="move('left', index)"
-                    ></v-checkbox>
+                        ><v-icon large>fa-backward</v-icon></v-btn
-                    <v-select
+                      >
-                      v-if="item.custom"
+                      <v-btn large icon @click="move('right', index)"
-                      v-model="item.type"
+                        ><v-icon large>fa-forward</v-icon></v-btn
-                      :readOnly="formState.readOnly"
+                      >
-                      :items="selectLists.uiFieldDataTypes"
+                      <v-btn large icon @click="move('end', index)"
-                      item-text="name"
+                        ><v-icon large>fa-step-forward</v-icon></v-btn
-                      item-value="id"
+                      >
-                      :label="t('UiFieldDataType')"
+                    </div>
-                      @input="dataTypeChanged(item)"
-                    ></v-select>
-                   
                   </v-card-text>
                 </v-card>
               </v-col>
-            </template> -->
+            </template>
           </v-row>
         </v-form>
       </v-col>
@@ -161,6 +158,48 @@ export default {
     t: function(tKey) {
       return window.$gz.translation.get(tKey);
     },
+    includeChanged: function(item) {
+      window.$gz.form.setFormState({
+        vm: this,
+        dirty: true
+      });
+    },
+    move: function(direction, index) {
+      var totalItems = this.workingArray.length;
+      var newIndex = 0;
+      //calculate new index
+      switch (direction) {
+        case "start":
+          newIndex = 0;
+          break;
+        case "left":
+          newIndex = index - 1;
+          if (newIndex < 0) {
+            newIndex = 0;
+          }
+          break;
+        case "right":
+          newIndex = index + 1;
+          if (newIndex > totalItems - 1) {
+            newIndex = totalItems - 1;
+          }
+
+          break;
+        case "end":
+          newIndex = totalItems - 1;
+          break;
+      }
+
+      this.workingArray.splice(
+        newIndex,
+        0,
+        this.workingArray.splice(index, 1)[0]
+      );
+      window.$gz.form.setFormState({
+        vm: this,
+        dirty: true
+      });
+    },
     templateSelected: function() {
       if (this.formState.dirty) {
         window.$gz.dialog.confirmLeaveUnsaved().then(dialogResult => {
@@ -433,7 +472,7 @@ function synthesizeWorkingArray(vm) {
   for (var i = 0; i < vm.availableFields.length; i++) {
     var afItem = vm.availableFields[i];
     //skip the active column
-    if (afItem.isActive == true) {
+    if (afItem.isActiveColumn == true) {
       continue;
     }
     //is this field already in the template and was added above?