From 69e44905ff29fe0f8117a2f792c4f97eb7bf8fb8 Mon Sep 17 00:00:00 2001
From: "zeinab.ashrafi" <ashrafisokout@gmail.com>
Date: Sat, 19 Apr 2025 11:39:46 +0330
Subject: [PATCH] fix : duplicate in package & cycle- show items details

---
 src/components/modal/cycle/Show.vue | 66 +++++++++++++++++++++-----
 src/components/modal/label/Show.vue | 73 +++++++++++++++++++++++------
 src/views/Cycle/AddEdit.vue         | 16 ++++++-
 src/views/Package/AddEdit.vue       | 10 +++-
 4 files changed, 135 insertions(+), 30 deletions(-)

diff --git a/src/components/modal/cycle/Show.vue b/src/components/modal/cycle/Show.vue
index e5203fb..4ca7b1d 100644
--- a/src/components/modal/cycle/Show.vue
+++ b/src/components/modal/cycle/Show.vue
@@ -2,9 +2,9 @@
     <v-container grid-list-xs>
         <material-card id="printMe" color="black" title="Show Cycle">
             <v-layout align-left justify-left wrap class="px-3 my-3">
-                <h3 class="mt-0">Cycle - {{
-                        (data.user && data.user.medical_center) ? data.user.medical_center.name : ""
-                    }}</h3>
+                <h3 class="mt-0">
+                    Cycle - {{ (data.user && data.user.medical_center) ? data.user.medical_center.name : "" }}
+                </h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
@@ -18,9 +18,8 @@
                     <v-flex xs12 sm6 md4>
                         <div>
                             <span class="title">Sterilizer ID :</span>
