You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
2.7 KiB
114 lines
2.7 KiB
<template>
|
|
<div
|
|
:class="id"
|
|
class="admin-index__block-container"
|
|
>
|
|
<div class="admin-index__block">
|
|
<div class="flex gap-2 justify-between">
|
|
<h4>
|
|
<BaseIcon :icon="icon" />
|
|
{{ props.title }}
|
|
</h4>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<p
|
|
v-if="props.description"
|
|
class="text-body-4"
|
|
v-text="props.description"
|
|
/>
|
|
|
|
<form
|
|
v-if="props.searchUrl"
|
|
:action="props.searchUrl"
|
|
method="get"
|
|
>
|
|
<BaseInputGroup
|
|
:button-label="t('Search')"
|
|
:input-placeholder="t('Keyword')"
|
|
button-icon="search"
|
|
input-name="keyword"
|
|
/>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="p-menu p-component p-ripple-disabled">
|
|
<ul
|
|
class="p-menu-list p-reset"
|
|
role="menu"
|
|
>
|
|
<li
|
|
v-for="(item, index) in visibleItems"
|
|
:key="index"
|
|
:aria-label="t(item.label)"
|
|
:class="item.className"
|
|
class="p-menuitem"
|
|
role="menuitem"
|
|
>
|
|
<div class="p-menuitem-content">
|
|
<BaseAppLink
|
|
:to="item.route"
|
|
:url="item.url"
|
|
class="p-menuitem-link"
|
|
>
|
|
<span
|
|
class="p-menuitem-text"
|
|
v-text="item.label"
|
|
/>
|
|
</BaseAppLink>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<AdminBlockExtraContent
|
|
:id="id"
|
|
v-model="modelExtraContent"
|
|
:editable="editable"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue"
|
|
import { useI18n } from "vue-i18n"
|
|
import BaseInputGroup from "../basecomponents/BaseInputGroup.vue"
|
|
import BaseIcon from "../basecomponents/BaseIcon.vue"
|
|
import AdminBlockExtraContent from "./AdminBlockExtraContent.vue"
|
|
|
|
const { t } = useI18n()
|
|
|
|
const modelExtraContent = defineModel("extraContent", {
|
|
type: Object,
|
|
})
|
|
|
|
const props = defineProps({
|
|
id: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
editable: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
icon: { type: String, required: false, default: () => "admin-settings" },
|
|
title: { type: String, require: true, default: () => "" },
|
|
description: { type: String, required: false, default: () => null },
|
|
searchUrl: { type: String, required: false, default: () => null },
|
|
items: { type: Array, required: true, default: () => [] },
|
|
})
|
|
|
|
const visibleItems = computed(() =>
|
|
props.items
|
|
.map((item) => {
|
|
if (!Object.keys(item).includes("visible")) {
|
|
item.visible = true
|
|
}
|
|
|
|
return item
|
|
})
|
|
.filter((item) => item.visible),
|
|
)
|
|
</script>
|
|
|