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

create form and modal components, update datatable persistant filtering

Browse source
This commit is contained in:
Casey 2025-10-30 03:21:41 -05:00
parent b70e08026d
commit 8d9bb81fe2
23 changed files with 3502 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,106 +0,0 @@
<template lang="html">
<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 ${col.label}...`"
/>
</template>
<template v-if="col.type === 'status'" #body="slotProps">
<Tag
:value="slotProps.data[col.fieldName]"
:severity="getBadgeColor(slotProps.data[col.fieldName])"
/>
</template>
<template v-if="col.type === 'button'" #body="slotProps">
<Button
:label="slotProps.data[col.fieldName]"
size="small"
severity="info"
@click="$emit('rowClick', slotProps)"
/>
</template>
</Column>
</DataTable>
</template>
<script setup>
import { defineProps } from "vue";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import Tag from "primevue/tag";
import Button from "primevue/button";
import InputText from "primevue/inputtext";
import { ref } from "vue";
import { FilterMatchMode } from "@primevue/core";
const props = defineProps({
columns: {
type: Array,
required: true,
},
data: {
type: Array,
required: true,
},
filters: {
type: Object,
default: () => ({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
}),
},
});
const emit = defineEmits(["rowClick"]);
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":
return "warn";
case "not started":
return "danger"; // red
default:
return "info"; // blue fallback
}
};
console.log("DEBUG: - DataTable props.columns", props.columns);
console.log("DEBUG: - DataTable props.data", props.data);
// const columnsList = props.columns.map((col) => col.label);
// const dataList = props.data.map((row) => props.columns.map((col) => row[col.fieldName] || ""));
// Pass the actual DOM element
// new frappe.DataTable(dataTableContainer.value, {
// columns: columnsList,
// data: dataList,
// });
</script>
<style lang=""></style>