Implemented revert functionality#22xdxhp

changelogs/unreleased/-22xdxhp.yml

@@ -0,0 +1,6 @@
+---
+title: Implemented revert functionality
+ticket_id: "#22xdxhp"
+merge_request: 22
+author: Disha Talreja
+type: added

src/components/ProductPopover.vue

@@ -1,12 +1,12 @@
 <template>
   <ion-content>
     <ion-item lines="none">
-      <ion-label>{{ this.isVirtual ? item.internalName : item.parentProductName }}</ion-label>
+      <ion-label>{{ this.isVirtual ? item.parentProductName : item.internalName }}</ion-label>
     </ion-item>
-    <!--ion-item lines="none">
+    <ion-item lines="none" @click="revert">
       <ion-icon slot="start" :icon="arrowUndoOutline" />
       <ion-label>{{ $t('Reset') }}</ion-label>
-    </ion-item-->
+    </ion-item>
     <ion-item lines="none" @click="onlySelect">
       <ion-icon slot="start" :icon="checkboxOutline" />
       <ion-label>{{ $t('Only select') }}</ion-label>
@@ -20,6 +20,7 @@ import { defineComponent } from 'vue';
 import { mapGetters, useStore } from "vuex";
 import {
   checkboxOutline,
+  arrowUndoOutline
 } from 'ionicons/icons';
 export default defineComponent({
   props: ['id', 'isVirtual', 'item'],
@@ -31,8 +32,11 @@ export default defineComponent({
     }),
   },
   methods: {
+    revert() {
+      this.isVirtual ? this.revertParentProduct() : this.revertProduct();
+    },
     onlySelect() {
-      this.isVirtual ? this.onlySelectSingleProduct() : this.onlySelectParentProduct();
+      this.isVirtual ? this.onlySelectParentProduct() : this.onlySelectSingleProduct();
     },
     onlySelectParentProduct() {
       this.ordersList.items.forEach(element => {
@@ -45,12 +49,41 @@ export default defineComponent({
         element.isSelected = element.internalName === this.id;
       });
       popoverController.dismiss({ dismissed: true });
+    },
+    revertProduct() {
+      const original = JSON.parse(JSON.stringify(this.ordersList.original));
+      const items = this.ordersList.items.map(element => {
+        if(element.internalName === this.id) {
+          const item = original.find(item => {
+            return item.internalName === this.id;
+          })
+          element = item;
+        }
+        return element;
+      });
+      this.store.dispatch('order/updatedOrderListItems', items)
+      popoverController.dismiss({ dismissed: true });
+    },
+    revertParentProduct(){
+      const original = JSON.parse(JSON.stringify(this.ordersList.original));
+      const items = this.ordersList.items.map(element => {
+        if(element.parentProductId === this.id) {
+          const item = original.find(item => {
+            return item.parentProductId === this.id;
+          })
+          element = item;
+        }
+        return element;
+      });
+      this.store.dispatch('order/updatedOrderListItems', items)
+      popoverController.dismiss({ dismissed: true });
     }
   },
   setup() {
     const store = useStore();
     return {
       checkboxOutline,
+      arrowUndoOutline,
       store
     }
   }

src/views/OrderDetail.vue

@@ -8,9 +8,9 @@
           <ion-button @click="selectAllItems">
             <ion-icon slot="icon-only" :icon="checkboxOutline" />
           </ion-button>
-        <!-- ion-button>
-           <ion-icon :icon="arrowUndoOutline">
-          <ion-button-->
+          <ion-button @click="revertAll">
+            <ion-icon :icon="arrowUndoOutline" />
+          </ion-button>
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
@@ -95,7 +95,7 @@
 
             <ion-checkbox :checked="isParentProductChecked(id)" @ionChange="selectParentProduct(id, $event)" />
 
-            <ion-button fill="clear" color="medium" @click="UpdateProduct($event, id, false, item)"> 
+            <ion-button fill="clear" color="medium" @click="UpdateProduct($event, id, true, item)"> 
               <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
             </ion-button>
           </div>
@@ -126,7 +126,7 @@
             <!-- Used :key as the changed value was not reflected -->
             <ion-checkbox :key="item.isSelected" :checked="item.isSelected" @ionChange="selectProduct(item, $event)"/>
 
-            <ion-button fill="clear" color="medium" @click="UpdateProduct($event, item.internalName, true, item)">
+            <ion-button fill="clear" color="medium" @click="UpdateProduct($event, item.internalName, false, item)">
               <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
             </ion-button>
           </div>
@@ -153,7 +153,7 @@ import { DateTime } from 'luxon';
 import { showToast } from '@/utils';
 import { translate } from "@/i18n";
 import { IonPage, IonHeader, IonToolbar, IonBackButton, IonTitle, IonContent, IonSearchbar, IonItem, IonThumbnail, IonLabel, IonInput, IonChip, IonIcon, IonButton, IonCheckbox, IonSelect, IonSelectOption, IonButtons, popoverController, IonFab, IonFabButton, alertController } from '@ionic/vue'
-import { ellipsisVerticalOutline, sendOutline, checkboxOutline, cloudUploadOutline } from 'ionicons/icons'
+import { ellipsisVerticalOutline, sendOutline, checkboxOutline, cloudUploadOutline, arrowUndoOutline } from 'ionicons/icons'
 import { hasError } from "@/utils";
 export default defineComponent({
   components: {
@@ -197,7 +197,7 @@ export default defineComponent({
       facilityId: "",
       facilities: [] as any,
       queryString: "",
-      searchedProduct: {} as any
+      searchedProduct: {} as any,
     }
   },
   mounted(){
@@ -329,6 +329,10 @@ export default defineComponent({
     selectProduct(item: any, event: any) {
       item.isSelected = event.detail.checked;
     },
+    revertAll() {
+      const original = JSON.parse(JSON.stringify(this.ordersList.original));
+      this.store.dispatch('order/updatedOrderListItems', original);
+    },
     apply() {
       this.ordersList.items.map((item: any) => {
         if (item.isSelected) {
@@ -364,13 +368,15 @@ export default defineComponent({
   setup() {
     const router = useRouter();
     const store = useStore();
+
     return {
       checkboxOutline,
       ellipsisVerticalOutline,
       sendOutline,
+      arrowUndoOutline,
       cloudUploadOutline,
       router,
-      store
+      store,
     }
   }
 });