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

feat: menu request list (#75)

Browse source 
* feat: i18n

* feat: request list

* refactor: hide stat transition on app.scss

* feat: request list i18n

* feat: request list => constants and main page

* feat: add store

* feat: add fetch data

* feat: add utilities fn

* feat: add store function / types

* refactor: request list type

* refactor: request list constants

* refactor: quotation card => add customData and badge color props

* feat: avatar group components

* feat: request list group

* refactor: request list => remove tab, add table data

* feat: send search query

* feat: add parameter

* refactor: remove unused function

* fix: rename component lits to list

* feat: show stats from api

* chore: cleanup

* refactor: make it type safe

* refactor: accept rotate flow id as parameter

* feat: use page size component

* feat: add component, data display & expansion product

* feat: i18n

* refactor: constants and request list table

* refactor: type code, createdAt, updatedAt

* refactor: utils function changThemeMode

* feat: request list => view page

* refactor: use type instead of infer from value

* fix: function getEmployeeName att type

* refactor: fetch work list

* refactor: loop work list

* feat: add i18n duty

* feat: add form issue component

* feat: add form issue section

* fix: store error

* refactor: edit by value

* refactor: accept basic info from outside instead

* feat: add status filter support on fetch

* refactor: remove delete button

* refactor: wording

* feat/fix: request list i18n & constant

* feat: document type

* feat/refactor: request list => document expansion

* refactor: doc expansion use FormGroupHead

* refactor: fetch data based on id from route param

* refactor: text area disable

* feat: properties expansion display (mocking)

* refactor: add document at product relation

* refactor: edit get value product

* feat: get workflow step to show on top

* refactor: add type

* refactor: add get attachment

* refactor: add view attachment

* refactor: edit file name

* refactor: define props get hide icon

* refactor: edit align row

* refactor: by value table document

* refactor: by value row table

* feat: add independent ocr dialog

* chore: clean up

* refactor: accept more props and small adjustment

* fix: error withDefault call

* feat: accept default metadata when open

* fix: typo

* feat: add override hook when finish ocr

* feat: reset state on open

* feat: detect reader result is actually string

* fix: variable name conflict

* feat: properties to input component

* feat: properties input in properties expansion

* feat: properties expansion data (temporary)

* refactor: add i18n status work

* refactor: edit type work status and add step status

* refactor: add edit status work

* refactor: edit step work

* refactor: properties data type

* refactor: filter selected product & specific properties

* feat: add emit event

* refactor: change variable name for better understanding

* refactor: hide step that no properties

* refactor: work status type to validate

* feat: work status color

* refactor: key for filename

* refactor: close expansion when change step

* refactor: responsive meta data

* refactor: product expansion responsive

* fix: dark mode step text color

* fix: document expansion table no data label

* refactor: main page body bordered and overflow hidden

* refactor: use utils function instead

* refactor: add process

* refactor: by value  name

* refactor: add upload file

* refactor: upload file

* refactor: by value

* fix: option worker type

* refactor: fetchRequestAttachment after edit

* fix: metadata display

* refactor: add class full-height

* refactor: edit type

* refactor: fetch file

* refactor: by value visa

* refactor: request list attributes type

* fix: properties to input props (placeholder, readonly, disable)

* feat: request list properties function

* fix: error when no workflow

* docs: update comment to fix indent

* refactor: step type (attributes)

* refactor: add attributes payload on editStatusRequestWork function

* feat/refactor: functional form expansion/filter worklist

* refactor: set attributes properties after submit

* refactor: add request work ready status

* feat: request list => form employee component

* feat/refactor: form expansion select user/layout

* fix: properties readonly

---------

Co-authored-by: puriphatt <puriphat@frappet.com>
Co-authored-by: Thanaphon Frappet <thanaphon@frappet.com>
This commit is contained in:
Methapon Metanipat 2024-11-22 18:02:03 +07:00 • committed by GitHub
parent 9105dcf7fe
commit 972f6ba13e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
36 changed files with 3653 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

241
src/pages/08_request-list/ProductExpansion.vue Normal file
View file

@ -0,0 +1,241 @@
<script setup lang="ts">
import { baseUrl } from 'src/stores/utils';
import BadgeComponent from 'src/components/BadgeComponent.vue';
import { ProductRelation } from 'src/stores/quotations/types';
import { Step, RequestWorkStatus } from 'src/stores/request-list/types';
const workStatus = [
RequestWorkStatus.Ready,
RequestWorkStatus.Waiting,
RequestWorkStatus.InProgress,
RequestWorkStatus.Validate,
RequestWorkStatus.Ended,
RequestWorkStatus.Completed,
];
const productId = defineModel<string>('productId', { required: true });
defineEmits<{
(
e: 'changeStatus',
v: { step?: Step; requestWorkStatus: RequestWorkStatus },
): void;
}>();
defineProps<{
product: ProductRelation;
name: string;
code: string;
status?: Step;
}>();
// NOTE: Function
</script>
<template>
<q-expansion-item
dense
class="overflow-hidden"
switch-toggle-side
style="border-radius: var(--radius-2)"
expand-icon="mdi-chevron-down-circle"
header-class="surface-1"
>
<template v-slot:header>
<header class="row items-center q-py-sm no-wrap full-width">
<div
class="img-frame rounded q-mr-md"
:class="{ dark: $q.dark.isActive }"
style="width: 50px; height: 50px"
>
<q-img
:src="`${baseUrl}/product/${productId}/image/`"
style="object-fit: cover; width: 100%; height: 100%"
>
<template #error>
<span
class="flex items-center justify-center full-height full-width"
>
<q-img src="/shop-image.png" style="width: 80%"></q-img>
</span>
</template>
</q-img>
</div>
<div class="row col">
<span class="row items-center col-12 no-wrap">
<span class="ellipsis-2-lines">
{{ product?.name || name }}
</span>
</span>
<div class="rounded q-px-xs app-text-muted surface-3">
{{ product?.code || code }}
</div>
</div>
<div class="q-ml-auto q-gutter-y-xs">
<div class="justify-end flex">
<q-btn-dropdown
:disable="
status?.workStatus === 'Waiting' ||
status?.workStatus === 'InProgress'
"
dense
unelevated
:label="
$q.screen.lt.sm
? undefined
: $t(
`requestList.status.work.${status?.workStatus ?? RequestWorkStatus.Pending}`,
)
"
class="text-capitalize text-weight-regular product-status rounded"
:class="{
disable:
$q.screen.gt.xs &&
(status?.workStatus === RequestWorkStatus.Waiting ||
status?.workStatus === RequestWorkStatus.InProgress),
pending:
($q.screen.gt.xs && !status?.workStatus) ||
status?.workStatus === RequestWorkStatus.Pending ||
status?.workStatus === RequestWorkStatus.Ready,
progress:
$q.screen.gt.xs &&
status?.workStatus === RequestWorkStatus.Validate,
complete:
$q.screen.gt.xs &&
(status?.workStatus === RequestWorkStatus.Ended ||
status?.workStatus === RequestWorkStatus.Completed),
}"
:style="
$q.screen.xs &&
(status?.workStatus === RequestWorkStatus.Waiting ||
status?.workStatus === RequestWorkStatus.InProgress)
? `opacity: 30% !important`
: ''
"
:menu-offset="[0, 8]"
dropdown-icon="mdi-chevron-down"
content-class="bordered rounded"
@click.stop
>
<q-list dense>
<q-item
v-for="(value, index) in workStatus"
:key="index"
clickable
v-close-popup
@click="
$emit('changeStatus', {
step: status,
requestWorkStatus: workStatus[index],
})
"
>
{{ $t(`requestList.status.work.${value}`) }}
</q-item>
</q-list>
</q-btn-dropdown>
</div>
<div class="text-caption">
<span
class="q-pr-xs"
style="border-right: 1px solid #ccc"
v-if="$q.screen.gt.xs"
>
{{ $t('general.status') }}
</span>
<span
class="q-pl-xs product-status-text"
:class="{
pending:
!status?.workStatus ||
status.workStatus === RequestWorkStatus.Pending ||
status.workStatus === RequestWorkStatus.Ready,
wait: status?.workStatus === 'Waiting',
progress:
status?.workStatus === RequestWorkStatus.InProgress ||
status?.workStatus === RequestWorkStatus.Validate,
complete:
status?.workStatus === RequestWorkStatus.Ended ||
status?.workStatus === RequestWorkStatus.Completed,
}"
>
{{
$t(`requestList.status.work.${status?.workStatus ?? 'Pending'}`)
}}
</span>
</div>
</div>
</header>
</template>
<slot :product="product"></slot>
</q-expansion-item>
</template>
<style scoped>
:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
color: hsl(var(--text-mute));
}
:deep(
i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
) {
color: var(--brand-1);
}
:deep(
.q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
.q-focus-helper
) {
visibility: hidden;
}
.img-frame {
background: hsla(var(--teal-10-hsl) / 0.15);
&.dark {
background: hsla(var(--teal-8-hls) / 0.15);
}
}
.product-status {
padding-left: 8px;
border-radius: 20px;
color: hsl(var(--_color));
background: hsla(var(--_color) / 0.15);
&.disable {
--_color: var(--stone-7-hsl);
}
&.pending {
--_color: var(--yellow-6-hsl);
}
&.wait {
--_color: var(--blue-6-hsl);
}
&.progress {
--_color: var(--orange-5-hsl);
}
&.complete {
--_color: var(--green-5-hsl);
}
}
.product-status-text {
color: hsl(var(--_color));
&.pending {
--_color: var(--yellow-6-hsl);
}
&.wait {
--_color: var(--blue-6-hsl);
}
&.progress {
--_color: var(--orange-5-hsl);
}
&.complete {
--_color: var(--green-5-hsl);
}
}
</style>