jws-frontend/src/components/TableComponents.vue

<script setup lang="ts">
import { QTableProps } from 'quasar';
import KebabAction from 'components/shared/KebabAction.vue';
import DeleteButton from './button/DeleteButton.vue';

const props = withDefaults(
  defineProps<{
    rows: QTableProps['rows'];
    columns: QTableProps['columns'];
    flat?: boolean;
    bordered?: boolean;
    grid?: boolean;
    hideHeader?: boolean;
    buttomDownload?: boolean;
    buttonDelete?: boolean;
    hidePagination?: boolean;

    imgColumn?: string;
    customColumn?: string[];
  }>(),
  {
    row: () => [],
    column: () => [],
    flat: false,
    bordered: false,
    grid: false,
    hideHeader: false,
    buttomDownload: false,
    imgColumn: '',
    customColumn: () => [],
  },
);

defineEmits<{
  (e: 'view', index: number): void;
  (e: 'edit', index: number): void;
  (e: 'delete', index: number): void;
  (e: 'toggleStatus', row: typeof props.rows): void;
  (e: 'download', index: number): void;
}>();
</script>

<template>
  <q-table
    v-bind="props"
    class="full-height"
    :no-data-label="$t('general.noDataTable')"
    :hide-pagination
  >
    <template v-slot:header="props">
      <q-tr
        style="background-color: hsla(var(--info-bg) / 0.07)"
        :props="props"
      >
        <q-th v-for="col in props.cols" :key="col.name" :props="props">
          <span v-if="col.label === 'nameEmployee'">
            {{ $t('fullname') }}
          </span>

          <span v-if="col.label !== ''">
            {{ $t(col.label) }}
          </span>
        </q-th>
      </q-tr>
    </template>

    <template v-slot:body-cell-order="props">
      <q-td class="text-center">
        {{ props.rowIndex + 1 }}
      </q-td>
    </template>

    <template v-slot:[`body-cell-${imgColumn}`]="props">
      <q-td>
        <slot name="img-column" :props="props"></slot>
        {{ props.row[imgColumn] }}
      </q-td>
    </template>

    <template
      v-for="col in customColumn"
      :key="col"
      v-slot:[`body-cell-${col}`]="props"
    >
      <slot :name="`body-cell-${col}`" :props="props"></slot>
    </template>

    <template v-slot:body-cell-action="props">
      <q-td class="text-center row items-center">
        <slot name="button" :props="props"></slot>
        <DeleteButton iconOnly v-if="buttonDelete" />

        <q-btn
          v-if="!buttonDelete"
          icon="mdi-eye-outline"
          size="sm"
          dense
          round
          flat
          @click.stop="$emit('view', props.rowIndex)"
        />

        <q-btn
          v-if="buttomDownload && props.row.id !== undefined"
          icon="mdi-download-outline"
          size="sm"
          dense
          round
          flat
          @click.stop="$emit('download', props.rowIndex)"
        />

        <KebabAction
          v-if="!buttonDelete"
          hide-toggle
          :id-name="props.row.code"
          :status="props.row.status"
          @view="$emit('view', props.rowIndex)"
          @edit="$emit('edit', props.rowIndex)"
          @delete="$emit('delete', props.rowIndex)"
          @change-status="$emit('toggleStatus', props.row)"
        />
      </q-td>

      <slot name="dialog" :index="props.rowIndex" :row="props.row"></slot>
    </template>
  </q-table>
</template>

<style lang="scss" scoped>
:deep(i.q-icon.mdi.mdi-alert.q-table__bottom-nodata-icon) {
  color: #ffc224 !important;
}
</style>