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

<script setup lang="ts">
import { reactive, ref } from 'vue';

import FormGroupHead from './FormGroupHead.vue';
import FormIssue from './FormIssue.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;
  requestWorkId: string;
  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(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('general.designForm') }}
      </span>
      <nav class="q-ml-auto row" v-if="!readonly">
        <UndoButton
          v-if="state.isEdit"
          :id="`btn-form-${props.prefix || 'nome'}-info-basic-undo`"
          icon-only
          type="button"
          @click.stop="triggerUndo"
        />
        <SaveButton
          v-if="state.isEdit"
          :id="`btn-form-${props.prefix || 'nome'}-info-basic-save`"
          icon-only
          type="submit"
          @click.stop="triggerSubmit"
        />
        <EditButton
          v-if="!state.isEdit"
          :id="`btn-form-${props.prefix || 'nome'}-info-basic-edit`"
          icon-only
          @click.stop="triggerEdit"
          type="button"
        />
      </nav>
    </template>

    <main class="row">
      <section class="col-12">
        <FormGroupHead>
          {{ $t('quotation.templateForm') }}
        </FormGroupHead>
        <FormIssue :request-work-id="requestWorkId" :readonly="!state.isEdit" />
      </section>
    </main>
  </q-expansion-item>
</template>
<style></style>