Fix problem with deleting columns from aggregated webparts + cleanup …

…and improvements [skip-ci]

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

@@ -1,7 +1,7 @@
 import { ProjectContentColumn, SPProjectContentColumnItem } from 'pp365-shared-library'
 import { useState } from 'react'
 import { usePortfolioAggregationContext } from '../context'
-import { COLUMN_FORM_PANEL_ON_SAVED, DELETE_COLUMN, TOGGLE_COLUMN_FORM_PANEL } from '../reducer'
+import { COLUMN_DELETED, COLUMN_FORM_PANEL_ON_SAVED, TOGGLE_COLUMN_FORM_PANEL } from '../reducer'
 import { useEditableColumn } from './useEditableColumn'
 
 /**
@@ -13,6 +13,16 @@ export function useColumnFormPanel() {
   const { column, setColumn, setColumnData, isEditing } = useEditableColumn()
   const [persistRenderGlobally, setPersistRenderGlobally] = useState(false)
 
+  /**
+   * Saves the column to the list. If the column is new, it will
+   * also add the column to the current data source. If the column is
+   * being edited, it will update the column in the list.
+   *
+   * If the column is being edited, it will update the column in the list
+   * using `updateProjectContentColumn` from the `dataAdapter`. If the column is new,
+   * it will add the column to the list using `addColumnToDataSource` from
+   * the `dataAdapter`.
+   */
   const onSave = async () => {
     const colummData = column.get('data') ?? {}
     const columnItem: SPProjectContentColumnItem = {
@@ -50,14 +60,28 @@ export function useColumnFormPanel() {
     } catch (error) {}
   }
 
+  /**
+   * Deletes the column from the content columns list. Deletes the column using
+   * `deleteItemFromList` from the data adapter. If the column is deleted
+   * successfully, it will dispatch the `COLUMN_DELETED` action to the reducer.
+   */
   const onDeleteColumn = async () => {
-    await context.props.dataAdapter.portalDataService
-      .deleteProjectContentColumn('PROJECT_CONTENT_COLUMNS', context.state.columnForm.column)
-      .then(() => {
-        context.dispatch(DELETE_COLUMN())
-      })
+    const isDeleted = await context.props.dataAdapter.portalDataService.deleteItemFromList(
+      'PROJECT_CONTENT_COLUMNS',
+      context.state.columnForm.column.id
+    )
+    if (isDeleted) {
+      context.dispatch(
+        COLUMN_DELETED({
+          columnId: context.state.columnForm.column.id
+        })
+      )
+    }
   }
 
+  /**
+   * Dismisses the form panel by dispatching the `TOGGLE_COLUMN_FORM_PANEL` action.
+   */
   const onDismiss = () => {
     context.dispatch(TOGGLE_COLUMN_FORM_PANEL({ isOpen: false }))
   }

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

@@ -27,6 +27,7 @@ export const TOGGLE_COLUMN_FORM_PANEL = createAction<IColumnFormPanel>('TOGGLE_C
  */
 export const TOGGLE_EDIT_VIEW_COLUMNS_PANEL = createAction<{
   isOpen: boolean
+  columns?: ProjectContentColumn[]
 }>('TOGGLE_EDIT_VIEW_COLUMNS_PANEL')
 
 /**
@@ -48,14 +49,9 @@ export const COLUMN_FORM_PANEL_ON_SAVED = createAction<{
 }>('COLUMN_FORM_PANEL_ON_SAVED')
 
 /**
- * `DELETE_COLUMN`: Delete column.
- */
-export const DELETE_COLUMN = createAction('DELETE_COLUMN')
-
-/**
- * `SHOW_HIDE_COLUMNS`: Show/hide columns.
+ * `COLUMN_DELETED`: Column deleted - updates the `columns` and `columnForm` state
  */
-export const SHOW_HIDE_COLUMNS = createAction('SHOW_HIDE_COLUMNS')
+export const COLUMN_DELETED = createAction<{ columnId: any }>('COLUMN_DELETED')
 
 /**
  * `TOGGLE_COLUMN_CONTEXT_MENU`: Column header context menu.
@@ -86,11 +82,6 @@ export const SET_SORT = createAction<{ column: ProjectContentColumn; isSortedDes
   'SET_SORT'
 )
 
-/**
- * `SET_COLUMNS`: Set columns.
- */
-export const SET_COLUMNS = createAction<{ columns: ProjectContentColumn[] }>('SET_COLUMNS')
-
 /**
  * `SET_CURRENT_VIEW`: Set current view.
  */

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

@@ -15,23 +15,21 @@ import {
   PortfolioAggregationErrorMessage
 } from '../types'
 import {
+  COLUMN_DELETED,
   COLUMN_FORM_PANEL_ON_SAVED,
   DATA_FETCHED,
   DATA_FETCH_ERROR,
-  DELETE_COLUMN,
   EXECUTE_SEARCH,
   GET_FILTERS,
   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,
@@ -105,6 +103,11 @@ export const createPortfolioAggregationReducer = (
       { payload }: ReturnType<typeof TOGGLE_EDIT_VIEW_COLUMNS_PANEL>
     ) => {
       state.isEditViewColumnsPanelOpen = payload.isOpen
+
+      if (payload.columns) {
+        state.columns = payload.columns
+        persistSelectedColumnsInWebPartProperties(props, current(state).columns)
+      }
     },
     [TOGGLE_FILTER_PANEL.type]: (state) => {
       state.isFilterPanelOpen = !state.isFilterPanelOpen
@@ -130,16 +133,12 @@ export const createPortfolioAggregationReducer = (
       state.columnAddedOrUpdated = new Date().getTime()
       persistSelectedColumnsInWebPartProperties(props, current(state).columns)
     },
-    [DELETE_COLUMN.type]: (state) => {
+    [COLUMN_DELETED.type]: (state, { payload }) => {
+      state.columns = state.columns.filter((col) => col.id !== payload.columnId)
       state.columnForm = { isOpen: false }
       state.columnDeleted = new Date().getTime()
       persistSelectedColumnsInWebPartProperties(props, current(state).columns)
     },
-    [SHOW_HIDE_COLUMNS.type]: (state) => {
-      state.isEditViewColumnsPanelOpen = false
-      state.columnShowHide = new Date().getTime()
-      persistSelectedColumnsInWebPartProperties(props, current(state).columns)
-    },
     [TOGGLE_COLUMN_CONTEXT_MENU.type]: (
       state,
       { payload }: ReturnType<typeof TOGGLE_COLUMN_CONTEXT_MENU>
@@ -217,10 +216,6 @@ export const createPortfolioAggregationReducer = (
         return col
       })
     },
-    [SET_COLUMNS.type]: (state, { payload }: ReturnType<typeof SET_COLUMNS>) => {
-      state.columns = payload.columns
-      persistSelectedColumnsInWebPartProperties(props, current(state).columns)
-    },
     [SET_CURRENT_VIEW.type]: (state) => {
       const hashState = parseUrlHash()
       const viewIdUrlParam = new URLSearchParams(document.location.href).get('viewId')

SharePointFramework/PortfolioWebParts/src/components/PortfolioAggregation/useEditViewColumnsPanel.ts

@@ -1,7 +1,7 @@
 import { ProjectContentColumn, SPDataSourceItem } from 'pp365-shared-library'
 import { IEditViewColumnsPanelProps } from '../EditViewColumnsPanel/types'
 import { IPortfolioAggregationContext } from './context'
-import { SET_COLUMNS, TOGGLE_EDIT_VIEW_COLUMNS_PANEL } from './reducer'
+import { TOGGLE_EDIT_VIEW_COLUMNS_PANEL } from './reducer'
 import { useMemo } from 'react'
 
 /**
@@ -26,7 +26,7 @@ export function useEditViewColumnsPanel(
     await context.props.dataAdapter.portalDataService
       .updateDataSourceItem('DATA_SOURCES', properties, context.state.currentView?.title, true)
       .then(() => {
-        context.dispatch(SET_COLUMNS({ columns }))
+        context.dispatch(TOGGLE_EDIT_VIEW_COLUMNS_PANEL({ isOpen: false, columns }))
         onDismiss()
       })
   }

SharePointFramework/PortfolioWebParts/src/data/index.ts

@@ -783,16 +783,6 @@ export class DataAdapter implements IPortfolioWebPartsDataAdapter {
     }
   }
 
-  public async deleteItemFromList(listName: string, itemId: number): Promise<boolean> {
-    try {
-      const list = this._sp.web.lists.getByTitle(listName)
-      await list.items.getById(itemId).delete()
-      return true
-    } catch {
-      return false
-    }
-  }
-
   public async addColumnToPortfolioView(
     properties: SPProjectColumnItem,
     view: PortfolioOverviewView

SharePointFramework/shared-library/src/services/PortalDataService/PortalDataService.ts

@@ -577,27 +577,6 @@ export class PortalDataService extends DataService<IPortalDataServiceConfigurati
     }
   }
 
-  /**
-   * Delete project content column
-   *
-   * @param _list List
-   * @param column Column to delete
-   */
-  public async deleteProjectContentColumn(
-    _list: PortalDataServiceList,
-    column: Record<string, any>
-  ): Promise<any> {
-    try {
-      const list = this._getList(_list)
-      const items = await list.items()
-      const item = items.find((i) => i.GtManagedProperty === column.fieldName)
-      const itemDeleteResult = list.items.getById(item.Id).delete()
-      return itemDeleteResult
-    } catch (error) {
-      throw new Error(error)
-    }
-  }
-
   /**
    * Update the data source item with title `dataSourceTitle` with the properties in `properties`.
    *