116 lines
5.3 KiB
Vue
116 lines
5.3 KiB
Vue
<script setup>
|
|
import { onMounted, onUnmounted } from 'vue';
|
|
import { useStore } from 'vuex';
|
|
const store = useStore()
|
|
const isDesktop = ref(true)
|
|
const categories = ref([]);
|
|
const isMobile = ref(window.innerWidth <= 768);
|
|
const answers = ref([]);
|
|
onBeforeMount(async () => {
|
|
store.dispatch('updateCurrentPage', '/provider/telehealth')
|
|
console.log('current pt', store.getters.getCurrentCallPatient)
|
|
await store.dispatch('getAgentCategory')
|
|
categories.value = store.getters.getCategories.data;
|
|
console.log("categories", categories.value);
|
|
});
|
|
const updateCategory = async (id, name) => {
|
|
// answers.value.push({ category_id:id})
|
|
await store.dispatch('setSelectCategoryId', true);
|
|
localStorage.setItem('category_id', id)
|
|
localStorage.setItem('category_name', name)
|
|
store.dispatch('updateIsLoading', false)
|
|
}
|
|
onMounted(async () => {
|
|
window.addEventListener('resize', checkIfMobile);
|
|
})
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', checkIfMobile);
|
|
});
|
|
|
|
const checkIfMobile = () => {
|
|
isMobile.value = window.innerWidth <= 768;
|
|
};
|
|
</script>
|
|
<template>
|
|
<div class="auth-wrapper d-flex align-center justify-center">
|
|
<VDialog v-model="store.getters.getIsLoading" width="110" height="150" color="primary">
|
|
<VCardText class="" style="color: white !important;">
|
|
<div class="demo-space-x">
|
|
<VProgressCircular :size="40" color="primary" indeterminate />
|
|
</div>
|
|
</VCardText>
|
|
|
|
</VDialog>
|
|
<div class="auth-card pt-0 rounded-5" max-width="350">
|
|
|
|
<VRow>
|
|
<VCol cols="12" class="p-0">
|
|
|
|
<div v-for="category in categories" @click="updateCategory(category.id, category.name)"
|
|
:key="category">
|
|
<RouterLink :to="'/provider/questionere/' + category.category_link"
|
|
v-if="category.name != 'Family history'">
|
|
<VCard :width="isMobile ? '360' : '500'" class="mb-2">
|
|
<VRow class="justify-space-between pb-2 px-4 pt-4">
|
|
<Vcol col="auto" style="padding:11px 15px;">
|
|
<div class="d-flex flex-wrap gap-0 pb-2">
|
|
<img :src="'/assets/images/asthma/' + category.icon"
|
|
class=" mx-3 ml-0 category-icon" width="24" height="24">
|
|
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
class="mx-3 ml-0 icon icon-tabler icons-tabler-outline icon-tabler-users-group category-icon">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
|
|
<path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1" />
|
|
<path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
|
|
<path d="M17 10h2a2 2 0 0 1 2 2v1" />
|
|
<path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
|
|
<path d="M3 13v-1a2 2 0 0 1 2 -2h2" />
|
|
</svg> -->
|
|
<h4>{{ category.name }}</h4>
|
|
</div>
|
|
</Vcol>
|
|
<Vcol col="auto">
|
|
<div class="flex-wrap gap-0 pt-3 pb-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M9 6l6 6l-6 6" />
|
|
</svg>
|
|
</div>
|
|
|
|
</Vcol>
|
|
</VRow>
|
|
<div class="d-flex align-items-center">
|
|
|
|
<VProgressLinear model-value="100" height="2" color="success" :rounded="true" />
|
|
</div>
|
|
</VCard>
|
|
</RouterLink>
|
|
</div>
|
|
</VCol>
|
|
</VRow>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss">
|
|
@media (min-width: 992px) {
|
|
.category-cards {
|
|
max-width: 500px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.category-cards {
|
|
max-width: 300px !important;
|
|
}
|
|
}
|
|
|
|
.category-icon {
|
|
color: rgb(105, 108, 255);
|
|
}
|
|
</style>
|