mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-06 14:08:10 +00:00
161024db9d
This pull request includes multiple changes to the sidebar and route metas to configure visibility of features on the dashboard. Here's a summary of the changes 1. Added `installationTypes`, field to routes `meta`, this works along side `permissions` and `featureFlags` This allows us to decide weather a particular feature is accessible on a particular type. For instance, the Billing pages should only be available on Cloud 2. Updated `usePolicy` and `policy.vue` to use the new `installationTypes` config 3. Updated Sidebar related components to remove `showOnlyOnCloud` to use the new policy updates. Testing the PR Here's the matrix of cases: https://docs.google.com/spreadsheets/d/15AAJntJZoyudaby77BOnRcC4435FGuT7PXbUXoTyU50/edit?usp=sharing --------- Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Sojan Jose <sojan@pepalo.com> Co-authored-by: Pranav <pranavrajs@gmail.com>
108 lines
3.1 KiB
Vue
108 lines
3.1 KiB
Vue
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
import SidebarGroupLeaf from './SidebarGroupLeaf.vue';
|
|
import SidebarGroupSeparator from './SidebarGroupSeparator.vue';
|
|
|
|
import { useSidebarContext } from './provider';
|
|
import { useEventListener } from '@vueuse/core';
|
|
|
|
const props = defineProps({
|
|
isExpanded: { type: Boolean, default: false },
|
|
label: { type: String, required: true },
|
|
icon: { type: [Object, String], required: true },
|
|
children: { type: Array, default: undefined },
|
|
activeChild: { type: Object, default: undefined },
|
|
});
|
|
|
|
const { isAllowed } = useSidebarContext();
|
|
const scrollableContainer = ref(null);
|
|
|
|
const accessibleItems = computed(() =>
|
|
props.children.filter(child => {
|
|
return child.to && isAllowed(child.to);
|
|
})
|
|
);
|
|
|
|
const hasAccessibleItems = computed(() => {
|
|
return accessibleItems.value.length > 0;
|
|
});
|
|
|
|
const isScrollable = computed(() => {
|
|
return accessibleItems.value.length > 7;
|
|
});
|
|
|
|
const scrollEnd = ref(false);
|
|
|
|
// set scrollEnd to true when the scroll reaches the end
|
|
useEventListener(scrollableContainer, 'scroll', () => {
|
|
const { scrollHeight, scrollTop, clientHeight } = scrollableContainer.value;
|
|
scrollEnd.value = scrollHeight - scrollTop === clientHeight;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<SidebarGroupSeparator
|
|
v-if="hasAccessibleItems"
|
|
v-show="isExpanded"
|
|
:label
|
|
:icon
|
|
class="my-1"
|
|
/>
|
|
<ul v-if="children.length" class="m-0 list-none reset-base relative group">
|
|
<!-- Each element has h-8, which is 32px, we will show 7 items with one hidden at the end,
|
|
which is 14rem. Then we add 16px so that we have some text visible from the next item -->
|
|
<div
|
|
ref="scrollableContainer"
|
|
:class="{
|
|
'max-h-[calc(14rem+16px)] overflow-y-scroll no-scrollbar': isScrollable,
|
|
}"
|
|
>
|
|
<SidebarGroupLeaf
|
|
v-for="child in children"
|
|
v-show="isExpanded || activeChild?.name === child.name"
|
|
v-bind="child"
|
|
:key="child.name"
|
|
:active="activeChild?.name === child.name"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="isScrollable && isExpanded"
|
|
v-show="!scrollEnd"
|
|
class="absolute bg-gradient-to-t from-n-solid-2 w-full h-12 to-transparent -bottom-1 pointer-events-none flex items-end justify-end px-2 animate-fade-in-up"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="24"
|
|
viewBox="0 0 16 24"
|
|
fill="none"
|
|
class="text-n-slate-9 opacity-50 group-hover:opacity-100"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4 4L8 8L12 4"
|
|
stroke="currentColor"
|
|
opacity="0.5"
|
|
stroke-width="1.33333"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M4 10L8 14L12 10"
|
|
stroke="currentColor"
|
|
opacity="0.75"
|
|
stroke-width="1.33333"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M4 16L8 20L12 16"
|
|
stroke="currentColor"
|
|
stroke-width="1.33333"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</ul>
|
|
</template>
|