diff --git a/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx b/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx index 7e3831348..15707159a 100644 --- a/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx +++ b/apps/sensenet/src/components/appbar/desktop-nav-menu.tsx @@ -48,7 +48,7 @@ const useStyles = makeStyles((theme: Theme) => top: globals.common.headerHeight, right: '1px', height: 'fit-content', - width: '256px', + width: '300px', }, popper: { backgroundColor: theme.palette.type === 'light' ? globals.light.navMenuColor : globals.dark.navMenuColor, @@ -117,6 +117,11 @@ export const DesktopNavMenu: FunctionComponent = () => { service.setPersonalSettingsValue({ ...settings, showHiddenItems: event.target.checked }) } + const togglePreferDisplayNameValue = () => (event: ChangeEvent) => { + const settings = service.userValue.getValue() + service.setPersonalSettingsValue({ ...settings, preferDisplayName: event.target.checked }) + } + return (
<> @@ -257,6 +262,22 @@ export const DesktopNavMenu: FunctionComponent = () => { + + + + + {localization.topMenu.preferDisplayName} + + + + + + +
diff --git a/apps/sensenet/src/components/tree/tree-with-data.tsx b/apps/sensenet/src/components/tree/tree-with-data.tsx index 26c8d6f96..253cfc546 100644 --- a/apps/sensenet/src/components/tree/tree-with-data.tsx +++ b/apps/sensenet/src/components/tree/tree-with-data.tsx @@ -42,6 +42,7 @@ export default function TreeWithData(props: TreeWithDataProps) { const prevActiveItemPath = usePreviousValue(props.activeItemPath) const prevShowHiddenItems = usePreviousValue(personalSettings.showHiddenItems) + const prevPreferDisplayName = usePreviousValue(personalSettings.preferDisplayName) const { onTreeLoadingChange } = props const loadCollection = useCallback( @@ -287,6 +288,51 @@ export default function TreeWithData(props: TreeWithDataProps) { openTree(personalSettings.showHiddenItems !== prevShowHiddenItems) }, [openTree, personalSettings.showHiddenItems, prevShowHiddenItems]) + useEffect(() => { + if (prevPreferDisplayName !== personalSettings.preferDisplayName) { + const buildTree = (items: GenericContent[], id?: number): any => { + if (!id) { + return { ...items[0], children: buildTree(items, items[0].Id), hasNextPage: false, expanded: true } + } + + return items + .filter((item) => item.ParentId === id) + .map((item) => ({ + ...item, + children: buildTree(items, item.Id), + hasNextPage: false, + expanded: items.some((treeNode) => treeNode.ParentId === item.Id) || props.activeItemPath === item.Path, + })) + } + + repo + .executeAction>({ + idOrPath: props.activeItemPath, + name: 'OpenTree', + method: 'GET', + oDataOptions: { + ...props.loadSettings, + filter: !personalSettings.showHiddenItems ? SETTINGS_FOLDER_FILTER : '', + orderby: personalSettings.preferDisplayName ? [['DisplayName', 'asc']] : [['Name', 'asc']], + }, + body: { + rootPath: props.parentPath, + withSystem: true, + }, + }) + .then((response) => { + const tree = buildTree(response.d.results) + setItemCount(tree.children.length) + setTreeData(tree) + }) + .catch(() => { + setItemCount(0) + setTreeData(undefined) + }) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [prevPreferDisplayName, personalSettings.preferDisplayName]) + const onItemClick = async (item: ItemType) => { if (!treeData) { return diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx index 5d661aa75..347d92dcd 100644 --- a/apps/sensenet/src/components/tree/tree.tsx +++ b/apps/sensenet/src/components/tree/tree.tsx @@ -10,6 +10,7 @@ import { import { GenericContent } from '@sensenet/default-content-types' import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react' import { AutoSizer, Index, List, ListRowProps } from 'react-virtualized' +import { usePersonalSettings } from '../../hooks' import { ContentContextMenu } from '../context-menu/content-context-menu' import { Icon } from '../Icon' @@ -76,6 +77,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac const [elements, setElements] = useState() const [rowHeight, setRowHeight] = useState(ROW_HEIGHT) const classes = useStyles() + const personalSettings = usePersonalSettings() const listItemRef = useCallback((node) => { if (node) { @@ -155,7 +157,9 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac } //Convert the name to two parts in order to display ... in the middle - const [firstPart, SecondPart] = getStringParts(item.Name) + const [firstPart, SecondPart] = getStringParts( + personalSettings.preferDisplayName && item.DisplayName ? item.DisplayName : item.Name, + ) const nodeItem = ( diff --git a/apps/sensenet/src/localization/default.ts b/apps/sensenet/src/localization/default.ts index 5495f8021..8450598fd 100644 --- a/apps/sensenet/src/localization/default.ts +++ b/apps/sensenet/src/localization/default.ts @@ -312,6 +312,7 @@ const values = { accountSettings: 'Account settings', openViewOptions: 'Open view options', showHiddenItems: 'Show hidden items', + preferDisplayName: 'Prefer DisplayName in Tree', viewOptions: 'View options', }, navigationCommandProvider: { diff --git a/apps/sensenet/src/localization/hungarian.ts b/apps/sensenet/src/localization/hungarian.ts index 5d8424041..a01bccb68 100644 --- a/apps/sensenet/src/localization/hungarian.ts +++ b/apps/sensenet/src/localization/hungarian.ts @@ -149,7 +149,8 @@ const values: Localization = { openNewMenu: 'Újdonságok', accountSettings: 'Felhasználói beállítások', openViewOptions: 'Felületi beállítások kinyitása', - showHiddenItems: 'Rejtett elemek megj.', + showHiddenItems: 'Rejtett elemek megjelenítése', + preferDisplayName: 'DisplayName a mappaszerkezetnél', viewOptions: 'Felület beállítások', }, settings: { diff --git a/apps/sensenet/src/services/PersonalSettings.ts b/apps/sensenet/src/services/PersonalSettings.ts index eeb5712d3..759424f03 100644 --- a/apps/sensenet/src/services/PersonalSettings.ts +++ b/apps/sensenet/src/services/PersonalSettings.ts @@ -89,6 +89,7 @@ export type PersonalSettingsType = PlatformDependent & { eventLogSize: number sendLogWithCrashReports: boolean showHiddenItems: boolean + preferDisplayName: boolean logLevel: Array language: 'default' | 'hungarian' theme: 'light' | 'dark' @@ -140,6 +141,7 @@ export const defaultSettings: PersonalSettingsType = { logLevel: ['Information', 'Warning', 'Error', 'Fatal'], theme: prefersDark ? 'dark' : 'light', showHiddenItems: true, + preferDisplayName: false, uploadHandlers: [ 'SenseNet.ContentRepository.File', 'SenseNet.ContentRepository.Image',