From 20856b2d0ab53a6775f564b38d063fe092c5d811 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 5 Nov 2024 14:32:32 +0700
Subject: [PATCH] refactor: service, package => expansion workflow step

---
 .../WorkManagementComponent.vue               | 255 +++++++++---------
 1 file changed, 133 insertions(+), 122 deletions(-)

diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index 32c010a1..61f67b41 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -548,136 +548,147 @@ watch(
 
         <!-- properties -->
         <div class="bordered-t">
-          <div
-            class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
-            style="background-color: hsla(var(--info-bg) / 0.1)"
+          <q-expansion-item
+            default-opened
+            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>
-              {{ $t('flow.processStep') }}
-            </span>
-            <q-btn
-              v-if="!readonly"
-              id="btn-add-work-product"
-              class="text-capitalize rounded"
-              flat
-              dense
-              padding="4px 8px"
-              style="color: hsl(var(--info-bg))"
-              @click.stop="$emit('workProperties')"
-            >
-              <Icon
-                icon="basil:settings-adjust-solid"
-                width="20.08px"
-                style="color: hsl(var(--info-bg))"
-              />
-            </q-btn>
-          </div>
-
-          <div class="q-py-md q-px-md full-width column">
-            <span
-              v-if="
-                attributes.stepProperties?.length === 0 ||
-                !attributes.stepProperties
-              "
-              class="app-text-muted"
-            >
-              {{ $t('flow.noProcessStep') }}
-            </span>
-
-            <template
-              v-for="(step, stepIndex) in attributes.stepProperties"
-              :key="step.id"
-            >
+            <template #header>
+              <div
+                class="text-weight-medium row justify-between items-center full-width"
+              >
+                <span>
+                  {{ $t('flow.processStep') }}
+                </span>
+                <q-btn
+                  v-if="!readonly"
+                  id="btn-add-work-product"
+                  class="text-capitalize rounded"
+                  flat
+                  dense
+                  padding="4px 8px"
+                  style="color: hsl(var(--info-bg))"
+                  @click.stop="$emit('workProperties')"
+                >
+                  <Icon
+                    icon="basil:settings-adjust-solid"
+                    width="20.08px"
+                    style="color: hsl(var(--info-bg))"
+                  />
+                </q-btn>
+              </div>
+            </template>
+            <div class="q-py-md q-px-md full-width column">
               <span
                 v-if="
-                  attributes.stepProperties?.length > 0 &&
-                  step.attributes.length > 0
+                  attributes.stepProperties?.length === 0 ||
+                  !attributes.stepProperties
                 "
+                class="app-text-muted"
               >
-                <q-icon name="mdi-circle-medium" />
-                {{ $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>
+                {{ $t('flow.noProcessStep') }}
               </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>
+              <template
+                v-for="(step, stepIndex) in attributes.stepProperties"
+                :key="step.id"
+              >
+                <span
+                  v-if="
+                    attributes.stepProperties?.length > 0 &&
+                    step.attributes.length > 0
+                  "
+                >
+                  <q-icon name="mdi-circle-medium" />
+                  {{ $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
               v-if="attributes.additional.length > 0"