case 4504

src/views/biz-subscription.vue

@@ -19,7 +19,6 @@
             ></gz-pick-list>
           </v-col>
 
-         
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-select
               ref="pGroup"
@@ -33,11 +32,11 @@
               data-cy="pGroup"
               :rules="[form().integerValid(this, 'pGroup')]"
               :error-messages="form().serverErrors(this, 'pGroup')"
-              @input="fieldValueChanged('pGroup')"              
+              @input="fieldValueChanged('pGroup')"
             ></v-select>
           </v-col>
 
- <v-col cols="12" sm="6" lg="4" xl="3">
+          <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
               ref="subsite"
               v-model="obj.subsite"
@@ -76,6 +75,67 @@
               @change="fieldValueChanged('active')"
             ></v-checkbox>
           </v-col>
+
+          <!-- ################################ SUBSCRIPTION ITEMS LIST ############################### -->
+
+          <v-col cols="12" class="mb-6">
+            <v-data-table
+              :headers="headerList"
+              :items="itemList"
+              item-key="index"
+              class="elevation-1"
+              disable-pagination
+              disable-filtering
+              disable-sort
+              hide-default-footer
+              data-cy="itemsTable"
+              dense
+              :item-class="itemsRowClasses"
+              :no-data-text="$sock.t('NoData')"
+            >
+              <!-- <template v-slot:[`item.productViz`]="{ item }">
+                <div class="subtitle-1" @click="openItem(item)">
+                  <a href="javascript:"> {{ item.productViz }}</a>
+                </div>
+              </template> -->
+              <template v-slot:top>
+                <v-col cols="12">
+                  <v-menu v-if="rights.change" offset-y>
+                    <template v-slot:activator="{ on, attrs }">
+                      <span class="text-subtitle-2">
+                        {{ $sock.t("SubscriptionList") }}</span
+                      ><v-btn large icon v-bind="attrs" v-on="on">
+                        <v-icon small color="primary">$sockiEllipsisV</v-icon>
+                      </v-btn>
+                    </template>
+                    <v-list>
+                      <v-list-item @click="newItem">
+                        <v-list-item-icon>
+                          <v-icon>$sockiPlus</v-icon>
+                        </v-list-item-icon>
+                        <v-list-item-title>{{
+                          $sock.t("New")
+                        }}</v-list-item-title>
+                      </v-list-item>
+                    </v-list>
+                  </v-menu>
+                  <span v-else class="text-h6">
+                    {{ $sock.t("SubscriptoinItemList") }}</span
+                  >
+                </v-col>
+              </template>
+
+              <template v-slot:[`item.actions`]="{ item }">
+                <v-btn icon @click="editItem(item)">
+                  <v-icon :class="itemsRowClasses(item)">
+                    $sockiEdit
+                  </v-icon>
+                </v-btn>
+              </template>
+            </v-data-table>
+          </v-col>
+
+          <!-- --------------------------------- -->
           <!-- --------------------------------- -->
 
           <v-col v-if="form().showMe(this, 'Tags')" cols="12">
@@ -119,6 +179,7 @@ export default {
         pGroup: null,
         active: true,
         subsite: "main",
+        items: [],
         notes: null,
         tags: []
       },
@@ -139,6 +200,52 @@ export default {
       }
     };
   },
+  computed: {
+    headerList: function() {
+      const headers = [];
+      headers.push({
+        text: this.$sock.t("ProductName"),
+        align: "left",
+        value: "productViz"
+      });
+
+      headers.push({
+        text: this.$sock.t("PurchaseQuantity"),
+        align: "right",
+        value: "quantity"
+      });
+
+      headers.push({
+        text: this.$sock.t("PurchaseExpireDate"),
+        align: "right",
+        value: "expireDate"
+      });
+
+      if (!this.formState.readOnly) {
+        headers.push({ text: "", value: "actions" });
+      }
+      return headers;
+    },
+    itemList: function() {
+      return this.obj.items.map((x, i) => {
+        return {
+          index: i,
+          id: x.id,
+          quantity: window.$gz.locale.decimalLocalized(
+            x.quantity,
+            this.languageName
+          ),
+          expireDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+            x.expireDate,
+            this.timeZoneName,
+            this.languageName,
+            this.hour12
+          ),
+          productViz: x.productViz
+        };
+      });
+    }
+  },
   watch: {
     formState: {
       handler: function(val) {
@@ -227,13 +334,46 @@ export default {
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
-  methods: {   
+  methods: {
-    openVendorNotification: function() {
+    editItem: function(item) {
-      window.$gz.eventBus.$emit("openobject", {
+      console.log("edit item", item);
-        type: window.$gz.type.VendorNotification,
+      //   this.editPoItemIndex = item.index;
-        id: this.obj.vendorNotificationId
+      //   this.editPoItemDialog = true;
-      });
     },
+    newItem: function() {
+      //   this.obj.items.push({
+      //     id: 0,
+      //     purchaseOrderId: 0,
+      //     partId: null,
+      //     partWarehouseId: 1,
+      //     quantityOrdered: 1,
+      //     quantityReceived: 0,
+      //     purchaseOrderCost: 0,
+      //     receivedCost: 0.0,
+      //     receivedDate: null,
+      //     partRequestedById: null,
+      //     workOrderItemPartRequestId: null,
+      //     purchaseTaxCodeId:
+      //       window.$gz.store.state.globalSettings.defaultTaxPartPurchaseId,
+      //     vendorPartNumber: null
+      //   });
+      //   this.editPoItemIndex = this.obj.items.length - 1;
+      //   this.editPoItemDialog = true;
+      //   this.formState.dirty = true;
+    },
+    deleteItem: function() {
+      //   this.editPoItemDialog = false;
+      //   this.obj.items.splice(this.editPoItemIndex, 1);
+      //   this.editPoItemIndex = 0;
+      //   this.formState.dirty = true;
+    },
+    itemsRowClasses: function(item) {
+      const path = `Items[${item.index}].`;
+      if (this.form().childRowHasError(this, path)) {
+        return "font-weight-black font-italic error--text";
+      }
+    },
+
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
     },