From b14230e38b171552ad9725b336d03543f5a5d69e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enik=C5=91=20Pusztai?= Date: Sun, 15 Dec 2019 00:50:14 +0100 Subject: [PATCH 01/11] addbutton has moved -wip --- apps/sensenet/src/components/AddButton.tsx | 83 +++++++++++++++---- .../src/components/content/Commander.tsx | 3 - .../src/components/content/Explore.tsx | 3 - .../src/components/content/Simple.tsx | 2 - .../src/components/drawer/PermanentDrawer.tsx | 29 +++++-- apps/sensenet/src/components/search/index.tsx | 19 ++--- apps/sensenet/src/hooks/use-drawer-items.tsx | 2 - apps/sensenet/src/localization/default.ts | 1 + 8 files changed, 95 insertions(+), 47 deletions(-) diff --git a/apps/sensenet/src/components/AddButton.tsx b/apps/sensenet/src/components/AddButton.tsx index cb3fee1bb..750c88540 100644 --- a/apps/sensenet/src/components/AddButton.tsx +++ b/apps/sensenet/src/components/AddButton.tsx @@ -1,13 +1,9 @@ -import Button from '@material-ui/core/Button' -import Fab from '@material-ui/core/Fab' -import SwipeableDrawer from '@material-ui/core/SwipeableDrawer' -import Tooltip from '@material-ui/core/Tooltip' -import Typography from '@material-ui/core/Typography' import Add from '@material-ui/icons/Add' import CloudUpload from '@material-ui/icons/CloudUpload' import { GenericContent, Schema } from '@sensenet/default-content-types' import React, { useContext, useEffect, useState } from 'react' import { CurrentContentContext, useLogger, useRepository } from '@sensenet/hooks-react' +import { Button, Fab, SwipeableDrawer, Tooltip, Typography } from '@material-ui/core' import { useLocalization } from '../hooks' import { Icon } from './Icon' import { useDialog } from './dialogs' @@ -15,6 +11,7 @@ import { useDialog } from './dialogs' export interface AddButtonProps { parent?: GenericContent allowedTypes?: string[] + isOpened?: boolean } export const AddButton: React.FunctionComponent = props => { @@ -26,6 +23,7 @@ export const AddButton: React.FunctionComponent = props => { const [allowedChildTypes, setAllowedChildTypes] = useState([]) const localization = useLocalization().addButton const logger = useLogger('AddButton') + const [isAvailable, setAvailable] = useState(false) useEffect(() => { props.parent && setParent(props.parent) @@ -35,6 +33,26 @@ export const AddButton: React.FunctionComponent = props => { !props.parent && setParent(parentContext) }, [parentContext, props.parent]) + useEffect(() => { + props.parent + ? repo + .getActions({ idOrPath: parent.Id }) + .then(actions => + actions.d.Actions.findIndex((action: { Name: string }) => action.Name === 'Add') === -1 + ? setAvailable(false) + : setAvailable(true), + ) + .catch(error => { + logger.error({ + message: localization.errorGettingActions, + data: { + details: { error }, + }, + }) + }) + : setAvailable(false) + }, [isAvailable, localization.errorGettingActions, logger, parent, props.parent, repo]) + useEffect(() => { if (props.allowedTypes && props.allowedTypes.length > 0) { setAllowedChildTypes(props.allowedTypes.map(type => repo.schemas.getSchemaByName(type))) @@ -51,18 +69,53 @@ export const AddButton: React.FunctionComponent = props => { }) }) } - }, [localization.errorGettingAllowedContentTypes, logger, parent.Id, props.allowedTypes, repo, showSelectType]) + }, [ + isAvailable, + localization.errorGettingAllowedContentTypes, + logger, + parent.Id, + parentContext.Path, + props.allowedTypes, + repo, + showSelectType, + ]) return ( -
- - setShowSelectType(true)}> - - - +
+ {!props.isOpened ? ( + + setShowSelectType(true)} + disabled={!isAvailable}> + + + + ) : ( +
+ setShowSelectType(true)} + disabled={!isAvailable}> + + + Add new +
+ )} setShowSelectType(false)} diff --git a/apps/sensenet/src/components/content/Commander.tsx b/apps/sensenet/src/components/content/Commander.tsx index f5c31a0c7..39c3620b5 100644 --- a/apps/sensenet/src/components/content/Commander.tsx +++ b/apps/sensenet/src/components/content/Commander.tsx @@ -10,7 +10,6 @@ import { useRepository, } from '@sensenet/hooks-react' import { useSelectionService } from '../../hooks' -import { AddButton } from '../AddButton' import { CollectionComponent } from '../content-list' import { useDialog } from '../dialogs' @@ -141,8 +140,6 @@ export const CommanderComponent: React.FunctionComponent - - {activeParent ? : null}
) } diff --git a/apps/sensenet/src/components/content/Explore.tsx b/apps/sensenet/src/components/content/Explore.tsx index a14276b1a..84e8bd1c5 100644 --- a/apps/sensenet/src/components/content/Explore.tsx +++ b/apps/sensenet/src/components/content/Explore.tsx @@ -8,7 +8,6 @@ import { LoadSettingsContextProvider, } from '@sensenet/hooks-react' import { useSelectionService } from '../../hooks' -import { AddButton } from '../AddButton' import { ContentBreadcrumbs } from '../ContentBreadcrumbs' import { CollectionComponent } from '../content-list' import { Tree } from '../tree/index' @@ -70,8 +69,6 @@ export const Explore: React.FunctionComponent = props => fieldsToDisplay={props.fieldsToDisplay} onActiveItemChange={item => selectionService.activeContent.setValue(item)} /> - -
diff --git a/apps/sensenet/src/components/content/Simple.tsx b/apps/sensenet/src/components/content/Simple.tsx index cd863ab38..08231cfac 100644 --- a/apps/sensenet/src/components/content/Simple.tsx +++ b/apps/sensenet/src/components/content/Simple.tsx @@ -6,7 +6,6 @@ import { LoadSettingsContextProvider, } from '@sensenet/hooks-react' import { useSelectionService } from '../../hooks' -import { AddButton } from '../AddButton' import { CollectionComponent, CollectionComponentProps } from '../content-list' export interface SimpleListComponentProps { @@ -36,7 +35,6 @@ export const SimpleList: React.FunctionComponent = pro onActiveItemChange={item => selectionService.activeContent.setValue(item)} {...props.collectionComponentProps} /> - diff --git a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx index 6d1048ed7..2138ef67a 100644 --- a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx +++ b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx @@ -15,18 +15,20 @@ import { withRouter } from 'react-router' import { Link, matchPath, NavLink, RouteComponentProps } from 'react-router-dom' import { useRepository, useSession } from '@sensenet/hooks-react' import { ResponsiveContext, ResponsivePersonalSetttings } from '../../context' -import { useDrawerItems, useLocalization, usePersonalSettings, useTheme } from '../../hooks' +import { useDrawerItems, useLocalization, usePersonalSettings, useSelectionService, useTheme } from '../../hooks' import { LogoutButton } from '../LogoutButton' import { UserAvatar } from '../UserAvatar' +import { AddButton } from '../AddButton' const PermanentDrawer: React.FunctionComponent = props => { const settings = useContext(ResponsivePersonalSetttings) + const selectionService = useSelectionService() const personalSettings = usePersonalSettings() const theme = useTheme() const session = useSession() const repo = useRepository() const device = useContext(ResponsiveContext) - + const [currentComponent, setcurrentComponent] = useState(selectionService.activeContent.getValue()) const [opened, setOpened] = useState(settings.drawer.type === 'permanent') const items = useDrawerItems() const localization = useLocalization().drawer @@ -35,13 +37,21 @@ const PermanentDrawer: React.FunctionComponent = props => { personalSettings.repositories.find(r => r.url === PathHelper.trimSlashes(repo.configuration.repositoryUrl)), ) - useEffect( - () => - setCurrentRepoEntry( - personalSettings.repositories.find(r => r.url === PathHelper.trimSlashes(repo.configuration.repositoryUrl)), - ), - [personalSettings, repo], - ) + useEffect(() => { + const activeComponentObserve = selectionService.activeContent.subscribe(newActiveComponent => + setcurrentComponent(newActiveComponent), + ) + + return function cleanup() { + activeComponentObserve.dispose() + } + }, [selectionService.activeContent]) + + useEffect(() => { + setCurrentRepoEntry( + personalSettings.repositories.find(r => r.url === PathHelper.trimSlashes(repo.configuration.repositoryUrl)), + ) + }, [personalSettings, repo]) if (!settings.drawer.enabled) { return null @@ -63,6 +73,7 @@ const PermanentDrawer: React.FunctionComponent = props => { transition: 'width 100ms ease-in-out', }}>
+ {items.map((item, index) => { const isActive = matchPath(props.location.pathname, `/:repositoryId${item.url}`) return isActive ? ( diff --git a/apps/sensenet/src/components/search/index.tsx b/apps/sensenet/src/components/search/index.tsx index 16697e882..8d11548e1 100644 --- a/apps/sensenet/src/components/search/index.tsx +++ b/apps/sensenet/src/components/search/index.tsx @@ -17,10 +17,9 @@ import { useRepository, } from '@sensenet/hooks-react' import { ResponsivePersonalSetttings } from '../../context' -import { useContentRouting, useLocalization } from '../../hooks' +import { useContentRouting, useLocalization, useSelectionService } from '../../hooks' import { CollectionComponent, isReferenceField } from '../content-list' import { useDialog } from '../dialogs' -import { AddButton } from '../AddButton' const loadCount = 20 const searchDebounceTime = 400 @@ -44,14 +43,7 @@ const Search: React.FunctionComponent(decodeQueryData(props.match.params.queryData)) - const [activeParent, setActiveParent] = useState(null as any) - - useEffect(() => { - if (queryData.parentPath && queryData.parentPath.length > 0) { - setActiveParent({ Path: queryData.parentPath } as GenericContent) - } - }, [queryData.parentPath]) - + const selectionService = useSelectionService() const localization = useLocalization().search const [scrollToken, setScrollToken] = useState(Math.random()) const [scrollLock] = useState(new Semaphore(1)) @@ -220,10 +212,11 @@ const Search: React.FunctionComponent { /** */ }} + onSelectionChange={sel => { + selectionService.selection.setValue(sel) + }} + onActiveItemChange={item => selectionService.activeContent.setValue(item)} /> - {queryData.showAddButton && queryData.parentPath && queryData.parentPath.length > 0 ? ( - - ) : null} diff --git a/apps/sensenet/src/hooks/use-drawer-items.tsx b/apps/sensenet/src/hooks/use-drawer-items.tsx index 732c4eceb..41b861e59 100644 --- a/apps/sensenet/src/hooks/use-drawer-items.tsx +++ b/apps/sensenet/src/hooks/use-drawer-items.tsx @@ -7,7 +7,6 @@ import SearchTwoTone from '@material-ui/icons/SearchTwoTone' import WidgetsTwoTone from '@material-ui/icons/WidgetsTwoTone' import { DashboardTwoTone, DeleteTwoTone } from '@material-ui/icons' import { useRepository, useSession } from '@sensenet/hooks-react' -import { LoginState } from '@sensenet/client-core' import { Icon } from '../components/Icon' import { BuiltinDrawerItem, @@ -165,7 +164,6 @@ export const useDrawerItems = () => { useEffect(() => { settings.drawer.items - .filter(() => session.state === LoginState.Authenticated) .filterAsync(async item => { if (!item.permissions || !item.permissions.length) { return true diff --git a/apps/sensenet/src/localization/default.ts b/apps/sensenet/src/localization/default.ts index 9b4effce2..0191447cf 100644 --- a/apps/sensenet/src/localization/default.ts +++ b/apps/sensenet/src/localization/default.ts @@ -17,6 +17,7 @@ const values = { errorGettingAllowedContentTypes: 'There was an error while fetching the allowed content types.', contentCreatedNotification: `The content '{0}' has been created succesfully.`, errorPostingContentNotification: 'There was an error during content creation', + errorGettingActions: 'There was an error while fetching the actions.', }, commandPalette: { title: 'Show Command Palette', From bd28e8d501b59abec66a8c077736d603c258af42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enik=C5=91=20Pusztai?= Date: Sun, 15 Dec 2019 23:19:04 +0100 Subject: [PATCH 02/11] still wip --- apps/sensenet/src/components/AddButton.tsx | 35 +++++++++++++---- .../src/components/drawer/PermanentDrawer.tsx | 33 ++++++++-------- apps/sensenet/src/hooks/use-drawer-items.tsx | 38 ++++++++++++++++++- 3 files changed, 79 insertions(+), 27 deletions(-) diff --git a/apps/sensenet/src/components/AddButton.tsx b/apps/sensenet/src/components/AddButton.tsx index 750c88540..5e68bbda8 100644 --- a/apps/sensenet/src/components/AddButton.tsx +++ b/apps/sensenet/src/components/AddButton.tsx @@ -12,6 +12,7 @@ export interface AddButtonProps { parent?: GenericContent allowedTypes?: string[] isOpened?: boolean + path: string } export const AddButton: React.FunctionComponent = props => { @@ -50,8 +51,24 @@ export const AddButton: React.FunctionComponent = props => { }, }) }) + : props.path !== '' + ? repo + .getActions({ idOrPath: props.path }) + .then(actions => + actions.d.Actions.findIndex((action: { Name: string }) => action.Name === 'Add') === -1 + ? setAvailable(false) + : setAvailable(true), + ) + .catch(error => { + logger.error({ + message: localization.errorGettingActions, + data: { + details: { error }, + }, + }) + }) : setAvailable(false) - }, [isAvailable, localization.errorGettingActions, logger, parent, props.parent, repo]) + }, [isAvailable, localization.errorGettingActions, logger, parent, props.parent, props.path, repo]) useEffect(() => { if (props.allowedTypes && props.allowedTypes.length > 0) { @@ -90,13 +107,15 @@ export const AddButton: React.FunctionComponent = props => { }}> {!props.isOpened ? ( - setShowSelectType(true)} - disabled={!isAvailable}> - - + + setShowSelectType(true)} + disabled={!isAvailable}> + + + ) : (
= props => { const repo = useRepository() const device = useContext(ResponsiveContext) const [currentComponent, setcurrentComponent] = useState(selectionService.activeContent.getValue()) + const [currentPath, setCurrentPath] = useState('') const [opened, setOpened] = useState(settings.drawer.type === 'permanent') const items = useDrawerItems() const localization = useLocalization().drawer @@ -73,29 +74,25 @@ const PermanentDrawer: React.FunctionComponent = props => { transition: 'width 100ms ease-in-out', }}>
- + {items.map((item, index) => { - const isActive = matchPath(props.location.pathname, `/:repositoryId${item.url}`) - return isActive ? ( - - - {item.primaryText}
{item.secondaryText} - - } - placement="right"> - {item.icon} - - {opened ? : null} - - ) : ( + return ( - + key={index} + isActive={match => { + if (!match) { + return false + } + setCurrentPath(item.root ? item.root : '') + return true + }}> + diff --git a/apps/sensenet/src/hooks/use-drawer-items.tsx b/apps/sensenet/src/hooks/use-drawer-items.tsx index 41b861e59..56183855d 100644 --- a/apps/sensenet/src/hooks/use-drawer-items.tsx +++ b/apps/sensenet/src/hooks/use-drawer-items.tsx @@ -7,6 +7,7 @@ import SearchTwoTone from '@material-ui/icons/SearchTwoTone' import WidgetsTwoTone from '@material-ui/icons/WidgetsTwoTone' import { DashboardTwoTone, DeleteTwoTone } from '@material-ui/icons' import { useRepository, useSession } from '@sensenet/hooks-react' +import { LoginState } from '@sensenet/client-core' import { Icon } from '../components/Icon' import { BuiltinDrawerItem, @@ -28,6 +29,7 @@ export interface DrawerItem { url: string icon: JSX.Element requiredGroupPath: string + root?: string } export const useDrawerItems = () => { @@ -59,6 +61,32 @@ export const useDrawerItems = () => { [localization], ) + const getRootFromSetting = useCallback( + (item: ContentDrawerItem | QueryDrawerItem | BuiltinDrawerItem | DashboardDrawerItem) => { + switch (item.itemType) { + case 'Search': + return undefined + case 'Content': + return '/Root/Content' + case 'Users and groups': + return '/Root/IMS/Public' + case 'Trash': + return '/Root/Trash' + case 'Content Types': + return '/Root/System/Schema/ContentTypes/GenericContent/ListItem' + case 'Localization': + return '/Root/Localization' + case 'Setup': + return '/Root/System/Settings' + case 'Dashboard': + return undefined + default: + return undefined + } + }, + [], + ) + const getIconFromSetting = useCallback( (item: ContentDrawerItem | QueryDrawerItem | BuiltinDrawerItem | DashboardDrawerItem) => { switch (item.itemType) { @@ -156,14 +184,22 @@ export const useDrawerItems = () => { name: setting.itemType, requiredGroupPath: '', url: getUrlFromSetting(setting), + root: getRootFromSetting(setting), } return drawerItem }, - [getIconFromSetting, getItemDescriptionFromSettings, getItemNameFromSettings, getUrlFromSetting], + [ + getIconFromSetting, + getItemDescriptionFromSettings, + getItemNameFromSettings, + getRootFromSetting, + getUrlFromSetting, + ], ) useEffect(() => { settings.drawer.items + .filter(() => session.state === LoginState.Authenticated) .filterAsync(async item => { if (!item.permissions || !item.permissions.length) { return true From b1b37a7cb524f69f90824bd3139c8923f43f3337 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enik=C5=91=20Pusztai?= Date: Mon, 16 Dec 2019 10:10:13 +0100 Subject: [PATCH 03/11] addButton has been modified --- apps/sensenet/src/components/AddButton.tsx | 52 ++++++++++--------- .../src/components/drawer/PermanentDrawer.tsx | 24 +++++++-- 2 files changed, 47 insertions(+), 29 deletions(-) diff --git a/apps/sensenet/src/components/AddButton.tsx b/apps/sensenet/src/components/AddButton.tsx index 5e68bbda8..77a258866 100644 --- a/apps/sensenet/src/components/AddButton.tsx +++ b/apps/sensenet/src/components/AddButton.tsx @@ -10,7 +10,6 @@ import { useDialog } from './dialogs' export interface AddButtonProps { parent?: GenericContent - allowedTypes?: string[] isOpened?: boolean path: string } @@ -71,31 +70,34 @@ export const AddButton: React.FunctionComponent = props => { }, [isAvailable, localization.errorGettingActions, logger, parent, props.parent, props.path, repo]) useEffect(() => { - if (props.allowedTypes && props.allowedTypes.length > 0) { - setAllowedChildTypes(props.allowedTypes.map(type => repo.schemas.getSchemaByName(type))) - } else if (showSelectType) { - repo - .getAllowedChildTypes({ idOrPath: parent.Id }) - .then(types => setAllowedChildTypes(types.d.results.map(t => repo.schemas.getSchemaByName(t.Name)))) - .catch(error => { - logger.error({ - message: localization.errorGettingAllowedContentTypes, - data: { - details: { error }, - }, - }) - }) + if (showSelectType) { + props.parent + ? repo + .getAllowedChildTypes({ idOrPath: parent.Id }) + .then(types => setAllowedChildTypes(types.d.results.map(t => repo.schemas.getSchemaByName(t.Name)))) + .catch(error => { + logger.error({ + message: localization.errorGettingAllowedContentTypes, + data: { + details: { error }, + }, + }) + }) + : props.path !== '' + ? repo + .getAllowedChildTypes({ idOrPath: props.path }) + .then(types => setAllowedChildTypes(types.d.results.map(t => repo.schemas.getSchemaByName(t.Name)))) + .catch(error => { + logger.error({ + message: localization.errorGettingAllowedContentTypes, + data: { + details: { error }, + }, + }) + }) + : setAllowedChildTypes([]) } - }, [ - isAvailable, - localization.errorGettingAllowedContentTypes, - logger, - parent.Id, - parentContext.Path, - props.allowedTypes, - repo, - showSelectType, - ]) + }, [localization.errorGettingAllowedContentTypes, logger, parent.Id, props.parent, props.path, repo, showSelectType]) return (
= props => { /> {device === 'mobile' ? null : ( - + { + if (!match) { + return false + } + setCurrentPath('') + return true + }}> - + )} @@ -145,7 +154,14 @@ const PermanentDrawer: React.FunctionComponent = props => { to={'/personalSettings'} activeStyle={{ opacity: 1 }} style={{ textDecoration: 'none', opacity: 0.54 }} - key={'personalSettings'}> + key={'personalSettings'} + isActive={match => { + if (!match) { + return false + } + setCurrentPath('') + return true + }}> Date: Mon, 16 Dec 2019 15:49:55 +0100 Subject: [PATCH 04/11] Fix for ContentTypes (and any query related browser) --- apps/sensenet/src/components/AddButton.tsx | 70 ++++++++++++------- .../src/components/content/Commander.tsx | 9 ++- .../src/components/content/Explore.tsx | 10 ++- .../src/components/content/Simple.tsx | 10 ++- .../src/components/drawer/PermanentDrawer.tsx | 28 ++++++-- apps/sensenet/src/components/search/index.tsx | 8 ++- apps/sensenet/src/hooks/index.ts | 1 + .../src/hooks/use-query-data-service.ts | 9 +++ .../sensenet/src/services/QueryDataService.ts | 14 ++++ apps/sensenet/src/services/index.ts | 1 + 10 files changed, 122 insertions(+), 38 deletions(-) create mode 100644 apps/sensenet/src/hooks/use-query-data-service.ts create mode 100644 apps/sensenet/src/services/QueryDataService.ts diff --git a/apps/sensenet/src/components/AddButton.tsx b/apps/sensenet/src/components/AddButton.tsx index 77a258866..9f0e71a8c 100644 --- a/apps/sensenet/src/components/AddButton.tsx +++ b/apps/sensenet/src/components/AddButton.tsx @@ -12,6 +12,7 @@ export interface AddButtonProps { parent?: GenericContent isOpened?: boolean path: string + allowedTypes?: string[] } export const AddButton: React.FunctionComponent = props => { @@ -38,7 +39,9 @@ export const AddButton: React.FunctionComponent = props => { ? repo .getActions({ idOrPath: parent.Id }) .then(actions => - actions.d.Actions.findIndex((action: { Name: string }) => action.Name === 'Add') === -1 + actions.d.Actions.findIndex( + (action: { Name: string }) => action.Name === 'Add' || action.Name === 'Upload', + ) === -1 ? setAvailable(false) : setAvailable(true), ) @@ -54,7 +57,9 @@ export const AddButton: React.FunctionComponent = props => { ? repo .getActions({ idOrPath: props.path }) .then(actions => - actions.d.Actions.findIndex((action: { Name: string }) => action.Name === 'Add') === -1 + actions.d.Actions.findIndex( + (action: { Name: string }) => action.Name === 'Add' || action.Name === 'Upload', + ) === -1 ? setAvailable(false) : setAvailable(true), ) @@ -71,33 +76,46 @@ export const AddButton: React.FunctionComponent = props => { useEffect(() => { if (showSelectType) { - props.parent - ? repo - .getAllowedChildTypes({ idOrPath: parent.Id }) - .then(types => setAllowedChildTypes(types.d.results.map(t => repo.schemas.getSchemaByName(t.Name)))) - .catch(error => { - logger.error({ - message: localization.errorGettingAllowedContentTypes, - data: { - details: { error }, - }, + if (props.allowedTypes && props.allowedTypes.length > 0) { + setAllowedChildTypes(props.allowedTypes.map(type => repo.schemas.getSchemaByName(type))) + } else { + props.parent + ? repo + .getAllowedChildTypes({ idOrPath: parent.Id }) + .then(types => setAllowedChildTypes(types.d.results.map(t => repo.schemas.getSchemaByName(t.Name)))) + .catch(error => { + logger.error({ + message: localization.errorGettingAllowedContentTypes, + data: { + details: { error }, + }, + }) }) - }) - : props.path !== '' - ? repo - .getAllowedChildTypes({ idOrPath: props.path }) - .then(types => setAllowedChildTypes(types.d.results.map(t => repo.schemas.getSchemaByName(t.Name)))) - .catch(error => { - logger.error({ - message: localization.errorGettingAllowedContentTypes, - data: { - details: { error }, - }, + : props.path !== '' + ? repo + .getAllowedChildTypes({ idOrPath: props.path }) + .then(types => setAllowedChildTypes(types.d.results.map(t => repo.schemas.getSchemaByName(t.Name)))) + .catch(error => { + logger.error({ + message: localization.errorGettingAllowedContentTypes, + data: { + details: { error }, + }, + }) }) - }) - : setAllowedChildTypes([]) + : setAllowedChildTypes([]) + } } - }, [localization.errorGettingAllowedContentTypes, logger, parent.Id, props.parent, props.path, repo, showSelectType]) + }, [ + localization.errorGettingAllowedContentTypes, + logger, + parent.Id, + props.allowedTypes, + props.parent, + props.path, + repo, + showSelectType, + ]) return (
(null) const [_rightPanelRef, setRightPanelRef] = useState(null) @@ -44,6 +44,11 @@ export const CommanderComponent: React.FunctionComponent([]) + useEffect(() => { + queryDataService.queryData.setValue(undefined) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) + useEffect(() => { activePanel === 'left' ? setActiveParent(leftParent) : setActiveParent(rightParent) }, [leftParent, rightParent, activePanel]) diff --git a/apps/sensenet/src/components/content/Explore.tsx b/apps/sensenet/src/components/content/Explore.tsx index 84e8bd1c5..5c946baf5 100644 --- a/apps/sensenet/src/components/content/Explore.tsx +++ b/apps/sensenet/src/components/content/Explore.tsx @@ -1,5 +1,5 @@ import { ConstantContent } from '@sensenet/client-core' -import React from 'react' +import React, { useEffect } from 'react' import { GenericContent } from '@sensenet/default-content-types' import { CurrentAncestorsProvider, @@ -7,7 +7,7 @@ import { CurrentContentProvider, LoadSettingsContextProvider, } from '@sensenet/hooks-react' -import { useSelectionService } from '../../hooks' +import { useQueryDataService, useSelectionService } from '../../hooks' import { ContentBreadcrumbs } from '../ContentBreadcrumbs' import { CollectionComponent } from '../content-list' import { Tree } from '../tree/index' @@ -22,6 +22,12 @@ export interface ExploreComponentProps { export const Explore: React.FunctionComponent = props => { const selectionService = useSelectionService() + const queryDataService = useQueryDataService() + + useEffect(() => { + queryDataService.queryData.setValue(undefined) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) return (
diff --git a/apps/sensenet/src/components/content/Simple.tsx b/apps/sensenet/src/components/content/Simple.tsx index 08231cfac..6d8211317 100644 --- a/apps/sensenet/src/components/content/Simple.tsx +++ b/apps/sensenet/src/components/content/Simple.tsx @@ -1,11 +1,11 @@ -import React from 'react' +import React, { useEffect } from 'react' import { CurrentAncestorsProvider, CurrentChildrenProvider, CurrentContentProvider, LoadSettingsContextProvider, } from '@sensenet/hooks-react' -import { useSelectionService } from '../../hooks' +import { useQueryDataService, useSelectionService } from '../../hooks' import { CollectionComponent, CollectionComponentProps } from '../content-list' export interface SimpleListComponentProps { @@ -16,6 +16,12 @@ export interface SimpleListComponentProps { export const SimpleList: React.FunctionComponent = props => { const selectionService = useSelectionService() + const queryDataService = useQueryDataService() + + useEffect(() => { + queryDataService.queryData.setValue(undefined) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) return (
diff --git a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx index c9109653c..243c97bc1 100644 --- a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx +++ b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx @@ -15,7 +15,14 @@ import { withRouter } from 'react-router' import { matchPath, NavLink, RouteComponentProps } from 'react-router-dom' import { useRepository, useSession } from '@sensenet/hooks-react' import { ResponsiveContext, ResponsivePersonalSetttings } from '../../context' -import { useDrawerItems, useLocalization, usePersonalSettings, useSelectionService, useTheme } from '../../hooks' +import { + useDrawerItems, + useLocalization, + usePersonalSettings, + useQueryDataService, + useSelectionService, + useTheme, +} from '../../hooks' import { LogoutButton } from '../LogoutButton' import { UserAvatar } from '../UserAvatar' import { AddButton } from '../AddButton' @@ -23,12 +30,14 @@ import { AddButton } from '../AddButton' const PermanentDrawer: React.FunctionComponent = props => { const settings = useContext(ResponsivePersonalSetttings) const selectionService = useSelectionService() + const queryDataService = useQueryDataService() const personalSettings = usePersonalSettings() const theme = useTheme() const session = useSession() const repo = useRepository() const device = useContext(ResponsiveContext) - const [currentComponent, setcurrentComponent] = useState(selectionService.activeContent.getValue()) + const [currentComponent, setCurrentComponent] = useState(selectionService.activeContent.getValue()) + const [queryData, setQueryData] = useState(queryDataService.queryData.getValue()) const [currentPath, setCurrentPath] = useState('') const [opened, setOpened] = useState(settings.drawer.type === 'permanent') const items = useDrawerItems() @@ -40,13 +49,17 @@ const PermanentDrawer: React.FunctionComponent = props => { useEffect(() => { const activeComponentObserve = selectionService.activeContent.subscribe(newActiveComponent => - setcurrentComponent(newActiveComponent), + setCurrentComponent(newActiveComponent), ) + const queryDataObserve = queryDataService.queryData.subscribe(newQueryData => setQueryData(newQueryData)) + return function cleanup() { activeComponentObserve.dispose() + queryDataObserve.dispose() } - }, [selectionService.activeContent]) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) useEffect(() => { setCurrentRepoEntry( @@ -74,7 +87,12 @@ const PermanentDrawer: React.FunctionComponent = props => { transition: 'width 100ms ease-in-out', }}>
- + {items.map((item, index) => { return ( (decodeQueryData(props.match.params.queryData)) const selectionService = useSelectionService() + const queryDataService = useQueryDataService() const localization = useLocalization().search const [scrollToken, setScrollToken] = useState(Math.random()) const [scrollLock] = useState(new Semaphore(1)) @@ -55,6 +56,11 @@ const Search: React.FunctionComponent { + queryDataService.queryData.setValue(queryData) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [queryData]) + useEffect(() => { try { const data = decodeQueryData(props.match.params.queryData || '{}') diff --git a/apps/sensenet/src/hooks/index.ts b/apps/sensenet/src/hooks/index.ts index 43540eac8..e02ac3bbe 100644 --- a/apps/sensenet/src/hooks/index.ts +++ b/apps/sensenet/src/hooks/index.ts @@ -6,6 +6,7 @@ export * from './use-loadContent' export * from './use-localization' export * from './use-personal-settings' export * from './use-selection-service' +export * from './use-query-data-service' export * from './use-string-replace' export * from './use-theme' export * from './use-widgets' diff --git a/apps/sensenet/src/hooks/use-query-data-service.ts b/apps/sensenet/src/hooks/use-query-data-service.ts new file mode 100644 index 000000000..ccf081937 --- /dev/null +++ b/apps/sensenet/src/hooks/use-query-data-service.ts @@ -0,0 +1,9 @@ +import { useState } from 'react' +import { useInjector } from '@sensenet/hooks-react' +import { QueryDataService } from '../services/QueryDataService' + +export const useQueryDataService = () => { + const injector = useInjector() + const [queryDataService] = useState(injector.getInstance(QueryDataService)) + return queryDataService +} diff --git a/apps/sensenet/src/services/QueryDataService.ts b/apps/sensenet/src/services/QueryDataService.ts new file mode 100644 index 000000000..e6f174c19 --- /dev/null +++ b/apps/sensenet/src/services/QueryDataService.ts @@ -0,0 +1,14 @@ +import { Disposable, Injectable, ObservableValue } from '@sensenet/client-utils' +import { QueryData } from '../components/search' + +/** + * A context service to get/set the query data + */ +@Injectable({ lifetime: 'singleton' }) +export class QueryDataService implements Disposable { + public queryData = new ObservableValue(undefined) + + public async dispose() { + this.queryData.dispose() + } +} diff --git a/apps/sensenet/src/services/index.ts b/apps/sensenet/src/services/index.ts index 6108bb185..ddf4871c7 100644 --- a/apps/sensenet/src/services/index.ts +++ b/apps/sensenet/src/services/index.ts @@ -8,5 +8,6 @@ export * from './LocalizationService' export * from './PersonalSettings' export * from './RepositoryManager' export * from './SelectionService' +export * from './QueryDataService' export * from './UploadTracker' export * from './request-counter-service' From cbc03d9cd6621106bd14cab7c2b6b54ebeffdafb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enik=C5=91=20Pusztai?= Date: Tue, 17 Dec 2019 16:00:08 +0100 Subject: [PATCH 05/11] problems solved --- .vscode/settings.json | 3 +- apps/sensenet/src/components/AddButton.tsx | 180 ++++++++---------- .../src/components/content/Commander.tsx | 8 +- .../src/components/content/Explore.tsx | 10 +- .../src/components/content/Simple.tsx | 10 +- .../src/components/drawer/PermanentDrawer.tsx | 21 +- apps/sensenet/src/components/search/index.tsx | 8 +- apps/sensenet/src/hooks/index.ts | 1 - apps/sensenet/src/hooks/use-drawer-items.tsx | 2 +- .../src/hooks/use-query-data-service.ts | 9 - apps/sensenet/src/localization/default.ts | 1 + apps/sensenet/src/localization/hungarian.ts | 1 + .../sensenet/src/services/QueryDataService.ts | 14 -- apps/sensenet/src/services/index.ts | 1 - 14 files changed, 96 insertions(+), 173 deletions(-) delete mode 100644 apps/sensenet/src/hooks/use-query-data-service.ts delete mode 100644 apps/sensenet/src/services/QueryDataService.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index 7908240a6..35a6d34f1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,4 @@ { "typescript.tsdk": "node_modules/typescript/lib", - "editor.formatOnSave": true, - "eslint.validate": [{ "language": "typescript", "autoFix": true }, { "language": "typescriptreact", "autoFix": true }] + "editor.formatOnSave": true } diff --git a/apps/sensenet/src/components/AddButton.tsx b/apps/sensenet/src/components/AddButton.tsx index 9f0e71a8c..9e401cd2a 100644 --- a/apps/sensenet/src/components/AddButton.tsx +++ b/apps/sensenet/src/components/AddButton.tsx @@ -3,19 +3,50 @@ import CloudUpload from '@material-ui/icons/CloudUpload' import { GenericContent, Schema } from '@sensenet/default-content-types' import React, { useContext, useEffect, useState } from 'react' import { CurrentContentContext, useLogger, useRepository } from '@sensenet/hooks-react' -import { Button, Fab, SwipeableDrawer, Tooltip, Typography } from '@material-ui/core' +import { + Button, + createStyles, + IconButton, + ListItem, + ListItemIcon, + ListItemText, + makeStyles, + SwipeableDrawer, + Theme, + Tooltip, + Typography, +} from '@material-ui/core' import { useLocalization } from '../hooks' import { Icon } from './Icon' import { useDialog } from './dialogs' +const useStyles = makeStyles((theme: Theme) => { + const buttonBackground = theme.palette.primary.main + const buttonBackgroundHover = theme.palette.primary.dark + + return createStyles({ + addButton: { + width: '32px', + height: '32px', + minHeight: 0, + padding: 0, + margin: '0.5rem 0.5rem', + backgroundColor: buttonBackground, + '&:hover': { + backgroundColor: buttonBackgroundHover, + }, + }, + }) +}) + export interface AddButtonProps { parent?: GenericContent isOpened?: boolean path: string - allowedTypes?: string[] } export const AddButton: React.FunctionComponent = props => { + const classes = useStyles() const repo = useRepository() const { openDialog } = useDialog() const parentContext = useContext(CurrentContentContext) @@ -35,125 +66,82 @@ export const AddButton: React.FunctionComponent = props => { }, [parentContext, props.parent]) useEffect(() => { - props.parent - ? repo - .getActions({ idOrPath: parent.Id }) - .then(actions => - actions.d.Actions.findIndex( - (action: { Name: string }) => action.Name === 'Add' || action.Name === 'Upload', - ) === -1 - ? setAvailable(false) - : setAvailable(true), - ) - .catch(error => { - logger.error({ - message: localization.errorGettingActions, - data: { - details: { error }, - }, - }) - }) - : props.path !== '' - ? repo - .getActions({ idOrPath: props.path }) - .then(actions => - actions.d.Actions.findIndex( - (action: { Name: string }) => action.Name === 'Add' || action.Name === 'Upload', - ) === -1 - ? setAvailable(false) - : setAvailable(true), - ) - .catch(error => { - logger.error({ - message: localization.errorGettingActions, - data: { - details: { error }, - }, - }) - }) - : setAvailable(false) - }, [isAvailable, localization.errorGettingActions, logger, parent, props.parent, props.path, repo]) + const getActions = async () => { + try { + const actions = await repo.getActions({ idOrPath: props.parent ? parent.Id : props.path }) + const isActionFound = actions.d.Actions.some(action => action.Name === 'Add' || action.Name === 'Upload') + setAvailable(isActionFound) + } catch (error) { + logger.error({ + message: localization.errorGettingActions, + data: { + details: { error }, + }, + }) + } + } + + if (props.parent || props.path !== '') { + getActions() + } else { + setAvailable(false) + } + }, [localization.errorGettingActions, logger, parent, props.parent, props.path, repo]) useEffect(() => { - if (showSelectType) { - if (props.allowedTypes && props.allowedTypes.length > 0) { - setAllowedChildTypes(props.allowedTypes.map(type => repo.schemas.getSchemaByName(type))) - } else { - props.parent - ? repo - .getAllowedChildTypes({ idOrPath: parent.Id }) - .then(types => setAllowedChildTypes(types.d.results.map(t => repo.schemas.getSchemaByName(t.Name)))) - .catch(error => { - logger.error({ - message: localization.errorGettingAllowedContentTypes, - data: { - details: { error }, - }, - }) - }) - : props.path !== '' - ? repo - .getAllowedChildTypes({ idOrPath: props.path }) - .then(types => setAllowedChildTypes(types.d.results.map(t => repo.schemas.getSchemaByName(t.Name)))) - .catch(error => { - logger.error({ - message: localization.errorGettingAllowedContentTypes, - data: { - details: { error }, - }, - }) - }) - : setAllowedChildTypes([]) + const getAllowedChildTypes = async () => { + try { + const allowedChildTypesFromRepo = await repo.getAllowedChildTypes({ + idOrPath: props.parent ? parent.Id : props.path, + }) + const allowedChildTypeList = allowedChildTypesFromRepo.d.results.map(t => repo.schemas.getSchemaByName(t.Name)) + setAllowedChildTypes(allowedChildTypeList) + } catch (error) { + logger.error({ + message: localization.errorGettingAllowedContentTypes, + data: { + details: { error }, + }, + }) } } - }, [ - localization.errorGettingAllowedContentTypes, - logger, - parent.Id, - props.allowedTypes, - props.parent, - props.path, - repo, - showSelectType, - ]) + + if (showSelectType) { + props.parent || props.path !== '' ? getAllowedChildTypes() : setAllowedChildTypes([]) + } + }, [localization.errorGettingAllowedContentTypes, logger, parent.Id, props.parent, props.path, repo, showSelectType]) return (
{!props.isOpened ? ( - setShowSelectType(true)} - disabled={!isAvailable}> + setShowSelectType(true)} disabled={!isAvailable}> - + ) : ( -
- setShowSelectType(true)} - disabled={!isAvailable}> + }} + button={true} + onClick={() => setShowSelectType(true)} + disabled={!isAvailable}> + - - Add new -
+ + + )} (null) const [_rightPanelRef, setRightPanelRef] = useState(null) @@ -44,11 +43,6 @@ export const CommanderComponent: React.FunctionComponent([]) - useEffect(() => { - queryDataService.queryData.setValue(undefined) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) - useEffect(() => { activePanel === 'left' ? setActiveParent(leftParent) : setActiveParent(rightParent) }, [leftParent, rightParent, activePanel]) diff --git a/apps/sensenet/src/components/content/Explore.tsx b/apps/sensenet/src/components/content/Explore.tsx index 5c946baf5..84e8bd1c5 100644 --- a/apps/sensenet/src/components/content/Explore.tsx +++ b/apps/sensenet/src/components/content/Explore.tsx @@ -1,5 +1,5 @@ import { ConstantContent } from '@sensenet/client-core' -import React, { useEffect } from 'react' +import React from 'react' import { GenericContent } from '@sensenet/default-content-types' import { CurrentAncestorsProvider, @@ -7,7 +7,7 @@ import { CurrentContentProvider, LoadSettingsContextProvider, } from '@sensenet/hooks-react' -import { useQueryDataService, useSelectionService } from '../../hooks' +import { useSelectionService } from '../../hooks' import { ContentBreadcrumbs } from '../ContentBreadcrumbs' import { CollectionComponent } from '../content-list' import { Tree } from '../tree/index' @@ -22,12 +22,6 @@ export interface ExploreComponentProps { export const Explore: React.FunctionComponent = props => { const selectionService = useSelectionService() - const queryDataService = useQueryDataService() - - useEffect(() => { - queryDataService.queryData.setValue(undefined) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) return (
diff --git a/apps/sensenet/src/components/content/Simple.tsx b/apps/sensenet/src/components/content/Simple.tsx index 6d8211317..08231cfac 100644 --- a/apps/sensenet/src/components/content/Simple.tsx +++ b/apps/sensenet/src/components/content/Simple.tsx @@ -1,11 +1,11 @@ -import React, { useEffect } from 'react' +import React from 'react' import { CurrentAncestorsProvider, CurrentChildrenProvider, CurrentContentProvider, LoadSettingsContextProvider, } from '@sensenet/hooks-react' -import { useQueryDataService, useSelectionService } from '../../hooks' +import { useSelectionService } from '../../hooks' import { CollectionComponent, CollectionComponentProps } from '../content-list' export interface SimpleListComponentProps { @@ -16,12 +16,6 @@ export interface SimpleListComponentProps { export const SimpleList: React.FunctionComponent = props => { const selectionService = useSelectionService() - const queryDataService = useQueryDataService() - - useEffect(() => { - queryDataService.queryData.setValue(undefined) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) return (
diff --git a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx index 243c97bc1..8290576ea 100644 --- a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx +++ b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx @@ -15,14 +15,7 @@ import { withRouter } from 'react-router' import { matchPath, NavLink, RouteComponentProps } from 'react-router-dom' import { useRepository, useSession } from '@sensenet/hooks-react' import { ResponsiveContext, ResponsivePersonalSetttings } from '../../context' -import { - useDrawerItems, - useLocalization, - usePersonalSettings, - useQueryDataService, - useSelectionService, - useTheme, -} from '../../hooks' +import { useDrawerItems, useLocalization, usePersonalSettings, useSelectionService, useTheme } from '../../hooks' import { LogoutButton } from '../LogoutButton' import { UserAvatar } from '../UserAvatar' import { AddButton } from '../AddButton' @@ -30,14 +23,12 @@ import { AddButton } from '../AddButton' const PermanentDrawer: React.FunctionComponent = props => { const settings = useContext(ResponsivePersonalSetttings) const selectionService = useSelectionService() - const queryDataService = useQueryDataService() const personalSettings = usePersonalSettings() const theme = useTheme() const session = useSession() const repo = useRepository() const device = useContext(ResponsiveContext) const [currentComponent, setCurrentComponent] = useState(selectionService.activeContent.getValue()) - const [queryData, setQueryData] = useState(queryDataService.queryData.getValue()) const [currentPath, setCurrentPath] = useState('') const [opened, setOpened] = useState(settings.drawer.type === 'permanent') const items = useDrawerItems() @@ -52,11 +43,8 @@ const PermanentDrawer: React.FunctionComponent = props => { setCurrentComponent(newActiveComponent), ) - const queryDataObserve = queryDataService.queryData.subscribe(newQueryData => setQueryData(newQueryData)) - return function cleanup() { activeComponentObserve.dispose() - queryDataObserve.dispose() } // eslint-disable-next-line react-hooks/exhaustive-deps }, []) @@ -87,12 +75,7 @@ const PermanentDrawer: React.FunctionComponent = props => { transition: 'width 100ms ease-in-out', }}>
- + {items.map((item, index) => { return ( (decodeQueryData(props.match.params.queryData)) const selectionService = useSelectionService() - const queryDataService = useQueryDataService() const localization = useLocalization().search const [scrollToken, setScrollToken] = useState(Math.random()) const [scrollLock] = useState(new Semaphore(1)) @@ -56,11 +55,6 @@ const Search: React.FunctionComponent { - queryDataService.queryData.setValue(queryData) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [queryData]) - useEffect(() => { try { const data = decodeQueryData(props.match.params.queryData || '{}') diff --git a/apps/sensenet/src/hooks/index.ts b/apps/sensenet/src/hooks/index.ts index e02ac3bbe..43540eac8 100644 --- a/apps/sensenet/src/hooks/index.ts +++ b/apps/sensenet/src/hooks/index.ts @@ -6,7 +6,6 @@ export * from './use-loadContent' export * from './use-localization' export * from './use-personal-settings' export * from './use-selection-service' -export * from './use-query-data-service' export * from './use-string-replace' export * from './use-theme' export * from './use-widgets' diff --git a/apps/sensenet/src/hooks/use-drawer-items.tsx b/apps/sensenet/src/hooks/use-drawer-items.tsx index 56183855d..927f05298 100644 --- a/apps/sensenet/src/hooks/use-drawer-items.tsx +++ b/apps/sensenet/src/hooks/use-drawer-items.tsx @@ -73,7 +73,7 @@ export const useDrawerItems = () => { case 'Trash': return '/Root/Trash' case 'Content Types': - return '/Root/System/Schema/ContentTypes/GenericContent/ListItem' + return '/Root/System/Schema/ContentTypes' case 'Localization': return '/Root/Localization' case 'Setup': diff --git a/apps/sensenet/src/hooks/use-query-data-service.ts b/apps/sensenet/src/hooks/use-query-data-service.ts deleted file mode 100644 index ccf081937..000000000 --- a/apps/sensenet/src/hooks/use-query-data-service.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { useState } from 'react' -import { useInjector } from '@sensenet/hooks-react' -import { QueryDataService } from '../services/QueryDataService' - -export const useQueryDataService = () => { - const injector = useInjector() - const [queryDataService] = useState(injector.getInstance(QueryDataService)) - return queryDataService -} diff --git a/apps/sensenet/src/localization/default.ts b/apps/sensenet/src/localization/default.ts index 0191447cf..caacd3fbd 100644 --- a/apps/sensenet/src/localization/default.ts +++ b/apps/sensenet/src/localization/default.ts @@ -12,6 +12,7 @@ const values = { addButton: { tooltip: 'Create or upload content', new: 'New...', + addNew: 'Add new', dialogTitle: 'Create new {0}', upload: 'Upload', errorGettingAllowedContentTypes: 'There was an error while fetching the allowed content types.', diff --git a/apps/sensenet/src/localization/hungarian.ts b/apps/sensenet/src/localization/hungarian.ts index 456630a74..2efb59ede 100644 --- a/apps/sensenet/src/localization/hungarian.ts +++ b/apps/sensenet/src/localization/hungarian.ts @@ -3,6 +3,7 @@ import { DeepPartial } from '@sensenet/client-utils' const values: DeepPartial = { addButton: { new: 'Új...', + addNew: 'Új hozzáadása', tooltip: 'Tartalom létrehozása vagy feltöltése', upload: 'Feltöltés', dialogTitle: 'Új {0} létrehozása', diff --git a/apps/sensenet/src/services/QueryDataService.ts b/apps/sensenet/src/services/QueryDataService.ts deleted file mode 100644 index e6f174c19..000000000 --- a/apps/sensenet/src/services/QueryDataService.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Disposable, Injectable, ObservableValue } from '@sensenet/client-utils' -import { QueryData } from '../components/search' - -/** - * A context service to get/set the query data - */ -@Injectable({ lifetime: 'singleton' }) -export class QueryDataService implements Disposable { - public queryData = new ObservableValue(undefined) - - public async dispose() { - this.queryData.dispose() - } -} diff --git a/apps/sensenet/src/services/index.ts b/apps/sensenet/src/services/index.ts index ddf4871c7..6108bb185 100644 --- a/apps/sensenet/src/services/index.ts +++ b/apps/sensenet/src/services/index.ts @@ -8,6 +8,5 @@ export * from './LocalizationService' export * from './PersonalSettings' export * from './RepositoryManager' export * from './SelectionService' -export * from './QueryDataService' export * from './UploadTracker' export * from './request-counter-service' From ac9354371979a22c8be1dafcbcc0f1041eb455ef Mon Sep 17 00:00:00 2001 From: "eniko.pusztai" Date: Mon, 6 Jan 2020 13:27:40 +0100 Subject: [PATCH 06/11] Update apps/sensenet/src/components/drawer/PermanentDrawer.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Zoltán Bedi --- apps/sensenet/src/components/drawer/PermanentDrawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx index 8290576ea..4eb495bc7 100644 --- a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx +++ b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx @@ -155,7 +155,7 @@ const PermanentDrawer: React.FunctionComponent = props => { to={'/personalSettings'} activeStyle={{ opacity: 1 }} style={{ textDecoration: 'none', opacity: 0.54 }} - key={'personalSettings'} + key="personalSettings" isActive={match => { if (!match) { return false From b09bf7fed8cf29f9d6e35c21b7275e6b2d4d5d68 Mon Sep 17 00:00:00 2001 From: "eniko.pusztai" Date: Mon, 6 Jan 2020 13:27:49 +0100 Subject: [PATCH 07/11] Update apps/sensenet/src/components/drawer/PermanentDrawer.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Zoltán Bedi --- apps/sensenet/src/components/drawer/PermanentDrawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx index 4eb495bc7..79996dc52 100644 --- a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx +++ b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx @@ -152,7 +152,7 @@ const PermanentDrawer: React.FunctionComponent = props => { ) : ( <> Date: Mon, 6 Jan 2020 13:28:00 +0100 Subject: [PATCH 08/11] Update apps/sensenet/src/components/drawer/PermanentDrawer.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Zoltán Bedi --- apps/sensenet/src/components/drawer/PermanentDrawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx index 79996dc52..f11961f94 100644 --- a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx +++ b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx @@ -131,7 +131,7 @@ const PermanentDrawer: React.FunctionComponent = props => { {device === 'mobile' ? null : ( { if (!match) { From 864a7a318197dd547e8a6c88e2ae8cf9d49d49b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enik=C5=91=20Pusztai?= Date: Mon, 6 Jan 2020 14:16:11 +0100 Subject: [PATCH 09/11] small fixes for addbutton --- apps/sensenet/src/components/AddButton.tsx | 7 ++----- .../src/components/drawer/PermanentDrawer.tsx | 7 +++---- apps/sensenet/src/hooks/use-drawer-items.tsx | 21 +------------------ 3 files changed, 6 insertions(+), 29 deletions(-) diff --git a/apps/sensenet/src/components/AddButton.tsx b/apps/sensenet/src/components/AddButton.tsx index 9e401cd2a..7136b464a 100644 --- a/apps/sensenet/src/components/AddButton.tsx +++ b/apps/sensenet/src/components/AddButton.tsx @@ -21,9 +21,6 @@ import { Icon } from './Icon' import { useDialog } from './dialogs' const useStyles = makeStyles((theme: Theme) => { - const buttonBackground = theme.palette.primary.main - const buttonBackgroundHover = theme.palette.primary.dark - return createStyles({ addButton: { width: '32px', @@ -31,9 +28,9 @@ const useStyles = makeStyles((theme: Theme) => { minHeight: 0, padding: 0, margin: '0.5rem 0.5rem', - backgroundColor: buttonBackground, + backgroundColor: theme.palette.primary.main, '&:hover': { - backgroundColor: buttonBackgroundHover, + backgroundColor: theme.palette.primary.dark, }, }, }) diff --git a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx index f11961f94..532f9e1fc 100644 --- a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx +++ b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx @@ -46,8 +46,7 @@ const PermanentDrawer: React.FunctionComponent = props => { return function cleanup() { activeComponentObserve.dispose() } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) + }, [selectionService.activeContent]) useEffect(() => { setCurrentRepoEntry( @@ -87,9 +86,9 @@ const PermanentDrawer: React.FunctionComponent = props => { if (!match) { return false } - setCurrentPath(item.root ? item.root : '') return true - }}> + }} + onClick={() => setCurrentPath(item.root ? item.root : '')}> { const getRootFromSetting = useCallback( (item: ContentDrawerItem | QueryDrawerItem | BuiltinDrawerItem | DashboardDrawerItem) => { - switch (item.itemType) { - case 'Search': - return undefined - case 'Content': - return '/Root/Content' - case 'Users and groups': - return '/Root/IMS/Public' - case 'Trash': - return '/Root/Trash' - case 'Content Types': - return '/Root/System/Schema/ContentTypes' - case 'Localization': - return '/Root/Localization' - case 'Setup': - return '/Root/System/Settings' - case 'Dashboard': - return undefined - default: - return undefined - } + return item.permissions ? item.permissions[0].path : undefined }, [], ) From e56e5b2791d352771d93258ebbe85d98eef54d5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enik=C5=91=20Pusztai?= Date: Mon, 6 Jan 2020 16:52:58 +0100 Subject: [PATCH 10/11] small fix for root --- apps/sensenet/src/hooks/use-drawer-items.tsx | 17 ++--------------- apps/sensenet/src/services/PersonalSettings.ts | 14 +++++++++----- 2 files changed, 11 insertions(+), 20 deletions(-) diff --git a/apps/sensenet/src/hooks/use-drawer-items.tsx b/apps/sensenet/src/hooks/use-drawer-items.tsx index 320927fe6..6b1124416 100644 --- a/apps/sensenet/src/hooks/use-drawer-items.tsx +++ b/apps/sensenet/src/hooks/use-drawer-items.tsx @@ -61,13 +61,6 @@ export const useDrawerItems = () => { [localization], ) - const getRootFromSetting = useCallback( - (item: ContentDrawerItem | QueryDrawerItem | BuiltinDrawerItem | DashboardDrawerItem) => { - return item.permissions ? item.permissions[0].path : undefined - }, - [], - ) - const getIconFromSetting = useCallback( (item: ContentDrawerItem | QueryDrawerItem | BuiltinDrawerItem | DashboardDrawerItem) => { switch (item.itemType) { @@ -165,17 +158,11 @@ export const useDrawerItems = () => { name: setting.itemType, requiredGroupPath: '', url: getUrlFromSetting(setting), - root: getRootFromSetting(setting), + root: setting.settings?.root, } return drawerItem }, - [ - getIconFromSetting, - getItemDescriptionFromSettings, - getItemNameFromSettings, - getRootFromSetting, - getUrlFromSetting, - ], + [getIconFromSetting, getItemDescriptionFromSettings, getItemNameFromSettings, getUrlFromSetting], ) useEffect(() => { diff --git a/apps/sensenet/src/services/PersonalSettings.ts b/apps/sensenet/src/services/PersonalSettings.ts index 73f13daa0..0be6b361b 100644 --- a/apps/sensenet/src/services/PersonalSettings.ts +++ b/apps/sensenet/src/services/PersonalSettings.ts @@ -301,25 +301,29 @@ export const defaultSettings: PersonalSettingsType = { }, { itemType: 'Users and groups', - settings: undefined, + settings: { root: '/Root/IMS/Public' }, permissions: [{ path: '/Root/IMS/Public', action: 'Add' }], }, { itemType: 'Trash', - settings: undefined, + settings: { root: '/Root/Trash' }, permissions: [{ path: '/Root/Trash', action: 'Edit' }], }, { itemType: 'Content Types', - settings: undefined, + settings: { root: '/Root/System/Schema/ContentTypes' }, permissions: [{ path: '/Root/System/Schema/ContentTypes', action: 'Add' }], }, { itemType: 'Localization', - settings: undefined, + settings: { root: '/Root/Localization' }, permissions: [{ path: '/Root/Localization', action: 'Add' }], }, - { itemType: 'Setup', settings: undefined, permissions: [{ path: '/Root/System/Settings', action: 'Browse' }] }, + { + itemType: 'Setup', + settings: { root: '/Root/System/Settings' }, + permissions: [{ path: '/Root/System/Settings', action: 'Browse' }], + }, ], }, commandPalette: { enabled: true, wrapQuery: '{0} .AUTOFILTERS:OFF' }, From 3dd5e9bfec07ea6373e10db08b945a54d772f634 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enik=C5=91=20Pusztai?= Date: Tue, 7 Jan 2020 11:24:01 +0100 Subject: [PATCH 11/11] Navlink refact --- .../src/components/drawer/PermanentDrawer.tsx | 27 ++----------------- 1 file changed, 2 insertions(+), 25 deletions(-) diff --git a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx index 532f9e1fc..dd9d1d7c0 100644 --- a/apps/sensenet/src/components/drawer/PermanentDrawer.tsx +++ b/apps/sensenet/src/components/drawer/PermanentDrawer.tsx @@ -79,15 +79,8 @@ const PermanentDrawer: React.FunctionComponent = props => { return ( { - if (!match) { - return false - } - return true - }} onClick={() => setCurrentPath(item.root ? item.root : '')}> = props => { /> {device === 'mobile' ? null : ( - { - if (!match) { - return false - } - setCurrentPath('') - return true - }}> + @@ -152,16 +136,9 @@ const PermanentDrawer: React.FunctionComponent = props => { <> { - if (!match) { - return false - } - setCurrentPath('') - return true - }}> + onClick={() => setCurrentPath('')}>