catalyx/PSTW_CentralizeSystem
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add sorting to date and station

Browse Source
This commit is contained in:
misya 2025-04-11 09:14:19 +08:00
parent bc4bb67ff8
commit 6d7a04ae7c
2 changed files with 91 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Areas/MMS/Controllers/MarineController.cs
View File

@ -17,6 +17,7 @@ namespace PSTW_CentralSystem.Areas.MMS.Controllers
}
public IActionResult TarBallForm()
{
return View();
}

86
Areas/MMS/Views/Marine/TarBallForm.cshtml
View File

@ -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 */
}
</style>
</head>
<body>
@ -58,6 +74,10 @@
<option value="default" selected disabled>Filter by Year</option>
<option v-for="year in years" :value="year">{{ year }}</option>
</select>
<div>
<button @@click="clearFilters" class="btn btn-default" style="margin-top: 20px; margin-bottom: 25px;">Clear Filter</button>
</div>
</div>
<div class="datatable">
@ -65,12 +85,21 @@
<thead>
<tr>
<th>No.</th>
<th>Date</th>
<th>Station</th>
<th @@click="sortBy('date')">
Date
<span class="sort-arrow" :class="{ active: sortKey === 'date' && sortOrder === 'asc' }">▲</span>
<span class="sort-arrow" :class="{ active: sortKey === 'date' && sortOrder === 'desc' }">▼</span>
</th>
<th @@click="sortBy('station')">
Station
<span class="sort-arrow" :class="{ active: sortKey === 'station' && sortOrder === 'asc' }">▲</span>
<span class="sort-arrow" :class="{ active: sortKey === 'station' && sortOrder === 'desc' }">▼</span>
</th>
<th>Approval Status</th>
<th>PDF</th>
</tr>
</thead>
<tbody>
<tr v-for="data in numberedData" :key="data.no">
<td>{{ data.no }}</td>
@ -101,6 +130,8 @@
data: {
selectedMonth: '',
selectedYear: '',
sortKey:'date',
sortOrder: 'desc',
months: [
'January', 'February', 'March', 'April', 'May',
'June', 'July', 'August', 'September',
@ -126,15 +157,62 @@
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
// Automatically sort data by the latest date
numberedData() {
return this.mockData.map((data, index) => ({
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';
}
}
}
});
</script>
}