ayanova/src/components/work-order-item-units.vue

@@ -21,7 +21,7 @@
               </v-list-item-icon>
               <v-list-item-title>{{ $ay.t("New") }}</v-list-item-title>
             </v-list-item>
-            <v-list-item v-if="canAdd" @click="bulkUnitsDialog = true">
+            <v-list-item v-if="canAdd" @click="showBulkUnitsDialog()">
               <v-list-item-icon>
                 <v-icon>$ayiFan</v-icon>
               </v-list-item-icon>
@@ -233,7 +233,40 @@
       <v-row justify="center">
         <v-dialog persistent max-width="600px" v-model="bulkUnitsDialog">
           <v-card>
-            <v-card-title>
+            <v-card-title> </v-card-title>
+            <v-card-text>
+              <gz-tag-picker v-model="selectedBulkUnitTags"></gz-tag-picker>
+              <gz-pick-list
+                :aya-type="$ay.ayt().Customer"
+                :show-edit-icon="false"
+                v-model="selectedBulkUnitCustomer"
+                :label="$ay.t('Customer')"
+                :can-clear="true"
+              ></gz-pick-list>
+
+              <v-data-table
+                dense
+                :headers="bulkUnitTableHeaders"
+                :items="availableBulkUnits"
+                class="elevation-4"
+                :disable-pagination="true"
+                :disable-filtering="true"
+                hide-default-footer
+                hide-default-header
+                :no-data-text="$ay.t('NoData')"
+              >
+              </v-data-table>
+              <!-- <v-select
+                item-text="name"
+                item-value="id"
+                :disabled="availableBulkUnits.length == 0"
+                v-model="selectedBulkUnits"
+                :items="availableBulkUnits"
+                :label="$ay.t('UnitList')"
+                multiple
+              ></v-select> -->
+            </v-card-text>
+            <v-card-actions>
               <v-btn text @click="bulkUnitsDialog = false" color="primary">{{
                 $ay.t("Cancel")
               }}</v-btn>
@@ -252,27 +285,7 @@
                 @click="addSelectedBulkUnits()"
                 >{{ $ay.t("Add") }}</v-btn
               >
-            </v-card-title>
+            </v-card-actions>
-            <v-card-text>
-              <gz-tag-picker v-model="selectedBulkUnitTags"></gz-tag-picker>
-              <gz-pick-list
-                :aya-type="$ay.ayt().Customer"
-                :show-edit-icon="false"
-                v-model="selectedBulkUnitCustomer"
-                :label="$ay.t('Customer')"
-                :can-clear="true"
-              ></gz-pick-list>
-
-              <v-select
-                item-text="name"
-                item-value="id"
-                :disabled="availableBulkUnits.length == 0"
-                v-model="selectedBulkUnits"
-                :items="availableBulkUnits"
-                :label="$ay.t('UnitList')"
-                multiple
-              ></v-select>
-            </v-card-text>
           </v-card>
         </v-dialog>
       </v-row>
@@ -296,7 +309,8 @@ export default {
       selectedBulkUnitCustomer: this.value.customerId,
       availableBulkUnits: [],
       selectedBulkUnits: [],
-      selectedBulkUnitTags: []
+      selectedBulkUnitTags: [],
+      bulkUnitTableHeaders: []
     };
   },
   props: {
@@ -346,6 +360,16 @@ export default {
     }
   },
   methods: {
+    showBulkUnitsDialog() {
+      if (this.bulkUnitTableHeaders.length == 0) {
+        //init bulk table headers
+        this.bulkUnitTableHeaders = [
+          { text: this.$ay.t("Customer"), value: "customerName" },
+          { text: this.$ay.t("Unit"), value: "unitSerial" }
+        ];
+      }
+      this.bulkUnitsDialog = true;
+    },
     async bulkUnitsSearch() {
       this.selectedBulkUnits.splice(0);
       this.availableBulkUnits.splice(0);
@@ -363,6 +387,7 @@ export default {
         this.availableBulkUnits = res.data;
       }
     },
+
     addSelectedBulkUnits() {
       if (res.data && res.data.items) {
         let newIndex = this.value.items[this.activeWoItemIndex].parts.length;