126 lines
2.5 KiB
Vue
126 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<h2>Warranty Claims</h2>
|
|
<div id="filter-container" class="filter-container">
|
|
<button @click="addNewWarranty" id="add-warranty-button" class="interaction-button">
|
|
Add New Warranty Claim
|
|
</button>
|
|
</div>
|
|
<DataTable :data="tableData" :columns="columns" :filters="filters" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref } from "vue";
|
|
import DataTable from "../DataTable.vue";
|
|
import Api from "../../api";
|
|
import { FilterMatchMode } from "@primevue/core";
|
|
|
|
const tableData = ref([]);
|
|
|
|
const addNewWarranty = () => {
|
|
// TODO: Open modal or navigate to create warranty form
|
|
console.log("Add new warranty claim clicked");
|
|
// In the future, this could open a modal or navigate to a form
|
|
// For now, just log the action
|
|
};
|
|
|
|
const filters = {
|
|
customer: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
|
warrantyId: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
|
address: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
|
assignedTechnician: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
|
};
|
|
|
|
const columns = [
|
|
{
|
|
label: "Warranty ID",
|
|
fieldName: "warrantyId",
|
|
type: "text",
|
|
sortable: true,
|
|
filterable: true,
|
|
},
|
|
{
|
|
label: "Customer",
|
|
fieldName: "customer",
|
|
type: "text",
|
|
sortable: true,
|
|
filterable: true,
|
|
},
|
|
{
|
|
label: "Address",
|
|
fieldName: "address",
|
|
type: "text",
|
|
sortable: true,
|
|
filterable: true,
|
|
},
|
|
{
|
|
label: "Issue Description",
|
|
fieldName: "issueDescription",
|
|
type: "text",
|
|
sortable: true,
|
|
},
|
|
{
|
|
label: "Priority",
|
|
fieldName: "priority",
|
|
type: "status",
|
|
sortable: true,
|
|
},
|
|
{
|
|
label: "Status",
|
|
fieldName: "status",
|
|
type: "status",
|
|
sortable: true,
|
|
},
|
|
{
|
|
label: "Assigned Technician",
|
|
fieldName: "assignedTechnician",
|
|
type: "text",
|
|
sortable: true,
|
|
filterable: true,
|
|
},
|
|
{
|
|
label: "Date Reported",
|
|
fieldName: "dateReported",
|
|
type: "text",
|
|
sortable: true,
|
|
},
|
|
{
|
|
label: "Est. Completion",
|
|
fieldName: "estimatedCompletionDate",
|
|
type: "text",
|
|
sortable: true,
|
|
},
|
|
];
|
|
|
|
onMounted(async () => {
|
|
if (tableData.value.length > 0) {
|
|
return;
|
|
}
|
|
let data = await Api.getWarrantyData();
|
|
tableData.value = data;
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.filter-container {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.interaction-button {
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.interaction-button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
</style>
|