initial commit
This commit is contained in:
Inshal
1003
resources/js/pages/apps/ecommerce/order/AddOrder.vue
Normal file
1003
resources/js/pages/apps/ecommerce/order/AddOrder.vue
Normal file
File diff suppressed because it is too large
Load Diff
413
resources/js/pages/apps/ecommerce/order/details/[id].vue
Normal file
413
resources/js/pages/apps/ecommerce/order/details/[id].vue
Normal file
@@ -0,0 +1,413 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import product21 from '@images/ecommerce-images/product-21.png'
|
||||
import product22 from '@images/ecommerce-images/product-22.png'
|
||||
import product23 from '@images/ecommerce-images/product-23.png'
|
||||
import product24 from '@images/ecommerce-images/product-24.png'
|
||||
|
||||
const route = useRoute('apps-ecommerce-order-details-id')
|
||||
const isConfirmDialogVisible = ref(false)
|
||||
const isUserInfoEditDialogVisible = ref(false)
|
||||
const isEditAddressDialogVisible = ref(false)
|
||||
|
||||
const headers = [
|
||||
{
|
||||
title: 'Product',
|
||||
key: 'productName',
|
||||
},
|
||||
{
|
||||
title: 'Price',
|
||||
key: 'price',
|
||||
},
|
||||
{
|
||||
title: 'Quantity',
|
||||
key: 'quantity',
|
||||
},
|
||||
{
|
||||
title: 'Total',
|
||||
key: 'total',
|
||||
sortable: false,
|
||||
},
|
||||
]
|
||||
|
||||
const orderData = [
|
||||
{
|
||||
productName: 'OnePlus 7 Pro',
|
||||
productImage: product21,
|
||||
brand: 'OnePlus',
|
||||
price: 799,
|
||||
quantity: 1,
|
||||
},
|
||||
{
|
||||
productName: 'Magic Mouse',
|
||||
productImage: product22,
|
||||
brand: 'Apple',
|
||||
price: 89,
|
||||
quantity: 1,
|
||||
},
|
||||
{
|
||||
productName: 'Wooden Chair',
|
||||
productImage: product23,
|
||||
brand: 'insofer',
|
||||
price: 289,
|
||||
quantity: 2,
|
||||
},
|
||||
{
|
||||
productName: 'Air Jorden',
|
||||
productImage: product24,
|
||||
brand: 'Nike',
|
||||
price: 299,
|
||||
quantity: 2,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="d-flex justify-space-between align-center flex-wrap gap-y-4 mb-6">
|
||||
<div>
|
||||
<div class="d-flex gap-2 align-center mb-2 flex-wrap">
|
||||
<h5 class="text-h5">
|
||||
Order #{{ route.params.id }}
|
||||
</h5>
|
||||
<div class="d-flex gap-x-2">
|
||||
<VChip
|
||||
variant="tonal"
|
||||
color="success"
|
||||
size="small"
|
||||
>
|
||||
Paid
|
||||
</VChip>
|
||||
<VChip
|
||||
variant="tonal"
|
||||
color="info"
|
||||
size="small"
|
||||
>
|
||||
Ready to Pickup
|
||||
</VChip>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-body-1">
|
||||
Aug 17, 2020, 5:48 (ET)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
color="error"
|
||||
@click="isConfirmDialogVisible = !isConfirmDialogVisible"
|
||||
>
|
||||
Delete Order
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<!-- 👉 Order Details -->
|
||||
<VCard class="mb-6">
|
||||
<VCardItem>
|
||||
<template #title>
|
||||
<h5 class="text-h5">
|
||||
Order Details
|
||||
</h5>
|
||||
</template>
|
||||
<template #append>
|
||||
<span class="text-primary cursor-pointer">Edit</span>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VDataTable
|
||||
:headers="headers"
|
||||
:items="orderData"
|
||||
item-value="productName"
|
||||
show-select
|
||||
class="text-no-wrap"
|
||||
>
|
||||
<template #item.productName="{ item }">
|
||||
<div class="d-flex gap-x-3">
|
||||
<VAvatar
|
||||
size="34"
|
||||
variant="tonal"
|
||||
:image="item.productImage"
|
||||
rounded
|
||||
/>
|
||||
|
||||
<div class="d-flex flex-column align-center">
|
||||
<h6 class="text-h6">
|
||||
{{ item.productName }}
|
||||
</h6>
|
||||
|
||||
<span class="text-sm text-start align-self-start">
|
||||
{{ item.brand }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #item.price="{ item }">
|
||||
<span>${{ item.price }}</span>
|
||||
</template>
|
||||
|
||||
<template #item.total="{ item }">
|
||||
<span>
|
||||
${{ item.price * item.quantity }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #bottom />
|
||||
</VDataTable>
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex align-end flex-column">
|
||||
<table class="text-high-emphasis">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td width="200px">
|
||||
Subtotal:
|
||||
</td>
|
||||
<td class="font-weight-medium">
|
||||
$2,093
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shipping fee: </td>
|
||||
<td class="font-weight-medium">
|
||||
$2
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tax: </td>
|
||||
<td class="font-weight-medium">
|
||||
$28
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-weight-medium">
|
||||
Total:
|
||||
</td>
|
||||
<td class="font-weight-medium">
|
||||
$2,113
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- 👉 Shipping Activity -->
|
||||
<VCard title="Shipping Activity">
|
||||
<VCardText>
|
||||
<VTimeline
|
||||
truncate-line="both"
|
||||
align="start"
|
||||
side="end"
|
||||
line-inset="10"
|
||||
line-color="primary"
|
||||
density="compact"
|
||||
class="v-timeline-density-compact"
|
||||
>
|
||||
<VTimelineItem
|
||||
dot-color="primary"
|
||||
size="x-small"
|
||||
>
|
||||
<div class="d-flex justify-space-between align-center mb-3">
|
||||
<span class="app-timeline-title">Order was placed (Order ID: #32543)</span>
|
||||
<span class="app-timeline-meta">Tuesday 11:29 AM</span>
|
||||
</div>
|
||||
<p class="app-timeline-text mb-0">
|
||||
Your order has been placed successfully
|
||||
</p>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
dot-color="primary"
|
||||
size="x-small"
|
||||
>
|
||||
<div class="d-flex justify-space-between align-center mb-3">
|
||||
<span class="app-timeline-title">Pick-up</span>
|
||||
<span class="app-timeline-meta">Wednesday 11:29 AM</span>
|
||||
</div>
|
||||
<p class="app-timeline-text mb-0">
|
||||
Pick-up scheduled with courier
|
||||
</p>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
dot-color="primary"
|
||||
size="x-small"
|
||||
>
|
||||
<div class="d-flex justify-space-between align-center mb-3">
|
||||
<span class="app-timeline-title">Dispatched</span>
|
||||
<span class="app-timeline-meta">Thursday 8:15 AM</span>
|
||||
</div>
|
||||
<p class="app-timeline-text mb-0">
|
||||
Item has been picked up by courier.
|
||||
</p>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
dot-color="primary"
|
||||
size="x-small"
|
||||
>
|
||||
<div class="d-flex justify-space-between align-center mb-3">
|
||||
<span class="app-timeline-title">Package arrived</span>
|
||||
<span class="app-timeline-meta">Saturday 15:20 AM</span>
|
||||
</div>
|
||||
<p class="app-timeline-text mb-0">
|
||||
Package arrived at an Amazon facility, NY
|
||||
</p>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
dot-color="primary"
|
||||
size="x-small"
|
||||
>
|
||||
<div class="d-flex justify-space-between align-center mb-3">
|
||||
<span class="app-timeline-title">Dispatched for delivery</span>
|
||||
<span class="app-timeline-meta">Today 14:12 PM</span>
|
||||
</div>
|
||||
<p class="app-timeline-text mb-0">
|
||||
Package has left an Amazon facility , NY
|
||||
</p>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
dot-color="primary"
|
||||
size="x-small"
|
||||
>
|
||||
<div class="d-flex justify-space-between align-center mb-3">
|
||||
<span class="app-timeline-title">Delivery</span>
|
||||
</div>
|
||||
<p class="app-timeline-text mb-0">
|
||||
Package will be delivered by tomorrow
|
||||
</p>
|
||||
</VTimelineItem>
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<!-- 👉 Customer Details -->
|
||||
<VCard class="mb-6">
|
||||
<VCardText class="d-flex flex-column gap-y-6">
|
||||
<h5 class="text-h5">
|
||||
Customer Details
|
||||
</h5>
|
||||
|
||||
<div class="d-flex align-center">
|
||||
<VAvatar
|
||||
:image="avatar1"
|
||||
class="me-3"
|
||||
/>
|
||||
<div>
|
||||
<div class="text-body-1 text-high-emphasis font-weight-medium">
|
||||
Shamus Tuttle
|
||||
</div>
|
||||
<span>Customer ID: #47389</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center">
|
||||
<VAvatar
|
||||
variant="tonal"
|
||||
color="success"
|
||||
class="me-3"
|
||||
>
|
||||
<VIcon icon="ri-shopping-cart-line" />
|
||||
</VAvatar>
|
||||
|
||||
<h6 class="text-h6">
|
||||
12 Orders
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-y-1">
|
||||
<div class="d-flex justify-space-between gap-1 text-body-2">
|
||||
<h6 class="text-h6">
|
||||
Contact Info
|
||||
</h6>
|
||||
<span
|
||||
class="text-base text-primary font-weight-medium cursor-pointer"
|
||||
@click="isUserInfoEditDialogVisible = !isUserInfoEditDialogVisible"
|
||||
>
|
||||
Edit
|
||||
</span>
|
||||
</div>
|
||||
<span>Email: Sheldon88@yahoo.com</span>
|
||||
<span>Mobile: +1 (609) 972-22-22</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- 👉 Shipping Address -->
|
||||
<VCard class="mb-6">
|
||||
<VCardText>
|
||||
<div class="d-flex align-center justify-space-between gap-1 mb-6">
|
||||
<div class="text-body-1 text-high-emphasis font-weight-medium">
|
||||
Shipping Address
|
||||
</div>
|
||||
<span
|
||||
class="text-base text-primary font-weight-medium cursor-pointer"
|
||||
@click="isEditAddressDialogVisible = !isEditAddressDialogVisible"
|
||||
>Edit</span>
|
||||
</div>
|
||||
<div>
|
||||
45 Rocker Terrace <br> Latheronwheel <br> KW5 8NW, London <br> UK
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- 👉 Billing Address -->
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<div class="d-flex align-center justify-space-between gap-1 mb-3">
|
||||
<div class="text-body-1 text-high-emphasis font-weight-medium">
|
||||
Billing Address
|
||||
</div>
|
||||
<span
|
||||
class="text-base text-primary font-weight-medium cursor-pointer"
|
||||
@click="isEditAddressDialogVisible = !isEditAddressDialogVisible"
|
||||
>Edit</span>
|
||||
</div>
|
||||
<div>
|
||||
45 Rocker Terrace <br> Latheronwheel <br> KW5 8NW, London <br> UK
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<h6 class="text-h6 mb-1">
|
||||
Mastercard
|
||||
</h6>
|
||||
<div class="text-base">
|
||||
Card Number: ******4291
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<ConfirmDialog
|
||||
v-model:isDialogVisible="isConfirmDialogVisible"
|
||||
confirmation-question="Are you sure to cancel your Order?"
|
||||
cancel-msg="Order cancelled!!"
|
||||
cancel-title="Cancelled"
|
||||
confirm-msg="Your order cancelled successfully."
|
||||
confirm-title="Cancelled!"
|
||||
/>
|
||||
|
||||
<UserInfoEditDialog v-model:isDialogVisible="isUserInfoEditDialogVisible" />
|
||||
|
||||
<AddEditAddressDialog v-model:isDialogVisible="isEditAddressDialogVisible" />
|
||||
</div>
|
||||
</template>
|
||||
549
resources/js/pages/apps/ecommerce/order/list/AddPrescrption.vue
Normal file
549
resources/js/pages/apps/ecommerce/order/list/AddPrescrption.vue
Normal file
@@ -0,0 +1,549 @@
|
||||
<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,
|
||||
},
|
||||
patientId: {
|
||||
type: Number,
|
||||
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", type);
|
||||
|
||||
|
||||
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()) {
|
||||
console.log('item [[[]]]',medicines.value,prescription_id.value)
|
||||
|
||||
await store.dispatch("savePercriptionOrderDetail", {
|
||||
medicines: medicines.value,
|
||||
prescription_id: prescription_id.value,
|
||||
patient_id:props.patientId,
|
||||
order_id:route.params.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('patientAdded', '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','patientAdded'])
|
||||
|
||||
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 onSubmit = async () => {
|
||||
const { valid } = await refVForm.value.validate()
|
||||
if (valid) {
|
||||
if (calculateAge(dob.value) >= 18) {
|
||||
await store.dispatch('savePercriptionOrder', {
|
||||
first_name: first_name.value,
|
||||
last_name: last_name.value,
|
||||
email: email.value,
|
||||
password: password.value,
|
||||
phone_no: phone_no.value,
|
||||
dob: dob.value,
|
||||
address: addressLine1.value,
|
||||
city: city.value,
|
||||
state: state.value,
|
||||
zip_code:zip_code.value,
|
||||
country: country.value,
|
||||
gender: gender.value
|
||||
})
|
||||
} else {
|
||||
store.dispatch('updateErrorMessage', 'Patient must be 18+')
|
||||
}
|
||||
if (!store.getters.getErrorMsg) {
|
||||
emit('patientAdded', 'success')
|
||||
first_name.value = null
|
||||
last_name.value = null
|
||||
email.value = null
|
||||
password.value = null
|
||||
phone_no.value = null
|
||||
dob.value = null
|
||||
addressLine1.value = null
|
||||
city.value = null
|
||||
state.value = null
|
||||
country.value = null
|
||||
zip_code.value=null
|
||||
}
|
||||
emit('update:isDrawerOpen', false)
|
||||
}
|
||||
}
|
||||
const selectedItem = async (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 () => {
|
||||
window.addEventListener("resize", checkMobile);
|
||||
await store.dispatch('orderPrecriptionList')
|
||||
itemsPrescriptions.value = store.getters.getOrderPrecriptionList
|
||||
console.log(itemsPrescriptions.value)
|
||||
loading.value=false
|
||||
});
|
||||
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">
|
||||
<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="10">
|
||||
<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">
|
||||
<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-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Direction one"
|
||||
:rules="
|
||||
getFieldRules('', 'Direction one is required')
|
||||
"
|
||||
v-model="direction_one"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Direction Two"
|
||||
:rules="
|
||||
getFieldRules('', 'Direction Two is required')
|
||||
"
|
||||
v-model="direction_two"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row style="margin-bottom: 5px">
|
||||
<v-col cols="12" md="12">
|
||||
<!-- <v-text-field label="Comments" :rules="getFieldRules('', 'Comments is required')" v-model="comments"
|
||||
required></v-text-field> -->
|
||||
<v-textarea
|
||||
label="Comments"
|
||||
:rules="getFieldRules('', 'Comments is required')"
|
||||
v-model="comments"
|
||||
required
|
||||
></v-textarea>
|
||||
</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>
|
||||
145
resources/js/pages/apps/ecommerce/order/list/EditOrderNote.vue
Normal file
145
resources/js/pages/apps/ecommerce/order/list/EditOrderNote.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<script setup>
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { PerfectScrollbar } from 'vue3-perfect-scrollbar';
|
||||
import { VForm } from 'vuetify/components/VForm';
|
||||
import { useStore } from 'vuex';
|
||||
const store = useStore()
|
||||
const router = useRouter();
|
||||
const route = useRoute()
|
||||
const props = defineProps({
|
||||
isDrawerOpen: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
userData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
}
|
||||
})
|
||||
const order_note = ref()
|
||||
const getSingleNote = computed(async () => {
|
||||
order_note.value = '';
|
||||
console.log("props",props.userData);
|
||||
if(props.userData.note)
|
||||
order_note.value = props.userData.note.note;
|
||||
// itemId.value=props.userData.id
|
||||
// editedItem.value.id= props.userData.id
|
||||
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:isDrawerOpen', 'addedMessage'])
|
||||
const handleDrawerModelValueUpdate = val => {
|
||||
emit('update:isDrawerOpen', val)
|
||||
}
|
||||
const refVForm = ref()
|
||||
const onSubmit = async () => {
|
||||
const { valid } = await refVForm.value.validate()
|
||||
if (valid) {
|
||||
|
||||
await store.dispatch('UpdateNoteByID', {
|
||||
note: order_note.value,
|
||||
id: props.userData.note.id
|
||||
})
|
||||
|
||||
|
||||
if (!store.getters.getErrorMsg) {
|
||||
emit('addedMessage', 'success')
|
||||
order_note.value = null
|
||||
|
||||
emit('update:isDrawerOpen', false)
|
||||
}
|
||||
|
||||
|
||||
await store.dispatch("orderDetailAgent", {
|
||||
id: route.params.id,
|
||||
});
|
||||
|
||||
emit('notes', store.getters.getPatientOrderDetail.appointment_notes)
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const resetForm = () => {
|
||||
refVForm.value?.reset()
|
||||
emit('update:isDrawerOpen', false)
|
||||
}
|
||||
|
||||
|
||||
// const roleData = ref([]);
|
||||
// const useSortedRole = () => {
|
||||
// const isLoading = ref(false);
|
||||
// const error = ref(null);
|
||||
|
||||
// const sortedRole = computed(() => {
|
||||
// const allOption = { id: '', role: 'Select Any' };
|
||||
// const sortedData = roleData.value.slice().sort((a, b) => {
|
||||
// return a.role.localeCompare(b.role);
|
||||
// });
|
||||
// return [allOption, ...sortedData];
|
||||
// });
|
||||
|
||||
// const fetchRoleData = async () => {
|
||||
// isLoading.value = true;
|
||||
// error.value = null;
|
||||
// try {
|
||||
// await store.dispatch('getAllRolesList');
|
||||
// roleData.value = store.getters.getRolesList || [];
|
||||
// console.log('Fetched Role data:', roleData.value);
|
||||
// } catch (e) {
|
||||
// console.error('Error fetching Role data:', e);
|
||||
// error.value = 'Failed to fetch Role data';
|
||||
// } finally {
|
||||
// isLoading.value = false;
|
||||
// }
|
||||
// };
|
||||
|
||||
// onBeforeMount(fetchRoleData);
|
||||
|
||||
// return { sortedRole, isLoading, error, fetchRoleData };
|
||||
// };
|
||||
// const { sortedRole, isLoading, error, fetchRoleData } = useSortedRole();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VNavigationDrawer :model-value="props.isDrawerOpen" temporary location="end" width="800"
|
||||
@update:model-value="handleDrawerModelValueUpdate">
|
||||
<!-- 👉 Header -->
|
||||
<AppDrawerHeaderSection title="Edit Note" @cancel="$emit('update:isDrawerOpen', false)" />
|
||||
<VDivider />
|
||||
|
||||
<VCard flat>
|
||||
<PerfectScrollbar :options="{ wheelPropagation: false }" class="h-100">
|
||||
<VCardText style="block-size: calc(100vh - 5rem);" v-if="getSingleNote">
|
||||
<VForm ref="refVForm" @submit.prevent="">
|
||||
<VRow>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextarea v-model="order_note" label="Order Note" :rules="[requiredValidator]"
|
||||
placeholder="Note" />
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<div class="d-flex justify-start">
|
||||
<VBtn type="submit" color="primary" class="me-4" @click="onSubmit">
|
||||
Update
|
||||
</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>
|
||||
534
resources/js/pages/apps/ecommerce/order/list/EditPrescrption.vue
Normal file
534
resources/js/pages/apps/ecommerce/order/list/EditPrescrption.vue
Normal file
@@ -0,0 +1,534 @@
|
||||
<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,
|
||||
},
|
||||
patientId: {
|
||||
type: Number,
|
||||
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 itemId = ref()
|
||||
const prescriptionForm = async () => {
|
||||
console.log("toggelUserValue.value.", prescription_id.value);
|
||||
// isLoadingVisible.value = true
|
||||
if (form.value.validate()) {
|
||||
|
||||
console.log(prescription_id.value,route.params.id)
|
||||
await store.dispatch("updatePercriptionOrderDetail", {
|
||||
id:itemId.value,
|
||||
medicines: medicines.value,
|
||||
prescription_id: prescription_id.value,
|
||||
patient_id:props.patientId,
|
||||
order_id:route.params.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('patientAdded', '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','patientAdded'])
|
||||
|
||||
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 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 () => {
|
||||
window.addEventListener("resize", checkMobile);
|
||||
await store.dispatch('orderPrecriptionList')
|
||||
itemsPrescriptions.value = store.getters.getOrderPrecriptionList
|
||||
console.log(itemsPrescriptions.value)
|
||||
loading.value=false
|
||||
});
|
||||
const resetForm = () => {
|
||||
refVForm.value?.reset()
|
||||
emit('update:isDrawerOpen', false)
|
||||
}
|
||||
const getPrescrption = computed(async () => {
|
||||
if (props.userData) {
|
||||
itemId.value=props.userData.id
|
||||
medicines.value = props.userData.prescription.name
|
||||
prescription_id.value=props.userData.prescription_id
|
||||
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
|
||||
direction_one.value= props.userData.direction_one,
|
||||
direction_two.value= props.userData.direction_two,
|
||||
comments.value= props.userData.comments,
|
||||
refil_quantity.value= props.userData.refill_quantity
|
||||
dont_substitute.value= props.userData.dont_substitute
|
||||
}
|
||||
|
||||
});
|
||||
</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">
|
||||
<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="10">
|
||||
<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">
|
||||
<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-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Direction one"
|
||||
:rules="
|
||||
getFieldRules('', 'Direction one is required')
|
||||
"
|
||||
v-model="direction_one"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
label="Direction Two"
|
||||
:rules="
|
||||
getFieldRules('', 'Direction Two is required')
|
||||
"
|
||||
v-model="direction_two"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row style="margin-bottom: 5px">
|
||||
<v-col cols="12" md="12">
|
||||
<!-- <v-text-field label="Comments" :rules="getFieldRules('', 'Comments is required')" v-model="comments"
|
||||
required></v-text-field> -->
|
||||
<v-textarea
|
||||
label="Comments"
|
||||
:rules="getFieldRules('', 'Comments is required')"
|
||||
v-model="comments"
|
||||
required
|
||||
></v-textarea>
|
||||
</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>
|
||||
@@ -0,0 +1,258 @@
|
||||
<script setup>
|
||||
import addOrderNote from '@/pages/apps/ecommerce/order/list/addOrderNote.vue';
|
||||
import EditOrderNote from '@/pages/apps/ecommerce/order/list/EditOrderNote.vue';
|
||||
import store from '@/store';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const isAddCustomerDrawerOpen = ref(false)
|
||||
const isEditCustomerDrawerOpen = ref(false)
|
||||
const deleteDialog = ref(false)
|
||||
const props = defineProps({
|
||||
orderData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
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 notes = ref([]);
|
||||
const historyNotes = computed(async () => {
|
||||
|
||||
let notesData = props.orderData.appointment_notes;
|
||||
console.log("notesData", notesData);
|
||||
for (let data of notesData) {
|
||||
if (data.note_type == 'Notes') {
|
||||
let dataObject = {}
|
||||
dataObject.note = data.note
|
||||
dataObject.doctor = props.orderData.appointment_details.provider_name;
|
||||
dataObject.date = formatDateDate(data.created_at)
|
||||
dataObject.id = data.id
|
||||
//notes.value.push(dataObject)
|
||||
}
|
||||
}
|
||||
notes.value.sort((a, b) => {
|
||||
return b.id - a.id;
|
||||
});
|
||||
console.log("getNotes", notes.value);
|
||||
store.dispatch('updateIsLoading', false)
|
||||
return notes.value
|
||||
});
|
||||
const formatDateDate = (date) => {
|
||||
const messageDate = new Date(date);
|
||||
const options = {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
};
|
||||
return messageDate.toLocaleDateString('en-US', options).replace(/\//g, '-');
|
||||
};
|
||||
onMounted(async () => {
|
||||
let notesData = props.orderData.appointment_notes;
|
||||
console.log("notesData", notesData);
|
||||
for (let data of notesData) {
|
||||
if (data.note_type == 'Notes') {
|
||||
let dataObject = {}
|
||||
dataObject.note = data.note
|
||||
dataObject.doctor = props.orderData.appointment_details.provider_name;
|
||||
dataObject.date = formatDateDate(data.created_at)
|
||||
dataObject.id = data.id
|
||||
dataObject.created_by = data.created_by
|
||||
notes.value.push(dataObject)
|
||||
}
|
||||
}
|
||||
notes.value.sort((a, b) => {
|
||||
return b.id - a.id;
|
||||
});
|
||||
console.log("getNotes", notes.value);
|
||||
});
|
||||
const addNewOrder = () => {
|
||||
store.dispatch("updateIsLoading", true);
|
||||
router.replace(route.query.to && route.query.to != '/admin/orders' ? String(route.query.to) : '/admin/add-order')
|
||||
store.dispatch("updateIsLoading", false);
|
||||
};
|
||||
|
||||
const getNotes = () =>{
|
||||
|
||||
let notesData = store.getters.getPatientOrderDetail.appointment_notes;
|
||||
notes.value = [];
|
||||
for (let data of notesData) {
|
||||
if (data.note_type == 'Notes') {
|
||||
let dataObject = {}
|
||||
dataObject.note = data.note
|
||||
dataObject.doctor = props.orderData.appointment_details.provider_name;
|
||||
dataObject.date = formatDateDate(data.created_at)
|
||||
dataObject.id = data.id
|
||||
dataObject.created_by = data.created_by
|
||||
notes.value.push(dataObject)
|
||||
}
|
||||
}
|
||||
notes.value.sort((a, b) => {
|
||||
return b.id - a.id;
|
||||
});
|
||||
console.log(">>Notes",notes.value);
|
||||
}
|
||||
const editedItem = ref([]);
|
||||
const editedIndex = ref([]);
|
||||
const editItem = async(item) => {
|
||||
isEditCustomerDrawerOpen.value = true;
|
||||
await store.dispatch('GetNoteByID', {
|
||||
id: item.id,
|
||||
})
|
||||
|
||||
editedItem.value = store.getters.getSingleOrderNote
|
||||
console.log(editedItem.value);
|
||||
}
|
||||
const deleteItem = item => {
|
||||
editedIndex.value = notes.value.indexOf(item)
|
||||
editedItem.value = { ...item }
|
||||
deleteDialog.value = true
|
||||
}
|
||||
|
||||
const closeDelete = () => {
|
||||
deleteDialog.value = false
|
||||
// editedIndex.value = -1
|
||||
// editedItem.value = { ...defaultItem.value }
|
||||
}
|
||||
|
||||
const deleteItemConfirm = async () => {
|
||||
|
||||
await store.dispatch('DeleteSingleNote',{
|
||||
id: editedItem.value.id
|
||||
})
|
||||
|
||||
closeDelete()
|
||||
await store.dispatch("orderDetailAgent", {
|
||||
id: route.params.id,
|
||||
});
|
||||
|
||||
getNotes();
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12" md="8" class="d-flex align-center mb-3">
|
||||
<VBtn color="primary" prepend-icon="ri-add-line" @click="isAddCustomerDrawerOpen = !isAddCustomerDrawerOpen" v-if="$can('read', 'Notes Add')">
|
||||
New Note
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
<VCard title="Notes" v-if="notes.length > 0">
|
||||
<VCardText>
|
||||
<VTimeline truncate-line="both" align="start" side="end" line-inset="10" line-color="primary"
|
||||
density="compact" class="v-timeline-density-compact">
|
||||
|
||||
<template v-if="historyNotes">
|
||||
<VTimelineItem dot-color="primary" size="x-small" v-for="(p_note, index) of notes" :key="index">
|
||||
<div class="d-flex justify-space-between align-center mb-3">
|
||||
<span class="app-timeline-title">{{ p_note.note }}</span>
|
||||
<span class="app-timeline-meta">{{ p_note.date }}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-space-between align-center mb-3">
|
||||
<span class="app-timeline-title">{{ p_note.created_by?p_note.created_by:p_note.doctor }}</span>
|
||||
<span class="app-timeline-meta"> <div class="d-flex gap-1">
|
||||
<IconBtn
|
||||
size="small"
|
||||
@click="editItem(p_note)"
|
||||
v-if="$can('read', 'Notes Edit')"
|
||||
>
|
||||
<VIcon icon="ri-pencil-line" />
|
||||
</IconBtn>
|
||||
<IconBtn
|
||||
size="small"
|
||||
@click="deleteItem(p_note)"
|
||||
v-if="$can('read', 'Notes Delete')"
|
||||
>
|
||||
<VIcon icon="ri-delete-bin-line" />
|
||||
</IconBtn>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<!-- <p class="app-timeline-text mb-0">
|
||||
{{ p_note.doctor }}
|
||||
</p> -->
|
||||
</VTimelineItem>
|
||||
</template>
|
||||
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
|
||||
</VCard>
|
||||
|
||||
<VCard v-else>
|
||||
<VAlert border="start" color="primary" variant="tonal">
|
||||
<div class="text-center">No data found</div>
|
||||
</VAlert>
|
||||
</VCard>
|
||||
<addOrderNote @notes="getNotes" v-model:is-drawer-open="isAddCustomerDrawerOpen" @addedMessage="handleParentAdded" />
|
||||
<EditOrderNote @notes="getNotes" v-model:is-drawer-open="isEditCustomerDrawerOpen" :user-data="store.getters.getSingleOrderNote" @addedMessage="handleParentAdded" />
|
||||
<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>
|
||||
<!-- <VList class="pb-0" lines="two" v-if="historyNotes">
|
||||
<template v-if="notes.length > 0" v-for="(p_note, index) of notes" :key="index">
|
||||
<VListItem class="pb-0" border>
|
||||
<VListItemTitle>
|
||||
<span class="pb-0">{{ p_note.note }}</span>
|
||||
<p class="text-start fs-5 mb-0 pb-0 text-grey">
|
||||
<small> {{ p_note.doctor }}</small>
|
||||
</p>
|
||||
<p class="text-end fs-5 mb-0 pb-0 text-grey">
|
||||
<small> {{ p_note.date }}</small>
|
||||
</p>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
<VDivider v-if="index !== notes.length - 1" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<VCard>
|
||||
<VAlert border="start" color="rgb(var(--v-theme-yellow))" variant="tonal">
|
||||
<div class="text-center">No data found</div>
|
||||
</VAlert>
|
||||
|
||||
</VCard>
|
||||
</template>
|
||||
</VList> -->
|
||||
</template>
|
||||
@@ -0,0 +1,446 @@
|
||||
<script setup>
|
||||
import AddPrescrption from '@/pages/apps/ecommerce/order/list/AddPrescrption.vue';
|
||||
import EditPrescrption from '@/pages/apps/ecommerce/order/list/EditPrescrption.vue';
|
||||
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useStore } from "vuex";
|
||||
const store = useStore();
|
||||
const props = defineProps({
|
||||
orderData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const isAddCustomerDrawerOpen = ref(false)
|
||||
const isEditCustomerDrawerOpen = ref(false)
|
||||
const editedItem = ref()
|
||||
const deleteDialog = ref(false)
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const patient_id = ref()
|
||||
const itemsPrescriptions = ref([]);
|
||||
// const patientId = route.params.patient_id;
|
||||
const prescriptionLoaded = ref(false)
|
||||
const doctorName = ref('');
|
||||
const prescription = computed(async () => {
|
||||
await fetchPrescriptions()
|
||||
return prescriptionLoaded.value ? itemsPrescriptions.value : null
|
||||
})
|
||||
const fetchPrescriptions = async () => {
|
||||
store.dispatch('updateIsLoading', true)
|
||||
await getprescriptionList()
|
||||
doctorName.value = props.orderData.appointment_details.provider_name
|
||||
store.dispatch('updateIsLoading', false)
|
||||
prescriptionLoaded.value = true
|
||||
}
|
||||
const getprescriptionList = async () => {
|
||||
|
||||
let prescriptions = props.orderData.prescription;
|
||||
console.log('edit item',prescriptions)
|
||||
// itemsPrescriptions.value = store.getters.getPrescriptionList
|
||||
for (let data of prescriptions) {
|
||||
let dataObject = {}
|
||||
dataObject.brand = data.brand
|
||||
dataObject.direction_one = data.direction_one
|
||||
dataObject.direction_quantity = data.direction_quantity
|
||||
dataObject.direction_two = data.direction_two
|
||||
dataObject.date = formatDateDate(data.created_at)
|
||||
dataObject.dosage = data.dosage
|
||||
dataObject.from = data.from
|
||||
dataObject.name = data.name
|
||||
dataObject.quantity = data.quantity
|
||||
dataObject.refill_quantity = data.refill_quantity
|
||||
dataObject.status = data.status
|
||||
dataObject.comments = data.comments
|
||||
dataObject.created_by = data.created_by
|
||||
dataObject.prescription_date=data.created_at
|
||||
itemsPrescriptions.value.push(dataObject)
|
||||
}
|
||||
itemsPrescriptions.value.sort((a, b) => {
|
||||
return b.id - a.id;
|
||||
});
|
||||
console.log("itemsPrescriptions", itemsPrescriptions.value);
|
||||
|
||||
};
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
const formatTime = (dateString) => {
|
||||
return new Date(dateString).toLocaleTimeString('en-US', {
|
||||
hour: 'numeric',
|
||||
minute: 'numeric'
|
||||
})
|
||||
}
|
||||
const getStatusColor = (status) => {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
return 'warning'; // Use Vuetify's warning color (typically yellow)
|
||||
case 'shipped':
|
||||
return '#45B8AC'; // Use Vuetify's primary color (typically blue)
|
||||
case 'delivered':
|
||||
return 'green';
|
||||
case 'returned':
|
||||
return 'red';
|
||||
case 'results':
|
||||
return 'blue';
|
||||
default:
|
||||
return 'grey'; // Use Vuetify's grey color for any other status
|
||||
}
|
||||
};
|
||||
onMounted(async () => {
|
||||
let prescriptions = props.orderData.prescription;
|
||||
console.log('props.orderData', props.orderData.prescription)
|
||||
patient_id.value= props.orderData.patient_details.id
|
||||
itemsPrescriptions.value = prescriptions
|
||||
});
|
||||
const editItem = async (item) => {
|
||||
isEditCustomerDrawerOpen.value = true
|
||||
|
||||
await store.dispatch('getOrderDetailPercrptionByID', {
|
||||
id: item.patient_prescription_id,
|
||||
})
|
||||
|
||||
editedItem.value = store.getters.getOrderDetailPrecriptionList
|
||||
console.log(store.getters.getOrderDetailPrecriptionList)
|
||||
// editDialog.value = true
|
||||
}
|
||||
const deleteItem = item => {
|
||||
|
||||
console.log('del', item)
|
||||
deleteDialog.value = true
|
||||
editedItem.value=item
|
||||
}
|
||||
const deleteItemConfirm = async () => {
|
||||
console.log('editedIndex.value', editedItem.value.patient_prescription_id)
|
||||
await store.dispatch('deleteOrderDetailPerscription', {
|
||||
id: editedItem.value.patient_prescription_id
|
||||
})
|
||||
closeDelete()
|
||||
}
|
||||
const closeDelete = async() => {
|
||||
|
||||
deleteDialog.value = false
|
||||
await handlePatientAdded('success')
|
||||
}
|
||||
const handlePatientAdded = async (msg) => {
|
||||
if (msg == 'success') {
|
||||
|
||||
store.dispatch("updateIsLoading", true);
|
||||
await store.dispatch("orderDetailAgent", {
|
||||
id: route.params.id,
|
||||
});
|
||||
let orderData = store.getters.getPatientOrderDetail;
|
||||
itemsPrescriptions.value =orderData.prescription
|
||||
|
||||
store.dispatch("updateIsLoading", false);
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<VCol cols="12" md="3" v-if="$can('read', 'Prescription Add')">
|
||||
<VBtn prepend-icon="ri-add-line" @click="isAddCustomerDrawerOpen = !isAddCustomerDrawerOpen">
|
||||
Add Prescription
|
||||
</VBtn>
|
||||
</VCol>
|
||||
<template v-if="itemsPrescriptions.length > 0">
|
||||
<v-row>
|
||||
<v-col v-for="prescription in itemsPrescriptions" :key="prescription.id" cols="12" md="4">
|
||||
|
||||
<v-card class="mx-auto mb-4" elevation="4" hover>
|
||||
<v-img height="200" src="https://cdn.pixabay.com/photo/2016/11/23/15/03/medication-1853400_1280.jpg"
|
||||
class="white--text align-end" gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)">
|
||||
<v-card-title class="text-h5" style="color: #fff;">{{ prescription.prescription_name
|
||||
}}</v-card-title>
|
||||
</v-img>
|
||||
|
||||
<v-card-text>
|
||||
|
||||
|
||||
|
||||
<v-chip :color="getStatusColor(prescription.status)" text-color="white" small class="mr-2">
|
||||
{{ prescription.status }}
|
||||
</v-chip>
|
||||
<IconBtn
|
||||
size="small"
|
||||
|
||||
@click="editItem(prescription)"
|
||||
v-if="$can('read', 'Prescription Edit')"
|
||||
>
|
||||
|
||||
<VIcon icon="ri-pencil-line" />
|
||||
</IconBtn>
|
||||
<IconBtn
|
||||
size="small"
|
||||
@click="deleteItem(prescription)"
|
||||
v-if="$can('read', 'Prescription Delete')"
|
||||
>
|
||||
<VIcon icon="ri-delete-bin-line" />
|
||||
</IconBtn>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider class="mx-4"></v-divider>
|
||||
|
||||
<v-card-text>
|
||||
<v-row dense>
|
||||
<v-col cols="6">
|
||||
<v-icon small color="primary">ri-capsule-line</v-icon>
|
||||
<span class="ml-1">Dosage:{{ prescription.dosage }}</span>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-icon small color="primary">ri-medicine-bottle-line</v-icon>
|
||||
<span class="ml-1">Quantity:{{ prescription.quantity }}</span>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-icon small color="primary">ri-calendar-line</v-icon>
|
||||
<span class="ml-1">{{ formatDate(prescription.prescription_date) }}</span>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-icon small color="primary">ri-time-line</v-icon>
|
||||
<span class="ml-1">{{ formatTime(prescription.prescription_date) }}</span>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn color="primary" text>
|
||||
More Details
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="prescription.show = !prescription.show">
|
||||
{{ prescription.show ? '' : '' }}
|
||||
<v-icon right color="primary">
|
||||
{{ prescription.show ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line' }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
|
||||
<v-expand-transition>
|
||||
<div v-show="prescription.show">
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<v-row dense>
|
||||
<v-col cols="12">
|
||||
<strong>Add By:</strong> {{ prescription.created_by}}
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<strong>Brand:</strong> {{ prescription.brand }}
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<strong>From:</strong> {{ prescription.from }}
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<strong>Direction One:</strong> {{ prescription.direction_one }}
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<strong>Direction Two:</strong> {{ prescription.direction_two }}
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<strong>Refill Quantity:</strong> {{ prescription.refill_quantity }}
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<strong>Direction Quantity:</strong> {{ prescription.direction_quantity }}
|
||||
</v-col>
|
||||
<v-col cols="12" v-if="prescription.comments">
|
||||
<strong>Comments:</strong> {{ prescription.comments }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<VExpansionPanels variant="accordion" style="display: none;">
|
||||
<VExpansionPanel v-for="(item, index) in itemsPrescriptions" :key="index">
|
||||
<div>
|
||||
|
||||
<VExpansionPanelTitle collapse-icon="mdi-chevron-down" expand-icon="mdi-chevron-right"
|
||||
style="margin-left: 0px !important;">
|
||||
<p class=""><b> {{ item.name }}</b>
|
||||
<br />
|
||||
<div class=" pt-2"> {{ doctorName }}</div>
|
||||
<div class=" pt-2">{{ item.date }}</div>
|
||||
</p>
|
||||
|
||||
|
||||
<v-row>
|
||||
|
||||
</v-row>
|
||||
|
||||
<span class="v-expansion-panel-title__icon badge text-warning"
|
||||
v-if="item.status == null">Pending</span>
|
||||
<span class="v-expansion-panel-title__icon badge" v-else>
|
||||
<v-chip :color="getStatusColor(item.status)" label size="small" variant="text">
|
||||
{{ item.status }}
|
||||
</v-chip></span>
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText class="pt-0">
|
||||
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Brand:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p>{{ item.brand }}</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>From:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p>{{ item.from }}</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Dosage:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p>{{ item.dosage }}</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Quantity:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p>{{ item.quantity }}</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Direction Quantity:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8" sm="6">
|
||||
<p>{{ item.direction_quantity }}</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Direction One:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8" sm="6">
|
||||
<p>{{ item.direction_one }} </p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Direction Two:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8" sm="6">
|
||||
<p>{{ item.direction_two }} </p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Refill Quantity:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8" sm="6">
|
||||
<p>{{ item.refill_quantity }}</p>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Status:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8" sm="6">
|
||||
<p v-if="item.status == null" class="text-warning">Pending</p>
|
||||
<p v-else>{{ item.status }}</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class='mt-1'>
|
||||
<v-col cols="12" md="4" sm="6">
|
||||
<p class='heading'><b>Comments:</b></p>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8" sm="8">
|
||||
<p>{{ item.comments }} </p>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
|
||||
</VExpansionPanelText>
|
||||
</div>
|
||||
|
||||
|
||||
</VExpansionPanel>
|
||||
<br />
|
||||
</VExpansionPanels>
|
||||
</template>
|
||||
<template v-else="prescriptionLoaded">
|
||||
<VCard>
|
||||
<VCard>
|
||||
<VAlert border="start" color="primary" variant="tonal">
|
||||
<div class="text-center">No data found</div>
|
||||
</VAlert>
|
||||
|
||||
</VCard>
|
||||
</VCard>
|
||||
|
||||
</template>
|
||||
<AddPrescrption v-model:is-drawer-open="isAddCustomerDrawerOpen" :patient-id="patient_id" @patientAdded="handlePatientAdded" />
|
||||
<EditPrescrption v-model:is-drawer-open="isEditCustomerDrawerOpen" :patient-id="patient_id" :user-data="store.getters.getOrderDetailPrecriptionList" @patientAdded="handlePatientAdded" />
|
||||
<VDialog v-model="deleteDialog" max-width="500px">
|
||||
<VCard>
|
||||
<VCardTitle>
|
||||
Are you sure you want to delete this item?
|
||||
</VCardTitle>
|
||||
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
|
||||
<VBtn color="error" variant="outlined" @click="closeDelete">
|
||||
Cancel
|
||||
</VBtn>
|
||||
|
||||
<VBtn color="success" variant="elevated" @click="deleteItemConfirm">
|
||||
OK
|
||||
</VBtn>
|
||||
|
||||
<VSpacer />
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
button.v-expansion-panel-title {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title.bg-secondary {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.v-expansion-panel-title {
|
||||
background-color: rgb(var(--v-theme-yellow)) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
span.v-expansion-panel-title__icon {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
|
||||
span.v-expansion-panel-title__icon {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.v-expansion-panel {
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
135
resources/js/pages/apps/ecommerce/order/list/addOrderNote.vue
Normal file
135
resources/js/pages/apps/ecommerce/order/list/addOrderNote.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<script setup>
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { PerfectScrollbar } from 'vue3-perfect-scrollbar';
|
||||
import { VForm } from 'vuetify/components/VForm';
|
||||
import { useStore } from 'vuex';
|
||||
const store = useStore()
|
||||
const router = useRouter();
|
||||
const route = useRoute()
|
||||
const props = defineProps({
|
||||
isDrawerOpen: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const order_note = ref()
|
||||
|
||||
|
||||
const emit = defineEmits(['update:isDrawerOpen', 'addedMessage'])
|
||||
const handleDrawerModelValueUpdate = val => {
|
||||
emit('update:isDrawerOpen', val)
|
||||
}
|
||||
const refVForm = ref()
|
||||
const onSubmit = async () => {
|
||||
const { valid } = await refVForm.value.validate()
|
||||
if (valid) {
|
||||
|
||||
await store.dispatch('addOrderNote', {
|
||||
note: order_note.value,
|
||||
orderId:route.params.id
|
||||
})
|
||||
|
||||
|
||||
if (!store.getters.getErrorMsg) {
|
||||
emit('addedMessage', 'success')
|
||||
order_note.value = null
|
||||
|
||||
emit('update:isDrawerOpen', false)
|
||||
}
|
||||
|
||||
|
||||
await store.dispatch("orderDetailAgent", {
|
||||
id: route.params.id,
|
||||
});
|
||||
|
||||
emit('notes', store.getters.getPatientOrderDetail.appointment_notes)
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const resetForm = () => {
|
||||
refVForm.value?.reset()
|
||||
emit('update:isDrawerOpen', false)
|
||||
}
|
||||
|
||||
|
||||
// const roleData = ref([]);
|
||||
// const useSortedRole = () => {
|
||||
// const isLoading = ref(false);
|
||||
// const error = ref(null);
|
||||
|
||||
// const sortedRole = computed(() => {
|
||||
// const allOption = { id: '', role: 'Select Any' };
|
||||
// const sortedData = roleData.value.slice().sort((a, b) => {
|
||||
// return a.role.localeCompare(b.role);
|
||||
// });
|
||||
// return [allOption, ...sortedData];
|
||||
// });
|
||||
|
||||
// const fetchRoleData = async () => {
|
||||
// isLoading.value = true;
|
||||
// error.value = null;
|
||||
// try {
|
||||
// await store.dispatch('getAllRolesList');
|
||||
// roleData.value = store.getters.getRolesList || [];
|
||||
// console.log('Fetched Role data:', roleData.value);
|
||||
// } catch (e) {
|
||||
// console.error('Error fetching Role data:', e);
|
||||
// error.value = 'Failed to fetch Role data';
|
||||
// } finally {
|
||||
// isLoading.value = false;
|
||||
// }
|
||||
// };
|
||||
|
||||
// onBeforeMount(fetchRoleData);
|
||||
|
||||
// return { sortedRole, isLoading, error, fetchRoleData };
|
||||
// };
|
||||
// const { sortedRole, isLoading, error, fetchRoleData } = useSortedRole();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VNavigationDrawer :model-value="props.isDrawerOpen" temporary location="end" width="800"
|
||||
@update:model-value="handleDrawerModelValueUpdate">
|
||||
<!-- 👉 Header -->
|
||||
<AppDrawerHeaderSection title="Add Note" @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">
|
||||
<VTextarea v-model="order_note" label="Order Note" :rules="[requiredValidator]"
|
||||
placeholder="Note" />
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<div class="d-flex justify-start">
|
||||
<VBtn type="submit" color="primary" class="me-4" @click="onSubmit">
|
||||
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>
|
||||
374
resources/js/pages/apps/ecommerce/order/list/index.vue
Normal file
374
resources/js/pages/apps/ecommerce/order/list/index.vue
Normal file
@@ -0,0 +1,374 @@
|
||||
<script setup>
|
||||
import mastercard from '@images/logos/mastercard.png';
|
||||
import paypal from '@images/logos/paypal.png';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
const store = useStore();
|
||||
const ordersList = ref([]);
|
||||
const widgetData = ref([
|
||||
{
|
||||
title: 'Pending Payment',
|
||||
value: 56,
|
||||
icon: 'ri-calendar-2-line',
|
||||
},
|
||||
{
|
||||
title: 'Completed',
|
||||
value: 12689,
|
||||
icon: 'ri-check-double-line',
|
||||
},
|
||||
{
|
||||
title: 'Refunded',
|
||||
value: 124,
|
||||
icon: 'ri-wallet-3-line',
|
||||
},
|
||||
{
|
||||
title: 'Failed',
|
||||
value: 32,
|
||||
icon: 'ri-error-warning-line',
|
||||
},
|
||||
])
|
||||
|
||||
const searchQuery = ref('')
|
||||
|
||||
// Data table options
|
||||
const itemsPerPage = ref(10)
|
||||
const page = ref(1)
|
||||
const sortBy = ref()
|
||||
const orderBy = ref()
|
||||
|
||||
// Data table Headers
|
||||
const headers = [
|
||||
{
|
||||
title: 'Order',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: 'Patient',
|
||||
key: 'patient_name',
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title: 'Actions',
|
||||
key: 'actions',
|
||||
sortable: false,
|
||||
},
|
||||
]
|
||||
|
||||
const updateOptions = options => {
|
||||
page.value = options.page
|
||||
sortBy.value = options.sortBy[0]?.key
|
||||
orderBy.value = options.sortBy[0]?.order
|
||||
}
|
||||
|
||||
const resolvePaymentStatus = status => {
|
||||
if (status === 1)
|
||||
return {
|
||||
text: 'Paid',
|
||||
color: 'success',
|
||||
}
|
||||
if (status === 2)
|
||||
return {
|
||||
text: 'Pending',
|
||||
color: 'warning',
|
||||
}
|
||||
if (status === 3)
|
||||
return {
|
||||
text: 'Cancelled',
|
||||
color: 'secondary',
|
||||
}
|
||||
if (status === 4)
|
||||
return {
|
||||
text: 'Failed',
|
||||
color: 'error',
|
||||
}
|
||||
}
|
||||
|
||||
const resolveStatus = status => {
|
||||
if (status === 'Delivered')
|
||||
return {
|
||||
text: 'Delivered',
|
||||
color: 'success',
|
||||
}
|
||||
if (status === 'Out for Delivery')
|
||||
return {
|
||||
text: 'Out for Delivery',
|
||||
color: 'primary',
|
||||
}
|
||||
if (status === 'Ready to Pickup')
|
||||
return {
|
||||
text: 'Ready to Pickup',
|
||||
color: 'info',
|
||||
}
|
||||
if (status === 'Dispatched')
|
||||
return {
|
||||
text: 'Dispatched',
|
||||
color: 'warning',
|
||||
}
|
||||
}
|
||||
const isLoading = ref(true);
|
||||
onMounted(async () => {
|
||||
store.dispatch("updateIsLoading", true);
|
||||
await store.dispatch("orderList");
|
||||
ordersList.value = store.getters.getOrderList;
|
||||
console.log("ordersList", ordersList.value);
|
||||
isLoading.value = false;
|
||||
});
|
||||
const orders = computed(() => ordersList.value)
|
||||
const totalOrder = computed(() => ordersList.value.length)
|
||||
|
||||
const deleteOrder = async id => {
|
||||
await $api(`/apps/ecommerce/orders/${ id }`, { method: 'DELETE' })
|
||||
fetchOrders()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VCard class="mb-6">
|
||||
<VCardText class="px-2">
|
||||
<VRow>
|
||||
<template
|
||||
v-for="(data, index) in widgetData"
|
||||
:key="index"
|
||||
>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="3"
|
||||
class="px-6"
|
||||
>
|
||||
<div
|
||||
class="d-flex justify-space-between"
|
||||
:class="$vuetify.display.xs ? 'product-widget' : $vuetify.display.sm ? index < 2 ? 'product-widget' : '' : ''"
|
||||
>
|
||||
<div class="d-flex flex-column gap-y-1">
|
||||
<h4 class="text-h4">
|
||||
{{ data.value }}
|
||||
</h4>
|
||||
<span class="text-base text-capitalize">
|
||||
{{ data.title }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<VAvatar
|
||||
variant="tonal"
|
||||
rounded
|
||||
size="42"
|
||||
>
|
||||
<VIcon
|
||||
:icon="data.icon"
|
||||
size="26"
|
||||
/>
|
||||
</VAvatar>
|
||||
</div>
|
||||
</VCol>
|
||||
<VDivider
|
||||
v-if="$vuetify.display.mdAndUp ? index !== widgetData.length - 1 : $vuetify.display.smAndUp ? index % 2 === 0 : false"
|
||||
vertical
|
||||
inset
|
||||
length="100"
|
||||
/>
|
||||
</template>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<div class="d-flex justify-sm-space-between align-center justify-start flex-wrap gap-4">
|
||||
<VTextField
|
||||
v-model="searchQuery"
|
||||
placeholder="Search Order"
|
||||
density="compact"
|
||||
style=" max-inline-size: 200px; min-inline-size: 200px;"
|
||||
/>
|
||||
|
||||
<VBtn
|
||||
prepend-icon="ri-upload-2-line"
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
>
|
||||
Export
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VDataTableServer
|
||||
:headers="headers"
|
||||
:items="orders"
|
||||
:search="searchQuery"
|
||||
item-value="order"
|
||||
show-select
|
||||
class="text-no-wrap"
|
||||
|
||||
>
|
||||
<!-- Order ID -->
|
||||
<template #item.order="{ item }">
|
||||
<RouterLink :to="{ name: 'apps-ecommerce-order-details-id', params: { id: item.id } }">
|
||||
#{{ item.order_id }}
|
||||
</RouterLink>
|
||||
</template>
|
||||
|
||||
<!-- Date -->
|
||||
<template #item.date="{ item }">
|
||||
{{ new Date(item.date).toDateString() }}
|
||||
</template>
|
||||
|
||||
<!-- Customers -->
|
||||
<template #item.customers="{ item }">
|
||||
<div class="d-flex align-center">
|
||||
<VAvatar
|
||||
size="34"
|
||||
:variant="!item.avatar.length ? 'tonal' : undefined"
|
||||
:rounded="1"
|
||||
class="me-4"
|
||||
>
|
||||
<VImg
|
||||
v-if="item.avatar"
|
||||
:src="item.avatar"
|
||||
/>
|
||||
|
||||
<span
|
||||
v-else
|
||||
class="font-weight-medium"
|
||||
>{{ avatarText(item.patient_name) }}</span>
|
||||
</VAvatar>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<RouterLink :to="{ name: 'pages-user-profile-tab', params: { tab: 'profile' } }">
|
||||
<div class="text-high-emphasis font-weight-medium">
|
||||
{{ item.patient_name }}
|
||||
</div>
|
||||
</RouterLink>
|
||||
<span class="text-sm">{{ item.patient_email }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Payments -->
|
||||
<template #item.payment="{ item }">
|
||||
<div
|
||||
:class="`text-${resolvePaymentStatus(item.payment)?.color}`"
|
||||
class="d-flex align-center font-weight-medium"
|
||||
>
|
||||
<VIcon
|
||||
size="10"
|
||||
icon="ri-circle-fill"
|
||||
class="me-2"
|
||||
/>
|
||||
<span>{{ resolvePaymentStatus(item.payment)?.text }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Status -->
|
||||
<template #item.status="{ item }">
|
||||
<VChip
|
||||
v-bind="resolveStatus(item.status)"
|
||||
size="small"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Method -->
|
||||
<template #item.method="{ item }">
|
||||
<div class="d-flex align-start gap-x-2">
|
||||
<img :src="item.method === 'mastercard' ? mastercard : paypal">
|
||||
<div>
|
||||
<VIcon
|
||||
icon="ri-more-line"
|
||||
class="me-2"
|
||||
/>
|
||||
<span v-if="item.method === 'mastercard'">
|
||||
{{ item.methodNumber }}
|
||||
</span>
|
||||
<span v-else>
|
||||
@gmail.com
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Actions -->
|
||||
<template #item.actions="{ item }">
|
||||
<IconBtn size="small">
|
||||
<VIcon icon="ri-more-2-line" />
|
||||
<VMenu activator="parent">
|
||||
<VList>
|
||||
<VListItem value="view">
|
||||
<RouterLink
|
||||
:to="{ name: 'apps-ecommerce-order-details-id', params: { id: item.order } }"
|
||||
class="text-high-emphasis"
|
||||
>
|
||||
View
|
||||
</RouterLink>
|
||||
</VListItem>
|
||||
<VListItem
|
||||
value="delete"
|
||||
@click="deleteOrder(item.id)"
|
||||
>
|
||||
Delete
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</IconBtn>
|
||||
</template>
|
||||
|
||||
<!-- Pagination -->
|
||||
<template #bottom>
|
||||
<VDivider />
|
||||
|
||||
<div class="d-flex justify-end flex-wrap gap-x-6 px-2 py-1">
|
||||
<div class="d-flex align-center gap-x-2 text-medium-emphasis text-base">
|
||||
Rows Per Page:
|
||||
<VSelect
|
||||
v-model="itemsPerPage"
|
||||
class="per-page-select"
|
||||
variant="plain"
|
||||
:items="[10, 20, 25, 50, 100]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="d-flex align-center text-base text-high-emphasis me-2 mb-0">
|
||||
{{ paginationMeta({ page, itemsPerPage }, totalOrder) }}
|
||||
</p>
|
||||
|
||||
<div class="d-flex gap-x-2 align-center me-2">
|
||||
<VBtn
|
||||
class="flip-in-rtl"
|
||||
icon="ri-arrow-left-s-line"
|
||||
variant="text"
|
||||
density="comfortable"
|
||||
color="high-emphasis"
|
||||
:disabled="page <= 1"
|
||||
@click="page <= 1 ? page = 1 : page--"
|
||||
/>
|
||||
|
||||
<VBtn
|
||||
class="flip-in-rtl"
|
||||
icon="ri-arrow-right-s-line"
|
||||
density="comfortable"
|
||||
variant="text"
|
||||
color="high-emphasis"
|
||||
:disabled="page >= Math.ceil(totalOrder / itemsPerPage)"
|
||||
@click="page >= Math.ceil(totalOrder / itemsPerPage) ? page = Math.ceil(totalOrder / itemsPerPage) : page++ "
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</VDataTableServer>
|
||||
</VCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#customer-link{
|
||||
&:hover{
|
||||
color: '#000' !important
|
||||
}
|
||||
}
|
||||
|
||||
.product-widget{
|
||||
border-block-end: 1px solid rgba(var(--v-theme-on-surface), var(--v-border-opacity));
|
||||
padding-block-end: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
|
||||
import Notes from "@/pages/apps/ecommerce/order/list//OrderDetailNotes.vue";
|
||||
import OrderDetail from "@/pages/apps/ecommerce/order/list//orders-detail.vue";
|
||||
import Prescription from "@/pages/apps/ecommerce/order/list/OrderDetailPrecrption.vue";
|
||||
const route = useRoute();
|
||||
const isConfirmDialogVisible = ref(false);
|
||||
const isUserInfoEditDialogVisible = ref(false);
|
||||
const isEditAddressDialogVisible = ref(false);
|
||||
const currentTab = ref("tab-1");
|
||||
|
||||
import { useStore } from "vuex";
|
||||
const store = useStore();
|
||||
const orderData = ref(null);
|
||||
const pateintDetail = ref({});
|
||||
const productItems = ref([]);
|
||||
const userTab = ref(null);
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
icon: "mdi-clipboard-text-outline",
|
||||
title: "Order Detail",
|
||||
action: 'read',
|
||||
subject: "Order Detail Tab",
|
||||
},
|
||||
{
|
||||
icon: "mdi-note-text-outline",
|
||||
title: "Notes",
|
||||
action: 'read',
|
||||
subject: "Notes Tab",
|
||||
},
|
||||
{
|
||||
icon: "mdi-prescription",
|
||||
title: "Prescriptions",
|
||||
action: 'read',
|
||||
subject: "Prescription Tab",
|
||||
},
|
||||
];
|
||||
const filteredOrders = computed(() => {
|
||||
let filtered = store.getters.getPatientOrderDetail;
|
||||
|
||||
return filtered;
|
||||
});
|
||||
onMounted(async () => {
|
||||
store.dispatch("updateIsLoading", true);
|
||||
await store.dispatch("orderDetailAgent", {
|
||||
id: route.params.id,
|
||||
});
|
||||
orderData.value = store.getters.getPatientOrderDetail;
|
||||
console.log(orderData.value);
|
||||
store.dispatch("updateIsLoading", false);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<VTabs v-model="userTab" grow>
|
||||
<VTab
|
||||
v-for="tab in tabs"
|
||||
:key="tab.icon"
|
||||
>
|
||||
<VIcon
|
||||
start
|
||||
:icon="tab.icon"
|
||||
v-if="$can(tab.action, tab.subject)"
|
||||
/>
|
||||
<span v-if="$can(tab.action, tab.subject)">{{ tab.title }}</span>
|
||||
|
||||
</VTab>
|
||||
</VTabs>
|
||||
<VWindow
|
||||
v-model="userTab"
|
||||
class="mt-6 disable-tab-transition"
|
||||
:touch="false"
|
||||
>
|
||||
<VWindowItem v-if="$can('read', 'Order Detail Tab')">
|
||||
<OrderDetail />
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem v-if="$can('read', 'Notes Tab')">
|
||||
<Notes :order-data="orderData" />
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem v-if="$can('read', 'Prescription Tab')">
|
||||
<Prescription :order-data="orderData" />
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
1117
resources/js/pages/apps/ecommerce/order/list/order-list-edit.vue
Normal file
1117
resources/js/pages/apps/ecommerce/order/list/order-list-edit.vue
Normal file
File diff suppressed because it is too large
Load Diff
885
resources/js/pages/apps/ecommerce/order/list/orders-detail.vue
Normal file
885
resources/js/pages/apps/ecommerce/order/list/orders-detail.vue
Normal file
@@ -0,0 +1,885 @@
|
||||
<script setup>
|
||||
import avatar1 from "@images/avatars/avatar-1.png";
|
||||
import moment from 'moment-timezone';
|
||||
import { computed, onMounted, reactive, ref } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
const route = useRoute();
|
||||
const isConfirmDialogVisible = ref(false);
|
||||
const isUserInfoEditDialogVisible = ref(false);
|
||||
const isEditAddressDialogVisible = ref(false);
|
||||
const scheduleDate = ref('');
|
||||
const scheduleTime = ref('');
|
||||
const isLoading = ref(true);
|
||||
const state = reactive({
|
||||
addLabOrder: false,
|
||||
selectedTestKitId: null,
|
||||
valid: false,
|
||||
testKits: [],
|
||||
item_id: null,
|
||||
labKitList: [],
|
||||
statusItem:null
|
||||
});
|
||||
const getFieldRules = (fieldName, errorMessage) => {
|
||||
if (fieldName) {
|
||||
return [
|
||||
v => !!v || `${errorMessage}`,
|
||||
// Add more validation rules as needed
|
||||
];
|
||||
}
|
||||
|
||||
};
|
||||
const headers = [
|
||||
{
|
||||
title: "Product",
|
||||
key: "title",
|
||||
},
|
||||
{
|
||||
title: "Price",
|
||||
key: "price",
|
||||
},
|
||||
{
|
||||
title: "Quantity",
|
||||
key: "quantity",
|
||||
},
|
||||
{
|
||||
title: "status",
|
||||
key: "status",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Total",
|
||||
key: "total",
|
||||
sortable: false,
|
||||
},
|
||||
];
|
||||
const items = [{ 'key': 'Pending','value':'Pending' }, { 'key':'Processing','value':'Processing' }, { 'key':'Delivered','value':'Delivered' }, { 'key':'Canceled','value':'Canceled' },{ 'key':'Failed','value':'Failed' },{ 'key':'Refunded','value':'Refunded' }]
|
||||
|
||||
|
||||
const headersLab = [
|
||||
{
|
||||
title: "Product",
|
||||
key: "item_name",
|
||||
},
|
||||
{
|
||||
title: "Lab Kit",
|
||||
key: "lab_kit_name",
|
||||
},
|
||||
{
|
||||
title: "Status",
|
||||
key: "status",
|
||||
},
|
||||
{
|
||||
title: "Results",
|
||||
key: "result",
|
||||
},
|
||||
|
||||
];
|
||||
const openDialog = (item) => {
|
||||
|
||||
state.item_id = item.id
|
||||
state.addLabOrder = true
|
||||
};
|
||||
const openPdfInNewTab = (url) => {
|
||||
window.open(url, '_blank')
|
||||
}
|
||||
const storeTestKit = async () => {
|
||||
await store.dispatch('saveOrderLabKitBYitems', {
|
||||
lab_kit_id: state.selectedTestKitId,
|
||||
item_id: state.item_id,
|
||||
cart_id: route.params.id
|
||||
})
|
||||
|
||||
console.log('Selected Test Kit:', state.selectedTestKitId);
|
||||
|
||||
state.addLabOrder = false;
|
||||
state.selectedTestKitId = null
|
||||
state.item_id = null
|
||||
|
||||
};
|
||||
const store = useStore();
|
||||
const orderData = ref(null);
|
||||
const pateintDetail = ref({});
|
||||
const productItems = ref([]);
|
||||
const card_number = ref(null)
|
||||
const cvv = ref(null)
|
||||
const expiration_year = ref(null)
|
||||
const expiration_month = ref(null)
|
||||
const filteredOrders = computed(() => {
|
||||
let filtered = store.getters.getPatientOrderDetail;
|
||||
|
||||
return filtered;
|
||||
});
|
||||
|
||||
const formatDateActviy1 = (date) => {
|
||||
const messageDate = new Date(date);
|
||||
const dayFormatter = new Intl.DateTimeFormat('en-US', { weekday: 'long' });
|
||||
const timeFormatter = new Intl.DateTimeFormat('en-US', {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
hour12: true
|
||||
});
|
||||
return `${dayFormatter.format(messageDate)} ${timeFormatter.format(messageDate)}`;
|
||||
};
|
||||
const formatDateActviy = (date) => {
|
||||
const messageDate = new Date(date);
|
||||
const options = {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
};
|
||||
return messageDate.toLocaleDateString('en-US', options).replace(/\//g, '-');
|
||||
};
|
||||
const formatDate = (date) => {
|
||||
const messageDate = new Date(date);
|
||||
const options = {
|
||||
year: "numeric",
|
||||
month: "numeric",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
|
||||
hour12: false,
|
||||
};
|
||||
const formattedDate = messageDate
|
||||
.toLocaleString("en-US", options)
|
||||
.replace(/\//g, "-");
|
||||
return `${formattedDate}`;
|
||||
};
|
||||
const convertUtcDateTimeToLocal = (utcDate, utcTime, type) => {
|
||||
const utcDateTime = `${utcDate}T${utcTime}Z`; // Use Z to denote UTC timezone explicitly
|
||||
const momentObj = moment.utc(utcDateTime).local(); // Convert UTC to local time
|
||||
|
||||
if (type === 'date') {
|
||||
return momentObj.format('YYYY-MM-DD'); // Return local date
|
||||
} else if (type === 'time') {
|
||||
return momentObj.format('HH:mm:ss'); // Return local time
|
||||
} else {
|
||||
throw new Error("Invalid type specified. Use 'date' or 'time'.");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
function totalCallDuration(start_time, end_time) {
|
||||
console.log(start_time, end_time);
|
||||
const startMoment = moment(start_time);
|
||||
const endMoment = moment(end_time);
|
||||
|
||||
// Calculate the duration
|
||||
const duration = moment.duration(endMoment.diff(startMoment));
|
||||
const hours = duration.hours();
|
||||
const thours = `${String(hours).padStart(2, "0")}`;
|
||||
const minutes = duration.minutes();
|
||||
const tminutes = `${String(minutes).padStart(2, "0")}`;
|
||||
const seconds = duration.seconds();
|
||||
const tsecond = `${String(seconds).padStart(2, "0")}`;
|
||||
let durationText;
|
||||
if (hours === 0 && minutes === 0) {
|
||||
//for second
|
||||
durationText = ` 00:00:${tsecond}`;
|
||||
} else if (hours === 0 && minutes > 0) {
|
||||
//for minutes
|
||||
durationText = `00:${tminutes}:${tsecond}`;
|
||||
} else if (hours > 0) {
|
||||
//for hours
|
||||
durationText = `${thours}:${tminutes}:${tsecond}`;
|
||||
}
|
||||
const totalDuration = durationText;
|
||||
console.log("Duration:", durationText);
|
||||
// You may need to adjust this function based on your actual data structure
|
||||
// For example, if you have separate first name and last name properties in each appointment object
|
||||
return totalDuration; // For now, just return the first name
|
||||
}
|
||||
const testKits = computed(async () => {
|
||||
//await store.dispatch('getLabKitProductList', {})
|
||||
// console.log(store.getters.getLabOrderProductList)
|
||||
|
||||
//state.testKits = store.getters.getLabOrderProductList
|
||||
});
|
||||
onMounted(async () => {
|
||||
await store.dispatch("orderDetailAgent", {
|
||||
id: route.params.id,
|
||||
});
|
||||
await store.dispatch("orderPaymentDetails", {
|
||||
id: route.params.id,
|
||||
});
|
||||
if(store.getters.getOrderPaymentDetails)
|
||||
{
|
||||
card_number.value = store.getters.getOrderPaymentDetails.card_number
|
||||
cvv.value = store.getters.getOrderPaymentDetails.cvv
|
||||
expiration_year.value = store.getters.getOrderPaymentDetails.expiration_year
|
||||
expiration_month.value = store.getters.getOrderPaymentDetails.expiration_month
|
||||
}
|
||||
orderData.value = store.getters.getPatientOrderDetail;
|
||||
console.log(orderData.value);
|
||||
if (orderData.value.appointment_details) {
|
||||
scheduleDate.value = getConvertedDate(
|
||||
convertUtcTime(
|
||||
orderData.value.appointment_details.appointment_time,
|
||||
orderData.value.appointment_details.appointment_date,
|
||||
orderData.value.appointment_details.timezone
|
||||
)
|
||||
);
|
||||
scheduleTime.value = getConvertedTime(
|
||||
convertUtcTime(
|
||||
orderData.value.appointment_details.appointment_time,
|
||||
orderData.value.appointment_details.appointment_date,
|
||||
orderData.value.appointment_details.timezone
|
||||
)
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
// let appointmentDate = convertUtcDateTimeToLocal(orderData.value.appointment_details.appointment_date, orderData.value.appointment_details.appointment_time, 'date')
|
||||
// let appointmentTime = convertUtcDateTimeToLocal(orderData.value.appointment_details.appointment_date, orderData.value.appointment_details.appointment_time, 'time')
|
||||
// scheduleDate.value = moment(appointmentDate, "YYYY-MM-DD").format("MMMM DD, YYYY")
|
||||
// scheduleTime.value = moment(appointmentTime, "HH:mm:ss").format("hh:mm A");
|
||||
|
||||
|
||||
await store.dispatch('getOrderLabKit', { cart_id: route.params.id })
|
||||
|
||||
state.labKitList = store.getters.getOrderLabKit
|
||||
console.log('state.testKits', state.labKitList)
|
||||
isLoading.value = false
|
||||
|
||||
});
|
||||
const convertUtcTime = (time, date, timezone) => {
|
||||
const timezones = {
|
||||
"EST": "America/New_York",
|
||||
"CST": "America/Chicago",
|
||||
"MST": "America/Denver",
|
||||
"PST": "America/Los_Angeles",
|
||||
// Add more mappings as needed
|
||||
};
|
||||
|
||||
// Get the IANA timezone identifier from the abbreviation
|
||||
const ianaTimeZone = timezones[timezone];
|
||||
|
||||
if (!ianaTimeZone) {
|
||||
throw new Error(`Unknown timezone abbreviation: ${timezone}`);
|
||||
}
|
||||
|
||||
// Combine date and time into a single string
|
||||
const dateTimeString = `${date}T${time}Z`; // Assuming the input date and time are in UTC
|
||||
|
||||
// Create a Date object from the combined string
|
||||
const dateObj = new Date(dateTimeString);
|
||||
|
||||
// Options for the formatter
|
||||
const options = {
|
||||
timeZone: ianaTimeZone,
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: false,
|
||||
};
|
||||
|
||||
// Create the formatter
|
||||
const formatter = new Intl.DateTimeFormat('en-US', options);
|
||||
|
||||
// Format the date
|
||||
const convertedDateTime = formatter.format(dateObj);
|
||||
|
||||
return convertedDateTime;
|
||||
};
|
||||
const getConvertedTime = (inputDate) => {
|
||||
// Split the input date string into date and time components
|
||||
const [datePart, timePart] = inputDate.split(', ');
|
||||
|
||||
// Split the time component into hours, minutes, and seconds
|
||||
let [hours, minutes, seconds] = timePart.split(':');
|
||||
|
||||
// Convert the hours to an integer
|
||||
hours = parseInt(hours);
|
||||
|
||||
// Determine the period (AM/PM) and adjust the hours if necessary
|
||||
const period = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12 || 12; // Convert 0 and 12 to 12, and other hours to 1-11
|
||||
|
||||
// Format the time as desired
|
||||
const formattedTime = `${hours.toString().padStart(2, '0')}:${minutes}${period}`;
|
||||
|
||||
return formattedTime;
|
||||
}
|
||||
const getConvertedDate = (inputDate) => {
|
||||
// Split the input date string into date and time components
|
||||
const [datePart, timePart] = inputDate.split(', ');
|
||||
|
||||
// Split the date component into month, day, and year
|
||||
const [month, day, year] = datePart.split('/');
|
||||
|
||||
// Create a new Date object from the parsed components
|
||||
const dateObject = new Date(`${year}-${month}-${day}T${timePart}`);
|
||||
|
||||
// Define an array of month names
|
||||
const monthNames = [
|
||||
"January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"
|
||||
];
|
||||
|
||||
// Format the date as desired
|
||||
const formattedDate = `${monthNames[dateObject.getMonth()]} ${day}, ${year}`;
|
||||
|
||||
return formattedDate;
|
||||
};
|
||||
const getStatusColor = (status) => {
|
||||
switch (status) {
|
||||
case "pending":
|
||||
return "warning";
|
||||
case "Shipped":
|
||||
return "info";
|
||||
case "Delivered":
|
||||
return "success";
|
||||
case "Cancelled":
|
||||
return "error";
|
||||
default:
|
||||
return "warning";
|
||||
}
|
||||
|
||||
};
|
||||
const updateStatus = async (item,event) => {
|
||||
console.log(item.id, event)
|
||||
await store.dispatch('updateStatusItem', { order_id: route.params.id, item_id: item.id, status: event })
|
||||
isLoading.value = true
|
||||
await store.dispatch("orderDetailAgent", {
|
||||
id: route.params.id,
|
||||
});
|
||||
orderData.value = store.getters.getPatientOrderDetail;
|
||||
console.log(orderData.value);
|
||||
isLoading.value = false
|
||||
}
|
||||
|
||||
const getStatusColorLabKit = (status) => {
|
||||
switch (status) {
|
||||
case "Ordered":
|
||||
return "info";
|
||||
case "Shipped":
|
||||
return "info";
|
||||
case "Delivered":
|
||||
return "success";
|
||||
case "Cancelled":
|
||||
return "red";
|
||||
case "Waiting For Results":
|
||||
return "error";
|
||||
default:
|
||||
return "gray";
|
||||
}
|
||||
};
|
||||
|
||||
const formatCurrency = (amount) => {
|
||||
let formattedAmount = amount.toString();
|
||||
|
||||
// Remove '.00' if present
|
||||
if (formattedAmount.includes('.00')) {
|
||||
formattedAmount = formattedAmount.replace('.00', '');
|
||||
}
|
||||
|
||||
// Split into parts for integer and decimal
|
||||
let parts = formattedAmount.split('.');
|
||||
|
||||
// Format integer part with commas
|
||||
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
|
||||
// Return formatted number
|
||||
return parts.join('.');
|
||||
}
|
||||
const formatTotalCurrency = (amount) => {
|
||||
let formattedAmount = amount.toString();
|
||||
|
||||
// Remove '.00' if present
|
||||
// if (formattedAmount.includes('.00')) {
|
||||
// formattedAmount = formattedAmount.replace('.00', '');
|
||||
// }
|
||||
|
||||
// Split into parts for integer and decimal
|
||||
let parts = formattedAmount.split('.');
|
||||
|
||||
// Format integer part with commas
|
||||
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
|
||||
// Return formatted number
|
||||
return parts.join('.');
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<div class="d-flex justify-space-between align-center flex-wrap gap-y-4 mb-6">
|
||||
<div>
|
||||
<div class="d-flex gap-2 align-center mb-2 flex-wrap">
|
||||
<h5 class="text-h5">Order #{{ route.params.id }}</h5>
|
||||
<div class="d-flex gap-x-2">
|
||||
|
||||
<!-- <VChip variant="tonal" color="success" size="small">
|
||||
Paid
|
||||
</VChip>
|
||||
<VChip variant="tonal" color="info" size="small">
|
||||
Ready to Pickup
|
||||
</VChip> -->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-body-1"> </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VRow v-if="filteredOrders">
|
||||
<VCol cols="12" md="8">
|
||||
<!-- 👉 Order Details -->
|
||||
<VCard class="mb-6">
|
||||
<VCardItem>
|
||||
<template #title>
|
||||
<h5>Order Details</h5>
|
||||
|
||||
</template>
|
||||
</VCardItem>
|
||||
<div class="table-container">
|
||||
<VDataTable :headers="headers" :items="filteredOrders.order_items.items"
|
||||
item-value="productName" class="text-no-wrap " :loading="isLoading">
|
||||
<template #item.title="{ item }">
|
||||
<div class="d-flex gap-x-3">
|
||||
<VAvatar size="34" variant="tonal" :image="item.image_url" rounded />
|
||||
|
||||
<div class="d-flex flex-column text-left">
|
||||
<h5 style="margin-bottom: 0px; font-size: 0.83em; white-space: normal;word-break: break-word;" >
|
||||
{{ item.title }}
|
||||
</h5>
|
||||
|
||||
<span class="text-sm text-start align-self-start">
|
||||
{{ item.list_sub_title }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #item.price="{ item }">
|
||||
<span>${{ item.price }}</span>
|
||||
</template>
|
||||
|
||||
|
||||
<template #item.status="{ item }" >
|
||||
<span>
|
||||
|
||||
<VSelect
|
||||
:items="items"
|
||||
v-model="item.status"
|
||||
label="Status"
|
||||
placeholder="Select Status"
|
||||
density="compact"
|
||||
style="width: 150px;"
|
||||
item-title="key"
|
||||
item-value="value"
|
||||
@update:model-value="updateStatus(item,$event)"
|
||||
/>
|
||||
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #item.total="{ item }">
|
||||
|
||||
<span> ${{ parseFloat(item.price * item.quantity).toLocaleString('en-US', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
}) }} </span>
|
||||
</template>
|
||||
<template #bottom />
|
||||
</VDataTable>
|
||||
</div>
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
<div class="d-flex align-end flex-column">
|
||||
<table class="text-high-emphasis">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td width="200px">Subtotal:</td>
|
||||
<td class="font-weight-medium">
|
||||
|
||||
${{
|
||||
formatTotalCurrency(parseFloat(
|
||||
filteredOrders.order_items
|
||||
.total_amount
|
||||
).toFixed(2))
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shipping fee:</td>
|
||||
<td class="font-weight-medium">
|
||||
${{
|
||||
parseFloat(
|
||||
filteredOrders.order_items
|
||||
.total_shipping_cost
|
||||
).toFixed(2)
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="font-weight-medium">
|
||||
Total:
|
||||
</td>
|
||||
<td class="font-weight-medium">
|
||||
${{
|
||||
formatTotalCurrency(parseFloat(
|
||||
filteredOrders.order_items
|
||||
.total
|
||||
).toFixed(2))
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
<v-dialog v-model="state.addLabOrder" max-width="400">
|
||||
<v-card>
|
||||
<v-card-title>Add Lab Kit</v-card-title>
|
||||
<v-card-text>
|
||||
<v-form ref="form" v-model="state.valid" class="mt-1">
|
||||
<v-row v-if="testKits">
|
||||
<v-col cols="12" md="12">
|
||||
<v-autocomplete label="Test Kit" v-model="state.selectedTestKitId"
|
||||
style="column-gap: 0px;" :items="state.testKits" item-title="name"
|
||||
item-value="id"
|
||||
:rules="getFieldRules('Test Kit', 'Test Kit is required')"></v-autocomplete>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" text @click="state.addLabOrder = false">Cancel</v-btn>
|
||||
<v-btn color="primary" @click="storeTestKit" :disabled="!state.valid">Save</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<!-- 👉 Shipping Activity -->
|
||||
|
||||
|
||||
<VCard title="Lab Kits" v-if="state.labKitList.length > 0" class="mb-6">
|
||||
<VCardText>
|
||||
<div class="table-container">
|
||||
<VDataTable :headers="headersLab" :loading="isLoading" :items="state.labKitList"
|
||||
class="text-no-wrap ">
|
||||
<template #item.item_name="{ item }">
|
||||
<div class="d-flex gap-x-3">
|
||||
|
||||
<div class="d-flex flex-column align-center">
|
||||
<h5 style="margin-bottom: 0px;">
|
||||
{{ item.item_name }}
|
||||
</h5>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #item.lab_kit_name="{ item }">
|
||||
<div class="d-flex gap-x-3">
|
||||
|
||||
<div class="d-flex flex-column align-center">
|
||||
<h5 style="margin-bottom: 0px;">
|
||||
{{ item.lab_kit_name }}
|
||||
</h5>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<template #item.status="{ item }">
|
||||
<span>
|
||||
<VChip variant="tonal" :color="getStatusColorLabKit(item.status)" size="small">
|
||||
{{ item.status }}
|
||||
</VChip>
|
||||
</span>
|
||||
</template>
|
||||
<template #item.result="{ item }">
|
||||
<span v-if="item.result">
|
||||
<a href="#" @click="openPdfInNewTab(item.result)" target="_blank"
|
||||
class="custom-link">
|
||||
<div class="d-inline-flex align-center">
|
||||
<img :src="pdf" height="20" class="me-2" alt="img">
|
||||
<span class="app-timeline-text font-weight-medium">
|
||||
results.pdf
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</span>
|
||||
<span v-else>
|
||||
Waiting For Result
|
||||
</span>
|
||||
</template>
|
||||
|
||||
|
||||
<template #bottom />
|
||||
</VDataTable>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
<VCard title="Shipping Activity" class="mb-6" >
|
||||
<VCardText>
|
||||
<VTimeline truncate-line="both" align="start" side="end" line-inset="10" line-color="primary"
|
||||
density="compact" class="v-timeline-density-compact">
|
||||
<VTimelineItem dot-color="primary" size="x-small"
|
||||
v-for="item in filteredOrders.items_activity" :key="item.id">
|
||||
<div class="d-flex justify-space-between align-center mb-3">
|
||||
<span class="app-timeline-title"> {{ item.note }}</span>
|
||||
<span class="app-timeline-meta">{{ formatDateActviy(item.created_at) }}</span>
|
||||
</div>
|
||||
<p class="app-timeline-text mb-0">
|
||||
{{ item.item_name }} {{ item.short_description }}
|
||||
</p>
|
||||
</VTimelineItem>
|
||||
|
||||
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12" md="4">
|
||||
<VCard class="mb-6" v-if="filteredOrders.appointment_details">
|
||||
<VCardText>
|
||||
<div class="d-flex align-center justify-space-between gap-1 mb-6">
|
||||
<div class="text-body-1 text-high-emphasis font-weight-medium">
|
||||
<v-icon class="mr-2" color="primary">ri-calendar-event-line</v-icon>
|
||||
Appointment Details
|
||||
</div>
|
||||
</div>
|
||||
<div class="appointment-details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Appointment At:</span>
|
||||
<span class="detail-value">{{ scheduleDate + ' ' + scheduleTime }}</span>
|
||||
</div>
|
||||
<div class="detail-item"
|
||||
v-if="filteredOrders.appointment_details.start_time && filteredOrders.appointment_details.end_time">
|
||||
<span class="detail-label">Start Time:</span>
|
||||
<span class="detail-value">{{
|
||||
formatDate(filteredOrders.appointment_details.start_time)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="detail-item"
|
||||
v-if="filteredOrders.appointment_details.start_time && filteredOrders.appointment_details.end_time">
|
||||
<span class="detail-label">End Time:</span>
|
||||
<span class="detail-value">{{
|
||||
formatDate(filteredOrders.appointment_details.end_time)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="detail-item"
|
||||
v-if="filteredOrders.appointment_details.start_time && filteredOrders.appointment_details.end_time">
|
||||
<span class="detail-label">Duration:</span>
|
||||
<span class="detail-value">{{
|
||||
totalCallDuration(filteredOrders.appointment_details.start_time,
|
||||
filteredOrders.appointment_details.end_time) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
<!-- 👉 Customer Details -->
|
||||
<VCard class="mb-6" v-if="filteredOrders.patient_details">
|
||||
<VCardText class="d-flex flex-column gap-y-6">
|
||||
<h3>Patient Details</h3>
|
||||
|
||||
<div class="d-flex align-center">
|
||||
<VAvatar :image="avatar1" class="me-3" />
|
||||
|
||||
<div>
|
||||
<div class="text-body-1 text-high-emphasis font-weight-medium">
|
||||
{{
|
||||
filteredOrders.patient_details.first_name + ' ' +
|
||||
filteredOrders.patient_details.last_name
|
||||
}}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center" style="display: none;">
|
||||
<VAvatar variant="tonal" color="success" class="me-3" style="display: none;">
|
||||
<VIcon icon="ri-shopping-cart-line" />
|
||||
</VAvatar>
|
||||
|
||||
<h4 style="display: none;">
|
||||
{{ filteredOrders.order_items.total_products }}
|
||||
Products
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-y-1">
|
||||
<div class="d-flex justify-space-between gap-1 text-body-2">
|
||||
<h5>Contact Info</h5>
|
||||
</div>
|
||||
|
||||
<span>Email:
|
||||
{{ filteredOrders.patient_details.email }}</span>
|
||||
<span>Mobile:
|
||||
{{ filteredOrders.patient_details.phone_no }}</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- 👉 Card Details -->
|
||||
<VCard class="mb-6">
|
||||
<VCardText>
|
||||
<div class="d-flex align-center justify-space-between gap-1 mb-6">
|
||||
<div class="text-body-1 text-high-emphasis font-weight-medium">
|
||||
<v-icon class="mr-2" color="primary">ri-bank-card-fill</v-icon>
|
||||
Card Details
|
||||
</div>
|
||||
<!-- <span
|
||||
class="text-base text-primary font-weight-medium cursor-pointer"
|
||||
@click="
|
||||
isEditAddressDialogVisible =
|
||||
!isEditAddressDialogVisible
|
||||
"
|
||||
>Edit</span
|
||||
> -->
|
||||
</div>
|
||||
<div>
|
||||
Card: {{ card_number }}
|
||||
<br />
|
||||
Expiry: {{ expiration_month }} / {{ expiration_year }}
|
||||
<br />
|
||||
CVV: {{ cvv }}
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- 👉 Shipping Address -->
|
||||
<VCard class="mb-6">
|
||||
<VCardText>
|
||||
<div class="d-flex align-center justify-space-between gap-1 mb-6">
|
||||
<div class="text-body-1 text-high-emphasis font-weight-medium">
|
||||
<v-icon class="mr-2" color="primary">ri-truck-line</v-icon>
|
||||
Shipping Address
|
||||
</div>
|
||||
<!-- <span
|
||||
class="text-base text-primary font-weight-medium cursor-pointer"
|
||||
@click="
|
||||
isEditAddressDialogVisible =
|
||||
!isEditAddressDialogVisible
|
||||
"
|
||||
>Edit</span
|
||||
> -->
|
||||
</div>
|
||||
<div>
|
||||
{{ filteredOrders.order_details.shipping_address1 }}
|
||||
<br />
|
||||
{{ filteredOrders.order_details.shipping_city }}
|
||||
<br />
|
||||
{{ filteredOrders.order_details.shipping_state }},
|
||||
{{ filteredOrders.order_details.shipping_zipcode }}
|
||||
<br />
|
||||
{{ filteredOrders.order_details.shipping_country }}
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- 👉 Billing Address -->
|
||||
<VCard style="display: none;">
|
||||
<VCardText>
|
||||
<div class="d-flex align-center justify-space-between gap-1 mb-3">
|
||||
<div class="text-body-1 text-high-emphasis font-weight-medium">
|
||||
Billing Address
|
||||
</div>
|
||||
<!-- <span
|
||||
class="text-base text-primary font-weight-medium cursor-pointer"
|
||||
@click="
|
||||
isEditAddressDialogVisible =
|
||||
!isEditAddressDialogVisible
|
||||
"
|
||||
>Edit</span
|
||||
> -->
|
||||
</div>
|
||||
<div>
|
||||
{{ filteredOrders.order_details.billing_address1 }}
|
||||
<br />
|
||||
{{ filteredOrders.order_details.billing_city }}
|
||||
<br />
|
||||
{{ filteredOrders.order_details.billing_state }},
|
||||
{{ filteredOrders.order_details.billing_zipcode }}
|
||||
<br />
|
||||
{{ filteredOrders.order_details.billing_country }}
|
||||
</div>
|
||||
|
||||
<!-- <div class="mt-6">
|
||||
<h6 class="text-h6 mb-1">Mastercard</h6>
|
||||
<div class="text-base">Card Number: ******4291</div>
|
||||
</div> -->
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<!-- <ConfirmDialog
|
||||
v-model:isDialogVisible="isConfirmDialogVisible"
|
||||
confirmation-question="Are you sure to cancel your Order?"
|
||||
cancel-msg="Order cancelled!!"
|
||||
cancel-title="Cancelled"
|
||||
confirm-msg="Your order cancelled successfully."
|
||||
confirm-title="Cancelled!"
|
||||
/> -->
|
||||
|
||||
<!-- <UserInfoEditDialog
|
||||
v-model:isDialogVisible="isUserInfoEditDialogVisible"
|
||||
/>
|
||||
|
||||
<AddEditAddressDialog
|
||||
v-model:isDialogVisible="isEditAddressDialogVisible"
|
||||
/> -->
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.appointment-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-weight: bold;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
/* Width of the scrollbar */
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
/* Color of the track */
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
/* Color of the handle */
|
||||
border-radius: 5px;
|
||||
/* Roundness of the handle */
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
/* Color of the handle on hover */
|
||||
}
|
||||
</style>
|
||||
626
resources/js/pages/apps/ecommerce/order/list/orders-list-new.vue
Normal file
626
resources/js/pages/apps/ecommerce/order/list/orders-list-new.vue
Normal file
@@ -0,0 +1,626 @@
|
||||
<script setup>
|
||||
|
||||
import API from '@/api';
|
||||
import { ADMIN_GET_ORDER_API } from '@/constants';
|
||||
import debounce from 'lodash.debounce';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useStore } from "vuex";
|
||||
const date = ref();
|
||||
const router = useRouter();
|
||||
const route = useRoute()
|
||||
const store = useStore();
|
||||
const ordersList = ref([]);
|
||||
const widgetData = ref([
|
||||
{
|
||||
title: 'Total Orders',
|
||||
value: 0,
|
||||
icon: 'ri-calendar-2-line',
|
||||
key_value: 'total_order'
|
||||
},
|
||||
{
|
||||
title: 'Total Appointment Orders',
|
||||
value: 0,
|
||||
icon: 'ri-check-double-line',
|
||||
key_value: 'total_appointment_order'
|
||||
},
|
||||
{
|
||||
title: ' Without Appointment Orders',
|
||||
value: 0,
|
||||
icon: 'ri-wallet-3-line',
|
||||
key_value: 'total_appointment_order_without'
|
||||
},
|
||||
{
|
||||
title: 'Completed Meetings Orders',
|
||||
value: 0,
|
||||
icon: 'ri-error-warning-line',
|
||||
key_value: 'completedMeetings'
|
||||
},
|
||||
])
|
||||
const searchQuery = ref('')
|
||||
// const search = ref('')
|
||||
|
||||
// Data table options
|
||||
const page = ref(1)
|
||||
const sortBy = ref()
|
||||
const orderBy = ref()
|
||||
|
||||
const isLoading = ref(true);
|
||||
// Data table Headers
|
||||
const headers = [
|
||||
{
|
||||
title: 'Order',
|
||||
key: 'order_id',
|
||||
searchable:false
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title: 'Patient',
|
||||
key: 'patient_name',
|
||||
searchable:true
|
||||
},
|
||||
{
|
||||
title: 'Meeting Date',
|
||||
key: 'appointment_date',
|
||||
searchable:false
|
||||
},
|
||||
{
|
||||
title: 'Meeting Time',
|
||||
key: 'appointment_time',
|
||||
searchable:false
|
||||
},
|
||||
{
|
||||
title: 'Total Amount',
|
||||
key: 'total_amount',
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
key: 'status',
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Actions',
|
||||
key: 'actions',
|
||||
searchable:false
|
||||
},
|
||||
]
|
||||
|
||||
const updateOptions = options => {
|
||||
page.value = options.page
|
||||
sortBy.value = options.sortBy[0]?.key
|
||||
orderBy.value = options.sortBy[0]?.order
|
||||
}
|
||||
|
||||
const resolvePaymentStatus = status => {
|
||||
if (status === 1)
|
||||
return {
|
||||
text: 'Paid',
|
||||
color: 'success',
|
||||
}
|
||||
if (status === 2)
|
||||
return {
|
||||
text: 'Pending',
|
||||
color: 'warning',
|
||||
}
|
||||
if (status === 3)
|
||||
return {
|
||||
text: 'Cancelled',
|
||||
color: 'secondary',
|
||||
}
|
||||
if (status === 4)
|
||||
return {
|
||||
text: 'Failed',
|
||||
color: 'error',
|
||||
}
|
||||
}
|
||||
|
||||
const resolveStatusVariant = (status) => {
|
||||
switch (status.toLowerCase()) {
|
||||
case 'completed':
|
||||
return { color: 'success', text: 'Completed' }
|
||||
case 'scheduled':
|
||||
return { color: 'primary', text: 'Scheduled' }
|
||||
case 'cancelled':
|
||||
return { color: 'error', text: 'Cancelled' }
|
||||
default:
|
||||
return { color: 'warning', text: 'Pending' }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const ordersGetList = computed(() => {
|
||||
|
||||
return ordersList.value.map((history) => ({
|
||||
...history,
|
||||
//appointment_date: getConvertedDate(convertUtcTime(history.appointment_time, history.appointment_date, history.timezone)),
|
||||
//appointment_time: getConvertedTime(convertUtcTime(history.appointment_time, history.appointment_date, history.timezone)),
|
||||
|
||||
// appointment_date: changeFormat(history.appointment_date),
|
||||
// appointment_time: convertUtcDateTimeToLocal(history.appointment_date, history.appointment_time, 'time'),
|
||||
// start_time: changeDateFormat(history.start_time),
|
||||
// end_time: changeDateFormat(history.end_time),
|
||||
// duration: totalCallDuration(history.start_time, history.end_time),
|
||||
}));
|
||||
// isLoading.value - false
|
||||
// ordersList.value.sort((a, b) => {
|
||||
// return b.id - a.id;
|
||||
// });
|
||||
// return ordersList.value
|
||||
});
|
||||
onMounted(async () => {
|
||||
// setDateRange();
|
||||
store.dispatch("updateIsLoading", true);
|
||||
// await store.dispatch("orderList");
|
||||
// ordersList.value = store.getters.getOrderList;
|
||||
// ordersList.value.sort((a, b) => {
|
||||
// return b.id - a.id;
|
||||
// });
|
||||
await store.dispatch("orderCount");
|
||||
let orderCount = store.getters.getOrderCount
|
||||
for (let data of widgetData.value) {
|
||||
if (data.key_value == 'total_order') {
|
||||
data.value = orderCount[data.key_value]
|
||||
}
|
||||
if (data.key_value == 'total_appointment_order') {
|
||||
data.value = orderCount[data.key_value]
|
||||
}
|
||||
if (data.key_value == 'total_appointment_order_without') {
|
||||
data.value = orderCount[data.key_value]
|
||||
}
|
||||
if (data.key_value == 'completedMeetings') {
|
||||
data.value = orderCount[data.key_value]
|
||||
}
|
||||
console.log(orderCount, orderCount[data.key_value])
|
||||
}
|
||||
console.log("ordersList", orderCount);
|
||||
loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
|
||||
isLoading.value = false;
|
||||
});
|
||||
const setDateRange = () => {
|
||||
const today = new Date();
|
||||
const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
|
||||
// Set the date range
|
||||
startRangeDate.value = formattedDate(startOfMonth);
|
||||
endRangeDate.value = formattedDate(today);
|
||||
date.value = [startOfMonth, today];
|
||||
// console.log("mmm>>>>",date.value, startOfMonth, today);
|
||||
};
|
||||
const formattedDate = (originalDate) => {
|
||||
// Convert the original date string into a Date object
|
||||
const date = new Date(originalDate);
|
||||
|
||||
// Extract year, month, and day
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-indexed
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
|
||||
// Return formatted date in YYYY-MM-DD format
|
||||
return `${month}-${day}-${year}`;
|
||||
};
|
||||
const convertUtcTime = (time, date, timezone) => {
|
||||
const timezones = {
|
||||
"EST": "America/New_York",
|
||||
"CST": "America/Chicago",
|
||||
"MST": "America/Denver",
|
||||
"PST": "America/Los_Angeles",
|
||||
"PST": "Asia/Karachi"
|
||||
// Add more mappings as needed
|
||||
};
|
||||
|
||||
// Get the IANA timezone identifier from the abbreviation
|
||||
let ianaTimeZone = timezones[timezone];
|
||||
|
||||
if (!ianaTimeZone) {
|
||||
// throw new Error(`Unknown timezone abbreviation: ${timezone}`);
|
||||
timezone = 'PST'
|
||||
ianaTimeZone = timezones[timezone];
|
||||
}
|
||||
|
||||
// Combine date and time into a single string
|
||||
const dateTimeString = `${date}T${time}Z`; // Assuming the input date and time are in UTC
|
||||
|
||||
// Create a Date object from the combined string
|
||||
const dateObj = new Date(dateTimeString);
|
||||
|
||||
// Options for the formatter
|
||||
const options = {
|
||||
timeZone: ianaTimeZone,
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: false,
|
||||
};
|
||||
|
||||
// Create the formatter
|
||||
const formatter = new Intl.DateTimeFormat('en-US', options);
|
||||
|
||||
// Format the date
|
||||
const convertedDateTime = formatter.format(dateObj);
|
||||
|
||||
return convertedDateTime;
|
||||
};
|
||||
const getConvertedTime = (inputDate) => {
|
||||
// Split the input date string into date and time components
|
||||
const [datePart, timePart] = inputDate.split(', ');
|
||||
|
||||
// Split the time component into hours, minutes, and seconds
|
||||
let [hours, minutes, seconds] = timePart.split(':');
|
||||
|
||||
// Convert the hours to an integer
|
||||
hours = parseInt(hours);
|
||||
|
||||
// Determine the period (AM/PM) and adjust the hours if necessary
|
||||
const period = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12 || 12; // Convert 0 and 12 to 12, and other hours to 1-11
|
||||
|
||||
// Format the time as desired
|
||||
const formattedTime = `${hours.toString().padStart(2, '0')}:${minutes}${period}`;
|
||||
|
||||
return formattedTime;
|
||||
}
|
||||
const getConvertedDate = (inputDate) => {
|
||||
// Split the input date string into date and time components
|
||||
const [datePart, timePart] = inputDate.split(', ');
|
||||
|
||||
// Split the date component into month, day, and year
|
||||
const [month, day, year] = datePart.split('/');
|
||||
|
||||
// Create a new Date object from the parsed components
|
||||
const dateObject = new Date(`${year}-${month}-${day}T${timePart}`);
|
||||
|
||||
// Define an array of month names
|
||||
const monthNames = [
|
||||
"January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"
|
||||
];
|
||||
|
||||
// Format the date as desired
|
||||
const formattedDate = `${monthNames[dateObject.getMonth()]} ${day}, ${year}`;
|
||||
|
||||
return formattedDate;
|
||||
};
|
||||
function changeFormat(dateFormat) {
|
||||
const dateParts = dateFormat.split('-'); // Assuming date is in yyyy-mm-dd format
|
||||
const year = parseInt(dateParts[0]);
|
||||
const month = String(dateParts[1]).padStart(2, '0'); // Pad single-digit months with leading zero
|
||||
const day = String(dateParts[2]).padStart(2, '0'); // Pad single-digit days with leading zero
|
||||
|
||||
// Create a new Date object with the parsed values
|
||||
const date = new Date(year, month - 1, day); // Month is zero-based in JavaScript Date object
|
||||
|
||||
// Format the date as mm-dd-yyyy
|
||||
const formattedDate = month + '-' + day + '-' + date.getFullYear();
|
||||
|
||||
return formattedDate;
|
||||
}
|
||||
const viewOrder = (orderId) => {
|
||||
router.push({ name: "admin-order-detail", params: { id: orderId } });
|
||||
};
|
||||
const formatDate = (date) => {
|
||||
const messageDate = new Date(date);
|
||||
const options = {
|
||||
year: "numeric",
|
||||
month: "numeric",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
hour12: true,
|
||||
};
|
||||
const formattedDate = messageDate
|
||||
.toLocaleString("en-US", options)
|
||||
.replace(/\//g, "-")
|
||||
.replace(/,/, "");
|
||||
return `${formattedDate}`;
|
||||
};
|
||||
const getStatusColor = (status) => {
|
||||
switch (status) {
|
||||
case "pending":
|
||||
return "orange";
|
||||
case "Shipped":
|
||||
return "blue";
|
||||
case "Delivered":
|
||||
return "green";
|
||||
case "Cancelled":
|
||||
return "red";
|
||||
default:
|
||||
return "gray";
|
||||
}
|
||||
};
|
||||
const serverItems = ref([]);
|
||||
const loading = ref(true);
|
||||
const totalItems = ref(0);
|
||||
const search = ref();
|
||||
const itemsPerPage = ref(30);
|
||||
const status = ref('All');
|
||||
const loadItems = debounce(async ({ page, itemsPerPage, sortBy }) => {
|
||||
// if(status.value = 'All'){
|
||||
// status.value = 'all'
|
||||
// }
|
||||
const payload = {
|
||||
page,
|
||||
itemsPerPage,
|
||||
sortBy,
|
||||
filters: {
|
||||
from_date:startRangeDate.value ? startRangeDate.value: 'all',
|
||||
to_date: endRangeDate.value ?endRangeDate.value : 'all',
|
||||
status:status.value.toLowerCase(),
|
||||
},
|
||||
search: search.value,
|
||||
}
|
||||
console.log("records", page, itemsPerPage, sortBy, ADMIN_GET_ORDER_API);
|
||||
loading.value = true;
|
||||
const data = await API.getDataTableRecord(ADMIN_GET_ORDER_API, payload, headers);
|
||||
console.log('patientData', data);
|
||||
serverItems.value = data.items;
|
||||
totalItems.value = data.total;
|
||||
loading.value = false;
|
||||
|
||||
}, 500);
|
||||
const addNewOrder = () => {
|
||||
store.dispatch("updateIsLoading", true);
|
||||
router.replace(route.query.to && route.query.to != '/admin/orders' ? String(route.query.to) : '/admin/add-order')
|
||||
store.dispatch("updateIsLoading", false);
|
||||
};
|
||||
|
||||
const startRangeDate = ref();
|
||||
const endRangeDate = ref();
|
||||
const changeDateRange = async () => {
|
||||
console.log('changed date', date.value, 'type:', typeof date.value);
|
||||
|
||||
try {
|
||||
const dateString = typeof date.value === 'string' ? date.value : '';
|
||||
const [startDate, endDate] = dateString.split(" to ");
|
||||
|
||||
if (startDate && endDate) {
|
||||
startRangeDate.value = formattedDate(startDate);
|
||||
endRangeDate.value = formattedDate(endDate);
|
||||
loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
|
||||
// await store.dispatch('getAdminAnalyticsOverview', {
|
||||
// start_date: startDate,
|
||||
// end_date: endDate,
|
||||
// });
|
||||
// analyticsData.value = store.getters.getAnalyticsOverview;
|
||||
} else {
|
||||
console.warn('Invalid date range');
|
||||
// Handle invalid date range
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error processing date range:', error);
|
||||
// Handle the error appropriately
|
||||
}
|
||||
};
|
||||
const onStateChange = () =>{
|
||||
loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
|
||||
};
|
||||
const reset = () => {
|
||||
date.value = '';
|
||||
startRangeDate.value = 'all';
|
||||
endRangeDate.value = 'all';
|
||||
status.value = 'All';
|
||||
search.value= '';
|
||||
loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
|
||||
}
|
||||
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>
|
||||
<div>
|
||||
|
||||
<VCard class="mb-6">
|
||||
<VCardText class="px-2">
|
||||
<VRow>
|
||||
<template v-for="(data, index) in widgetData" :key="index">
|
||||
<VCol cols="12" sm="6" md="3" class="px-6">
|
||||
<div class="d-flex justify-space-between"
|
||||
:class="$vuetify.display.xs ? 'product-widget' : $vuetify.display.sm ? index < 2 ? 'product-widget' : '' : ''">
|
||||
<div class="d-flex flex-column gap-y-1">
|
||||
<h4 class="text-h4">
|
||||
{{ data.value }}
|
||||
</h4>
|
||||
<span class="text-base text-capitalize">
|
||||
{{ data.title }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<VAvatar variant="tonal" rounded size="42">
|
||||
<VIcon :icon="data.icon" size="26" />
|
||||
</VAvatar>
|
||||
</div>
|
||||
</VCol>
|
||||
<VDivider
|
||||
v-if="$vuetify.display.mdAndUp ? index !== widgetData.length - 1 : $vuetify.display.smAndUp ? index % 2 === 0 : false"
|
||||
vertical inset length="100" />
|
||||
</template>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
<VRow>
|
||||
|
||||
<VCol cols="12" md="12">
|
||||
<VCard title="Orders">
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol cols="12" md="4">
|
||||
<AppDateTimePicker
|
||||
v-model="date"
|
||||
label="Date Range"
|
||||
:config="{ mode: 'range' }"
|
||||
density="compact"
|
||||
@change="changeDateRange()"
|
||||
>
|
||||
|
||||
</AppDateTimePicker>
|
||||
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12" md="2" class="px-0">
|
||||
<VAutocomplete v-model="status" label="Status" placeholder="Status" density="compact"
|
||||
:items="['All', 'Pending', 'Recevied', 'Complete','Shipped','Transit']" @update:model-value="onStateChange" />
|
||||
|
||||
</VCol>
|
||||
<VCol cols="12" md="3">
|
||||
<VTextField v-model="search" placeholder="Search Order" density="compact"
|
||||
style="max-inline-size: 200px; min-inline-size: 200px;" />
|
||||
|
||||
</VCol>
|
||||
<!-- <VCol cols="12" md="1">
|
||||
|
||||
</VCol> -->
|
||||
<VCol
|
||||
cols="12" class="pl-0"
|
||||
|
||||
md="3"
|
||||
>
|
||||
<VBtn @click="reset()" class="mr-2">Reset</VBtn>
|
||||
|
||||
<VBtn color="primary" @click="addNewOrder" v-if="$can('read', 'Order Add')">New Order</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<!-- <VDataTable :loading="isLoading" :headers="headers" :items="ordersGetList"
|
||||
:search="searchQuery" :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.order_id="{ item }">
|
||||
<RouterLink :to="{ name: 'admin-order-detail', params: { id: item.order_id } }">
|
||||
{{ formatOrderId(item.order_id) }}
|
||||
</RouterLink>
|
||||
</template>
|
||||
<template #item.total_amount="{ item }"> ${{ parseFloat(item.total_amount + item.order_total_shipping).toLocaleString('en-US', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
}) }}
|
||||
<!-- ${{ parseFloat(item.order_total_amount +
|
||||
item.order_total_shipping).toLocaleString('en-US', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
}) }} -->
|
||||
</template>
|
||||
<template #item.patient_name="{ item }">
|
||||
<div class="d-flex align-center">
|
||||
<VAvatar size="32" :color="item.profile_picture ? '' : 'primary'"
|
||||
:class="item.profile_picture ? '' : 'v-avatar-light-bg primary--text'"
|
||||
:variant="!item.profile_picture ? 'tonal' : undefined">
|
||||
<VImg v-if="item.profile_picture" :src="item.profile_picture" />
|
||||
<span v-else>{{ avatarText(item.patient_name) }}</span>
|
||||
</VAvatar>
|
||||
<div class="d-flex flex-column ms-3">
|
||||
<RouterLink :to="{ name: 'admin-patient-profile', params: { id: item.patient_id } }">
|
||||
<div class=" font-weight-medium">
|
||||
{{ item.patient_name }}
|
||||
</div>
|
||||
</RouterLink>
|
||||
<small>{{ item.email }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<template #item.date="{ item }">
|
||||
<span>
|
||||
|
||||
{{ formatDate(item.created_at) }}
|
||||
|
||||
</span>
|
||||
</template>
|
||||
<template #item.appointment_date="{ item }">
|
||||
<div v-if="item.appointment_date">
|
||||
{{ changeFormat(item.appointment_date) }}
|
||||
</div>
|
||||
<div v-else>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<template #item.appointment_time="{ item }">
|
||||
<div v-if="item.appointment_time">
|
||||
|
||||
{{ getConvertedTime(convertUtcTime(item.appointment_time, item.appointment_date, item.timezone)) }}
|
||||
</div>
|
||||
<div v-else>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<template #item.status="{ item }">
|
||||
<span>
|
||||
<VChip variant="tonal" :color="getStatusColor(item.status)" size="small">
|
||||
{{ item.status }}
|
||||
</VChip>
|
||||
</span>
|
||||
</template>
|
||||
<!-- status -->
|
||||
|
||||
<template #item.appointment_status="{ item }">
|
||||
<VChip :color="resolveStatusVariant(item.appointment_status).color" class="font-weight-medium"
|
||||
size="small" :class="{ 'blink-status': item.appointment_status.toLowerCase() !== 'completed' }">
|
||||
{{ resolveStatusVariant(item.appointment_status).text }}
|
||||
</VChip>
|
||||
|
||||
</template>
|
||||
<template #item.actions="{ item }">
|
||||
<IconBtn size="small">
|
||||
<VIcon icon="ri-more-2-line" />
|
||||
<VMenu activator="parent">
|
||||
<VList>
|
||||
<VListItem value="view" v-if="$can('read', 'Order Detail Tab')">
|
||||
<RouterLink :to="{ name: 'admin-order-detail', params: { id: item.order_id } }"
|
||||
class="text-high-emphasis">
|
||||
View
|
||||
</RouterLink>
|
||||
</VListItem>
|
||||
<VListItem value="view" v-if="$can('read', 'Order Edit')">
|
||||
<RouterLink :to="{ name: 'admin-order-edit', params: { id: item.order_id } }"
|
||||
class="text-high-emphasis">
|
||||
Edit
|
||||
</RouterLink>
|
||||
</VListItem>
|
||||
|
||||
</VList>
|
||||
</VMenu>
|
||||
</IconBtn>
|
||||
</template>
|
||||
</v-data-table-server>
|
||||
<!-- </VDataTable> -->
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#customer-link {
|
||||
&:hover {
|
||||
color: '#000' !important
|
||||
}
|
||||
}
|
||||
|
||||
.product-widget {
|
||||
border-block-end: 1px solid rgba(var(--v-theme-on-surface), var(--v-border-opacity));
|
||||
padding-block-end: 1rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user