288 lines
10 KiB
Vue
288 lines
10 KiB
Vue
<script setup>
|
|
import { defineProps } from 'vue';
|
|
const panel = ref(0)
|
|
const error = ref();
|
|
const isMark = ref();
|
|
const isShipped = ref(true);
|
|
const isShippedColor = ref('secondary');
|
|
const isDelivered = ref(true);
|
|
const isDeliveredColor = ref('secondary');
|
|
const isTransit = ref(true);
|
|
const isTransitColor = ref('secondary');
|
|
const isReceived = ref(true);
|
|
const isReceivedColor = ref('secondary');
|
|
const isResults = ref(true);
|
|
const isResultsColor = ref('secondary');
|
|
const props = defineProps({
|
|
itemProps: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
})
|
|
|
|
const isthis = computed(async () => {
|
|
if (props.itemProps == 'shipped') {
|
|
isShipped.value = false;
|
|
isShippedColor.value = "rgb(var(--v-theme-yellow))";
|
|
}
|
|
if (props.itemProps == 'delivered') {
|
|
isShipped.value = false;
|
|
isShippedColor.value = "rgb(var(--v-theme-yellow))";
|
|
isDelivered.value = false;
|
|
isDeliveredColor.value = "rgb(var(--v-theme-yellow))";
|
|
}
|
|
if (props.itemProps == 'transit') {
|
|
isShipped.value = false;
|
|
isShippedColor.value = "rgb(var(--v-theme-yellow))";
|
|
isDelivered.value = false;
|
|
isDeliveredColor.value = "rgb(var(--v-theme-yellow))";
|
|
isTransit.value = false;
|
|
isTransitColor.value = "rgb(var(--v-theme-yellow))";
|
|
}
|
|
if (props.itemProps == 'received') {
|
|
isShipped.value = false;
|
|
isShippedColor.value = "rgb(var(--v-theme-yellow))";
|
|
isDelivered.value = false;
|
|
isDeliveredColor.value = "rgb(var(--v-theme-yellow))";
|
|
isTransit.value = false;
|
|
isTransitColor.value = "rgb(var(--v-theme-yellow))";
|
|
isReceived.value = false;
|
|
isReceivedColor.value = "rgb(var(--v-theme-yellow))";
|
|
}
|
|
if (props.itemProps == 'result') {
|
|
isShipped.value = false;
|
|
isShippedColor.value = "rgb(var(--v-theme-yellow))";
|
|
isResults.value = false;
|
|
isResultsColor.value = "rgb(var(--v-theme-yellow))";
|
|
isReceived.value = false;
|
|
isReceivedColor.value = "rgb(var(--v-theme-yellow))";
|
|
isTransit.value = false;
|
|
isTransitColor.value = "rgb(var(--v-theme-yellow))";
|
|
isDelivered.value = false;
|
|
isDeliveredColor.value = "rgb(var(--v-theme-yellow))";
|
|
}
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
<!-- <VCard class="text-center text-sm-start"> -->
|
|
<VRow no-gutters v-if="isthis">
|
|
<VCol>
|
|
<VExpansionPanels v-model="panel">
|
|
<VExpansionPanel>
|
|
<VExpansionPanelTitle variant="tonal">
|
|
<span class="font-color"><b>Lab Kit </b> <br><br>
|
|
<p> Status:{{ props.itemProps }}
|
|
</p>
|
|
<p>Test Kit Tracking : To you </p>
|
|
</span>
|
|
</VExpansionPanelTitle>
|
|
<VExpansionPanelText>
|
|
<h2 class="text-start">Results</h2>
|
|
<VCardText>
|
|
|
|
<VTimeline side="end" align="start" line-inset="8" truncate-line="both" density="compact">
|
|
<!-- SECTION Timeline Item: Flight -->
|
|
|
|
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" color="error" icon="tabler-check"
|
|
size="small">
|
|
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center gap-2 flex-wrap">
|
|
|
|
<span class="app-timeline-title">
|
|
<b>Ordered Hormone Test Kit</b><br><br>
|
|
</span>
|
|
</div>
|
|
</VTimelineItem>
|
|
|
|
<!-- !SECTION -->
|
|
<VTimelineItem :dot-color="isShippedColor" :color="isShippedColor" icon="tabler-check"
|
|
size="small">
|
|
<template #icon v-if="isShipped">
|
|
2
|
|
</template>
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
|
<div class="app-timeline-title">
|
|
<b>Shipped Hormone Test Kit</b>
|
|
</div>
|
|
</div>
|
|
</VTimelineItem>
|
|
|
|
<!-- SECTION Timeline Item: Interview Schedule -->
|
|
<VTimelineItem :dot-color="isDeliveredColor" :color="isDeliveredColor"
|
|
icon="tabler-check" size="small">
|
|
<template #icon v-if="isDelivered">
|
|
3
|
|
</template>
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
|
<div>
|
|
<b>Delivered Hormone Test Kit</b>
|
|
</div>
|
|
</div>
|
|
</VTimelineItem>
|
|
|
|
<VTimelineItem :dot-color="isTransitColor" :color="isTransitColor" icon="tabler-check"
|
|
size="small">
|
|
<template #icon v-if="isTransit">
|
|
4
|
|
</template>
|
|
<!-- <template #icon>
|
|
<VIcon size="20" icon="tabler-circle-check" color="error" />
|
|
</template> -->
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap mb-1 ">
|
|
<div>
|
|
<b>Hormone Test Kit in Transit</b>
|
|
</div>
|
|
</div>
|
|
</VTimelineItem>
|
|
<VTimelineItem :dot-color="isReceivedColor" :color="isReceivedColor" icon="tabler-check"
|
|
size="small">
|
|
<template #icon v-if="isReceived">
|
|
5
|
|
</template>
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
|
<div>
|
|
<b>Lab Received Hormone Test Kit</b>
|
|
</div>
|
|
</div>
|
|
</VTimelineItem>
|
|
<VTimelineItem :dot-color="isResultsColor" :color="isResultsColor" icon="tabler-check"
|
|
size="small">
|
|
<template #icon v-if="isResults">
|
|
6
|
|
</template>
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
|
<div>
|
|
<b>Provider Reviewed Test Results</b>
|
|
</div>
|
|
</div>
|
|
</VTimelineItem>
|
|
<!-- !SECTION -->
|
|
</VTimeline>
|
|
</VCardText>
|
|
</VExpansionPanelText>
|
|
</VExpansionPanel>
|
|
|
|
</VExpansionPanels>
|
|
</VCol>
|
|
</VRow>
|
|
<!-- </VCard> -->
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.v-timeline .v-timeline-divider__inner-dot {
|
|
background-color: white !important;
|
|
}
|
|
|
|
.font-color {
|
|
color: #fff;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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: #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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style>
|