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

<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';
import { QForm } from 'quasar';

const props = defineProps<{
  readonly?: boolean;
  step: Step;
  responsibleAreaDistrictId?: string;
  defaultMessenger?: string;
}>();

const emit = defineEmits<{
  (e: 'updateAttributes', value: Step): void;
}>();

const requestListStore = useRequestList();

const state = reactive({
  isEdit: false,
});

const refForm = ref<InstanceType<typeof QForm>>();

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;
  refForm.value?.resetValidation();
}

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;
    emit('updateAttributes', res);
  }
}

function triggerEdit() {
  state.isEdit = true;
}

function assignToForm() {
  formData.value = JSON.parse(
    JSON.stringify({
      customerDuty: attributesForm.value.customerDuty ?? false,
      customerDutyCost: attributesForm.value.customerDutyCost ?? 30,
      companyDuty: attributesForm.value.companyDuty ?? false,
      companyDutyCost: attributesForm.value.companyDutyCost ?? 30,
      responsibleUserLocal: attributesForm.value.responsibleUserLocal
        ? attributesForm.value.responsibleUserLocal
        : props.responsibleAreaDistrictId
          ? false
          : true,
      responsibleUserId:
        attributesForm.value.responsibleUserId || props.defaultMessenger,
      individualDuty: attributesForm.value.individualDuty ?? false,
      individualDutyCost: attributesForm.value.individualDutyCost ?? 10,
    }),
  );
}
</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="(e) => refForm?.submit(e)"
        />
        <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">
        <q-form
          ref="refForm"
          greedy
          @submit.prevent
          @validation-success="triggerSubmit"
        >
          <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"
          />
        </q-form>
      </section>
    </main>
  </q-expansion-item>
</template>
<style></style>