refactor: add new components

src/components/TableComponents.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { QTableProps } from 'quasar';
+import KebabAction from 'components/shared/KebabAction.vue';
+
+const props = withDefaults(
+  defineProps<{
+    rows: QTableProps['rows'];
+    columns: QTableProps['columns'];
+    flat?: boolean;
+    bordered?: boolean;
+    grid?: boolean;
+    hideHeader?: boolean;
+    buttomDownload?: boolean;
+  }>(),
+  {
+    row: () => [],
+    column: () => [],
+    flat: false,
+    bordered: false,
+    grid: false,
+    hideHeader: false,
+    buttomDownload: false,
+  },
+);
+</script>
+
+<template>
+  <q-table v-bind="props" class="full-height">
+    <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-action="props">
+      <q-td class="text-center">
+        <q-btn
+          icon="mdi-eye-outline"
+          size="sm"
+          dense
+          round
+          flat
+          @click.stop="$emit('view', props.row.index)"
+        />
+
+        <q-btn
+          v-if="buttomDownload"
+          icon="mdi-download-outline"
+          size="sm"
+          dense
+          round
+          flat
+          @click.stop="$emit('download', props.row)"
+        />
+
+        <KebabAction
+          :id-name="props.row.code"
+          :status="props.row.status"
+          @view="$emit('view', props.row)"
+          @edit="$emit('edit', props.row)"
+          @delete="$emit('delete', props.row)"
+          @change-status="$emit('toggleStatus', props.row)"
+        />
+      </q-td>
+
+      <slot name="dialog" :index="props.rowIndex" :row="props.row"></slot>
+    </template>
+  </q-table>
+</template>
+
+<style lang="less" scoped></style>