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() public IActionResult TarBallForm()
{ {
return View(); return View();
} }

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

@ -42,6 +42,22 @@
.tbhead { .tbhead {
text-align: center; 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> </style>
</head> </head>
<body> <body>
@ -58,6 +74,10 @@
<option value="default" selected disabled>Filter by Year</option> <option value="default" selected disabled>Filter by Year</option>
<option v-for="year in years" :value="year">{{ year }}</option> <option v-for="year in years" :value="year">{{ year }}</option>
</select> </select>
<div>
<button @@click="clearFilters" class="btn btn-default" style="margin-top: 20px; margin-bottom: 25px;">Clear Filter</button>
</div>
</div> </div>
<div class="datatable"> <div class="datatable">
@ -65,12 +85,21 @@
<thead> <thead>
<tr> <tr>
<th>No.</th> <th>No.</th>
<th>Date</th> <th @@click="sortBy('date')">
<th>Station</th> 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>Approval Status</th>
<th>PDF</th> <th>PDF</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="data in numberedData" :key="data.no"> <tr v-for="data in numberedData" :key="data.no">
<td>{{ data.no }}</td> <td>{{ data.no }}</td>
@ -101,6 +130,8 @@
data: { data: {
selectedMonth: '', selectedMonth: '',
selectedYear: '', selectedYear: '',
sortKey:'date',
sortOrder: 'desc',
months: [ months: [
'January', 'February', 'March', 'April', 'May', 'January', 'February', 'March', 'April', 'May',
'June', 'July', 'August', 'September', 'June', 'July', 'August', 'September',
@ -119,22 +150,69 @@
{ date: '2025-10-14', station: 'Station A' } { date: '2025-10-14', station: 'Station A' }
] ]
}, },
computed: { computed: {
years() { years() {
const allYears = this.mockData.map(data => new Date(data.date).getFullYear()); const allYears = this.mockData.map(data => new Date(data.date).getFullYear());
const minYear = Math.min(...allYears); const minYear = Math.min(...allYears);
const maxYear = Math.max(...allYears); const maxYear = Math.max(...allYears);
return Array.from({ length: maxYear - minYear + 1 }, (_, i) => (minYear + i).toString()); 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() { 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, no: index + 1,
...data ...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> </script>
} }