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>

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

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
+
 import FormGroupHead from './FormGroupHead.vue';
-import FormDuty from './FormDuty.vue';
 import FormIssue from './FormIssue.vue';
-import FormResponsibleUser from './FormResponsibleUser.vue';
 
 import { UndoButton, SaveButton, EditButton } from 'src/components/button';
 import { AttributesForm, Step } from 'src/stores/request-list/types';
@@ -12,7 +11,6 @@ import { useRequestList } from 'src/stores/request-list';
 const props = defineProps<{
   readonly?: boolean;
   step: Step;
-  responsibleAreaDistrictId?: string;
 }>();
 
 const requestListStore = useRequestList();
@@ -45,7 +43,6 @@ const attributesForm = defineModel<AttributesForm>('attributesForm', {
   },
 });
 
-const isExpand = ref(false);
 const formData = ref<AttributesForm>(defaultForm);
 
 function triggerUndo() {
@@ -78,7 +75,6 @@ function assignToForm() {
 <template>
   <q-expansion-item
     dense
-    v-model="isExpand"
     class="overflow-hidden bordered full-width"
     switch-toggle-side
     style="border-radius: var(--radius-2)"
@@ -115,64 +111,13 @@ function assignToForm() {
       </nav>
     </template>
 
-    <main class="row" v-if="isExpand">
+    <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('quotation.templateForm') }}
         </FormGroupHead>
         <FormIssue :readonly="!state.isEdit" />
       </section>
-      <section class="col-12">
-        <FormGroupHead>
-          {{
-            $t('general.select', { msg: $t('requestList.employeeMessenger') })
-          }}
-        </FormGroupHead>
-        <FormResponsibleUser
-          :readonly="!state.isEdit"
-          class="surface-1"
-          v-model:responsible-user-local="formData.responsibleUserLocal"
-          v-model:responsible-user-id="formData.responsibleUserId"
-          :district-id="responsibleAreaDistrictId"
-        />
-      </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>

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

@@ -42,6 +42,7 @@ watch(responsibleUserLocal, (lhs, rhs) => {
 
     <div class="col-12 row">
       <SelectUser
+        :required="false"
         :key="responsibleUserLocal?.toString()"
         class="col-md-5 col-12"
         v-model:value="responsibleUserId"

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

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+
+import FormGroupHead from './FormGroupHead.vue';
+import FormResponsibleUser from './FormResponsibleUser.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;
+  responsibleAreaDistrictId?: string;
+}>();
+
+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('requestList.employeeMessenger') }}
+      </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('general.select', { msg: $t('requestList.employeeMessenger') })
+          }}
+        </FormGroupHead>
+        <FormResponsibleUser
+          :readonly="!state.isEdit"
+          class="surface-1"
+          v-model:responsible-user-local="formData.responsibleUserLocal"
+          v-model:responsible-user-id="formData.responsibleUserId"
+          :district-id="responsibleAreaDistrictId"
+        />
+      </section>
+    </main>
+  </q-expansion-item>
+</template>
+<style></style>

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

@@ -131,7 +131,10 @@ defineEmits<{
         <span
           v-for="(prop, i) in propertiesToShow.filter(
             (v) =>
-              v.fieldName !== 'documentCheck' && v.fieldName !== 'designForm',
+              v.fieldName !== 'documentCheck' &&
+              v.fieldName !== 'designForm' &&
+              v.fieldName !== 'duty' &&
+              v.fieldName !== 'messenger',
           )"
           :key="i"
           class="row items-center q-pb-sm"

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

@@ -11,6 +11,8 @@ import PropertiesExpansion from './PropertiesExpansion.vue';
 import FormGroupHead from './FormGroupHead.vue';
 import AvatarGroup from 'src/components/shared/AvatarGroup.vue';
 import { StateButton } from 'components/button';
+import DutyExpansion from './DutyExpansion.vue';
+import MessengerExpansion from './MessengerExpansion.vue';
 
 // NOTE: Store
 import { baseUrl } from 'src/stores/utils';
@@ -633,7 +635,7 @@ function goToQuotation(
                   v.productService.work?.attributes?.workflowStep[
                     pageState.currentStep - 1
                   ]?.attributes?.properties;
-
+                console.log(v);
                 return Object.assign(v, {
                   _documentExpansion: _props.some(
                     (v: PropVariant) => v.fieldName === 'documentCheck',
@@ -641,6 +643,12 @@ function goToQuotation(
                   _formExpansion: _props.some(
                     (v: PropVariant) => v.fieldName === 'designForm',
                   ),
+                  _dutyExpansion: _props.some(
+                    (v: PropVariant) => v.fieldName === 'duty',
+                  ),
+                  _messengerExpansion: _props.some(
+                    (v: PropVariant) => v.fieldName === 'messenger',
+                  ),
                 });
               })
               .sort(
@@ -692,10 +700,10 @@ function goToQuotation(
                   class="column surface-1 q-px-sm bordered-t q-pb-sm q-gutter-y-sm"
                 >
                   <DocumentExpansion
+                    v-if="value._documentExpansion"
                     :readonly="
                       data.requestDataStatus === RequestDataStatus.Canceled
                     "
-                    v-if="value._documentExpansion"
                     ref="refDocumentExpansion"
                     :attributes="value.attributes"
                     @change-status="
@@ -742,11 +750,25 @@ function goToQuotation(
                     }"
                     :listDocument="product?.document"
                   />
-                  <FormExpansion
+                  <DutyExpansion
+                    v-if="value._dutyExpansion"
+                    :readonly="
+                      data.requestDataStatus === RequestDataStatus.Canceled
+                    "
+                    :step="{
+                      step: pageState.currentStep,
+                      requestWorkId: value.id || '',
+                    }"
+                    :id="value.id"
+                    :attributes-form="
+                      value.stepStatus?.[pageState.currentStep - 1]
+                    "
+                  />
+                  <MessengerExpansion
+                    v-if="value._messengerExpansion"
                     :readonly="
                       data.requestDataStatus === RequestDataStatus.Canceled
                     "
-                    v-if="value._formExpansion"
                     :step="{
                       step: pageState.currentStep,
                       requestWorkId: value.id || '',
@@ -759,6 +781,20 @@ function goToQuotation(
                       data.quotation.customerBranch.districtId
                     "
                   />
+                  <FormExpansion
+                    v-if="value._formExpansion"
+                    :readonly="
+                      data.requestDataStatus === RequestDataStatus.Canceled
+                    "
+                    :step="{
+                      step: pageState.currentStep,
+                      requestWorkId: value.id || '',
+                    }"
+                    :id="value.id"
+                    :attributes-form="
+                      value.stepStatus?.[pageState.currentStep - 1]
+                    "
+                  />
                   <PropertiesExpansion
                     :id="value.id"
                     :readonly="