Rework logic for adding columns to data sources

also fix bugs regarding creating/editing columns
Puzzlepart · Jan 18, 2024 · bf86608 · bf86608
1 parent 91febeb
commit bf86608
Show file tree

Hide file tree

Showing 19 changed files with 144 additions and 129 deletions.
diff --git a/.../components/List/ItemColumn/ColumnDataTypeField/DataTypeFields/DataTypeFields.module.scss b/.../components/List/ItemColumn/ColumnDataTypeField/DataTypeFields/DataTypeFields.module.scss
@@ -1,18 +1,14 @@
 .root {
-    .header {
-        margin: 0.8rem 0;
-        cursor: pointer;
-        .title {
-            font-size: 0.8rem;
-            font-weight: 600;
-        }
-    }
-    .container {
-        width: 100%;
-        margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  padding-top: 8px;
 
-        > div {
-            margin-bottom: 0.5rem;
-        }
-    }
+  .container {
+      width: 100%;
+      padding: 16px;
+
+      > div {
+          margin-bottom: 6px;
+      }
+  }
 }
diff --git a/...folioWebParts/src/components/List/ItemColumn/ColumnDataTypeField/DataTypeFields/index.tsx b/...folioWebParts/src/components/List/ItemColumn/ColumnDataTypeField/DataTypeFields/index.tsx
@@ -1,8 +1,9 @@
-import strings from 'PortfolioWebPartsStrings'
 import _ from 'lodash'
 import React, { FC, createElement } from 'react'
 import styles from './DataTypeFields.module.scss'
 import { IDataTypeFieldsProps } from './types'
