76 lines
2.2 KiB
Vue
76 lines
2.2 KiB
Vue
<template>
|
|
<ContentLayout :title="layout.title">
|
|
<template #action-before>
|
|
<div class="flex items-center gap-[1px] w-[200px]">
|
|
<input type="text" v-model="searchQuery" placeholder="Search" class="w-full" />
|
|
</div>
|
|
</template>
|
|
<template #body>
|
|
<div class="space-y-8">
|
|
<div v-for="section in filteredData" :key="section.category">
|
|
<h1 class="text-xl text-primary-800 font-semibold mb-[15px]">{{ section.category }}</h1>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 gap-4">
|
|
<RouterLink v-for="item in section.items" :key="item.name" :to="item.to">
|
|
<Card :icon="item.icon" :name="item.name" />
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</ContentLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from "vue";
|
|
import Card from "./Card.vue";
|
|
|
|
const layout = ref({
|
|
title: [
|
|
{
|
|
name: "Setup",
|
|
},
|
|
],
|
|
});
|
|
|
|
const settingsData = [
|
|
{
|
|
category: "Administration Setting",
|
|
items: [
|
|
{
|
|
name: "Departments",
|
|
icon: "HousePlus",
|
|
to: "/setup/departments",
|
|
},
|
|
{
|
|
name: "Document Type",
|
|
icon: "File",
|
|
to: "",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const searchQuery = ref("");
|
|
|
|
const filteredData = computed(() => {
|
|
const query = searchQuery.value.toLowerCase();
|
|
return settingsData
|
|
.map((section) => {
|
|
const filteredItems = section.items.filter((item) => {
|
|
// const hasAccess = hasPermission(item.permission);
|
|
// if (!hasAccess) return false;
|
|
if (!query) return true;
|
|
return item.name.toLowerCase().includes(query);
|
|
});
|
|
if (filteredItems.length > 0) {
|
|
return {
|
|
...section,
|
|
items: filteredItems,
|
|
};
|
|
}
|
|
return null;
|
|
})
|
|
.filter((section) => section !== null);
|
|
});
|
|
</script>
|