-                            <span class="headline ml-1" style="letter-spacing:0 !important">{{
-                                    data.sterilizer_id
-                                }}</span>
+                            <span class="headline ml-1"
+                                  style="letter-spacing:0 !important">{{ data.sterilizer_id }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 sm6 md4>
@@ -33,9 +32,8 @@
                     <v-flex xs12 sm6 md4>
                         <div>
                             <span class="title">Cycle Number :</span>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{
-                                    data.cycle_number
-                                }}</span>
+                            <span class="headline ml-2"
+                                  style="letter-spacing:0 !important">{{ data.cycle_number }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 sm6 md4>
@@ -81,7 +79,18 @@
                         <v-expansion-panel class="WM-Panel" v-for="(label, key) in data.labels" :key="key">
                             <v-expansion-panel-content>
                                 <template v-slot:header>
-                                    <div>{{ label.id }} ({{ label.pivot.count }})</div>
+                                    <v-layout row class="CSSD-font">
+                                        <span class="item-counter">{{ key + 1 }}</span>
+                                        <v-layout row class="pl-2">
+                                            <v-flex xs12 sm6 md4>
+                                                <span class="sub-text">Label ID:</span> {{ label.id }}
+                                            </v-flex>
+                                            <v-flex xs12 sm6 md4 v-if="label.pivot">
+                                                <span class="sub-text">Label Pivot counter:</span>
+                                                {{ label.pivot.count }}
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-layout>
                                 </template>
                                 <v-card>
                                     <v-card-text> Package :
@@ -99,7 +108,25 @@
                                                                            :key="item.key">
                                                             <v-expansion-panel-content>
                                                                 <template v-slot:header>
-                                                                    <div>{{ item.name }} ({{ item.pivot.count }})</div>
+                                                                    <v-layout row class="CSSD-font">
+                                                                        <span class="item-counter">{{ key + 1 }}</span>
+                                                                        <v-layout row class="pl-2">
+                                                                            <v-flex xs12 sm6 md4>
+                                                                                <span class="sub-text">Item ID:</span>
+                                                                                {{ item.id }}
+                                                                            </v-flex>
+                                                                            <v-flex xs12 sm6 md4>
+                                                                                <span class="sub-text">Item Name:</span>
+                                                                                {{item.name}}
+                                                                            </v-flex>
+                                                                            <v-flex xs12 sm6 md4 v-if="item.pivot">
+                                                                                <span class="sub-text">
+                                                                                    Item Pivot counter:
+                                                                                </span>
+                                                                                {{ item.pivot.count }}
+                                                                            </v-flex>
+                                                                        </v-layout>
+                                                                    </v-layout>
                                                                 </template>
                                                                 <v-card>
                                                                     <v-card-text>note : {{ item.note }}</v-card-text>
@@ -230,4 +257,21 @@ export default {
 .v-expansion-panel.WM-Panel .v-expansion-panel__body > .v-card {
     margin: 5px 0 8px 0 !important;
 }
+
 </style>
+<style scoped>
+.item-counter {
+    font-size: 44px;
+    opacity: .3;
+    font-family: 'Montserrat-Bold';
+    line-height: 44px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: #b7b7b7;
+}
+
+.sub-text {
+    font-size: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/modal/label/Show.vue b/src/components/modal/label/Show.vue
index 993f53e..4588778 100644
--- a/src/components/modal/label/Show.vue
+++ b/src/components/modal/label/Show.vue
@@ -15,38 +15,38 @@
                                 <v-layout row wrap class="">
                                     <v-flex xs12 md12 sm12>
                                         <div class="WM-d-flex">
-                                            <span class="headline ml-1 mb-1" style="letter-spacing:0 !important">{{
-                                                    (data.user && data.user.medical_center) ? data.user.medical_center.name : ""
-                                                }}</span>
+                                            <span class="headline ml-1 mb-1" style="letter-spacing:0 !important">
+                                                {{(data.user && data.user.medical_center) ? data.user.medical_center.name : ""}}
+                                            </span>
                                         </div>
                                     </v-flex>
                                     <v-flex xs12 md12 sm12 class="">
                                         <div class="WM-d-flex">
-                                            <v-icon class="WMi-location"></v-icon>
+                                            <v-icon class="WMi-location"/>
                                             <span class="headline ml-1 mb-1"
                                                   style="letter-spacing:0 !important">{{ data.package.name }}</span>
                                         </div>
                                     </v-flex>
                                     <v-flex xs12 md12 sm12>
                                         <div class="WM-d-flex">
-                                            <v-icon class="WMi-Industry"></v-icon>
+                                            <v-icon class="WMi-Industry"/>
                                             <span class="headline ml-2 mb-1"
                                                   style="letter-spacing:0 !important">{{ data.sterile_date }}</span>
                                         </div>
                                     </v-flex>
                                     <v-flex xs12 md12 sm12>
                                         <div class="WM-d-flex">
-                                            <v-icon class="WMi-hourglass"></v-icon>
+                                            <v-icon class="WMi-hourglass"/>
                                             <span class="headline ml-2 mb-1"
                                                   style="letter-spacing:0 !important">{{ data.expire_date }}</span>
                                         </div>
                                     </v-flex>
                                     <v-flex xs12 md12 sm12>
                                         <div class="WM-d-flex">
-                                            <v-icon class="WMi-user"></v-icon>
-                                            <span class="headline ml-2 mb-1" style="letter-spacing:0 !important">{{
-                                                    data.user ? data.user.name : ''
-                                                }}</span>
+                                            <v-icon class="WMi-user"/>
+                                            <span class="headline ml-2 mb-1" style="letter-spacing:0 !important">
+                                                {{data.user ? data.user.name : ''}}
+                                            </span>
                                         </div>
                                     </v-flex>
                                 </v-layout>
@@ -57,7 +57,9 @@
                                 <v-layout row wrap class="WM-Align-R mt-2">
                                     <v-flex xs12 v-if="QRCodeimg">
                                         <a :href="'https://www.cssd-doc.com/Show/Label/'+data.id+''"
-                                           target="_blank"><img :src="QRCodeimg" class="WM-Width-120"></a>
+                                           target="_blank">
+                                            <img :src="QRCodeimg" class="WM-Width-120">
+                                        </a>
                                     </v-flex>
                                     <v-flex xs12 md12 sm12>
                                         <div class>
@@ -107,16 +109,40 @@
                         <v-expansion-panel class="WM-Panel">
                             <v-expansion-panel-content>
                                 <template v-slot:header>
-                                    <div>{{ data.package.name }}</div>
+                                    <v-layout row class="CSSD-font">
+                                        <v-layout row class="pl-2">
+                                            <v-flex xs12 sm6 md6>
+                                                <span class="sub-text">Package ID:</span> {{ data.package.id }}
+                                            </v-flex>
+                                            <v-flex xs12 sm6 md6>
+                                                <span class="sub-text">Package Name:</span> {{ data.package.name }}
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-layout>
                                 </template>
                                 <v-card>
                                     <v-card-text>note : {{ data.package.note }}</v-card-text>
                                     <v-card-text> Items :
-                                        <v-expansion-panel class="WM-Panel" v-for="item in data.package.items"
-                                                           :key="item.key">
+                                        <v-expansion-panel class="WM-Panel" v-for="(item, key) in data.package.items"
+                                                           :key="key">
                                             <v-expansion-panel-content>
                                                 <template v-slot:header>
-                                                    <div>{{ item.name }} ({{ item.pivot.count }})</div>
+                                                    <v-layout row class="CSSD-font">
+                                                        <span class="item-counter">{{ key + 1 }}</span>
+                                                        <v-layout row class="pl-2">
+                                                            <v-flex xs12 sm6 md4>
+                                                                <span class="sub-text">Item ID:</span> {{ item.id }}
+                                                            </v-flex>
+                                                            <v-flex xs12 sm6 md4>
+                                                                <span class="sub-text">Item Name:</span> {{ item.name }}
+                                                            </v-flex>
+                                                            <v-flex xs12 sm6 md4 v-if="item.pivot">
+                                                                <span class="sub-text">Item Pivot counter:</span>
+                                                                {{ item.pivot.count }}
+                                                            </v-flex>
+                                                        </v-layout>
+                                                    </v-layout>
+<!--                                                    <div>{{ item.name }} ({{ item.pivot.count }})</div>-->
                                                 </template>
                                                 <v-card>
                                                     <v-card-text>note : {{ item.note }}</v-card-text>
@@ -227,3 +253,20 @@ export default {
     }
 };
 </script>
+
+<style scoped>
+.item-counter {
+    font-size: 44px;
+    opacity: .3;
+    font-family: 'Montserrat-Bold';
+    line-height: 44px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: #b7b7b7;
+}
+
+.sub-text {
+    font-size: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Cycle/AddEdit.vue b/src/views/Cycle/AddEdit.vue
index 0843839..7cb8b2f 100644
--- a/src/views/Cycle/AddEdit.vue
+++ b/src/views/Cycle/AddEdit.vue
@@ -23,7 +23,7 @@
                     </v-flex>
                     <v-flex xs12 sm6 md4 class="WM-FlexCenter">
                         <v-icon class="far fa-calendar-alt mr-2"/>
-                        <v-menu
+                        <v-menu class="WM-Width-Full"
                                 lazy
                                 :close-on-content-click="true"
                                 transition="v-scale-transition"
@@ -48,6 +48,9 @@
                         <div class="Inner">
                             <v-icon class="fa fa-check mr-2 WM-Margin-B-8"></v-icon>
                             <v-autocomplete
+                                    @keydown.enter.native.prevent="duplicateForm(key)"
+                                    @change="duplicateForm(key)"
+                                    :ref="`selectItem-${key}`"
                                     color="black"
                                     :items="labels"
                                     item-text="id"
@@ -132,6 +135,7 @@ export default {
     },
     created() {
         this.loadLabels();
+        console.log()
         if (this.$route.params.cycle) {
             this.load(this.$route.params.cycle);
         }
@@ -159,6 +163,7 @@ export default {
             }
         },
         async submitForm() {
+            this.formData.labels = this.formData.labels.filter(label => label.id);
             let result;
             if (this.$route.params.cycle) {
                 result = await ApiService.put(urls.updateCycle(this.$route.params.cycle), this.formData);
@@ -170,8 +175,15 @@ export default {
                 this.$router.push({name: "AllCycle"});
             }
         },
-        duplicateForm(infoIndex) {
+        duplicateForm() {
             this.formData.labels.push({name: "",});
+            this.$nextTick( () => {
+                const newIndex = this.formData.labels.length - 1;
+                const ref = this.$refs[`selectItem-${newIndex}`];
+                if (ref && ref[0]) {
+                    ref[0].focus();
+                }
+            });
         },
         removeForm(infoIndex) {
             this.formData.labels.splice(infoIndex, 1);
diff --git a/src/views/Package/AddEdit.vue b/src/views/Package/AddEdit.vue
index a6ceaf5..799bd93 100644
--- a/src/views/Package/AddEdit.vue
+++ b/src/views/Package/AddEdit.vue
@@ -199,9 +199,15 @@ export default {
             }
         },
 
-        duplicateForm(infoIndex) {
+        duplicateForm() {
             this.formData.items.push({name: "",});
-            this.$refs[`selectItem-${infoIndex}`][0].focus();
+            this.$nextTick( () => {
+                const newIndex = this.formData.items.length - 1;
+                const ref = this.$refs[`selectItem-${newIndex}`];
+                if (ref && ref[0]) {
+                    ref[0].focus();
+                }
+            });
         },
         removeForm(infoIndex) {
             this.formData.items.splice(infoIndex, 1);