You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
3.5 KiB
133 lines
3.5 KiB
<template>
|
|
<DataTable
|
|
:value="attendances"
|
|
:paginator="true"
|
|
:rows="10"
|
|
:rows-per-page-options="[5, 10, 20, 50]"
|
|
:total-records="totalRecords"
|
|
class="p-datatable-sm"
|
|
:loading="loading"
|
|
data-key="id"
|
|
current-page-report-template="Showing {first} to {last} of {totalRecords}"
|
|
responsive-layout="scroll"
|
|
@page="onPageChange"
|
|
>
|
|
<!-- Column for Name -->
|
|
<Column
|
|
field="title"
|
|
header="Name"
|
|
sortable
|
|
>
|
|
<template #body="slotProps">
|
|
<RouterLink
|
|
:to="{
|
|
name: 'AttendanceSheetList',
|
|
params: {
|
|
node: route.params.node,
|
|
id: slotProps.data.id,
|
|
},
|
|
query: {
|
|
cid: route.query.cid,
|
|
sid: route.query.sid,
|
|
gid: route.query.gid,
|
|
},
|
|
}"
|
|
class="text-blue-500 underline"
|
|
>
|
|
{{ slotProps.data.title }}
|
|
</RouterLink>
|
|
</template>
|
|
</Column>
|
|
|
|
<!-- Column for Description -->
|
|
<Column
|
|
field="description"
|
|
header="Description"
|
|
sortable
|
|
>
|
|
<template #body="slotProps">
|
|
<div v-html="slotProps.data.description"></div>
|
|
</template>
|
|
</Column>
|
|
|
|
<!-- Column for # attended -->
|
|
<Column
|
|
field="results.length"
|
|
header="# attended"
|
|
sortable
|
|
>
|
|
<template #body="slotProps">
|
|
<center>{{ slotProps.data.results ? slotProps.data.results.length : 0 }}</center>
|
|
</template>
|
|
</Column>
|
|
|
|
<!-- Column for Detail -->
|
|
<Column header="Detail">
|
|
<template #body="slotProps">
|
|
<div class="flex gap-2 justify-center">
|
|
<Button
|
|
icon="pi pi-pencil"
|
|
class="p-button-rounded p-button-sm p-button-info"
|
|
@click="onEdit(slotProps.data)"
|
|
tooltip="Edit"
|
|
/>
|
|
<Button
|
|
:icon="getVisibilityIcon(slotProps.data)"
|
|
class="p-button-rounded p-button-sm"
|
|
:class="getVisibilityClass(slotProps.data)"
|
|
@click="onView(slotProps.data)"
|
|
:tooltip="getVisibilityTooltip(slotProps.data)"
|
|
/>
|
|
<Button
|
|
icon="pi pi-trash"
|
|
class="p-button-rounded p-button-sm p-button-danger"
|
|
@click="onDelete(slotProps.data)"
|
|
tooltip="Delete"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</Column>
|
|
</DataTable>
|
|
</template>
|
|
<script setup>
|
|
import { useRoute } from "vue-router"
|
|
|
|
const route = useRoute()
|
|
|
|
const props = defineProps({
|
|
attendances: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
totalRecords: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(["edit", "view", "delete", "pageChange"])
|
|
|
|
const onEdit = (attendance) => emit("edit", attendance)
|
|
const onView = (attendance) => emit("view", attendance)
|
|
const onDelete = (attendance) => emit("delete", attendance)
|
|
const onPageChange = (event) => emit("pageChange", event)
|
|
|
|
const getVisibilityIcon = (attendance) => {
|
|
const visibility = attendance.resourceLinkListFromEntity?.[0]?.visibility || 0
|
|
return visibility === 2 ? "pi pi-eye" : "pi pi-eye-slash"
|
|
}
|
|
|
|
const getVisibilityClass = (attendance) => {
|
|
const visibility = attendance.resourceLinkListFromEntity?.[0]?.visibility || 0
|
|
return visibility === 2 ? "p-button-success" : "p-button-warning"
|
|
}
|
|
|
|
const getVisibilityTooltip = (attendance) => {
|
|
const visibility = attendance.resourceLinkListFromEntity?.[0]?.visibility || 0
|
|
return visibility === 2 ? "Visible" : "Hidden"
|
|
}
|
|
</script>
|
|
|