From a7a46a1fd35521591e05815403cb9354d62a47f1 Mon Sep 17 00:00:00 2001
From: "zeinab.ashrafi" <ashrafisokout@gmail.com>
Date: Mon, 12 May 2025 15:18:44 +0330
Subject: [PATCH] fix : responsive

---
 .../js/show/views/Package/ShowPackage.vue     | 179 ++++++++++++------
 1 file changed, 117 insertions(+), 62 deletions(-)

diff --git a/resources/js/show/views/Package/ShowPackage.vue b/resources/js/show/views/Package/ShowPackage.vue
index 87d9e147..35add013 100644
--- a/resources/js/show/views/Package/ShowPackage.vue
+++ b/resources/js/show/views/Package/ShowPackage.vue
@@ -1,82 +1,119 @@
 <template>
     <v-container grid-list-xs>
         <material-card color="black" title="Show Package">
-            <v-layout id="printMe" align-left justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3 CSSD-font"> {{ data.name }} - MC {{ MedicalCenter }}</h3>
+            <v-layout id="printMe" align-left justify-left wrap class="px-3 mb-3">
+                <h3 class="CSSD-font mt-0">
+                    {{ data.name }} - MC
+                    {{ (data.user != null && data.user.medical_center != null) ? data.user.medical_center.name : '' }}
+                </h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
-                <v-layout row wrap class="ml-4">
-                    <v-flex xs12 md6 sm6>
-                        <div class="WM-d-flex">
-                            <v-icon class="WMi-info"></v-icon>
-                            <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
+                <v-flex xs12>
+                    <v-layout align-left justify-left wrap class="pt-3">
+                        <v-flex xs12 sm4 md4>
+                            <div class="WM-d-flex">
+                                <v-icon class="WMi-info"/>
+                                <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
                                 {{ data.name }}
                             </span>
-                        </div>
-                    </v-flex>
-                    <v-flex xs12 md6 sm6>
-                        <div class="WM-d-flex">
-                            <v-icon class="WMi-Industry"></v-icon>
-                            <span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important">
+                            </div>
+                        </v-flex>
+                        <v-flex xs12 sm4 md4>
+                            <div class="WM-d-flex">
+                                <v-icon class="WMi-Industry"/>
+                                <span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important">
                                 {{ data.created_at }}
                             </span>
-                        </div>
-                    </v-flex>
-                    <v-flex xs12 md6 sm6>
-                        <div class="WM-d-flex">
-                            <v-icon class="WMi-user"></v-icon>
-                            <span class="headline ml-2 CSSD-font"
-                                  style="letter-spacing:0 !important">{{ data.user ? data.user.name : '' }}</span>
-                        </div>
-                    </v-flex>
-                    <v-flex xs12 md6 sm6>
-                        <div class="WM-d-flex">
-                            <v-icon class="WMi-pencil"></v-icon>
-                            <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
+                            </div>
+                        </v-flex>
+                        <v-flex xs12 sm4 md4>
+                            <div class="WM-d-flex">
+                                <v-icon class="WMi-user"/>
+                                <span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important">
+                                {{ data.user ? data.user.name : '' }}
+                            </span>
+                            </div>
+                        </v-flex>
+                        <v-flex xs12 sm12 md12>
+                            <div class="WM-d-flex">
+                                <v-icon class="WMi-pencil"/>
+                                <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">
                                 {{ data.note }}
                             </span>
-                        </div>
-                    </v-flex>
-                </v-layout>
-                <v-layout align-left justify-left wrap class="px-5 my-3">
-                    <h3 class="ml-3 CSSD-font">Barcode And QRCode Image</h3>
-                    <v-flex xs12>
-                        <hr class="v-divider theme--light">
-                    </v-flex>
-                    <v-layout row wrap class="ml-4 align-center mt-2">
-                        <v-flex xs12 md6 sm6 v-if="barcodeimg">
-                            <img :src="barcodeimg" class="barcode-container"><br/>
-                            <span class="CSSD-font">Package ID : {{ data.id }}</span>
-                        </v-flex>
-                        <v-flex xs12 md6 sm6 v-if="QRCodeimg" class="WM-Align-C">
-                            <img :src="QRCodeimg" class="WM-Width-150">
+                            </div>
                         </v-flex>
                     </v-layout>
