From f268bcebf25755ad78e8f0445973c15e92284302 Mon Sep 17 00:00:00 2001 From: Ole Martin Pettersen Date: Fri, 3 Nov 2023 09:29:38 +0100 Subject: [PATCH 1/6] Refaktorering av Programadministrasjon --- .gitignore | 3 +- .../AddProjectDialog/AddProjectDialog.tsx | 12 +-- .../ProgramAdministration.tsx | 79 +++++++++++++------ .../ProgramAdministration/columns.tsx | 35 -------- .../ProgramAdministration/useColumns.tsx | 27 +++++++ .../useProgramAdministration.ts | 14 +--- .../ProgramWebParts/src/loc/mystrings.d.ts | 1 + 7 files changed, 90 insertions(+), 81 deletions(-) delete mode 100644 SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/columns.tsx create mode 100644 SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useColumns.tsx diff --git a/.gitignore b/.gitignore index ae76ddb08..fff1f7473 100644 --- a/.gitignore +++ b/.gitignore @@ -23,4 +23,5 @@ common/temp **/.rush/temp/ **/*.build.log **/package-lock.json -.vscode/launch.json* \ No newline at end of file +.vscode/launch.json* +SharePointFramework/ProgramWebParts/.vscode/chrome-debug-user-data diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/AddProjectDialog.tsx b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/AddProjectDialog.tsx index b66462478..d9727fa27 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/AddProjectDialog.tsx +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/AddProjectDialog.tsx @@ -4,23 +4,17 @@ import { DialogFooter, DialogType, PrimaryButton, - SelectionMode, - ShimmeredDetailsList, ScrollablePane } from '@fluentui/react' -import _ from 'lodash' import * as strings from 'ProgramWebPartsStrings' +import _ from 'lodash' import React, { FC, useContext } from 'react' -import { columns } from '../columns' import { ProgramAdministrationContext } from '../context' -import { ListHeaderSearch } from '../ListHeaderSearch/ListHeaderSearch' import { ADD_CHILD_PROJECTS, TOGGLE_ADD_PROJECT_DIALOG } from '../reducer' import styles from './AddProjectDialog.module.scss' -import { useAddProjectDialog } from './useAddProjectDialog' export const AddProjectDialog: FC = () => { const context = useContext(ProgramAdministrationContext) - const { selection, availableProjects, onSearch, onRenderRow } = useAddProjectDialog() return ( { >
- { }} /> )} - /> + /> */}
diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProgramAdministration.tsx b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProgramAdministration.tsx index ca5ad776e..8db45795d 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProgramAdministration.tsx +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProgramAdministration.tsx @@ -1,19 +1,24 @@ -import { SelectionMode, ShimmeredDetailsList } from '@fluentui/react' import { isEmpty } from '@microsoft/sp-lodash-subset' import * as strings from 'ProgramWebPartsStrings' import { UserMessage, WebPartTitle } from 'pp365-shared-library' import React, { FC } from 'react' import { AddProjectDialog } from './AddProjectDialog/AddProjectDialog' import { Commands } from './Commands/Commands' -import { ListHeaderSearch } from './ListHeaderSearch/ListHeaderSearch' import styles from './ProgramAdministration.module.scss' -import { columns } from './columns' import { ProgramAdministrationContext } from './context' import { IProgramAdministrationProps } from './types' import { useProgramAdministration } from './useProgramAdministration' +import { + DataGrid, + DataGridBody, + DataGridCell, + DataGridHeader, + DataGridHeaderCell, + DataGridRow +} from '@fluentui/react-components' export const ProgramAdministration: FC = (props) => { - const { state, dispatch, selection, onSearch, onRenderRow } = useProgramAdministration(props) + const { state, dispatch, columns } = useProgramAdministration(props) if (state.error) { return ( @@ -33,29 +38,51 @@ export const ProgramAdministration: FC = (props) =>
{!isEmpty(state.childProjects) || state.loading.root ? ( - ( - - )} - /> + columns={columns} + sortable + resizableColumns + containerWidthOffset={0} + > + + + {({ renderHeaderCell }) => ( + {renderHeaderCell()} + )} + + + >> + {({ item, rowId }) => ( + > key={rowId}> + {({ renderCell }) => {renderCell(item)}} + + )} + + + // ( + // + // )} + // /> ) : ( { - if (!item.SPWebURL) { - return ( -
- {item.Title} - -
- ) - } - if (renderAsLink) { - return ( - - {item.Title} - - ) - } else return item.Title - }, - minWidth: 100 - } - ] as IColumn[] -} diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useColumns.tsx b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useColumns.tsx new file mode 100644 index 000000000..868c37c82 --- /dev/null +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useColumns.tsx @@ -0,0 +1,27 @@ +import { Link } from '@fluentui/react' +import { TableCellLayout, TableColumnDefinition } from '@fluentui/react-components' +import strings from 'ProgramWebPartsStrings' +import React from 'react' + +export const useColumns = (): TableColumnDefinition>[] => { + return [ + { + columnId: 'title', + compare: (a, b) => { + return (a.Title ?? '').localeCompare(b.Title ?? '') + }, + renderHeaderCell: () => { + return strings.TitleLabel + }, + renderCell: (item) => { + return ( + + + {item.Title} + + + ) + } + } + ] +} \ No newline at end of file diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useProgramAdministration.ts b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useProgramAdministration.ts index f406f4078..563aa90c5 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useProgramAdministration.ts +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useProgramAdministration.ts @@ -4,14 +4,11 @@ import reducer, { DATA_LOADED, SET_SELECTED_TO_DELETE, initialState } from './re import { IProgramAdministrationProps } from './types' import { useRowRenderer } from './useRowRenderer' import { useSelectionList } from './useSelectionList' +import { useColumns } from './useColumns' export const useProgramAdministration = (props: IProgramAdministrationProps) => { const [state, dispatch] = useReducer(reducer, initialState) - const selectedKeys = state.selectedProjectsToDelete.map((p) => p.key) - - const { selection, onSearch, searchTerm } = useSelectionList(selectedKeys, (selected) => { - dispatch(SET_SELECTED_TO_DELETE({ selected })) - }) + // const selectedKeys = state.selectedProjectsToDelete.map((p) => p.key) useEffect(() => { props.dataAdapter.project.getProjectInformationData().then((properties) => { @@ -27,10 +24,7 @@ export const useProgramAdministration = (props: IProgramAdministrationProps) => }) }, []) - const onRenderRow = useRowRenderer({ - selectedKeys, - searchTerm - }) + const columns = useColumns() - return { state, dispatch, selection, onSearch, searchTerm, onRenderRow } as const + return { state, dispatch, columns } as const } diff --git a/SharePointFramework/ProgramWebParts/src/loc/mystrings.d.ts b/SharePointFramework/ProgramWebParts/src/loc/mystrings.d.ts index 6a5751a03..ad00edd4a 100644 --- a/SharePointFramework/ProgramWebParts/src/loc/mystrings.d.ts +++ b/SharePointFramework/ProgramWebParts/src/loc/mystrings.d.ts @@ -1,4 +1,5 @@ declare interface IProgramWebPartsStrings { + TitleLabel: string Add: string AddProjectDialogSearchBoxPlaceholder: string BarLabel: string From 9b6ef3a619cc65065b528338b4c46e6b7f556a4a Mon Sep 17 00:00:00 2001 From: Ole Martin Pettersen Date: Fri, 3 Nov 2023 10:15:33 +0100 Subject: [PATCH 2/6] useAddProjectDialog --- .../AddProjectDialog/AddProjectDialog.tsx | 95 ++++++++----------- .../AddProjectDialog/useAddProjectDialog.ts | 18 +--- .../Commands/Commands.module.scss | 3 + .../Commands/Commands.tsx | 45 +++++---- .../ProgramAdministration.module.scss | 2 +- .../ProgramAdministration.tsx | 79 ++++----------- .../ProjectList/ProjectList.tsx | 43 +++++++++ .../ProjectList/index.ts | 2 + .../ProjectList/types.ts | 6 ++ .../{ => ProjectList}/useColumns.tsx | 0 .../ProgramAdministration/reducer.ts | 18 +++- .../useProgramAdministration.ts | 12 +-- .../ProgramAdministration/useRowRenderer.tsx | 17 ---- .../ProgramAdministration/useSelectionList.ts | 30 ------ .../ProgramWebParts/src/data/SPDataAdapter.ts | 2 +- .../ProgramWebParts/src/loc/nb-no.js | 1 + .../src/webparts/baseProgramWebPart/index.ts | 4 +- 17 files changed, 157 insertions(+), 220 deletions(-) create mode 100644 SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/Commands/Commands.module.scss create mode 100644 SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/ProjectList.tsx create mode 100644 SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/index.ts create mode 100644 SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/types.ts rename SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/{ => ProjectList}/useColumns.tsx (100%) delete mode 100644 SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useRowRenderer.tsx delete mode 100644 SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useSelectionList.ts diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/AddProjectDialog.tsx b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/AddProjectDialog.tsx index d9727fa27..5a99dc35b 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/AddProjectDialog.tsx +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/AddProjectDialog.tsx @@ -1,70 +1,53 @@ -import { - DefaultButton, - Dialog, - DialogFooter, - DialogType, - PrimaryButton, - ScrollablePane -} from '@fluentui/react' + import * as strings from 'ProgramWebPartsStrings' import _ from 'lodash' -import React, { FC, useContext } from 'react' +import React, { FC, ReactElement, useContext } from 'react' +import { ProjectList } from '../ProjectList' import { ProgramAdministrationContext } from '../context' -import { ADD_CHILD_PROJECTS, TOGGLE_ADD_PROJECT_DIALOG } from '../reducer' +import { ADD_CHILD_PROJECTS, SET_SELECTED_TO_ADD, TOGGLE_ADD_PROJECT_DIALOG } from '../reducer' import styles from './AddProjectDialog.module.scss' +import { Button, Dialog, DialogActions, DialogContent, DialogSurface, DialogTitle, DialogTrigger } from '@fluentui/react-components' +import { useAddProjectDialog } from './useAddProjectDialog' export const AddProjectDialog: FC = () => { const context = useContext(ProgramAdministrationContext) + const { availableProjects } = useAddProjectDialog() return ( ) } diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/useAddProjectDialog.ts b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/useAddProjectDialog.ts index 754415f23..b06fde94f 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/useAddProjectDialog.ts +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/useAddProjectDialog.ts @@ -1,16 +1,9 @@ import { useContext, useEffect } from 'react' import { ProgramAdministrationContext } from '../context' -import { DATA_LOADED, SET_SELECTED_TO_ADD } from '../reducer' -import { useRowRenderer } from '../useRowRenderer' -import { useSelectionList } from '../useSelectionList' +import { DATA_LOADED } from '../reducer' export const useAddProjectDialog = () => { const context = useContext(ProgramAdministrationContext) - const selectedKeys = context.state.selectedProjectsToAdd.map((p) => p.key) - - const selectionList = useSelectionList(selectedKeys, (selected) => { - context.dispatch(SET_SELECTED_TO_ADD({ selected })) - }) useEffect(() => { context.props.dataAdapter @@ -31,14 +24,7 @@ export const useAddProjectDialog = () => { project.SiteId !== context.props.context.pageContext.site.id.toString() ) - const onRenderRow = useRowRenderer({ - selectedKeys, - searchTerm: selectionList.searchTerm - }) - return { - ...selectionList, - availableProjects, - onRenderRow + availableProjects } } diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/Commands/Commands.module.scss b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/Commands/Commands.module.scss new file mode 100644 index 000000000..197b2acfa --- /dev/null +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/Commands/Commands.module.scss @@ -0,0 +1,3 @@ +.commands { + margin: 20px; +} \ No newline at end of file diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/Commands/Commands.tsx b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/Commands/Commands.tsx index f2465f096..cfe8bb22c 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/Commands/Commands.tsx +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/Commands/Commands.tsx @@ -1,37 +1,36 @@ -import { CommandBar, ICommandBarItemProps } from '@fluentui/react' -import { isEmpty } from '@microsoft/sp-lodash-subset' import * as strings from 'ProgramWebPartsStrings' +import _ from 'lodash' +import { ListMenuItem, Toolbar } from 'pp365-shared-library' import React, { FC, useContext } from 'react' import { ProgramAdministrationContext } from '../context' import { CHILD_PROJECTS_REMOVED, TOGGLE_ADD_PROJECT_DIALOG } from '../reducer' +import styles from './Commands.module.scss' export const Commands: FC = () => { const context = useContext(ProgramAdministrationContext) - const items: ICommandBarItemProps[] = [ - { - key: 'ProgramAddChilds', - text: strings.ProgramAdministrationAddChildsButtonText, - iconProps: { iconName: 'Add' }, - buttonStyles: { root: { border: 'none' } }, - onClick: () => context.dispatch(TOGGLE_ADD_PROJECT_DIALOG()), - disabled: !context.state.userHasManagePermission - }, - { - key: 'ProgramRemoveChilds', - text: strings.ProgramRemoveChildsButtonText, - iconProps: { iconName: 'Delete' }, - buttonStyles: { root: { border: 'none' } }, - disabled: - isEmpty(context.state.selectedProjectsToDelete) || !context.state.userHasManagePermission, - onClick: () => { + + const items = [ + new ListMenuItem(strings.ProgramAdministrationAddChildsButtonText) + .setDisabled(!context.state.userHasManagePermission) + .setIcon('Add') + .setOnClick(() => context.dispatch(TOGGLE_ADD_PROJECT_DIALOG())), + new ListMenuItem(strings.ProgramRemoveChildsButtonText) + .setIcon('Delete') + .setDisabled( + _.isEmpty(context.state.selectedProjectsToDelete) || !context.state.userHasManagePermission + ) + .setOnClick(() => { context.props.dataAdapter - .removeChildProjects(context.state.selectedProjectsToDelete) + .removeChildProjects( context.state.selectedProjectsToDelete) .then((childProjects) => { context.dispatch(CHILD_PROJECTS_REMOVED({ childProjects })) }) - } - } + }) ] - return + return ( +
+ +
+ ) } diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProgramAdministration.module.scss b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProgramAdministration.module.scss index b01745862..7b2379574 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProgramAdministration.module.scss +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProgramAdministration.module.scss @@ -1,6 +1,6 @@ @import '~@fluentui/react/dist/sass/References.scss'; -.root { +.programAdministration { height: 100vh; margin: 20px; diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProgramAdministration.tsx b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProgramAdministration.tsx index 8db45795d..3b5c8647d 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProgramAdministration.tsx +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProgramAdministration.tsx @@ -5,92 +5,47 @@ import React, { FC } from 'react' import { AddProjectDialog } from './AddProjectDialog/AddProjectDialog' import { Commands } from './Commands/Commands' import styles from './ProgramAdministration.module.scss' +import { ProjectList } from './ProjectList' import { ProgramAdministrationContext } from './context' +import { SET_SELECTED_TO_DELETE } from './reducer' import { IProgramAdministrationProps } from './types' import { useProgramAdministration } from './useProgramAdministration' -import { - DataGrid, - DataGridBody, - DataGridCell, - DataGridHeader, - DataGridHeaderCell, - DataGridRow -} from '@fluentui/react-components' export const ProgramAdministration: FC = (props) => { - const { state, dispatch, columns } = useProgramAdministration(props) + const { context } = useProgramAdministration(props) - if (state.error) { + if (context.state.error) { return ( <> -
+

{strings.ProgramAdministrationHeader}

- +
) } return ( - + -
+
- {!isEmpty(state.childProjects) || state.loading.root ? ( - - - - {({ renderHeaderCell }) => ( - {renderHeaderCell()} - )} - - - >> - {({ item, rowId }) => ( - > key={rowId}> - {({ renderCell }) => {renderCell(item)}} - - )} - - - // ( - // - // )} - // /> + {!isEmpty(context.state.childProjects) || context.state.loading.root ? ( + { + context.dispatch(SET_SELECTED_TO_DELETE(data.selectedItems)) + }} + /> ) : ( )}
- {state.displayAddProjectDialog && } + {context.state.displayAddProjectDialog && }
) diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/ProjectList.tsx b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/ProjectList.tsx new file mode 100644 index 000000000..2f62cae54 --- /dev/null +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/ProjectList.tsx @@ -0,0 +1,43 @@ +import { + DataGrid, + DataGridBody, + DataGridCell, + DataGridHeader, + DataGridHeaderCell, + DataGridRow +} from '@fluentui/react-components' +import React, { FC, useContext } from 'react' +import { ProgramAdministrationContext } from '../context' +import { useColumns } from './useColumns' +import { IProjectListProps } from './types' + +export const ProjectList: FC = (props) => { + const context = useContext(ProgramAdministrationContext) + const columns = useColumns() + return ( + + + + {({ renderHeaderCell }) => ( + {renderHeaderCell()} + )} + + + >> + {({ item, rowId }) => ( + > key={rowId}> + {({ renderCell }) => {renderCell(item)}} + + )} + + + ) +} diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/index.ts b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/index.ts new file mode 100644 index 000000000..006cad4f3 --- /dev/null +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/index.ts @@ -0,0 +1,2 @@ +export * from './ProjectList' +export * from './types' \ No newline at end of file diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/types.ts b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/types.ts new file mode 100644 index 000000000..e3623e413 --- /dev/null +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/types.ts @@ -0,0 +1,6 @@ +import { DataGridProps } from '@fluentui/react-components' + +export interface IProjectListProps { + items: Record[]; + onSelectionChange: DataGridProps['onSelectionChange'] +} \ No newline at end of file diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useColumns.tsx b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/useColumns.tsx similarity index 100% rename from SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useColumns.tsx rename to SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/useColumns.tsx diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/reducer.ts b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/reducer.ts index a8c4fd873..6f28986d2 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/reducer.ts +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/reducer.ts @@ -1,5 +1,6 @@ -import { createAction, createReducer } from '@reduxjs/toolkit' +import { createAction, createReducer, current } from '@reduxjs/toolkit' import { IProgramAdministrationState } from './types' +import { TableRowId } from '@fluentui/react-components' export const DATA_LOADED = createAction<{ data: Partial @@ -10,13 +11,16 @@ export const ADD_CHILD_PROJECTS = createAction('ADD_CHILD_PROJECTS') export const CHILD_PROJECTS_REMOVED = createAction<{ childProjects: Record[] }>( 'CHILD_PROJECTS_REMOVED' ) -export const SET_SELECTED_TO_ADD = createAction<{ selected: Record[] }>( +export const SET_SELECTED_TO_ADD = createAction>( 'SET_SELECTED_TO_ADD' ) -export const SET_SELECTED_TO_DELETE = createAction<{ selected: Record[] }>( +export const SET_SELECTED_TO_DELETE = createAction>( 'SET_SELECTED_TO_DELETE' ) +/** + * Initial state for the `ProgramAdministration` reducer. + */ export const initialState: IProgramAdministrationState = { loading: { root: true, @@ -80,12 +84,16 @@ export default createReducer(initialState, { state: IProgramAdministrationState, { payload }: ReturnType ) => { - state.selectedProjectsToAdd = payload.selected + state.selectedProjectsToAdd = current(state).availableProjects.filter((_, index) => + payload.has(index) + ) }, [SET_SELECTED_TO_DELETE.type]: ( state: IProgramAdministrationState, { payload }: ReturnType ) => { - state.selectedProjectsToDelete = payload.selected + state.selectedProjectsToDelete = current(state).childProjects.filter((_, index) => + payload.has(index) + ) } }) diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useProgramAdministration.ts b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useProgramAdministration.ts index 563aa90c5..470f6bbf4 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useProgramAdministration.ts +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useProgramAdministration.ts @@ -1,14 +1,10 @@ import { ProjectAdminPermission } from 'pp365-shared-library/lib' -import { useEffect, useReducer } from 'react' -import reducer, { DATA_LOADED, SET_SELECTED_TO_DELETE, initialState } from './reducer' +import { useEffect, useMemo, useReducer } from 'react' +import reducer, { DATA_LOADED, initialState } from './reducer' import { IProgramAdministrationProps } from './types' -import { useRowRenderer } from './useRowRenderer' -import { useSelectionList } from './useSelectionList' -import { useColumns } from './useColumns' export const useProgramAdministration = (props: IProgramAdministrationProps) => { const [state, dispatch] = useReducer(reducer, initialState) - // const selectedKeys = state.selectedProjectsToDelete.map((p) => p.key) useEffect(() => { props.dataAdapter.project.getProjectInformationData().then((properties) => { @@ -24,7 +20,7 @@ export const useProgramAdministration = (props: IProgramAdministrationProps) => }) }, []) - const columns = useColumns() + const context = useMemo(() => ({ props, state, dispatch }), [props, state]) - return { state, dispatch, columns } as const + return { context } } diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useRowRenderer.tsx b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useRowRenderer.tsx deleted file mode 100644 index 20b96a54b..000000000 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useRowRenderer.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { IDetailsRowProps } from '@fluentui/react' - -/** - * Row renderer hook for `ProgramAdministration`. Returns an instance of - * `onRenderRow`. - */ -export function useRowRenderer({ selectedKeys, searchTerm }) { - return ( - detailsRowProps: IDetailsRowProps, - defaultRender: (props?: IDetailsRowProps) => JSX.Element - ) => { - const shouldRenderRow = - detailsRowProps.item.Title.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1 || - selectedKeys.includes(detailsRowProps.item.key) - return shouldRenderRow ? defaultRender(detailsRowProps) : null - } -} diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useSelectionList.ts b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useSelectionList.ts deleted file mode 100644 index 013ff083c..000000000 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useSelectionList.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { IObjectWithKey, Selection } from '@fluentui/react' -import { useEffect, useState } from 'react' - -/** - * Component logic hook for selection list - * - * @param selectedKeys Selected keys - * @param onSelectionChanged On selection changed - */ -export function useSelectionList( - selectedKeys: (string | number)[], - onSelectionChanged: (items: any[]) => void -) { - const $selection = new Selection({ - onSelectionChanged: () => { - onSelectionChanged(selection.getSelection()) - } - }) - const [selection, setSelection] = useState>($selection) - const [searchTerm, setSearchTerm] = useState('') - - useEffect(() => { - $selection.setChangeEvents(false) - selectedKeys.forEach((key) => $selection.setKeySelected(key as any, true, true)) - $selection.setChangeEvents(true) - setSelection($selection) - }, [searchTerm]) - - return { selection, onSearch: setSearchTerm, searchTerm } as const -} diff --git a/SharePointFramework/ProgramWebParts/src/data/SPDataAdapter.ts b/SharePointFramework/ProgramWebParts/src/data/SPDataAdapter.ts index 7099597b4..350bc7755 100644 --- a/SharePointFramework/ProgramWebParts/src/data/SPDataAdapter.ts +++ b/SharePointFramework/ProgramWebParts/src/data/SPDataAdapter.ts @@ -916,7 +916,7 @@ export class SPDataAdapter public async removeChildProjects( projectToRemove: Array> ): Promise>> { - const [{ GtChildProjects }] = await this._propertyItem.select('GtChildProjects')() + const { GtChildProjects } = await this._propertyItem.select('GtChildProjects')() const projects: Array> = JSON.parse(GtChildProjects) const updatedProjects = projects.filter( (p) => !projectToRemove.some((el) => el.SiteId === p.SiteId) diff --git a/SharePointFramework/ProgramWebParts/src/loc/nb-no.js b/SharePointFramework/ProgramWebParts/src/loc/nb-no.js index 40643e5e1..0554c1dc0 100644 --- a/SharePointFramework/ProgramWebParts/src/loc/nb-no.js +++ b/SharePointFramework/ProgramWebParts/src/loc/nb-no.js @@ -1,5 +1,6 @@ define([], function () { return { + TitleLabel: 'Tittel', Add: 'Legg til', AddProjectDialogSearchBoxPlaceholder: 'Søk i prosjekter...', BarLabel: 'Bar', diff --git a/SharePointFramework/ProgramWebParts/src/webparts/baseProgramWebPart/index.ts b/SharePointFramework/ProgramWebParts/src/webparts/baseProgramWebPart/index.ts index bde9a2414..46eb0fa26 100644 --- a/SharePointFramework/ProgramWebParts/src/webparts/baseProgramWebPart/index.ts +++ b/SharePointFramework/ProgramWebParts/src/webparts/baseProgramWebPart/index.ts @@ -8,6 +8,7 @@ import { ComponentClass, FC, ReactElement, createElement } from 'react' import { render } from 'react-dom' import { SPDataAdapter } from 'data/SPDataAdapter' import { IBaseProgramWebPartProps } from './types' +import { FluentProvider, webLightTheme } from '@fluentui/react-components' export abstract class BaseProgramWebPart< T extends IBaseProgramWebPartProps @@ -57,7 +58,8 @@ export abstract class BaseProgramWebPart< } } const element: ReactElement = createElement(component, combinedProps) - render(element, this.domElement) + const fluentProvider = createElement(FluentProvider, { theme: webLightTheme }, element) + render(fluentProvider, this.domElement) } public async onInit(): Promise { From 3c4f1e51f597e4a2c6d1dce93171d6662fb71dec Mon Sep 17 00:00:00 2001 From: Ole Martin Pettersen Date: Fri, 3 Nov 2023 10:16:19 +0100 Subject: [PATCH 3/6] revertion --- .../src/components/IdeaApprovalDialog/index.tsx | 2 +- .../PortfolioExtensions/src/components/IdeaDialog/index.tsx | 2 +- .../src/components/LatestProjects/index.tsx | 2 +- .../src/components/List/ItemColumn/DialogColumn/index.tsx | 2 +- .../src/components/List/ListHeader/ListHeader.tsx | 2 +- .../src/components/PortfolioInsights/Chart/index.tsx | 2 +- .../src/components/PortfolioInsights/index.tsx | 4 ++-- .../components/PortfolioOverview/ColumnFormPanel/index.tsx | 2 +- .../components/PortfolioOverview/ViewFormPanel/index.tsx | 2 +- .../PortfolioWebParts/src/components/ProjectList/index.tsx | 6 +++--- .../src/components/ResourceAllocation/index.tsx | 2 +- .../DocumentTemplateDialog/EditCopyScreen/index.tsx | 2 +- .../DocumentTemplateDialog/SelectScreen/index.tsx | 2 +- .../DocumentTemplateDialog/TargetFolderScreen/index.tsx | 2 +- .../src/components/DocumentTemplateDialog/index.tsx | 2 +- .../ProjectExtensions/src/components/ErrorDialog/index.tsx | 2 +- .../ProjectSetupDialog/TemplateConfigMessage/index.tsx | 2 +- .../TemplateConfigMessage/useTemplateConfigMessage.tsx | 2 +- .../src/components/ProjectSetupDialog/index.tsx | 4 ++-- .../components/ProjectInformation/ProjectInformation.tsx | 2 +- .../ProjectInformation/ProjectProperties/index.tsx | 6 +++--- .../DynamicHomepageContent/DynamicHomepageContent.tsx | 2 +- .../components/ProjectStatus/Commands/usePublishReport.ts | 2 +- .../ProjectStatus/Sections/ListSection/ListSection.tsx | 2 +- .../src/components/ProjectStatus/Sections/Sections.tsx | 2 +- .../Sections/UncertaintySection/UncertaintySection.tsx | 2 +- .../ProjectWebParts/src/components/ProjectStatus/reducer.ts | 4 ++-- .../ProjectWebParts/src/components/ProjectStatus/types.ts | 2 +- .../src/components/ProjectTimeline/ProjectTimeline.tsx | 2 +- .../ProjectWebParts/src/components/RiskMatrix/index.tsx | 2 +- .../CustomEditPanelFooter/CustomEditPanelFooter.tsx | 2 +- .../shared-library/src/components/ProjectTimeline/index.tsx | 2 +- .../shared-library/src/components/UserMessage/index.tsx | 4 ++-- .../shared-library/src/components/UserMessage/types.ts | 4 ++-- 34 files changed, 43 insertions(+), 43 deletions(-) diff --git a/SharePointFramework/PortfolioExtensions/src/components/IdeaApprovalDialog/index.tsx b/SharePointFramework/PortfolioExtensions/src/components/IdeaApprovalDialog/index.tsx index 92328c48e..060f19450 100644 --- a/SharePointFramework/PortfolioExtensions/src/components/IdeaApprovalDialog/index.tsx +++ b/SharePointFramework/PortfolioExtensions/src/components/IdeaApprovalDialog/index.tsx @@ -35,7 +35,7 @@ export const IdeaApprovalDialog: FC = (props) => { diff --git a/SharePointFramework/PortfolioExtensions/src/components/IdeaDialog/index.tsx b/SharePointFramework/PortfolioExtensions/src/components/IdeaDialog/index.tsx index 02986b416..a89167aa2 100644 --- a/SharePointFramework/PortfolioExtensions/src/components/IdeaDialog/index.tsx +++ b/SharePointFramework/PortfolioExtensions/src/components/IdeaDialog/index.tsx @@ -32,7 +32,7 @@ export const IdeaDialog: FC = (props) => { ? strings.IdeaProjectDataDialogBlockedTitle : strings.IdeaProjectDataDialogInfoTitle } - message={format( + text={format( props.isBlocked ? strings.IdeaProjectDataDialogBlockedMessage : props.dialogMessage, encodeURIComponent(window.location.href) )} diff --git a/SharePointFramework/PortfolioWebParts/src/components/LatestProjects/index.tsx b/SharePointFramework/PortfolioWebParts/src/components/LatestProjects/index.tsx index 9e66eda05..c2a9fb96f 100644 --- a/SharePointFramework/PortfolioWebParts/src/components/LatestProjects/index.tsx +++ b/SharePointFramework/PortfolioWebParts/src/components/LatestProjects/index.tsx @@ -30,7 +30,7 @@ export const LatestProjects: FC = (props) => { return ( ) } diff --git a/SharePointFramework/PortfolioWebParts/src/components/List/ItemColumn/DialogColumn/index.tsx b/SharePointFramework/PortfolioWebParts/src/components/List/ItemColumn/DialogColumn/index.tsx index 5580baf98..f022652e0 100644 --- a/SharePointFramework/PortfolioWebParts/src/components/List/ItemColumn/DialogColumn/index.tsx +++ b/SharePointFramework/PortfolioWebParts/src/components/List/ItemColumn/DialogColumn/index.tsx @@ -84,7 +84,7 @@ export const DialogColumn: ColumnRenderComponent = (props) = ) : ( )} diff --git a/SharePointFramework/PortfolioWebParts/src/components/List/ListHeader/ListHeader.tsx b/SharePointFramework/PortfolioWebParts/src/components/List/ListHeader/ListHeader.tsx index 8abe5e157..25f599239 100644 --- a/SharePointFramework/PortfolioWebParts/src/components/List/ListHeader/ListHeader.tsx +++ b/SharePointFramework/PortfolioWebParts/src/components/List/ListHeader/ListHeader.tsx @@ -25,7 +25,7 @@ export const ListHeader: FC = (props) => {
{hasError && (
- +
)}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/PortfolioInsights/Chart/index.tsx b/SharePointFramework/PortfolioWebParts/src/components/PortfolioInsights/Chart/index.tsx index c9700e37e..6163b3d91 100644 --- a/SharePointFramework/PortfolioWebParts/src/components/PortfolioInsights/Chart/index.tsx +++ b/SharePointFramework/PortfolioWebParts/src/components/PortfolioInsights/Chart/index.tsx @@ -41,7 +41,7 @@ export default class Chart extends Component {
- +
diff --git a/SharePointFramework/PortfolioWebParts/src/components/PortfolioInsights/index.tsx b/SharePointFramework/PortfolioWebParts/src/components/PortfolioInsights/index.tsx index 4f515d0aa..02ea3c21e 100644 --- a/SharePointFramework/PortfolioWebParts/src/components/PortfolioInsights/index.tsx +++ b/SharePointFramework/PortfolioWebParts/src/components/PortfolioInsights/index.tsx @@ -78,7 +78,7 @@ export class PortfolioInsights extends Component
@@ -89,7 +89,7 @@ export class PortfolioInsights extends Component
) diff --git a/SharePointFramework/PortfolioWebParts/src/components/PortfolioOverview/ColumnFormPanel/index.tsx b/SharePointFramework/PortfolioWebParts/src/components/PortfolioOverview/ColumnFormPanel/index.tsx index 5d09b7ff5..7b855fa12 100644 --- a/SharePointFramework/PortfolioWebParts/src/components/PortfolioOverview/ColumnFormPanel/index.tsx +++ b/SharePointFramework/PortfolioWebParts/src/components/PortfolioOverview/ColumnFormPanel/index.tsx @@ -102,7 +102,7 @@ export const ColumnFormPanel: FC = () => { {columnMessages.get('fieldName') && ( )} diff --git a/SharePointFramework/PortfolioWebParts/src/components/PortfolioOverview/ViewFormPanel/index.tsx b/SharePointFramework/PortfolioWebParts/src/components/PortfolioOverview/ViewFormPanel/index.tsx index 70f13af23..1fd23f4ed 100644 --- a/SharePointFramework/PortfolioWebParts/src/components/PortfolioOverview/ViewFormPanel/index.tsx +++ b/SharePointFramework/PortfolioWebParts/src/components/PortfolioOverview/ViewFormPanel/index.tsx @@ -97,7 +97,7 @@ export const ViewFormPanel: FC = () => { {isDefaultViewSet && ( )} diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectList/index.tsx b/SharePointFramework/PortfolioWebParts/src/components/ProjectList/index.tsx index a20e3e989..e9f380b91 100644 --- a/SharePointFramework/PortfolioWebParts/src/components/ProjectList/index.tsx +++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectList/index.tsx @@ -71,7 +71,7 @@ export const ProjectList: FC = (props) => {
@@ -83,7 +83,7 @@ export const ProjectList: FC = (props) => {
@@ -140,7 +140,7 @@ export const ProjectList: FC = (props) => {
)} diff --git a/SharePointFramework/PortfolioWebParts/src/components/ResourceAllocation/index.tsx b/SharePointFramework/PortfolioWebParts/src/components/ResourceAllocation/index.tsx index 6268d499e..679dee221 100644 --- a/SharePointFramework/PortfolioWebParts/src/components/ResourceAllocation/index.tsx +++ b/SharePointFramework/PortfolioWebParts/src/components/ResourceAllocation/index.tsx @@ -16,7 +16,7 @@ export const ResourceAllocation: FC = (props) => { return (
- +
) diff --git a/SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/EditCopyScreen/index.tsx b/SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/EditCopyScreen/index.tsx index cd152e9cd..574c74391 100644 --- a/SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/EditCopyScreen/index.tsx +++ b/SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/EditCopyScreen/index.tsx @@ -44,7 +44,7 @@ export const EditCopyScreen: FC = ({ onStartCopy }) => {
{state.selected.map((item, idx) => ( diff --git a/SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/SelectScreen/index.tsx b/SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/SelectScreen/index.tsx index 639bc4ba3..9fcdbe8d0 100644 --- a/SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/SelectScreen/index.tsx +++ b/SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/SelectScreen/index.tsx @@ -34,7 +34,7 @@ export const SelectScreen = (props: ISelectScreenProps) => { <> {
{ [DocumentTemplateDialogScreen.Summary]: ( ) diff --git a/SharePointFramework/ProjectExtensions/src/components/ErrorDialog/index.tsx b/SharePointFramework/ProjectExtensions/src/components/ErrorDialog/index.tsx index 51da8e736..b34a246f6 100644 --- a/SharePointFramework/ProjectExtensions/src/components/ErrorDialog/index.tsx +++ b/SharePointFramework/ProjectExtensions/src/components/ErrorDialog/index.tsx @@ -41,7 +41,7 @@ export const ErrorDialog: FC = ({ onDismiss={onDismiss} > {onRenderFooter()} diff --git a/SharePointFramework/ProjectExtensions/src/components/ProjectSetupDialog/TemplateConfigMessage/index.tsx b/SharePointFramework/ProjectExtensions/src/components/ProjectSetupDialog/TemplateConfigMessage/index.tsx index 845c06984..e9e1b0ee9 100644 --- a/SharePointFramework/ProjectExtensions/src/components/ProjectSetupDialog/TemplateConfigMessage/index.tsx +++ b/SharePointFramework/ProjectExtensions/src/components/ProjectSetupDialog/TemplateConfigMessage/index.tsx @@ -9,7 +9,7 @@ export const TemplateConfigMessage: FC = (props) => return ( ) } diff --git a/SharePointFramework/ProjectExtensions/src/components/ProjectSetupDialog/TemplateConfigMessage/useTemplateConfigMessage.tsx b/SharePointFramework/ProjectExtensions/src/components/ProjectSetupDialog/TemplateConfigMessage/useTemplateConfigMessage.tsx index c11948d4e..0e55e43c3 100644 --- a/SharePointFramework/ProjectExtensions/src/components/ProjectSetupDialog/TemplateConfigMessage/useTemplateConfigMessage.tsx +++ b/SharePointFramework/ProjectExtensions/src/components/ProjectSetupDialog/TemplateConfigMessage/useTemplateConfigMessage.tsx @@ -29,5 +29,5 @@ export function useTemplateConfigMessage({ section }: ITemplateConfigMessageProp .join(' og ') .toLowerCase() ) - return { hidden, message } as const + return { hidden, message } } diff --git a/SharePointFramework/ProjectExtensions/src/components/ProjectSetupDialog/index.tsx b/SharePointFramework/ProjectExtensions/src/components/ProjectSetupDialog/index.tsx index 27864a421..999316dc3 100644 --- a/SharePointFramework/ProjectExtensions/src/components/ProjectSetupDialog/index.tsx +++ b/SharePointFramework/ProjectExtensions/src/components/ProjectSetupDialog/index.tsx @@ -65,7 +65,7 @@ export const ProjectSetupDialog: FC = (props) => { @@ -73,7 +73,7 @@ export const ProjectSetupDialog: FC = (props) => { {props.tasks && ( )}
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectInformation/ProjectInformation.tsx b/SharePointFramework/ProjectWebParts/src/components/ProjectInformation/ProjectInformation.tsx index 3a9cca301..dc0dfc246 100644 --- a/SharePointFramework/ProjectWebParts/src/components/ProjectInformation/ProjectInformation.tsx +++ b/SharePointFramework/ProjectWebParts/src/components/ProjectInformation/ProjectInformation.tsx @@ -50,7 +50,7 @@ export const ProjectInformation: FC = (props) => { {context.state.error && ( )} diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectInformation/ProjectProperties/index.tsx b/SharePointFramework/ProjectWebParts/src/components/ProjectInformation/ProjectProperties/index.tsx index 44743b1a7..706b43025 100644 --- a/SharePointFramework/ProjectWebParts/src/components/ProjectInformation/ProjectProperties/index.tsx +++ b/SharePointFramework/ProjectWebParts/src/components/ProjectInformation/ProjectProperties/index.tsx @@ -51,11 +51,11 @@ export const ProjectProperties: FC = (props) => { <>
) diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/useAddProjectDialog.ts b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/useAddProjectDialog.ts index dd6ba08c3..6c20e9c39 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/useAddProjectDialog.ts +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/useAddProjectDialog.ts @@ -29,7 +29,7 @@ export const useAddProjectDialog = () => { * `` component. */ const onAddChildProjects = async () => { - const projects = availableProjects.filter(({SiteId}) => + const projects = availableProjects.filter(({ SiteId }) => context.state.addProjectDialog?.selectedProjects.includes(SiteId) ) await context.props.dataAdapter.addChildProjects(projects) diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/Commands/Commands.tsx b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/Commands/Commands.tsx index 3b8b68d6d..ca7fc2fb4 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/Commands/Commands.tsx +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/Commands/Commands.tsx @@ -20,14 +20,12 @@ export const Commands: FC = () => { _.isEmpty(context.state.selectedProjects) || !context.state.userHasManagePermission ) .setOnClick(() => { - const projects = context.state.childProjects.filter(({SiteId}) => + const projects = context.state.childProjects.filter(({ SiteId }) => context.state.selectedProjects.includes(SiteId) ) - context.props.dataAdapter - .removeChildProjects(projects) - .then((childProjects) => { - context.dispatch(CHILD_PROJECTS_REMOVED({ childProjects })) - }) + context.props.dataAdapter.removeChildProjects(projects).then((childProjects) => { + context.dispatch(CHILD_PROJECTS_REMOVED({ childProjects })) + }) }) ] diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ListHeaderSearch/ListHeaderSearch.module.scss b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ListHeaderSearch/ListHeaderSearch.module.scss deleted file mode 100644 index c8bff9ab2..000000000 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ListHeaderSearch/ListHeaderSearch.module.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import '~@fluentui/react/dist/sass/References.scss'; - -.searchBox { - width: 625px; - margin: 10px 0 0 0; - box-sizing: border-box; -} - -.selectionCount { - margin: 0; - cursor: pointer; -} - -.selectionCountTooltip { - width: 300px; - margin: 0; - padding: 6px 16px; - - p { - font-size: $ms-font-size-m; - } - - ul { - margin: 0; - padding: 0; - list-style-type: none; - } -} diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ListHeaderSearch/ListHeaderSearch.tsx b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ListHeaderSearch/ListHeaderSearch.tsx deleted file mode 100644 index 0314aa2ec..000000000 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ListHeaderSearch/ListHeaderSearch.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import { - CommandBar, - Icon, - Link, - SearchBox, - SelectAllVisibility, - Sticky, - StickyPositionType, - TooltipHost -} from '@fluentui/react' -import { format } from '@uifabric/utilities' -import strings from 'ProgramWebPartsStrings' -import React, { FC } from 'react' -import styles from './ListHeaderSearch.module.scss' -import { IListHeaderSearchProps } from './types' -import _ from 'underscore' - -export const ListHeaderSearch: FC = (props) => { - return ( - - ( - - ) - } - ]} - farItems={[ - { - key: 'cmdSelectionCount', - onRender: () => ( -
- { - if (_.isEmpty(props.selectedItems)) return null - return ( - - ) - } - }} - > - {format(strings.CmdSelectionCountText, props.selectedItems.length)} - -
- ) - } - ]} - /> - {props.defaultRender({ - ...props.detailsHeaderProps, - selectAllVisibility: props.selectAllVisibility - })} - - ) -} - -ListHeaderSearch.displayName = 'ListHeaderSearch' -ListHeaderSearch.defaultProps = { - search: { - hidden: true, - placeholder: '', - // eslint-disable-next-line @typescript-eslint/no-empty-function - onSearch: () => {} - }, - selectAllVisibility: SelectAllVisibility.hidden -} diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ListHeaderSearch/index.ts b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ListHeaderSearch/index.ts deleted file mode 100644 index bcf304dfc..000000000 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ListHeaderSearch/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ListHeaderSearch' diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ListHeaderSearch/types.ts b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ListHeaderSearch/types.ts deleted file mode 100644 index 0e852ca7d..000000000 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ListHeaderSearch/types.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { IDetailsHeaderProps, ISearchBoxProps, SelectAllVisibility } from '@fluentui/react' - -export interface IListHeaderSearchProps { - /** - * Current selected items - */ - selectedItems: Record[] - - /** - * Search box properties - */ - search?: ISearchBoxProps - - /** - * Details header properties - */ - detailsHeaderProps: IDetailsHeaderProps - - /** - * Default render function for the details header - */ - defaultRender: (props?: IDetailsHeaderProps) => JSX.Element - - /** - * Select all visibility - */ - selectAllVisibility?: SelectAllVisibility -} diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProgramAdministration.tsx b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProgramAdministration.tsx index 7ea7267f4..43231beb6 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProgramAdministration.tsx +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProgramAdministration.tsx @@ -12,7 +12,7 @@ import { IProgramAdministrationProps } from './types' import { useProgramAdministration } from './useProgramAdministration' export const ProgramAdministration: FC = (props) => { - const { context, onSelectionChange } = useProgramAdministration(props) + const { context, childProjects, onSelectionChange } = useProgramAdministration(props) if (context.state.error) { return ( @@ -30,13 +30,18 @@ export const ProgramAdministration: FC = (props) =>
- +
{!isEmpty(context.state.childProjects) || context.state.loading ? ( ) : ( = (props) => { - const context = useContext(ProgramAdministrationContext) - const columns = useColumns() - return ( -
- - SiteId} - > - - - {({ renderHeaderCell }) => ( - {renderHeaderCell()} - )} - - - >> - {({ item, rowId }) => ( - > key={rowId}> - {({ renderCell }) => {renderCell(item)}} - - )} - - -
- ) + const context = useContext(ProgramAdministrationContext) + const { items, columns, onSearch } = useProjectList(props) + return ( +
+ onSearch(null, { value: '' }) }} + /> + SiteId} + > + + + {({ renderHeaderCell }) => ( + {renderHeaderCell()} + )} + + + >> + {({ item, rowId }) => ( + > key={rowId}> + {({ renderCell }) => {renderCell(item)}} + + )} + + +
+ ) } diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/index.ts b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/index.ts index 006cad4f3..a90dac670 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/index.ts +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/index.ts @@ -1,2 +1,2 @@ export * from './ProjectList' -export * from './types' \ No newline at end of file +export * from './types' diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/types.ts b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/types.ts index 4b6fe8235..ec395440f 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/types.ts +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/types.ts @@ -1,7 +1,8 @@ import { DataGridProps } from '@fluentui/react-components' +import { SearchBoxProps } from '@fluentui/react-search-preview' export interface IProjectListProps { - items: Record[]; - onSelectionChange: DataGridProps['onSelectionChange'] - searchPlaceholder: string -} \ No newline at end of file + items: Record[] + onSelectionChange: DataGridProps['onSelectionChange'] + search: Pick +} diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/useColumns.tsx b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/useColumns.tsx index 868c37c82..4922036e4 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/useColumns.tsx +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/useColumns.tsx @@ -24,4 +24,4 @@ export const useColumns = (): TableColumnDefinition>[] => { } } ] -} \ No newline at end of file +} diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/useProjectList.tsx b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/useProjectList.tsx new file mode 100644 index 000000000..eabe66f5c --- /dev/null +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/ProjectList/useProjectList.tsx @@ -0,0 +1,19 @@ +import { SearchBoxProps } from '@fluentui/react-search-preview' +import { useMemo, useState } from 'react' +import { IProjectListProps } from './types' +import { useColumns } from './useColumns' + +export function useProjectList(props: IProjectListProps) { + const [searchTerm, setSearchTerm] = useState('') + const items = useMemo( + () => props.items.filter((item) => item.Title.toLowerCase().includes(searchTerm)), + [props.items, searchTerm] + ) + const columns = useColumns() + + const onSearch: SearchBoxProps['onChange'] = (_, data) => { + setSearchTerm(data?.value?.toLowerCase() ?? '') + } + + return { items, columns, onSearch, searchTerm } +} diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/reducer.ts b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/reducer.ts index b786819fd..562744f72 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/reducer.ts +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/reducer.ts @@ -1,6 +1,4 @@ -import { TableRowId } from '@fluentui/react-components' import { createAction, createReducer } from '@reduxjs/toolkit' -import { enableMapSet } from 'immer' import { IProgramAdministrationProject, IProgramAdministrationState } from './types' export const DATA_LOADED = createAction<{ @@ -8,16 +6,17 @@ export const DATA_LOADED = createAction<{ scope: string }>('DATA_LOADED') export const TOGGLE_ADD_PROJECT_DIALOG = createAction('TOGGLE_ADD_PROJECT_DIALOG') -export const ADD_CHILD_PROJECTS = createAction('ADD_CHILD_PROJECTS') +export const ADD_CHILD_PROJECTS = + createAction('ADD_CHILD_PROJECTS') export const CHILD_PROJECTS_REMOVED = createAction<{ childProjects: Record[] }>( 'CHILD_PROJECTS_REMOVED' ) -export const SET_SELECTED_TO_ADD = createAction( - 'SET_SELECTED_TO_ADD' -) -export const SET_SELECTED_TO_DELETE = createAction( - 'SET_SELECTED_TO_DELETE' -) +export const SET_SELECTED_TO_ADD = + createAction( + 'SET_SELECTED_TO_ADD' + ) +export const SET_SELECTED_TO_DELETE = + createAction('SET_SELECTED_TO_DELETE') /** * Initial state for the `ProgramAdministration` reducer. @@ -61,7 +60,7 @@ export default createReducer(initialState, { : state.availableProjects state.userHasManagePermission = payload.data.userHasManagePermission ?? state.userHasManagePermission - if(payload.scope === 'AddProjectDialog') { + if (payload.scope === 'AddProjectDialog') { state.addProjectDialog = { ...state.addProjectDialog, loading: false @@ -78,7 +77,10 @@ export default createReducer(initialState, { } state.selectedProjects = [] }, - [ADD_CHILD_PROJECTS.type]: (state: IProgramAdministrationState, { payload }: ReturnType) => { + [ADD_CHILD_PROJECTS.type]: ( + state: IProgramAdministrationState, + { payload }: ReturnType + ) => { state.childProjects = [...state.childProjects, ...payload] state.selectedProjects = [] state.addProjectDialog = { diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useProgramAdministration.ts b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useProgramAdministration.ts index e57c7dcfa..a0bbdd14e 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useProgramAdministration.ts +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/useProgramAdministration.ts @@ -2,7 +2,6 @@ import { ProjectAdminPermission } from 'pp365-shared-library/lib' import { useEffect, useMemo, useReducer } from 'react' import reducer, { DATA_LOADED, SET_SELECTED_TO_DELETE, initialState } from './reducer' import { IProgramAdministrationProps } from './types' -import { DataGridProps } from '@fluentui/react-components' export const useProgramAdministration = (props: IProgramAdministrationProps) => { const [state, dispatch] = useReducer(reducer, initialState) @@ -16,7 +15,12 @@ export const useProgramAdministration = (props: IProgramAdministrationProps) => properties.fieldValues ) ]).then(([childProjects, userHasManagePermission]) => { - dispatch(DATA_LOADED({ data: { childProjects, userHasManagePermission }, scope: 'ProgramAdministration' })) + dispatch( + DATA_LOADED({ + data: { childProjects, userHasManagePermission }, + scope: 'ProgramAdministration' + }) + ) }) }) }, []) @@ -30,5 +34,7 @@ export const useProgramAdministration = (props: IProgramAdministrationProps) => dispatch(SET_SELECTED_TO_DELETE(Array.from(selectedItems))) } - return { context, onSelectionChange } + const childProjects = [...state.childProjects] + + return { context, childProjects, onSelectionChange } } From 54d3ace102df0ac8a5ea1d80d553c0c183d2f69d Mon Sep 17 00:00:00 2001 From: Ole Martin Pettersen Date: Fri, 3 Nov 2023 12:19:27 +0100 Subject: [PATCH 6/6] syntax --- .../AddProjectDialog/useAddProjectDialog.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/useAddProjectDialog.ts b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/useAddProjectDialog.ts index 6c20e9c39..0c23c82a5 100644 --- a/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/useAddProjectDialog.ts +++ b/SharePointFramework/ProgramWebParts/src/components/ProgramAdministration/AddProjectDialog/useAddProjectDialog.ts @@ -19,9 +19,9 @@ export const useAddProjectDialog = () => { }, []) const availableProjects = context.state.availableProjects.filter( - (project) => - !context.state.childProjects.some((el) => el.SiteId === project.SiteId) && - project.SiteId !== context.props.context.pageContext.site.id.toString() + ({SiteId}) => + !context.state.childProjects.some((c) => c.SiteId === SiteId) && + SiteId !== context.props.context.pageContext.site.id.toString() ) /** @@ -29,7 +29,7 @@ export const useAddProjectDialog = () => { * `` component. */ const onAddChildProjects = async () => { - const projects = availableProjects.filter(({ SiteId }) => + const projects = availableProjects.filter(({SiteId}) => context.state.addProjectDialog?.selectedProjects.includes(SiteId) ) await context.props.dataAdapter.addChildProjects(projects)