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,162 +50,176 @@ const branchFilter = selectFilterOptionRefMod(
 </script>
 
 <template>
-  <div class="col-3 app-text-muted">
-    • {{ $t(`formDialogTitleInformation`) }}
-  </div>
+  <div class="row col-12">
+    <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">
-    <q-select
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      input-debounce="0"
-      class="col-3"
-      v-model="code"
-      id="select-br-id"
-      option-label="label"
-      option-value="value"
-      lazy-rules="ondemand"
-      :dense="dense"
-      :readonly="readonly"
-      :options="codeOptions"
-      :label="$t('productCode')"
-      :hide-dropdown-icon="readonly"
-      :rules="[(val: string) => !!val]"
-      @filter="codeFilter"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('noResults') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
-    <q-select
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      input-debounce="0"
-      class="col-3"
-      option-value="id"
-      option-label="name"
-      lazy-rules="ondemand"
-      id="input-source-nationality"
-      v-model="registeredBranchId"
-      :dense="dense"
-      :readonly="readonly"
-      :options="branchOptions"
-      :hide-dropdown-icon="readonly"
-      :label="$t('registeredBranch')"
-      :rules="[
-        (val) => {
-          const roles = getRole() || [];
-          const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
-            (role) => roles.includes(role),
-          );
-          return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
-        },
-      ]"
-      @filter="branchFilter"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('noResults') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
+    <div class="col-12 row q-col-gutter-sm">
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        input-debounce="0"
+        class="col-3"
+        v-model="code"
+        id="select-br-id"
+        option-label="label"
+        option-value="value"
+        lazy-rules="ondemand"
+        :dense="dense"
+        :readonly="readonly"
+        :options="codeOptions"
+        :label="$t('productCode')"
+        :hide-dropdown-icon="readonly"
+        :rules="[(val: string) => !!val]"
+        @filter="codeFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        input-debounce="0"
+        class="col-3"
+        option-value="id"
+        option-label="name"
+        lazy-rules="ondemand"
+        id="input-source-nationality"
+        v-model="registeredBranchId"
+        :dense="dense"
+        :readonly="readonly"
+        :options="branchOptions"
+        :hide-dropdown-icon="readonly"
+        :label="$t('registeredBranch')"
+        :rules="[
+          (val) => {
+            const roles = getRole() || [];
+            const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
+              (role) => roles.includes(role),
+            );
+            return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
+          },
+        ]"
+        @filter="branchFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
 
-    <q-input
-      lazy-rules="ondemand"
-      for="input-name"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      :borderless="readonly"
-      hide-bottom-space
-      class="col-6"
-      :label="$t('productName')"
-      v-model="name"
-    />
-
-    <q-input
-      lazy-rules="ondemand"
-      for="input-detail"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      :borderless="readonly"
-      hide-bottom-space
-      type="textarea"
-      class="col-12"
-      :label="$t('serviceDetail')"
-      v-model="detail"
-      autogrow
-    />
-
-    <div class="col-12">
-      <q-field
-        class="full-width"
+      <q-input
+        lazy-rules="ondemand"
+        for="input-name"
+        :dense="dense"
         outlined
         :readonly="readonly"
         :borderless="readonly"
-        :label="$t('detail')"
-        stack-label
-        dense
-      >
-        <q-editor
-          dense
-          v-model="remark"
-          min-height="5rem"
-          class="full-width q-mt-sm q-mb-xs"
-          :flat="!readonly"
+        hide-bottom-space
+        class="col-6"
+        :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"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        type="textarea"
+        class="col-12"
+        :label="$t('serviceDetail')"
+        v-model="detail"
+      />
+
+      <div class="col-12">
+        <q-field
+          class="full-width"
+          outlined
           :readonly="readonly"
