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

11
frontend/src/components/pages/Clients.vue
View file

@ -6,12 +6,12 @@
Add
</button>
</div>
<DataTable :data="tableData" :columns="columns" :filters="filters" />
<DataTable :data="tableData" :columns="columns" :filters="filters" tableName="clients" />
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import DataTable from "../DataTable.vue";
import DataTable from "../common/DataTable.vue";
import Api from "../../api";
import { FilterMatchMode } from "@primevue/core";
@ -48,13 +48,6 @@ onMounted(async () => {
return;
}
let data = await Api.getClientDetails();
// data = data.map((item) => [
// item.customer["customer_name"] || "",
// item.address["appointment_scheduled"] || "",
// item.address["estimate_sent"] || "",
// item.address["payment_received"] || "",
// item.address["job_status"] || "",
// ]);
tableData.value = data;
});
</script>

8
frontend/src/components/pages/Jobs.vue
View file

@ -1,19 +1,19 @@
<template>
<div>
<h2>Jobs</h2>
<DataTable :data="tableData" :columns="columns" />
<DataTable :data="tableData" :columns="columns" tableName="jobs" />
</div>
</template>
<script setup>
import DataTable from "../DataTable.vue";
import DataTable from "../common/DataTable.vue";
import { ref, onMounted } from "vue";
import Api from "../../api";
const tableData = ref([]);
const columns = [
{ label: "Job ID", fieldName: "jobId", type: "text", sortable: true },
{ label: "Job ID", fieldName: "jobId", type: "text", sortable: true, filterable: true },
{ label: "Address", fieldName: "address", type: "text", sortable: true },
{ label: "Customer", fieldName: "customer", type: "text", sortable: true },
{ label: "Customer", fieldName: "customer", type: "text", sortable: true, filterable: true },
{ label: "Overall Status", fieldName: "overAllStatus", type: "status", sortable: true },
{ label: "Progress", fieldName: "stepProgress", type: "text", sortable: true },
];

4
frontend/src/components/pages/Routes.vue
View file

@ -7,7 +7,7 @@
<!-- Routes Data Table -->
<div class="routes-table-container">
<DataTable :data="tableData" :columns="columns" @row-click="viewRouteDetails" />
<DataTable :data="tableData" :columns="columns" tableName="routes" @row-click="viewRouteDetails" />
</div>
<!-- Route Details Modal -->
@ -228,7 +228,7 @@
<script setup>
import { ref, onMounted } from "vue";
import DataTable from "../DataTable.vue";
import DataTable from "../common/DataTable.vue";
import Api from "../../api";
// Reactive data

3
frontend/src/components/pages/TimeSheets.vue
View file

@ -127,6 +127,7 @@
:data="filteredTableData"
:columns="columns"
:filters="filters"
tableName="timesheets"
@row-click="viewTimesheetDetails"
/>
</div>
@ -368,7 +369,7 @@
<script setup>
import { ref, onMounted, computed } from "vue";
import DataTable from "../DataTable.vue";
import DataTable from "../common/DataTable.vue";
import Api from "../../api";
import { FilterMatchMode } from "@primevue/core";

4
frontend/src/components/pages/Warranties.vue
View file

@ -6,13 +6,13 @@
Add New Warranty Claim
</button>
</div>
<DataTable :data="tableData" :columns="columns" :filters="filters" />
<DataTable :data="tableData" :columns="columns" :filters="filters" tableName="warranties" />
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import DataTable from "../DataTable.vue";
import DataTable from "../common/DataTable.vue";
import Api from "../../api";
import { FilterMatchMode } from "@primevue/core";