bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

build out mock views

Browse source
This commit is contained in:
Casey Wittrock 2025-10-24 03:40:53 -05:00
parent 6dac3bfb02
commit 403b29a8b8
12 changed files with 1066 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

88
frontend/src/components/DataTable.vue
View file

@ -1,41 +1,52 @@
<template lang="html">
<div id="paging-controls">
<p>Show rows:</p>
<button class="page-num-button">25</button>
<button class="page-num-button">50</button>
<button class="page-num-button">100</button>
<button class="page-turn-button">Prev</button>
<button class="page-turn-button">Next</button>
</div>
<div>
<DataTable :value="data">
<Column
v-for="col in columns"
:key="col.fieldName"
:field="col.fieldName"
:header="col.label"
>
<template #body="slotProps">
<template v-if="col.type === 'status'">
<Badge
:value="slotProps.data[col.fieldName]"
:severity="getBadgeColor(slotProps.data[col.fieldName])"
:size="large"
/>
</template>
<template v-else>
{{ slotProps.data[col.fieldName] }}
</template>
</template>
</Column>
</DataTable>
</div>
<DataTable
:value="data"
:rowsPerPageOptions="[5, 10, 20, 50]"
:paginator="true"
:rows="10"
sortMode="multiple"
removableSort
filterDisplay="row"
v-model:filters="filterRef"
scrollable
scrollHeight="70vh"
v-model:selection="selectedRows"
selectionMode="multiple"
metaKeySelection="true"
dataKey="id"
>
<Column
v-for="col in columns"
:key="col.fieldName"
:field="col.fieldName"
:header="col.label"
:sortable="col.sortable"
>
<template v-if="col.filterable === true" #filter="{ filterModel, filterCallback }">
<InputText
v-model="filterModel.value"
type="text"
@input="filterCallback()"
placeholder="Search by name"
/>
</template>
<template v-if="col.type === 'status'" #body="slotProps">
<Tag
:value="slotProps.data[col.fieldName]"
:severity="getBadgeColor(slotProps.data[col.fieldName])"
/>
</template>
</Column>
</DataTable>
</template>
<script setup>
import { defineProps } from "vue";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import Badge from "primevue/badge";
import Tag from "primevue/tag";
import InputText from "primevue/inputtext";
import { ref } from "vue";
import { FilterMatchMode } from "@primevue/core";
const props = defineProps({
columns: {
type: Array,
@ -45,15 +56,24 @@ const props = defineProps({
type: Array,
required: true,
},
filters: {
type: Object,
default: () => ({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
}),
},
});
const filterRef = ref(props.filters);
const selectedRows = ref();
const getBadgeColor = (status) => {
console.log("DEBUG: - getBadgeColor status", status);
switch (status?.toLowerCase()) {
case "completed":
return "success"; // green
case "in progress":
case "warn":
return "warning"; // yellow
return "warn";
case "not started":
return "danger"; // red
default: