Visuelle endringer på Prosjektlistene ++

SharePointFramework/ProjectWebParts/.vscode/launch.sample.json

@@ -2,7 +2,7 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Hosted workbench",
+      "name": "Debug",
       "type": "chrome",
       "request": "launch",
       "url": "https://[tenant].sharepoint.com/sites/[site]/_layouts/15/workbench.aspx",
@@ -19,7 +19,7 @@
       ]
     },
     {
-      "name": "Hosted workbench (incognito)",
+      "name": "Debug in incognito mode",
       "type": "chrome",
       "request": "launch",
       "url": "https://[tenant].sharepoint.com/sites/[site]/_layouts/15/workbench.aspx",
@@ -37,4 +37,4 @@
       ]
     }
   ]
-}
+}

SharePointFramework/ProjectWebParts/config/serve.sample.json

@@ -1,10 +1,6 @@
 {
-  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
   "port": 4321,
   "https": true,
-  "initialPage": "https://localhost:5432/workbench",
-  "api": {
-    "port": 5432,
-    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
-  }
+  "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
 }

SharePointFramework/ProjectWebParts/package.json

@@ -9,7 +9,7 @@
   "license": "MIT",
   "scripts": {
     "watch": "concurrently \"npm run serve\" \"livereload './dist/*.js' -e 'js' -w 250\"",
-    "serve": "concurrently \"gulp serve --locale=nb-no --nobrowser\"",
+    "serve": "concurrently \"gulp serve-deprecated --locale=nb-no --nobrowser\"",
     "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/ProjectTimeline/TimelineList/TimelineList.module.scss

@@ -1,8 +1,4 @@
-@import '~@fluentui/react/dist/sass/References.scss';
-
-.commandBar {
-  margin: 0px auto;
-}
+@import "~@fluentui/react/dist/sass/References.scss";
 
 .timelineList {
   padding: 32px;
@@ -12,4 +8,10 @@
       position: inherit;
     }
   }
+
+  .commandBar {
+    height: 42px;
+    margin: 0px auto;
+    padding-bottom: 16px
+  }
 }

SharePointFramework/ProjectWebParts/src/components/ProjectTimeline/TimelineList/ToolbarItems/useToolbarItems.tsx

