jws-frontend/src/pages/12_debit-note/expansion/WorkerItemExpansion.vue

<script setup lang="ts">
import { AddButton } from 'components/button';
import ToggleButton from 'src/components/button/ToggleButton.vue';
import WorkerItem from 'src/components/05_quotation/WorkerItem.vue';

defineProps<{
  readonly?: boolean;
  hideBtnAddWorker?: boolean;
  employeeAmount?: number;
  rowWorker: {
    foreignRefNo: string;
    employeeName: string;
    birthDate: string;
    gender: string;
    age: string;
    nationality: string;
    documentExpireDate: string;
    imgUrl?: string;
    status: string;
  }[];
}>();

defineEmits<{
  (e: 'addWorker'): void;
  (e: 'edit'): void;
  (e: 'update:employeeAmount', number: number): void;
  (e: 'delete', index: number): void;
}>();

const toggleWorker = defineModel<boolean>('toggleWorker');
</script>

<template>
  <q-expansion-item
    for="item-up"
    id="item-up"
    dense
    class="overflow-hidden"
    switch-toggle-side
    default-opened
    style="border-radius: var(--radius-2)"
    expand-icon="mdi-chevron-down-circle"
    header-class="surface-1"
  >
    <template v-slot:header>
      <section class="row items-center full-width">
        <div class="row items-center q-pr-md q-py-sm">
          <span class="q-mr-md" style="font-size: 18px">
            {{ $t('quotation.employeeList') }}
          </span>
          <template v-if="!readonly">
            <!-- <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
            {{ toggleWorker ? $t('general.specify') : $t('general.noSpecify') }} -->
          </template>
        </div>
        <nav class="q-ml-auto">
          <AddButton
            v-if="!readonly"
            icon-only
            @click.stop="$emit('addWorker')"
          />
        </nav>
      </section>
    </template>

    <div class="surface-1 q-pa-md full-width">
      <WorkerItem
        @update:employee-amount="(v) => $emit('update:employeeAmount', v)"
        :employee-amount
        :readonly="readonly"
        :rows="rowWorker"
        @delete="(i) => $emit('delete', i)"
      />
    </div>
  </q-expansion-item>
</template>

<style scoped></style>