case 4504

src/api/gzutil.js

@@ -463,7 +463,6 @@ export default {
         return "$sockiCoffee";
       case window.$gz.type.Subscription:
         return "$sockiFileContract";
-        
 
       //scroll icon is good one for something
       default:

src/api/initialize.js

@@ -168,7 +168,6 @@ ServiceContractor = 5 */
 
   sub = [];
 
-
   sub.push({
     title: "SubscriptionList",
     icon: "$sockiFileContract",

src/router.js

@@ -427,7 +427,9 @@ export default new Router({
       path: "/biz-subscription-list",
       name: "biz-subscription-list",
       component: () =>
-        import(/* webpackChunkName: "biz" */ "./views/biz-subscription-list.vue")
+        import(
+          /* webpackChunkName: "biz" */ "./views/biz-subscription-list.vue"
+        )
     },
     {
       path: "/biz-subscription-list/:recordid",

src/views/biz-subscription.vue

@@ -162,6 +162,194 @@
     <v-overlay :value="!formState.ready || formState.loading">
       <v-progress-circular indeterminate :size="64" />
     </v-overlay>
+
+    <!-- #########################################################################################-->
+    <!-- ########################## SUBSCRIPTION ITEM EDIT FORM  ###############################-->
+    <!-- #########################################################################################-->
+    <template v-if="obj.items.length">
+      <v-row dense justify="center">
+        <v-dialog v-model="editItemDialog">
+          <v-card>
+            <v-card-title>
+              a title here
+            </v-card-title>
+            <v-card-text>
+              <v-row dense>
+                <v-col cols="12" sm="6" lg="4" xl="3">
+                  <gz-pick-list
+                    ref="Items.ProductId"
+                    v-model="obj.items[editItemIndex].productId"
+                    :aya-type="sockTypes().Product"
+                    :allow-no-selection="false"
+                    show-edit-icon
+                    :readonly="formState.readOnly"
+                    :label="$sock.t('Product')"
+                    data-cy="Items.ProductId"
+                    :rules="[form().required(this, 'Items.ProductId')]"
+                    :error-messages="
+                      form().serverErrors(
+                        this,
+                        `Items[${editItemIndex}].productId`
+                      )
+                    "
+                    @input="
+                      fieldValueChanged(`Items[${editItemIndex}].productId`)
+                    "
+                  ></gz-pick-list>
+                </v-col>
+
+                <v-col cols="12" sm="6" lg="4" xl="3">
+                  <gz-decimal
+                    ref="Items.Quantity"
+                    v-model="obj.items[editItemIndex].quantity"
+                    :readonly="formState.readOnly"
+                    :label="$sock.t('PurchaseQuantity')"
+                    data-cy="Items.quantity"
+                    :error-messages="
+                      form().serverErrors(
+                        this,
+                        `Items[${editItemIndex}].quantity`
+                      )
+                    "
+                    :rules="[
+                      form().decimalValid(this, 'Items.quantity'),
+                      form().required(this, 'Items.quantity')
+                    ]"
+                    @input="
+                      fieldValueChanged(`Items[${editItemIndex}].quantity`)
+                    "
+                  ></gz-decimal>
+                </v-col>
+
+                <v-col cols="12" sm="6" lg="4" xl="3">
+                  <v-row no-gutters>
+                    <v-col cols="1">
+                      <v-menu offset-y>
+                        <template v-slot:activator="{ on, attrs }">
+                          <v-btn icon v-bind="attrs" v-on="on">
+                            <v-icon small>$sockiPlus</v-icon>
+                          </v-btn>
+                        </template>
+                        <v-list>
+                          <v-list-item @click="subExpireAddOneWeek">
+                            <v-list-item-icon>
+                              <v-icon>$sockiPlus</v-icon>
+                            </v-list-item-icon>
+                            <v-list-item-title>One week</v-list-item-title>
+                          </v-list-item>
+                          <v-list-item @click="subExpireAddOneMonth">
+                            <v-list-item-icon>
+                              <v-icon>$sockiPlus</v-icon>
+                            </v-list-item-icon>
+                            <v-list-item-title>One month</v-list-item-title>
+                          </v-list-item>
+                          <v-list-item @click="subExpireAddOneYear">
+                            <v-list-item-icon>
+                              <v-icon>$sockiPlus</v-icon>
+                            </v-list-item-icon>
+                            <v-list-item-title>One year</v-list-item-title>
+                          </v-list-item>
+                        </v-list>
+                      </v-menu>
+                    </v-col>
+                    <v-col>
+                      <gz-date-time-picker
+                        ref="Items.expireDate"
+                        v-model="obj.items[editItemIndex].expireDate"
+                        :label="$sock.t('PurchaseExpireDate')"
+                        :readonly="formState.readOnly"
+                        :error-messages="
+                          form().serverErrors(
+                            this,
+                            `Items[${editItemIndex}].expireDate`
+                          )
+                        "
+                        @input="
+                          fieldValueChanged(
+                            `Items[${editItemIndex}].expireDate`
+                          )
+                        "
+                      ></gz-date-time-picker>
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </v-row>
+            </v-card-text>
+            <v-card-actions>
+              <template v-if="!$vuetify.breakpoint.xs">
+                <v-btn
+                  color="red darken-1"
+                  text
+                  @click="deleteItem(obj.items[editItemIndex])"
+                  >{{ $sock.t("Delete") }}</v-btn
+                >
+                <v-spacer></v-spacer>
+                <v-btn
+                  color="blue darken-1"
+                  text
+                  @click="editItemDialog = false"
+                  >{{ $sock.t("Close") }}</v-btn
+                >
+
+                <v-btn
+                  color="blue darken-1"
+                  text
+                  class="ml-4"
+                  @click="newItem()"
+                  >{{ $sock.t("New") }}</v-btn
+                >
+
+                <v-btn
+                  color="blue darken-1"
+                  text
+                  class="ml-4"
+                  @click="submit()"
+                  >{{ $sock.t("Save") }}</v-btn
+                >
+              </template>
+              <template v-else>
+                <!-- MOBILE FORMAT -->
+                <v-row dense>
+                  <v-btn
+                    class="mt-4"
+                    block
+                    text
+                    color="blue darken-1"
+                    @click="submit()"
+                    >{{ $sock.t("Save") }}</v-btn
+                  >
+                  <v-btn
+                    class="mt-4"
+                    block
+                    text
+                    color="blue darken-1"
+                    @click="newItem()"
+                    >{{ $sock.t("New") }}</v-btn
+                  >
+                  <v-btn
+                    class="mt-4"
+                    block
+                    text
+                    color="blue darken-1"
+                    @click="editItemDialog = false"
+                    >{{ $sock.t("Close") }}</v-btn
+                  >
+
+                  <v-btn
+                    class="mt-8 mb-6"
+                    block
+                    text
+                    color="red darken-1"
+                    @click="deleteItem(obj.items[editItemIndex])"
+                    >{{ $sock.t("Delete") }}</v-btn
+                  >
+                </v-row>
+              </template>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-row>
+    </template>
   </div>
 </template>
 <script>
@@ -172,6 +360,8 @@ export default {
   data() {
     return {
       formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      editItemDialog: false,
+      editItemIndex: 0,
       obj: {
         id: 0,
         concurrency: 0,
@@ -336,36 +526,26 @@ export default {
   },
   methods: {
     editItem: function(item) {
-      console.log("edit item", item);
+      this.editItemIndex = item.index;
-      //   this.editPoItemIndex = item.index;
+      this.editItemDialog = true;
-      //   this.editPoItemDialog = true;
     },
     newItem: function() {
-      //   this.obj.items.push({
+      this.obj.items.push({
-      //     id: 0,
+        id: 0,
-      //     purchaseOrderId: 0,
+        subscriptionId: 0,
-      //     partId: null,
+        productId: null,
-      //     partWarehouseId: 1,
+        quantity: 1,
-      //     quantityOrdered: 1,
+        expireDate: window.$gz.locale.nowUTC8601String()
-      //     quantityReceived: 0,
+      });
-      //     purchaseOrderCost: 0,
+      this.editItemIndex = this.obj.items.length - 1;
-      //     receivedCost: 0.0,
+      this.editItemDialog = true;
-      //     receivedDate: null,
+      this.formState.dirty = true;
-      //     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.editItemDialog = false;
-      //   this.obj.items.splice(this.editPoItemIndex, 1);
+      this.obj.items.splice(this.editItemIndex, 1);
-      //   this.editPoItemIndex = 0;
+      this.editItemIndex = 0;
-      //   this.formState.dirty = true;
+      this.formState.dirty = true;
     },
     itemsRowClasses: function(item) {
       const path = `Items[${item.index}].`;
@@ -373,7 +553,32 @@ export default {
         return "font-weight-black font-italic error--text";
       }
     },
-
+    subExpireAddOneWeek: function() {
+      // // eslint-disable-next-line
+      // debugger;
+      const now = window.$gz.locale.nowUTC8601String(this.timeZoneName);
+      this.obj.items[
+        this.editItemIndex
+      ].expireDate = window.$gz.locale.addDurationToUTC8601String(now, {
+        days: 7
+      });
+    },
+    subExpireAddOneMonth: function() {
+      const now = window.$gz.locale.nowUTC8601String(this.timeZoneName);
+      this.obj.items[
+        this.editItemIndex
+      ].expireDate = window.$gz.locale.addDurationToUTC8601String(now, {
+        months: 1
+      });
+    },
+    subExpireAddOneYear: function() {
+      const now = window.$gz.locale.nowUTC8601String(this.timeZoneName);
+      this.obj.items[
+        this.editItemIndex
+      ].expireDate = window.$gz.locale.addDurationToUTC8601String(now, {
+        years: 1
+      });
+    },
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
     },
@@ -448,19 +653,19 @@ export default {
           vm.formState.serverError = res.error;
           window.$gz.form.setErrorBoxErrors(vm);
         } else {
-          if (res.data.id) {
+          //POST or PUT which is a little different than other objects
-            //POST
+          //so if it's new then need to navigate to it to update url with id
+          if (vm.$route.params.recordid != 0) {
+            //update of existing record
             vm.obj = res.data;
+          } else {
             this.$router.replace({
-              name: "subscription-edit",
+              name: "biz-subscription",
               params: {
                 recordid: res.data.id,
                 obj: res.data
               }
             });
-          } else {
-            //PUT
-            vm.obj.concurrency = res.data.concurrency;
           }
           window.$gz.form.setFormState({
             vm: vm,
@@ -468,6 +673,27 @@ export default {
             valid: true
           });
         }
+        //{
+        //   if (res.data.id) {
+        //     //POST
+        //     vm.obj = res.data;
+        //     this.$router.replace({
+        //       name: "subscription-edit",
+        //       params: {
+        //         recordid: res.data.id,
+        //         obj: res.data
+        //       }
+        //     });
+        //   } else {
+        //     //PUT
+        //     vm.obj.concurrency = res.data.concurrency;
+        //   }
+        //   window.$gz.form.setFormState({
+        //     vm: vm,
+        //     dirty: false,
+        //     valid: true
+        //   });
+        // }
       } catch (ex) {
         window.$gz.errorHandler.handleFormError(ex, vm);
       } finally {
@@ -675,7 +901,10 @@ async function fetchTranslatedText() {
     "Customer",
     "ProductGroup",
     "SubSite",
-    "ContractNotes"
+    "ContractNotes",
+    "ProductName",
+    "PurchaseQuantity",
+    "PurchaseExpireDate"
   ]);
 }