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

feat: workflow template properties (#70)

Browse source 
* feat: add i18n

* refactor/feat: workflow attributes type

* refactor: workflow => gray stat card

* refactor: select menu with search => separator

* feat: workflow => workflow step properties

* fix: workflow type

* fix: dialog properties component => model data

* fix: form flow => prevent toggle expansion with keyboard

* refactor: workflow step data & change status

* fix: form flow properties btn

* refactor: side menu => hide sub index

* feat: workflow => avatar & status on table

* refactor: workflow => drawer id and dialog id

* feat: workflow => card

* fix: agencies => format address
This commit is contained in:
puriphatt 2024-11-12 15:33:15 +07:00 • committed by GitHub
parent 8a2a010776
commit 42e2f2b21d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 1257 additions and 225 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/pages/04_flow-managment/FlowDialog.vue
View file

@ -1,11 +1,13 @@
<script lang="ts" setup>
import { nextTick } from 'vue';
import { nextTick, reactive, ref } from 'vue';
import {
WorkflowUserInTable,
WorkflowTemplatePayload,
WorkFlowPayloadStep,
} from 'src/stores/workflow-template/types';
import FormFlow from 'src/components/04_flow-management/FormFlow.vue';
import DialogProperties from 'src/components/dialog/DialogProperties.vue';
import DialogForm from 'src/components/DialogForm.vue';
import SideMenu from 'src/components/SideMenu.vue';
import DrawerInfo from 'src/components/DrawerInfo.vue';
@ -33,6 +35,10 @@ const userInTable = defineModel<WorkflowUserInTable[]>('userInTable', {
default: [],
});
const pageState = reactive({ propertiesModal: false });
const currStep = ref<WorkFlowPayloadStep[]>([]);
withDefaults(
defineProps<{
readonly?: boolean;
@ -57,14 +63,21 @@ async function addStep() {
value: [],
detail: '',
name: '',
attributes: { properties: [] },
});
await nextTick();
const scrollTarget = document.getElementById(
`input-flow-step-name-${flowData.value.step.length - 1}`,
`input-flow-step-name-${flowData.value.step.length - 1}-${model.value ? 'dialog' : 'drawer'}`,
);
if (scrollTarget)
scrollTarget.scrollIntoView({ behavior: 'instant', inline: 'center' });
if (scrollTarget) {
scrollTarget.scrollIntoView({ behavior: 'instant', inline: 'start' });
}
}
function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
currStep.value = flowData.value.step.filter((s) => s === step);
pageState.propertiesModal = true;
}
</script>
<template>
@ -104,22 +117,28 @@ async function addStep() {
:menu="[
{
name: $t('general.name', { msg: $t('flow.template') }),
anchor: 'form-flow-template',
anchor: 'form-flow-template-dialog',
},
{
name: $t('flow.processStep'),
anchor: 'form-flow-step',
anchor: 'form-flow-step-dialog',
useBtn: true,
},
...flowData.step.map((_s, i) => ({
name: $t('flow.stepNo', { msg: i + 1 }),
anchor: `input-flow-step-name-${i}-dialog`,
sub: true,
hideSubIndex: true,
})),
]"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#flow-form"
scroll-element="#flow-form-dialog"
>
<template v-slot:btn-form-flow-step>
<template v-slot:btn-form-flow-step-dialog>
<q-btn
dense
flat
@ -144,11 +163,12 @@ async function addStep() {
'q-py-md q-px-lg': !$q.screen.gt.sm,
}"
style="height: 100%; max-height: 100%; overflow-y: auto"
id="flow-form"
id="flow-form-dialog"
>
<FormFlow
v-model:flow-data="flowData"
v-model:register-branch-id="registerBranchId"
@trigger-properties="triggerPropertiesDialog"
/>
</section>
</div>
@ -241,22 +261,28 @@ async function addStep() {
:menu="[
{
name: $t('general.name', { msg: $t('flow.template') }),
anchor: 'form-flow-template',
anchor: 'form-flow-template-drawer',
},
{
name: $t('flow.processStep'),
anchor: 'form-flow-step',
anchor: 'form-flow-step-drawer',
useBtn: true,
},
...flowData.step.map((_s, i) => ({
name: $t('flow.stepNo', { msg: i + 1 }),
anchor: `input-flow-step-name-${i}-drawer`,
sub: true,
hideSubIndex: true,
})),
]"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#flow-form"
scroll-element="#flow-form-drawer"
>
<template v-slot:btn-form-flow-step>
<template v-slot:btn-form-flow-step-drawer>
<q-btn
dense
flat
@ -281,20 +307,27 @@ async function addStep() {
'q-py-md q-px-lg': !$q.screen.gt.sm,
}"
style="height: 100%; max-height: 100%; overflow-y: auto"
id="flow-form"
id="flow-form-drawer"
>
<FormFlow
:readonly
@change-status="$emit('changeStatus')"
onDrawer
v-model:user-in-table="userInTable"
v-model:flow-data="flowData"
v-model:register-branch-id="registerBranchId"
@change-status="$emit('changeStatus')"
@trigger-properties="triggerPropertiesDialog"
/>
</section>
</div>
</div>
</div>
</DrawerInfo>
<DialogProperties
v-model="pageState.propertiesModal"
v-model:data-step="flowData.step"
:step-index="flowData.step.indexOf(currStep[0])"
/>
</template>
<style scoped></style>