add date picker
This commit is contained in:
parent
09a514ae86
commit
82f9b1aac2
8 changed files with 1044 additions and 55 deletions
204
frontend/src/components/pages/TestDateForm.vue
Normal file
204
frontend/src/components/pages/TestDateForm.vue
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
<template>
|
||||
<div class="test-date-form">
|
||||
<h2>Enhanced Date Picker Test</h2>
|
||||
<p>This page demonstrates the enhanced date picker functionality in the Form component.</p>
|
||||
|
||||
<Form
|
||||
:fields="dateFields"
|
||||
:form-data="formData"
|
||||
@submit="handleSubmit"
|
||||
@change="handleFieldChange"
|
||||
submit-button-text="Save Dates"
|
||||
/>
|
||||
|
||||
<div v-if="Object.keys(formData).length" class="results mt-6">
|
||||
<h3>Current Form Values:</h3>
|
||||
<div class="results-grid">
|
||||
<div v-for="(value, key) in formData" :key="key" class="result-item">
|
||||
<strong>{{ formatFieldLabel(key) }}:</strong>
|
||||
<span v-if="value instanceof Date" class="date-value">
|
||||
{{ formatDateValue(key, value) }}
|
||||
</span>
|
||||
<span v-else-if="value" class="value">{{ value }}</span>
|
||||
<span v-else class="empty">Not set</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import Form from "../common/Form.vue";
|
||||
|
||||
const formData = ref({});
|
||||
|
||||
const dateFields = [
|
||||
// Basic date picker with US format
|
||||
{
|
||||
name: "birthDate",
|
||||
label: "Birth Date",
|
||||
type: "date",
|
||||
format: "mm/dd/yyyy",
|
||||
required: true,
|
||||
maxDate: "today",
|
||||
yearNavigator: true,
|
||||
yearRange: "1920:2010",
|
||||
cols: 12,
|
||||
md: 6,
|
||||
helpText: "Your date of birth",
|
||||
},
|
||||
|
||||
// Date with default to today
|
||||
{
|
||||
name: "startDate",
|
||||
label: "Project Start Date",
|
||||
type: "date",
|
||||
format: "YYYY-MM-DD",
|
||||
defaultToToday: true,
|
||||
minDate: "today",
|
||||
cols: 12,
|
||||
md: 6,
|
||||
helpText: "When should this project start?",
|
||||
},
|
||||
|
||||
// Date and time picker
|
||||
{
|
||||
name: "appointmentDateTime",
|
||||
label: "Appointment Date & Time",
|
||||
type: "date",
|
||||
showTime: true,
|
||||
hourFormat: "12",
|
||||
stepMinute: 15,
|
||||
defaultToNow: true,
|
||||
minDate: "today",
|
||||
cols: 12,
|
||||
md: 6,
|
||||
helpText: "Select appointment date and time",
|
||||
},
|
||||
|
||||
// Time-only picker
|
||||
{
|
||||
name: "preferredTime",
|
||||
label: "Preferred Contact Time",
|
||||
type: "date",
|
||||
timeOnly: true,
|
||||
hourFormat: "12",
|
||||
stepMinute: 30,
|
||||
defaultValue: "09:00",
|
||||
cols: 12,
|
||||
md: 6,
|
||||
helpText: "Best time to contact you",
|
||||
},
|
||||
|
||||
// European date format with week numbers
|
||||
{
|
||||
name: "eventDate",
|
||||
label: "Event Date",
|
||||
type: "date",
|
||||
format: "dd/mm/yyyy",
|
||||
showWeek: true,
|
||||
monthNavigator: true,
|
||||
yearNavigator: true,
|
||||
yearRange: "2024:2026",
|
||||
cols: 12,
|
||||
md: 6,
|
||||
},
|
||||
|
||||
// Date with seconds
|
||||
{
|
||||
name: "preciseTime",
|
||||
label: "Precise Timestamp",
|
||||
type: "date",
|
||||
showTime: true,
|
||||
showSeconds: true,
|
||||
hourFormat: "24",
|
||||
stepSecond: 1,
|
||||
cols: 12,
|
||||
md: 6,
|
||||
helpText: "Precise time with seconds",
|
||||
},
|
||||
];
|
||||
|
||||
const handleSubmit = (data) => {
|
||||
console.log("Date form submitted:", data);
|
||||
alert("Form submitted! Check console for details.");
|
||||
};
|
||||
|
||||
const handleFieldChange = (event) => {
|
||||
console.log("Field changed:", event.fieldName, "->", event.value);
|
||||
};
|
||||
|
||||
const formatFieldLabel = (fieldName) => {
|
||||
const field = dateFields.find((f) => f.name === fieldName);
|
||||
return field ? field.label : fieldName;
|
||||
};
|
||||
|
||||
const formatDateValue = (fieldName, dateValue) => {
|
||||
if (!dateValue) return "Not set";
|
||||
|
||||
const field = dateFields.find((f) => f.name === fieldName);
|
||||
|
||||
if (field?.timeOnly) {
|
||||
return dateValue.toLocaleTimeString();
|
||||
} else if (field?.showTime) {
|
||||
return dateValue.toLocaleString();
|
||||
} else {
|
||||
return dateValue.toLocaleDateString();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.test-date-form {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.results {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.results-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.date-value {
|
||||
color: #0066cc;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #28a745;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.result-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -59,8 +59,8 @@ const columns = [
|
|||
filterable: true,
|
||||
},
|
||||
{
|
||||
label: "Address",
|
||||
fieldName: "address",
|
||||
label: "Service Address",
|
||||
fieldName: "serviceAddress",
|
||||
type: "text",
|
||||
sortable: true,
|
||||
filterable: true,
|
||||
|
|
@ -69,38 +69,50 @@ const columns = [
|
|||
label: "Issue Description",
|
||||
fieldName: "issueDescription",
|
||||
type: "text",
|
||||
sortable: true,
|
||||
sortable: false,
|
||||
filterable: false,
|
||||
},
|
||||
{
|
||||
label: "Priority",
|
||||
fieldName: "priority",
|
||||
type: "status",
|
||||
sortable: true,
|
||||
filterable: false,
|
||||
},
|
||||
{
|
||||
label: "Status",
|
||||
fieldName: "status",
|
||||
type: "status",
|
||||
sortable: true,
|
||||
filterable: true,
|
||||
},
|
||||
{
|
||||
label: "Assigned Technician",
|
||||
fieldName: "assignedTechnician",
|
||||
label: "Complaint Date",
|
||||
fieldName: "complaintDate",
|
||||
type: "date",
|
||||
sortable: true,
|
||||
filterable: false,
|
||||
},
|
||||
{
|
||||
label: "Raised By",
|
||||
fieldName: "complaintRaisedBy",
|
||||
type: "text",
|
||||
sortable: true,
|
||||
filterable: true,
|
||||
},
|
||||
{
|
||||
label: "Date Reported",
|
||||
fieldName: "dateReported",
|
||||
label: "Territory",
|
||||
fieldName: "territory",
|
||||
type: "text",
|
||||
sortable: true,
|
||||
filterable: true,
|
||||
},
|
||||
{
|
||||
label: "Est. Completion",
|
||||
fieldName: "estimatedCompletionDate",
|
||||
type: "text",
|
||||
label: "Warranty Status",
|
||||
fieldName: "warrantyStatus",
|
||||
type: "status",
|
||||
sortable: true,
|
||||
filterable: true,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -155,21 +167,18 @@ const handleLazyLoad = async (event) => {
|
|||
|
||||
console.log("Making API call with:", { paginationParams, filters });
|
||||
|
||||
// For now, use existing API but we should create a paginated version
|
||||
// TODO: Create Api.getPaginatedWarrantyData() method
|
||||
let data = await Api.getWarrantyData();
|
||||
// Get sorting from store for proper API call
|
||||
const sorting = filtersStore.getTableSorting("warranties");
|
||||
|
||||
// Simulate pagination on client side for now
|
||||
const startIndex = paginationParams.page * paginationParams.pageSize;
|
||||
const endIndex = startIndex + paginationParams.pageSize;
|
||||
const paginatedData = data.slice(startIndex, endIndex);
|
||||
// Use the new paginated API method
|
||||
const result = await Api.getPaginatedWarrantyData(paginationParams, filters, sorting);
|
||||
|
||||
// Update local state
|
||||
tableData.value = paginatedData;
|
||||
totalRecords.value = data.length;
|
||||
tableData.value = result.data;
|
||||
totalRecords.value = result.pagination.total;
|
||||
|
||||
// Update pagination store with new total
|
||||
paginationStore.setTotalRecords("warranties", data.length);
|
||||
paginationStore.setTotalRecords("warranties", result.pagination.total);
|
||||
|
||||
// Cache the result
|
||||
paginationStore.setCachedPage(
|
||||
|
|
@ -180,14 +189,14 @@ const handleLazyLoad = async (event) => {
|
|||
paginationParams.sortOrder,
|
||||
filters,
|
||||
{
|
||||
records: paginatedData,
|
||||
totalRecords: data.length,
|
||||
records: result.data,
|
||||
totalRecords: result.pagination.total,
|
||||
},
|
||||
);
|
||||
|
||||
console.log("Loaded from API:", {
|
||||
records: paginatedData.length,
|
||||
total: data.length,
|
||||
records: result.data.length,
|
||||
total: result.pagination.total,
|
||||
page: paginationParams.page + 1,
|
||||
});
|
||||
} catch (error) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue