fix: service work expansion

src/components/04_product-service/FormServiceWork.vue

@@ -12,6 +12,7 @@ const workItems = ref([
       {
         id: '1',
         label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
+        labelEn: '2 year work permit fee',
         code: 'AC101',
         price: '1,200.00',
         time: '14',
@@ -24,6 +25,7 @@ const workItems = ref([
       {
         id: '1',
         label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
+        labelEn: '2 year work permit fee',
         code: 'AC101',
         price: '1,200.00',
         time: '14',
@@ -32,6 +34,8 @@ const workItems = ref([
         id: '1',
         label:
           'ค่าบริการและค่าดำเนินงานยื่นคำร้องขอใบอนุญาตทำงานแทน คนงานต่างด้าว MOU',
+        labelEn:
+          'Service and processing fees for submitting a work permit application on behalf of an MOU foreign worker',
         code: 'AC102',
         price: '1,200.00',
         time: '14',
@@ -77,8 +81,10 @@ defineEmits<{
       <WorkManagementComponent
         v-for="(work, index) in workItems"
         :key="work.id"
-        v-model:product-items="work.product"
+        :index="index"
+        :length="workItems.length"
         :workIndex="index"
+        v-model:product-items="work.product"
         @addProduct="$emit('addProduct')"
       ></WorkManagementComponent>
     </div>

src/components/04_product-service/WorkManagementComponent.vue

@@ -1,16 +1,18 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue';
 
-const serviceName = defineModel<string>('serviceName');
-
 defineProps<{
   workIndex: number;
+  length: number;
+  index: number;
 }>();
 
+const workName = defineModel<string>('workName');
 const productItems = defineModel<
   {
     id: string;
     label: string;
+    labelEn: string;
     code: string;
     price: string;
     time: string;
@@ -24,30 +26,34 @@ defineEmits<{
 }>();
 </script>
 <template>
-  <div class="column rounded bordered surface-2 items-start">
+  <div class="bordered rounded">
-    <div class="row items-center full-width q-gutter-x-md q-py-sm q-px-md">
+    <q-expansion-item
+      dense
+      switch-toggle-side
+      default-opened
+      expand-icon="mdi-chevron-down-circle"
+    >
+      <template v-slot:header>
+        <div class="row items-center q-py-sm full-width">
           <q-btn
-        id="btn-swap-work"
+            id="btn-swap-work-product"
-        icon="mdi-swap-vertical"
+            icon="mdi-arrow-up"
             dense
             flat
             round
-        padding="0"
+            :disable="index === 0"
-        color="info"
+            style="color: hsl(var(--text-mute-2))"
-        class="q-ml-sm"
           />
           <q-btn
-        id="btn-delete-work"
+            id="btn-swap-work-product"
-        icon="mdi-trash-can-outline"
+            icon="mdi-arrow-down"
             dense
             flat
             round
-        padding="0"
+            class="q-mx-sm"
-        color="negative"
+            :disable="index === length - 1"
-        class="q-ml-sm"
+            style="color: hsl(var(--text-mute-2))"
-        @click="$emit('deleteWork')"
           />
-
           <q-input
             for="input-work-name"
             dense
@@ -55,8 +61,9 @@ defineEmits<{
             borderless
             class="col"
             hide-bottom-space
-        label="ชื่องาน"
+            :placeholder="$t('workName')"
-        v-model="serviceName"
+            v-model="workName"
+            :input-style="'color: hsl(var(--text-mute-2))'"
             style="background-color: var(--surface-1)"
           >
             <template #prepend>
@@ -73,12 +80,27 @@ defineEmits<{
                   style="color: var(--stone-7)"
                 />
               </q-btn>
+              <span class="text-body2 q-pl-sm" style="color: var(--foreground)">
+                {{ $t('workNo') }} {{ index + 1 }} :
+              </span>
             </template>
           </q-input>
+          <q-btn
+            id="btn-delete-work"
+            icon="mdi-trash-can-outline"
+            dense
+            flat
+            round
+            padding="0"
+            color="negative"
+            class="q-ml-sm"
+            @click="$emit('deleteWork')"
+          />
         </div>
-
+      </template>
+      <div class="surface-2">
         <div
-      class="full-width q-py-xs text-weight-medium row justify-between items-center q-px-lg"
+          class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
           style="background-color: hsla(var(--info-bg) / 0.1)"
         >
           <span>{{ $t('productInWork') }} {{ workIndex + 1 }}</span>
@@ -94,37 +116,40 @@ defineEmits<{
           />
         </div>
 
-    <div class="q-py-md q-px-lg full-width">
+        <div class="q-py-md q-px-lg full-width q-gutter-y-sm">
           <div
             v-for="(product, index) in productItems"
             :key="product.id"
-        class="full-width q-py-md q-px-sm row items-center justify-between"
+            class="full-width row items-center justify-between"
-        style="background-color: var(--surface-1)"
           >
-        <div class="row items-center col-9 no-wrap">
+            <div
+              class="row col items-center justify-between full-width surface-1 q-py-md q-px-sm"
+            >
+              <div class="row items-center col-9 no-wrap" v-if="productItems">
                 <q-btn
                   id="btn-swap-work-product"
-            icon="mdi-swap-vertical"
+                  icon="mdi-arrow-up"
                   dense
                   flat
                   round
-            color="info"
+                  :disable="index === 0"
+                  style="color: hsl(var(--text-mute-2))"
                 />
                 <q-btn
-            id="btn-delete-work-product"
+                  id="btn-swap-work-product"
-            icon="mdi-trash-can-outline"
+                  icon="mdi-arrow-down"
                   dense
                   flat
                   round
-            color="negative"
                   class="q-mx-sm"
-            @click="$emit('deleteProduct')"
+                  :disable="index === productItems.length - 1"
+                  style="color: hsl(var(--text-mute-2))"
                 />
 
                 <q-avatar
                   size="md"
-            class="text-white q-mx-lg"
+                  class="q-mx-lg"
-            style="background-color: var(--teal-9)"
+                  style="background-color: var(--surface-tab)"
                 >
                   {{ index + 1 }}
                 </q-avatar>
@@ -141,8 +166,18 @@ defineEmits<{
                       class="text-weight-bold ellipsis-2-lines"
                       :style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
                     >
-                {{ product.label }}
+                      {{
-                <q-tooltip>{{ product.label }}</q-tooltip>
+                        $i18n.locale === 'en-US'
+                          ? product.labelEn
+                          : product.label
+                      }}
+                      <q-tooltip>
+                        {{
+                          $i18n.locale === 'en-US'
+                            ? product.labelEn
+                            : product.label
+                        }}
+                      </q-tooltip>
                     </span>
                     <div
                       class="bordered q-px-sm"
@@ -169,6 +204,29 @@ defineEmits<{
                 </span>
               </div>
             </div>
+
+            <q-btn
+              id="btn-delete-work-product"
+              icon="mdi-trash-can-outline"
+              dense
+              flat
+              round
+              color="negative"
+              class="q-mx-sm"
+              @click="$emit('deleteProduct')"
+            />
+          </div>
+        </div>
+      </div>
+    </q-expansion-item>
+    <div class="q-py-sm q-px-md bordered-t row items-center justify-between">
+      <div>
+        {{ $t('totalProductWork') }}
+        <span class="app-text-muted-2">
+          {{ workName }}
+        </span>
+      </div>
+      <div>{{ productItems?.length ?? 0 }} {{ $t('list') }}</div>
     </div>
   </div>
 </template>
@@ -181,4 +239,15 @@ defineEmits<{
   border-radius: 10px;
   background-color: var(--surface-3);
 }
+
+:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
+  color: var(--brand-1);
+}
+
+:deep(
+    .q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
+  ) {
+  padding-right: 8px !important;
+  min-width: 0px;
+}
 </style>