64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue';
|
|
import {
|
|
filterHeirarchy,
|
|
getFirstLeaf,
|
|
usePanelHeirarchy,
|
|
} from '@/panels/panel';
|
|
import PanelHeirarchy from '@/components/PanelHeirarchy.vue';
|
|
import router from '@/router';
|
|
import TextInput from '@/components/TextInput.vue';
|
|
import ScreenLayout from '@/components/layout/ScreenLayout.vue';
|
|
import { Direction } from '@/composables/Direction.ts';
|
|
import { ScreenType } from '@/composables/ScreenType.ts';
|
|
|
|
const searchValue = ref('');
|
|
|
|
const heirarchy = usePanelHeirarchy();
|
|
|
|
const filtered_heirarchy = computed(() =>
|
|
filterHeirarchy(heirarchy.value, (leaf) => {
|
|
return leaf.name
|
|
.toLowerCase()
|
|
.includes(searchValue.value.toLowerCase());
|
|
}),
|
|
);
|
|
|
|
function onEnter() {
|
|
const leaf = getFirstLeaf(filtered_heirarchy.value);
|
|
if (leaf != null) {
|
|
router.push(leaf.to);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ScreenLayout :direction="Direction.Column" :type="ScreenType.Page" limit>
|
|
<div class="row">
|
|
<TextInput
|
|
autofocus
|
|
class="grow"
|
|
v-model="searchValue"
|
|
placeholder="Search"
|
|
@enter="onEnter"
|
|
></TextInput>
|
|
</div>
|
|
|
|
<div class="row grow stretch no-min-height">
|
|
<div class="column grow scroll no-min-height">
|
|
<PanelHeirarchy
|
|
:heirarchy="filtered_heirarchy"
|
|
v-if="filtered_heirarchy.length > 0"
|
|
></PanelHeirarchy>
|
|
<div v-else>
|
|
<span>No Matches Found</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScreenLayout>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@use '@/assets/variables';
|
|
</style>
|