1304 lines
55 KiB
Vue
1304 lines
55 KiB
Vue
<script setup>
|
|
import store from "@/store";
|
|
import moment from "moment";
|
|
import { ref } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const getPrescriptionHistory = ref([]);
|
|
const doctorAppiontments = ref([]);
|
|
const selectedFilter = ref(null);
|
|
const currentMonth = ref(null);
|
|
const start_date = ref();
|
|
const end_date = ref();
|
|
const isMeetingEnable = ref(false);
|
|
const isMeetingEnd = ref(true);
|
|
const meetingInFuture = ref(true);
|
|
const dessertHeaders = ref([
|
|
{
|
|
title: "Product",
|
|
align: "start",
|
|
sortable: false,
|
|
key: "name",
|
|
},
|
|
{ title: "Price", key: "calories" },
|
|
{ title: "Quantity", key: "quantiy" },
|
|
{ title: "Status", key: "status" },
|
|
]);
|
|
const desserts = ref([
|
|
{
|
|
name: "Semaglutide Injection",
|
|
calories: "$299.00",
|
|
quantiy: 2,
|
|
status: "Pending",
|
|
},
|
|
]);
|
|
const scheduleDate = ref();
|
|
const scheduleTime = ref();
|
|
const timeZone = ref();
|
|
const order_id = ref();
|
|
const appiontmentId = ref();
|
|
const items = ref([]);
|
|
const totalcost = ref();
|
|
const previousTotalCost = ref();
|
|
const isCallClose = ref();
|
|
const status = ref();
|
|
const upcomingAppoinmentList = ref([]);
|
|
const upcommingAppiontmetns = ref([]);
|
|
onMounted(async () => {
|
|
store.dispatch("updateIsLoading", true);
|
|
await store.dispatch("getPatientAppointment");
|
|
upcomingAppoinmentList.value =
|
|
store.getters.getPatientUpcomingAppiontments.upcoming_appointments;
|
|
console.log("upcoming", store.getters.getBookedAppointment);
|
|
timeZone.value = store.getters.getBookedAppointment.timezone;
|
|
order_id.value = store.getters.getBookedAppointment.order_id;
|
|
items.value = store.getters.getBookedAppointment.items.items_list;
|
|
totalcost.value =
|
|
store.getters.getBookedAppointment.items.total +
|
|
store.getters.getBookedAppointment.items.total_shipping_cost;
|
|
appiontmentId.value = store.getters.getBookedAppointment.appiontmentId;
|
|
isCallClose.value = store.getters.getBookedAppointment.end_time;
|
|
status.value = store.getters.getBookedAppointment.status;
|
|
let appointmentDate = convertUtcDateTimeToLocal(
|
|
store.getters.getBookedAppointment.appointment_date,
|
|
store.getters.getBookedAppointment.appointment_time,
|
|
"date"
|
|
);
|
|
let appointmentTime = convertUtcDateTimeToLocal(
|
|
store.getters.getBookedAppointment.appointment_date,
|
|
store.getters.getBookedAppointment.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("getPrescriptionHistory");
|
|
getPrescriptionHistory.value = store.getters.getPrescriptionHistory.history;
|
|
console.log("getPrescriptionHistory", getPrescriptionHistory.value);
|
|
store.dispatch("updateIsLoading", false);
|
|
});
|
|
|
|
const handleDateInput = async () => {
|
|
getHistory.value = [];
|
|
// await store.dispatch('getHistoryFilter', {
|
|
// filter: selectedFilter.value,
|
|
// })
|
|
// getHistory.value = store.getters.getHistoryFilter.patients;
|
|
// console.log("getHistoryFilter", getHistory.value);
|
|
// store.dispatch('updateIsLoading', false)
|
|
};
|
|
|
|
const search = ref("");
|
|
|
|
const upComingRecords = computed(() => {
|
|
console.log("upcommingData-----------------", upcomingAppoinmentList.value);
|
|
|
|
let d = upcomingAppoinmentList.value.map((appiontment) => ({
|
|
...appiontment,
|
|
appointment_date: getConvertedDate(
|
|
convertUtcTime(
|
|
appiontment.appointment_time,
|
|
appiontment.appointment_date,
|
|
appiontment.timezone
|
|
)
|
|
),
|
|
appointment_time: getConvertedTime(
|
|
convertUtcTime(
|
|
appiontment.appointment_time,
|
|
appiontment.appointment_date,
|
|
appiontment.timezone
|
|
)
|
|
),
|
|
isMeeting: convertAndCheckTime(
|
|
convertAndGetTimeDifference(
|
|
appiontment.appointment_time,
|
|
appiontment.appointment_date,
|
|
appiontment.timezone
|
|
)
|
|
),
|
|
utcConverted: convertUtcTime(
|
|
appiontment.appointment_time,
|
|
appiontment.appointment_date,
|
|
appiontment.timezone
|
|
),
|
|
timeDifference: convertAndGetTimeDifference(
|
|
appiontment.appointment_time,
|
|
appiontment.appointment_date,
|
|
appiontment.timezone
|
|
),
|
|
}));
|
|
upcommingAppiontmetns.value = d;
|
|
console.log("upcommingAppiontmetnsAsif>>>>", upcommingAppiontmetns.value);
|
|
return upcommingAppiontmetns.value;
|
|
});
|
|
|
|
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 convertAndGetTimeDifference = (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);
|
|
|
|
// Get the current date and time
|
|
const now = new Date();
|
|
|
|
// Calculate the time difference in milliseconds
|
|
const timeDifference = dateObj - now;
|
|
|
|
// Convert the time difference to a human-readable format
|
|
const diffInSeconds = Math.abs(timeDifference) / 1000;
|
|
const diffInMinutes = Math.floor(diffInSeconds / 60) % 60;
|
|
const diffInHours = Math.floor(diffInSeconds / 3600);
|
|
|
|
let timeLeftOrAgo;
|
|
if (timeDifference > 0) {
|
|
if (diffInHours > 0) {
|
|
timeLeftOrAgo = `${diffInHours} hour${
|
|
diffInHours > 1 ? "s" : ""
|
|
} ${diffInMinutes} minute${diffInMinutes > 1 ? "s" : ""} left`;
|
|
} else {
|
|
timeLeftOrAgo = `${diffInMinutes} minute${
|
|
diffInMinutes > 1 ? "s" : ""
|
|
} left`;
|
|
}
|
|
} else {
|
|
if (diffInHours > 0) {
|
|
timeLeftOrAgo = `${diffInHours} hour${
|
|
diffInHours > 1 ? "s" : ""
|
|
} ${diffInMinutes} minute${diffInMinutes > 1 ? "s" : ""} ago`;
|
|
} else {
|
|
timeLeftOrAgo = `${diffInMinutes} minute${
|
|
diffInMinutes > 1 ? "s" : ""
|
|
} ago`;
|
|
}
|
|
}
|
|
|
|
return timeLeftOrAgo;
|
|
};
|
|
const convertAndCheckTime = (str) => {
|
|
return str.includes("ago");
|
|
};
|
|
const formattedHistory = computed(() => {
|
|
return getPrescriptionHistory.value.map((history) => ({
|
|
...history,
|
|
previousTotalCost: history.total_amount,
|
|
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),
|
|
}));
|
|
});
|
|
|
|
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 isUpcomingMeeting = computed(() => {
|
|
let appDate = formatDateToISO(
|
|
store.getters.getBookedAppointment.appointment_date
|
|
);
|
|
let appTime = convertTo24Hour(
|
|
store.getters.getBookedAppointment.appointment_time
|
|
);
|
|
// console.log("PlanCallend", props.iscallEnd, props.timeDiff, props.date, props.time, appDate, appTime, isDateTimeInFuture(props.date, props.time));
|
|
meetingInFuture.value = isDateTimeInFuture(
|
|
store.getters.getBookedAppointment.appointment_date,
|
|
store.getters.getBookedAppointment.appointment_time
|
|
);
|
|
iscallEnd();
|
|
});
|
|
const iscallEnd = async () => {
|
|
if (isCallClose.value && !meetingInFuture.value) {
|
|
isMeetingEnable.value = false;
|
|
|
|
isMeetingEnd.value = false;
|
|
console.log("Bth Conditin");
|
|
} else if (isCallClose.value) {
|
|
// Call has been end
|
|
isMeetingEnable.value = false;
|
|
|
|
isMeetingEnd.value = false;
|
|
|
|
console.log("callEnd");
|
|
} else if (!meetingInFuture.value) {
|
|
// Patient can Join Meeting
|
|
isMeetingEnable.value = true;
|
|
console.log("timeDiff");
|
|
} else {
|
|
// Call has been end
|
|
console.log("else");
|
|
isMeetingEnable.value = false;
|
|
|
|
isMeetingEnd.value = true;
|
|
}
|
|
await nextTick();
|
|
// isAgentCall();
|
|
};
|
|
const isDateTimeInFuture = (dateString, timeString) => {
|
|
// Combine the date and time strings into a datetime string
|
|
const dateTimeString = dateString + " " + timeString;
|
|
|
|
// Convert the datetime string into a Date object
|
|
const eventDateTime = new Date(dateTimeString);
|
|
|
|
// Get the current date and time
|
|
const now = new Date();
|
|
|
|
// Compare the eventDateTime with the current date and time
|
|
return eventDateTime > now;
|
|
};
|
|
const formatDateToISO = (dateString) => {
|
|
const date = new Date(dateString);
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, "0");
|
|
const day = String(date.getDate()).padStart(2, "0");
|
|
|
|
return `${year}-${month}-${day}`;
|
|
};
|
|
const convertTo24Hour = (time12h) => {
|
|
const [time, period] = time12h.split(" ");
|
|
const [hours, minutes] = time.split(":");
|
|
|
|
let hours24;
|
|
if (period === "AM") {
|
|
hours24 = hours === "12" ? "00" : hours.padStart(2, "0");
|
|
} else {
|
|
hours24 =
|
|
hours === "12"
|
|
? "12"
|
|
: String(parseInt(hours, 10) + 12).padStart(2, "0");
|
|
}
|
|
|
|
return `${hours24}:${minutes}:00`;
|
|
};
|
|
|
|
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 changeDateFormat(dateFormat) {
|
|
console.log("startTimeFormat", dateFormat);
|
|
if (dateFormat) {
|
|
const dateTimeParts = dateFormat.split(" ");
|
|
const datePart = dateTimeParts[0];
|
|
const timePart = dateTimeParts[1].slice(0, 5); // Slice to remove seconds
|
|
const dateParts = datePart.split("-");
|
|
const year = dateParts[0];
|
|
const month = dateParts[1];
|
|
const day = dateParts[2];
|
|
return `${month}-${day}-${year} ${timePart}`;
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
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 historyDetail = (history) => {
|
|
console.log("history", history);
|
|
// router.push("/patient/complete-appintment-detail/" + history.id);
|
|
router.push("/order-detail/" + history.order_id);
|
|
};
|
|
const date = ref("");
|
|
const showDatePicker = ref(false);
|
|
const startDateMenu = ref(null);
|
|
const endDateMenu = ref(null);
|
|
const showStartDatePicker = ref(false);
|
|
const showEndDatePicker = ref(false);
|
|
const dateFormate = ref();
|
|
const panel = ref(0);
|
|
const filters = reactive({
|
|
search: "",
|
|
status: [],
|
|
startDate: null,
|
|
endDate: null,
|
|
});
|
|
const datepickStart = async () => {
|
|
console.log("ppicker", startDateMenu.value);
|
|
dateFormate.value = changeCalanderDate(startDateMenu.value);
|
|
console.log("dateFormate", dateFormate.value);
|
|
if (startDateMenu.value) {
|
|
const selectedDate = new Date(startDateMenu.value);
|
|
const dateWithoutTime = new Date(
|
|
selectedDate.getFullYear(),
|
|
selectedDate.getMonth(),
|
|
selectedDate.getDate()
|
|
);
|
|
// Format the date as needed
|
|
console.log("formattedDate");
|
|
// const formattedDate = selectedDate.getFullYear() + '-' + selectedDate.getMonth() + '-' + selectedDate.getDate() //dateWithoutTime.toISOString().slice(0, 10);
|
|
const formattedDate = formatDateDate(selectedDate);
|
|
console.log("formattedDate", formattedDate);
|
|
filters.startDate = formattedDate;
|
|
showStartDatePicker.value = false;
|
|
|
|
store.dispatch("updateIsLoading", true);
|
|
await store.dispatch("getDateFilter", {
|
|
appointment_date: dateFormate.value,
|
|
});
|
|
getPrescriptionHistory.value =
|
|
store.getters.getPrescriptionHistory.history;
|
|
console.log("getPrescriptionHistory", getPrescriptionHistory.value);
|
|
store.dispatch("updateIsLoading", false);
|
|
}
|
|
};
|
|
const formatDateDate = (date) => {
|
|
const messageDate = new Date(date);
|
|
const options = {
|
|
day: "numeric",
|
|
year: "numeric",
|
|
month: "numeric",
|
|
};
|
|
return messageDate.toLocaleDateString("en-US", options).replace(/\//g, "-");
|
|
};
|
|
|
|
function changeCalanderDate(dateFormat) {
|
|
const originalDateString = dateFormat;
|
|
|
|
// Create a Date object from the original date string
|
|
const originalDate = new Date(originalDateString);
|
|
|
|
// Extract year, month, and day from the Date object
|
|
const year = originalDate.getFullYear();
|
|
// JavaScript months are zero-indexed, so add 1 to get the correct month
|
|
const month = (originalDate.getMonth() + 1).toString().padStart(2, "0");
|
|
const day = originalDate.getDate().toString().padStart(2, "0");
|
|
|
|
// Form the desired date format YYYY-MM-DD
|
|
const formattedDate = `${year}-${month}-${day}`;
|
|
|
|
return formattedDate; // Output: 2024-06-03
|
|
}
|
|
const resetFilters = async () => {
|
|
filters.search = "";
|
|
filters.status = [];
|
|
filters.startDate = null;
|
|
filters.endDate = null;
|
|
startDateMenu.value = null;
|
|
endDateMenu.value = null;
|
|
store.dispatch("updateIsLoading", true);
|
|
await store.dispatch("getPrescriptionHistory");
|
|
getPrescriptionHistory.value = store.getters.getPrescriptionHistory.history;
|
|
console.log("getPrescriptionHistory", getPrescriptionHistory.value);
|
|
store.dispatch("updateIsLoading", false);
|
|
};
|
|
const formatDate = (date) => {
|
|
const messageDate = new Date(date);
|
|
const options = {
|
|
year: "numeric",
|
|
month: "numeric",
|
|
day: "numeric",
|
|
hour: "numeric", // Change from '2-digit' to 'numeric'
|
|
minute: "2-digit",
|
|
hour12: true, // Add hour12: true to get 12-hour format with AM/PM
|
|
};
|
|
const formattedDate = messageDate
|
|
.toLocaleString("en-US", options)
|
|
.replace(/\//g, "-");
|
|
return `${formattedDate} `;
|
|
};
|
|
</script>
|
|
<template>
|
|
<VRow>
|
|
<VDialog
|
|
v-model="store.getters.getIsLoading"
|
|
width="110"
|
|
height="150"
|
|
color="yellow"
|
|
>
|
|
<VCardText class="" style="color: white !important">
|
|
<div class="demo-space-x">
|
|
<VProgressCircular
|
|
:size="40"
|
|
color="primary"
|
|
indeterminate
|
|
/>
|
|
</div>
|
|
</VCardText>
|
|
</VDialog>
|
|
<div v-if="upComingRecords"></div>
|
|
<div v-if="isUpcomingMeeting"></div>
|
|
<VCol cols="12" class="px-3">
|
|
<VCardTitle class="my-1 pl-0 mb-0">
|
|
<h4 class="mb-0">Upcoming Appointments</h4>
|
|
</VCardTitle>
|
|
<v-row
|
|
v-if="upcommingAppiontmetns.length > 0"
|
|
v-for="(upcomming, index) of upcommingAppiontmetns"
|
|
:key="index"
|
|
>
|
|
<v-col>
|
|
<v-card class="order-card mb-6 rounded-lg elevation-3">
|
|
<div class="order-header pa-4">
|
|
<v-row no-gutters align="center">
|
|
<v-col>
|
|
<div class="d-flex align-center">
|
|
<v-avatar
|
|
color="yellow"
|
|
size="56"
|
|
class="text-h6 font-weight-bold mr-4"
|
|
>
|
|
#{{ upcomming.order_id }}
|
|
</v-avatar>
|
|
<div>
|
|
<!-- <div class="text-subtitle-1 text-overline font-weight-medium">Order ID</div> -->
|
|
<div
|
|
class="text-subtitle-1 font-weight-medium"
|
|
>
|
|
{{
|
|
formatDate(
|
|
upcomming.created_at
|
|
)
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</v-col>
|
|
<v-col cols="auto" class="ml-auto">
|
|
<v-chip
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
label
|
|
x-large
|
|
class="font-weight-bold"
|
|
>
|
|
<!-- Total: ${{ formatCurrency(props.isShippmentAmmount) }}<br> -->
|
|
Total: ${{
|
|
formatCurrency(
|
|
upcomming.items_data.total
|
|
)
|
|
}}
|
|
<br /> </v-chip
|
|
><br />
|
|
<!-- <v-chip color="primary" label x-large class="font-weight-bold mt-3">
|
|
Status: {{ upcomming.status }} <br>
|
|
|
|
</v-chip> -->
|
|
<br />
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
|
|
<v-card-text class="pa-4 pb-0">
|
|
<VRow>
|
|
<VCol cols="12" md="6">
|
|
<h3 class="text-h6 font-weight-bold mb-0">
|
|
<v-icon
|
|
class="mr-2"
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
>mdi-calendar-clock</v-icon
|
|
>Appointment Detail
|
|
</h3>
|
|
|
|
<div
|
|
class="order-items-container-appiontment pt-2 pb-0"
|
|
>
|
|
<v-list class="order-items-list">
|
|
<v-list-item
|
|
class="mb-2 rounded-lg"
|
|
>
|
|
<v-list-item-content>
|
|
<v-list-item-title
|
|
class="text-subtitle-1 font-weight-medium"
|
|
>
|
|
<div
|
|
class="detail-item"
|
|
>
|
|
<span
|
|
class="detail-label text-strong"
|
|
></span>
|
|
<span
|
|
class="detail-value"
|
|
>
|
|
<!-- {{ upcoming.appointment_date }} -->
|
|
<v-list-item-title
|
|
class="text-subtitle-1 font-weight-medium"
|
|
>
|
|
<v-icon
|
|
class="mr-2"
|
|
size="small"
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
>mdi-calendar-clock</v-icon
|
|
>
|
|
{{
|
|
upcomming.appointment_date
|
|
}}
|
|
</v-list-item-title>
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="detail-item pt-3"
|
|
>
|
|
<span
|
|
class="detail-value"
|
|
>
|
|
<v-icon
|
|
class="mr-2"
|
|
size="small"
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
>mdi-clock</v-icon
|
|
>
|
|
{{
|
|
upcomming.appointment_time
|
|
}}
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="detail-item pt-3"
|
|
>
|
|
<span
|
|
class="detail-label text-strong"
|
|
>
|
|
<v-icon
|
|
class="mr-2"
|
|
size="small"
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
>mdi-world</v-icon
|
|
>
|
|
{{
|
|
upcomming.timezone
|
|
}}
|
|
</span>
|
|
</div>
|
|
</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-list>
|
|
|
|
<VCardText class="pt-0">
|
|
<RouterLink
|
|
v-if="upcomming.isMeeting"
|
|
to="/queue"
|
|
target="_blank"
|
|
>
|
|
<VBtn
|
|
style="border-radius: 20px"
|
|
block
|
|
class="mt-3 text-white"
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
>
|
|
Go to Meeting
|
|
</VBtn>
|
|
</RouterLink>
|
|
<span v-else>
|
|
<VBtn
|
|
block
|
|
style="border-radius: 20px"
|
|
class="mt-3 text-white"
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
disabled
|
|
>
|
|
Go to Meeting
|
|
</VBtn>
|
|
</span>
|
|
</VCardText>
|
|
</div>
|
|
</VCol>
|
|
<VCol cols="12" md="6">
|
|
<div
|
|
class="order-items-container h-100 pt-2"
|
|
>
|
|
<h3
|
|
class="text-h6 font-weight-bold mb-0"
|
|
>
|
|
<v-icon
|
|
class="mr-2"
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
>mdi-shopping-cart</v-icon
|
|
>Order Items
|
|
</h3>
|
|
<v-list class="order-items-list">
|
|
<!-- <h3 class="text-h6 font-weight-bold mb-0">Order Items</h3> -->
|
|
<v-list-item
|
|
v-for="item in upcomming
|
|
.items_data.items_list"
|
|
:key="item.id"
|
|
class="mb-2 rounded-lg"
|
|
two-line
|
|
>
|
|
<v-list-item-content>
|
|
<v-list-item-title
|
|
class="text-subtitle-1 font-weight-medium"
|
|
>{{
|
|
item.title
|
|
}}</v-list-item-title
|
|
>
|
|
<v-list-item-subtitle>
|
|
<v-chip
|
|
x-small
|
|
class="mr-2"
|
|
outlined
|
|
>Qty:
|
|
{{ item.quantity }}
|
|
</v-chip>
|
|
<v-chip x-small outlined
|
|
>${{
|
|
parseFloat(
|
|
item.price
|
|
).toLocaleString(
|
|
"en-US",
|
|
{
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
}
|
|
)
|
|
}}
|
|
each</v-chip
|
|
>
|
|
<v-chip
|
|
color="yellow-theme-button"
|
|
x-small
|
|
>$
|
|
{{
|
|
parseFloat(
|
|
item.quantity *
|
|
item.price
|
|
).toLocaleString(
|
|
"en-US",
|
|
{
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
}
|
|
)
|
|
}}</v-chip
|
|
>
|
|
<v-chip
|
|
color="yellow-theme-button"
|
|
x-small
|
|
>
|
|
{{ item.status }}
|
|
</v-chip>
|
|
</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
<v-list-item-action>
|
|
</v-list-item-action>
|
|
</v-list-item>
|
|
</v-list>
|
|
</div>
|
|
</VCol>
|
|
</VRow>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-else>
|
|
<v-col cols="12" md="12">
|
|
<VAlert
|
|
border="start"
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
variant="tonal"
|
|
>
|
|
<div class="text-center">No data found</div>
|
|
</VAlert>
|
|
</v-col>
|
|
</v-row>
|
|
</VCol>
|
|
<VCol cols="12" class="px-3">
|
|
<VCardTitle class="my-1 pl-0 mb-0">
|
|
<h4 class="mb-0">Previous Appointments</h4>
|
|
</VCardTitle>
|
|
|
|
<VCardText class="d-flex flex-column gap-y-4 px-0 rounded-5">
|
|
<VCard class="rounded-5" style="border-radius: 10px">
|
|
<v-row class="px-4 py-4">
|
|
<v-col cols="12" md="4" sm="6">
|
|
<VMenu
|
|
location="bottom"
|
|
:close-on-content-click="false"
|
|
:nudge-right="40"
|
|
transition="scale-transition"
|
|
offset-y
|
|
min-width="auto"
|
|
>
|
|
<template #activator="{ props }">
|
|
<v-text-field
|
|
readonly
|
|
v-model="filters.startDate"
|
|
label="Search Date"
|
|
v-bind="props"
|
|
outlined
|
|
density="compact"
|
|
@focus="showStartDatePicker = true"
|
|
></v-text-field>
|
|
</template>
|
|
<v-date-picker
|
|
v-model="startDateMenu"
|
|
@update:modelValue="datepickStart"
|
|
v-if="showStartDatePicker"
|
|
class="custom-date-picker"
|
|
hide-header
|
|
></v-date-picker>
|
|
</VMenu>
|
|
</v-col>
|
|
<v-col cols="6">
|
|
<v-btn
|
|
color="primary"
|
|
class="text-capitalize"
|
|
text
|
|
@click="resetFilters"
|
|
>
|
|
Reset
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</VCard>
|
|
<v-row>
|
|
<v-col
|
|
cols="6"
|
|
v-if="formattedHistory.length > 0"
|
|
v-for="history in formattedHistory"
|
|
:key="history.id"
|
|
>
|
|
<VCard class="order-card mb-6 rounded-lg elevation-3">
|
|
<div class="order-header pa-4 pb-0">
|
|
<v-row no-gutters align="center">
|
|
<v-col>
|
|
<div class="d-flex align-center">
|
|
<div>
|
|
<div
|
|
class="text-overline text-left"
|
|
>
|
|
Order ID:
|
|
{{ history.order_id }}
|
|
</div>
|
|
<div
|
|
class="text-overline text-subtitle-1 font-weight-medium"
|
|
>
|
|
Date:
|
|
{{
|
|
formatDate(
|
|
history.created_at
|
|
)
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</v-col>
|
|
<v-col cols="auto" class="ml-auto">
|
|
<!-- <v-chip color="rgb(var(--v-theme-yellow))" label x-large class="font-weight-bold">
|
|
Total: ${{ formatCurrency(history.previousTotalCost) }}
|
|
</v-chip> -->
|
|
|
|
<v-chip
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
label
|
|
x-large
|
|
class="font-weight-bold mt-0"
|
|
>
|
|
{{ history.status }} </v-chip
|
|
><br />
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
<VRow>
|
|
<VCol col="12">
|
|
<v-card-text class="pa-4">
|
|
<VCardTitle
|
|
class="my-1 pl-0 mb-0 pt-0 pb-0"
|
|
>
|
|
<p class="font-weight-700 mb-1">
|
|
<v-icon
|
|
class="mr-2"
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
>mdi-calendar-clock</v-icon
|
|
>Appiontment Detail
|
|
</p>
|
|
</VCardTitle>
|
|
|
|
<div
|
|
class="order-items-container-previous"
|
|
>
|
|
<v-list
|
|
class="order-items-list pt-0"
|
|
>
|
|
<v-list-item
|
|
class="mb-2 mt-3 rounded-lg"
|
|
two-line
|
|
>
|
|
<v-list-item-content>
|
|
<v-list-item-title
|
|
class="text-subtitle-1 font-weight-medium"
|
|
>
|
|
<div
|
|
class="detail-item"
|
|
>
|
|
<span
|
|
class="detail-label text-strong"
|
|
></span>
|
|
<span
|
|
class="detail-value"
|
|
>
|
|
<v-icon
|
|
class="mr-2"
|
|
size="small"
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
>mdi-calendar-clock</v-icon
|
|
>{{
|
|
history.appointment_date
|
|
}}
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="detail-item pt-3"
|
|
>
|
|
<span
|
|
class="detail-value"
|
|
>
|
|
<v-icon
|
|
class=""
|
|
size="small"
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
>mdi-clock</v-icon
|
|
>
|
|
{{
|
|
moment(
|
|
history.appointment_time,
|
|
"HH:mm:ss"
|
|
).format(
|
|
"hh:mm A"
|
|
)
|
|
}}
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="detail-item pt-3"
|
|
>
|
|
<span
|
|
class="detail-label text-strong"
|
|
>
|
|
<v-icon
|
|
class=""
|
|
size="small"
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
>mdi-world</v-icon
|
|
>
|
|
{{
|
|
history.timezone
|
|
}}
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
class="pt-3 pb-3"
|
|
>
|
|
<VBtn
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
block
|
|
outlined
|
|
class="text-white"
|
|
style="
|
|
border-radius: 20px;
|
|
"
|
|
@click="
|
|
historyDetail(
|
|
history
|
|
)
|
|
"
|
|
>
|
|
View Detail
|
|
</VBtn>
|
|
</div>
|
|
</v-list-item-title>
|
|
</v-list-item-content>
|
|
<v-list-item-action>
|
|
</v-list-item-action>
|
|
</v-list-item>
|
|
</v-list>
|
|
</div>
|
|
</v-card-text>
|
|
</VCol>
|
|
</VRow>
|
|
|
|
<v-divider></v-divider>
|
|
</VCard>
|
|
</v-col>
|
|
|
|
<v-col v-else>
|
|
<VCard border flat>
|
|
<VAlert
|
|
border="start"
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
variant="tonal"
|
|
>
|
|
<div class="text-center">No data found</div>
|
|
</VAlert>
|
|
</VCard>
|
|
</v-col>
|
|
</v-row>
|
|
</VCardText>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|
|
<style lang="scss">
|
|
.v-expansion-panel {
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 10px;
|
|
overflow: hidden;
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.v-expansion-panel-text__wrapper {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
button.v-expansion-panel-title.v-expansion-panel-title--active {
|
|
background-color: rgb(var(--v-theme-yellow)) !important;
|
|
color: #fff;
|
|
}
|
|
|
|
span.v-expansion-panel-title__icon {
|
|
color: rgb(var(--v-theme-yellow)) !important;
|
|
display: none !important;
|
|
}
|
|
|
|
.v-expansion-panel {
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 10px;
|
|
overflow: hidden;
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.v-expansion-panel:hover {
|
|
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.v-expansion-panel-title {
|
|
padding: 15px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.v-expansion-panel-title.pt-0 {
|
|
padding-top: 0;
|
|
}
|
|
|
|
// .v-expansion-panel-title:hover {
|
|
// background-color: #f9f9f9;
|
|
// color: #222;
|
|
// }
|
|
|
|
.v-expansion-panel-title .mdi {
|
|
font-size: 20px;
|
|
color: #666;
|
|
transition: transform 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.v-expansion-panel-title.v-expansion-panel-title--active .mdi {
|
|
transform: rotate(180deg);
|
|
color: #222;
|
|
}
|
|
|
|
.v-expansion-panel-text {
|
|
padding: 10px 15px;
|
|
font-size: 13px;
|
|
color: #555;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.v-expansion-panel-text .d-flex {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.v-expansion-panel-text .d-flex > div {
|
|
flex: 1;
|
|
}
|
|
|
|
.v-expansion-panel-text p {
|
|
margin-bottom: 16px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.v-expansion-panel-text h3 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
.order-header {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.order-items-container {
|
|
height: 190px;
|
|
/* Set a fixed height */
|
|
overflow-y: auto;
|
|
/* Enable vertical scrolling */
|
|
}
|
|
|
|
.order-items-container-previous {
|
|
height: 210px;
|
|
/* Set a fixed height */
|
|
overflow-y: auto;
|
|
/* Enable vertical scrolling */
|
|
}
|
|
|
|
.order-items-list {
|
|
padding-right: 16px;
|
|
/* Add some padding for the scrollbar */
|
|
}
|
|
|
|
.order-card .v-list-item {
|
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
/* Custom scrollbar styles */
|
|
.order-items-container::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.order-items-container::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.order-items-container::-webkit-scrollbar-thumb {
|
|
background: #888;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.order-items-container::-webkit-scrollbar-thumb:hover {
|
|
background: #555;
|
|
}
|
|
|
|
/* Mobile styles */
|
|
@media (max-width: 600px) {
|
|
.order-header {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.order-header .v-avatar {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.order-header .v-col {
|
|
text-align: center;
|
|
}
|
|
|
|
.order-header .ml-auto {
|
|
margin: 16px auto 0 auto;
|
|
}
|
|
|
|
.order-items-container {
|
|
height: auto;
|
|
}
|
|
}
|
|
</style>
|