Visuell oppgradering av prosjektutlistingswebdel - Listevisning

CHANGELOG.md

@@ -8,6 +8,7 @@ Sjekk ut [release notes](./releasenotes/1.9.0.md) for høydepunkter og mer detal
 I denne versjonen er det gjort flere endringer på det visuelle uttrykket til Prosjektportalen, flere av komponentene er blitt oppdatert og fått nytt utseende og tilpasningsmuligheter. Sjekk ut [release notes](./releasenotes/1.9.0.md) for oversikt. Noen av de mest omfattende er:
 
 - #### Prosjektutlisting (forsiden av Prosjektportalen)
+  - Flis og listevisning
 
 ### Ny funksjonalitet
 

SharePointFramework/PortfolioWebParts/src/components/ProjectList/List/List.module.scss

@@ -0,0 +1,45 @@
+@import "~@fluentui/react/dist/sass/References.scss";
+
+a {
+  color: var(--colorBrandForegroundLink);
+  outline: none;
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--colorBrandForegroundLinkHover);
+  text-decoration: underline;
+}
+
+.list {
+  width: 996px;
+
+  div:first-child {
+    max-width: inherit;
+  }
+
+  .logo {
+    width: 48px;
+    height: 48px;
+
+    .projectAvatar {
+      height: 80%;
+      width: 80%;
+      object-fit: cover;
+      border-radius: var(--borderRadiusMedium);
+      margin: 5px;
+    }
+
+    img {
+      height: 80%;
+      width: 80%;
+      object-fit: cover;
+      border-radius: var(--borderRadiusMedium);
+      margin: 5px;
+    }
+  }
+
+  .avatar:hover {
+    filter: brightness(0.9);
+  }
+}

SharePointFramework/PortfolioWebParts/src/components/ProjectList/List/context.ts

@@ -0,0 +1,17 @@
+import { createContext } from 'react'
+import { IProjectListProps } from '../types'
+import { ProjectListModel } from 'pp365-shared-library/lib/models'
+
+export interface IListContext extends IProjectListProps {
+  /**
+   * Projects
+   */
+  projects?: ProjectListModel[]
+
+  /**
+   * Size that determines the list appearance
+   */
+  size?: 'extra-small' | 'small' | 'medium'
+}
+
+export const ListContext = createContext<IListContext>(null)

SharePointFramework/PortfolioWebParts/src/components/ProjectList/List/index.tsx

