setup added
This commit is contained in:
prabidhi
parent
faef257e6c
commit
fef301045e
|
|
@ -35,7 +35,7 @@
|
|||
<div class="absolute right-4">
|
||||
<svg
|
||||
@click="toggleSideBar"
|
||||
class="stroke-secondary-700 hover:stroke-primary-700 duration-200 cursor-pointer"
|
||||
class="stroke-current text-secondary-700 hover:text-primary-700 duration-200 cursor-pointer"
|
||||
width="25px"
|
||||
height="25px"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, type PropType, ref } from "vue";
|
||||
import { computed, onMounted, type PropType, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import type { SidebarItem } from "@/dtos/common/Sidebar";
|
||||
import { useSidebar } from "@/stores/App/App";
|
||||
|
|
@ -117,7 +117,7 @@ import { storeToRefs } from "pinia";
|
|||
import { watch, nextTick } from "vue";
|
||||
const router = useRouter();
|
||||
|
||||
// const emit = defineEmits(["toggleSideBar"]);
|
||||
const emit = defineEmits(["toggleSideBar"]);
|
||||
|
||||
const sidebarStore = useSidebar();
|
||||
const { isSidebarOpen } = storeToRefs(sidebarStore);
|
||||
|
|
|
|||
|
|
@ -25,6 +25,22 @@ const authChildren: Array<RouteRecordRaw> = [
|
|||
meta: {
|
||||
permission: "",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/setup",
|
||||
name: "setup-main",
|
||||
meta: {
|
||||
permission: "",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "setup",
|
||||
component: () => import("@/views/Setup/Setup.vue"),
|
||||
meta: {
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -14,21 +14,21 @@ const router = createRouter({
|
|||
},
|
||||
children: authChildren,
|
||||
},
|
||||
// {
|
||||
// path: "/login",
|
||||
// name: "login",
|
||||
// component: () => import("@/views/Auth/Login.vue"),
|
||||
// },
|
||||
// {
|
||||
// path: "/:pathMatch(.*)*",
|
||||
// name: "404",
|
||||
// component: () => import("@/views/404.vue"),
|
||||
// },
|
||||
// {
|
||||
// path: "/403",
|
||||
// name: "403",
|
||||
// component: () => import("@/views/403.vue"),
|
||||
// },
|
||||
{
|
||||
path: "/login",
|
||||
name: "login",
|
||||
component: () => import("@/views/Auth/Login.vue"),
|
||||
},
|
||||
{
|
||||
path: "/:pathMatch(.*)*",
|
||||
name: "404",
|
||||
component: () => import("@/views/404.vue"),
|
||||
},
|
||||
{
|
||||
path: "/403",
|
||||
name: "403",
|
||||
component: () => import("@/views/403.vue"),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -34,5 +34,20 @@ export function useSidebarItems(): SidebarItem[] {
|
|||
isVisible: true,
|
||||
to: "/tippani",
|
||||
},
|
||||
{
|
||||
label: "Setup",
|
||||
isVisible: true,
|
||||
},
|
||||
{
|
||||
label: "Users",
|
||||
icon: "User",
|
||||
to: "/user",
|
||||
},
|
||||
{
|
||||
label: "Setup",
|
||||
icon: "Settings",
|
||||
isVisible: true,
|
||||
to: "/setup",
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
|
|||
34
src/views/403.vue
Normal file
34
src/views/403.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<section
|
||||
class="flex items-center p-16 text-gray-700 h-[85vh]"
|
||||
style="background-image: url(/svg/large-triangles.svg)"
|
||||
>
|
||||
<div class="container flex flex-col items-center justify-center px-5 mx-auto my-8">
|
||||
<div class="max-w-md text-center">
|
||||
<h2 class="mb-8 font-extrabold text-9xl">
|
||||
<span class="sr-only">Error</span>
|
||||
403
|
||||
</h2>
|
||||
<p class="text-2xl font-semibold md:text-3xl">You do not have the permission to visit this page.</p>
|
||||
<p class="mt-4 mb-8">Click on go back to go to previous page</p>
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
href="#"
|
||||
class="px-8 py-3 font-semibold rounded-sm bg-violet-600 text-gray-50"
|
||||
@click="onGoback()"
|
||||
>
|
||||
Go Back
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const onGoback = () => {
|
||||
router.go(-1);
|
||||
};
|
||||
</script>
|
||||
34
src/views/404.vue
Normal file
34
src/views/404.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<section
|
||||
class="flex items-center p-16 text-gray-700 h-screen"
|
||||
style="background-image: url(/svg/large-triangles.svg)"
|
||||
>
|
||||
<div class="container flex flex-col items-center justify-center px-5 mx-auto my-8">
|
||||
<div class="max-w-md text-center">
|
||||
<h2 class="mb-8 font-extrabold text-9xl">
|
||||
<span class="sr-only">Error</span>
|
||||
404
|
||||
</h2>
|
||||
<p class="text-2xl font-semibold md:text-3xl">Sorry, we couldn't find this page.</p>
|
||||
<p class="mt-4 mb-8">Click on go back to go to previous page</p>
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
href="#"
|
||||
class="px-8 py-3 font-semibold rounded-sm bg-violet-600 text-gray-50"
|
||||
@click="onGoback()"
|
||||
>
|
||||
Go Back
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const onGoback = () => {
|
||||
router.go(-1);
|
||||
};
|
||||
</script>
|
||||
23
src/views/Setup/Card.vue
Normal file
23
src/views/Setup/Card.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<div
|
||||
class="flex items-center justify-between border p-4 bg-gray-50 hover:bg-gray-200 hover:border-gray-300 hover:cursor-pointer"
|
||||
>
|
||||
<Icons :name="icon" size="60" color="gray" opacity="0.2" />
|
||||
<p class="text-lg">
|
||||
{{ name }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
75
src/views/Setup/Setup.vue
Normal file
75
src/views/Setup/Setup.vue
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<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>
|
||||
Loading…
Reference in New Issue
Block a user