Visuell oppgradering av Porteføljeoversikt og aggregerte oversikter

SharePointFramework/PortfolioWebParts/src/components/List/Commands/index.tsx

@@ -0,0 +1,19 @@
+import { CommandBar } from '@fluentui/react'
+import React, { FC } from 'react'
+import { useListContext } from '../context'
+import { FilterPanel } from 'pp365-shared-library'
+import strings from 'PortfolioWebPartsStrings'
+
+export const Commands: FC = () => {
+  const context = useListContext()
+  return (
+    <div>
+      <CommandBar {...context.props.commandBarProps} />
+      <FilterPanel
+        {...context.props.filterPanelProps}
+        headerText={strings.FiltersString}
+        isLightDismiss={true}
+      />
+    </div>
+  )
+}

SharePointFramework/PortfolioWebParts/src/components/List/ListHeader/ListHeader.module.scss

@@ -1,27 +1,45 @@
 .sticky {
-    margin: 0;
+  margin: 0;
+  padding-top: 32px;
+
+  .header {
+    display: none;
+  }
 }
 
 .root {
-    .header {
-        padding: 0 32px 20px 32px;
-
-        .title {
-            font-size: 28px;
-            font-weight: 100;
-            margin: 0;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-    }
-    .errorContainer {
-        padding: 23px 32px 23px 32px;
-    }
-    .searchBoxContainer {
-        padding: 23px 32px 23px 32px;
-    }
-    .headerColumns {
-        position: inherit;
+  .header {
+    padding: 32px 32px 20px 32px;
+  }
+
+  .commandBar {
+    display: flex;
+    flex-direction: row;
+    max-width: 100%;
+    padding: 0 32px;
+    gap: 15px;
+
+    .search {
+      width: 100%;
+      max-width: 100%;
+
+      .searchBox {
+        box-shadow: var(--shadow2);
+        width: inherit;
+        max-width: inherit;
+      }
     }
+  }
+
+  .filter {
+    box-shadow: var(--shadow2);
+  }
+
+  .headerColumns {
+    position: inherit;
+  }
+
+  .errorContainer {
+    padding: 23px 32px 23px 32px;
+  }
 }

SharePointFramework/PortfolioWebParts/src/components/List/ListHeader/index.tsx

@@ -1,17 +1,14 @@
-import {
-  IDetailsHeaderProps,
-  IRenderFunction,
-  MessageBarType,
-  Sticky,
-  StickyPositionType
-} from '@fluentui/react'
-import { SearchBox } from '@fluentui/react/lib/SearchBox'
+import { IDetailsHeaderProps, IRenderFunction, Sticky, StickyPositionType } from '@fluentui/react'
 import React, { FC, useMemo } from 'react'
 import { IListProps } from '../types'
 import styles from './ListHeader.module.scss'
 import { IListHeaderProps } from './types'
 import strings from 'PortfolioWebPartsStrings'
-import { UserMessage } from 'pp365-shared-library'
+import { WebPartTitle } from 'pp365-shared-library'
+import { Commands } from '../Commands'
+import { SearchBox } from '@fluentui/react-search-preview'
+import { FluentProvider, webLightTheme } from '@fluentui/react-components'
+import { Alert } from '@fluentui/react-components/unstable'
 
 /**
  * Component for displaying a Sticky list header.
@@ -24,27 +21,40 @@ const ListHeader: FC<IListHeaderProps> = (props) => {
       stickyPosition={StickyPositionType.Header}
       isScrollSynced={true}
     >
-      <div className={styles.root}>
+      <FluentProvider className={styles.root} theme={webLightTheme}>
         <div className={styles.header}>
-          <div className={styles.title}>{props.title}</div>
+          <WebPartTitle title={props.title} />
         </div>
+
         {hasError && (
           <div className={styles.errorContainer}>
-            <UserMessage type={MessageBarType.error} text={props.error.message} />
+            <Alert intent='error'>{props.error.message}</Alert>
           </div>
         )}
-        <div
-          className={styles.searchBoxContainer}
-          hidden={!props.searchBox || props?.searchBox?.hidden || hasError}
-        >
-          <SearchBox placeholder={strings.SearchBoxPlaceholderFallbackText} {...props.searchBox} />
+        <div className={styles.commandBar}>
+          <div
+            className={styles.search}
+            hidden={!props.searchBox || props?.searchBox?.hidden || hasError}
+          >
+            <SearchBox
+              className={styles.searchBox}
+              // disabled={!state.isDataLoaded || isEmpty(state.projects)}
+              placeholder={strings.SearchBoxPlaceholderFallbackText}
+              aria-label={strings.SearchBoxPlaceholderFallbackText}
+              title={strings.SearchBoxPlaceholderFallbackText}
+              size='large'
+              appearance='filled-lighter'
+              {...props.searchBox}
+            />
+          </div>
+          <Commands />
         </div>
         {props.defaultRender && (
           <div className={styles.headerColumns} hidden={hasError}>
             {props.defaultRender(props.headerProps)}
           </div>
         )}
-      </div>
+      </FluentProvider>
     </Sticky>
   )
 }

SharePointFramework/PortfolioWebParts/src/components/List/context.ts

@@ -1,8 +1,10 @@
-import { createContext } from 'react'
+import { createContext, useContext } from 'react'
 import { IListProps } from './types'
 
 export interface IListContext {
   props: IListProps
 }
 
 export const ListContext = createContext<IListContext>(null)
+
+export const useListContext = () => useContext(ListContext)

SharePointFramework/PortfolioWebParts/src/components/List/index.tsx

@@ -5,13 +5,12 @@ import {
   ScrollablePane,
   ScrollbarVisibility,
   SelectionMode,
-  ShimmeredDetailsList,
-  Target
+  ShimmeredDetailsList
 } from '@fluentui/react'
 import React, { FC } from 'react'
+import { ListContext } from './context'
 import { IListProps } from './types'
 import { useList } from './useList'
-import { ListContext } from './context'
 
 /**
  * List component using `ShimmeredDetailsList` from `@fluentui/react`.
@@ -24,15 +23,7 @@ export const List: FC<IListProps<any>> = (props) => {
     <ListContext.Provider value={{ props: listProps }}>
       <ScrollablePane {...props.scrollablePane}>
         <MarqueeSelection selection={props.selection}>
-          <ShimmeredDetailsList
-            {...listProps}
-            onColumnHeaderClick={(event, column) =>
-              props.onColumnContextMenu({ column, target: event.target as Target })
-            }
-            onColumnHeaderContextMenu={(column, event) =>
-              props.onColumnContextMenu({ column, target: event.target as Target })
-            }
-          />
+          <ShimmeredDetailsList {...listProps} />
         </MarqueeSelection>
         {props.layerHostId && <LayerHost id={props.layerHostId} />}
       </ScrollablePane>
@@ -46,12 +37,7 @@ List.defaultProps = {
   selectionMode: SelectionMode.multiple,
   constrainMode: ConstrainMode.unconstrained,
   scrollablePane: {
-    scrollbarVisibility: ScrollbarVisibility.auto,
-    styles: {
-      root: {
-        top: 75
-      }
-    }
+    scrollbarVisibility: ScrollbarVisibility.auto
   }
 }
 

SharePointFramework/PortfolioWebParts/src/components/List/types.ts

@@ -1,11 +1,13 @@
 import {
   IColumn,
+  ICommandBarProps,
   IScrollablePaneProps,
-  ISearchBoxProps,
   IShimmeredDetailsListProps,
   Target
 } from '@fluentui/react'
+import { SearchBoxProps } from '@fluentui/react-search-preview'
 import { WebPartContext } from '@microsoft/sp-webpart-base'
+import { IFilterPanelProps } from 'pp365-shared-library'
 
 export type OnColumnContextMenu = {
   column: any
@@ -51,7 +53,7 @@ export interface IListProps<T extends IColumn = IColumn>
   /**
    * Properties for the search box to be rendered in the list header.
    */
-  searchBox?: ISearchBoxProps
+  searchBox?: SearchBoxProps
 
   /**
    * Render list in justified layout mode. Manages which columns are visible, tries
@@ -75,4 +77,14 @@ export interface IListProps<T extends IColumn = IColumn>
    * Error to render in the list if the data fetch or something else fails.
    */
   error?: Error
+
+  /**
+   * Command bar props.
+   */
+  commandBarProps?: ICommandBarProps
+
+  /**
+   * Filter panel props.
+   */
+  filterPanelProps?: IFilterPanelProps
 }

SharePointFramework/PortfolioWebParts/src/components/List/useList.ts

@@ -3,7 +3,7 @@ import { useOnRenderItemColumn } from './ItemColumn'
 import { useOnRenderDetailsHeader } from './ListHeader'
 import { IListProps } from './types'
 import { useAddColumn } from './useAddColumn'
-import { DetailsListLayoutMode } from '@fluentui/react'
+import { DetailsListLayoutMode, IColumn, Target } from '@fluentui/react'
 
 /**
  * Custom hook that returns the properties needed for rendering a list.
@@ -25,10 +25,18 @@ export function useList(props: IListProps<any>) {
   const layoutMode = props.isListLayoutModeJustified
     ? DetailsListLayoutMode.justified
     : DetailsListLayoutMode.fixedColumns
+  const onColumnHeaderClick = (ev: React.MouseEvent<HTMLElement>, column: IColumn) => {
+    props.onColumnContextMenu({ column, target: ev.target as Target })
+  }
+  const onColumnHeaderContextMenu = (column: IColumn, ev: React.MouseEvent<HTMLElement>) => {
+    props.onColumnContextMenu({ column, target: ev.target as Target })
+  }
   return {
     ...props,
     onRenderItemColumn,
     onRenderDetailsHeader,
+    onColumnHeaderClick,
+    onColumnHeaderContextMenu,
     columns,
     layoutMode
   } as IListProps<any>

SharePointFramework/PortfolioWebParts/src/components/PortfolioAggregation/ColumnContextMenu/index.tsx

@@ -1,11 +1,11 @@
 import { ContextualMenu } from '@fluentui/react'
-import React, { FC, useContext } from 'react'
-import { PortfolioAggregationContext } from '../context'
+import React, { FC } from 'react'
+import { usePortfolioAggregationContext } from '../context'
 import { TOGGLE_COLUMN_CONTEXT_MENU } from '../reducer'
 import { useColumnContextMenu } from './useColumnContextMenu'
 
 export const ColumnContextMenu: FC = () => {
-  const context = useContext(PortfolioAggregationContext)
+  const context = usePortfolioAggregationContext()
   const { target, items } = useColumnContextMenu()
   if (!context.state.columnContextMenu) return null
   return (

SharePointFramework/PortfolioWebParts/src/components/PortfolioAggregation/ColumnContextMenu/useColumnContextMenu.ts

@@ -1,10 +1,9 @@
 import { ContextualMenuItemType, IContextualMenuItem, format } from '@fluentui/react'
 import { DisplayMode } from '@microsoft/sp-core-library'
 import * as strings from 'PortfolioWebPartsStrings'
-import { useContext } from 'react'
 import { indexOf } from 'underscore'
 import { useAddColumn } from '../../List'
-import { PortfolioAggregationContext } from '../context'
+import { usePortfolioAggregationContext } from '../context'
 import {
   MOVE_COLUMN,
   SET_GROUP_BY,
@@ -17,7 +16,7 @@ import {
  * Component logic hook for `ColumnContextMenu`. Handles state and dispatches actions to the reducer.
  **/
 export function useColumnContextMenu() {
-  const context = useContext(PortfolioAggregationContext)
+  const context = usePortfolioAggregationContext()
   if (!context.state.columnContextMenu) return {}
   const { column, target } = context.state.columnContextMenu
   const columnIndex = indexOf(

SharePointFramework/PortfolioWebParts/src/components/PortfolioAggregation/ColumnFormPanel/ColumnFormPanelFooter/index.tsx

@@ -1,14 +1,14 @@
-import React, { FC, useContext } from 'react'
-import styles from './ColumnFormPanelFooter.module.scss'
-import { PrimaryButton, DefaultButton } from '@fluentui/react'
+import { DefaultButton, PrimaryButton } from '@fluentui/react'
 import strings from 'PortfolioWebPartsStrings'
+import { useConfirmationDialog } from 'pzl-react-reusable-components/lib/ConfirmDialog'
+import React, { FC } from 'react'
+import { usePortfolioAggregationContext } from '../../context'
 import { TOGGLE_COLUMN_FORM_PANEL } from '../../reducer'
-import { PortfolioAggregationContext } from '../../context'
+import styles from './ColumnFormPanelFooter.module.scss'
 import { ColumnFormPanelFooterProps } from './types'
-import { useConfirmationDialog } from 'pzl-react-reusable-components/lib/ConfirmDialog'
 
 export const ColumnFormPanelFooter: FC<ColumnFormPanelFooterProps> = (props) => {
-  const context = useContext(PortfolioAggregationContext)
+  const context = usePortfolioAggregationContext()
   const [confirmDeleteDialog, getConfirmDeleteResponse] = useConfirmationDialog()
   return (
     <div className={styles.root}>

SharePointFramework/PortfolioWebParts/src/components/PortfolioAggregation/ColumnFormPanel/index.tsx

@@ -1,15 +1,15 @@
 import { Panel, TextField, Toggle } from '@fluentui/react'
 import * as strings from 'PortfolioWebPartsStrings'
 import { ColumnSearchPropertyField, FormFieldContainer } from 'pp365-shared-library'
-import React, { FC, useContext } from 'react'
+import React, { FC } from 'react'
 import { ColumnDataTypeField } from '../../List/ItemColumn/ColumnDataTypeField'
-import { PortfolioAggregationContext } from '../context'
+import { usePortfolioAggregationContext } from '../context'
 import styles from './ColumnFormPanel.module.scss'
 import { ColumnFormPanelFooter } from './ColumnFormPanelFooter'
 import { useColumnFormPanel } from './useColumnFormPanel'
 
 export const ColumnFormPanel: FC = () => {
-  const context = useContext(PortfolioAggregationContext)
+  const context = usePortfolioAggregationContext()
   const {
     onSave,
     isSaveDisabled,
@@ -45,7 +45,7 @@ export const ColumnFormPanel: FC = () => {
         <TextField
           label={strings.SortOrderLabel}
           description={strings.SortOrderLabel}
-          type={'number'}
+          type='number'
           value={column.get('sortOrder')}
           disabled={isEditing}
           onChange={(_, value) => setColumn('sortOrder', parseInt(value))}

SharePointFramework/PortfolioWebParts/src/components/PortfolioAggregation/ColumnFormPanel/useColumnFormPanel.ts

@@ -4,8 +4,8 @@ import {
   SPDataSourceItem,
   SPProjectContentColumnItem
 } from 'pp365-shared-library'
-import { useContext, useState } from 'react'
-import { PortfolioAggregationContext } from '../context'
+import { useState } from 'react'
+import { usePortfolioAggregationContext } from '../context'
 import { ADD_COLUMN, DELETE_COLUMN, TOGGLE_COLUMN_FORM_PANEL } from '../reducer'
 import { useEditableColumn } from './useEditableColumn'
 
@@ -14,7 +14,7 @@ import { useEditableColumn } from './useEditableColumn'
  * Also provides methods for saving and deleting columns.
  */
 export function useColumnFormPanel() {
-  const context = useContext(PortfolioAggregationContext)
+  const context = usePortfolioAggregationContext()
   const { column, setColumn, setColumnData, isEditing } = useEditableColumn()
   const [persistRenderGlobally, setPersistRenderGlobally] = useState(false)