initial commit
This commit is contained in:
Inshal
468
resources/js/pages/prescrptions/AddPrescrption.vue
Normal file
468
resources/js/pages/prescrptions/AddPrescrption.vue
Normal file
@@ -0,0 +1,468 @@
|
||||
<script setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import { PerfectScrollbar } from 'vue3-perfect-scrollbar';
|
||||
import { VForm } from 'vuetify/components/VForm';
|
||||
import { useStore } from 'vuex';
|
||||
const route = useRoute();
|
||||
const isMobile = ref(window.innerWidth <= 768);
|
||||
const store = useStore()
|
||||
const props = defineProps({
|
||||
isDrawerOpen: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
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: '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' },
|
||||
// ... (add the rest of the states)
|
||||
]);
|
||||
const checkMobile = () => {
|
||||
isMobile.value = window.innerWidth <= 768;
|
||||
};
|
||||
const prescription_id = ref([]);
|
||||
const sortedStates = computed(() => {
|
||||
return states.value.slice().sort((a, b) => {
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
});
|
||||
const valid = ref(false);
|
||||
const form = ref(null);
|
||||
const getFieldRules = (fieldName, errorMessage) => {
|
||||
if (fieldName) {
|
||||
return [
|
||||
(v) => !!v || `${errorMessage}`,
|
||||
// Add more validation rules as needed
|
||||
];
|
||||
}
|
||||
};
|
||||
const headers = [
|
||||
|
||||
{ key: 'name', title: 'Name' },
|
||||
{ key: 'brand', title: 'Brand' },
|
||||
{ key: 'from', title: 'From' },
|
||||
{ key: 'direction_quantity', title: 'Direction Quantity' },
|
||||
{ key: 'dosage', title: 'Dosage' },
|
||||
{ key: 'quantity', title: 'Quantity' },
|
||||
{ key: 'refill_quantity', title: 'Refill Quantity' },
|
||||
{ key: 'actions', title: 'Action' },
|
||||
];
|
||||
const openDialog = (user, type) => {
|
||||
console.log("userId", user);
|
||||
|
||||
|
||||
if (type == "Prescription") {
|
||||
console.log("enter ne value");
|
||||
prescriptionModel.value = true;
|
||||
}
|
||||
if (type == "Prescription Form") {
|
||||
console.log("enter ne value");
|
||||
prescriptionModelForm.value = true;
|
||||
}
|
||||
|
||||
};
|
||||
const prescriptionForm = async () => {
|
||||
console.log("toggelUserValue.value.", prescription_id.value);
|
||||
// isLoadingVisible.value = true
|
||||
if (form.value.validate()) {
|
||||
|
||||
|
||||
await store.dispatch("savePercriptionOrder", {
|
||||
medicines: medicines.value,
|
||||
prescription_id: prescription_id.value,
|
||||
order_id:route.params.id,
|
||||
brand: brand.value,
|
||||
from: from.value,
|
||||
dosage: dosage.value,
|
||||
quantity: quantity.value,
|
||||
direction_quantity: direction_quantity.value,
|
||||
refill_quantity: refil_quantity.value,
|
||||
dont_substitute: dont_substitute.value,
|
||||
|
||||
});
|
||||
if (!store.getters.getErrorMsg) {
|
||||
emit('addedMessage', 'success')
|
||||
prescriptionModel.value = false;
|
||||
medicines.value = null;
|
||||
prescription_id.value = null;
|
||||
brand.value = null;
|
||||
from.value = null;
|
||||
dosage.value = null;
|
||||
quantity.value = null;
|
||||
direction_quantity.value = null;
|
||||
direction_one.value = null;
|
||||
direction_two.value = null;
|
||||
refil_quantity.value = null;
|
||||
dont_substitute.value = null;
|
||||
comments.value = null;
|
||||
emit('update:isDrawerOpen', false)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
const emit = defineEmits(['update:isDrawerOpen','addedMessage'])
|
||||
|
||||
const handleDrawerModelValueUpdate = val => {
|
||||
emit('update:isDrawerOpen', val)
|
||||
}
|
||||
const genders = ref([
|
||||
{ name: 'Male', abbreviation: 'Male' },
|
||||
{ name: 'Female', abbreviation: 'Female' },
|
||||
{ name: 'Other', abbreviation: 'Other' },
|
||||
]);
|
||||
const prescriptionModel = ref(false);
|
||||
const prescriptionModelForm = ref(false);
|
||||
const selectedMedicines = ref([]);
|
||||
const toggelUserValue = ref(null)
|
||||
const medicines = ref("");
|
||||
const brand = ref("");
|
||||
const from = ref("");
|
||||
const dosage = ref("");
|
||||
const quantity = ref("");
|
||||
const direction_quantity = ref("");
|
||||
const direction_one = ref("");
|
||||
const direction_two = ref("");
|
||||
const refil_quantity = ref("");
|
||||
const dont_substitute = ref("");
|
||||
const comments = ref("");
|
||||
const search = ref("");
|
||||
const loading = ref(true);
|
||||
const page = ref(1);
|
||||
const itemsPerPage = ref(10);
|
||||
const pageCount = ref(0);
|
||||
const itemsPrescriptions = ref([]);
|
||||
|
||||
const isBillingAddress = ref(false)
|
||||
|
||||
|
||||
|
||||
const selectedItem = async (item) => {
|
||||
console.log(item)
|
||||
medicines.value = item.name
|
||||
brand.value = item.brand
|
||||
dosage.value = item.dosage
|
||||
dosage.value = item.dosage
|
||||
from.value = item.from
|
||||
quantity.value = item.quantity
|
||||
direction_quantity.value = item.direction_quantity
|
||||
refil_quantity.value = item.refill_quantity
|
||||
prescription_id.value = item.id
|
||||
prescriptionModelForm.value = false
|
||||
|
||||
}
|
||||
onMounted(async () => {
|
||||
|
||||
});
|
||||
const resetForm = () => {
|
||||
refVForm.value?.reset()
|
||||
emit('update:isDrawerOpen', false)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VNavigationDrawer
|
||||
:model-value="props.isDrawerOpen"
|
||||
temporary
|
||||
location="end"
|
||||
width="800"
|
||||
@update:model-value="handleDrawerModelValueUpdate"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<AppDrawerHeaderSection
|
||||
title="Add Prescription"
|
||||
@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=""
|
||||
>
|
||||
|
||||
|
||||
|
||||
<v-form ref="form" v-model="valid" class="mt-6">
|
||||
<v-row>
|
||||
<v-col cols="12" md="2" v-if="isMobile" style="display: none;">
|
||||
<v-btn
|
||||
color="primary"
|
||||
class="btn"
|
||||
style="height: 54px"
|
||||
@click.stop="
|
||||
openDialog(toggelUserValue, 'Prescription Form')
|
||||
"
|
||||
>
|
||||
Prescription
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" md="12">
|
||||
<v-text-field
|
||||
label="Medicine"
|
||||
:rules="
|
||||
getFieldRules(
|
||||
'Medicine',
|
||||
'Medicine is required'
|
||||
)
|
||||
"
|
||||
v-model="medicines"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="2" v-if="!isMobile" style="display: none;">
|
||||
<v-btn
|
||||
color="primary"
|
||||
class="btn"
|
||||
style="height: 54px"
|
||||
@click.stop="
|
||||
openDialog(toggelUserValue, 'Prescription Form')
|
||||
"
|
||||
>
|
||||
Prescription
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Brand"
|
||||
:rules="getFieldRules('brand', 'Brand is required')"
|
||||
v-model="brand"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="From"
|
||||
:rules="getFieldRules('from', 'From is required')"
|
||||
v-model="from"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Dosage"
|
||||
:rules="
|
||||
getFieldRules('dosage', 'Dosage is required')
|
||||
"
|
||||
v-model="dosage"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Quantity"
|
||||
:rules="
|
||||
getFieldRules(
|
||||
'quantity',
|
||||
'Quantity is required'
|
||||
)
|
||||
"
|
||||
v-model="quantity"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Direction Quantity"
|
||||
:rules="
|
||||
getFieldRules(
|
||||
'direction quantity',
|
||||
'Direction Quantity is required'
|
||||
)
|
||||
"
|
||||
v-model="direction_quantity"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Refil Quantity"
|
||||
:rules="
|
||||
getFieldRules(
|
||||
'Refil Quantity',
|
||||
'Refil Quantity one is required'
|
||||
)
|
||||
"
|
||||
v-model="refil_quantity"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
</v-form>
|
||||
|
||||
|
||||
|
||||
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<div class="d-flex justify-start">
|
||||
<VBtn
|
||||
type="submit"
|
||||
color="primary"
|
||||
class="me-4"
|
||||
@click="prescriptionForm"
|
||||
:disabled="!valid"
|
||||
>
|
||||
Save
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="error"
|
||||
variant="outlined"
|
||||
@click="resetForm"
|
||||
>
|
||||
Discard
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</PerfectScrollbar>
|
||||
</VCard>
|
||||
</VNavigationDrawer>
|
||||
<v-dialog v-model="prescriptionModelForm" max-width="1200">
|
||||
<v-card class="pa-3">
|
||||
<v-row>
|
||||
<v-col cols="12" class="text-right cross">
|
||||
<v-btn
|
||||
icon
|
||||
color="transparent"
|
||||
small
|
||||
@click="prescriptionModelForm = false"
|
||||
>
|
||||
<v-icon>rdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="itemsPrescriptions"
|
||||
:search="search"
|
||||
:loading="loading"
|
||||
:page.sync="page"
|
||||
:items-per-page.sync="itemsPerPage"
|
||||
@page-count="pageCount = $event"
|
||||
class="elevation-1"
|
||||
>
|
||||
<template v-slot:top>
|
||||
<v-toolbar flat :height="30">
|
||||
<v-toolbar-title>Prescriptions</v-toolbar-title>
|
||||
<v-divider
|
||||
class="mx-4"
|
||||
inset
|
||||
vertical
|
||||
></v-divider>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
label="Search"
|
||||
single-line
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
small
|
||||
@click="selectedItem(item)"
|
||||
>Select</v-btn
|
||||
>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.v-navigation-drawer__content {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
</style>
|
||||
486
resources/js/pages/prescrptions/EditPrescrption.vue
Normal file
486
resources/js/pages/prescrptions/EditPrescrption.vue
Normal file
@@ -0,0 +1,486 @@
|
||||
<script setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import { PerfectScrollbar } from 'vue3-perfect-scrollbar';
|
||||
import { VForm } from 'vuetify/components/VForm';
|
||||
import { useStore } from 'vuex';
|
||||
const route = useRoute();
|
||||
const isMobile = ref(window.innerWidth <= 768);
|
||||
const store = useStore()
|
||||
const props = defineProps({
|
||||
isDrawerOpen: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
userData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
}
|
||||
})
|
||||
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: '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' },
|
||||
// ... (add the rest of the states)
|
||||
]);
|
||||
const checkMobile = () => {
|
||||
isMobile.value = window.innerWidth <= 768;
|
||||
};
|
||||
const prescription_id = ref([]);
|
||||
const sortedStates = computed(() => {
|
||||
return states.value.slice().sort((a, b) => {
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
});
|
||||
const valid = ref(false);
|
||||
const form = ref(null);
|
||||
const getFieldRules = (fieldName, errorMessage) => {
|
||||
if (fieldName) {
|
||||
return [
|
||||
(v) => !!v || `${errorMessage}`,
|
||||
// Add more validation rules as needed
|
||||
];
|
||||
}
|
||||
};
|
||||
const headers = [
|
||||
|
||||
{ key: 'name', title: 'Name' },
|
||||
{ key: 'brand', title: 'Brand' },
|
||||
{ key: 'from', title: 'From' },
|
||||
{ key: 'direction_quantity', title: 'Direction Quantity' },
|
||||
{ key: 'dosage', title: 'Dosage' },
|
||||
{ key: 'quantity', title: 'Quantity' },
|
||||
{ key: 'refill_quantity', title: 'Refill Quantity' },
|
||||
{ key: 'actions', title: 'Action' },
|
||||
];
|
||||
const openDialog = (user, type) => {
|
||||
console.log("userId", user);
|
||||
|
||||
|
||||
if (type == "Prescription") {
|
||||
console.log("enter ne value");
|
||||
prescriptionModel.value = true;
|
||||
}
|
||||
if (type == "Prescription Form") {
|
||||
console.log("enter ne value");
|
||||
prescriptionModelForm.value = true;
|
||||
}
|
||||
|
||||
};
|
||||
const prescriptionForm = async () => {
|
||||
console.log("toggelUserValue.value.", prescription_id.value);
|
||||
// isLoadingVisible.value = true
|
||||
if (form.value.validate()) {
|
||||
|
||||
|
||||
await store.dispatch("savePercriptionUpdate", {
|
||||
medicines: medicines.value,
|
||||
id:props.userData.id,
|
||||
brand: brand.value,
|
||||
from: from.value,
|
||||
dosage: dosage.value,
|
||||
quantity: quantity.value,
|
||||
direction_quantity: direction_quantity.value,
|
||||
direction_one: direction_one.value,
|
||||
direction_two: direction_two.value,
|
||||
refill_quantity: refil_quantity.value,
|
||||
dont_substitute: dont_substitute.value,
|
||||
comments: comments.value,
|
||||
});
|
||||
if (!store.getters.getErrorMsg) {
|
||||
emit('addedMessage', 'success')
|
||||
prescriptionModel.value = false;
|
||||
medicines.value = null;
|
||||
prescription_id.value = null;
|
||||
brand.value = null;
|
||||
from.value = null;
|
||||
dosage.value = null;
|
||||
quantity.value = null;
|
||||
direction_quantity.value = null;
|
||||
direction_one.value = null;
|
||||
direction_two.value = null;
|
||||
refil_quantity.value = null;
|
||||
dont_substitute.value = null;
|
||||
comments.value = null;
|
||||
emit('update:isDrawerOpen', false)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
const getPrescrption = computed(async () => {
|
||||
if (props.userData) {
|
||||
itemId.value=props.userData.id
|
||||
medicines.value= props.userData.name
|
||||
brand.value=props.userData.brand
|
||||
from.value= props.userData.from
|
||||
dosage.value= props.userData.dosage
|
||||
quantity.value= props.userData.quantity
|
||||
direction_quantity.value= props.userData.direction_quantity
|
||||
refil_quantity.value= props.userData.refill_quantity
|
||||
dont_substitute.value= props.userData.dont_substitute
|
||||
}
|
||||
|
||||
});
|
||||
const emit = defineEmits(['update:isDrawerOpen','addedMessage'])
|
||||
|
||||
const handleDrawerModelValueUpdate = val => {
|
||||
emit('update:isDrawerOpen', val)
|
||||
}
|
||||
const genders = ref([
|
||||
{ name: 'Male', abbreviation: 'Male' },
|
||||
{ name: 'Female', abbreviation: 'Female' },
|
||||
{ name: 'Other', abbreviation: 'Other' },
|
||||
]);
|
||||
const prescriptionModel = ref(false);
|
||||
const prescriptionModelForm = ref(false);
|
||||
const selectedMedicines = ref([]);
|
||||
const toggelUserValue = ref(null)
|
||||
const medicines = ref("");
|
||||
const brand = ref("");
|
||||
const from = ref("");
|
||||
const dosage = ref("");
|
||||
const quantity = ref("");
|
||||
const direction_quantity = ref("");
|
||||
const direction_one = ref("");
|
||||
const direction_two = ref("");
|
||||
const refil_quantity = ref("");
|
||||
const dont_substitute = ref("");
|
||||
const comments = ref("");
|
||||
const search = ref("");
|
||||
const loading = ref(true);
|
||||
const page = ref(1);
|
||||
const itemsPerPage = ref(10);
|
||||
const pageCount = ref(0);
|
||||
const itemsPrescriptions = ref([]);
|
||||
const itemId = ref();
|
||||
const isBillingAddress = ref(false)
|
||||
|
||||
|
||||
const selectedItem = async (item) => {
|
||||
console.log(item)
|
||||
medicines.value = item.name
|
||||
brand.value = item.brand
|
||||
dosage.value = item.dosage
|
||||
dosage.value = item.dosage
|
||||
from.value = item.from
|
||||
quantity.value = item.quantity
|
||||
direction_quantity.value = item.direction_quantity
|
||||
refil_quantity.value = item.refill_quantity
|
||||
prescription_id.value = item.id
|
||||
prescriptionModelForm.value = false
|
||||
|
||||
}
|
||||
onMounted(async () => {
|
||||
|
||||
});
|
||||
const resetForm = () => {
|
||||
refVForm.value?.reset()
|
||||
emit('update:isDrawerOpen', false)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VNavigationDrawer
|
||||
:model-value="props.isDrawerOpen"
|
||||
temporary
|
||||
location="end"
|
||||
width="800"
|
||||
@update:model-value="handleDrawerModelValueUpdate"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<AppDrawerHeaderSection
|
||||
title="Edit Prescription"
|
||||
@cancel="$emit('update:isDrawerOpen', false)"
|
||||
/>
|
||||
<VDivider />
|
||||
|
||||
<VCard flat>
|
||||
<PerfectScrollbar
|
||||
:options="{ wheelPropagation: false }"
|
||||
class="h-100"
|
||||
>
|
||||
<VCardText style="block-size: calc(100vh - 5rem);" v-if="getPrescrption">
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent=""
|
||||
>
|
||||
|
||||
|
||||
|
||||
<v-form ref="form" v-model="valid" class="mt-6">
|
||||
<v-row>
|
||||
<v-col cols="12" md="2" v-if="isMobile" style="display: none;">
|
||||
<v-btn
|
||||
color="primary"
|
||||
class="btn"
|
||||
style="height: 54px"
|
||||
@click.stop="
|
||||
openDialog(toggelUserValue, 'Prescription Form')
|
||||
"
|
||||
>
|
||||
Prescription
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" md="12">
|
||||
<v-text-field
|
||||
label="Medicine"
|
||||
:rules="
|
||||
getFieldRules(
|
||||
'Medicine',
|
||||
'Medicine is required'
|
||||
)
|
||||
"
|
||||
v-model="medicines"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="2" v-if="!isMobile" style="display: none;">
|
||||
<v-btn
|
||||
color="primary"
|
||||
class="btn"
|
||||
style="height: 54px"
|
||||
@click.stop="
|
||||
openDialog(toggelUserValue, 'Prescription Form')
|
||||
"
|
||||
>
|
||||
Prescription
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Brand"
|
||||
:rules="getFieldRules('brand', 'Brand is required')"
|
||||
v-model="brand"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="From"
|
||||
:rules="getFieldRules('from', 'From is required')"
|
||||
v-model="from"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Dosage"
|
||||
:rules="
|
||||
getFieldRules('dosage', 'Dosage is required')
|
||||
"
|
||||
v-model="dosage"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Quantity"
|
||||
:rules="
|
||||
getFieldRules(
|
||||
'quantity',
|
||||
'Quantity is required'
|
||||
)
|
||||
"
|
||||
v-model="quantity"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Direction Quantity"
|
||||
:rules="
|
||||
getFieldRules(
|
||||
'direction quantity',
|
||||
'Direction Quantity is required'
|
||||
)
|
||||
"
|
||||
v-model="direction_quantity"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Refil Quantity"
|
||||
:rules="
|
||||
getFieldRules(
|
||||
'Refil Quantity',
|
||||
'Refil Quantity one is required'
|
||||
)
|
||||
"
|
||||
v-model="refil_quantity"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
</v-form>
|
||||
|
||||
|
||||
|
||||
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<div class="d-flex justify-start">
|
||||
<VBtn
|
||||
type="submit"
|
||||
color="primary"
|
||||
class="me-4"
|
||||
@click="prescriptionForm"
|
||||
:disabled="!valid"
|
||||
>
|
||||
Save
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="error"
|
||||
variant="outlined"
|
||||
@click="resetForm"
|
||||
>
|
||||
Discard
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</PerfectScrollbar>
|
||||
</VCard>
|
||||
</VNavigationDrawer>
|
||||
<v-dialog v-model="prescriptionModelForm" max-width="1200">
|
||||
<v-card class="pa-3">
|
||||
<v-row>
|
||||
<v-col cols="12" class="text-right cross">
|
||||
<v-btn
|
||||
icon
|
||||
color="transparent"
|
||||
small
|
||||
@click="prescriptionModelForm = false"
|
||||
>
|
||||
<v-icon>rdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="itemsPrescriptions"
|
||||
:search="search"
|
||||
:loading="loading"
|
||||
:page.sync="page"
|
||||
:items-per-page.sync="itemsPerPage"
|
||||
@page-count="pageCount = $event"
|
||||
class="elevation-1"
|
||||
>
|
||||
<template v-slot:top>
|
||||
<v-toolbar flat :height="30">
|
||||
<v-toolbar-title>Prescriptions</v-toolbar-title>
|
||||
<v-divider
|
||||
class="mx-4"
|
||||
inset
|
||||
vertical
|
||||
></v-divider>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
label="Search"
|
||||
single-line
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
small
|
||||
@click="selectedItem(item)"
|
||||
>Select</v-btn
|
||||
>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.v-navigation-drawer__content {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
</style>
|
||||
629
resources/js/pages/prescrptions/prescription.vue
Normal file
629
resources/js/pages/prescrptions/prescription.vue
Normal file
@@ -0,0 +1,629 @@
|
||||
<script setup>
|
||||
import API from '@/api';
|
||||
import { ADMIN_ORDER_GET_PERCRPTION_API } from '@/constants';
|
||||
import AddPrescrption from '@/pages/prescrptions/AddPrescrption.vue';
|
||||
import EditPrescrption from '@/pages/prescrptions/EditPrescrption.vue';
|
||||
import { format } from 'date-fns';
|
||||
import debounce from 'lodash.debounce';
|
||||
import { useStore } from 'vuex';
|
||||
const router = useRouter();
|
||||
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: 'ID',
|
||||
key: 'id',
|
||||
|
||||
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: 'Brand',
|
||||
key: 'brand',
|
||||
},
|
||||
{
|
||||
title: 'From',
|
||||
key: 'from',
|
||||
},
|
||||
{
|
||||
title: 'Quantity',
|
||||
key: 'quantity',
|
||||
},
|
||||
{
|
||||
title: 'Dosage',
|
||||
key: 'dosage',
|
||||
},
|
||||
{
|
||||
title: 'Refill Quantity',
|
||||
key: 'refill_quantity',
|
||||
},
|
||||
|
||||
{
|
||||
title: 'ACTIONS',
|
||||
key: 'actions',
|
||||
searchable: false,
|
||||
orderable:false
|
||||
},
|
||||
]
|
||||
|
||||
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 formatDateTime = (date) => {
|
||||
return format(date, 'MM-dd-yyyy HH:mm:ss');
|
||||
};
|
||||
|
||||
const editItem = async (item) => {
|
||||
isEditCustomerDrawerOpen.value = true
|
||||
|
||||
await store.dispatch('getPercrptionByID', {
|
||||
id: item.id,
|
||||
})
|
||||
|
||||
editedItem.value = store.getters.getSinglePrescription
|
||||
console.log('here', store.getters.getSinglePrescription)
|
||||
// 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 permissionRole = item => {
|
||||
router.push({ name: "admin-role-permission", params: { id: item.id } });
|
||||
|
||||
}
|
||||
|
||||
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]
|
||||
}
|
||||
}
|
||||
|
||||
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)
|
||||
//const formData = new FormData()
|
||||
//formData.append('image', imageBase64.value)
|
||||
|
||||
|
||||
// formData.append('title', defaultItem.value.title)
|
||||
// formData.append('slug', defaultItem.value.slug)
|
||||
// formData.append('list_one_title', defaultItem.value.list_one_title)
|
||||
// formData.append('list_sub_title', defaultItem.value.list_sub_title)
|
||||
// formData.append('list_two_title', defaultItem.value.list_two_title)
|
||||
// formData.append('price', defaultItem.value.price)
|
||||
// formData.append('currency', currencySign.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('deletePerscription', {
|
||||
id: editedItem.value.id
|
||||
})
|
||||
|
||||
closeDelete()
|
||||
loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
|
||||
defaultItem.value.id = null
|
||||
defaultItem.value.name = null
|
||||
defaultItem.value.guard = null
|
||||
|
||||
}
|
||||
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_ORDER_GET_PERCRPTION_API, payload, headers);
|
||||
serverItems.value = data.items;
|
||||
totalItems.value = data.total;
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
const itemsPerPage = ref(30);
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
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)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<VCard title="Prescriptions">
|
||||
|
||||
<VCardText>
|
||||
<VRow>
|
||||
|
||||
<VCol cols="12" md="8" class="d-flex align-center">
|
||||
<VBtn prepend-icon="ri-add-line" @click="isAddCustomerDrawerOpen = !isAddCustomerDrawerOpen" v-if="$can('read', 'Prescription Add')">
|
||||
Add Prescription
|
||||
</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>
|
||||
<!-- <VDataTable
|
||||
:headers="headers"
|
||||
:items="medicineList"
|
||||
:search="search"
|
||||
:items-per-page="5"
|
||||
class="text-no-wrap"
|
||||
> -->
|
||||
<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.title="{ item }">
|
||||
<div class="d-flex align-center">
|
||||
<!-- avatar -->
|
||||
<VAvatar size="32" :color="item.image_url ? '' : 'primary'"
|
||||
:class="item.image_url ? '' : 'v-avatar-light-bg primary--text'"
|
||||
:variant="!item.image_url ? 'tonal' : undefined">
|
||||
<VImg v-if="item.image_url" :src="item.image_url" />
|
||||
<span v-else class="text-sm">{{ avatarText(item.name) }}</span>
|
||||
</VAvatar>
|
||||
|
||||
<div class="d-flex flex-column ms-3">
|
||||
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.title
|
||||
}}</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- status -->
|
||||
<template #item.status="{ item }">
|
||||
<VChip :color="resolveStatusVariant(item.status).color" density="comfortable">
|
||||
{{ resolveStatusVariant(item.status).text }}
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<template #item.brand="{ item }">
|
||||
<span v-html="item.brand"></span>
|
||||
</template>
|
||||
<template #item.created_at="{ item }">
|
||||
<span>{{ formatDateTime(item.created_at) }}</span>
|
||||
</template>
|
||||
|
||||
<template #item.updated_at="{ item }">
|
||||
<span>{{ formatDateTime(item.updated_at) }}</span>
|
||||
</template>
|
||||
|
||||
<!-- Actions -->
|
||||
<template #item.actions="{ item }">
|
||||
<div class="d-flex gap-1">
|
||||
<IconBtn size="small" @click="editItem(item)" v-if="$can('read', 'Prescription Edit')">
|
||||
<VIcon icon="ri-pencil-line" />
|
||||
</IconBtn>
|
||||
<IconBtn size="small" @click="deleteItem(item)" v-if="$can('read', 'Prescription Delete')">
|
||||
<VIcon icon="ri-delete-bin-line" />
|
||||
</IconBtn>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</v-data-table-server>
|
||||
<!-- </VDataTable> -->
|
||||
</VCard>
|
||||
</v-col>
|
||||
|
||||
<AddPrescrption v-model:is-drawer-open="isAddCustomerDrawerOpen" @addedMessage="handleParentAdded" />
|
||||
<EditPrescrption v-model:is-drawer-open="isEditCustomerDrawerOpen" :user-data="store.getters.getSinglePrescription"
|
||||
@addedMessage="handleParentAdded" />
|
||||
</v-row>
|
||||
<!-- 👉 Edit Dialog -->
|
||||
<VDialog v-model="editDialog" max-width="600px">
|
||||
<VForm ref="refVForm">
|
||||
<VCard>
|
||||
<VCardTitle>
|
||||
<span class="headline">Edit Role</span>
|
||||
</VCardTitle>
|
||||
|
||||
<VCardText>
|
||||
<VContainer>
|
||||
|
||||
<VRow>
|
||||
<!-- fullName -->
|
||||
<VCol cols="12" md="12">
|
||||
<VTextField v-model="editedItem.name" label="Name" :rules="[requiredValidator]" />
|
||||
</VCol>
|
||||
<VCol cols="12" md="12">
|
||||
<VTextField v-model="editedItem.guard" label="Guard" :rules="[requiredValidator]" />
|
||||
</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 Role</span>
|
||||
</VCardTitle>
|
||||
|
||||
<VCardText>
|
||||
<VContainer>
|
||||
|
||||
<VRow>
|
||||
<!-- fullName -->
|
||||
<VCol cols="12" md="12">
|
||||
<VTextField v-model="defaultItem.name" label="Name" :rules="[requiredValidator]" />
|
||||
</VCol>
|
||||
<VCol cols="12" md="12">
|
||||
<VTextField v-model="defaultItem.guard" label="Guard" :rules="[requiredValidator]" />
|
||||
</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