Rework some of the functionality to deactivate ability to move hidden…

… columns in EditViewColumnsPanel Also add additonal aria's
Puzzlepart · Jan 24, 2024 · d7e07ca · d7e07ca
1 parent a24192e
commit d7e07ca
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 13 deletions.
diff --git a/SharePointFramework/PortfolioWebParts/src/components/EditViewColumnsPanel/index.tsx b/SharePointFramework/PortfolioWebParts/src/components/EditViewColumnsPanel/index.tsx
@@ -27,7 +27,8 @@ export const EditViewColumnsPanel: FC<IEditViewColumnsPanelProps> = (props) => {
     onSave,
     moveColumn,
     fluentProviderHeaderId,
-    fluentProviderBodyId
+    fluentProviderBodyId,
+    selectedColumns
   } = useEditViewColumnsPanel(props)
 
   return (
@@ -77,7 +78,12 @@ export const EditViewColumnsPanel: FC<IEditViewColumnsPanelProps> = (props) => {
               {(provided) => (
                 <div {...provided.droppableProps} ref={provided.innerRef}>
                   {selectableColumns.map((col, idx) => (
-                    <Draggable key={col.name} draggableId={col.name} index={idx}>
+                    <Draggable
+                      key={col.name}
+                      draggableId={col.name}
+                      index={idx}
+                      isDragDisabled={!col.data.isSelected}
+                    >
                       {(provided, snapshot) => (
                         <div
                           className={styles.columnItem}
@@ -91,22 +97,36 @@ export const EditViewColumnsPanel: FC<IEditViewColumnsPanelProps> = (props) => {
                           <Checkbox
                             label={col.name}
                             checked={col.data.isSelected}
-                            onChange={(_event, data) => onChange(col, !!data.checked)}
+                            onChange={(_event, data) => onChange(col, !!data.checked, idx)}
                             disabled={col.data.isLocked}
                           />
                           <div className={styles.columnItemActions}>
                             <Button
                               appearance='transparent'
                               size='medium'
                               icon={getFluentIcon('ChevronUp')}
-                              title={strings.Aria.MoveUp}
+                              title={
+                                !col.data.isSelected
+                                  ? strings.Aria.MoveDisabled
+                                  : idx === 0
+                                  ? strings.Aria.MoveUpDisabled
+                                  : strings.Aria.MoveUp
+                              }
+                              disabled={!col.data.isSelected || idx === 0}
                               onClick={() => moveColumn(col, -1)}
                             />
                             <Button
                               appearance='transparent'
                               size='medium'
                               icon={getFluentIcon('ChevronDown')}
-                              title={strings.Aria.MoveDown}
+                              title={
+                                !col.data.isSelected
+                                  ? strings.Aria.MoveDisabled
+                                  : idx === selectedColumns.length - 1
+                                  ? strings.Aria.MoveDownDisabled
+                                  : strings.Aria.MoveDown
+                              }
+                              disabled={!col.data.isSelected || idx === selectedColumns.length - 1}
                               onClick={() => moveColumn(col, 1)}
                             />
                           </div>

diff --git a/...ramework/PortfolioWebParts/src/components/EditViewColumnsPanel/useEditViewColumnsPanel.ts b/...ramework/PortfolioWebParts/src/components/EditViewColumnsPanel/useEditViewColumnsPanel.ts
@@ -32,8 +32,8 @@ export function useEditViewColumnsPanel(props: IEditViewColumnsPanelProps) {
    * @param col Column item
    * @param isSelected Selected state
    */
-  const onChange = (col: IColumn, isSelected: boolean) => {
-    selectColumn(col, isSelected)
+  const onChange = (col: IColumn, isSelected: boolean, idx: number) => {
+    selectColumn(col, isSelected, idx)
   }
 
   /**
@@ -63,6 +63,7 @@ export function useEditViewColumnsPanel(props: IEditViewColumnsPanelProps) {
       }
     },
     fluentProviderHeaderId,
-    fluentProviderBodyId
+    fluentProviderBodyId,
+    selectedColumns
   }
 }
diff --git a/...ntFramework/PortfolioWebParts/src/components/EditViewColumnsPanel/useSelectableColumns.ts b/...ntFramework/PortfolioWebParts/src/components/EditViewColumnsPanel/useSelectableColumns.ts
@@ -61,11 +61,14 @@ export function useSelectableColumns(props: IEditViewColumnsPanelProps) {
    *
    * @param col The column to update.
    * @param isSelected The new value for the `isSelected` property.
+   * @param idx The index of the column in the `selectableColumns` state.
    */
-  function selectColumn(col: IColumn, isSelected: boolean) {
+  function selectColumn(col: IColumn, isSelected: boolean, idx: number) {
     setSelectableColumns((prev) =>
       prev.map((i) => (i.fieldName === col.fieldName ? _.set(i, 'data.isSelected', isSelected) : i))
     )
+
+    moveColumn(idx, isSelected ? selectedColumns.length : selectedColumns.length - 1)
   }
 
   /**

diff --git a/SharePointFramework/PortfolioWebParts/src/components/PortfolioOverview/reducer/index.ts b/SharePointFramework/PortfolioWebParts/src/components/PortfolioOverview/reducer/index.ts
@@ -156,9 +156,7 @@ const $createReducer = (params: IPortfolioOverviewReducerParams) =>
       })
       .addCase(COLUMN_FORM_PANEL_ON_SAVED, (state, { payload }) => {
         if (payload.isNew) {
-          state.columns = [...state.columns, payload.column].sort(
-            (a, b) => a.sortOrder - b.sortOrder
-          )
+          state.columns = [...state.columns, payload.column]
         } else {
           state.columns = state.columns.map((col) =>
             col.key === payload.column.key ? payload.column : col

diff --git a/SharePointFramework/PortfolioWebParts/src/loc/mystrings.d.ts b/SharePointFramework/PortfolioWebParts/src/loc/mystrings.d.ts
@@ -1,8 +1,11 @@
 declare interface IPortfolioWebPartsStrings {
   Aria: {
     MenuOverflowCount: string
+    MoveDisabled: string
     MoveUp: string
+    MoveUpDisabled: string
     MoveDown: string
+    MoveDownDisabled: string
   },
   Placeholder: {
     TextField: string

diff --git a/SharePointFramework/PortfolioWebParts/src/loc/nb-no.js b/SharePointFramework/PortfolioWebParts/src/loc/nb-no.js
@@ -2,8 +2,11 @@ define([], function () {
   return {
     Aria: {
       MenuOverflowCount: '{0} flere elementer',
+      MoveDisabled: 'Kan ikke flytte skjult kolonne',
       MoveUp: 'Flytt opp',
+      MoveUpDisabled: 'Kan ikke flytte opp, øverste element',
       MoveDown: 'Flytt ned',
+      MoveDownDisabled: 'Kan ikke flytte ned, nederste element',
     },
     Placeholder: {
       TextField: 'Angi verdi her',

diff --git a/SharePointFramework/PortfolioWebParts/src/webparts/basePortfolioWebPart/index.tsx b/SharePointFramework/PortfolioWebParts/src/webparts/basePortfolioWebPart/index.tsx
@@ -84,7 +84,7 @@ export abstract class BasePortfolioWebPart<
           Title: string
         }>()
       ).Title
-    } catch (error) { }
+    } catch (error) {}
   }
 
   public async onInit(): Promise<void> {

diff --git a/SharePointFramework/ProgramWebParts/src/loc/mystrings.d.ts b/SharePointFramework/ProgramWebParts/src/loc/mystrings.d.ts
@@ -1,8 +1,11 @@
 declare interface IProgramWebPartsStrings {
   Aria: {
     MenuOverflowCount: string
+    MoveDisabled: string
     MoveUp: string
+    MoveUpDisabled: string
     MoveDown: string
+    MoveDownDisabled: string
   },
   Placeholder: {
     TextField: string

diff --git a/SharePointFramework/ProgramWebParts/src/loc/nb-no.js b/SharePointFramework/ProgramWebParts/src/loc/nb-no.js
@@ -2,8 +2,11 @@ define([], function () {
   return {
     Aria: {
       MenuOverflowCount: '{0} flere elementer',
+      MoveDisabled: 'Kan ikke flytte skjult kolonne',
       MoveUp: 'Flytt opp',
+      MoveUpDisabled: 'Kan ikke flytte opp, øverste element',
       MoveDown: 'Flytt ned',
+      MoveDownDisabled: 'Kan ikke flytte ned, nederste element',
     },
     Placeholder: {
       TextField: 'Angi verdi her',