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

<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;
  prefix?: 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({
      customerDuty: attributesForm.value.customerDuty ?? false,
      customerDutyCost: attributesForm.value.customerDutyCost ?? 30,
      companyDuty: attributesForm.value.companyDuty ?? false,
      companyDutyCost: attributesForm.value.companyDutyCost ?? 30,
      responsibleUserLocal: attributesForm.value.responsibleUserLocal ?? true,
      responsibleUserId: attributesForm.value.responsibleUserId ?? '',
      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('duty.text') }}
      </span>
      <nav class="q-ml-auto row" v-if="!readonly">
        <UndoButton
          v-if="state.isEdit"
          :id="`btn-duty-${props.prefix || 'nome'}-info-basic-undo`"
          icon-only
          type="button"
          @click.stop="triggerUndo"
        />
        <SaveButton
          v-if="state.isEdit"
          :id="`btn-duty-${props.prefix || 'nome'}-info-basic-save`"
          icon-only
          type="submit"
          @click.stop="triggerSubmit"
        />
        <EditButton
          v-if="!state.isEdit"
          :id="`btn-duty-${props.prefix || 'nome'}-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>