feat: add request list expansion (messenger, duty)

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

@@ -0,0 +1,155 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+
+import FormGroupHead from './FormGroupHead.vue';
+import FormDuty from './FormDuty.vue';
+
+import { UndoButton, SaveButton, EditButton } from 'src/components/button';
+import { AttributesForm, Step } from 'src/stores/request-list/types';
+import { useRequestList } from 'src/stores/request-list';
+
+const props = defineProps<{
+  readonly?: boolean;
+  step: Step;
+}>();
+
+const requestListStore = useRequestList();
+
+const state = reactive({
+  isEdit: false,
+});
+
+const defaultForm = {
+  customerDuty: false,
+  customerDutyCost: 30,
+  companyDuty: false,
+  companyDutyCost: 30,
+  responsibleUserLocal: true,
+  responsibleUserId: '',
+  individualDuty: false,
+  individualDutyCost: 10,
+};
+
+const attributesForm = defineModel<AttributesForm>('attributesForm', {
+  default: {
+    customerDuty: false,
+    customerDutyCost: 30,
+    companyDuty: false,
+    companyDutyCost: 30,
+    responsibleUserLocal: true,
+    responsibleUserId: '',
+    individualDuty: false,
+    individualDutyCost: 10,
+  },
+});
+
+const formData = ref<AttributesForm>(defaultForm);
+
+function triggerUndo() {
+  assignToForm();
+  state.isEdit = false;
+}
+
+async function triggerSubmit() {
+  const payload = {
+    ...props.step,
+    ...formData.value,
+    attributes: {},
+  };
+  const res = await requestListStore.editStatusRequestWork(payload);
+
+  if (res) {
+    attributesForm.value = JSON.parse(JSON.stringify(formData.value));
+    state.isEdit = false;
+  }
+}
+
+function triggerEdit() {
+  state.isEdit = true;
+}
+
+function assignToForm() {
+  formData.value = JSON.parse(JSON.stringify(attributesForm.value));
+}
+</script>
+<template>
+  <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"
+    @before-show="assignToForm"
+  >
+    <template #header>
+      <span>
+        {{ $t('duty.text') }}
+      </span>
+      <nav class="q-ml-auto row" v-if="!readonly">
+        <UndoButton
+          v-if="state.isEdit"
+          id="btn-info-basic-undo"
+          icon-only
+          type="button"
+          @click.stop="triggerUndo"
+        />
+        <SaveButton
+          v-if="state.isEdit"
+          id="btn-info-basic-save"
+          icon-only
+          type="submit"
+          @click.stop="triggerSubmit"
+        />
+        <EditButton
+          v-if="!state.isEdit"
+          id="btn-info-basic-edit"
+          icon-only
+          @click.stop="triggerEdit"
+          type="button"
+        />
+      </nav>
+    </template>
+
+    <main class="row">
+      <section class="col-12">
+        <FormGroupHead>
+          {{ $t('duty.text', { subject: $t('general.customer') }) }}
+        </FormGroupHead>
+        <FormDuty
+          class="surface-1"
+          :readonly="!state.isEdit"
+          v-model:duty="formData.customerDuty"
+          v-model:duty-cost="formData.customerDutyCost"
+          cost
+        />
+      </section>
+      <section class="col-12">
+        <FormGroupHead>
+          {{ $t('duty.text', { subject: $t('general.company') }) }}
+        </FormGroupHead>
+        <FormDuty
+          class="surface-1"
+          :readonly="!state.isEdit"
+          v-model:duty="formData.companyDuty"
+          v-model:duty-cost="formData.companyDutyCost"
+          cost
+        />
+      </section>
+      <section class="col-12">
+        <FormGroupHead>
+          {{ $t('duty.text', { subject: $t('general.individual') }) }}
+        </FormGroupHead>
+        <FormDuty
+          :options="[10]"
+          :readonly="!state.isEdit"
+          class="surface-1"
+          v-model:duty="formData.individualDuty"
+          v-model:duty-cost="formData.individualDutyCost"
+          cost
+        />
+      </section>
+    </main>
+  </q-expansion-item>
+</template>
+<style scoped></style>