Fix for 2.2 #1267

SharePointFramework/PortfolioWebParts/package.json

@@ -28,6 +28,7 @@
     "@microsoft/sp-page-context": "1.17.4",
     "@microsoft/sp-property-pane": "1.17.4",
     "@microsoft/sp-webpart-base": "1.17.4",
+    "@microsoft/sp-http": "1.17.4",
     "@pnp/logging": "3.17.0",
     "@pnp/sp": "3.17.0",
     "@pnp/sp-taxonomy": "1.3.8",

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

@@ -98,13 +98,6 @@ export const ColumnFormPanel: FC = () => {
           min={column.get('minWidth') ?? 0}
         />
       </FormFieldContainer>
-      <FormFieldContainer>
-        <Toggle
-          label={strings.IsResizableLabel}
-          checked={column.get('isResizable')}
-          onChange={(_, checked) => setColumn('isResizable', checked)}
-        />
-      </FormFieldContainer>
       <FormFieldContainer>
         <Toggle
           label={strings.IsGroupableLabel}

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

@@ -34,22 +34,18 @@ export function useColumnFormPanel() {
     if (colummData.dataTypeProperties) {
       columnItem.GtFieldDataTypeProperties = JSON.stringify(colummData.dataTypeProperties, null, 2)
     }
-    if (isEditing) {
-      await Promise.resolve(
-        context.props.dataAdapter
+    try {
+      if (isEditing) {
+        await context.props.dataAdapter
           .updateProjectContentColumn(columnItem, persistRenderGlobally)
           .then(() => {
             const editedColumn = new ProjectContentColumn(columnItem)
             context.dispatch(
-              ADD_COLUMN({
-                column: editedColumn
-              })
+              ADD_COLUMN(editedColumn)
             )
           })
-      )
-    } else {
-      await Promise.resolve(
-        context.props.dataAdapter.portalDataService
+      } else {
+        await context.props.dataAdapter.portalDataService
           .addItemToList('PROJECT_CONTENT_COLUMNS', _.omit(columnItem, ['Id']))
           .then((properties) => {
             const newColumn = new ProjectContentColumn(properties)
@@ -60,13 +56,13 @@ export function useColumnFormPanel() {
               .updateDataSourceItem(updateItem, context.state.currentView?.title)
               .then(() => {
                 context.dispatch(
-                  ADD_COLUMN({
-                    column: newColumn
-                  })
+                  ADD_COLUMN(newColumn)
                 )
               })
           })
-      )
+      }
+    } catch (error) {
+      console.error(error)
     }
   }
 

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

@@ -21,7 +21,6 @@ export const PortfolioAggregation: FC<IPortfolioAggregationProps> = (props) => {
     filterPanelProps,
     selection
   } = usePortfolioAggregation(props)
-
   return (
     <div className={styles.root}>
       <PortfolioAggregationContext.Provider value={context}>

SharePointFramework/PortfolioWebParts/src/components/PortfolioAggregation/reducer/actions.ts

@@ -42,7 +42,7 @@ export const TOGGLE_COMPACT = createAction<boolean>('TOGGLE_COMPACT')
 /**
  * `ADD_COLUMN`: Add column.
  */
-export const ADD_COLUMN = createAction<{ column: ProjectContentColumn }>('ADD_COLUMN')
+export const ADD_COLUMN = createAction<ProjectContentColumn>('ADD_COLUMN')
 
 /**
  * `DELETE_COLUMN`: Delete column.

SharePointFramework/PortfolioWebParts/src/components/PortfolioAggregation/reducer/createPortfolioAggregationReducer.ts

@@ -5,10 +5,10 @@ import * as strings from 'PortfolioWebPartsStrings'
 import sortArray from 'array-sort'
 import _ from 'lodash'
 import { IFilterItemProps } from 'pp365-shared-library/lib/components/FilterPanel'
-import { arrayMove } from 'pp365-shared-library/lib/util/arrayMove'
-import { getObjectValue as get } from 'pp365-shared-library/lib/util/getObjectValue'
 import { DataSource } from 'pp365-shared-library/lib/models/DataSource'
 import { parseUrlHash, setUrlHash } from 'pp365-shared-library/lib/util'
+import { arrayMove } from 'pp365-shared-library/lib/util/arrayMove'
+import { getObjectValue as get } from 'pp365-shared-library/lib/util/getObjectValue'
 import {
   IPortfolioAggregationHashState,
   IPortfolioAggregationProps,
@@ -17,29 +17,29 @@ import {
 } from '../types'
 import {
   ADD_COLUMN,
-  TOGGLE_COLUMN_CONTEXT_MENU,
   DATA_FETCHED,
   DATA_FETCH_ERROR,
   DELETE_COLUMN,
   EXECUTE_SEARCH,
   GET_FILTERS,
   MOVE_COLUMN,
   ON_FILTER_CHANGE,
+  SELECTION_CHANGED,
   SET_ALL_COLLAPSED,
   SET_COLLAPSED,
   SET_COLUMNS,
   SET_CURRENT_VIEW,
   SET_DATA_SOURCE,
   SET_GROUP_BY,
   SET_SORT,
+  SET_VIEW_FORM_PANEL,
   SHOW_HIDE_COLUMNS,
   START_FETCH,
+  TOGGLE_COLUMN_CONTEXT_MENU,
   TOGGLE_COLUMN_FORM_PANEL,
   TOGGLE_COMPACT,
   TOGGLE_EDIT_VIEW_COLUMNS_PANEL,
-  TOGGLE_FILTER_PANEL,
-  SET_VIEW_FORM_PANEL,
-  SELECTION_CHANGED
+  TOGGLE_FILTER_PANEL
 } from './actions'
 import { persistSelectedColumnsInWebPartProperties } from './persistSelectedColumnsInWebPartProperties'
 
@@ -62,7 +62,7 @@ export const createPortfolioAggregationReducer = (
         })
         if (payload.projects) {
           items = items.filter((item) =>
-            _.some(payload.projects, (project) => project.GtSiteId === item.SiteId)
+            _.some(payload.projects, ({ GtSiteId }) => GtSiteId === item.SiteId)
           )
         }
         state.items = items
@@ -73,35 +73,25 @@ export const createPortfolioAggregationReducer = (
         state.columns = []
         return
       }
-      const selectedColumns = !_.isEmpty(props.columns)
+      let selectedColumns = !_.isEmpty(props.columns)
         ? props.columns
         : payload.dataSource.columns ?? []
       const allColumnsForCategory = payload.columns.map((c) =>
         c.setData({
           isSelected: _.some(selectedColumns, ({ key }) => key === c.key) || c.data.isLocked
         })
       )
-      const selectedColumnsMerged = selectedColumns
+      selectedColumns = selectedColumns
         .map((c) => {
           const col = _.find(allColumnsForCategory, ({ key }) => key === c.key)
-          return (
-            col &&
-            col.setData({
-              ...c.data,
-              dataTypeProperties: {
-                ...col.data.dataTypeProperties,
-                ...c.data.dataTypeProperties
-              },
-              renderAs: c.data.renderAs ?? col.dataType ?? 'text'
-            })
-          )
+          return col ? col.merge(c) : null
         })
         .filter(Boolean)
       const availableColumns = payload.columns.filter(
-        (c) => !_.some(selectedColumnsMerged, ({ key }) => key === c.key)
+        (c) => !_.some(selectedColumns, ({ key }) => key === c.key)
       )
-      state.columns = !_.isEmpty(selectedColumnsMerged)
-        ? [...selectedColumnsMerged, ...availableColumns]
+      state.columns = !_.isEmpty(selectedColumns)
+        ? [...selectedColumns, ...availableColumns]
         : sortArray(allColumnsForCategory, 'sortOrder')
       state.allColumnsForCategory = allColumnsForCategory
       state.loading = false
@@ -126,7 +116,7 @@ export const createPortfolioAggregationReducer = (
     },
     [ADD_COLUMN.type]: (state, { payload }: ReturnType<typeof ADD_COLUMN>) => {
       const isEdit = !!state.columnForm?.column
-      const column = payload.column.setData({ isSelected: true })
+      const column = payload.setData({ isSelected: true })
       let columns = [...state.columns]
       let allColumnsForCategory = [...state.allColumnsForCategory]
       if (isEdit) {
@@ -160,9 +150,9 @@ export const createPortfolioAggregationReducer = (
     ) => {
       state.columnContextMenu = payload
         ? {
-            column: payload.column,
-            target: payload.target as any
-          }
+          column: payload.column,
+          target: payload.target as any
+        }
         : null
     },
     [SET_ALL_COLLAPSED.type]: (state, { payload }: ReturnType<typeof SET_ALL_COLLAPSED>) => {
@@ -377,7 +367,7 @@ export const createPortfolioAggregationReducer = (
         }
       }
     },
-[SELECTION_CHANGED.type]: (state, { payload }: ReturnType<typeof SELECTION_CHANGED>) => {
-  state.selectedItems = payload.getSelection()
-}
+    [SELECTION_CHANGED.type]: (state, { payload }: ReturnType<typeof SELECTION_CHANGED>) => {
+      state.selectedItems = payload.getSelection()
+    }
   })

SharePointFramework/PortfolioWebParts/src/components/PortfolioAggregation/reducer/persistSelectedColumnsInWebPartProperties.ts

@@ -4,7 +4,18 @@ import { ProjectContentColumn } from 'pp365-shared-library'
 
 /**
  * Persist columns in web part properties for `<PortfolioAggregation />` component
- * using the `onUpdateProperty` callback and property key `columns`.
+ * using the `onUpdateProperty` callback and property key `columns`. 
+ * 
+ * By default the following properties for the columns are persisted:
+ * - `id`
+ * - `sortOrder`
+ * - `key`
+ * - `fieldName`
+ * - `internalName`
+ * - `name`
+ * - `minWidth`
+ * - `maxWidth`
+ * - `data`
  *
  * @param props Props for `<PortfolioAggregation />` component
  * @param columns Columns to persist to property `columns`
@@ -21,6 +32,7 @@ export function persistSelectedColumnsInWebPartProperties(
     'internalName',
     'name',
     'minWidth',
+    'maxWidth',
     'data'
   ]
 ) {

SharePointFramework/PortfolioWebParts/src/data/index.ts

@@ -788,7 +788,7 @@ export class DataAdapter implements IPortfolioWebPartsDataAdapter {
   public async updateProjectContentColumn(
     columnItem: SPProjectContentColumnItem,
     persistRenderAs = false
-  ): Promise<any> {
+  ): Promise<IItemUpdateResult> {
     try {
       const list = this._sp.web.lists.getByTitle(strings.ProjectContentColumnsListName)
       const properties: SPProjectContentColumnItem = _.pick(
@@ -800,7 +800,8 @@ export class DataAdapter implements IPortfolioWebPartsDataAdapter {
           persistRenderAs && 'GtFieldDataType'
         ].filter(Boolean)
       )
-      return await list.items.getById(columnItem.Id).update(properties)
+      const update = await list.items.getById(columnItem.Id).update(properties)
+      return update
     } catch (error) {
       throw new Error(error)
     }

SharePointFramework/PortfolioWebParts/src/webparts/portfolioAggregation/index.tsx

@@ -15,6 +15,8 @@ import {
 import _ from 'lodash'
 import React from 'react'
 import { BasePortfolioWebPart } from '../basePortfolioWebPart'
+import { ISPHttpClientOptions, SPHttpClient } from '@microsoft/sp-http'
+import { DisplayMode } from '@microsoft/sp-core-library'
 
 export default class PortfolioAggregationWebPart extends BasePortfolioWebPart<IPortfolioAggregationProps> {
   private _configuration: IPortfolioAggregationConfiguration
@@ -39,9 +41,34 @@ export default class PortfolioAggregationWebPart extends BasePortfolioWebPart<IP
    * @param key Key
    * @param value Value
    */
-  private _onUpdateProperty(key: string, value: any) {
+  private async _onUpdateProperty(key: string, value: any) {
     this.properties[key] = value
-    this.context.propertyPane.refresh()
+    switch (this.displayMode) {
+      case DisplayMode.Edit: {
+        this.context.propertyPane.refresh()
+      }
+      break
+      case DisplayMode.Read: {
+        const options: ISPHttpClientOptions = {
+          body: JSON.stringify({
+            includeInNavigation:      false,
+            pageId:  this.context.pageContext.listItem.id,
+            title: this.properties.title,
+            webPartDataAsJson: JSON.stringify({
+              id: this.context.manifest.id,
+              instanceId: this.context.instanceId,
+              title: this.properties.title,
+              properties: this.properties
+            })
+          })
+        }
+        await this.context.spHttpClient.post(
+          `${this.context.pageContext.web.absoluteUrl}/_api/SitePages/Pages/UpdateAppPage`,
+          SPHttpClient.configurations.v1,
+          options
+        )
+      }
+    }
   }
 
   public async onInit(): Promise<void> {

SharePointFramework/shared-library/src/models/ProjectContentColumn.ts

@@ -83,4 +83,26 @@ export class ProjectContentColumn implements IProjectContentColumn {
     }
     return this
   }
+
+  /**
+   * Merges the properties of the given `ProjectContentColumn` into this instance.
+   * If a property is not defined in the given column, the current value of the property is retained.
+   * 
+   * @param column The `ProjectContentColumn` to merge into this instance.
+   * 
+   * @returns This instance with the merged properties.
+   */
+  public merge(column: ProjectContentColumn): ProjectContentColumn {
+    this.name = column.name ?? this.name
+    this.minWidth = column.minWidth ?? this.minWidth
+    this.maxWidth = column.maxWidth ?? this.maxWidth
+    return this.setData({
+      ...column.data,
+      dataTypeProperties: {
+        ...this.data.dataTypeProperties,
+        ...column.data.dataTypeProperties
+      },
+      renderAs: column.data.renderAs ?? this.dataType ?? 'text'
+    })
+  }
 }