From 6d7a04ae7c9140e9b5c36843a9f2aa199e18f35b Mon Sep 17 00:00:00 2001 From: misya Date: Fri, 11 Apr 2025 09:14:19 +0800 Subject: [PATCH] add sorting to date and station --- Areas/MMS/Controllers/MarineController.cs | 1 + Areas/MMS/Views/Marine/TarBallForm.cshtml | 102 +++++++++++++++++++--- 2 files changed, 91 insertions(+), 12 deletions(-) diff --git a/Areas/MMS/Controllers/MarineController.cs b/Areas/MMS/Controllers/MarineController.cs index 5fce77d..c3fe67f 100644 --- a/Areas/MMS/Controllers/MarineController.cs +++ b/Areas/MMS/Controllers/MarineController.cs @@ -17,6 +17,7 @@ namespace PSTW_CentralSystem.Areas.MMS.Controllers } public IActionResult TarBallForm() { + return View(); } diff --git a/Areas/MMS/Views/Marine/TarBallForm.cshtml b/Areas/MMS/Views/Marine/TarBallForm.cshtml index f8cd8b6..ecf3353 100644 --- a/Areas/MMS/Views/Marine/TarBallForm.cshtml +++ b/Areas/MMS/Views/Marine/TarBallForm.cshtml @@ -42,6 +42,22 @@ .tbhead { text-align: center; } + + /* Default arrow style (grey) */ + .sort-arrow { + color: #aaa; /* Light grey for default state */ + font-size: 12px; /* Adjust size for better visibility */ + line-height: 1; /* Ensure proper spacing */ + display: inline-block; /* Stack arrows vertically */ + margin: 0; /* Remove extra spacing */ + } + + /* Active arrow style (darker grey) */ + .sort-arrow.active { + color: #333; /* Dark grey for active state */ + font-weight: bold; /* Optional: Make it bold for emphasis */ + } + @@ -58,6 +74,10 @@ + +
+ +
@@ -65,12 +85,21 @@ No. - Date - Station + + Date + ▲ + ▼ + + + Station + ▲ + ▼ + Approval Status PDF + {{ data.no }} @@ -101,6 +130,8 @@ data: { selectedMonth: '', selectedYear: '', + sortKey:'date', + sortOrder: 'desc', months: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', @@ -119,22 +150,69 @@ { date: '2025-10-14', station: 'Station A' } ] }, - computed: { - years() { - const allYears = this.mockData.map(data => new Date(data.date).getFullYear()); - const minYear = Math.min(...allYears); - const maxYear = Math.max(...allYears); - return Array.from({ length: maxYear - minYear + 1 }, (_, i) => (minYear + i).toString()); - }, + computed: { + years() { + const allYears = this.mockData.map(data => new Date(data.date).getFullYear()); + const minYear = Math.min(...allYears); + const maxYear = Math.max(...allYears); + return Array.from({ length: maxYear - minYear + 1 }, (_, i) => (minYear + i).toString()); + }, + // Filter data based on selected month and year + filteredData() { + return this.mockData.filter(data => { + const date = new Date(data.date); + const monthMatches = this.selectedMonth + ? date.toLocaleString('default', { month: 'long' }) === this.selectedMonth + : true; + const yearMatches = this.selectedYear + ? date.getFullYear().toString() === this.selectedYear + : true; + return monthMatches && yearMatches; + }); + }, - //increment for 'no.' column - numberedData() { - return this.mockData.map((data, index) => ({ + // Automatically sort data by the latest date + numberedData() { + return this.filteredData + .slice() + .sort((a, b) => { + if (this.sortKey === 'date') { + const dateA = new Date(a.date); + const dateB = new Date(b.date); + return this.sortOrder === 'asc' ? dateA - dateB : dateB - dateA; + } else if (this.sortKey === 'station') { + const stationA = a.station.toLowerCase(); + const stationB = b.station.toLowerCase(); + if (stationA < stationB) return this.sortOrder === 'asc' ? -1 : 1; + if (stationA > stationB) return this.sortOrder === 'asc' ? 1 : -1; + return 0; + } + }) + .map((data, index) => ({ no: index + 1, ...data })); + } + }, + methods: { + //to clear filters + clearFilters() { + this.selectedMonth=''; + this.selectedYear=''; + }, + sortBy(key) { + if (this.sortKey === key) { + // Toggle sort order if the same column is clicked + this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'; + } else { + // Set new sort key and default to ascending order + this.sortKey = key; + this.sortOrder = 'asc'; } } + } }); + + } \ No newline at end of file