Replace flag-icons with vue-country-flag-next and improve UI styling
Some checks failed
Build And Push Image / docker (push) Failing after 2m52s
Some checks failed
Build And Push Image / docker (push) Failing after 2m52s
- 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:
@@ -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>
|
||||
|
||||
468
components/EditMemberDialog.vue
Normal file
468
components/EditMemberDialog.vue
Normal file
@@ -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];
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user