+import { getFluentIcon } from 'pp365-shared-library'
+import { Button } from '@fluentui/react-components'
 
 /**
  * Renders a list of fields based on the data type properties.
@@ -30,9 +31,21 @@ export const DataTypeFields: FC<IDataTypeFieldsProps> = (props) => {
 
   return (
     <div className={styles.root} hidden={!dataTypeProperties}>
-      <div className={styles.header} onClick={toggleIsFieldsVisible}>
-        <span className={styles.title}>{strings.ColumnRenderDataTypePropertiesHeaderText}</span>
-      </div>
+      <Button
+        appearance='subtle'
+        size='medium'
+        icon={isFieldsVisible ? getFluentIcon('ChevronUp') : getFluentIcon('ChevronDown')}
+        title={
+          isFieldsVisible
+            ? 'Skjul egenskaper for visningsmodus'
+            : 'Vis egenskaper for visningsmodus'
+        }
+        onClick={toggleIsFieldsVisible}
+      >
+        {isFieldsVisible
+          ? 'Skjul egenskaper for visningsmodus'
+          : 'Vis egenskaper for visningsmodus'}
+      </Button>
       <div className={styles.container} hidden={!isFieldsVisible}>
         {fieldElements}
       </div>

diff --git a/...tFramework/PortfolioWebParts/src/components/List/ItemColumn/ColumnDataTypeField/index.tsx b/...tFramework/PortfolioWebParts/src/components/List/ItemColumn/ColumnDataTypeField/index.tsx
@@ -38,18 +38,15 @@ export const ColumnDataTypeField: FC<IColumnDataTypeFieldProps> = (props) => {
         {props.children}
         <DataTypeFields {...dataTypeFields} />
       </FieldContainer>
-      {props.persistRenderGloballyField && (
+      {props.persistRenderGloballyField && !props.persistRenderGloballyField.hidden && (
         <FieldContainer
           iconName='AppsList'
           label={strings.ColumnPersistRenderGloballyFieldLabel}
           description={strings.ColumnPersistRenderGloballyFieldDescription}
         >
           <Switch
             {...props.persistRenderGloballyField}
-            disabled={
-              props.persistRenderGloballyField.disabled ||
-              dataTypeDropdown?.selectedOption?.disabled
-            }
+            disabled={dataTypeDropdown?.selectedOption?.disabled}
           />
         </FieldContainer>
       )}

diff --git a/...lioWebParts/src/components/PortfolioAggregation/ColumnContextMenu/useColumnContextMenu.ts b/...lioWebParts/src/components/PortfolioAggregation/ColumnContextMenu/useColumnContextMenu.ts
@@ -4,7 +4,6 @@ import { indexOf } from 'underscore'
 import { useAddColumn } from '../../List'
 import { usePortfolioAggregationContext } from '../context'
 import {
-  MOVE_COLUMN,
   SET_GROUP_BY,
   SET_SORT,
   TOGGLE_COLUMN_FORM_PANEL,
@@ -19,7 +18,10 @@ import { MenuProps } from '@fluentui/react-components'
 export function useColumnContextMenu() {
   const context = usePortfolioAggregationContext()
   const [open, setOpen] = useState(false)
-  const { isAddColumn, createContextualMenuItems } = useAddColumn(true)
+  const { isAddColumn, createContextualMenuItems } = useAddColumn(
+    true,
+    context.props.pageContext.legacyPageContext.isSiteAdmin
+  )
   const onOpenChange: MenuProps['onOpenChange'] = (_, data) => setOpen(data.open)
   const [checkedValues, setCheckedValues] = useState<MenuProps['checkedValues']>({})
   const onCheckedValueChange: MenuProps['onCheckedValueChange'] = (_, data) => {
@@ -113,22 +115,9 @@ export function useColumnContextMenu() {
               key: 'EDIT_COLUMN',
               text: strings.EditColumnLabel,
               onClick: () => context.dispatch(TOGGLE_COLUMN_FORM_PANEL({ isOpen: true, column })),
+              disabled: !context.props.pageContext.legacyPageContext.isSiteAdmin,
               iconProps: { iconName: 'TableCellEdit' }
             },
-            {
-              key: 'MOVE_COLUMN_LEFT',
-              text: strings.MoveLeftLabel,
-              disabled: columnIndex === 0,
-              onClick: () => context.dispatch(MOVE_COLUMN({ column, move: -1 })),
-              iconProps: { iconName: 'ArrowLeft' }
-            },
-            {
-              key: 'MOVE_COLUMN_RIGHT',
-              text: strings.MoveRightLabel,
-              disabled: columnIndex === context.state.columns.length - 1,
-              onClick: () => context.dispatch(MOVE_COLUMN({ column, move: 1 })),
-              iconProps: { iconName: 'ArrowRight' }
-            },
             {
               key: 'DIVIDER_03',
               itemType: ContextualMenuItemType.Divider

diff --git a/...Framework/PortfolioWebParts/src/components/PortfolioAggregation/ColumnFormPanel/index.tsx b/...Framework/PortfolioWebParts/src/components/PortfolioAggregation/ColumnFormPanel/index.tsx
@@ -146,7 +146,8 @@ export const ColumnFormPanel: FC = () => {
             persistRenderGloballyField={{
               defaultChecked: persistRenderGlobally || !isEditing,
               onChange: (_, data) => setPersistRenderGlobally(!!data.checked),
-              disabled: !isEditing || column.get('fieldName') === 'Title'
+              hidden: !isEditing,
+              disabled: column.get('fieldName') === 'Title'
             }}
           />
           <FieldContainer
@@ -161,8 +162,8 @@ export const ColumnFormPanel: FC = () => {
           </FieldContainer>
           <FieldContainer
             iconName='GroupList'
-            label={strings.DataSourceCategoryLabel}
-            description={strings.DataSourceCategoryDescription}
+            label={strings.ColumnCategoryLabel}
+            description={strings.ColumnCategoryDescription}
           >
             <Input value={context.props.dataSourceCategory} disabled={true} />
           </FieldContainer>

diff --git a/...rtfolioWebParts/src/components/PortfolioAggregation/ColumnFormPanel/useColumnFormPanel.ts b/...rtfolioWebParts/src/components/PortfolioAggregation/ColumnFormPanel/useColumnFormPanel.ts
@@ -1,12 +1,7 @@
-import _ from 'lodash'
-import {
-  ProjectContentColumn,
-  SPDataSourceItem,
-  SPProjectContentColumnItem
-} from 'pp365-shared-library'
+import { ProjectContentColumn, SPProjectContentColumnItem } from 'pp365-shared-library'
 import { useState } from 'react'
 import { usePortfolioAggregationContext } from '../context'
-import { ADD_COLUMN, DELETE_COLUMN, TOGGLE_COLUMN_FORM_PANEL } from '../reducer'
+import { COLUMN_FORM_PANEL_ON_SAVED, DELETE_COLUMN, TOGGLE_COLUMN_FORM_PANEL } from '../reducer'
 import { useEditableColumn } from './useEditableColumn'
 
 /**
@@ -29,34 +24,29 @@ export function useColumnFormPanel() {
       GtFieldDataType: colummData.renderAs ?? 'Text',
       GtDataSourceCategory: context.props.dataSourceCategory,
       GtColMinWidth: column.get('minWidth'),
-      GtColMaxWidth: column.get('maxWidth')
+      GtColMaxWidth: column.get('maxWidth'),
+      GtIsGroupable: column.get('isGroupable')
     }
     if (colummData.dataTypeProperties) {
       columnItem.GtFieldDataTypeProperties = JSON.stringify(colummData.dataTypeProperties, null, 2)
     }
     try {
       if (isEditing) {
-        await context.props.dataAdapter.portalDataService
-          .updateProjectContentColumn('PROJECT_CONTENT_COLUMNS', columnItem, persistRenderGlobally)
-          .then(() => {
-            const editedColumn = new ProjectContentColumn(columnItem)
-            context.dispatch(ADD_COLUMN(editedColumn))
-          })
+        await context.props.dataAdapter.portalDataService.updateProjectContentColumn(
+          'PROJECT_CONTENT_COLUMNS',
+          columnItem,
+          persistRenderGlobally
+        )
       } else {
-        await context.props.dataAdapter.portalDataService
-          .addItemToList('PROJECT_CONTENT_COLUMNS', _.omit(columnItem, ['Id']))
-          .then((properties) => {
-            const newColumn = new ProjectContentColumn(properties)
-            const updateItem: SPDataSourceItem = {
-              GtProjectContentColumnsId: properties.Id
-            }
-            context.props.dataAdapter.portalDataService
-              .updateDataSourceItem('DATA_SOURCES', updateItem, context.state.currentView?.title)
-              .then(() => {
-                context.dispatch(ADD_COLUMN(newColumn))
-              })
-          })
+        await context.props.dataAdapter.addColumnToDataSource(columnItem, context.state.currentView)
       }
+
+      context.dispatch(
+        COLUMN_FORM_PANEL_ON_SAVED({
+          column: new ProjectContentColumn(columnItem),
+          isNew: !isEditing
+        })
+      )
     } catch (error) {}
   }
 

diff --git a/SharePointFramework/PortfolioWebParts/src/components/PortfolioAggregation/reducer/actions.ts b/SharePointFramework/PortfolioWebParts/src/components/PortfolioAggregation/reducer/actions.ts
@@ -40,9 +40,12 @@ export const TOGGLE_FILTER_PANEL = createAction('TOGGLE_FILTER_PANEL')
 export const TOGGLE_COMPACT = createAction<boolean>('TOGGLE_COMPACT')
 
 /**
- * `ADD_COLUMN`: Add column.
+ * `COLUMN_FORM_PANEL_ON_SAVED`: Column form panel on saved.
  */
-export const ADD_COLUMN = createAction<ProjectContentColumn>('ADD_COLUMN')
+export const COLUMN_FORM_PANEL_ON_SAVED = createAction<{
+  column: ProjectContentColumn
+  isNew: boolean
+}>('COLUMN_FORM_PANEL_ON_SAVED')
 
 /**
  * `DELETE_COLUMN`: Delete column.
@@ -83,13 +86,6 @@ export const SET_SORT = createAction<{ column: ProjectContentColumn; isSortedDes
   'SET_SORT'
 )
 
-/**
- * `MOVE_COLUMN`: Move column.
- */
-export const MOVE_COLUMN = createAction<{ column: ProjectContentColumn; move: number }>(
-  'MOVE_COLUMN'
-)
-
 /**
  * `SET_COLUMNS`: Set columns.
  */

diff --git a/...WebParts/src/components/PortfolioAggregation/reducer/createPortfolioAggregationReducer.ts b/...WebParts/src/components/PortfolioAggregation/reducer/createPortfolioAggregationReducer.ts
@@ -7,7 +7,6 @@ import _ from 'lodash'
 import { IFilterItemProps } from 'pp365-shared-library/lib/components/FilterPanel'
 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,
@@ -16,13 +15,12 @@ import {
   PortfolioAggregationErrorMessage
 } from '../types'
 import {
-  ADD_COLUMN,
+  COLUMN_FORM_PANEL_ON_SAVED,
   DATA_FETCHED,
   DATA_FETCH_ERROR,
   DELETE_COLUMN,
   EXECUTE_SEARCH,
   GET_FILTERS,
-  MOVE_COLUMN,
   ON_FILTER_CHANGE,
   SELECTION_CHANGED,
   SET_ALL_COLLAPSED,
@@ -114,22 +112,20 @@ export const createPortfolioAggregationReducer = (
     [TOGGLE_COMPACT.type]: (state) => {
       state.isCompact = !state.isCompact
     },
-    [ADD_COLUMN.type]: (state, { payload }: ReturnType<typeof ADD_COLUMN>) => {
-      const isEdit = !!state.columnForm?.column
-      const column = payload.setData({ isSelected: true })
-      let columns = [...state.columns]
-      let allColumnsForCategory = [...state.allColumnsForCategory]
-      if (isEdit) {
-        columns = columns.map((c) => (c.fieldName === column.fieldName ? column : c))
-        allColumnsForCategory = allColumnsForCategory.map((c) =>
-          c.fieldName === column.fieldName ? column : c
-        )
+    [COLUMN_FORM_PANEL_ON_SAVED.type]: (state, { payload }) => {
+      const column = payload.column.setData({ isSelected: true })
+
+      if (payload.isNew) {
+        state.columns = [...state.columns, payload.column]
+        state.allColumnsForCategory = [...state.allColumnsForCategory, column]
       } else {
-        columns = [...columns, column]
-        allColumnsForCategory = [...allColumnsForCategory, column]
+        state.columns = state.columns.map((col) =>
+          col.fieldName === payload.column.fieldName ? payload.column : col
+        )
+        state.allColumnsForCategory = state.allColumnsForCategory.map((col) =>
+          col.fieldName === column.fieldName ? column : col
+        )
       }
-      state.columns = columns
-      state.allColumnsForCategory = allColumnsForCategory
       state.columnForm = { isOpen: false }
       state.columnAddedOrUpdated = new Date().getTime()
       persistSelectedColumnsInWebPartProperties(props, current(state).columns)
@@ -221,14 +217,6 @@ export const createPortfolioAggregationReducer = (
         return col
       })
     },
-    [MOVE_COLUMN.type]: (state, { payload }: ReturnType<typeof MOVE_COLUMN>) => {
-      const index = _.indexOf(
-        state.columns.map((c) => c.fieldName),
-        payload.column.fieldName
-      )
-      state.columns = arrayMove(current(state).columns, index, index + payload.move)
-      persistSelectedColumnsInWebPartProperties(props, current(state).columns)
-    },
     [SET_COLUMNS.type]: (state, { payload }: ReturnType<typeof SET_COLUMNS>) => {
       state.columns = payload.columns
       persistSelectedColumnsInWebPartProperties(props, current(state).columns)

diff --git a/...tfolioWebParts/src/components/PortfolioOverview/ColumnContextMenu/useColumnContextMenu.ts b/...tfolioWebParts/src/components/PortfolioOverview/ColumnContextMenu/useColumnContextMenu.ts
@@ -8,7 +8,7 @@ import {
   SET_GROUP_BY,
   SET_SORT,
   TOGGLE_COLUMN_FORM_PANEL,
-  SET_EDIT_VIEW_COLUMNS_PANEL
+  TOGGLE_EDIT_VIEW_COLUMNS_PANEL
 } from '../reducer'
 import { useAddColumn } from '../../List'
 import { MenuProps } from '@fluentui/react-components'
@@ -43,6 +43,7 @@ export function useColumnContextMenu() {
     target: null,
     items: []
   }
+
   if (!context.state.columnContextMenu) return columnContextMenu
 
   const { column, target } = context.state.columnContextMenu
@@ -51,7 +52,7 @@ export function useColumnContextMenu() {
   if (isAddColumn(column)) {
     columnContextMenu.items = createContextualMenuItems(
       () => context.dispatch(TOGGLE_COLUMN_FORM_PANEL({ isOpen: true })),
-      () => context.dispatch(SET_EDIT_VIEW_COLUMNS_PANEL({ isOpen: true })),
+      () => context.dispatch(TOGGLE_EDIT_VIEW_COLUMNS_PANEL({ isOpen: true })),
       context.state.currentView?.isProgramView,
       context.state.currentView?.isProgramView
     )
@@ -129,22 +130,24 @@ export function useColumnContextMenu() {
             {
               key: 'EDIT_COLUMN',
               text: strings.EditColumnLabel,
-              onClick: () => {
-                context.dispatch(TOGGLE_COLUMN_FORM_PANEL({ isOpen: true, column }))
-              },
+              onClick: () => context.dispatch(TOGGLE_COLUMN_FORM_PANEL({ isOpen: true, column })),
               disabled: !context.props.pageContext.legacyPageContext.isSiteAdmin,
               iconProps: { iconName: 'TableCellEdit' }
             },
             {
               key: 'DIVIDER_03',
               itemType: ContextualMenuItemType.Divider
             },
+            {
+              key: 'SHOW_HIDE_COLUMNS',
+              text: strings.ShowHideColumnsLabel,
+              onClick: () => context.dispatch(TOGGLE_EDIT_VIEW_COLUMNS_PANEL({ isOpen: true })),
+              iconProps: { iconName: 'Eye' }
+            },
             {
               key: 'ADD_COLUMN',
               text: strings.AddColumnLabel,
-              onClick: () => {
-                context.dispatch(TOGGLE_COLUMN_FORM_PANEL({ isOpen: true }))
-              },
+              onClick: () => context.dispatch(TOGGLE_COLUMN_FORM_PANEL({ isOpen: true })),
               disabled: !context.props.pageContext.legacyPageContext.isSiteAdmin,
               iconProps: { iconName: 'Add' }
             }

diff --git a/SharePointFramework/PortfolioWebParts/src/components/PortfolioOverview/reducer/actions.ts b/SharePointFramework/PortfolioWebParts/src/components/PortfolioOverview/reducer/actions.ts
@@ -119,9 +119,9 @@ export const COLUMN_FORM_PANEL_ON_SAVED = createAction<{
 export const COLUMN_DELETED = createAction<{ columnId: any }>('COLUMN_DELETED')
 
 /**
- * `SET_EDIT_VIEW_COLUMNS_PANEL`: Set edit view columns panel.
+ * `TOGGLE_EDIT_VIEW_COLUMNS_PANEL`: Set edit view columns panel.
  */
-export const SET_EDIT_VIEW_COLUMNS_PANEL = createAction<{
+export const TOGGLE_EDIT_VIEW_COLUMNS_PANEL = createAction<{
   isOpen: boolean
   columns?: ProjectColumn[]
   revertColumnOrder?: boolean