refactor: service, package => expansion workflow step
This commit is contained in:
puriphatt
parent
f68d49a0d9
commit
20856b2d0a
1 changed files with 133 additions and 122 deletions
|
|
@ -548,136 +548,147 @@ watch(
|
||||||
|
|
||||||
<!-- properties -->
|
<!-- properties -->
|
||||||
<div class="bordered-t">
|
<div class="bordered-t">
|
||||||
<div
|
<q-expansion-item
|
||||||
class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
|
default-opened
|
||||||
style="background-color: hsla(var(--info-bg) / 0.1)"
|
switch-toggle-side
|
||||||
|
header-style="background-color: hsla(var(--info-bg) / 0.1); padding: 4px 16px; min-height: 36.08px"
|
||||||
|
header-class="row items-center q-px-md"
|
||||||
|
expand-icon-class="no-padding"
|
||||||
|
dense
|
||||||
>
|
>
|
||||||
<span>
|
<template #header>
|
||||||
{{ $t('flow.processStep') }}
|
<div
|
||||||
</span>
|
class="text-weight-medium row justify-between items-center full-width"
|
||||||
<q-btn
|
>
|
||||||
v-if="!readonly"
|
<span>
|
||||||
id="btn-add-work-product"
|
{{ $t('flow.processStep') }}
|
||||||
class="text-capitalize rounded"
|
</span>
|
||||||
flat
|
<q-btn
|
||||||
dense
|
v-if="!readonly"
|
||||||
padding="4px 8px"
|
id="btn-add-work-product"
|
||||||
style="color: hsl(var(--info-bg))"
|
class="text-capitalize rounded"
|
||||||
@click.stop="$emit('workProperties')"
|
flat
|
||||||
>
|
dense
|
||||||
<Icon
|
padding="4px 8px"
|
||||||
icon="basil:settings-adjust-solid"
|
style="color: hsl(var(--info-bg))"
|
||||||
width="20.08px"
|
@click.stop="$emit('workProperties')"
|
||||||
style="color: hsl(var(--info-bg))"
|
>
|
||||||
/>
|
<Icon
|
||||||
</q-btn>
|
icon="basil:settings-adjust-solid"
|
||||||
</div>
|
width="20.08px"
|
||||||
|
style="color: hsl(var(--info-bg))"
|
||||||
<div class="q-py-md q-px-md full-width column">
|
/>
|
||||||
<span
|
</q-btn>
|
||||||
v-if="
|
</div>
|
||||||
attributes.stepProperties?.length === 0 ||
|
</template>
|
||||||
!attributes.stepProperties
|
<div class="q-py-md q-px-md full-width column">
|
||||||
"
|
|
||||||
class="app-text-muted"
|
|
||||||
>
|
|
||||||
{{ $t('flow.noProcessStep') }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<template
|
|
||||||
v-for="(step, stepIndex) in attributes.stepProperties"
|
|
||||||
:key="step.id"
|
|
||||||
>
|
|
||||||
<span
|
<span
|
||||||
v-if="
|
v-if="
|
||||||
attributes.stepProperties?.length > 0 &&
|
attributes.stepProperties?.length === 0 ||
|
||||||
step.attributes.length > 0
|
!attributes.stepProperties
|
||||||
"
|
"
|
||||||
|
class="app-text-muted"
|
||||||
>
|
>
|
||||||
<q-icon name="mdi-circle-medium" />
|
{{ $t('flow.noProcessStep') }}
|
||||||
{{ $t('flow.stepNo', { msg: stepIndex + 1 }) }}:
|
|
||||||
{{ mapStepName(step.id) }}
|
|
||||||
|
|
||||||
<!-- step att -->
|
|
||||||
<section
|
|
||||||
class="col scroll q-pa-sm flex items-center surface-1 rounded"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="
|
|
||||||
attributes.stepProperties[stepIndex].attributes.length > 0
|
|
||||||
"
|
|
||||||
class="row q-gutter-sm"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-for="(att, i) in step.attributes"
|
|
||||||
:key="i"
|
|
||||||
class="surface-2 bordered rounded q-px-xs"
|
|
||||||
>
|
|
||||||
{{ optionStore.mapOption(att.fieldName ?? '') }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div v-else class="app-text-muted-2">
|
|
||||||
{{ $t('productService.service.noProperties') }}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- step product -->
|
|
||||||
<section
|
|
||||||
class="q-pt-sm q-pl-lg column"
|
|
||||||
:class="{
|
|
||||||
'q-pb-sm':
|
|
||||||
stepIndex !== attributes.stepProperties.length - 1,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<span class="app-text-muted-2 text-caption">
|
|
||||||
{{
|
|
||||||
$t('general.select', {
|
|
||||||
msg: $t('productService.product.title'),
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-if="productItems.length > 0"
|
|
||||||
class="surface-1 rounded q-pa-xs"
|
|
||||||
>
|
|
||||||
<div v-for="product in productItems" :key="product.id">
|
|
||||||
<q-checkbox
|
|
||||||
:disable="readonly"
|
|
||||||
:model-value="
|
|
||||||
attributes.stepProperties[
|
|
||||||
stepIndex
|
|
||||||
].productsId.includes(product.id)
|
|
||||||
"
|
|
||||||
@click="toggleCheckProductInStep(product.id, stepIndex)"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
{{ product.name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span
|
|
||||||
v-else
|
|
||||||
class="app-text-muted-2 surface-1 rounded q-pa-xs"
|
|
||||||
>
|
|
||||||
{{ $t('productService.product.noProduct') }}
|
|
||||||
</span>
|
|
||||||
</section>
|
|
||||||
</span>
|
</span>
|
||||||
</template>
|
|
||||||
|
|
||||||
<span
|
<template
|
||||||
v-if="
|
v-for="(step, stepIndex) in attributes.stepProperties"
|
||||||
attributes.workflowId &&
|
:key="step.id"
|
||||||
attributes.stepProperties?.every(
|
>
|
||||||
(s) => s.attributes.length === 0,
|
<span
|
||||||
)
|
v-if="
|
||||||
"
|
attributes.stepProperties?.length > 0 &&
|
||||||
class="app-text-muted"
|
step.attributes.length > 0
|
||||||
>
|
"
|
||||||
{{ $t('productService.service.noPropertiesYet') }}
|
>
|
||||||
</span>
|
<q-icon name="mdi-circle-medium" />
|
||||||
</div>
|
{{ $t('flow.stepNo', { msg: stepIndex + 1 }) }}:
|
||||||
|
{{ mapStepName(step.id) }}
|
||||||
|
|
||||||
|
<!-- step att -->
|
||||||
|
<section
|
||||||
|
class="col scroll q-pa-sm flex items-center surface-1 rounded"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="
|
||||||
|
attributes.stepProperties[stepIndex].attributes.length >
|
||||||
|
0
|
||||||
|
"
|
||||||
|
class="row q-gutter-sm"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-for="(att, i) in step.attributes"
|
||||||
|
:key="i"
|
||||||
|
class="surface-2 bordered rounded q-px-xs"
|
||||||
|
>
|
||||||
|
{{ optionStore.mapOption(att.fieldName ?? '') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div v-else class="app-text-muted-2">
|
||||||
|
{{ $t('productService.service.noProperties') }}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- step product -->
|
||||||
|
<section
|
||||||
|
class="q-pt-sm q-pl-lg column"
|
||||||
|
:class="{
|
||||||
|
'q-pb-sm':
|
||||||
|
stepIndex !== attributes.stepProperties.length - 1,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<span class="app-text-muted-2 text-caption">
|
||||||
|
{{
|
||||||
|
$t('general.select', {
|
||||||
|
msg: $t('productService.product.title'),
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="productItems.length > 0"
|
||||||
|
class="surface-1 rounded q-pa-xs"
|
||||||
|
>
|
||||||
|
<div v-for="product in productItems" :key="product.id">
|
||||||
|
<q-checkbox
|
||||||
|
:disable="readonly"
|
||||||
|
:model-value="
|
||||||
|
attributes.stepProperties[
|
||||||
|
stepIndex
|
||||||
|
].productsId.includes(product.id)
|
||||||
|
"
|
||||||
|
@click="
|
||||||
|
toggleCheckProductInStep(product.id, stepIndex)
|
||||||
|
"
|
||||||
|
size="xs"
|
||||||
|
/>
|
||||||
|
{{ product.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
v-else
|
||||||
|
class="app-text-muted-2 surface-1 rounded q-pa-xs"
|
||||||
|
>
|
||||||
|
{{ $t('productService.product.noProduct') }}
|
||||||
|
</span>
|
||||||
|
</section>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<span
|
||||||
|
v-if="
|
||||||
|
attributes.workflowId &&
|
||||||
|
attributes.stepProperties?.every(
|
||||||
|
(s) => s.attributes.length === 0,
|
||||||
|
)
|
||||||
|
"
|
||||||
|
class="app-text-muted"
|
||||||
|
>
|
||||||
|
{{ $t('productService.service.noPropertiesYet') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</q-expansion-item>
|
||||||
<!-- <div class="q-py-md q-px-md full-width">
|
<!-- <div class="q-py-md q-px-md full-width">
|
||||||
<div
|
<div
|
||||||
v-if="attributes.additional.length > 0"
|
v-if="attributes.additional.length > 0"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue