754 lines
20 KiB
Vue
754 lines
20 KiB
Vue
<script setup>
|
|
|
|
|
|
|
|
import { useStore } from 'vuex';
|
|
const store = useStore()
|
|
const editDialog = ref(false)
|
|
const deleteDialog = ref(false)
|
|
const search = ref('')
|
|
const defaultItem = ref({
|
|
id: -1,
|
|
avatar: '',
|
|
name: '',
|
|
email: '',
|
|
// dob: '',
|
|
phone_no: '',
|
|
|
|
})
|
|
const router = useRouter()
|
|
const editedItem = ref(defaultItem.value)
|
|
const editedIndex = ref(-1)
|
|
const providersList = ref([])
|
|
const providersFilter = ref([])
|
|
const isLoading=ref(false)
|
|
// status options
|
|
const selectedOptions = [
|
|
{
|
|
text: 'Active',
|
|
value: 1,
|
|
},
|
|
{
|
|
text: 'InActive',
|
|
value: 2,
|
|
},
|
|
|
|
]
|
|
|
|
const refVForm = ref(null)
|
|
|
|
|
|
const formatPhoneNumber = () => {
|
|
console.log(editedItem.value)
|
|
// Remove non-numeric characters from the input
|
|
const numericValue = editedItem.value.phone_no.replace(/\D/g, '');
|
|
|
|
// Apply formatting logic
|
|
if (numericValue.length <= 10) {
|
|
editedItem.value.phone_no = numericValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
|
|
} else {
|
|
// Limit the input to a maximum of 14 characters
|
|
const truncatedValue = numericValue.slice(0, 10);
|
|
editedItem.value.phone_no = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
|
|
}
|
|
};
|
|
// headers
|
|
const headers = [
|
|
{
|
|
title: 'ID',
|
|
key: 'id',
|
|
},
|
|
{
|
|
title: 'NAME',
|
|
key: 'name',
|
|
},
|
|
{
|
|
title: 'EMAIL',
|
|
key: 'email',
|
|
},
|
|
// {
|
|
// title: 'Date Of Birth',
|
|
// key: 'dob',
|
|
// },
|
|
{
|
|
title: 'Phone',
|
|
key: 'phone_no',
|
|
},
|
|
|
|
// {
|
|
// title: 'ACTIONS',
|
|
// key: 'actions',
|
|
// },
|
|
]
|
|
|
|
const resolveStatusVariant = status => {
|
|
if (status === 1)
|
|
return {
|
|
color: 'primary',
|
|
text: 'Current',
|
|
}
|
|
else if (status === 2)
|
|
return {
|
|
color: 'success',
|
|
text: 'Professional',
|
|
}
|
|
else if (status === 3)
|
|
return {
|
|
color: 'error',
|
|
text: 'Rejected',
|
|
}
|
|
else if (status === 4)
|
|
return {
|
|
color: 'warning',
|
|
text: 'Resigned',
|
|
}
|
|
else
|
|
return {
|
|
color: 'info',
|
|
text: 'Applied',
|
|
}
|
|
}
|
|
|
|
const editItem = item => {
|
|
editedIndex.value = providersList.value.indexOf(item)
|
|
editedItem.value = { ...item }
|
|
editDialog.value = true
|
|
}
|
|
|
|
const deleteItem = item => {
|
|
editedIndex.value = providersList.value.indexOf(item)
|
|
editedItem.value = { ...item }
|
|
deleteDialog.value = true
|
|
}
|
|
|
|
const close = () => {
|
|
editDialog.value = false
|
|
editedIndex.value = -1
|
|
editedItem.value = { ...defaultItem.value }
|
|
}
|
|
|
|
const closeDelete = () => {
|
|
deleteDialog.value = false
|
|
editedIndex.value = -1
|
|
editedItem.value = { ...defaultItem.value }
|
|
}
|
|
|
|
const save = async () => {
|
|
const { valid } = await refVForm.value.validate()
|
|
console.log(valid)
|
|
if (valid) {
|
|
if (editedIndex.value > -1){
|
|
await store.dispatch('providerUpdate',{
|
|
id: editedItem.value.id,
|
|
first_name: editedItem.value.first_name,
|
|
last_name: editedItem.value.last_name,
|
|
email: editedItem.value.email,
|
|
})
|
|
Object.assign(providersList.value[editedIndex.value], editedItem.value)
|
|
}else{
|
|
providersList.value.push(editedItem.value)
|
|
}
|
|
close()
|
|
}
|
|
|
|
|
|
}
|
|
const states = ref([
|
|
|
|
{ name: 'Alabama', abbreviation: 'AL' },
|
|
{ name: 'Alaska', abbreviation: 'AK' },
|
|
{ name: 'Arizona', abbreviation: 'AZ' },
|
|
{ name: 'Arkansas', abbreviation: 'AR' },
|
|
{ name: 'Howland Island', abbreviation: 'UM-84' },
|
|
{ name: 'Delaware', abbreviation: 'DE' },
|
|
{ name: 'Maryland', abbreviation: 'MD' },
|
|
{ name: 'Baker Island', abbreviation: 'UM-81' },
|
|
{ name: 'Kingman Reef', abbreviation: 'UM-89' },
|
|
{ name: 'New Hampshire', abbreviation: 'NH' },
|
|
{ name: 'Wake Island', abbreviation: 'UM-79' },
|
|
{ name: 'Kansas', abbreviation: 'KS' },
|
|
{ name: 'Texas', abbreviation: 'TX' },
|
|
{ name: 'Nebraska', abbreviation: 'NE' },
|
|
{ name: 'Vermont', abbreviation: 'VT' },
|
|
{ name: 'Jarvis Island', abbreviation: 'UM-86' },
|
|
{ name: 'Hawaii', abbreviation: 'HI' },
|
|
{ name: 'Guam', abbreviation: 'GU' },
|
|
{ name: 'United States Virgin Islands', abbreviation: 'VI' },
|
|
{ name: 'Utah', abbreviation: 'UT' },
|
|
{ name: 'Oregon', abbreviation: 'OR' },
|
|
{ name: 'California', abbreviation: 'CA' },
|
|
{ name: 'New Jersey', abbreviation: 'NJ' },
|
|
{ name: 'North Dakota', abbreviation: 'ND' },
|
|
{ name: 'Kentucky', abbreviation: 'KY' },
|
|
{ name: 'Minnesota', abbreviation: 'MN' },
|
|
{ name: 'Oklahoma', abbreviation: 'OK' },
|
|
{ name: 'Pennsylvania', abbreviation: 'PA' },
|
|
{ name: 'New Mexico', abbreviation: 'NM' },
|
|
{ name: 'American Samoa', abbreviation: 'AS' },
|
|
{ name: 'Illinois', abbreviation: 'IL' },
|
|
{ name: 'Michigan', abbreviation: 'MI' },
|
|
{ name: 'Virginia', abbreviation: 'VA' },
|
|
{ name: 'Johnston Atoll', abbreviation: 'UM-67' },
|
|
{ name: 'West Virginia', abbreviation: 'WV' },
|
|
{ name: 'Mississippi', abbreviation: 'MS' },
|
|
{ name: 'Northern Mariana Islands', abbreviation: 'MP' },
|
|
{ name: 'United States Minor Outlying Islands', abbreviation: 'UM' },
|
|
{ name: 'Massachusetts', abbreviation: 'MA' },
|
|
{ name: 'Connecticut', abbreviation: 'CT' },
|
|
{ name: 'Florida', abbreviation: 'FL' },
|
|
{ name: 'District of Columbia', abbreviation: 'DC' },
|
|
{ name: 'Midway Atoll', abbreviation: 'UM-71' },
|
|
{ name: 'Navassa Island', abbreviation: 'UM-76' },
|
|
{ name: 'Indiana', abbreviation: 'IN' },
|
|
{ name: 'Wisconsin', abbreviation: 'WI' },
|
|
{ name: 'Wyoming', abbreviation: 'WY' },
|
|
{ name: 'South Carolina', abbreviation: 'SC' },
|
|
{ name: 'Arkansas', abbreviation: 'AR' },
|
|
{ name: 'South Dakota', abbreviation: 'SD' },
|
|
{ name: 'Montana', abbreviation: 'MT' },
|
|
{ name: 'North Carolina', abbreviation: 'NC' },
|
|
{ name: 'Palmyra Atoll', abbreviation: 'UM-95' },
|
|
{ name: 'Puerto Rico', abbreviation: 'PR' },
|
|
{ name: 'Colorado', abbreviation: 'CO' },
|
|
{ name: 'Missouri', abbreviation: 'MO' },
|
|
{ name: 'New York', abbreviation: 'NY' },
|
|
{ name: 'Maine', abbreviation: 'ME' },
|
|
{ name: 'Tennessee', abbreviation: 'TN' },
|
|
{ name: 'Georgia', abbreviation: 'GA' },
|
|
{ name: 'Louisiana', abbreviation: 'LA' },
|
|
{ name: 'Nevada', abbreviation: 'NV' },
|
|
{ name: 'Iowa', abbreviation: 'IA' },
|
|
{ name: 'Idaho', abbreviation: 'ID' },
|
|
{ name: 'Rhode Island', abbreviation: 'RI' },
|
|
{ name: 'Washington', abbreviation: 'WA' },
|
|
{ name: 'Ohio', abbreviation: 'OH' },
|
|
{ name: 'All', abbreviation: 'All' }
|
|
// ... (add the rest of the states)
|
|
]);
|
|
|
|
const sortedStates = computed(() => {
|
|
const sorted = states.value.slice().sort((a, b) => {
|
|
// Move "All" to the beginning
|
|
if (a.name === 'All') return -1;
|
|
if (b.name === 'All') return 1;
|
|
// Sort other states alphabetically
|
|
return a.name.localeCompare(b.name);
|
|
});
|
|
return sorted;
|
|
});
|
|
const getMettings = (Item) => {
|
|
router.push('/admin/provider/meetings/'+Item.id);
|
|
}
|
|
const deleteItemConfirm = async() => {
|
|
console.log('editedIndex.value',editedIndex.value,editedItem.value.id)
|
|
await store.dispatch('providerDelete',{
|
|
id: editedItem.value.id
|
|
})
|
|
providersList.value.splice(editedIndex.value, 1)
|
|
closeDelete()
|
|
}
|
|
const getprovidersList = computed(async () => {
|
|
providersList.value = [];
|
|
console.log('getprovidersFilterList',store.getters.getProvidersList)
|
|
let list = store.getters.getProvidersList
|
|
store.dispatch('updateIsLoading', false)
|
|
providersList.value = list
|
|
return providersList.value
|
|
});
|
|
|
|
const getProviderFilter = async() => {
|
|
store.dispatch('updateIsLoading', true)
|
|
await store.dispatch('providersReport',{
|
|
gender: filter.value.gender.toLowerCase(),
|
|
state: filter.value.state.toLowerCase(),
|
|
availabilityFrom: filter.value.availabilityFrom.toLowerCase(),
|
|
availabilityTo:filter.value.availabilityTo.toLowerCase(),
|
|
|
|
})
|
|
|
|
store.dispatch('updateIsLoading', false)
|
|
}
|
|
|
|
onMounted(async() => {
|
|
store.dispatch('updateIsLoading', true)
|
|
await store.dispatch('providersReportFilter')
|
|
providersFilter.value =store.getters.getProvidersReportFilter
|
|
store.dispatch('updateIsLoading', false)
|
|
|
|
})
|
|
const filter = ref({
|
|
practics_state:'',
|
|
gender: 'All',
|
|
state: 'All',
|
|
specialty:'',
|
|
availabilityFrom:'All',
|
|
availabilityTo: 'All',
|
|
provider_list:'All'
|
|
// plan: '',
|
|
})
|
|
// const onSubcriptionChange = async(newvalue)=> {
|
|
// filter.value.plan = newvalue;
|
|
// console.log("Plan",filter.value.plan );
|
|
// await getPatientFilter();
|
|
|
|
// }
|
|
|
|
const onSpecialty = async(newvalue)=> {
|
|
if(newvalue.length > 3){
|
|
filter.value.specialty = newvalue;
|
|
console.log("onSpecialty",filter.value.specialty);
|
|
}
|
|
|
|
// await getPatientFilter();
|
|
|
|
}
|
|
|
|
const onGenderChange = async(newvalue)=> {
|
|
filter.value.gender = newvalue;
|
|
console.log("gender",filter.value.gender);
|
|
await getProviderFilter();
|
|
|
|
}
|
|
|
|
const onStateChange = async(newvalue)=> {
|
|
filter.value.state = newvalue;
|
|
console.log("state",filter.value.state);
|
|
await getProviderFilter();
|
|
|
|
}
|
|
const onAvailabilityFromChange = async(newvalue)=> {
|
|
filter.value.availabilityFrom = newvalue;
|
|
console.log("frmo",filter.value.availabilityFrom);
|
|
await getProviderFilter();
|
|
|
|
}
|
|
const onAvailabilityToChange = async(newvalue)=> {
|
|
filter.value.availabilityTo = newvalue;
|
|
console.log("to",filter.value.availabilityTo);
|
|
await getProviderFilter();
|
|
|
|
}
|
|
const onProviderListChange = async(newvalue)=> {
|
|
filter.value.provider_list = newvalue;
|
|
console.log("provider_list",filter.value.provider_list);
|
|
// await getProviderFilter();
|
|
|
|
}
|
|
const onPracticsStateChange = async(newvalue)=> {
|
|
filter.value.practics_state = newvalue;
|
|
console.log("state",filter.value.practics_state);
|
|
//await getProviderFilter();
|
|
|
|
}
|
|
const onDateRangeChange = async(newvalue)=> {
|
|
filter.value.date_range = newvalue;
|
|
console.log("Length", newvalue.length);
|
|
}
|
|
|
|
const timeOptions = computed(() => {
|
|
const options = ['All'];
|
|
|
|
// Loop through the hours from 12 to 23 (for 12:00 PM to 11:00 PM)
|
|
for (let hour = 12; hour <= 23; hour++) {
|
|
// Loop through the minutes (0 and 30)
|
|
for (let minute of [0, 30]) {
|
|
// Construct the time string
|
|
const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
|
|
options.push(timeString);
|
|
}
|
|
}
|
|
|
|
// Add the time option for 24:00 (midnight)
|
|
options.push('24:00');
|
|
|
|
return options;
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<v-row>
|
|
<v-col cols="12" md="12" v-if="getprovidersList">
|
|
<VCard title="Providers">
|
|
<VCardText >
|
|
<VRow>
|
|
<!-- <VCol
|
|
cols="12"
|
|
|
|
md="3"
|
|
>
|
|
<VSelect
|
|
v-model="filter.plan"
|
|
label="Subcription"
|
|
placeholder="Subcription"
|
|
density="comfortable"
|
|
:items="subcriptionLists"
|
|
item-title="title"
|
|
item-value="slug"
|
|
@update:model-value="onSubcriptionChange"
|
|
/>
|
|
|
|
|
|
</VCol> -->
|
|
<!-- <VCol
|
|
cols="12"
|
|
md="2"
|
|
>
|
|
<VSelect
|
|
v-model="filter.practics_state"
|
|
label="Practics State"
|
|
density="comfortable"
|
|
:items="sortedStates"
|
|
item-title="name"
|
|
item-value="abbreviation"
|
|
@update:model-value="onPracticsStateChange"
|
|
|
|
/>
|
|
</VCol> -->
|
|
<VCol
|
|
cols="12"
|
|
|
|
md="2"
|
|
>
|
|
|
|
<VSelect
|
|
v-model="filter.gender"
|
|
label="Gender"
|
|
placeholder="Gender"
|
|
density="comfortable"
|
|
:items="['All','Male', 'Female']"
|
|
@update:model-value="onGenderChange"
|
|
|
|
/>
|
|
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
|
|
md="2"
|
|
>
|
|
<VAutocomplete
|
|
v-model="filter.provider_list"
|
|
label="Provider"
|
|
:items="providersFilter.provider_list"
|
|
item-title="name"
|
|
item-value="id"
|
|
placeholder="Select Provider"
|
|
@update:model-value="onProviderListChange"
|
|
/>
|
|
|
|
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
|
|
md="2"
|
|
>
|
|
<VAutocomplete
|
|
v-model="filter.practics_state"
|
|
label="Practice States"
|
|
:items="providersFilter.practicing_states"
|
|
item-title="name"
|
|
item-value="abbreviation"
|
|
placeholder="Select State"
|
|
@update:model-value="onPracticsStateChange"
|
|
/>
|
|
|
|
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
|
|
md="2"
|
|
>
|
|
<VAutocomplete
|
|
v-model="filter.state"
|
|
label="States"
|
|
:items="sortedStates"
|
|
item-title="name"
|
|
item-value="abbreviation"
|
|
placeholder="Select State"
|
|
@update:model-value="onStateChange"
|
|
/>
|
|
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
|
|
md="2"
|
|
>
|
|
<VAutocomplete
|
|
v-model="filter.specialty"
|
|
label="Specialty"
|
|
:items="providersFilter.specialty"
|
|
item-title="specialty"
|
|
item-value="specialty"
|
|
placeholder="Select specialty"
|
|
@update:model-value="onSpecialty"
|
|
/>
|
|
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
md="2"
|
|
>
|
|
<VTextField
|
|
v-model="search"
|
|
label="Search"
|
|
placeholder="Search ..."
|
|
append-inner-icon="ri-search-line"
|
|
single-line
|
|
hide-details
|
|
dense
|
|
outlined
|
|
/>
|
|
</VCol>
|
|
<!-- <VCol
|
|
cols="12"
|
|
md="2"
|
|
>
|
|
<VTextField
|
|
v-model="filter.specialty"
|
|
label="Speciality"
|
|
append-inner-icon="ri-search-line"
|
|
@update:model-value="onSpecialty"
|
|
/>
|
|
</VCol> -->
|
|
<VCol
|
|
cols="12"
|
|
md="3"
|
|
>
|
|
<VSelect @update:model-value="onAvailabilityFromChange" v-model="filter.availabilityFrom" label="Availability From" :items="timeOptions" density="comfortable" />
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
md="3"
|
|
>
|
|
<VSelect @update:model-value="onAvailabilityToChange" v-model="filter.availabilityTo" label="Availability To" :items="timeOptions" density="comfortable"
|
|
/>
|
|
|
|
</VCol>
|
|
|
|
</VRow>
|
|
</VCardText>
|
|
<VDataTable
|
|
:headers="headers"
|
|
:items="providersList"
|
|
:search="search"
|
|
:items-per-page="5"
|
|
class="text-no-wrap"
|
|
style="display: none;"
|
|
>
|
|
<!-- full name -->
|
|
<template #item.name="{ item }">
|
|
<div class="d-flex align-center">
|
|
<!-- avatar -->
|
|
<VAvatar
|
|
size="32"
|
|
:color="item.avatar ? '' : 'primary'"
|
|
:class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
|
|
:variant="!item.avatar ? 'tonal' : undefined"
|
|
>
|
|
<VImg
|
|
v-if="item.avatar"
|
|
:src="item.avatar"
|
|
/>
|
|
<span
|
|
v-else
|
|
class="text-sm"
|
|
>{{ avatarText(item.name) }}</span>
|
|
</VAvatar>
|
|
|
|
<div class="d-flex flex-column ms-3">
|
|
<router-link
|
|
:to="{ name: 'admin-provider-profile', params: { id: item.id } }"
|
|
class=" highlighted"
|
|
>
|
|
<span class="d-block font-weight-medium text-truncate">{{ item.name }}</span>
|
|
</router-link>
|
|
<small>{{ item.post }}</small>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- status -->
|
|
<template #item.status="{ item }">
|
|
<VChip
|
|
:color="resolveStatusVariant(item.status).color"
|
|
density="comfortable"
|
|
>
|
|
{{ resolveStatusVariant(item.status).text }}
|
|
</VChip>
|
|
</template>
|
|
|
|
<!-- Actions -->
|
|
<template #item.actions="{ item }">
|
|
<div class="d-flex gap-1">
|
|
<IconBtn
|
|
size="small"
|
|
@click="editItem(item)"
|
|
style="display: none;"
|
|
>
|
|
<VIcon icon="ri-pencil-line" />
|
|
</IconBtn>
|
|
<IconBtn
|
|
size="small"
|
|
@click="deleteItem(item)"
|
|
style="display: none;"
|
|
>
|
|
<VIcon icon="ri-delete-bin-line" />
|
|
</IconBtn>
|
|
<IconBtn
|
|
size="small"
|
|
@click="getMettings(item)"
|
|
>
|
|
<VIcon icon="ri-time-line" />
|
|
</IconBtn>
|
|
</div>
|
|
</template>
|
|
</VDataTable>
|
|
</VCard>
|
|
</v-col>
|
|
</v-row>
|
|
<!-- 👉 Edit Dialog -->
|
|
<VDialog
|
|
v-model="editDialog"
|
|
max-width="600px"
|
|
>
|
|
<VForm ref="refVForm" >
|
|
<VCard>
|
|
<VCardTitle>
|
|
<span class="headline">Edit Provider</span>
|
|
</VCardTitle>
|
|
|
|
<VCardText>
|
|
<VContainer >
|
|
|
|
<VRow>
|
|
<!-- fullName -->
|
|
<VCol cols="12" md="6">
|
|
<VTextField
|
|
v-model="editedItem.first_name"
|
|
label="First Name"
|
|
:rules="[requiredFirstName]"
|
|
/>
|
|
</VCol>
|
|
<VCol cols="12" md="6">
|
|
<VTextField
|
|
v-model="editedItem.last_name"
|
|
label="Last Name"
|
|
:rules="[requiredLastName]"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- email -->
|
|
<VCol cols="12" sm="6" md="12">
|
|
<VTextField
|
|
v-model="editedItem.email"
|
|
label="Email"
|
|
:rules="[requiredEmail, emailValidator]"
|
|
/>
|
|
</VCol>
|
|
|
|
|
|
<!-- <VCol cols="12" sm="6" md="12">
|
|
<VTextField
|
|
v-model="editedItem.dob"
|
|
label="Date Of Birth"
|
|
/>
|
|
</VCol> -->
|
|
<VCol cols="12" sm="6" md="12">
|
|
<VTextField v-model="editedItem.phone_no" label="Phone Number" pattern="^\(\d{3}\) \d{3}-\d{4}$"
|
|
:rules="[requiredPhone, validUSAPhone]" placeholder="i.e. (000) 000-0000"
|
|
@input="formatPhoneNumber" max="14" density="comfortable" />
|
|
</VCol>
|
|
|
|
|
|
|
|
|
|
<!-- status -->
|
|
<VCol
|
|
cols="12"
|
|
|
|
md="12"
|
|
>
|
|
<VSelect
|
|
v-model="editedItem.status"
|
|
:items="selectedOptions"
|
|
item-title="text"
|
|
item-value="value"
|
|
label="Status"
|
|
variant="outlined"
|
|
/>
|
|
</VCol>
|
|
</VRow>
|
|
</VContainer>
|
|
</VCardText>
|
|
|
|
<VCardActions>
|
|
<VSpacer />
|
|
|
|
<VBtn
|
|
color="error"
|
|
variant="outlined"
|
|
@click="close"
|
|
>
|
|
Cancel
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="success"
|
|
variant="elevated"
|
|
@click="save"
|
|
>
|
|
Save
|
|
</VBtn>
|
|
|
|
</VCardActions>
|
|
</VCard>
|
|
</VForm>
|
|
</VDialog>
|
|
|
|
<!-- 👉 Delete Dialog -->
|
|
<VDialog
|
|
v-model="deleteDialog"
|
|
max-width="500px"
|
|
>
|
|
<VCard>
|
|
<VCardTitle>
|
|
Are you sure you want to delete this item?
|
|
</VCardTitle>
|
|
|
|
<VCardActions>
|
|
<VSpacer />
|
|
|
|
<VBtn
|
|
color="error"
|
|
variant="outlined"
|
|
@click="closeDelete"
|
|
>
|
|
Cancel
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="success"
|
|
variant="elevated"
|
|
@click="deleteItemConfirm"
|
|
>
|
|
OK
|
|
</VBtn>
|
|
|
|
<VSpacer />
|
|
</VCardActions>
|
|
</VCard>
|
|
</VDialog>
|
|
</template>
|
|
<style scoped>
|
|
.highlighted {
|
|
/* Add your desired highlighting styles here */
|
|
font-weight: bold;
|
|
color: #a169ff; /* or any other color you prefer */
|
|
}
|
|
</style>
|