use subGroupCount to render subGroups (#28173)
* use subGroupCount to render subGroups fixes: #28080 Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * PR review changes Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> --------- Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
parent
582da41f4f
commit
1d8744e6c1
1 changed files with 43 additions and 43 deletions
|
@ -27,7 +27,6 @@ import { PaginatingTableToolbar } from "../table-toolbar/PaginatingTableToolbar"
|
|||
import { GroupPath } from "./GroupPath";
|
||||
|
||||
import "./group-picker-dialog.css";
|
||||
import { countGroups } from "../../groups/components/GroupTree";
|
||||
|
||||
export type GroupPickerDialogProps = {
|
||||
id?: string;
|
||||
|
@ -79,7 +78,7 @@ export const GroupPickerDialog = ({
|
|||
|
||||
if (!groupId) {
|
||||
const args: GroupQuery = {
|
||||
first: first,
|
||||
first,
|
||||
max: max + 1,
|
||||
};
|
||||
if (isSearching) {
|
||||
|
@ -93,14 +92,13 @@ export const GroupPickerDialog = ({
|
|||
throw new Error(t("notFound"));
|
||||
}
|
||||
}
|
||||
if (group?.id) {
|
||||
const args: SubGroupQuery = {
|
||||
first: first,
|
||||
max: max + 1,
|
||||
parentId: group.id,
|
||||
};
|
||||
groups = await adminClient.groups.listSubGroups(args);
|
||||
}
|
||||
|
||||
const args: SubGroupQuery = {
|
||||
first,
|
||||
max,
|
||||
parentId: groupId,
|
||||
};
|
||||
groups = await adminClient.groups.listSubGroups(args);
|
||||
}
|
||||
|
||||
if (id) {
|
||||
|
@ -115,15 +113,16 @@ export const GroupPickerDialog = ({
|
|||
setJoinedGroups(existingUserGroups || []);
|
||||
if (selectedGroup) {
|
||||
setNavigation([...navigation, selectedGroup]);
|
||||
setCount(selectedGroup.subGroupCount!);
|
||||
}
|
||||
|
||||
if (groups) {
|
||||
groups.forEach((group: SelectableGroup) => {
|
||||
group.checked = !!selectedRows.find((r) => r.id === group.id);
|
||||
});
|
||||
setGroups(groups);
|
||||
groups.forEach((group: SelectableGroup) => {
|
||||
group.checked = !!selectedRows.find((r) => r.id === group.id);
|
||||
});
|
||||
setGroups(groups);
|
||||
if (isSearching || !groupId) {
|
||||
setCount(groups.length);
|
||||
}
|
||||
setCount(isSearching ? countGroups(groups || []) : groups?.length || 0);
|
||||
},
|
||||
[groupId, filter, first, max],
|
||||
);
|
||||
|
@ -222,14 +221,27 @@ export const GroupPickerDialog = ({
|
|||
))}
|
||||
</Breadcrumb>
|
||||
<DataList aria-label={t("groups")} isCompact>
|
||||
{groups
|
||||
.slice(groupId ? first : 0, max + (groupId ? first : 0))
|
||||
.map((group: SelectableGroup) => (
|
||||
<Fragment key={group.id}>
|
||||
{(!isSearching || group.name?.includes(filter)) && (
|
||||
{groups.slice(0, max).map((group: SelectableGroup) => (
|
||||
<Fragment key={group.id}>
|
||||
{(!isSearching || group.name?.includes(filter)) && (
|
||||
<GroupRow
|
||||
key={group.id}
|
||||
group={group}
|
||||
isRowDisabled={isRowDisabled}
|
||||
onSelect={setGroupId}
|
||||
type={type}
|
||||
isSearching={isSearching}
|
||||
setIsSearching={setIsSearching}
|
||||
selectedRows={selectedRows}
|
||||
setSelectedRows={setSelectedRows}
|
||||
canBrowse={canBrowse}
|
||||
/>
|
||||
)}
|
||||
{isSearching &&
|
||||
group.subGroups?.map((g) => (
|
||||
<GroupRow
|
||||
key={group.id}
|
||||
group={group}
|
||||
key={g.id}
|
||||
group={g}
|
||||
isRowDisabled={isRowDisabled}
|
||||
onSelect={setGroupId}
|
||||
type={type}
|
||||
|
@ -239,24 +251,9 @@ export const GroupPickerDialog = ({
|
|||
setSelectedRows={setSelectedRows}
|
||||
canBrowse={canBrowse}
|
||||
/>
|
||||
)}
|
||||
{isSearching &&
|
||||
group.subGroups?.map((g) => (
|
||||
<GroupRow
|
||||
key={g.id}
|
||||
group={g}
|
||||
isRowDisabled={isRowDisabled}
|
||||
onSelect={setGroupId}
|
||||
type={type}
|
||||
isSearching={isSearching}
|
||||
setIsSearching={setIsSearching}
|
||||
selectedRows={selectedRows}
|
||||
setSelectedRows={setSelectedRows}
|
||||
canBrowse={canBrowse}
|
||||
/>
|
||||
))}
|
||||
</Fragment>
|
||||
))}
|
||||
))}
|
||||
</Fragment>
|
||||
))}
|
||||
</DataList>
|
||||
{groups.length === 0 && !isSearching && (
|
||||
<ListEmptyState
|
||||
|
@ -309,7 +306,10 @@ const GroupRow = ({
|
|||
onClick={(e) => {
|
||||
if (type === "selectOne") {
|
||||
onSelect(group.id!);
|
||||
} else if ((e.target as HTMLInputElement).type !== "checkbox") {
|
||||
} else if (
|
||||
(e.target as HTMLInputElement).type !== "checkbox" &&
|
||||
group.subGroupCount !== 0
|
||||
) {
|
||||
onSelect(group.id!);
|
||||
setIsSearching(false);
|
||||
}
|
||||
|
@ -363,7 +363,7 @@ const GroupRow = ({
|
|||
aria-label={t("groupName")}
|
||||
isPlainButtonAction
|
||||
>
|
||||
{(canBrowse || type === "selectOne") && (
|
||||
{(canBrowse || type === "selectOne") && group.subGroupCount !== 0 && (
|
||||
<Button variant="link" aria-label={t("select")}>
|
||||
<AngleRightIcon />
|
||||
</Button>
|
||||
|
|
Loading…
Reference in a new issue