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