From 1c77bd342d07e28afae4d07c362416281d97c2ba Mon Sep 17 00:00:00 2001 From: Viktor Nagy Date: Tue, 21 May 2024 02:24:51 +0200 Subject: [PATCH 1/3] feat: let user to switch between displayname and name in tree component --- .../components/appbar/desktop-nav-menu.tsx | 23 +++++++++- .../src/components/tree/tree-with-data.tsx | 46 +++++++++++++++++++ apps/sensenet/src/components/tree/tree.tsx | 6 ++- apps/sensenet/src/localization/default.ts | 1 + apps/sensenet/src/localization/hungarian.ts | 3 +- .../sensenet/src/services/PersonalSettings.ts | 2 + 6 files changed, 78 insertions(+), 3 deletions(-) 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 f0ee4b450..9dd777283 100644 --- a/apps/sensenet/src/localization/default.ts +++ b/apps/sensenet/src/localization/default.ts @@ -310,6 +310,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 59b5fa7bb..855b1d1c1 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', From 578bdae3010170bf85b1bebe26a746d2edd8304b Mon Sep 17 00:00:00 2001 From: Nagy Viktor Date: Wed, 5 Jun 2024 16:16:52 +0200 Subject: [PATCH 2/3] revert file change --- .husky/pre-commit | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index f25cba788..ad30e6209 100644 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,11 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -exec >/dev/tty 2>&1 + +# Check if running in a terminal +if [[ "$OSTYPE" == "linux-gnu"* || "$OSTYPE" == "darwin"* ]]; then + # Unix-like OS detected, proceed with redirection + exec >/dev/tty 2>&1 +fi + +# Continue with the rest of the script yarn lint-staged From 44a1d8ae4abcda45e27203a9f1b423edf0a653e6 Mon Sep 17 00:00:00 2001 From: Nagy Viktor Date: Wed, 5 Jun 2024 16:17:52 +0200 Subject: [PATCH 3/3] revert file change --- .husky/pre-commit | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index ad30e6209..4cb55fda0 100644 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,11 +1,14 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -# Check if running in a terminal -if [[ "$OSTYPE" == "linux-gnu"* || "$OSTYPE" == "darwin"* ]]; then - # Unix-like OS detected, proceed with redirection - exec >/dev/tty 2>&1 +# Detect /dev/tty using readlink and fd/2 +tty=$(readlink /proc/$$/fd/2) + +# Use the detected tty for redirection +if [[ -n "$tty" ]]; then + exec >"$tty" 2>&1 +else + echo "Could not detect /dev/tty" fi -# Continue with the rest of the script yarn lint-staged