-                </v-layout>
-
-            </v-layout>
-            <v-layout align-left justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3 CSSD-font">Items</h3>
-                <v-flex xs12>
-                    <hr class="v-divider theme--light">
                 </v-flex>
-                <v-layout row wrap class="ml-4">
-                    <template>
-                        <v-expansion-panel class="WM-Panel">
-                            <v-expansion-panel-content v-for="(item, key) in data.items" :key="key">
-                                <template v-slot:header>
-                                    <div>{{ key + 1 + ": " + item.name }} ({{ item.pivot.count }})</div>
-                                </template>
-                                <v-card>
-                                    <v-card-text>note : {{ item.note }}</v-card-text>
-                                </v-card>
-                            </v-expansion-panel-content>
-                        </v-expansion-panel>
-                    </template>
+                <v-flex xs12>
+                    <v-layout align-left justify-left wrap class="pt-3">
+                        <h3 class="CSSD-font">Barcode And QRCode Image</h3>
+                        <v-flex xs12>
+                            <hr class="v-divider theme--light">
+                        </v-flex>
+                        <v-layout row wrap class="align-center mt-2">
+                            <v-flex xs12 md6 sm6 v-if="barcodeimg">
+                                <img :src="barcodeimg" class="WM-Width-350"><br/>
+                                <span class="CSSD-font">Package ID : {{ data.id }}</span>
+                            </v-flex>
+                            <v-flex xs12 md6 sm6 v-if="QRCodeimg" class="WM-Align-R">
+                                <a :href="'https://www.cssd-doc.com/Show/Package/'+data.id+''" target="_blank">
+                                    <img :src="QRCodeimg" class="WM-Width-150">
+                                </a>
+                            </v-flex>
+                        </v-layout>
+                    </v-layout>
+                </v-flex>
+                <v-flex xs12>
+                    <v-layout align-left justify-left wrap class="pt-3">
+                        <h3 class="CSSD-font mt-0">Items</h3>
+                        <v-flex xs12>
+                            <hr class="v-divider theme--light">
+                        </v-flex>
+                        <v-layout row wrap class="ml-sm-4 WM-Relative">
+                            <template v-if="data.items && data.items.length">
+                                <v-expansion-panel class="WM-Panel">
+                                    <v-expansion-panel-content v-for="(item, key) in data.items" :key="key">
+                                        <template v-slot:header>
+                                            <v-layout row wrap class="CSSD-font">
+                                                <span class="item-counter">{{ key + 1 }}</span>
+
+                                                <v-layout row wrap class="pl-2">
+                                                    <v-flex xs12 sm4 md4>
+                                                        <span class="sub-text">Item ID:</span> {{ item.id }}
+                                                    </v-flex>
+                                                    <v-flex xs12 sm4 md4>
+                                                        <span class="sub-text">Item Name:</span> {{ item.name }}
+                                                    </v-flex>
+                                                    <v-flex xs12 sm4 md4 class="WM-Align-R">
+                                                        <span v-if="item.pivot">({{ item.pivot.count }})</span>
+                                                        <v-spacer/>
+                                                        <a :href="'https://www.cssd-doc.com/Show/Item/' + item.id + ''" target="_blank">
+                                                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" @click.stop.native=""
+                                                                   style="padding: 10px 30px;">
+                                                                <v-icon class="black--text mr-2 caption">fas fa-search</v-icon>
+                                                                <span class="black--text">DETAILS</span>
+                                                            </v-btn>
+                                                        </a>
+                                                    </v-flex>
+                                                </v-layout>
+                                            </v-layout>
+                                        </template>
+                                        <v-card>
+                                            <v-card-text>note : {{ item.note }}</v-card-text>
+                                        </v-card>
+                                    </v-expansion-panel-content>
+                                </v-expansion-panel>
+                            </template>
+                            <template v-else>
+                                <p class="mt-3" style="width: 100%;"> No Item Has Been Selected</p>
+                            </template>
+                        </v-layout>
+                    </v-layout>
+                </v-flex>
 
-                </v-layout>
             </v-layout>
+
             <v-layout row wrap align-center justify-center style="text-align:center">
                 <v-flex class xs12 md12 sm12>
                     <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" @click="addPackage()">
@@ -181,4 +218,22 @@ export default {
     width: 100%;
     max-width: 350px;
 }
+.WM-Width-350{
+    width: 100%;
+    max-width: 350px;
+}
+.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>