98 lines
2.5 KiB
Vue
98 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
// NOTE: Library
|
|
import { storeToRefs } from 'pinia';
|
|
import { onMounted, watch } from 'vue';
|
|
|
|
// NOTE: Components
|
|
|
|
// NOTE: Stores & Type
|
|
|
|
import { useManualStore } from 'src/stores/manual';
|
|
import { useNavigator } from 'src/stores/navigator';
|
|
import { Icon } from '@iconify/vue/dist/iconify.js';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
// NOTE: Variable
|
|
const route = useRoute();
|
|
const manualStore = useManualStore();
|
|
const navigatorStore = useNavigator();
|
|
const { dataManual, dataTroubleshooting } = storeToRefs(manualStore);
|
|
|
|
onMounted(async () => {
|
|
navigatorStore.current.title = 'menu.manual.title';
|
|
navigatorStore.current.path = [{ text: '' }];
|
|
});
|
|
|
|
watch(
|
|
() => route.name,
|
|
async () => {
|
|
if (route.name === 'Manual') {
|
|
const res = await manualStore.getManual();
|
|
dataManual.value = res ? res : [];
|
|
}
|
|
if (route.name === 'Troubleshooting') {
|
|
const res = await manualStore.getTroubleshooting();
|
|
dataTroubleshooting.value = res ? res : [];
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="column full-height no-wrap surface-1 rounded bordered overflow-hidden q-pa-sm"
|
|
>
|
|
<section class="scroll q-gutter-y-sm">
|
|
<q-expansion-item
|
|
v-for="v in $route.name === 'Manual' ? dataManual : dataTroubleshooting"
|
|
:key="v.labelEN"
|
|
:content-inset-level="0.5"
|
|
class="rounded overflow-hidden bordered"
|
|
dense
|
|
>
|
|
<template #header>
|
|
<div class="row items-center full-width">
|
|
<Icon
|
|
v-if="!!v.icon"
|
|
:icon="v.icon"
|
|
:color="'var(--brand-1)'"
|
|
class="q-mr-sm"
|
|
/>
|
|
{{ $i18n.locale === 'eng' ? v.labelEN : v.label }}
|
|
</div>
|
|
</template>
|
|
|
|
<q-item
|
|
v-for="x in v.page"
|
|
:key="x.labelEN"
|
|
clickable
|
|
dense
|
|
class="dot items-center rounded q-my-xs"
|
|
:to="
|
|
$route.name === 'Manual'
|
|
? `/manual/${v.category}/${x.name}`
|
|
: `/troubleshooting/${v.category}/${x.name}`
|
|
"
|
|
>
|
|
<Icon
|
|
v-if="!!x.icon"
|
|
:icon="x.icon"
|
|
width="16px"
|
|
:color="'var(--brand-1)'"
|
|
class="q-mr-sm"
|
|
/>
|
|
{{ $i18n.locale === 'eng' ? x.labelEN : x.label }}
|
|
</q-item>
|
|
</q-expansion-item>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dot::before {
|
|
content: '•';
|
|
margin-right: 8px;
|
|
font-size: 1.2em;
|
|
}
|
|
</style>
|