refactor: product create

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

@@ -23,7 +23,6 @@ defineProps<{
   dense?: boolean;
   outlined?: boolean;
   readonly?: boolean;
-  separator?: boolean;
   isType?: boolean;
 }>();
 
@@ -51,11 +50,20 @@ const branchFilter = selectFilterOptionRefMod(
 </script>
 
 <template>
-  <div class="col-3 app-text-muted">
+  <div class="row col-12">
-    • {{ $t(`formDialogTitleInformation`) }}
+    <div class="col-12 q-pb-sm text-weight-bold text-body1 row items-center">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-sm"
+        color="info"
+        name="mdi-office-building-outline"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`formDialogTitleInformation`) }}
     </div>
 
-  <div class="col-9 row q-col-gutter-md">
+    <div class="col-12 row q-col-gutter-sm">
       <q-select
         outlined
         clearable
@@ -141,7 +149,19 @@ const branchFilter = selectFilterOptionRefMod(
         :label="$t('productName')"
         v-model="name"
       />
-
+      <q-input
+        lazy-rules="ondemand"
+        for="input-process"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-3"
+        :label="$t('productProcessingTime')"
+        v-model="process"
+        type="number"
+      />
       <q-input
         lazy-rules="ondemand"
         for="input-detail"
@@ -154,7 +174,6 @@ const branchFilter = selectFilterOptionRefMod(
         class="col-12"
         :label="$t('serviceDetail')"
         v-model="detail"
-      autogrow
       />
 
       <div class="col-12">
@@ -186,27 +205,21 @@ const branchFilter = selectFilterOptionRefMod(
           />
         </q-field>
       </div>
-
+      <!-- <q-input
-    <q-input
         lazy-rules="ondemand"
-      for="input-process"
+        for="input-detail"
         :dense="dense"
         outlined
         :readonly="readonly"
         :borderless="readonly"
         hide-bottom-space
-      class="col-4"
+        type="textarea"
-      :label="$t('productProcessingTime')"
+        class="col-12"
-      v-model="process"
+        :label="$t('formDialogInputRemark')"
-      type="number"
+        v-model="detail"
-    />
+      /> -->
+    </div>
   </div>
-
-  <q-separator
-    v-if="separator"
-    class="col-12 q-mb-md"
-    style="padding-block: 0.5px; margin-top: 32px"
-  />
 </template>
 
 <style scoped>

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

@@ -13,8 +13,19 @@ defineProps<{
 </script>
 
 <template>
-  <div class="col-3 app-text-muted">• {{ $t('priceInformation') }}</div>
+  <div class="row col-12">
-  <div class="col-9 row q-col-gutter-md">
+    <div class="col-12 q-pb-sm text-weight-bold text-body1 row items-center">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-sm"
+        color="info"
+        name="mdi-cash"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t('priceInformation') }}
+    </div>
+    <div class="col-12 row q-col-gutter-sm">
       <q-input
         lazy-rules="ondemand"
         :dense="dense"
@@ -54,6 +65,7 @@ defineProps<{
         v-model="serviceCharge"
       />
     </div>
+  </div>
 </template>
 
 <style scoped></style>

src/components/ProfileBanner.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import ToggleButton from './button/ToggleButton.vue';
 
 defineProps<{
   icon?: string;
@@ -12,6 +13,8 @@ defineProps<{
   toggleTitle?: string;
 
   hideFade?: boolean;
+  hideActive?: boolean;
+  noImageAction?: boolean;
   active?: boolean;
   readonly?: boolean;
   useToggle?: boolean;
@@ -73,11 +76,12 @@ const showOverlay = ref(false);
           <q-avatar
             size="6rem"
             font-size="3rem"
-            class="cursor-pointer relative-position"
+            class="relative-position"
             style="z-index: 1"
             :style="{
               background: `${bgColor || 'var(--brand-1)'}`,
               color: `${color || 'white'}`,
+              cursor: `${noImageAction ? 'default' : 'pointer'}`,
             }"
             @mouseover="showOverlay = true"
             @mouseleave="showOverlay = false"
@@ -98,6 +102,7 @@ const showOverlay = ref(false);
             </q-img>
             <q-icon id="profile-view" v-else :name="icon || 'mdi-account'" />
             <q-badge
+              v-if="!hideActive"
               class="absolute-bottom-right"
               style="
                 border-radius: 10px;

src/i18n/en-US/form-dialog.ts

@@ -196,4 +196,7 @@ export default {
   passportExpire: 'Passport Expiration Date',
 
   pleaseInformation: 'Please enter information',
+
+  // product
+  formDialogTitleUseStatus: 'Status',
 };

src/i18n/th-th/form-dialog.ts

@@ -196,4 +196,7 @@ export default {
   passportExpire: 'วันหมดอายุของเอกสาร(visa ,passport)',
 
   pleaseInformation: 'โปรดกรอกข้อมูล',
+
+  // product
+  formDialogTitleUseStatus: 'สถานะการใช้งาน',
 };

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

@@ -217,6 +217,7 @@ const dialogProductServiceType = ref(false);
 const dialogTotalProduct = ref(false);
 const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
 
+const productTab = ref(1);
 const productGroup = ref<ProductGroup[]>();
 const productType = ref<ProductGroup[]>();
 const product = ref<(ProductList & { type: 'product' })[]>();
@@ -1414,6 +1415,7 @@ watch(
       icon="mdi-folder-multiple-plus"
       @click="
         async () => {
+          productTab = 1;
           clearFormProduct();
           await fetchListOfOptionBranch();
           dialogProduct = true;
@@ -2089,6 +2091,13 @@ watch(
 
                     <template v-slot:body="props">
                       <q-tr
+                        :style="
+                          props.rowIndex % 2 !== 0
+                            ? $q.dark.isActive
+                              ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+                              : `background: #f9fafc`
+                            : ''
+                        "
                         :id="`enter-${props.row.name}`"
                         class="cursor-pointer"
                         :class="{
@@ -2342,6 +2351,7 @@ watch(
                                   <q-item-section class="q-py-sm">
                                     <div class="q-pa-sm surface-2 rounded">
                                       <q-toggle
+                                        color="positive"
                                         :id="`view-detail-btn-${props.row.name}-status`"
                                         dense
                                         size="sm"
@@ -3162,6 +3172,7 @@ watch(
                                   <q-item-section class="q-py-sm">
                                     <div class="q-pa-sm surface-2 rounded">
                                       <q-toggle
+                                        color="positive"
                                         :id="`view-detail-btn-${props.row.name}-status`"
                                         dense
                                         size="sm"
@@ -3334,9 +3345,13 @@ watch(
   >
     <div class="q-mx-lg q-mt-lg">
       <ProfileBanner
+        readonly
+        noImageAction
         active
         hideFade
+        hideActive
         useToggle
+        :toggleTitle="$t('formDialogTitleUseStatus')"
         :icon="productMode === 'group' ? 'mdi-folder' : 'mdi-folder-table'"
         :title="formDataGroup.name"
         :caption="formDataGroup.code"
@@ -3363,7 +3378,6 @@ watch(
               : '--violet-11'
         }-hsl)/0.1)`"
         v-model:toggle-status="currentStatusGroupType"
-        @view="imageDialog = true"
         @update:toggle-status="
           () => {
             currentStatusGroupType =
@@ -3466,6 +3480,7 @@ watch(
     <InfoForm>
       <div class="q-mx-lg q-mt-lg">
         <ProfileBanner
+          noImageAction
           :active="currentStatusGroupType !== 'INACTIVE'"
           hideFade
           useToggle
@@ -3497,7 +3512,6 @@ watch(
               bgColor: 'var(--surface-1)',
             },
           ]"
-          @view="imageDialog = true"
           @update:toggle-status="
             async (v) => {
               await triggerChangeStatus(currentIdGroupType, v, productMode);
@@ -3693,9 +3707,8 @@ watch(
   </FormDialog>
 
   <!-- Add Product -->
-  <FormDialog
+  <DialogForm
     v-model:modal="dialogProduct"
-    noAddress
     :title="$t('buttonAddProduct')"
     :submit="
       () => {
@@ -3709,8 +3722,7 @@ watch(
       }
     "
   >
-    <template #prepend>
+    <!-- <ProfileUpload
-      <ProfileUpload
         prefix-id="form-dialog-product"
         isProduct
         v-model:url-profile="profileUrl"
@@ -3718,11 +3730,64 @@ watch(
         v-model:profile-submit="profileSubmit"
         @input-file="inputFile.click()"
         @cancel-file="inputFile.value = ''"
+      /> -->
+    <div class="q-mx-lg q-mt-lg">
+      <ProfileBanner
+        hideFade
+        useToggle
+        hideActive
+        :toggleTitle="$t('formDialogTitleUseStatus')"
+        img="/images/product-avatar.png"
+        fallbackCover="/images/product-banner.png"
+        bgColor="#ebf1ee"
+        :menu="[
+          {
+            icon: 'mdi-office-building-outline',
+            color: 'hsl(var(--info-bg))',
+            bgColor: 'var(--surface-1)',
+          },
+        ]"
       />
-    </template>
+    </div>
 
-    <template #information>
+    <div
+      class="col surface-1 q-ma-lg 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="productTab === v"
+            @click="productTab = v"
+          >
+            <span class="full-width q-py-sm" style="padding-inline: 20px">
+              {{
+                v === 0
+                  ? $t('formDialogTitleInformation')
+                  : $t('priceInformation')
+              }}
+            </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"
+      >
         <BasicInfoProduct
+          v-if="productTab === 1"
           v-model:options-branch="branchOption"
           v-model:registered-branch-id="formDataProduct.registeredBranchId"
           v-model:detail="formDataProduct.detail"
@@ -3733,16 +3798,16 @@ watch(
           dense
           separator
         />
-    </template>
-    <template #person>
         <PriceDataComponent
+          v-if="productTab === 2"
           v-model:price="formDataProduct.price"
           v-model:agent-price="formDataProduct.agentPrice"
           v-model:service-charge="formDataProduct.serviceCharge"
           dense
         />
-    </template>
+      </div>
-  </FormDialog>
+    </div>
+  </DialogForm>
 
   <!-- edit product -->
   <FormDialog
@@ -4184,6 +4249,7 @@ watch(
         <q-item clickable v-ripple>
           <q-item-section avatar>
             <q-toggle
+              color="positive"
               dense
               :id="`view-detail-btn-${currentNode.name}-status`"
               size="sm"
@@ -4354,4 +4420,10 @@ watch(
 * :deep(.q-icon.mdi-play) {
   display: none;
 }
+
+.product-form-active {
+  background-color: hsla(var(--info-bg) / 0.2);
+  color: hsl(var(--info-bg));
+  font-weight: 600;
+}
 </style>