-          :toolbar-color="
-            readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
-          "
-          :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
-          style="
-            cursor: auto;
-            color: var(--foreground);
-            border-color: var(--surface-3);
-          "
-        />
-      </q-field>
+          :borderless="readonly"
+          :label="$t('detail')"
+          stack-label
+          dense
+        >
+          <q-editor
+            dense
+            v-model="remark"
+            min-height="5rem"
+            class="full-width q-mt-sm q-mb-xs"
+            :flat="!readonly"
+            :readonly="readonly"
+            :toolbar-color="
+              readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
+            "
+            :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
+            style="
+              cursor: auto;
+              color: var(--foreground);
+              border-color: var(--surface-3);
+            "
+          />
+        </q-field>
+      </div>
+      <!-- <q-input
+        lazy-rules="ondemand"
+        for="input-detail"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        type="textarea"
+        class="col-12"
+        :label="$t('formDialogInputRemark')"
+        v-model="detail"
+      /> -->
     </div>
-
-    <q-input
-      lazy-rules="ondemand"
-      for="input-process"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      :borderless="readonly"
-      hide-bottom-space
-      class="col-4"
-      :label="$t('productProcessingTime')"
-      v-model="process"
-      type="number"
-    />
   </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,46 +13,58 @@ defineProps<{
 </script>
 
 <template>
-  <div class="col-3 app-text-muted">• {{ $t('priceInformation') }}</div>
-  <div class="col-9 row q-col-gutter-md">
-    <q-input
-      lazy-rules="ondemand"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      :borderless="readonly"
-      hide-bottom-space
-      class="col-4"
-      type="number"
-      :label="$t('salePrice')"
-      v-model="price"
-    />
+  <div class="row col-12">
+    <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"
+        outlined
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-4"
+        type="number"
+        :label="$t('salePrice')"
+        v-model="price"
+      />
 
-    <q-input
-      lazy-rules="ondemand"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      :borderless="readonly"
-      hide-bottom-space
-      class="col-4"
-      type="number"
-      :label="$t('agentPrice')"
-      v-model="agentPrice"
-    />
+      <q-input
+        lazy-rules="ondemand"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-4"
+        type="number"
+        :label="$t('agentPrice')"
+        v-model="agentPrice"
+      />
 
-    <q-input
-      lazy-rules="ondemand"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      :borderless="readonly"
-      hide-bottom-space
-      class="col-4"
-      type="number"
-      :label="$t('processingPrice')"
-      v-model="serviceCharge"
-    />
+      <q-input
+        lazy-rules="ondemand"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-4"
+        type="number"
+        :label="$t('processingPrice')"
+        v-model="serviceCharge"
+      />
+    </div>
   </div>
 </template>
 

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,31 +3730,84 @@ 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>
-      <BasicInfoProduct
-        v-model:options-branch="branchOption"
-        v-model:registered-branch-id="formDataProduct.registeredBranchId"
-        v-model:detail="formDataProduct.detail"
-        v-model:remark="formDataProduct.remark"
-        v-model:name="formDataProduct.name"
-        v-model:code="formDataProduct.code"
-        v-model:process="formDataProduct.process"
-        dense
-        separator
-      />
-    </template>
-    <template #person>
-      <PriceDataComponent
-        v-model:price="formDataProduct.price"
-        v-model:agent-price="formDataProduct.agentPrice"
-        v-model:service-charge="formDataProduct.serviceCharge"
-        dense
-      />
-    </template>
-  </FormDialog>
+    <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"
+          v-model:remark="formDataProduct.remark"
+          v-model:name="formDataProduct.name"
+          v-model:code="formDataProduct.code"
+          v-model:process="formDataProduct.process"
+          dense
+          separator
+        />
+        <PriceDataComponent
+          v-if="productTab === 2"
+          v-model:price="formDataProduct.price"
+          v-model:agent-price="formDataProduct.agentPrice"
+          v-model:service-charge="formDataProduct.serviceCharge"
+          dense
+        />
+      </div>
+    </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>