Replace flag-icons with vue-country-flag-next and improve UI styling
Build And Push Image / docker (push) Failing after 2m52s
Details
Build And Push Image / docker (push) Failing after 2m52s
Details
- Replace flag-icons CSS library with vue-country-flag-next component - Update CountryFlag component to use new library API - Improve avatar colors with high-contrast color palette - Adjust dashboard layout column sizing - Add new EditMemberDialog component - Remove unused flag-icons CSS dependency
This commit is contained in:
parent
22a74c6b33
commit
5fe015af51
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<span class="country-flag" :class="{ 'country-flag--small': size === 'small' }">
|
||||
<span
|
||||
class="fi"
|
||||
:class="flagClasses"
|
||||
:style="flagStyle"
|
||||
<CountryFlag
|
||||
v-if="countryCode"
|
||||
:country="countryCode"
|
||||
:size="flagSize"
|
||||
:title="getCountryName(countryCode)"
|
||||
></span>
|
||||
/>
|
||||
<span v-if="showName && countryCode" class="country-name">
|
||||
{{ getCountryName(countryCode) }}
|
||||
</span>
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CountryFlag } from 'vue-country-flag-next';
|
||||
import { getCountryName } from '~/utils/countries';
|
||||
|
||||
interface Props {
|
||||
|
|
@ -29,36 +30,14 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
square: false
|
||||
});
|
||||
|
||||
const flagClasses = computed(() => {
|
||||
const classes = [];
|
||||
|
||||
if (props.countryCode) {
|
||||
classes.push(`fi-${props.countryCode.toLowerCase()}`);
|
||||
}
|
||||
|
||||
if (props.square) {
|
||||
classes.push('fis');
|
||||
}
|
||||
|
||||
return classes;
|
||||
});
|
||||
|
||||
const flagStyle = computed(() => {
|
||||
const flagSize = computed(() => {
|
||||
const sizeMap = {
|
||||
small: '1rem',
|
||||
medium: '1.5rem',
|
||||
large: '2rem'
|
||||
small: 'sm',
|
||||
medium: 'md',
|
||||
large: 'lg'
|
||||
};
|
||||
|
||||
return {
|
||||
width: sizeMap[props.size],
|
||||
height: props.square ? sizeMap[props.size] : `calc(${sizeMap[props.size]} * 0.75)`, // 4:3 aspect ratio
|
||||
display: 'inline-block',
|
||||
borderRadius: '2px',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat'
|
||||
};
|
||||
return sizeMap[props.size];
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -85,8 +64,9 @@ const flagStyle = computed(() => {
|
|||
}
|
||||
|
||||
/* Ensure proper flag display */
|
||||
.fi {
|
||||
flex-shrink: 0;
|
||||
:deep(.vue-country-flag) {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,468 @@
|
|||
<template>
|
||||
<v-dialog
|
||||
:model-value="modelValue"
|
||||
@update:model-value="$emit('update:model-value', $event)"
|
||||
max-width="900"
|
||||
persistent
|
||||
scrollable
|
||||
>
|
||||
<v-card>
|
||||
<v-card-title class="d-flex align-center pa-6 bg-primary">
|
||||
<v-icon class="mr-3 text-white">mdi-account-edit</v-icon>
|
||||
<h2 class="text-h5 text-white font-weight-bold flex-grow-1">
|
||||
Edit Member: {{ member?.FullName || `${member?.['First Name']} ${member?.['Last Name']}` }}
|
||||
</h2>
|
||||
<v-btn
|
||||
icon
|
||||
variant="text"
|
||||
color="white"
|
||||
@click="closeDialog"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="pa-6">
|
||||
<v-form ref="formRef" v-model="formValid" @submit.prevent="handleSubmit">
|
||||
<v-row>
|
||||
<!-- Personal Information Section -->
|
||||
<v-col cols="12">
|
||||
<h3 class="text-h6 mb-4 text-primary">Personal Information</h3>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="form['First Name']"
|
||||
label="First Name"
|
||||
variant="outlined"
|
||||
:rules="[rules.required]"
|
||||
required
|
||||
:error="hasFieldError('First Name')"
|
||||
:error-messages="getFieldError('First Name')"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="form['Last Name']"
|
||||
label="Last Name"
|
||||
variant="outlined"
|
||||
:rules="[rules.required]"
|
||||
required
|
||||
:error="hasFieldError('Last Name')"
|
||||
:error-messages="getFieldError('Last Name')"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="form.Email"
|
||||
label="Email Address"
|
||||
type="email"
|
||||
variant="outlined"
|
||||
:rules="[rules.required, rules.email]"
|
||||
required
|
||||
:error="hasFieldError('Email')"
|
||||
:error-messages="getFieldError('Email')"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<PhoneInputWrapper
|
||||
v-model="form.Phone"
|
||||
label="Phone Number"
|
||||
placeholder="Enter phone number"
|
||||
:error="hasFieldError('Phone')"
|
||||
:error-message="getFieldError('Phone')"
|
||||
@phone-data="handlePhoneData"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="form['Date of Birth']"
|
||||
label="Date of Birth"
|
||||
type="date"
|
||||
variant="outlined"
|
||||
:error="hasFieldError('Date of Birth')"
|
||||
:error-messages="getFieldError('Date of Birth')"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<MultipleNationalityInput
|
||||
v-model="form.Nationality"
|
||||
label="Nationality"
|
||||
:error="hasFieldError('Nationality')"
|
||||
:error-message="getFieldError('Nationality')"
|
||||
:max-nationalities="3"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-textarea
|
||||
v-model="form.Address"
|
||||
label="Address"
|
||||
variant="outlined"
|
||||
rows="2"
|
||||
:error="hasFieldError('Address')"
|
||||
:error-messages="getFieldError('Address')"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<!-- Membership Information Section -->
|
||||
<v-col cols="12">
|
||||
<v-divider class="my-4" />
|
||||
<h3 class="text-h6 mb-4 text-primary">Membership Information</h3>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-select
|
||||
v-model="form['Membership Status']"
|
||||
:items="membershipStatusOptions"
|
||||
label="Membership Status"
|
||||
variant="outlined"
|
||||
:rules="[rules.required]"
|
||||
required
|
||||
:error="hasFieldError('Membership Status')"
|
||||
:error-messages="getFieldError('Membership Status')"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="form['Member Since']"
|
||||
label="Member Since"
|
||||
type="date"
|
||||
variant="outlined"
|
||||
:error="hasFieldError('Member Since')"
|
||||
:error-messages="getFieldError('Member Since')"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-switch
|
||||
v-model="duesPaid"
|
||||
label="Current Year Dues Paid"
|
||||
color="success"
|
||||
inset
|
||||
:error="hasFieldError('Current Year Dues Paid')"
|
||||
:error-messages="getFieldError('Current Year Dues Paid')"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6" v-if="duesPaid">
|
||||
<v-text-field
|
||||
v-model="form['Membership Date Paid']"
|
||||
label="Payment Date"
|
||||
type="date"
|
||||
variant="outlined"
|
||||
:error="hasFieldError('Membership Date Paid')"
|
||||
:error-messages="getFieldError('Membership Date Paid')"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6" v-if="!duesPaid">
|
||||
<v-text-field
|
||||
v-model="form['Payment Due Date']"
|
||||
label="Payment Due Date"
|
||||
type="date"
|
||||
variant="outlined"
|
||||
:error="hasFieldError('Payment Due Date')"
|
||||
:error-messages="getFieldError('Payment Due Date')"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="pa-6 pt-0">
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
variant="text"
|
||||
@click="closeDialog"
|
||||
:disabled="loading"
|
||||
>
|
||||
Cancel
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="handleSubmit"
|
||||
:loading="loading"
|
||||
:disabled="!formValid"
|
||||
>
|
||||
<v-icon start>mdi-content-save</v-icon>
|
||||
Save Changes
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Member } from '~/utils/types';
|
||||
import { formatBooleanAsString } from '~/server/utils/nocodb';
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean;
|
||||
member: Member | null;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:model-value', value: boolean): void;
|
||||
(e: 'member-updated', member: Member): void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// Form state
|
||||
const formRef = ref();
|
||||
const formValid = ref(false);
|
||||
const loading = ref(false);
|
||||
|
||||
// Form data
|
||||
const form = ref({
|
||||
'First Name': '',
|
||||
'Last Name': '',
|
||||
Email: '',
|
||||
Phone: '',
|
||||
'Date of Birth': '',
|
||||
Nationality: '',
|
||||
Address: '',
|
||||
'Membership Status': 'Active',
|
||||
'Member Since': '',
|
||||
'Current Year Dues Paid': 'false',
|
||||
'Membership Date Paid': '',
|
||||
'Payment Due Date': ''
|
||||
});
|
||||
|
||||
// Additional form state
|
||||
const duesPaid = ref(false);
|
||||
const phoneData = ref(null);
|
||||
|
||||
// Error handling
|
||||
const fieldErrors = ref<Record<string, string>>({});
|
||||
|
||||
// Watch dues paid switch
|
||||
watch(duesPaid, (newValue) => {
|
||||
form.value['Current Year Dues Paid'] = formatBooleanAsString(newValue);
|
||||
if (newValue) {
|
||||
form.value['Payment Due Date'] = '';
|
||||
if (!form.value['Membership Date Paid']) {
|
||||
form.value['Membership Date Paid'] = new Date().toISOString().split('T')[0];
|
||||
}
|
||||
} else {
|
||||
form.value['Membership Date Paid'] = '';
|
||||
if (!form.value['Payment Due Date']) {
|
||||
// Set due date to one year from member since date or today
|
||||
const memberSince = form.value['Member Since'] || new Date().toISOString().split('T')[0];
|
||||
const dueDate = new Date(memberSince);
|
||||
dueDate.setFullYear(dueDate.getFullYear() + 1);
|
||||
form.value['Payment Due Date'] = dueDate.toISOString().split('T')[0];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Membership status options
|
||||
const membershipStatusOptions = [
|
||||
{ title: 'Active', value: 'Active' },
|
||||
{ title: 'Inactive', value: 'Inactive' },
|
||||
{ title: 'Pending', value: 'Pending' },
|
||||
{ title: 'Expired', value: 'Expired' }
|
||||
];
|
||||
|
||||
// Validation rules
|
||||
const rules = {
|
||||
required: (value: any) => {
|
||||
if (typeof value === 'string') {
|
||||
return !!value?.trim() || 'This field is required';
|
||||
}
|
||||
return !!value || 'This field is required';
|
||||
},
|
||||
email: (value: string) => {
|
||||
const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return !value || pattern.test(value) || 'Please enter a valid email address';
|
||||
}
|
||||
};
|
||||
|
||||
// Error handling methods
|
||||
const hasFieldError = (fieldName: string) => {
|
||||
return !!fieldErrors.value[fieldName];
|
||||
};
|
||||
|
||||
const getFieldError = (fieldName: string) => {
|
||||
return fieldErrors.value[fieldName] || '';
|
||||
};
|
||||
|
||||
const clearFieldErrors = () => {
|
||||
fieldErrors.value = {};
|
||||
};
|
||||
|
||||
// Phone data handler
|
||||
const handlePhoneData = (data: any) => {
|
||||
phoneData.value = data;
|
||||
};
|
||||
|
||||
// Form pre-population
|
||||
const populateForm = () => {
|
||||
if (!props.member) return;
|
||||
|
||||
const member = props.member;
|
||||
form.value = {
|
||||
'First Name': member['First Name'] || '',
|
||||
'Last Name': member['Last Name'] || '',
|
||||
Email: member.Email || '',
|
||||
Phone: member.Phone || '',
|
||||
'Date of Birth': member['Date of Birth'] || '',
|
||||
Nationality: member.Nationality || '',
|
||||
Address: member.Address || '',
|
||||
'Membership Status': member['Membership Status'] || 'Active',
|
||||
'Member Since': member['Member Since'] || '',
|
||||
'Current Year Dues Paid': member['Current Year Dues Paid'] || 'false',
|
||||
'Membership Date Paid': member['Membership Date Paid'] || '',
|
||||
'Payment Due Date': member['Payment Due Date'] || ''
|
||||
};
|
||||
|
||||
// Set dues paid switch based on the string value
|
||||
duesPaid.value = member['Current Year Dues Paid'] === 'true';
|
||||
};
|
||||
|
||||
// Form submission
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value || !props.member) return;
|
||||
|
||||
const isValid = await formRef.value.validate();
|
||||
if (!isValid.valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
clearFieldErrors();
|
||||
|
||||
try {
|
||||
// Prepare the data for submission
|
||||
const memberData = { ...form.value };
|
||||
|
||||
// Ensure required fields are not empty
|
||||
if (!memberData['First Name']?.trim()) {
|
||||
throw new Error('First Name is required');
|
||||
}
|
||||
if (!memberData['Last Name']?.trim()) {
|
||||
throw new Error('Last Name is required');
|
||||
}
|
||||
if (!memberData.Email?.trim()) {
|
||||
throw new Error('Email is required');
|
||||
}
|
||||
|
||||
console.log('[EditMemberDialog] Updating member data:', memberData);
|
||||
|
||||
const response = await $fetch<{ success: boolean; data: Member; message?: string }>(`/api/members/${props.member.Id}`, {
|
||||
method: 'PUT',
|
||||
body: memberData
|
||||
});
|
||||
|
||||
if (response.success && response.data) {
|
||||
console.log('[EditMemberDialog] Member updated successfully:', response.data);
|
||||
emit('member-updated', response.data);
|
||||
closeDialog();
|
||||
} else {
|
||||
throw new Error(response.message || 'Failed to update member');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('[EditMemberDialog] Error updating member:', error);
|
||||
|
||||
// Handle validation errors
|
||||
if (error.data?.fieldErrors) {
|
||||
fieldErrors.value = error.data.fieldErrors;
|
||||
} else {
|
||||
// Show general error
|
||||
fieldErrors.value = {
|
||||
general: error.message || 'Failed to update member. Please try again.'
|
||||
};
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Dialog management
|
||||
const closeDialog = () => {
|
||||
emit('update:model-value', false);
|
||||
};
|
||||
|
||||
// Watch for dialog open/close and member changes
|
||||
watch(() => props.modelValue, (newValue) => {
|
||||
if (newValue && props.member) {
|
||||
// Dialog opened - populate form with member data
|
||||
populateForm();
|
||||
clearFieldErrors();
|
||||
|
||||
// Reset form validation
|
||||
nextTick(() => {
|
||||
formRef.value?.resetValidation();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => props.member, (newMember) => {
|
||||
if (newMember && props.modelValue) {
|
||||
// Member changed while dialog is open
|
||||
populateForm();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bg-primary {
|
||||
background: linear-gradient(135deg, #a31515 0%, #d32f2f 100%) !important;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #a31515 !important;
|
||||
}
|
||||
|
||||
.v-card {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
/* Form section spacing */
|
||||
.v-card-text .v-row .v-col:first-child h3 {
|
||||
border-bottom: 2px solid rgba(var(--v-theme-primary), 0.12);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Error message styling */
|
||||
.field-error {
|
||||
color: rgb(var(--v-theme-error));
|
||||
font-size: 0.75rem;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Switch styling */
|
||||
.v-switch {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 960px) {
|
||||
.v-dialog {
|
||||
margin: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.v-card-title {
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
.v-card-text {
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
.v-card-actions {
|
||||
padding: 16px !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -155,8 +155,8 @@ const memberInitials = computed(() => {
|
|||
});
|
||||
|
||||
const avatarColor = computed(() => {
|
||||
// Generate consistent color based on member ID
|
||||
const colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'success'];
|
||||
// Generate consistent color based on member ID using high-contrast colors
|
||||
const colors = ['red', 'blue', 'green', 'orange', 'purple', 'teal', 'indigo', 'pink', 'brown'];
|
||||
const idNumber = parseInt(props.member.Id) || 0;
|
||||
return colors[idNumber % colors.length];
|
||||
});
|
||||
|
|
|
|||
|
|
@ -69,7 +69,6 @@ export default defineNuxtConfig({
|
|||
]
|
||||
],
|
||||
css: [
|
||||
'flag-icons/css/flag-icons.min.css'
|
||||
],
|
||||
app: {
|
||||
head: {
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
"sharp": "^0.34.2",
|
||||
"systeminformation": "^5.27.7",
|
||||
"vue": "latest",
|
||||
"vue-country-flag-next": "^2.3.2",
|
||||
"vue-router": "latest",
|
||||
"vuetify-nuxt-module": "^0.18.3"
|
||||
},
|
||||
|
|
@ -17662,6 +17663,18 @@
|
|||
"integrity": "sha512-uoNZaJ+a1/zppa/Vgmi8zIOP2PHXDN2rT8NyF+zQRK6ZG94lNB9prcV0GdLJbY9i9lrD47JOVIH92SaiA7oJ1A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vue-country-flag-next": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-country-flag-next/-/vue-country-flag-next-2.3.2.tgz",
|
||||
"integrity": "sha512-Lv12L1VTwlBgizpZ3xPEPO3zuIETaJmeSiPuLOWLLgu2EakwU/o72iKYiKcdZ6BXiSkfss+Ski5fDzjuxZ1DcA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-devtools-stub": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz",
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
"sharp": "^0.34.2",
|
||||
"systeminformation": "^5.27.7",
|
||||
"vue": "latest",
|
||||
"vue-country-flag-next": "^2.3.2",
|
||||
"vue-router": "latest",
|
||||
"vuetify-nuxt-module": "^0.18.3"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
<!-- Search and Filter Controls -->
|
||||
<v-row class="mb-4">
|
||||
<v-col cols="12" md="4">
|
||||
<v-col cols="12" md="3">
|
||||
<v-text-field
|
||||
v-model="searchTerm"
|
||||
label="Search members..."
|
||||
|
|
@ -26,29 +26,6 @@
|
|||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="3">
|
||||
<v-select
|
||||
v-model="nationalityFilter"
|
||||
:items="nationalityOptions"
|
||||
label="Nationality"
|
||||
variant="outlined"
|
||||
clearable
|
||||
@update:model-value="filterMembers"
|
||||
>
|
||||
<template #selection="{ item }">
|
||||
<CountryFlag :country-code="item.raw.code" :show-name="true" size="small" />
|
||||
</template>
|
||||
<template #item="{ props, item }">
|
||||
<v-list-item v-bind="props">
|
||||
<template #prepend>
|
||||
<CountryFlag :country-code="item.raw.code" :show-name="false" size="small" />
|
||||
</template>
|
||||
<v-list-item-title>{{ item.raw.name }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-select>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="3">
|
||||
<v-select
|
||||
v-model="statusFilter"
|
||||
|
|
@ -60,7 +37,17 @@
|
|||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="2">
|
||||
<v-col cols="12" md="3">
|
||||
<v-select
|
||||
v-model="sortOption"
|
||||
:items="sortOptions"
|
||||
label="Sort By"
|
||||
variant="outlined"
|
||||
prepend-inner-icon="mdi-sort"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="3">
|
||||
<v-btn
|
||||
color="primary"
|
||||
block
|
||||
|
|
@ -162,12 +149,12 @@
|
|||
<v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-account-search</v-icon>
|
||||
<h3 class="text-h5 mb-2">No members found</h3>
|
||||
<p class="text-body-1 mb-4">
|
||||
{{ searchTerm || nationalityFilter || statusFilter
|
||||
{{ searchTerm || statusFilter
|
||||
? 'Try adjusting your filters to find members.'
|
||||
: 'No members have been added yet.' }}
|
||||
</p>
|
||||
<v-btn
|
||||
v-if="canCreateMembers && !searchTerm && !nationalityFilter && !statusFilter"
|
||||
v-if="canCreateMembers && !searchTerm && !statusFilter"
|
||||
color="primary"
|
||||
@click="showAddDialog = true"
|
||||
>
|
||||
|
|
@ -267,8 +254,8 @@ const error = ref('');
|
|||
|
||||
// Search and filtering
|
||||
const searchTerm = ref('');
|
||||
const nationalityFilter = ref('');
|
||||
const statusFilter = ref('');
|
||||
const sortOption = ref('name-asc');
|
||||
|
||||
// Dialogs
|
||||
const showAddDialog = ref(false);
|
||||
|
|
@ -290,15 +277,15 @@ const statusOptions = [
|
|||
{ title: 'Expired', value: 'Expired' }
|
||||
];
|
||||
|
||||
const nationalityOptions = computed(() => {
|
||||
const countries = getAllCountries();
|
||||
return countries.map(country => ({
|
||||
title: country.name,
|
||||
value: country.code,
|
||||
code: country.code,
|
||||
name: country.name
|
||||
}));
|
||||
});
|
||||
// Sort options
|
||||
const sortOptions = [
|
||||
{ title: 'Name (A-Z)', value: 'name-asc' },
|
||||
{ title: 'Name (Z-A)', value: 'name-desc' },
|
||||
{ title: 'Date Paid (Newest First)', value: 'date-desc' },
|
||||
{ title: 'Date Paid (Oldest First)', value: 'date-asc' },
|
||||
{ title: 'Nationality (A-Z)', value: 'nationality-asc' },
|
||||
{ title: 'Nationality (Z-A)', value: 'nationality-desc' }
|
||||
];
|
||||
|
||||
// Computed properties
|
||||
const filteredMembers = computed(() => {
|
||||
|
|
@ -314,13 +301,6 @@ const filteredMembers = computed(() => {
|
|||
);
|
||||
}
|
||||
|
||||
// Nationality filter
|
||||
if (nationalityFilter.value) {
|
||||
filtered = filtered.filter(member =>
|
||||
member.Nationality === nationalityFilter.value
|
||||
);
|
||||
}
|
||||
|
||||
// Status filter
|
||||
if (statusFilter.value) {
|
||||
filtered = filtered.filter(member =>
|
||||
|
|
@ -328,6 +308,32 @@ const filteredMembers = computed(() => {
|
|||
);
|
||||
}
|
||||
|
||||
// Sorting
|
||||
if (sortOption.value) {
|
||||
filtered.sort((a, b) => {
|
||||
switch (sortOption.value) {
|
||||
case 'name-asc':
|
||||
return (a.FullName || '').localeCompare(b.FullName || '');
|
||||
case 'name-desc':
|
||||
return (b.FullName || '').localeCompare(a.FullName || '');
|
||||
case 'date-desc':
|
||||
const aDate = a['Membership Date Paid'] || '';
|
||||
const bDate = b['Membership Date Paid'] || '';
|
||||
return new Date(bDate).getTime() - new Date(aDate).getTime();
|
||||
case 'date-asc':
|
||||
const aDateAsc = a['Membership Date Paid'] || '';
|
||||
const bDateAsc = b['Membership Date Paid'] || '';
|
||||
return new Date(aDateAsc).getTime() - new Date(bDateAsc).getTime();
|
||||
case 'nationality-asc':
|
||||
return (a.Nationality || '').localeCompare(b.Nationality || '');
|
||||
case 'nationality-desc':
|
||||
return (b.Nationality || '').localeCompare(a.Nationality || '');
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return filtered;
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue