Fix issues with missing data i 'Økonomi' statussection #1419 #1380

SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/ProjectPropertiesSection.module.scss

@@ -1,17 +1,9 @@
-@import '~@fluentui/react/dist/sass/References.scss';
-
-.root {
-
+.projectPropertiesSection {
   .fields {
-    margin: 25px 0 0 0;
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -ms-flex-wrap: wrap;
+    flex-direction: row;
     flex-wrap: wrap;
-    -ms-flex-pack: distribute;
-    justify-content: flex-start;
-    align-content: flex-start;
-    align-items: flex-start;
+    gap: 24px;
+    margin-top: 12px;
   }
 }

SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/ProjectPropertiesSection.tsx

@@ -1,6 +1,5 @@
 import { stringIsNullOrEmpty } from '@pnp/core'
 import React, { FC, useContext } from 'react'
-import { useProjectStatusContext } from '../../../ProjectStatus/context'
 import { StatusElement } from '../../StatusElement'
 import { BaseSection } from '../BaseSection/BaseSection'
 import { SectionContext } from '../context'
@@ -9,7 +8,6 @@ import { StatusSectionField } from './StatusSectionField/StatusSectionField'
 import { useProjectPropertiesSection } from './useProjectPropertiesSection'
 
 export const ProjectPropertiesSection: FC = () => {
-  const context = useProjectStatusContext()
   const { section } = useContext(SectionContext)
   const { fieldValues, fields } = useProjectPropertiesSection()
 
@@ -28,7 +26,6 @@ export const ProjectPropertiesSection: FC = () => {
               key={fieldName}
               label={field.Title}
               value={fieldValues[fieldName]}
-              width={context.props.fieldWidth}
             />
           )
         }
@@ -40,7 +37,7 @@ export const ProjectPropertiesSection: FC = () => {
 
   return (
     <BaseSection>
-      <div className={styles.root}>
+      <div className={styles.projectPropertiesSection}>
         <StatusElement />
         <div className={styles.fields}>{renderFields()}</div>
       </div>

SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/StatusSectionField/StatusSectionField.module.scss

@@ -1,15 +1,11 @@
-.root {
-  padding: 0 18px 18px 0;
-  box-sizing: border-box;
-  .container {
-    .fieldLabel {
-      font-size: 14px;
-      font-weight: 600;
-    }
-    .fieldValue {
-      margin: 10px 0 0 0;
-      font-size: 17px;
-      font-weight: 300;
-    }
+.statusSectionField {
+  .label {
+    font-size: var(--fontWeightRegular);
+    font-weight: 600;
+  }
+  .value {
+    margin-top: 8px;
+    font-size: var(--fontWeightRegular);
+    font-weight: 300;
   }
 }

SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/StatusSectionField/StatusSectionField.tsx

@@ -4,16 +4,11 @@ import styles from './StatusSectionField.module.scss'
 
 export const StatusSectionField: FC<IStatusSectionFieldProps> = (props) => {
   return (
-    <div className={styles.root} style={{ width: props.width || 250 }}>
-      <div className={styles.container}>
-        <div className={styles.fieldLabel}>{props.label}</div>
-        <div className={styles.fieldValue}>{props.value}</div>
-      </div>
+    <div className={styles.statusSectionField}>
+      <div className={styles.label}>{props.label}</div>
+      <div className={styles.value}>{props.value}</div>
     </div>
   )
 }
 
 StatusSectionField.displayName = 'StatusSectionField'
-StatusSectionField.defaultProps = {
-  width: 250
-}

SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/StatusSectionField/types.ts

@@ -8,9 +8,4 @@ export interface IStatusSectionFieldProps {
    * Value for the field
    */
   value: string
-
-  /**
-   * Width for the component
-   */
-  width: number
 }

SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/useProjectPropertiesSection.tsx

@@ -4,8 +4,8 @@ export function useProjectPropertiesSection() {
   const context = useProjectStatusContext()
   return {
     fieldValues: {
-      ...context.state.data.properties.fieldValues,
-      ...context.state.selectedReport.fieldValues
+      ...context.state.data.properties.fieldValues['_fieldValuesAsText'],
+      ...context.state.selectedReport?.fieldValues['_fieldValuesAsText']
     },
     fields: [...context.state.data.properties.fields, ...context.state.data.reportFields]
   }

SharePointFramework/ProjectWebParts/src/components/ProjectStatus/StatusElement/StatusElement.module.scss

@@ -24,7 +24,7 @@
       .value {
         font-size: 18px;
         font-weight: 600;
-        margin-bottom: 5px;
+        margin-bottom: 4px;
       }
     }
   }