jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add search to Groups view

Browse Source
This commit is contained in:
Girish Ramakrishnan
2025-09-24 07:47:40 +02:00
parent 59ccf845b5
commit 045b4db246
1 changed files with 21 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/views/GroupsView.vue
+21 -4
View File
@@ -4,8 +4,8 @@ import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;
import { ref, onMounted, useTemplateRef, inject } from 'vue';
import { Button, Menu, TableView, InputDialog } from '@cloudron/pankow';
import { ref, onMounted, useTemplateRef, inject, computed } from 'vue';
import { Button, Menu, TableView, InputDialog, TextInput } from '@cloudron/pankow';
import Section from '../components/Section.vue';
import GroupDialog from '../components/GroupDialog.vue';
import UsersModel from '../models/UsersModel.js';
@@ -88,6 +88,21 @@ function groupMembers(group) {
return group.userIds.filter(function (uid) { return !!usersById.value[uid]; }).map(function (uid) { return usersById.value[uid].username || usersById.value[uid].email; }).join(' ');
}
const searchFilter = ref('');
const filteredGroups = computed(() => {
if (!searchFilter.value) return groups.value;
return groups.value.filter(g => {
const search = searchFilter.value.toLowerCase();
if (g.name.toLowerCase().indexOf(search) !== -1) return true;
if (groupMembers(g).toLowerCase().indexOf(search) !== -1) return true;
return false;
});
});
function onEditOrAddGroup(group = null) {
if (group || features.value.userGroups) groupDialog.value.open(group);
else subscriptionRequiredDialog.value.open();
@@ -141,14 +156,16 @@ onMounted(async () => {
<Section :title="$t('main.navbar.groups')" :title-badge="!features.userGroups ? 'Upgrade' : ''">
<template #header-title-extra>
<span style="font-weight: normal; font-size: 14px">({{ busy ? '-' : groups.length }})</span>
<span style="font-weight: normal; font-size: 14px">({{ busy ? '-' : filteredGroups.length }})</span>
</template>
<template #header-buttons>
<TextInput :placeholder="$t('main.searchPlaceholder')" style="flex-grow: 1;" v-model="searchFilter"/>
<Button @click="onEditOrAddGroup()">{{ $t('main.action.add') }}</Button>
</template>
<TableView :columns="groupsColumns" :model="groups" :busy="busy" style="max-height: 400px;" :placeholder="$t('users.groups.emptyPlaceholder')">
<TableView :columns="groupsColumns" :model="filteredGroups" :busy="busy" style="max-height: 400px;" :placeholder="$t('users.groups.emptyPlaceholder')">
<template #name="group">
{{ group.name }} &nbsp; <i v-if="group.source" class="far fa-address-book" v-tooltip="$t('users.groups.externalLdapTooltip')"></i>
</template>