matt/port-nimara-client-portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

FEAT: Enhance berth color handling in dashboard components and improve authentication middleware with caching

Browse Source
This commit is contained in:
Matt
2025-06-17 18:05:22 +02:00
parent 8a4824e6fe
commit b585daddde
5 changed files with 202 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
pages/dashboard/berth-list.vue
View File

@@ -188,7 +188,11 @@
<!-- Berth Header -->
<div class="d-flex align-center justify-space-between mb-3">
<div class="d-flex align-center">
<v-avatar size="40" color="primary" class="mr-3">
<v-avatar
size="40"
:color="getBerthColorFromMooringNumber(berth['Mooring Number'])"
class="mr-3"
>
<span class="text-white text-body-2 font-weight-bold">
{{ berth['Mooring Number'] }}
</span>
@@ -272,7 +276,11 @@
>
<td>
<div class="d-flex align-center">
<v-avatar size="32" color="primary" class="mr-3">
<v-avatar
size="32"
:color="getBerthColorFromMooringNumber(berth['Mooring Number'])"
class="mr-3"
>
<span class="text-white text-caption font-weight-bold">
{{ berth['Mooring Number'] }}
</span>
@@ -326,6 +334,7 @@ import { ref, computed, onMounted } from 'vue';
import { useFetch } from '#app';
import type { Berth, BerthsResponse } from '@/utils/types';
import { BerthArea } from '@/utils/types';
import { getBerthColorFromMooringNumber } from '@/utils/berthColors';
import BerthStatusBadge from '@/components/BerthStatusBadge.vue';
import BerthDetailsModal from '@/components/BerthDetailsModal.vue';

11
pages/dashboard/interest-berth-status.vue
View File

@@ -115,8 +115,8 @@
</v-chip>
</v-card-title>
<v-divider />
<v-card-text class="pa-2" style="max-height: 600px; overflow-y: auto;">
<div class="d-flex flex-column gap-2">
<v-card-text class="pa-3" style="max-height: 600px; overflow-y: auto;">
<div class="d-flex flex-column gap-3">
<v-card
v-for="berth in getBerthsByStatus(status.value)"
:key="berth.Id"
@@ -197,7 +197,11 @@
<!-- Berth Header -->
<div class="d-flex align-center justify-space-between mb-3">
<div class="d-flex align-center">
<v-avatar size="36" color="primary" class="mr-3">
<v-avatar
size="36"
:color="getBerthColorFromMooringNumber(berth['Mooring Number'])"
class="mr-3"
>
<span class="text-white text-body-2 font-weight-bold">
{{ berth['Mooring Number'] }}
</span>
@@ -261,6 +265,7 @@ import { ref, computed } from 'vue';
import { useFetch } from '#app';
import type { Berth, BerthsResponse } from '@/utils/types';
import { BerthArea, BerthStatus } from '@/utils/types';
import { getBerthColorFromMooringNumber } from '@/utils/berthColors';
import BerthStatusBadge from '@/components/BerthStatusBadge.vue';
import BerthDetailsModal from '@/components/BerthDetailsModal.vue';