fix(04): Service

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

@@ -185,7 +185,7 @@ const branchFilter = selectFilterOptionRefMod(
         hide-bottom-space
         type="textarea"
         class="col-12"
-        :label="$t('serviceDetail')"
+        :label="$t('detail')"
         v-model="serviceDescription"
       />
     </div>

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

@@ -18,7 +18,7 @@ defineEmits<{
 }>();
 </script>
 <template>
-  <div class="full-width full-height">
+  <div class="column full-width full-height">
     <div
       class="text-weight-bold text-body1 flex items-center justify-between q-px-md q-py-sm"
       style="background: hsla(var(--info-bg) / 0.1)"
@@ -44,10 +44,10 @@ defineEmits<{
       </q-btn>
     </div>
 
-    <div class="col-12 row q-px-md q-py-xs items-center surface-1 scroll">
+    <div class="col scroll q-px-md q-py-sm flex items-center">
       <div
         v-if="serviceAttributes.additional.length > 0"
-        class="row items-center q-gutter-sm items-center"
+        class="row q-gutter-sm"
       >
         <div
           v-for="(p, index) in serviceAttributes.additional"

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

@@ -4,7 +4,7 @@ import { moveItemUp, moveItemDown, deleteItem, dialog } from 'stores/utils';
 
 import NoData from 'components/NoData.vue';
 import WorkManagementComponent from './WorkManagementComponent.vue';
-
+import AddButton from '../button/AddButton.vue';
 import { WorkItems } from 'stores/product-service/types';
 
 const { t } = useI18n();
@@ -50,19 +50,20 @@ function confirmDelete(items: unknown[], index: number) {
 
 <template>
   <div class="column col-12 full-height no-wrap">
-    <div
+    <div class="text-weight-bold text-body1 row items-center q-pb-md">
-      class="app-text-muted row items-start q-pb-md"
+      <q-icon
-      style="min-height: 40px"
-    >
-      • {{ $t(`workInformation`) }}
-      <q-btn
-        v-if="!readonly"
-        icon="mdi-plus"
-        dense
         flat
-        round
+        size="xs"
-        padding="0"
+        class="q-pa-sm rounded q-mr-sm"
-        color="primary"
+        color="info"
+        name="mdi-briefcase-outline"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`workInformation`) }}
+      <AddButton
+        v-if="!readonly"
+        id="btn-add-work"
+        icon-only
         class="q-ml-sm"
         @click="addWork"
       />

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

@@ -230,7 +230,7 @@ function confirmDelete(items: unknown[], index: number) {
 }
 </script>
 <template>
-  <div class="full-width column no-wrap">
+  <div class="full-width full-height column no-wrap">
     <div class="row">
       <q-btn-dropdown
         icon="mdi-plus"

src/pages/04_product-service/MainPage.vue

@@ -266,16 +266,6 @@ const formDataProductService = ref<ServiceCreate>({
   registeredBranchId: '',
 });
 
