refactor: add new components
This commit is contained in:
Thanaphon Frappet
parent
d012bb4d70
commit
18d0aca1de
2 changed files with 271 additions and 0 deletions
51
src/components/shared/ToggleView.vue
Normal file
51
src/components/shared/ToggleView.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<script setup lang="ts">
|
||||
const model = defineModel<boolean>('model');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-btn-toggle
|
||||
id="btn-mode"
|
||||
v-model="model"
|
||||
dense
|
||||
class="no-shadow bordered rounded surface-1 q-ml-sm"
|
||||
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
|
||||
size="xs"
|
||||
:options="[
|
||||
{ value: true, slot: 'folder' },
|
||||
{ value: false, slot: 'list' },
|
||||
]"
|
||||
>
|
||||
<template v-slot:folder>
|
||||
<q-icon
|
||||
name="mdi-view-grid-outline"
|
||||
size="16px"
|
||||
class="q-px-sm q-py-xs rounded"
|
||||
:style="{
|
||||
color: $q.dark.isActive
|
||||
? model
|
||||
? '#C9D3DB '
|
||||
: '#787B7C'
|
||||
: model
|
||||
? '#787B7C'
|
||||
: '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:list>
|
||||
<q-icon
|
||||
name="mdi-format-list-bulleted"
|
||||
class="q-px-sm q-py-xs rounded"
|
||||
size="16px"
|
||||
:style="{
|
||||
color: $q.dark.isActive
|
||||
? model === false
|
||||
? '#C9D3DB'
|
||||
: '#787B7C'
|
||||
: model === false
|
||||
? '#787B7C'
|
||||
: '#C9D3DB',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</template>
|
||||
220
src/components/shared/table/TableWorker.vue
Normal file
220
src/components/shared/table/TableWorker.vue
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { Lang } from 'src/utils/ui';
|
||||
|
||||
import { QTableSlots, QTableColumn } from 'quasar';
|
||||
import { Employee } from 'src/stores/employee/types';
|
||||
|
||||
import { calculateAge, dateFormatJS } from 'src/utils/datetime';
|
||||
import useOptionStore from 'stores/options';
|
||||
|
||||
const selected = defineModel<Employee[]>('selected');
|
||||
|
||||
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
|
||||
const { locale } = useI18n();
|
||||
const optionStore = useOptionStore();
|
||||
|
||||
defineEmits<{
|
||||
(e: 'create'): void;
|
||||
}>();
|
||||
|
||||
type ExclusiveProps = {
|
||||
grid?: boolean;
|
||||
disabledWorkerId?: string[];
|
||||
rows: Employee[];
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: '#check',
|
||||
align: 'left',
|
||||
label: '',
|
||||
field: (_: any) => '#check',
|
||||
},
|
||||
{
|
||||
name: 'order',
|
||||
align: 'center',
|
||||
label: 'general.order',
|
||||
field: (e: Employee & { _index: number }) => e._index + 1,
|
||||
},
|
||||
{
|
||||
name: 'foreignRefNo',
|
||||
align: 'center',
|
||||
label: 'quotation.foreignRefNo',
|
||||
field: (v: Employee) =>
|
||||
v.employeePassport !== undefined
|
||||
? v.employeePassport[0]?.number || '-'
|
||||
: '-',
|
||||
},
|
||||
{
|
||||
name: 'employeeName',
|
||||
align: 'left',
|
||||
label: 'quotation.employeeName',
|
||||
field: (v: Employee) =>
|
||||
locale.value === Lang.English
|
||||
? `${v.firstNameEN} ${v.lastNameEN}`
|
||||
: `${v.firstName} ${v.lastName}`,
|
||||
},
|
||||
{
|
||||
name: 'birthDate',
|
||||
align: 'left',
|
||||
label: 'general.birthDate',
|
||||
field: (v: Employee) => dateFormatJS({ date: v.dateOfBirth }),
|
||||
},
|
||||
{
|
||||
name: 'age',
|
||||
align: 'left',
|
||||
label: 'general.age',
|
||||
field: (v: Employee) => calculateAge(v.dateOfBirth),
|
||||
},
|
||||
{
|
||||
name: 'nationality',
|
||||
align: 'left',
|
||||
label: 'general.nationality',
|
||||
field: (v: Employee) => optionStore.mapOption(v.nationality),
|
||||
},
|
||||
{
|
||||
name: 'documentExpireDate',
|
||||
align: 'left',
|
||||
label: 'quotation.documentExpireDate',
|
||||
field: (v: Employee) =>
|
||||
v.employeePassport !== undefined &&
|
||||
v.employeePassport[0]?.expireDate !== undefined
|
||||
? dateFormatJS({ date: v.employeePassport[0]?.expireDate })
|
||||
: '-',
|
||||
},
|
||||
] satisfies QTableColumn[];
|
||||
|
||||
const props = defineProps<ExclusiveProps>();
|
||||
|
||||
function getEmployeeImageUrl(item: Employee) {
|
||||
if (item.selectedImage) {
|
||||
return `${API_BASE_URL}/employee/${item.id}/image/${item.selectedImage}`;
|
||||
}
|
||||
// NOTE: static image
|
||||
return `/images/employee-avatar-${item.gender}.png`;
|
||||
}
|
||||
|
||||
function handleUpdate() {
|
||||
if (selected.value?.length === 0) {
|
||||
selected.value = props.rows?.filter(
|
||||
(v) => !props.disabledWorkerId?.includes(v.id),
|
||||
);
|
||||
} else {
|
||||
selected.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
function selectedIndex(item: Employee) {
|
||||
return selected.value?.findIndex((v) => v.id === item.id);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<q-table
|
||||
v-model:selected="selected"
|
||||
:rows-per-page-options="[0]"
|
||||
:rows="
|
||||
rows.map((data, i) => ({
|
||||
...data,
|
||||
_index: i,
|
||||
}))
|
||||
"
|
||||
:grid
|
||||
:columns
|
||||
hide-bottom
|
||||
bordered
|
||||
flat
|
||||
hide-pagination
|
||||
selection="multiple"
|
||||
card-container-class="q-col-gutter-sm"
|
||||
class="full-width"
|
||||
row-key="id"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr
|
||||
style="background-color: hsla(var(--info-bg) / 0.07)"
|
||||
:props="props"
|
||||
>
|
||||
<q-th v-for="col in columns" :key="col.name" :props="props">
|
||||
<template v-if="!col.name.startsWith('#')">
|
||||
{{ $t(col.label) }}
|
||||
</template>
|
||||
<template v-if="col.name === '#check'">
|
||||
<q-checkbox
|
||||
v-model="props.selected"
|
||||
@update:model-value="(v) => handleUpdate()"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-slot:body="props: {
|
||||
row: Employee & { _index: number };
|
||||
} & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
|
||||
>
|
||||
<q-tr
|
||||
:class="{
|
||||
dark: $q.dark.isActive,
|
||||
'selectable-item__disabled': disabledWorkerId?.some(
|
||||
(id) => id === props.row.id,
|
||||
),
|
||||
}"
|
||||
class="text-center"
|
||||
>
|
||||
<q-td v-for="col in columns" :align="col.align" :key="col.name">
|
||||
<!-- NOTE: custom column will starts with # -->
|
||||
<template v-if="!col.name.startsWith('#')">
|
||||
<q-avatar
|
||||
v-if="col.name === 'employeeName'"
|
||||
class="q-mr-sm"
|
||||
size="md"
|
||||
>
|
||||
<q-img
|
||||
:src="getEmployeeImageUrl(props.row)"
|
||||
:ratio="1"
|
||||
class="text-center"
|
||||
/>
|
||||
</q-avatar>
|
||||
<span>
|
||||
{{
|
||||
typeof col.field === 'string'
|
||||
? props.row[col.field as keyof Employee]
|
||||
: col.field(props.row)
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
<template
|
||||
v-if="
|
||||
col.name === '#check' &&
|
||||
!disabledWorkerId?.some((id) => id === props.row.id)
|
||||
"
|
||||
>
|
||||
<q-checkbox v-model="props.selected" size="sm" />
|
||||
</template>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:item="props: { row: Employee; rowIndex: number }">
|
||||
<slot
|
||||
name="grid"
|
||||
:index="props.rowIndex"
|
||||
:item="{ ...props.row, _selectedIndex: selectedIndex(props.row) }"
|
||||
/>
|
||||
</template>
|
||||
</q-table>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.selectable-item__disabled {
|
||||
filter: grayscale(1);
|
||||
opacity: 0.5;
|
||||
|
||||
& :deep(*) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue