Fix for #1454

Puzzlepart · Jan 30, 2024 · 1696746 · 1696746
1 parent 39345ba
commit 1696746
Show file tree

Hide file tree

Showing 20 changed files with 86 additions and 16 deletions.
diff --git a/...rtfolioWebParts/src/components/PortfolioAggregation/ColumnFormPanel/useColumnFormPanel.ts b/...rtfolioWebParts/src/components/PortfolioAggregation/ColumnFormPanel/useColumnFormPanel.ts
@@ -93,7 +93,10 @@ export function useColumnFormPanel() {
   /**
    * Save is disabled if the column name or field name is less than 2 characters.
    */
-  const isSaveDisabled = column.get('internalName').length < 2 || column.get('fieldName').length < 2 || column.get('name').length < 2
+  const isSaveDisabled =
+    column.get('internalName').length < 2 ||
+    column.get('fieldName').length < 2 ||
+    column.get('name').length < 2
 
   /**
    * Save is disabled if the column field name is Title

diff --git a/.../PortfolioWebParts/src/components/PortfolioOverview/ColumnFormPanel/useColumnFormPanel.ts b/.../PortfolioWebParts/src/components/PortfolioOverview/ColumnFormPanel/useColumnFormPanel.ts
@@ -97,7 +97,10 @@ export function useColumnFormPanel() {
   /**
    * Save is disabled if the column name or field name is less than 2 characters.
    */
-  const isSaveDisabled = column.get('internalName').length < 2 || column.get('fieldName').length < 2 || column.get('name').length < 2
+  const isSaveDisabled =
+    column.get('internalName').length < 2 ||
+    column.get('fieldName').length < 2 ||
+    column.get('name').length < 2
 
   /**
    * Set column message for a specific column for a specific duration (default 5 seconds)

diff --git a/...ntFramework/ProjectWebParts/src/components/ProjectInformation/Actions/Actions.module.scss b/...ntFramework/ProjectWebParts/src/components/ProjectInformation/Actions/Actions.module.scss
@@ -8,6 +8,7 @@
     justify-content: flex-start;
 
     .label {
+      text-align: left;
       font-weight: var(--fontWeightRegular);
       margin: 0;
     }

diff --git a/...Parts/src/components/ProjectInformation/ParentProjectsList/ParentProjectsList.module.scss b/...Parts/src/components/ProjectInformation/ParentProjectsList/ParentProjectsList.module.scss
@@ -3,6 +3,7 @@
     justify-content: flex-start;
 
     .label {
+      text-align: left;
       font-weight: var(--fontWeightRegular);
       margin: 0;
     }

diff --git a/...components/ProjectPhases/ProjectPhase/ProjectPhasePopover/ProjectPhasePopover.module.scss b/...components/ProjectPhases/ProjectPhase/ProjectPhasePopover/ProjectPhasePopover.module.scss
@@ -16,6 +16,7 @@
     }
 
     .label {
+      text-align: left;
       font-weight: var(--fontWeightRegular);
       margin: 0;
     }

diff --git a/SharePointFramework/shared-library/src/components/CustomEditPanel/CustomEditPanel.tsx b/SharePointFramework/shared-library/src/components/CustomEditPanel/CustomEditPanel.tsx
@@ -22,7 +22,9 @@ export const CustomEditPanel: FC<ICustomEditPanelProps> = (props) => {
             overflow: 'hidden'
           }
         }}
-        onRenderFooterContent={() => <CustomEditPanelFooter />}
+        onRenderFooterContent={() => (
+          <CustomEditPanelFooter isSaveDisabled={context.isSaveDisabled()} />
+        )}
         onRenderBody={() => <CustomEditPanelBody />}
       />
     </CustomEditPanelContext.Provider>

diff --git a/...ared-library/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/Boolean.tsx b/...ared-library/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/Boolean.tsx
@@ -7,7 +7,12 @@ import { FieldElementComponent } from './types'
 export const Boolean: FieldElementComponent = ({ field }) => {
   const context = useCustomEditPanelContext()
   return (
-    <FieldContainer iconName='ToggleLeft' label={field.displayName} description={field.description} required={field.required}>
+    <FieldContainer
+      iconName='ToggleLeft'
+      label={field.displayName}
+      description={field.description}
+      required={field.required}
+    >
       <Switch
         checked={context.model.get<boolean>(field)}
         onChange={(_, data) => context.model.set(field, data.checked)}

diff --git a/...red-library/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/Currency.tsx b/...red-library/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/Currency.tsx
@@ -8,7 +8,12 @@ import { FieldElementComponent } from './types'
 export const Currency: FieldElementComponent = ({ field }) => {
   const context = useCustomEditPanelContext()
   return (
-    <FieldContainer iconName='Money' label={field.displayName} description={field.description} required={field.required}>
+    <FieldContainer
+      iconName='Money'
+      label={field.displayName}
+      description={field.description}
+      required={field.required}
+    >
       <Input
         type='number'
         defaultValue={context.model.get<string>(field)}

diff --git a/...red-library/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/DateTime.tsx b/...red-library/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/DateTime.tsx
@@ -9,7 +9,12 @@ import { DayOfWeek } from '@fluentui/react'
 export const DateTime: FieldElementComponent = ({ field }) => {
   const context = useCustomEditPanelContext()
   return (
-    <FieldContainer iconName='Calendar' label={field.displayName} description={field.description} required={field.required}>
+    <FieldContainer
+      iconName='Calendar'
+      label={field.displayName}
+      description={field.description}
+      required={field.required}
+    >
       <DatePicker
         value={context.model.get(field)}
         onSelectDate={(date) => context.model.set(field, date)}

diff --git a/...ibrary/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/Lookup/Lookup.tsx b/...ibrary/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/Lookup/Lookup.tsx
@@ -9,7 +9,12 @@ export const Lookup: FieldElementComponent = ({ field }) => {
   const context = useCustomEditPanelContext()
   const { options, value } = useLookup(field)
   return (
-    <FieldContainer iconName='Link' label={field.displayName} description={field.description} required={field.required}>
+    <FieldContainer
+      iconName='Link'
+      label={field.displayName}
+      description={field.description}
+      required={field.required}
+    >
       <Combobox
         value={value?.text}
         selectedOptions={[value?.value]}

diff --git a/...ry/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/TaxonomyFieldType.tsx b/...ry/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/TaxonomyFieldType.tsx
@@ -8,7 +8,12 @@ import { FieldElementComponent } from './types'
 export const TaxonomyFieldType: FieldElementComponent = ({ field }) => {
   const context = useCustomEditPanelContext()
   return (
-    <FieldContainer iconName='AppsList' label={field.displayName} description={field.description} required={field.required}>
+    <FieldContainer
+      iconName='AppsList'
+      label={field.displayName}
+      description={field.description}
+      required={field.required}
+    >
       <TagPicker
         styles={{ text: styles.field }}
         onResolveSuggestions={async (filter, selectedItems) =>

diff --git a/...c/components/CustomEditPanel/CustomEditPanelBody/FieldElements/TaxonomyFieldTypeMulti.tsx b/...c/components/CustomEditPanel/CustomEditPanelBody/FieldElements/TaxonomyFieldTypeMulti.tsx
@@ -8,7 +8,12 @@ import { FieldElementComponent } from './types'
 export const TaxonomyFieldTypeMulti: FieldElementComponent = ({ field }) => {
   const context = useCustomEditPanelContext()
   return (
-    <FieldContainer iconName='AppsList' label={field.displayName} description={field.description} required={field.required}>
+    <FieldContainer
+      iconName='AppsList'
+      label={field.displayName}
+      description={field.description}
+      required={field.required}
+    >
       <TagPicker
         styles={{ text: styles.field }}
         onResolveSuggestions={async (filter, selectedItems) =>

diff --git a/.../shared-library/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/User.tsx b/.../shared-library/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/User.tsx
@@ -8,7 +8,12 @@ import { FieldElementComponent } from './types'
 export const User: FieldElementComponent = ({ field }) => {
   const context = useCustomEditPanelContext()
   return (
-    <FieldContainer iconName='Person' label={field.displayName} description={field.description} required={field.required}>
+    <FieldContainer
+      iconName='Person'
+      label={field.displayName}
+      description={field.description}
+      required={field.required}
+    >
       <NormalPeoplePicker
         styles={{ text: styles.field }}
         onResolveSuggestions={async (filter, selectedItems) =>

diff --git a/...ed-library/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/UserMulti.tsx b/...ed-library/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/UserMulti.tsx
@@ -8,7 +8,12 @@ import { FieldElementComponent } from './types'
 export const UserMulti: FieldElementComponent = ({ field }) => {
   const context = useCustomEditPanelContext()
   return (
-    <FieldContainer iconName='People' label={field.displayName} description={field.description} required={field.required}>
+    <FieldContainer
+      iconName='People'
+      label={field.displayName}
+      description={field.description}
+      required={field.required}
+    >
       <NormalPeoplePicker
         styles={{ text: styles.field }}
         onResolveSuggestions={async (filter, selectedItems) =>

diff --git a/...ed-library/src/components/CustomEditPanel/CustomEditPanelFooter/CustomEditPanelFooter.tsx b/...ed-library/src/components/CustomEditPanel/CustomEditPanelFooter/CustomEditPanelFooter.tsx
@@ -12,15 +12,16 @@ import { UserMessage } from '../../UserMessage'
 import { useCustomEditPanelContext } from '../context'
 import styles from './CustomEditPanelFooter.module.scss'
 import { customLightTheme } from '../../../util'
+import { ICustomEditPanelFooterProps } from './types'
 
 /**
  * Renders the footer for the `CustomEditPanel` with a `<PrimaryButton />` for saving the changes,
  * and a `<ClosePanelButton />` for closing the panel. Also shows a `<ProgressBar />` when submitting
  * with text based on the `saveProgressText` property from `props.submit`.
  *
- * @param props The component props.
+ * @param props - The props for the component.
  */
-export const CustomEditPanelFooter: FC = () => {
+export const CustomEditPanelFooter: FC<ICustomEditPanelFooterProps> = ({ isSaveDisabled }) => {
   const context = useCustomEditPanelContext()
   const fluentProviderId = useId('fp-custom-edit-panel-footer')
   const [isSaving, setIsSaving] = useState(false)
@@ -52,7 +53,8 @@ export const CustomEditPanelFooter: FC = () => {
             <>
               <Button
                 onClick={handleOnSubmit}
-                disabled={isSaving || context.props.submit.disabled}
+                disabled={isSaving || context.props.submit.disabled || isSaveDisabled}
+                title={isSaveDisabled ? strings.Aria.SaveDisabledTitle : strings.Aria.SaveTitle}
                 appearance='primary'
               >
                 {context.props.submit.text ?? strings.SaveText}

diff --git a/...intFramework/shared-library/src/components/CustomEditPanel/CustomEditPanelFooter/types.ts b/...intFramework/shared-library/src/components/CustomEditPanel/CustomEditPanelFooter/types.ts
@@ -0,0 +1,3 @@
+export interface ICustomEditPanelFooterProps {
+  isSaveDisabled: boolean
+}
diff --git a/SharePointFramework/shared-library/src/components/CustomEditPanel/context.ts b/SharePointFramework/shared-library/src/components/CustomEditPanel/context.ts
@@ -7,6 +7,7 @@ export interface ICustomEditPanelContext {
   model: UseModelReturnType
   fields: EditableSPField[]
   getFieldElement: (field: EditableSPField) => JSX.Element
+  isSaveDisabled: () => boolean
   props: ICustomEditPanelProps
 }
 

diff --git a/SharePointFramework/shared-library/src/components/CustomEditPanel/useCustomEditPanel.tsx b/SharePointFramework/shared-library/src/components/CustomEditPanel/useCustomEditPanel.tsx
@@ -18,5 +18,14 @@ export function useCustomEditPanel(props: ICustomEditPanelProps) {
   const fields = useEditableFields(props)
   const model = useModel(props)
   const getFieldElement = useFieldElements()
-  return { fields, getFieldElement, model, props } as ICustomEditPanelContext
+
+  /**
+   * Save is disabled if required columns are missing values.
+   */
+  const isSaveDisabled = (): boolean => {
+    const requiredFields = fields.filter((field) => field.required)
+    return requiredFields.some((field) => !model.get(field))
+  }
+
+  return { fields, getFieldElement, model, isSaveDisabled, props } as ICustomEditPanelContext
 }
diff --git a/SharePointFramework/shared-library/src/loc/mystrings.d.ts b/SharePointFramework/shared-library/src/loc/mystrings.d.ts
@@ -8,6 +8,8 @@ declare interface ISharedLibraryStrings {
     InfoLabelTitle: string
     MenuOverflowCount: string
     ProjectTitle: string
+    SaveTitle: string
+    SaveDisabledTitle: string
   }
   Placeholder: {
     DatePicker: string

diff --git a/SharePointFramework/shared-library/src/loc/nb-no.js b/SharePointFramework/shared-library/src/loc/nb-no.js
@@ -7,7 +7,9 @@ define([], function () {
     Aria: {
       InfoLabelTitle: 'Informasjon om {0}',
       MenuOverflowCount: '{0} flere elementer',
-      ProjectTitle: 'Logo for prosjekt: {0}'
+      ProjectTitle: 'Logo for prosjekt: {0}',
+      SaveTitle: 'Lagre',
+      SaveDisabledTitle: 'Det er påkrevde felter som ikke er utfylt, fyll ut disse for å lagre',
     },
     Placeholder: {
       DatePicker: 'Angi en dato',