121 lines
4.8 KiB
Vue
121 lines
4.8 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 () => {
|
|
await store.dispatch('getCategory')
|
|
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="'/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">
|
|
<h4>{{ category.name }}</h4>
|
|
</div>
|
|
</Vcol>
|
|
<Vcol col="auto">
|
|
|
|
<div class="d-flex align-center gap-0 pt-3 pb-2">
|
|
<div class="" v-if="category.question_count > 0">
|
|
<v-icon color="rgb(var(--v-theme-yellow))" size="20"
|
|
style="margin-top: -9px;">mdi-check-circle</v-icon>
|
|
<!-- <VImg :src="Success" class="success-image" style="top: -2px;"></VImg> -->
|
|
</div>
|
|
<div class="">
|
|
<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>
|
|
</div>
|
|
|
|
</Vcol>
|
|
</VRow>
|
|
<div class="d-flex align-items-center">
|
|
|
|
<VProgressLinear model-value="100" height="2" color="rgb(var(--v-theme-yellow))"
|
|
:rounded="true" />
|
|
</div>
|
|
</VCard>
|
|
</RouterLink>
|
|
</div>
|
|
</VCol>
|
|
</VRow>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss">
|
|
.success-image {
|
|
display: block;
|
|
position: relative;
|
|
height: 30px;
|
|
width: 30px;
|
|
margin: 0 auto;
|
|
// top: -1px/;
|
|
|
|
}
|
|
|
|
@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>
|