-const serviceTab = [
-  {
-    name: 'serviceInformation',
-    label: 'serviceInformation',
-  },
-  {
-    name: 'workInformation',
-    label: 'workInformation',
-  },
-];
 const hideStat = ref(false);
 
 const tbColumn = {
@@ -1054,9 +1044,10 @@ function assignFormDataProductServiceCreate() {
 
 async function submitService() {
   assignFormDataProductServiceCreate();
-  formDataProductService.value.image = imageProduct.value;
   formDataProductService.value.productTypeId = currentIdType.value;
 
+  if (profileFileImg.value)
+    formDataProductService.value.image = profileFileImg.value;
   if (dialogService.value) {
     formDataProductService.value.productTypeId = currentIdType.value;
 
@@ -2935,7 +2926,8 @@ watch(
                                             ? 'mdi-shopping'
                                             : 'mdi-server-network'
                                         "
-                                        style="color: var(--teal-10); top: 10%"
+                                        style="top: 10%"
+                                        :style="`color: var(--${productAndServiceTab === 'product' ? 'teal-10' : 'orange-5'})`"
                                       />
                                     </template>
                                   </q-img>
@@ -3775,7 +3767,7 @@ watch(
         :toggleTitle="$t('formDialogTitleUseStatus')"
         :img="profileUrl || '/images/product-avatar-add.png'"
         fallbackCover="/images/product-banner.png"
-        bgColor="#ebf1ee"
+        :bgColor="`hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
         :menu="[
           {
             icon: 'mdi-office-building-outline',
@@ -3893,7 +3885,7 @@ watch(
         :toggleTitle="$t('formDialogTitleUseStatus')"
         :img="profileUrl || '/images/product-avatar.png'"
         fallbackCover="/images/product-banner.png"
-        bgColor="#ebf1ee"
+        :bgColor="`hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
         :menu="[
           {
             icon: 'mdi-office-building-outline',
@@ -4039,15 +4031,20 @@ watch(
         useToggle
         hideActive
         :toggleTitle="$t('formDialogTitleUseStatus')"
-        :img="profileUrl || '/images/product-avatar-add.png'"
+        :img="profileUrl || '/images/service-avatar-add.png'"
-        fallbackCover="/images/product-banner.png"
+        fallbackCover="/images/service-banner.png"
-        bgColor="#ebf1ee"
+        :bgColor="`hsla(var(--orange-${$q.dark.isActive ? '6' : '5'}-hsl)/0.15)`"
         :menu="[
           {
             icon: 'mdi-office-building-outline',
             color: 'hsl(var(--info-bg))',
             bgColor: 'var(--surface-1)',
           },
+          {
+            icon: 'mdi-briefcase-outline',
+            color: 'hsl(var(--info-bg))',
+            bgColor: 'var(--surface-1)',
+          },
         ]"
         @view="imageDialog = true"
         @edit="refImageUpload && refImageUpload.browse()"
@@ -4128,6 +4125,7 @@ watch(
     <div
       class="col-2 surface-1 q-mx-lg q-mb-lg rounded bordered row"
       v-if="currentServiceTab === 1"
+      style="overflow: hidden"
     >
       <FormServiceProperties
         v-model:service-attributes="formDataProductService.attributes"
@@ -4167,10 +4165,12 @@ watch(
       }
     "
   >
-    <ServiceProperties
+    <div class="q-pa-lg full-height">
-      v-model:properties-option="propertiesOption"
+      <ServiceProperties
-      v-model:form-service-properties="tempValueProperties"
+        v-model:properties-option="propertiesOption"
-    />
+        v-model:form-service-properties="tempValueProperties"
+      />
+    </div>
   </DialogForm>
 
   <!-- manage work name -->
@@ -4200,7 +4200,6 @@ watch(
     height="95vh"
     :isEdit="infoServiceEdit"
     :title="$t('service')"
-    :tabs-list="serviceTab"
     v-model:modal="dialogServiceEdit"
     :submit="
       () => {
@@ -4229,7 +4228,123 @@ watch(
     "
     :delete-data="() => deleteServiceById()"
   >
-    <template #prepend>
+    <div class="q-mx-lg q-mt-lg">
+      <ProfileBanner
+        hideFade
+        useToggle
+        hideActive
+        :readonly="!infoServiceEdit"
+        :toggleTitle="$t('formDialogTitleUseStatus')"
+        :img="profileUrl || '/images/service-avatar-add.png'"
+        fallbackCover="/images/service-banner.png"
+        :bgColor="`hsla(var(--orange-${$q.dark.isActive ? '6' : '5'}-hsl)/0.15)`"
+        :menu="[
+          {
+            icon: 'mdi-office-building-outline',
+            color: 'hsl(var(--info-bg))',
+            bgColor: 'var(--surface-1)',
+          },
+          {
+            icon: 'mdi-briefcase-outline',
+            color: 'hsl(var(--info-bg))',
+            bgColor: 'var(--surface-1)',
+          },
+        ]"
+        @view="imageDialog = true"
+        @edit="refImageUpload && refImageUpload.browse()"
+      />
+    </div>
+
+    <div
+      class="col surface-1 q-mx-lg q-mt-lg q-mb-md rounded bordered scroll row relative-position"
+      id="group-form"
+    >
+      <div
+        class="col"
+        style="height: 100%; max-height: 100; overflow-y: auto"
+        v-if="$q.screen.gt.sm"
+      >
+        <div class="q-py-md q-pl-md q-pr-sm">
+          <q-item
+            v-for="v in 2"
+            :key="v"
+            dense
+            clickable
+            class="no-padding items-center rounded full-width"
+            :class="{ 'q-mt-xs': v > 1 }"
+            active-class="product-form-active"
+            :active="currentServiceTab === v"
+            @click="currentServiceTab = v"
+          >
+            <span class="full-width q-py-sm" style="padding-inline: 20px">
+              {{ v === 1 ? $t('serviceInformation') : $t('workInformation') }}
+            </span>
+          </q-item>
+        </div>
+      </div>
+      <div
+        class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
+        id="customer-form-content"
+        style="height: 100%; max-height: 100%; overflow-y: auto"
+      >
+        <BasicInformation
+          v-if="currentServiceTab === 1"
+          :readonly="!infoServiceEdit"
+          dense
+          service
+          v-model:options-branch="branchOption"
+          v-model:registered-branch-id="
+            formDataProductService.registeredBranchId
+          "
+          v-model:service-code="formDataProductService.code"
+          v-model:service-description="formDataProductService.detail"
+          v-model:service-name-th="formDataProductService.name"
+        />
+
+        <FormServiceWork
+          v-if="currentServiceTab === 2"
+          :readonly="!infoServiceEdit"
+          v-model:work-items="workItems"
+          dense
+          @addProduct="
+            async (index) => {
+              await fetchListOfProductIsAdd(currentIdType);
+              currentWorkIndex = index;
+              dialogTotalProduct = true;
+            }
+          "
+          @manage-work-name="
+            () => {
+              manageWorkNameDialog = true;
+            }
+          "
+          @work-properties="
+            (index) => {
+              currentWorkIndex = index;
+              tempValueProperties = workItems[index].attributes;
+              openPropertiesDialog('work');
+            }
+          "
+        />
+      </div>
+    </div>
+    <div
+      class="col-2 surface-1 q-mx-lg q-mb-lg rounded bordered row"
+      v-if="currentServiceTab === 1"
+      style="overflow: hidden"
+    >
+      <FormServiceProperties
+        :readonly="!infoServiceEdit"
+        v-model:service-attributes="formDataProductService.attributes"
+        @service-properties="
+          () => {
+            tempValueProperties = formDataProductService.attributes;
+            openPropertiesDialog('service');
+          }
+        "
+      />
+    </div>
+    <!-- <template #prepend>
       <ProfileUpload
         prefix-id="form-dialog-service"
         isService
@@ -4294,7 +4409,7 @@ watch(
           }
         "
       />
-    </template>
+    </template> -->
   </DialogForm>
 
   <q-dialog v-model="holdDialog" position="bottom">
@@ -4464,13 +4579,17 @@ watch(
     @save="handleImageUpload"
   >
     <template #error>
-      <div class="full-height full-width" style="background: white">
+      <div class="full-height full-width" style="background: var(--surface-1)">
         <div
           class="full-height full-width flex justify-center items-center"
-          style="background: #ebf1ee"
+          :style="`background: ${
+            dialogProduct || dialogProductEdit
+              ? `hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`
+              : `hsla(var(--orange-${$q.dark.isActive ? '6' : '5'}-hsl)/0.15)`
+          }`"
         >
           <q-img
-            src="/images/product-avatar.png"
+            :src="`/images/${dialogProduct || dialogProductEdit ? 'product' : 'service'}-avatar.png`"
             fit="contain"
             style="height: 100%"
           />