Prosjektstatus forbedringer (#1585)

* Add various fixes and adjustments to ProjectStatus

* Changelog

.github/workflows/ci-releases.yml

@@ -4,15 +4,14 @@ on:
   push:
     branches:
       - releases/1.10
-      - feat/instrument
     paths:
-      - "SharePointFramework/**"
-      - "Install/**"
-      - "Templates/**"
+      - 'SharePointFramework/**'
+      - 'Install/**'
+      - 'Templates/**'
       - .github/workflows/ci-releases.yml
 
 env:
-  SP_URL: "https://puzzlepart.sharepoint.com/sites/pp365"
+  SP_URL: 'https://puzzlepart.sharepoint.com/sites/pp365'
   CI_CERT_BASE64: ${{ secrets.CI_CERT_BASE64 }}
   CI_TENANT: ${{ secrets.CI_TENANT }}
   CI_CLIENT_ID: ${{ secrets.CI_CLIENT_ID }}

CHANGELOG.md

@@ -13,6 +13,7 @@ Sjekk ut [release notes](./releasenotes/1.10.0.md) for høydepunkter og mer deta
 ### Forbedringer
 
 - Mulighetsmatrise har fått samme tilpasningsmuligheter som Risikomatrise, inkluderer overstyring av farger og konfigurasjon
+- Forbedret prosjektstatus siden slik at det er tydeligere hva som er publisert og når. Samt bedre indikasjon på kladd. I tillegg er det gjort en rekke forbedringer på opprettelse, publisering og redigering av prosjektstatus, slik at man unngår å måtte laste inn side på nytt for å se endringer alle elementer på siden. [#1574](https://github.com/Puzzlepart/prosjektportalen365/issues/1574)
 
 ### Feilrettinger
 

SharePointFramework/ProjectWebParts/package.json

@@ -11,7 +11,7 @@
     "watch": "concurrently \"npm run serve\" \"livereload './dist/*.js' -e 'js' -w 250\"",
     "prewatch": "node node_modules/pzl-spfx-tasks --pre-watch --loglevel silent",
     "postwatch": "node node_modules/pzl-spfx-tasks --post-watch --loglevel silent",
-    "serve": "concurrently \"gulp serve-deprecated --locale=nb-no --nobrowser\"",
+    "serve": "concurrently \"gulp serve-deprecated --locale=nb-no --nobrowser  NODE --max-old-space-size=8192\"",
     "build": "gulp bundle --ship && gulp package-solution --ship",
     "postversion": "tsc && npm publish",
     "lint": "eslint --ext .ts,.tsx ./src --color --fix --config ../.eslintrc.yaml && npm run prettier",

SharePointFramework/ProjectWebParts/src/components/ProjectInformation/ProjectInformation.tsx

@@ -46,7 +46,7 @@ export const ProjectInformation: FC<IProjectInformationProps> = (props) => {
   return (
     <ProjectInformationContextProvider value={context}>
       <Fluent transparent>
-        <WebPartTitle title={props.title} />
+        {props.title && <WebPartTitle title={props.title} />}
         <div className={styles.container}>
           {context.state.error && (
             <UserMessage

SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Commands/usePublishReport.ts

@@ -6,7 +6,8 @@ import {
   CLEAR_USER_MESSAGE,
   REPORT_PUBLISHED,
   REPORT_PUBLISHING,
-  REPORT_PUBLISH_ERROR
+  REPORT_PUBLISH_ERROR,
+  SELECT_REPORT
 } from '../reducer'
 import { useCaptureReportSnapshot } from './useCaptureReportSnapshot'
 
@@ -47,6 +48,7 @@ export function usePublishReport() {
           strings.GtModerationStatus_Choice_Published
         )
         context.dispatch(REPORT_PUBLISHED({ updatedReport, message: null }))
+        context.dispatch(SELECT_REPORT({ report: updatedReport }))
       } catch (error) {
         context.dispatch(
           REPORT_PUBLISH_ERROR({ message: { text: error.message, intent: 'error' } })

SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Commands/useToolbarItems.tsx

@@ -1,4 +1,10 @@
-import { CheckboxCheckedFilled, CheckboxCheckedRegular, bundleIcon } from '@fluentui/react-icons'
+import {
+  CheckboxCheckedFilled,
+  CheckboxCheckedRegular,
+  DraftsFilled,
+  DraftsRegular,
+  bundleIcon
+} from '@fluentui/react-icons'
 import strings from 'ProjectWebPartsStrings'
 import { ListMenuItem } from 'pp365-shared-library'
 import { formatDate } from 'pp365-shared-library/lib/util/formatDate'
@@ -98,7 +104,7 @@ export function useToolbarItems() {
             }),
         new ListMenuItem(
           state.selectedReport
-            ? formatDate(state.selectedReport.created)
+            ? formatDate(state.selectedReport.publishedDate ?? state.selectedReport.modified)
             : strings.NoReportsFoundTitle
         )
           .setIcon('History')
@@ -107,13 +113,15 @@ export function useToolbarItems() {
           .setDisabled(state.data.reports.length < 2)
           .setItems(
             state.data.reports.map((report) =>
-              new ListMenuItem(formatDate(report.created, true), null)
+              new ListMenuItem(formatDate(report.publishedDate ?? report.modified, true), null)
                 .setIcon(
-                  report.published ? bundleIcon(CheckboxCheckedFilled, CheckboxCheckedRegular) : ''
+                  report.published
+                    ? bundleIcon(CheckboxCheckedFilled, CheckboxCheckedRegular)
+                    : bundleIcon(DraftsFilled, DraftsRegular)
                 )
                 .makeCheckable({
                   name: 'report',
-                  value: formatDate(report.created, true)
+                  value: formatDate(report.publishedDate ?? report.modified, true)
                 })
                 .setOnClick(() => {
                   SPDataAdapter.portalDataService
@@ -123,7 +131,14 @@ export function useToolbarItems() {
                     })
                 })
             ),
-            { report: [formatDate(state.selectedReport?.created, true)] }
+            {
+              report: [
+                formatDate(
+                  state.selectedReport?.publishedDate ?? state.selectedReport?.modified,
+                  true
+                )
+              ]
+            }
           ),
         state.selectedReport &&
           new ListMenuItem(

SharePointFramework/ProjectWebParts/src/components/ProjectStatus/EditStatusPanel/EditProjectStatusPanel.tsx

@@ -21,6 +21,7 @@ export const EditStatusPanel: FC = () => {
       dataAdapter={SPDataAdapter}
       submit={submit}
       hiddenFields={['Title']}
+      onLightDismissClick={onDismiss}
       onDismiss={onDismiss}
     />
   )

SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Header/useHeader.ts

@@ -1,6 +1,4 @@
-import moment from 'moment'
 import { useProjectStatusContext } from '../context'
-import { format } from '@fluentui/react'
 import strings from 'ProjectWebPartsStrings'
 
 /**
@@ -10,13 +8,7 @@ import strings from 'ProjectWebPartsStrings'
  */
 export function useHeader() {
   const context = useProjectStatusContext()
-  const formattedDate = context.state.selectedReport
-    ? moment(
-        context.state.selectedReport.publishedDate ?? context.state.selectedReport.created
-      ).format('DD.MM.YYYY')
-    : null
-
   const title = strings.ProjectInformationStatusReportHeaderText
-  const description = format(strings.ProjectInformationStatusReportHeaderDescription, formattedDate)
+  const description = context.state?.reportStatus
   return { title, description }
 }

SharePointFramework/ProjectWebParts/src/components/ProjectStatus/PublishedStatus/PublishedStatus.tsx

@@ -1,28 +1,20 @@
-import strings from 'ProjectWebPartsStrings'
 import { WebPartTitle } from 'pp365-shared-library'
 import React, { FC } from 'react'
 import { useProjectStatusContext } from '../context'
 import styles from '../ProjectStatus.module.scss'
 import { CheckmarkSquare24Filled } from '@fluentui/react-icons'
-import { Shimmer } from '@fluentui/react'
 
 export const PublishedStatus: FC = () => {
-  const { state } = useProjectStatusContext()
+  const context = useProjectStatusContext()
 
   return (
-    <Shimmer isDataLoaded={state.isDataLoaded}>
-      {state.selectedReport?.published ? (
-        <div className={styles.publishedStatus}>
-          <div className={styles.publishedStatusIcon}>
-            <CheckmarkSquare24Filled />
-          </div>
-          <WebPartTitle title={strings.PublishedStatusReport} />
-        </div>
-      ) : (
-        <div className={styles.publishedStatus}>
-          <WebPartTitle title={strings.NotPublishedStatusReport} />
+    <div className={styles.publishedStatus}>
+      {context.state.selectedReport?.published && (
+        <div className={styles.publishedStatusIcon}>
+          <CheckmarkSquare24Filled />
         </div>
       )}
-    </Shimmer>
+      <WebPartTitle title={context.state.reportStatus} />
+    </div>
   )
 }

SharePointFramework/ProjectWebParts/src/components/ProjectStatus/reducer.ts

@@ -3,8 +3,10 @@ import { createAction, createReducer } from '@reduxjs/toolkit'
 import _ from 'lodash'
 import { IUserMessageProps } from 'pp365-shared-library/lib/components/UserMessage/types'
 import { SectionModel, StatusReport } from 'pp365-shared-library/lib/models'
-import { getUrlParam } from 'pp365-shared-library/lib/util'
+import { formatDate, getUrlParam } from 'pp365-shared-library/lib/util'
 import { FetchDataResult, IProjectStatusState } from './types'
+import strings from 'ProjectWebPartsStrings'
+import { format } from '@fluentui/react'
 
 /**
  * `INIT_DATA`: Dispatched by `useProjectStatusDataFetch` when data is loaded
@@ -69,6 +71,11 @@ export const OPEN_PANEL = createAction<IProjectStatusState['activePanel']>('OPEN
  */
 export const CLOSE_PANEL = createAction('CLOSE_PANEL')
 
+/**
+ * `REFETCH_DATA`: Dispatched by ...
+ */
+export const REFETCH_DATA = createAction('REFETCH_DATA')
+
 /**
  * The initial state for the project status reducer.
  */
@@ -79,7 +86,8 @@ export const initialState: IProjectStatusState = {
     columnConfig: [],
     reportFields: []
   },
-  persistedSectionData: {}
+  persistedSectionData: {},
+  refetch: new Date().getTime()
 }
 
 /**
@@ -98,6 +106,18 @@ const createProjectStatusReducer = createReducer(initialState, {
     state.mostRecentReportId = _.first(payload.data.reports)?.id ?? 0
     state.userHasAdminPermission = payload.data.userHasAdminPermission
     state.isDataLoaded = true
+
+    if (payload.initialSelectedReport.published) {
+      state.reportStatus = format(
+        strings.PublishedStatusReport,
+        formatDate(payload.initialSelectedReport?.publishedDate)
+      )
+    } else {
+      state.reportStatus = format(
+        strings.NotPublishedStatusReport,
+        formatDate(payload.initialSelectedReport?.modified)
+      )
+    }
   },
   [REPORT_PUBLISHING.type]: (state: IProjectStatusState) => {
     state.isPublishing = true
@@ -112,6 +132,7 @@ const createProjectStatusReducer = createReducer(initialState, {
     state.data = { ...state.data, reports }
     state.selectedReport = payload.updatedReport
     state.userMessage = payload.message
+    state.refetch = new Date().getTime()
     state.isPublishing = false
   },
   REPORT_PUBLISH_ERROR: (
@@ -127,6 +148,11 @@ const createProjectStatusReducer = createReducer(initialState, {
     state.selectedReport = _.first(reports)
     state.sourceUrl = decodeURIComponent(getUrlParam('Source') ?? '')
     state.mostRecentReportId = state.selectedReport?.id ?? 0
+    state.refetch = new Date().getTime()
+    state.reportStatus = format(
+      strings.PublishedStatusReport,
+      formatDate(state.selectedReport?.publishedDate)
+    )
   },
   [REPORT_DELETE_ERROR.type]: (
     state: IProjectStatusState,
@@ -143,6 +169,18 @@ const createProjectStatusReducer = createReducer(initialState, {
     )
     state.selectedReport = payload.report
     state.isDataLoaded = true
+
+    if (payload.report.published) {
+      state.reportStatus = format(
+        strings.PublishedStatusReport,
+        formatDate(payload.report?.publishedDate)
+      )
+    } else {
+      state.reportStatus = format(
+        strings.NotPublishedStatusReport,
+        formatDate(payload.report?.modified)
+      )
+    }
   },
   [PERSIST_SECTION_DATA.type]: (
     state: IProjectStatusState,
@@ -161,6 +199,10 @@ const createProjectStatusReducer = createReducer(initialState, {
   },
   [CLOSE_PANEL.type]: (state: IProjectStatusState) => {
     state.activePanel = null
+    state.refetch = new Date().getTime()
+  },
+  [REFETCH_DATA.type]: (state: IProjectStatusState) => {
+    state.refetch = new Date().getTime()
   }
 })
 

SharePointFramework/ProjectWebParts/src/components/ProjectStatus/types.ts

@@ -90,6 +90,17 @@ export interface IProjectStatusState extends IBaseWebPartComponentState<IProject
    * The active panel name and optional title
    */
   activePanel?: { name: string; headerText?: string }
+
+  /**
+   * The status for the report (currently selected)
+   */
+  reportStatus?: string
+
+  /**
+   * Timestamp for refetch. Changing this state variable refetches the data in
+   * `useProjectStatusDataFetch`.
+   */
+  refetch?: number
 }
 
 export interface IProjectStatusData {

SharePointFramework/ProjectWebParts/src/components/ProjectStatus/useProjectStatus.ts

@@ -11,7 +11,7 @@ import { useProjectStatusDataFetch } from './useProjectStatusDataFetch'
 export function useProjectStatus(props: IProjectStatusProps) {
   const [state, dispatch] = useReducer(reducer, initialState)
 
-  useProjectStatusDataFetch(props, dispatch)
+  useProjectStatusDataFetch(props, state.refetch, dispatch)
 
   const context: IProjectStatusContext = {
     props,

SharePointFramework/ProjectWebParts/src/components/ProjectStatus/useProjectStatusDataFetch.ts

@@ -110,13 +110,15 @@ const fetchData: DataFetchFunction<IProjectStatusProps, FetchDataResult> = async
  * `useEffect` with an empty dependency array.
  *
  * @param props Component properties for `ProjectStatus`
+ * @param refetch Timestamp for refetch. Changes to this variable refetches the data in `useEffect`
  * @param dispatch Dispatcer
  */
 export const useProjectStatusDataFetch = (
   props: IProjectStatusProps,
+  refetch: number,
   dispatch: React.Dispatch<AnyAction>
 ) => {
   useEffect(() => {
     fetchData(props).then((data) => dispatch(INIT_DATA(data)))
-  }, [])
+  }, [refetch])
 }

SharePointFramework/ProjectWebParts/src/loc/nb-no.js

@@ -148,7 +148,7 @@ define([], function () {
     NoPropertiesMessage: 'Det finnes ingen informasjon om prosjektet. Trykk på _Rediger prosjektinformasjon_ for å fortsette.',
     NoReportsFoundTitle: 'Ingen rapporter funnet',
     NoStatusReportsMessage: 'Det er ennå ikke rapportert status for prosjektet. Hvis du er eier av området, kan du rapportere status ved å klikke på _Ny statusrapport_ i menyen over.',
-    NotPublishedStatusReport: 'Ikke publisert',
+    NotPublishedStatusReport: 'Kladd, sist endret {0}',
     OpportunityMatrixGroupName: 'Mulighetsmatrise',
     OverrideHeadersLabel: 'Overstyr overskrifter for {0}x{0}',
     ParentProjectsGroupName: 'Overordnede prosjekter',
@@ -171,7 +171,7 @@ define([], function () {
     ProjectDeliveriesGroupName: 'Prosjektleveranser (beta)',
     ProjectInformationDataFetchErrorText: 'En feil oppsto under henting av prosjektinformasjon.',
     ProjectInformationStatusReportHeaderText: 'Statusrapport',
-    ProjectInformationStatusReportHeaderDescription: 'Publisert {0}',
+    ProjectInformationStatusReportHeaderDescription: 'Publisert ({0})',
     ProjectLabel: 'Prosjekt',
     ProjectPhasesChangePhaseError: 'En feil oppsto under endring av fase. Vennligst prøv igjen eller kontakt en administrator.',
     ProjectPhasesFetchDataError: 'Du har ikke tilgang til å se denne webdelen.<br/><br/>Du må enten ha tilgang til porteføljeområdet, eller så må prosjektet være fristilt fra porteføljeområdet.',
@@ -186,7 +186,7 @@ define([], function () {
     ProjecttimelineGroupName: 'Prosjekttidslinje',
     ProjectTimelineItemInfo: '{0} - prosjektets tidsforløp',
     ProjectTimelineListInfoText: 'Her listes listeelementene for prosjektet. Her kan du redigere og legge til nye elementer. Dette vil synkroniseres til listen på hubområdet. For å zoome inn/ut i tidslinje: ALT+Musehjul',
-    PublishedStatusReport: 'Publisert',
+    PublishedStatusReport: 'Publisert ({0})',
     PublishReportButtonLabel: 'Publiser',
     PublishReportButtonDescription: 'Publiserer den valgte statusrapporten.',
     PublishReportButtonDescriptionNoPermission: 'Du har ikke tilgang til å publisere denne statusrapporten.',