@@ -0,0 +1,139 @@
+import { useMemo } from 'react'
+import {
+  AddFilled,
+  AddRegular,
+  bundleIcon,
+  DeleteFilled,
+  DeleteRegular,
+  EditFilled,
+  EditRegular
+} from '@fluentui/react-icons'
+import { IProjectTimelineProps, IProjectTimelineState } from 'components/ProjectTimeline/types'
+import { ListMenuItem } from 'pp365-shared-library'
+import strings from 'ProjectWebPartsStrings'
+import SPDataAdapter from 'data/SPDataAdapter'
+import { Logger, LogLevel } from '@pnp/logging'
+
+/**
+ * Object containing icons used in the toolbar.
+ */
+const Icons = {
+  Add: bundleIcon(AddFilled, AddRegular),
+  Edit: bundleIcon(EditFilled, EditRegular),
+  Delete: bundleIcon(DeleteFilled, DeleteRegular)
+}
+
+/**
+ * Returns an array of menu items for the toolbar in the PortfolioOverview component.
+ *
+ * @param context - The IPortfolioOverviewContext object containing the necessary data for generating the toolbar items.
+ *
+ * @returns An array of IListMenuItem objects representing the toolbar items.
+ */
+export function useToolbarItems(
+  props: IProjectTimelineProps,
+  setState: (newState: Partial<IProjectTimelineState>) => void,
+  selectedItems: any[]
+) {
+  /**
+   * Create new timeline item and send the user to the edit form.
+   */
+  const redirectNewTimelineItem = async () => {
+    const [project] = await SPDataAdapter.portal.web.lists
+      .getByTitle(strings.ProjectsListName)
+      .items.select('Id')
+      .filter(`GtSiteId eq '${props.siteId}'`)()
+
+    const properties: Record<string, any> = {
+      Title: strings.NewItemLabel,
+      GtSiteIdLookupId: project.Id
+    }
+
+    Logger.log({
+      message: '(TimelineItem) _redirectNewTimelineItem: Created new timeline item',
+      data: { fieldValues: properties },
+      level: LogLevel.Info
+    })
+
+    const itemId = await addTimelineItem(properties)
+    document.location.hash = ''
+    document.location.href = editFormUrl(itemId)
+  }
+
+  /**
+   * Add timeline item
+   *
+   * @param properties Properties
+   */
+  const addTimelineItem = async (properties: Record<string, any>): Promise<any> => {
+    const list = SPDataAdapter.portal.web.lists.getByTitle(strings.TimelineContentListName)
+    const itemAddResult = await list.items.add(properties)
+    return itemAddResult.data
+  }
+
+  /**
+   * Delete timelineitem
+   *
+   * @param item Item
+   */
+  const deleteTimelineItem = async (items: any) => {
+    const list = SPDataAdapter.portal.web.lists.getByTitle(strings.TimelineContentListName)
+
+    await items.forEach(async (item: any) => {
+      await list.items.getById(item.Id).delete()
+    })
+
+    setState({
+      refetch: new Date().getTime()
+    })
+  }
+
+  /**
+   * Edit form URL with added Source parameter generated from the item ID
+   *
+   * @param item Item
+   */
+  const editFormUrl = (item: any) => {
+    return [
+      `${SPDataAdapter.portal.url}`,
+      `/Lists/${strings.TimelineContentListName}/EditForm.aspx`,
+      '?ID=',
+      item.Id,
+      '&Source=',
+      encodeURIComponent(window.location.href)
+    ].join('')
+  }
+
+  const menuItems = useMemo<ListMenuItem[]>(
+    () =>
+      [
+        new ListMenuItem(strings.NewItemLabel, strings.NewItemLabel)
+          .setIcon(Icons.Add)
+          .setOnClick(() => {
+            redirectNewTimelineItem()
+          }),
+        new ListMenuItem(strings.EditItemLabel, strings.EditItemLabel)
+          .setIcon(Icons.Edit)
+          .setDisabled(selectedItems.length !== 1)
+          .setOnClick(() => {
+            window.open(selectedItems[0]?.EditFormUrl, '_self')
+          })
+      ].filter(Boolean),
+    [props, selectedItems]
+  )
+
+  const farMenuItems = useMemo<ListMenuItem[]>(
+    () =>
+      [
+        new ListMenuItem(strings.DeleteItemLabel, strings.DeleteItemLabel)
+          .setIcon(Icons.Delete)
+          .setDisabled(selectedItems.length === 0)
+          .setOnClick(() => {
+            deleteTimelineItem(selectedItems)
+          })
+      ].filter(Boolean),
+    [props, selectedItems]
+  )
+
+  return { menuItems, farMenuItems }
+}

SharePointFramework/ProjectWebParts/src/components/ProjectTimeline/TimelineList/index.tsx

@@ -1,31 +1,61 @@
-import { CommandBar, DetailsList, DetailsListLayoutMode, SelectionMode } from '@fluentui/react'
-import React, { FC, useContext } from 'react'
-import { ProjectTimelineContext } from '../context'
+import {
+  DataGrid,
+  DataGridBody,
+  DataGridCell,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridRow,
+  FluentProvider,
+  webLightTheme
+} from '@fluentui/react-components'
+import * as React from 'react'
+import { FC, useContext } from 'react'
 import styles from './TimelineList.module.scss'
 import { useTimelineList } from './useTimelineList'