@@ -0,0 +1,231 @@
+import * as React from 'react'
+import {
+  DataGridBody,
+  DataGridRow,
+  DataGrid,
+  DataGridProps,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridCell,
+  TableColumnDefinition,
+  TableCellLayout,
+  Avatar,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  MenuPopover,
+  MenuTrigger,
+  Tooltip,
+  Link
+} from '@fluentui/react-components'
+import { useContext } from 'react'
+import { ListContext } from './context'
+import { ProjectListModel } from 'pp365-shared-library/lib/models'
+import styles from './List.module.scss'
+import { CalendarMonthRegular } from '@fluentui/react-icons'
+
+export const List = () => {
+  const context = useContext(ListContext)
+  const refMap = React.useRef<Record<string, HTMLElement | null>>({})
+
+  const columns: TableColumnDefinition<ProjectListModel>[] = context.columns.map((col) => {
+    switch (col.fieldName) {
+      case 'logo':
+        return {
+          columnId: col.fieldName,
+          compare: () => {
+            return
+          },
+          renderHeaderCell: () => {
+            return
+          },
+          renderCell: (item) => {
+            const [showCustomImage, setShowCustomImage] = React.useState(true)
+
+            return (
+              <div
+                className={styles.logo}
+                style={{ height: context.size !== 'medium' ? '32px' : '48px' }}
+              >
+                <Avatar
+                  className={styles.projectAvatar}
+                  aria-label={`Logo for project: ${item.title}'`}
+                  title={`Logo for project: ${item.title}'`}
+                  color={'colorful'}
+                  shape={'square'}
+                  style={{ display: showCustomImage ? 'none' : 'block' }}
+                  name={item.title?.slice(-2).toUpperCase()}
+                  initials={item.title?.slice(0, 2).toUpperCase()}
+                />
+                <img
+                  src={item.logo ?? `${item.url}/_api/siteiconmanager/getsitelogo?type='1'`}
+                  style={{
+                    display: !showCustomImage ? 'none' : 'block'
+                  }}
+                  alt={`Logo for project: ${item.title}'`}
+                  onLoad={(image) => {
+                    setShowCustomImage(
+                      (image.target as HTMLImageElement).naturalHeight !== 648
+                        ? (image.target as HTMLImageElement).naturalHeight !== 96
+                          ? true
+                          : false
+                        : false
+                    )
+                  }}
+                />
+              </div>
+            )
+          }
+        }
+      case 'owner':
+      case 'manager':
+        return {
+          columnId: col.fieldName,
+          compare: (a, b) => {
+            return (a[col.fieldName]?.name || '').localeCompare(b[col.fieldName]?.name || '')
+          },
+          renderHeaderCell: () => {
+            return col.name
+          },
+          renderCell: (item) => {
+            return (
+              <TableCellLayout truncate>
+                <Avatar
+                  className={styles.avatar}
+                  size={context.size !== 'medium' ? 24 : 32}
+                  {...item[col.fieldName]}
+                />{' '}
+                {item[col.fieldName]?.name}
+              </TableCellLayout>
+            )
+          }
+        }
+      case 'title':
+        return {
+          columnId: col.fieldName,
+          compare: (a, b) => {
+            return (a[col.fieldName] || '').localeCompare(b[col.fieldName] || '')
+          },
+          renderHeaderCell: () => {
+            return col.name
+          },
+          renderCell: (item) => {
+            return (
+              <TableCellLayout truncate>
+                {item.hasUserAccess ? (
+                  <a href={item.url} target={'_blank'} rel='noreferrer'>
+                    {item[col.fieldName]}
+                  </a>
+                ) : (
+                  <>{item[col.fieldName]}</>
+                )}
+              </TableCellLayout>
+            )
+          }
+        }
+      case 'action':
+        return {
+          columnId: 'actions',
+          compare: () => {
+            return
+          },
+          renderHeaderCell: () => {
+            return ''
+          },
+          renderCell: (item) => {
+            return (
+              <Menu>
+                <MenuTrigger disableButtonEnhancement>
+                  <Tooltip content={'Hurtigmeny for prosjekt'} relationship={'label'}>
+                    <MenuButton
+                      icon={<CalendarMonthRegular />}
+                      size={context.size !== 'medium' ? 'small' : 'medium'}
+                    />
+                  </Tooltip>
+                </MenuTrigger>
+                <MenuPopover>
+                  <MenuList>
+                    <MenuItem>
+                      <Link href={`${item.url}/SitePages/Prosjektstatus.aspx`}>Prosjektstatus</Link>
+                    </MenuItem>
+                    <MenuItem>
+                      <Link href={`${item.url}/Delte%20dokumenter`}>Dokumentbibliotek</Link>
+                    </MenuItem>
+                    <MenuItem>
+                      <Link href={`${item.url}/Lists/Fasesjekkliste`}>Fasesjekkliste</Link>
+                    </MenuItem>
+                    <MenuItem>
+                      <Link href={`${item.url}/SitePages/Oppgaver.aspx`}>Oppgaver</Link>
+                    </MenuItem>
+                  </MenuList>
+                </MenuPopover>
+              </Menu>
+            )
+          }
+        }
+      default:
+        return {
+          columnId: col.fieldName,
+          compare: (a, b) => {
+            return (a[col.fieldName] || '').localeCompare(b[col.fieldName] || '')
+          },
+          renderHeaderCell: () => {
+            return col.name
+          },
+          renderCell: (item) => {
+            return <TableCellLayout truncate>{item[col.fieldName] || ''}</TableCellLayout>
+          }
+        }
+    }
+  })
+
+  const columnSizingOptions = context.columns.reduce(
+    (options, col) => (
+      (options[col.fieldName] = {
+        minWidth: col.minWidth,
+        defaultWidth: 120,
+        idealWidth: col.idealWidth
+      }),
+      options
+    ),
+    {}
+  )
+
+  const defaultSortState = React.useMemo<Parameters<NonNullable<DataGridProps['onSortChange']>>[1]>(
+    () => ({ sortColumn: 'title', sortDirection: 'ascending' }),
+    []
+  )
+
+  return (
+    <div className={styles.list}>
+      <DataGrid
+        items={context.projects}
+        columns={columns}
+        sortable
+        defaultSortState={defaultSortState}
+        resizableColumns
+        columnSizingOptions={columnSizingOptions}
+        containerWidthOffset={0}
+        size={context.size}
+      >
+        <DataGridHeader>
+          <DataGridRow>
+            {({ renderHeaderCell, columnId }) => (
+              <DataGridHeaderCell ref={(el) => (refMap.current[columnId] = el)}>
+                {renderHeaderCell()}
+              </DataGridHeaderCell>
+            )}
+          </DataGridRow>
+        </DataGridHeader>
+        <DataGridBody<ProjectListModel>>
+          {({ item, rowId }) => (
+            <DataGridRow<ProjectListModel> key={rowId}>
+              {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+            </DataGridRow>
+          )}
+        </DataGridBody>
+      </DataGrid>
+    </div>
+  )
+}

SharePointFramework/PortfolioWebParts/src/components/ProjectList/ProjectCard/ProjectCardHeader/index.tsx

@@ -9,13 +9,14 @@ export const ProjectCardHeader: FC<IProjectCardHeaderProps> = (props) => {
   const { project, useDynamicColors, showProjectLogo, showProjectPhase } =
     useContext(ProjectCardContext)
   const [showCustomImage, setShowCustomImage] = React.useState(true)
-  let colors = { colors: ['black', 'black'] }
 
-  if (useDynamicColors && showProjectLogo)
-    colors = useImageColor(
-      project.logo ?? `${project.url}/_api/siteiconmanager/getsitelogo?type='1'`,
-      { cors: true, colors: 2, windowSize: 5 }
-    ).colors
+  const imageColorData = useImageColor(
+    project.logo ?? `${project.url}/_api/siteiconmanager/getsitelogo?type='1'`,
+    { cors: true, colors: 2, windowSize: 5 }
+  )
+
+  const colors =
+    useDynamicColors && showProjectLogo ? imageColorData.colors : ['transparent', 'transparent']
 
   return (
     <>
@@ -79,7 +80,9 @@ export const ProjectCardHeader: FC<IProjectCardHeaderProps> = (props) => {
                   props.onImageLoad
                   setShowCustomImage(
                     (image.target as HTMLImageElement).naturalHeight !== 648
-                      ? (image.target as HTMLImageElement).naturalHeight !== 96 ? true : false
+                      ? (image.target as HTMLImageElement).naturalHeight !== 96
+                        ? true
+                        : false
                       : false
                   )
                 }}

SharePointFramework/PortfolioWebParts/src/components/ProjectList/ProjectCard/context.ts

@@ -3,17 +3,7 @@ import { IProjectListProps } from '../types'
 import { ProjectListModel } from 'pp365-shared-library/lib/models'
 import { ButtonProps } from '@fluentui/react-components'
 
-export interface IProjectCardContext
-  extends Pick<
-    IProjectListProps,
-    | 'showProjectLogo'
-    | 'showProjectOwner'
-    | 'showProjectManager'
-    | 'showProjectServiceArea'
-    | 'showProjectType'
-    | 'showProjectPhase'
-    | 'useDynamicColors'
-  > {
+export interface IProjectCardContext extends IProjectListProps {
   /**
    * Project model
    */

SharePointFramework/PortfolioWebParts/src/components/ProjectList/ProjectList.module.scss

@@ -14,18 +14,23 @@
   .commandBar {
     display: flex;
     flex-direction: row;
+    max-width: 996px;
     gap: 15px;
 
     .search {
       width: 100%;
-      max-width: 820px;
+      max-width: 100%;
 
       .searchBox {
         box-shadow: var(--shadow2);
         width: inherit;
         max-width: inherit;
       }
     }
+
+    .sortBy {
+      box-shadow: var(--shadow2);
+    }
   }
 
   .emptyMessage {
@@ -39,6 +44,7 @@
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
+    max-width: 996px;
     gap: 12px;
   }
 }