initial commit
This commit is contained in:
Inshal
407
resources/js/pages/subcriptions/AddSubcription.vue
Normal file
407
resources/js/pages/subcriptions/AddSubcription.vue
Normal file
@@ -0,0 +1,407 @@
|
||||
<script setup>
|
||||
import { PerfectScrollbar } from 'vue3-perfect-scrollbar';
|
||||
import { VForm } from 'vuetify/components/VForm';
|
||||
import { useStore } from 'vuex';
|
||||
const store = useStore()
|
||||
const props = defineProps({
|
||||
isDrawerOpen: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const isAddCustomerDrawerOpen = ref(false)
|
||||
const isEditCustomerDrawerOpen = ref(false)
|
||||
|
||||
const editDialog = ref(false)
|
||||
const addDialog = ref(false)
|
||||
const deleteDialog = ref(false)
|
||||
const search = ref('')
|
||||
const refVForm = ref(null)
|
||||
const refVFormAdd = ref(null)
|
||||
const selectDropdown = ref(false)
|
||||
const selectdataList = ref(null)
|
||||
|
||||
const requiredImageValidator = (value) => !!value || 'Please select an image file.'
|
||||
const requiredExcelValidator = (value) => !!value || 'Please select an Excel file.'
|
||||
const imageFile = ref(null)
|
||||
const excelFile = ref(null)
|
||||
const editedItem = ref()
|
||||
const editedIndex = ref(-1)
|
||||
const medicineList = ref([])
|
||||
const isLoading = ref(false)
|
||||
const currencySign = ref('$');
|
||||
const imageBase64 = ref(null)
|
||||
const subscriptionStartDate = ref(null);
|
||||
const subscriptionRenewalDate = ref(null)
|
||||
const excelBase64 = ref(null)
|
||||
const selectedOptions = [
|
||||
{
|
||||
text: 'Current',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: 'Professional',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: 'Rejected',
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
text: 'Resigned',
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
text: 'Applied',
|
||||
value: 5,
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
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 = medicineList.value.indexOf(item)
|
||||
editedItem.value = { ...item }
|
||||
editDialog.value = true
|
||||
}
|
||||
const addItem = item => {
|
||||
addDialog.value = true
|
||||
}
|
||||
const deleteItem = item => {
|
||||
editedIndex.value = medicineList.value.indexOf(item)
|
||||
editedItem.value = { ...item }
|
||||
deleteDialog.value = true
|
||||
}
|
||||
|
||||
const selectfile = (data) => {
|
||||
if (data == 'dropdown') {
|
||||
selectDropdown.value = true
|
||||
} else {
|
||||
selectDropdown.value = false
|
||||
}
|
||||
|
||||
}
|
||||
const close = () => {
|
||||
editDialog.value = false
|
||||
editedIndex.value = -1
|
||||
editedItem.value = { ...defaultItem.value }
|
||||
}
|
||||
const closeAdd = () => {
|
||||
addDialog.value = false
|
||||
}
|
||||
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) {
|
||||
try {
|
||||
await store.dispatch('addNewSubcription',{
|
||||
patient_id: filter.value.patient,
|
||||
cart_id: filter.value.order,
|
||||
item_id: filter.value.item,
|
||||
subscription_start_date: subscriptionStartDate.value,
|
||||
subscription_renewal_date: subscriptionRenewalDate.value,
|
||||
subscription_status: filter.value.subcription_status,
|
||||
status:filter.value.status
|
||||
})
|
||||
|
||||
|
||||
if (!store.getters.getErrorMsg) {
|
||||
emit('addedMessage', 'success')
|
||||
filter.value.patient = null,
|
||||
filter.value.order = null,
|
||||
filter.value.item = null,
|
||||
subscriptionStartDate.value = null,
|
||||
subscriptionRenewalDate.value = null,
|
||||
filter.value.subcription_status = null,
|
||||
filter.value.status = null
|
||||
}
|
||||
emit('update:isDrawerOpen', false)
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
addDialog.value = false
|
||||
isLoading.value = false;
|
||||
|
||||
closeAdd()
|
||||
}
|
||||
}
|
||||
const sortedStates = computed(() => {
|
||||
return states.value.slice().sort((a, b) => {
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
});
|
||||
const isPasswordVisible = ref(false)
|
||||
const emit = defineEmits(['update:isDrawerOpen','addedMessage'])
|
||||
|
||||
const handleDrawerModelValueUpdate = val => {
|
||||
emit('update:isDrawerOpen', val)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const resetForm = () => {
|
||||
refVForm.value?.reset()
|
||||
emit('update:isDrawerOpen', false)
|
||||
}
|
||||
|
||||
const filter = ref({
|
||||
patient: '',
|
||||
order:'',
|
||||
item:'',
|
||||
status:'',
|
||||
subcription_status:''
|
||||
});
|
||||
|
||||
// Change this to a regular function that returns a computed ref
|
||||
|
||||
const useSortedPatient = () => {
|
||||
const isLoading = ref(false);
|
||||
const error = ref(null);
|
||||
const patientData = ref([]);
|
||||
const sortedPatient = computed(() => {
|
||||
// const allOption = { id: 'all', patient_name: 'All' };
|
||||
const sortedPatientData = patientData.value.slice().sort((a, b) => {
|
||||
return a.patient_name.localeCompare(b.patient_name);
|
||||
});
|
||||
return [...sortedPatientData];
|
||||
});
|
||||
|
||||
const fetchPatientData = async () => {
|
||||
isLoading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
await store.dispatch('getAnalyticOrderFilters');
|
||||
patientData.value = store.getters.getOrderFilters || [];
|
||||
console.log('Fetched patient data:', patientData.value);
|
||||
} catch (e) {
|
||||
console.error('Error fetching patient data:', e);
|
||||
error.value = 'Failed to fetch patient data';
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(fetchPatientData);
|
||||
|
||||
return { sortedPatient, isLoading, error, fetchPatientData };
|
||||
};
|
||||
const orderData = ref([]);
|
||||
const sortedOrder = computed(() => {
|
||||
console.log('sortedOrder',orderData.value);
|
||||
return orderData.value ? orderData.value: [] ;
|
||||
});
|
||||
const useSortedOrder = (patientId) => {
|
||||
|
||||
const isLoading = ref(false);
|
||||
const error = ref(null);
|
||||
|
||||
|
||||
|
||||
const fetchOrderData = async () => {
|
||||
console.log('fetchOrderData');
|
||||
isLoading.value = true;
|
||||
error.value = null;
|
||||
filter.value.order = '';
|
||||
filter.value.item = '';
|
||||
try {
|
||||
await store.dispatch('orderListByPatient',{
|
||||
patient_id: patientId,
|
||||
});
|
||||
orderData.value = store.getters.getOrderList.order_data;
|
||||
console.log('Fetched order data:', orderData.value);
|
||||
} catch (e) {
|
||||
console.error('Error fetching order data:', e);
|
||||
error.value = 'Failed to fetch order data';
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
fetchOrderData();
|
||||
};
|
||||
const itemData = ref([]);
|
||||
const sortedItem = computed(() => {
|
||||
return itemData.value ? itemData.value: [] ;
|
||||
});
|
||||
const useSortedItem = (order_number) => {
|
||||
const isLoading = ref(false);
|
||||
const error = ref(null);
|
||||
|
||||
|
||||
|
||||
const fetchItemData = async () => {
|
||||
isLoading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
await store.dispatch('getItemListByOrder', {
|
||||
order_id:order_number,
|
||||
});
|
||||
itemData.value = store.getters.getItemsListByOrder.order_item;
|
||||
console.log('Fetched Item data:', itemData.value);
|
||||
} catch (e) {
|
||||
console.error('Error Item patient data:', e);
|
||||
error.value = 'Failed to fetch Item data';
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
fetchItemData();
|
||||
|
||||
|
||||
};
|
||||
|
||||
const onPatientChange = () => {
|
||||
const patientId = filter.value.patient;
|
||||
console.log('data',patientId);
|
||||
useSortedOrder(patientId);
|
||||
};
|
||||
const onOrderChange = () => {
|
||||
const order_number = filter.value.order;
|
||||
|
||||
console.log('data',order_number);
|
||||
useSortedItem(order_number);
|
||||
};
|
||||
|
||||
const { sortedPatient, error, fetchPatientData } = useSortedPatient();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VNavigationDrawer
|
||||
:model-value="props.isDrawerOpen"
|
||||
temporary
|
||||
location="end"
|
||||
width="800"
|
||||
@update:model-value="handleDrawerModelValueUpdate"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<AppDrawerHeaderSection
|
||||
title="Add Subcription"
|
||||
@cancel="$emit('update:isDrawerOpen', false)"
|
||||
/>
|
||||
<VDivider />
|
||||
|
||||
<VCard flat>
|
||||
<PerfectScrollbar
|
||||
:options="{ wheelPropagation: false }"
|
||||
class="h-100"
|
||||
>
|
||||
<VCardText style="block-size: calc(100vh - 5rem);" >
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent=""
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VAutocomplete v-model="filter.patient" label="Patient" placeholder="Patient" density="comfortable"
|
||||
:items="sortedPatient" item-title="patient_name" :rules="[requiredValidator]" item-value="id" :loading="isLoading" :error-messages="error"
|
||||
@update:model-value="onPatientChange" />
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VAutocomplete v-model="filter.order" label="Orders Number" placeholder="Patient" density="comfortable"
|
||||
:items="sortedOrder" item-title="id" :rules="[requiredValidator]" item-value="id" :loading="isLoading" :error-messages="error"
|
||||
@update:model-value="onOrderChange" />
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VAutocomplete v-model="filter.item" label="Order Items" placeholder="Patient" density="comfortable"
|
||||
:items="sortedItem" item-title="product_name" item-value="id" :loading="isLoading" :error-messages="error"
|
||||
@update:model-value="onItemChange" :rules="[requiredValidator]" />
|
||||
</VCol>
|
||||
|
||||
|
||||
<VCol cols="12" md="6">
|
||||
<AppDateTimePicker
|
||||
v-model="subscriptionStartDate"
|
||||
label="Subscription Start Date"
|
||||
placeholder="Subscription Start Date"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
<AppDateTimePicker
|
||||
v-model="subscriptionRenewalDate"
|
||||
label="Subscription End Date"
|
||||
placeholder="Subscription End Date"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
<VSelect v-model="filter.subcription_status" label="Subcription Status" density="comfortable"
|
||||
:items="['Pending', 'Approved']" item-title="name" :rules="[requiredValidator]" item-value="name" :loading="isLoading"
|
||||
/>
|
||||
</VCol>
|
||||
<!-- <VCol cols="12" md="6">
|
||||
<VSelect v-model="filter.status" label="Status" density="comfortable"
|
||||
:items="['Active', 'InActive']" item-title="name" :rules="[requiredValidator]" item-value="name" :loading="isLoading"
|
||||
/>
|
||||
</VCol> -->
|
||||
<VCol cols="12">
|
||||
<div class="d-flex justify-start">
|
||||
<VBtn
|
||||
type="submit"
|
||||
color="primary"
|
||||
class="me-4"
|
||||
@click="save"
|
||||
>
|
||||
Save
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="error"
|
||||
variant="outlined"
|
||||
@click="resetForm"
|
||||
>
|
||||
Discard
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</PerfectScrollbar>
|
||||
</VCard>
|
||||
</VNavigationDrawer>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.v-navigation-drawer__content {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
</style>
|
||||
430
resources/js/pages/subcriptions/EditSubcription.vue
Normal file
430
resources/js/pages/subcriptions/EditSubcription.vue
Normal file
@@ -0,0 +1,430 @@
|
||||
<script setup>
|
||||
import { PerfectScrollbar } from 'vue3-perfect-scrollbar';
|
||||
import { VForm } from 'vuetify/components/VForm';
|
||||
import { useStore } from 'vuex';
|
||||
const store = useStore()
|
||||
const props = defineProps({
|
||||
isDrawerOpen: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
userData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
}
|
||||
})
|
||||
const isAddCustomerDrawerOpen = ref(false)
|
||||
const isEditCustomerDrawerOpen = ref(false)
|
||||
|
||||
const editDialog = ref(false)
|
||||
const addDialog = ref(false)
|
||||
const deleteDialog = ref(false)
|
||||
const search = ref('')
|
||||
const refVForm = ref(null)
|
||||
const refVFormAdd = ref(null)
|
||||
const selectDropdown = ref(false)
|
||||
const selectdataList = ref(null)
|
||||
const defaultItem = ref({
|
||||
id: -1,
|
||||
title: '',
|
||||
slug: '',
|
||||
list_one_title: '',
|
||||
list_sub_title: '',
|
||||
list_two_title: '',
|
||||
price: '',
|
||||
currency:""
|
||||
})
|
||||
const itemId = ref()
|
||||
const requiredImageValidator = (value) => !!value || 'Please select an image file.'
|
||||
const requiredExcelValidator = (value) => !!value || 'Please select an Excel file.'
|
||||
const imageFile = ref(null)
|
||||
const excelFile = ref(null)
|
||||
const editedItem = ref(defaultItem.value)
|
||||
const editedIndex = ref(-1)
|
||||
const medicineList = ref([])
|
||||
const isLoading = ref(false)
|
||||
const currencySign = ref('$');
|
||||
const imageBase64 = ref(null)
|
||||
const excelBase64 = ref(null)
|
||||
const currencies = ref([
|
||||
{ code: 'USD', name: 'US Dollar', sign: '$' },
|
||||
{ code: 'EUR', name: 'Euro', sign: '€' },
|
||||
{ code: 'GBP', name: 'British Pound', sign: '£' },
|
||||
{ code: 'JPY', name: 'Japanese Yen', sign: '¥' },
|
||||
])
|
||||
const setCurrency = (code, sign) => {
|
||||
currencySign.value = sign;
|
||||
// You can perform additional operations with the selected currency code if needed
|
||||
};
|
||||
// status options
|
||||
const selectedOptions = [
|
||||
{
|
||||
text: 'Current',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: 'Professional',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: 'Rejected',
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
text: 'Resigned',
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
text: 'Applied',
|
||||
value: 5,
|
||||
},
|
||||
]
|
||||
|
||||
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 = medicineList.value.indexOf(item)
|
||||
editedItem.value = { ...item }
|
||||
editDialog.value = true
|
||||
}
|
||||
const addItem = item => {
|
||||
addDialog.value = true
|
||||
}
|
||||
const deleteItem = item => {
|
||||
editedIndex.value = medicineList.value.indexOf(item)
|
||||
editedItem.value = { ...item }
|
||||
deleteDialog.value = true
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
editDialog.value = false
|
||||
editedIndex.value = -1
|
||||
editedItem.value = { ...defaultItem.value }
|
||||
}
|
||||
const closeAdd = () => {
|
||||
addDialog.value = false
|
||||
}
|
||||
const closeDelete = () => {
|
||||
deleteDialog.value = false
|
||||
editedIndex.value = -1
|
||||
editedItem.value = { ...defaultItem.value }
|
||||
}
|
||||
|
||||
|
||||
const subscriptionStartDate = ref();
|
||||
const subscriptionRenewalDate = ref();
|
||||
const getSingleProduct = computed(async () => {
|
||||
console.log("helloData",props.userData.data);
|
||||
let editData = props.userData.data;
|
||||
// console.log(editedItem.value.title)
|
||||
itemId.value=editData.id
|
||||
// editedItem.value.id= props.userData.id
|
||||
filter.value.order = editData.cart_id
|
||||
filter.value.item = editData.item_id
|
||||
filter.value.patient = editData.patient_id
|
||||
subscriptionRenewalDate.value = editData.subscription_renewal_date
|
||||
subscriptionStartDate.value = editData.subscription_start_date
|
||||
filter.value.subscription_status = editData.subscription_status
|
||||
});
|
||||
const update = async () => {
|
||||
const { valid } = await refVForm.value.validate()
|
||||
console.log(valid)
|
||||
if (valid) {
|
||||
try {
|
||||
await store.dispatch('updateSubcription', {
|
||||
id:itemId.value,
|
||||
subscription_start_date: subscriptionStartDate.value,
|
||||
subscription_renewal_date: subscriptionRenewalDate.value,
|
||||
subscription_status: filter.value.subscription_status,
|
||||
cart_id: filter.value.order,
|
||||
item_id: filter.value.item,
|
||||
patient_id: filter.value.patient,
|
||||
})
|
||||
if (!store.getters.getErrorMsg) {
|
||||
emit('addedMessage', 'success')
|
||||
subscriptionRenewalDate.value= null
|
||||
subscriptionStartDate.value=null
|
||||
filter.value.subscription_status=null
|
||||
filter.value.order=null
|
||||
filter.value.item=null
|
||||
filter.value.patient=null
|
||||
emit('update:isDrawerOpen', false)
|
||||
}
|
||||
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
|
||||
|
||||
close()
|
||||
}
|
||||
}
|
||||
|
||||
const emit = defineEmits(['update:isDrawerOpen','addedMessage'])
|
||||
|
||||
const handleDrawerModelValueUpdate = val => {
|
||||
emit('update:isDrawerOpen', val)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const resetForm = () => {
|
||||
refVForm.value?.reset()
|
||||
emit('update:isDrawerOpen', false)
|
||||
}
|
||||
|
||||
|
||||
const filter = ref({
|
||||
patient: '',
|
||||
order:'',
|
||||
item:'',
|
||||
status:'',
|
||||
subcription_status:''
|
||||
});
|
||||
|
||||
const useSortedPatient = () => {
|
||||
const isLoading = ref(false);
|
||||
const error = ref(null);
|
||||
const patientData = ref([]);
|
||||
const sortedPatient = computed(() => {
|
||||
// const allOption = { id: 'all', patient_name: 'All' };
|
||||
const sortedPatientData = patientData.value.slice().sort((a, b) => {
|
||||
return a.patient_name.localeCompare(b.patient_name);
|
||||
});
|
||||
return [...sortedPatientData];
|
||||
});
|
||||
|
||||
const fetchPatientData = async () => {
|
||||
isLoading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
await store.dispatch('getAnalyticOrderFilters');
|
||||
patientData.value = store.getters.getOrderFilters || [];
|
||||
console.log('Fetched patient data:', patientData.value);
|
||||
} catch (e) {
|
||||
console.error('Error fetching patient data:', e);
|
||||
error.value = 'Failed to fetch patient data';
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(fetchPatientData);
|
||||
|
||||
return { sortedPatient, isLoading, error, fetchPatientData };
|
||||
};
|
||||
const orderData = ref([]);
|
||||
const sortedOrder = computed(() => {
|
||||
console.log('sortedOrder',orderData.value);
|
||||
return orderData.value ? orderData.value: [] ;
|
||||
});
|
||||
const useSortedOrder = (patientId) => {
|
||||
|
||||
const isLoading = ref(false);
|
||||
const error = ref(null);
|
||||
|
||||
|
||||
|
||||
const fetchOrderData = async () => {
|
||||
console.log('fetchOrderData');
|
||||
isLoading.value = true;
|
||||
error.value = null;
|
||||
filter.value.order = '';
|
||||
filter.value.item = '';
|
||||
try {
|
||||
await store.dispatch('orderListByPatient',{
|
||||
patient_id: patientId,
|
||||
});
|
||||
orderData.value = store.getters.getOrderList.order_data;
|
||||
console.log('Fetched order data:', orderData.value);
|
||||
} catch (e) {
|
||||
console.error('Error fetching order data:', e);
|
||||
error.value = 'Failed to fetch order data';
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
fetchOrderData();
|
||||
};
|
||||
const itemData = ref([]);
|
||||
const sortedItem = computed(() => {
|
||||
return itemData.value ? itemData.value: [] ;
|
||||
});
|
||||
const useSortedItem = (order_number) => {
|
||||
const isLoading = ref(false);
|
||||
const error = ref(null);
|
||||
|
||||
|
||||
|
||||
const fetchItemData = async () => {
|
||||
isLoading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
await store.dispatch('getItemListByOrder', {
|
||||
order_id:order_number,
|
||||
});
|
||||
itemData.value = store.getters.getItemsListByOrder.order_item;
|
||||
console.log('Fetched Item data:', itemData.value);
|
||||
} catch (e) {
|
||||
console.error('Error Item patient data:', e);
|
||||
error.value = 'Failed to fetch Item data';
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
fetchItemData();
|
||||
|
||||
|
||||
};
|
||||
|
||||
const onPatientChange = () => {
|
||||
const patientId = filter.value.patient;
|
||||
console.log('data',patientId);
|
||||
useSortedOrder(patientId);
|
||||
};
|
||||
const onOrderChange = () => {
|
||||
const order_number = filter.value.order;
|
||||
|
||||
console.log('data',order_number);
|
||||
useSortedItem(order_number);
|
||||
};
|
||||
|
||||
const { sortedPatient, error, fetchPatientData } = useSortedPatient();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VNavigationDrawer
|
||||
:model-value="props.isDrawerOpen"
|
||||
temporary
|
||||
location="end"
|
||||
width="800"
|
||||
@update:model-value="handleDrawerModelValueUpdate"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<AppDrawerHeaderSection
|
||||
title="Edit Subcription"
|
||||
@cancel="$emit('update:isDrawerOpen', false)"
|
||||
/>
|
||||
<VDivider />
|
||||
|
||||
<VCard flat>
|
||||
<PerfectScrollbar
|
||||
:options="{ wheelPropagation: false }"
|
||||
class="h-100"
|
||||
>
|
||||
<VCardText style="block-size: calc(100vh - 5rem);" v-if="getSingleProduct">
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent=""
|
||||
>
|
||||
|
||||
|
||||
|
||||
<VRow>
|
||||
<VCol cols="12" md="12">
|
||||
<VAutocomplete v-model="filter.patient" label="Patient" placeholder="Patient" density="comfortable"
|
||||
:items="sortedPatient" item-title="patient_name" :rules="[requiredValidator]" item-value="id" :loading="isLoading" :error-messages="error"
|
||||
@update:model-value="onPatientChange" />
|
||||
</VCol>
|
||||
<VCol cols="12" md="12">
|
||||
<VAutocomplete v-model="filter.order" label="Orders Number" placeholder="Patient" density="comfortable"
|
||||
:items="sortedOrder" item-title="id" :rules="[requiredValidator]" item-value="id" :loading="isLoading" :error-messages="error"
|
||||
@update:model-value="onOrderChange" />
|
||||
</VCol>
|
||||
<VCol cols="12" md="12">
|
||||
<VAutocomplete v-model="filter.item" label="Order Items" placeholder="Patient" density="comfortable"
|
||||
:items="sortedItem" item-title="product_name" item-value="id" :loading="isLoading" :error-messages="error"
|
||||
@update:model-value="onItemChange" :rules="[requiredValidator]" />
|
||||
</VCol>
|
||||
|
||||
|
||||
<VCol cols="12" md="6">
|
||||
<AppDateTimePicker
|
||||
v-model="subscriptionStartDate"
|
||||
label="Subscription Start Date"
|
||||
placeholder="Subscription Start Date"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
<AppDateTimePicker
|
||||
v-model="subscriptionRenewalDate"
|
||||
label="Subscription End Date"
|
||||
placeholder="Subscription End Date"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12" md="6">
|
||||
<VSelect v-model="filter.subscription_status" label="Subcription Status" density="comfortable"
|
||||
:items="['Pending', 'Approved']" item-title="name" :rules="[requiredValidator]" item-value="name" :loading="isLoading"
|
||||
/>
|
||||
</VCol>
|
||||
<!-- <VCol cols="12" md="6">
|
||||
<VSelect v-model="filter.status" label="Status" density="comfortable"
|
||||
:items="['Active', 'InActive']" item-title="name" :rules="[requiredValidator]" item-value="name" :loading="isLoading"
|
||||
/>
|
||||
</VCol> -->
|
||||
<VCol cols="12">
|
||||
<div class="d-flex justify-start">
|
||||
<VBtn
|
||||
type="submit"
|
||||
color="primary"
|
||||
class="me-4"
|
||||
@click="update"
|
||||
>
|
||||
Save
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="error"
|
||||
variant="outlined"
|
||||
@click="resetForm"
|
||||
>
|
||||
Discard
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</PerfectScrollbar>
|
||||
</VCard>
|
||||
</VNavigationDrawer>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.v-navigation-drawer__content {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
</style>
|
||||
941
resources/js/pages/subcriptions/subcriptions.vue
Normal file
941
resources/js/pages/subcriptions/subcriptions.vue
Normal file
@@ -0,0 +1,941 @@
|
||||
<script setup>
|
||||
import API from '@/api';
|
||||
import { ADMIN_SUBCRIPTIONS_LIST_API } from '@/constants';
|
||||
import AddSubcription from '@/pages/subcriptions/AddSubcription.vue';
|
||||
import EditSubcription from '@/pages/subcriptions/EditSubcription.vue';
|
||||
import debounce from 'lodash.debounce';
|
||||
import { useStore } from 'vuex';
|
||||
const isAddCustomerDrawerOpen = ref(false)
|
||||
const isEditCustomerDrawerOpen = ref(false)
|
||||
const store = useStore()
|
||||
const editDialog = ref(false)
|
||||
const addDialog = ref(false)
|
||||
const deleteDialog = ref(false)
|
||||
const search = ref('')
|
||||
const refVForm = ref(null)
|
||||
const refVFormAdd = ref(null)
|
||||
const selectDropdown = ref(false)
|
||||
const selectdataList = ref(null)
|
||||
const defaultItem = ref({
|
||||
id: -1,
|
||||
title: '',
|
||||
slug: '',
|
||||
list_one_title: '',
|
||||
list_sub_title: '',
|
||||
list_two_title: '',
|
||||
price: '',
|
||||
currency:""
|
||||
})
|
||||
const requiredImageValidator = (value) => !!value || 'Please select an image file.'
|
||||
const requiredExcelValidator = (value) => !!value || 'Please select an Excel file.'
|
||||
const imageFile = ref(null)
|
||||
const excelFile = ref(null)
|
||||
const editedItem = ref(defaultItem.value)
|
||||
const editedIndex = ref(-1)
|
||||
const medicineList = ref([])
|
||||
const isLoading = ref(false)
|
||||
const currencySign = ref('$');
|
||||
const imageBase64 = ref(null)
|
||||
const excelBase64 = ref(null)
|
||||
const currencies = ref([
|
||||
{ code: 'USD', name: 'US Dollar', sign: '$' },
|
||||
{ code: 'EUR', name: 'Euro', sign: '€' },
|
||||
{ code: 'GBP', name: 'British Pound', sign: '£' },
|
||||
{ code: 'JPY', name: 'Japanese Yen', sign: '¥' },
|
||||
])
|
||||
const setCurrency = (code, sign) => {
|
||||
currencySign.value = sign;
|
||||
// You can perform additional operations with the selected currency code if needed
|
||||
};
|
||||
// status options
|
||||
const selectedOptions = [
|
||||
{
|
||||
text: 'Current',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: 'Professional',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: 'Rejected',
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
text: 'Resigned',
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
text: 'Applied',
|
||||
value: 5,
|
||||
},
|
||||
]
|
||||
|
||||
// headers
|
||||
const headers = [
|
||||
{
|
||||
title: '#Order',
|
||||
key: 'cart_id',
|
||||
},
|
||||
{
|
||||
title: 'Patient',
|
||||
key: 'first_name',
|
||||
},
|
||||
{
|
||||
title: 'Product',
|
||||
key: 'product_title',
|
||||
},
|
||||
{
|
||||
title: 'Product Price',
|
||||
key: 'price',
|
||||
},
|
||||
{
|
||||
title: 'Subcription Date',
|
||||
key: 'subscription_start_date',
|
||||
},
|
||||
{
|
||||
title: 'Subcription Renewal',
|
||||
key: 'subscription_renewal_date',
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
key: 'subscription_status',
|
||||
},
|
||||
// {
|
||||
// title: 'Short Detail',
|
||||
// key: 'list_one_title',
|
||||
// },
|
||||
// {
|
||||
// title: 'Short Description',
|
||||
// key: 'list_sub_title',
|
||||
// },
|
||||
|
||||
{
|
||||
title: 'ACTIONS',
|
||||
key: 'actions',
|
||||
searchable:false,
|
||||
orderable:false
|
||||
},
|
||||
]
|
||||
|
||||
const resolveStatusVariant = status => {
|
||||
console.log('>>>>>>>>>', status);
|
||||
if (status === 'Pending')
|
||||
return {
|
||||
color: 'primary',
|
||||
text: 'Pending',
|
||||
}
|
||||
// if (status === 'delivered')
|
||||
// return {
|
||||
// color: 'primary',
|
||||
// text: 'Current',
|
||||
// }
|
||||
else if (status === 'delivered')
|
||||
return {
|
||||
color: 'success',
|
||||
text: 'Delivered',
|
||||
}
|
||||
// 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 = async (item) => {
|
||||
isEditCustomerDrawerOpen.value = true
|
||||
|
||||
await store.dispatch('subcriptionGetByID', {
|
||||
id: item.id,
|
||||
})
|
||||
|
||||
editedItem.value = store.getters.getSingleProduct
|
||||
console.log("hello",store.getters.getSingleProduct)
|
||||
//editDialog.value = true
|
||||
}
|
||||
const addItem = item => {
|
||||
addDialog.value = true
|
||||
}
|
||||
const deleteItem = item => {
|
||||
editedIndex.value = medicineList.value.indexOf(item)
|
||||
editedItem.value = { ...item }
|
||||
deleteDialog.value = true
|
||||
}
|
||||
|
||||
const selectfile = (data) => {
|
||||
if (data == 'dropdown') {
|
||||
selectDropdown.value = true
|
||||
} else {
|
||||
selectDropdown.value = false
|
||||
}
|
||||
|
||||
}
|
||||
const close = () => {
|
||||
editDialog.value = false
|
||||
editedIndex.value = -1
|
||||
editedItem.value = { ...defaultItem.value }
|
||||
}
|
||||
const closeAdd = () => {
|
||||
addDialog.value = false
|
||||
}
|
||||
const closeDelete = () => {
|
||||
deleteDialog.value = false
|
||||
editedIndex.value = -1
|
||||
editedItem.value = { ...defaultItem.value }
|
||||
}
|
||||
// const getmedicineList = computed(async () => {
|
||||
// store.dispatch('updateIsLoading', true)
|
||||
// await store.dispatch('medicineList')
|
||||
// console.log('medicineList',store.getters.getMedcineList)
|
||||
// let list = store.getters.getMedcineList
|
||||
// await store.dispatch('questioneriesListExcel')
|
||||
// store.dispatch('updateIsLoading', false)
|
||||
// let getQuestioneriesList = store.getters.getQuestioneriesList
|
||||
// medicineList.value = list
|
||||
// return medicineList.value
|
||||
// });
|
||||
const convertImageToBase64 = (event) => {
|
||||
const file = event.target.files[0]
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(file)
|
||||
reader.onload = () => {
|
||||
imageBase64.value = reader.result.split(',')[1]
|
||||
}
|
||||
}
|
||||
|
||||
const convertExcelToBase64 = (event) => {
|
||||
const file = event.target.files[0]
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(file)
|
||||
reader.onload = () => {
|
||||
excelBase64.value = reader.result.split(',')[1]
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(dateTime) {
|
||||
if (!dateTime) return '';
|
||||
|
||||
// Split date and time parts
|
||||
const [datePart, timePart] = dateTime.split(' ');
|
||||
|
||||
// Split date into parts
|
||||
const [year, month, day] = datePart.split('-').map(Number);
|
||||
|
||||
// Split time into parts
|
||||
const [hour, minute, second] = timePart.split(':').map(Number);
|
||||
|
||||
// Format the date and time
|
||||
return `${month}-${day}-${year}`;
|
||||
}
|
||||
const save = async () => {
|
||||
const { valid } = await refVFormAdd.value.validate()
|
||||
console.log(valid)
|
||||
if (valid) {
|
||||
try {
|
||||
|
||||
if (editedIndex.value > -1) {
|
||||
Object.assign(medicineList.value[editedIndex.value], editedItem.value)
|
||||
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
medicineList.value.push(editedItem.value)
|
||||
console.log(imageFile.value)
|
||||
let ecelData=''
|
||||
if (selectDropdown.value) {
|
||||
let datexcel = {
|
||||
type: 'string',
|
||||
data:selectdataList.value
|
||||
}
|
||||
console.log(datexcel)
|
||||
ecelData=datexcel
|
||||
//formData.append('excel', datexcel)
|
||||
} else {
|
||||
|
||||
let datexcel = {
|
||||
type: 'file',
|
||||
data:excelBase64.value
|
||||
}
|
||||
ecelData = datexcel
|
||||
// formData.append('excel', datexcel)
|
||||
}
|
||||
await store.dispatch('medicineAdd',{
|
||||
title: defaultItem.value.title,
|
||||
slug: defaultItem.value.slug,
|
||||
list_one_title: defaultItem.value.list_one_title,
|
||||
list_sub_title: defaultItem.value.list_sub_title,
|
||||
list_two_title: defaultItem.value.list_two_title,
|
||||
price: defaultItem.value.price,
|
||||
currency: currencySign.value,
|
||||
excel:'',//ecelData,
|
||||
image:imageBase64.value
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Handle the API response
|
||||
console.log(response.data)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
|
||||
addDialog.value = false
|
||||
await store.dispatch('medicineList')
|
||||
let list = store.getters.getMedcineList
|
||||
medicineList.value = list
|
||||
closeAdd()
|
||||
}
|
||||
}
|
||||
const update = async () => {
|
||||
const { valid } = await refVForm.value.validate()
|
||||
console.log(valid)
|
||||
if (valid) {
|
||||
try {
|
||||
|
||||
if (editedIndex.value > -1) {
|
||||
Object.assign(medicineList.value[editedIndex.value], editedItem.value)
|
||||
|
||||
console.log(imageFile.value)
|
||||
|
||||
let ecelData=''
|
||||
if (selectDropdown.value) {
|
||||
let datexcel = {
|
||||
type: 'string',
|
||||
data:selectdataList.value
|
||||
}
|
||||
console.log(datexcel)
|
||||
ecelData=datexcel
|
||||
//formData.append('excel', datexcel)
|
||||
} else {
|
||||
|
||||
let datexcel = {
|
||||
type: 'file',
|
||||
data:excelBase64.value
|
||||
}
|
||||
ecelData = datexcel
|
||||
// formData.append('excel', datexcel)
|
||||
}
|
||||
await store.dispatch('medicineUpdate', {
|
||||
id:editedItem.value.id,
|
||||
title: editedItem.value.title,
|
||||
slug: editedItem.value.slug,
|
||||
list_one_title: editedItem.value.list_one_title,
|
||||
list_sub_title: editedItem.value.list_sub_title,
|
||||
list_two_title: editedItem.value.list_two_title,
|
||||
price: editedItem.value.price,
|
||||
currency: currencySign.value,
|
||||
excel:'',//ecelData,
|
||||
image:imageBase64.value
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Handle the API response
|
||||
console.log(response.data)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
addDialog.value = false
|
||||
await store.dispatch('medicineList')
|
||||
let list = store.getters.getMedcineList
|
||||
medicineList.value = list
|
||||
close()
|
||||
}
|
||||
}
|
||||
const deleteItemConfirm = async () => {
|
||||
|
||||
await store.dispatch('subcriptionDelete',{
|
||||
id: editedItem.value.id
|
||||
})
|
||||
|
||||
closeDelete()
|
||||
loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
|
||||
}
|
||||
const generateSlug = () => {
|
||||
console.log(editedItem.title)
|
||||
if (editedItem.value.title) {
|
||||
editedItem.value.slug = editedItem.value.title
|
||||
.toString()
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/[^\w-]+/g, '')
|
||||
.replace(/--+/g, '-')
|
||||
.replace(/^-+/, '')
|
||||
.replace(/-+$/, '')
|
||||
} else if (defaultItem.value.title) {
|
||||
defaultItem.value.slug = defaultItem.value.title
|
||||
.toString()
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/[^\w-]+/g, '')
|
||||
.replace(/--+/g, '-')
|
||||
.replace(/^-+/, '')
|
||||
.replace(/-+$/, '')
|
||||
} else {
|
||||
editedItem.slug = ''
|
||||
}
|
||||
}
|
||||
const serverItems = ref([]);
|
||||
const loading = ref(true);
|
||||
const totalItems = ref(0);
|
||||
|
||||
// Method to load items
|
||||
const loadItems = debounce( async ( { page, itemsPerPage, sortBy }) => {
|
||||
const payload = {
|
||||
page,
|
||||
itemsPerPage,
|
||||
sortBy,
|
||||
filters:{
|
||||
|
||||
},
|
||||
search:search.value,
|
||||
}
|
||||
console.log("records",page, itemsPerPage, sortBy);
|
||||
loading.value = true;
|
||||
const data = await API.getDataTableRecord(ADMIN_SUBCRIPTIONS_LIST_API, payload, headers);
|
||||
serverItems.value = data.items;
|
||||
totalItems.value = data.total;
|
||||
loading.value = false;
|
||||
},500);
|
||||
const itemsPerPage = ref(30);
|
||||
onMounted(() => {
|
||||
isLoading.value = false;
|
||||
})
|
||||
const handleParentAdded = async (msg) => {
|
||||
if (msg == 'success') {
|
||||
store.dispatch('updateIsLoading', true)
|
||||
loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
|
||||
store.dispatch('updateIsLoading', false)
|
||||
}
|
||||
// You can also trigger a toast or snackbar here to show the message
|
||||
// For example, if using Vuetify:
|
||||
// showSnackbar(msg)
|
||||
}
|
||||
const formatOrderId = (id) => {
|
||||
if (id >= 1 && id <= 9) {
|
||||
return id.toString().padStart(4, '0');
|
||||
} else if (id >= 10 && id <= 99) {
|
||||
return id.toString().padStart(4, '0');
|
||||
} else if (id >= 100 && id <= 999) {
|
||||
return id.toString().padStart(4, '0');
|
||||
} else {
|
||||
return id; // or handle cases for IDs outside these ranges
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<VCard title="Subcriptions">
|
||||
|
||||
<VCardText >
|
||||
<VRow>
|
||||
|
||||
<VCol cols="12" md="8" class="d-flex align-center" >
|
||||
<VBtn color="primary" prepend-icon="ri-add-line" @click="isAddCustomerDrawerOpen = !isAddCustomerDrawerOpen" v-if="$can('read', 'Subscription Add')">
|
||||
New Subcription
|
||||
</VBtn>
|
||||
</VCol>
|
||||
<VCol cols="12" md="4" class="d-flex justify-end">
|
||||
<VTextField
|
||||
v-model="search"
|
||||
label="Search"
|
||||
placeholder="Search ..."
|
||||
append-inner-icon="ri-search-line"
|
||||
single-line
|
||||
hide-details
|
||||
dense
|
||||
outlined
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
<v-data-table-server
|
||||
v-model:items-per-page="itemsPerPage"
|
||||
:headers="headers"
|
||||
:items="serverItems"
|
||||
:items-length="totalItems"
|
||||
:loading="loading"
|
||||
:search="search"
|
||||
:item-value="name"
|
||||
@update:options="loadItems"
|
||||
>
|
||||
<!-- full name -->
|
||||
<template #item.cart_id="{ item }">
|
||||
<div class="d-flex align-center">
|
||||
<div class="d-flex flex-column ms-3">
|
||||
<RouterLink :to="{ name: 'admin-order-detail', params: { id: item.cart_id } }">
|
||||
{{ formatOrderId(item.cart_id) }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #item.first_name="{ item }">
|
||||
<div class="d-flex align-center" style="width:150px">
|
||||
|
||||
<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.first_name) }} </span>
|
||||
</VAvatar>
|
||||
|
||||
<div class="d-flex flex-column ms-3">
|
||||
<router-link
|
||||
:to="{ name: 'admin-patient-profile', params: { id: item.patient_id } }"
|
||||
class="highlighted"
|
||||
>
|
||||
<span class="d-block font-weight-medium text-truncate">{{ item.first_name }} {{ item.last_name }}</span>
|
||||
</router-link>
|
||||
<small>{{ item.post }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #item.price="{ item }">
|
||||
<div class="d-flex align-center">
|
||||
<div class="d-flex flex-column ms-3">
|
||||
<span class="d-block font-weight-medium text-high-emphasis text-truncate"> {{ item.currency }} {{ item.price }} </span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #item.subscription_start_date="{ item }">
|
||||
<div class="d-flex align-center">
|
||||
<div class="d-flex flex-column ms-3">
|
||||
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ formatDate(item.subscription_start_date) }}</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #item.subscription_renewal_date="{ item }">
|
||||
<div class="d-flex align-center">
|
||||
<div class="d-flex flex-column ms-3">
|
||||
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ formatDate(item.subscription_renewal_date) }}</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- status -->
|
||||
<template #item.subscription_status="{ item }">
|
||||
<VChip
|
||||
:color="resolveStatusVariant(item.subscription_status).color"
|
||||
density="comfortable"
|
||||
>
|
||||
{{ resolveStatusVariant(item.subscription_status).text }}
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<!-- Actions -->
|
||||
<template #item.actions="{ item }">
|
||||
<div class="d-flex gap-1">
|
||||
<IconBtn
|
||||
size="small"
|
||||
@click="editItem(item )"
|
||||
v-if="$can('read', 'Subscription Edit')"
|
||||
>
|
||||
<VIcon icon="ri-pencil-line" />
|
||||
</IconBtn>
|
||||
<IconBtn
|
||||
size="small"
|
||||
@click="deleteItem(item)"
|
||||
v-if="$can('read', 'Subscription Delete')"
|
||||
>
|
||||
<VIcon icon="ri-delete-bin-line" />
|
||||
</IconBtn>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table-server>
|
||||
<!-- </VDataTable> -->
|
||||
</VCard>
|
||||
</v-col>
|
||||
|
||||
<AddSubcription v-model:is-drawer-open="isAddCustomerDrawerOpen" @addedMessage="handleParentAdded" />
|
||||
<EditSubcription v-model:is-drawer-open="isEditCustomerDrawerOpen" :user-data="store.getters.getSingleProduct" @addedMessage="handleParentAdded" />
|
||||
</v-row>
|
||||
<!-- 👉 Edit Dialog -->
|
||||
<VDialog
|
||||
v-model="editDialog"
|
||||
max-width="600px"
|
||||
>
|
||||
<VForm ref="refVForm" >
|
||||
<VCard>
|
||||
<VCardTitle>
|
||||
<span class="headline">Edit Medicine</span>
|
||||
</VCardTitle>
|
||||
|
||||
<VCardText>
|
||||
<VContainer >
|
||||
|
||||
<VRow>
|
||||
<!-- fullName -->
|
||||
<VCol cols="12" md="12">
|
||||
<VTextField
|
||||
v-model="editedItem.title"
|
||||
label="Title"
|
||||
:rules="[requiredValidator]"
|
||||
@input="generateSlug"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12" md="12">
|
||||
<VTextField
|
||||
v-model="editedItem.slug"
|
||||
label="Slug"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12" sm="6" md="12">
|
||||
<VTextField
|
||||
v-model="editedItem.price"
|
||||
label="Price"
|
||||
:rules="[requiredValidator]"
|
||||
prepend-inner-icon
|
||||
>
|
||||
<template v-slot:prepend-inner>
|
||||
<VMenu
|
||||
offset-y
|
||||
transition="slide-y-transition"
|
||||
:close-on-content-click="false"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<span v-bind="props">{{ currencySign || '$money' }}</span>
|
||||
</template>
|
||||
<VList>
|
||||
<VListItem
|
||||
v-for="currency in currencies"
|
||||
:key="currency.code"
|
||||
@click.prevent="setCurrency(currency.code, currency.sign)"
|
||||
>
|
||||
<VListItemTitle>{{ currency.name }}</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</template>
|
||||
</VTextField>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12" sm="6" md="12">
|
||||
<VTextField
|
||||
v-model="editedItem.list_one_title"
|
||||
label="Short Detail"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12" sm="6" md="12">
|
||||
<VTextField
|
||||
v-model="editedItem.list_sub_title"
|
||||
label="Short Description"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12" sm="6" md="12">
|
||||
<VTextarea
|
||||
v-model="editedItem.list_two_title"
|
||||
label="Full Description"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12" md="8">
|
||||
<div v-if="selectDropdown==false">
|
||||
|
||||
<VFileInput
|
||||
v-model="excelFile"
|
||||
accept=".xlsx,.xls"
|
||||
show-size
|
||||
counter
|
||||
label="Select an Excel file to upload"
|
||||
@change="convertExcelToBase64"
|
||||
|
||||
/>
|
||||
</div>
|
||||
<div v-if="selectDropdown==true">
|
||||
<VSelect
|
||||
v-model="selectdataList"
|
||||
:items="store.getters.getQuestioneriesList"
|
||||
item-title="product_file_path"
|
||||
item-value="product_file_path"
|
||||
label="Select File"
|
||||
prepend-icon="ri-file-line"
|
||||
variant="outlined"
|
||||
/>
|
||||
</div>
|
||||
</VCol>
|
||||
<VCol cols="12" md="4">
|
||||
<VBtn color="success" variant="outlined" @click="selectfile('dropdown')" class="custom-button" v-if="selectDropdown==false">Select File</VBtn>
|
||||
<VBtn color="success" variant="outlined" @click="selectfile('upload')" class="custom-button" v-if="selectDropdown==true">Upload File</VBtn>
|
||||
</VCol>
|
||||
<VCol cols="12" md="12">
|
||||
<div>
|
||||
|
||||
<VFileInput
|
||||
v-model="imageFile"
|
||||
accept="image/*"
|
||||
show-size
|
||||
counter
|
||||
label="Select an image to upload"
|
||||
@change="convertImageToBase64"
|
||||
/>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
</VRow>
|
||||
</VContainer>
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
|
||||
<VBtn
|
||||
color="error"
|
||||
variant="outlined"
|
||||
@click="close"
|
||||
>
|
||||
Cancel
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="success"
|
||||
variant="elevated"
|
||||
@click="update"
|
||||
>
|
||||
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>
|
||||
|
||||
|
||||
<!-- 👉 Add Dialog -->
|
||||
<VDialog
|
||||
v-model="addDialog"
|
||||
max-width="600px"
|
||||
>
|
||||
<VForm ref="refVFormAdd" >
|
||||
<VCard>
|
||||
<VCardTitle>
|
||||
<span class="headline">Add Medicine</span>
|
||||
</VCardTitle>
|
||||
|
||||
<VCardText>
|
||||
<VContainer >
|
||||
|
||||
<VRow>
|
||||
<!-- fullName -->
|
||||
<VCol cols="12" md="12">
|
||||
<VTextField
|
||||
v-model="defaultItem.title"
|
||||
label="Title"
|
||||
:rules="[requiredValidator]"
|
||||
@input="generateSlug"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12" md="12">
|
||||
<VTextField
|
||||
v-model="defaultItem.slug"
|
||||
label="Slug"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12" sm="6" md="12">
|
||||
<VTextField
|
||||
v-model="defaultItem.price"
|
||||
label="Price"
|
||||
:rules="[requiredValidator]"
|
||||
prepend-inner-icon
|
||||
>
|
||||
<template v-slot:prepend-inner>
|
||||
<VMenu
|
||||
offset-y
|
||||
transition="slide-y-transition"
|
||||
:close-on-content-click="false"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<span v-bind="props">{{ currencySign || '$money' }}</span>
|
||||
</template>
|
||||
<VList>
|
||||
<VListItem
|
||||
v-for="currency in currencies"
|
||||
:key="currency.code"
|
||||
@click.prevent="setCurrency(currency.code, currency.sign)"
|
||||
>
|
||||
<VListItemTitle>{{ currency.name }}</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</template>
|
||||
</VTextField>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12" sm="6" md="12">
|
||||
<VTextField
|
||||
v-model="defaultItem.list_one_title"
|
||||
label="Short Detail"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12" sm="6" md="12">
|
||||
<VTextField
|
||||
v-model="defaultItem.list_sub_title"
|
||||
label="Short Description"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12" sm="6" md="12">
|
||||
<VTextarea
|
||||
v-model="defaultItem.list_two_title"
|
||||
label="Full Description"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12" md="8">
|
||||
<div v-if="selectDropdown==false">
|
||||
|
||||
<VFileInput
|
||||
v-model="excelFile"
|
||||
accept=".xlsx,.xls"
|
||||
:rules="[requiredExcelValidator]"
|
||||
show-size
|
||||
counter
|
||||
label="Select an Excel file to upload"
|
||||
@change="convertExcelToBase64"
|
||||
|
||||
/>
|
||||
</div>
|
||||
<div v-if="selectDropdown==true">
|
||||
<VSelect
|
||||
v-model="selectdataList"
|
||||
:items="store.getters.getQuestioneriesList"
|
||||
item-title="product_file_path"
|
||||
item-value="product_file_path"
|
||||
label="Select File"
|
||||
prepend-icon="ri-file-line"
|
||||
variant="outlined"
|
||||
/>
|
||||
</div>
|
||||
</VCol>
|
||||
<VCol cols="12" md="4">
|
||||
<VBtn color="success" variant="outlined" @click="selectfile('dropdown')" class="custom-button" v-if="selectDropdown==false">Select File</VBtn>
|
||||
<VBtn color="success" variant="outlined" @click="selectfile('upload')" class="custom-button" v-if="selectDropdown==true">Upload File</VBtn>
|
||||
</VCol>
|
||||
<VCol cols="12" md="12">
|
||||
<div>
|
||||
|
||||
<VFileInput
|
||||
v-model="imageFile"
|
||||
accept="image/*"
|
||||
:rules="[requiredImageValidator]"
|
||||
show-size
|
||||
counter
|
||||
label="Select an image to upload"
|
||||
@change="convertImageToBase64"
|
||||
/>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
</VRow>
|
||||
</VContainer>
|
||||
</VCardText>
|
||||
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
|
||||
<VBtn
|
||||
color="error"
|
||||
variant="outlined"
|
||||
@click="closeAdd"
|
||||
>
|
||||
Cancel
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="success"
|
||||
variant="elevated"
|
||||
@click="save"
|
||||
>
|
||||
Save
|
||||
</VBtn>
|
||||
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VForm>
|
||||
</VDialog>
|
||||
</template>
|
||||
<style scoped>
|
||||
.custom-button {
|
||||
width: 100%;
|
||||
height: 48px; /* This value should match the height of your input fields */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user