+import { ProjectTimelineContext } from '../context'
+import { Toolbar } from 'pp365-shared-library'
 
 export const TimelineList: FC = () => {
   const context = useContext(ProjectTimelineContext)
-  const { getCommandBarProps, onRenderItemColumn, selection, onColumnHeaderClick } =
+  const { columns, menuItems, farMenuItems, columnSizingOptions, defaultSortState, onSelection } =
     useTimelineList()
+
   return (
-    <>
-      <div className={styles.timelineList}>
-        {context.props.showTimelineListCommands && (
-          <div className={styles.commandBar}>
-            <CommandBar {...getCommandBarProps()} />
+    <FluentProvider theme={webLightTheme} className={styles.timelineList}>
+      {context.props.showTimelineListCommands && (
+        <div className={styles.commandBar}>
+          <div>
+            <Toolbar items={menuItems} farItems={farMenuItems} />
           </div>
-        )}
-        <DetailsList
-          columns={context.state.data.listColumns}
-          items={context.state.data.listItems}
-          onRenderItemColumn={onRenderItemColumn}
-          selection={selection}
-          selectionMode={SelectionMode.single}
-          layoutMode={DetailsListLayoutMode.justified}
-          onColumnHeaderClick={onColumnHeaderClick}
-        />
-      </div>
-    </>
+        </div>
+      )}
+      <DataGrid
+        items={context.state.data.listItems}
+        columns={columns}
+        sortable
+        defaultSortState={defaultSortState}
+        selectionMode='multiselect'
+        resizableColumns
+        columnSizingOptions={columnSizingOptions}
+        containerWidthOffset={0}
+        onSelectionChange={onSelection}
+        subtleSelection
+      >
+        <DataGridHeader>
+          <DataGridRow>
+            {({ renderHeaderCell }) => (
+              <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
+            )}
+          </DataGridRow>
+        </DataGridHeader>
+        <DataGridBody>
+          {({ item, rowId }) => (
+            <DataGridRow key={rowId}>
+              {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+            </DataGridRow>
+          )}
+        </DataGridBody>
+      </DataGrid>
+    </FluentProvider>
   )
 }

SharePointFramework/ProjectWebParts/src/components/ProjectTimeline/TimelineList/useColumns.tsx

@@ -0,0 +1,100 @@
+import { Persona, TableCellLayout, TableColumnDefinition } from '@fluentui/react-components'
+import React, { useContext } from 'react'
+import { ProjectTimelineContext } from '../context'
+import { get } from '@microsoft/sp-lodash-subset'
+import { tryParseCurrency } from 'pp365-shared-library/lib/util/tryParseCurrency'
+import moment from 'moment'
+import { stringIsNullOrEmpty } from '@pnp/core'
+import { getUserPhoto } from 'pp365-shared-library'
+
+export interface IListColumn extends TableColumnDefinition<any> {
+  minWidth?: number
+  defaultWidth?: number
+}
+
+export const useColumns = (): IListColumn[] => {
+  const context = useContext(ProjectTimelineContext)
+
+  const renderPersona = (item) => {
+    return (
+      <Persona
+        {...item}
+        title={item.Title}
+        name={item.Title}
+        size='small'
+        avatar={{
+          image: {
+            src: getUserPhoto(item.EMail)
+          }
+        }}
+        style={{ marginTop: 6 }}
+      />
+    )
+  }
+
+  return context.state?.data?.listColumns.map((column) => {
+    if (!column.fieldName) return null
+
+    return {
+      columnId: column.fieldName,
+      defaultWidth: column.maxWidth,
+      minWidth: column.minWidth,
+      compare: (a, b) => {
+        switch (column?.data?.type.toLowerCase()) {
+          case 'number':
+          case 'counter':
+          case 'currency':
+            return a[column.fieldName] - b[column.fieldName]
+          case 'user':
+          case 'lookup':
+            return (a[column.fieldName]?.Title ?? '').localeCompare(
+              b[column.fieldName]?.Title ?? ''
+            )
+          case 'date':
+          case 'datetime':
+            return new Date(a[column.fieldName]).getTime() - new Date(b[column.fieldName]).getTime()
+          default:
+            return (a[column.fieldName] ?? '').localeCompare(b[column.fieldName] ?? '')
+        }
+      },
+      renderHeaderCell: () => {
+        return column.name
+      },
+      renderCell: (item) => {
+        const value = get(item, column.fieldName, null)
+        let cellValue
+
+        if (!stringIsNullOrEmpty(value)) {
+          switch (column?.data?.type.toLowerCase()) {
+            case 'counter':
+            case 'number':
+              cellValue = parseInt(value)
+              break
+            case 'date':
+            case 'datetime':
+              cellValue = moment(value).format('DD.MM.YYYY')
+              break
+            case 'currency':
+              cellValue = tryParseCurrency(value)
+              break
+            case 'user':
+              cellValue = renderPersona(value)
+              break
+            case 'lookup':
+              cellValue = value.Title
+              break
+            default:
+              cellValue = value
+              break
+          }
+        }
+
+        return (
+          <TableCellLayout truncate title={cellValue}>
+            <>{cellValue}</>
+          </TableCellLayout>
+        )
+      }
+    }
+  })
+}