feat: add action dialog

src/i18n/eng.ts

@@ -915,6 +915,10 @@ export default {
 
     salesRepresentative: 'Sales Representative',
     ref: 'Reference',
+    action: {
+      title: 'Action',
+      configure: 'Configure',
+    },
     status: {
       work: {
         Pending: 'Await for order',

src/i18n/tha.ts

@@ -904,6 +904,10 @@ export default {
     noWorkflowTemplate: 'คุณไม่ได้เลือกแม่แบบขั้นตอนการทำงาน',
     salesRepresentative: 'พนักงานขาย',
     ref: 'อ้างอิง',
+    action: {
+      title: 'จัดการ',
+      configure: 'กำหนดค่า',
+    },
     status: {
       work: {
         Pending: 'รอสั่งงาน',

src/pages/08_request-list/FormResponsibleUser.vue

@@ -12,7 +12,6 @@ const responsibleUserId = defineModel<string>('responsibleUserId', {
 defineProps<{
   readonly?: boolean;
   districtId?: string;
-  cost?: boolean;
 }>();
 
 watch(responsibleUserLocal, (lhs, rhs) => {

src/pages/08_request-list/RequestAction.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { RequestWork } from 'src/stores/request-list';
+import { DialogContainer, DialogHeader } from 'src/components/dialog';
+import {
+  BackButton,
+  CancelButton,
+  MainButton,
+  SaveButton,
+} from 'src/components/button';
+import TableProductAndService from 'src/components/shared/table/TableProductAndService.vue';
+import { Product } from 'src/stores/product-service/types';
+import FormResponsibleUser from './FormResponsibleUser.vue';
+import FormGroupHead from './FormGroupHead.vue';
+
+defineProps<{
+  work: RequestWork[];
+  responsibleDistrictId: string;
+}>();
+
+defineEmits<{
+  (e: 'submit'): void;
+}>();
+
+enum Step {
+  Product = 1,
+  Configure = 2,
+}
+
+const open = defineModel<boolean>('selected', { default: false });
+const step = ref<Step>(Step.Product);
+const selected = ref<{ _work: RequestWork }[]>([]);
+const form = reactive({
+  responsibleUserLocal: false,
+  responsibleUserId: '',
+});
+
+function reset() {
+  step.value = Step.Product;
+  selected.value = [];
+}
+
+function prev() {
+  step.value = Step.Product;
+}
+</script>
+<template>
+  <DialogContainer v-model="open" :onOpen="reset">
+    <template #header>
+      <DialogHeader :title="$t('requestList.action.title')" />
+    </template>
+
+    <div class="surface-0 q-pa-md">
+      <div class="stepper-wrapper">
+        <div class="stepper">
+          <template
+            v-for="(label, i) in [
+              $t('menu.product'),
+              $t('requestList.action.configure'),
+            ]"
+          >
+            <span class="step" :class="{ ['step__active']: step > i }">
+              <span class="step-outer"><span class="step-inner" /></span>
+              <span class="step-label">{{ label }}</span>
+            </span>
+            <span
+              class="step-connector"
+              :class="{ ['step-connector__active']: step > i + 1 }"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+    <div class="surface-1 q-pa-md col">
+      <TableProductAndService
+        v-if="step === Step.Product"
+        type="product"
+        v-model:selected="selected"
+        :disabled-product-fields="[
+          '#priceInformation',
+          'productProcessingTime',
+        ]"
+        :rows="
+          (work?.map((v) => ({
+            ...v.productService.product,
+            type: 'product',
+            _work: v,
+          })) || []) as unknown as Product[]
+        "
+      />
+
+      <template v-if="step === Step.Configure">
+        <q-expansion-item
+          dense
+          class="overflow-hidden bordered full-width"
+          switch-toggle-side
+          style="border-radius: var(--radius-2)"
+          expand-icon="mdi-chevron-down-circle"
+          header-class="surface-1 q-py-sm text-medium text-body1"
+          default-opened
+        >
+          <template #header>
+            <span>
+              {{ $t('requestList.employeeMessenger') }}
+            </span>
+          </template>
+          <FormGroupHead>
+            {{
+              $t('general.select', { msg: $t('requestList.employeeMessenger') })
+            }}
+          </FormGroupHead>
+
+          <FormResponsibleUser
+            :district-id="responsibleDistrictId"
+            v-model:responsible-user-id="form.responsibleUserId"
+            v-model:responsible-user-local="form.responsibleUserLocal"
+          />
+        </q-expansion-item>
+      </template>
+    </div>
+
+    <template #footer>
+      <div class="q-gutter-x-xs q-ml-auto">
+        <CancelButton
+          v-if="step === Step.Product"
+          id="btn-cancel"
+          outlined
+          @click="
+            reset();
+            open = false;
+          "
+        />
+        <BackButton
+          v-if="step === Step.Configure"
+          id="btn-back"
+          outlined
+          @click="prev"
+        />
+        <MainButton
+          icon="mdi-check"
+          color="207 96% 32%"
+          solid
+          id="btn-next"
+          v-if="step === Step.Product"
+          @click="step = Step.Configure"
+        >
+          {{ $t('general.next') }}
+        </MainButton>
+        <SaveButton
+          v-if="step === Step.Configure"
+          id="btn-save"
+          solid
+          @click="$emit('submit')"
+        />
+      </div>
+    </template>
+  </DialogContainer>
+</template>
+
+<style lang="scss" scoped>
+.stepper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+  margin-inline: 25%;
+
+  & > .step {
+    --__color: var(--gray-5);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    gap: 0.25rem;
+
+    &.step__active {
+      --__color: var(--brand-1);
+    }
+
+    & > .step-label {
+      position: absolute;
+      font-weight: 600;
+      color: var(--__color);
+      white-space: nowrap;
+      top: 2rem;
+    }
+
+    & > .step-outer {
+      display: inline-flex;
+      border: 2px solid var(--__color);
+      border-radius: 50%;
+      width: 1.5rem;
+      height: 1.5rem;
+      align-items: center;
+      justify-content: center;
+
+      & > .step-inner {
+        display: inline-block;
+        border-radius: 50%;
+        background-color: var(--__color);
+        width: 0.7rem;
+        height: 0.7rem;
+      }
+    }
+  }
+
+  & > .step-connector {
+    display: block;
+    border-bottom: 2px solid var(--gray-5);
+    flex-grow: 1;
+
+    &.step-connector__active {
+      border-color: var(--brand-1);
+    }
+
+    &:last-child {
+      display: none;
+    }
+  }
+}
+</style>