chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: product create

Browse source
This commit is contained in:
puriphatt 2024-08-09 10:56:27 +00:00
parent 676c2c5ebf
commit 5e4cfb747d
8 changed files with 325 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/product-avatar.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
public/images/product-banner.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 535 KiB

53
src/components/04_product-service/BasicInfoProduct.vue
View file

@ -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">
• {{ $t(`formDialogTitleInformation`) }}
<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">
<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"
:label="$t('productProcessingTime')"
v-model="process"
type="number"
/>
type="textarea"
class="col-12"
:label="$t('formDialogInputRemark')"
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>

16
src/components/04_product-service/PriceDataComponent.vue
View file

@ -13,8 +13,19 @@ defineProps<{
</script>
<template>
<div class="col-3 app-text-muted">• {{ $t('priceInformation') }}</div>
<div class="col-9 row q-col-gutter-md">
<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"
@ -54,6 +65,7 @@ defineProps<{
v-model="serviceCharge"
/>
</div>
</div>
</template>
<style scoped></style>

7
src/components/ProfileBanner.vue
View file

@ -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;

3
src/i18n/en-US/form-dialog.ts
View file

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

3
src/i18n/th-th/form-dialog.ts
View file

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

96
src/pages/04_product-service/MainPage.vue
View file

@ -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>
</FormDialog>
</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>