Read-only access for project list webpart (#498)

Co-authored-by: Ole Martin Pettersen <olemp@puzzlepart.com>
Co-authored-by: TinHoangVu <88658344+TinHoangVu@users.noreply.github.com>
Co-authored-by: Martin Ruud <martin.ruud@puzzlepart.com>

CHANGELOG.md

@@ -8,8 +8,8 @@ Every change is marked with issue ID.
 ### Added 
 
 - Added new multi-user field _Prosjektstøtte_ #526
-- Added "Avventer" as a new choice in Project LifeCycle #537
-- Added a new section in "ProjectStatus" for timeline list #506  
+- Added read-only project cards to project list #498
+- Added "Avventer" as a new choice for "Prosjektstatus" #537
 - Added a new project webpart 'Prosjekttidslinje' for showcasing projects and items for the current project on a timeline #497
 
 ### Changed

SharePointFramework/.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/.DS_Store": true,
+    "**/node_modules": true,
+    "**/lib": true,
+    "**/temp": true,
+    "**/dist": true,
+    "**/teams": true,
+    "**/release": true,
+    "**/sharepoint": true,
+    "**/src/**/*.scss.ts": true,
+    "**/package-lock*": true
+  },
+  "typescript.tsdk": ".\\node_modules\\typescript\\lib"
+}

SharePointFramework/PortfolioWebParts/src/components/BenefitsOverview/columns.tsx

@@ -11,7 +11,7 @@ import { IBenefitsOverviewProps } from './types'
 /**
  * Get columns for DetailsList
  *
- * @param {IBenefitsOverviewProps} props Props
+ * @param props Props
  */
 export function getColumns(props: IBenefitsOverviewProps): IAggregatedSearchListColumn[] {
   const columns: IAggregatedSearchListColumn[] = [

SharePointFramework/PortfolioWebParts/src/components/BenefitsOverview/index.tsx

@@ -30,7 +30,7 @@ export class BenefitsOverview extends Component<IBenefitsOverviewProps> {
   /**
    * Post fetch
    *
-   * @param {any]} results Results
+   * @param results Results
    */
   private _postTransform(results: any[]): any[] {
     const benefits = results

SharePointFramework/PortfolioWebParts/src/components/FilterPanel/Filter/index.tsx

@@ -51,8 +51,8 @@ export class Filter extends Component<IFilterProps, IFilterState> {
   /**
    * On changed
    *
-   * @param {IFilterItemProps} item Item that was changed
-   * @param {boolean} checked Item checked
+   * @param item Item that was changed
+   * @param checked Item checked
    */
   private _onChanged = (item: IFilterItemProps, checked: boolean) => {
     const { items } = this.state

SharePointFramework/PortfolioWebParts/src/components/PortfolioAggregation/itemColumn.tsx

@@ -14,9 +14,9 @@ import { TagsColumn } from '../PortfolioOverview/RenderItemColumn/TagsColumn'
 /**
  * Render item column
  *
- * @param {any} item Item
- * @param {number} index Index
- * @param {IColumn} column Column
+ * @param item Item
+ * @param index Index
+ * @param column Column
  */
 export const renderItemColumn = (item: any, index: number, column: IColumn) => {
   if (!column.fieldName) return null
@@ -60,7 +60,7 @@ export const renderItemColumn = (item: any, index: number, column: IColumn) => {
 /**
  * Get default columns
  *
- * @param {IPortfolioAggregationContext} context Context
+ * @param context Context
  */
 export const getDefaultColumns = (context: IPortfolioAggregationContext) => [
   {

SharePointFramework/PortfolioWebParts/src/components/PortfolioAggregation/reducer.ts

@@ -41,8 +41,8 @@ export const DATA_FETCH_ERROR = createAction<{ error: Error }>('DATA_FETCH_ERROR
 /**
  * Persist columns in web part properties
  *
- * @param {IPortfolioAggregationProps} props Props
- * @param {IPortfolioAggregationState} state State
+ * @param props Props
+ * @param state State
  */
 const persistColumns = (props: IPortfolioAggregationProps, columns: IColumn[]) => {
   props.onUpdateProperty(

SharePointFramework/PortfolioWebParts/src/components/PortfolioAggregation/search.ts

@@ -4,9 +4,9 @@ import { getObjectValue as get } from 'pp365-shared/lib/helpers'
 /**
  * Filter item
  *
- * @param {any} item Item
- * @param {string} searchTerm Search term
- * @param {IColumn[]} columns Columns
+ * @param item Item
+ * @param searchTerm Search term
+ * @param columns Columns
  */
 export const filterItem = (item: any, searchTerm: string, columns: IColumn[]) => {
   searchTerm = searchTerm.toLowerCase()

SharePointFramework/PortfolioWebParts/src/components/PortfolioInsights/Chart/index.tsx

@@ -13,7 +13,7 @@ export default class Chart extends Component<IChartProps, IChartState> {
   /**
    * Constructor
    *
-   * @param {IChartProps} props Props
+   * @param props Props
    */
   constructor(props: IChartProps) {
     super(props)

SharePointFramework/PortfolioWebParts/src/components/PortfolioInsights/index.tsx

@@ -18,7 +18,7 @@ export class PortfolioInsights extends Component<IPortfolioInsightsProps, IPortf
   /**
    * Constructor
    *
-   * @param {IPortfolioInsightsProps} props Props
+   * @param props Props
    */
   constructor(props: IPortfolioInsightsProps) {
     super(props)
@@ -99,7 +99,7 @@ export class PortfolioInsights extends Component<IPortfolioInsightsProps, IPortf
   /**
    * On view changed
    *
-   * @param {PortfolioOverviewView} view View
+   * @param view View
    */
   private async _onViewChanged(view: PortfolioOverviewView) {
     const items = await this.props.dataAdapter.fetchDataForView(

SharePointFramework/PortfolioWebParts/src/components/PortfolioOverview/RenderItemColumn/index.tsx

@@ -26,9 +26,9 @@ const renderDataTypeMap = {
 /**
  * On render item activeFilters
  *
- * @param {IFetchDataForViewItemResult} item Item
- * @param {ProjectColumn} column Column
- * @param {IPortfolioOverviewProps} props Props
+ * @param item Item
+ * @param column Column
+ * @param props Props
  */
 export function renderItemColumn(
   item: IFetchDataForViewItemResult,

SharePointFramework/PortfolioWebParts/src/components/PortfolioOverview/index.tsx

@@ -159,8 +159,8 @@ export class PortfolioOverview extends Component<IPortfolioOverviewProps, IPortf
   /**
    * On search
    *
-   * @param {string} searchTerm Search term
-   * @param {number} delay Delay in ms
+   * @param searchTerm Search term
+   * @param delay Delay in ms
    */
   private _onSearch(searchTerm: string, delay: number = 500) {
     clearTimeout(this._onSearchDelay)
@@ -197,8 +197,8 @@ export class PortfolioOverview extends Component<IPortfolioOverviewProps, IPortf
   /**
    * On filter change
    *
-   * @param {ProjectColumn} column Column
-   * @param {IFilterItemProps[]} selectedItems Selected items
+   * @param column Column
+   * @param selectedItems Selected items
    */
   private _onFilterChange(column: ProjectColumn, selectedItems: IFilterItemProps[]) {
     const { activeFilters } = { ...this.state } as IPortfolioOverviewState
@@ -213,8 +213,8 @@ export class PortfolioOverview extends Component<IPortfolioOverviewProps, IPortf
   /**
    * On column sort
    *
-   * @param {ProjectColumn} column The column config
-   * @param {boolean} sortDesencing Sort descending
+   * @param column The column config
+   * @param sortDesencing Sort descending
    */
   private _onColumnSort(column: ProjectColumn, sortDesencing: boolean): void {
     const { items, columns } = { ...this.state } as IPortfolioOverviewState
@@ -235,7 +235,7 @@ export class PortfolioOverview extends Component<IPortfolioOverviewProps, IPortf
   /**
    * On column group by
    *
-   * @param {ProjectColumn} column The column config
+   * @param column The column config
    */
   private _onColumnGroupBy(column: ProjectColumn) {
     this.setState((prevState) => ({
@@ -246,8 +246,8 @@ export class PortfolioOverview extends Component<IPortfolioOverviewProps, IPortf
   /**
    * On render details header
    *
-   * @param {IDetailsHeaderProps} props Props
-   * @param {IRenderFunction} defaultRender Default render
+   * @param props Props
+   * @param defaultRender Default render
    */
   private _onRenderDetailsHeader(
     props: IDetailsHeaderProps,
@@ -275,8 +275,8 @@ export class PortfolioOverview extends Component<IPortfolioOverviewProps, IPortf
   /**
    * On column header click
    *
-   * @param {React.MouseEvent<HTMLElement, MouseEvent>} ev Event
-   * @param {ProjectColumn} column Column
+   * @param ev Event
+   * @param column Column
    */
   private _onColumnHeaderClick(
     ev?: React.MouseEvent<HTMLElement, MouseEvent>,
@@ -288,8 +288,8 @@ export class PortfolioOverview extends Component<IPortfolioOverviewProps, IPortf
   /**
    * On column header context menu
    *
-   * @param {ProjectColumn} column Column
-   * @param {React.MouseEvent<HTMLElement, MouseEvent>} ev Event
+   * @param column Column
+   * @param ev Event
    */
   private _onColumnHeaderContextMenu(
     column?: ProjectColumn,
@@ -356,8 +356,8 @@ export class PortfolioOverview extends Component<IPortfolioOverviewProps, IPortf
   /**
    * Create groups
    *
-   * @param {any[]} items Items
-   * @param {ProjectColumn[]} columns Columns
+   * @param items Items
+   * @param columns Columns
    */
   private _createGroups(items: any[], columns: ProjectColumn[]) {
     const { groupBy, sortBy } = { ...this.state } as IPortfolioOverviewState
@@ -425,7 +425,7 @@ export class PortfolioOverview extends Component<IPortfolioOverviewProps, IPortf
   /**
    * Get current view
    *
-   * @param {IPortfolioOverviewHashStateState} hashState Hash state
+   * @param hashState Hash state
    */
   private _getCurrentView(hashState: IPortfolioOverviewHashStateState): PortfolioOverviewView {
     const viewIdUrlParam = new UrlQueryParameterCollection(document.location.href).getValue(
@@ -490,7 +490,7 @@ export class PortfolioOverview extends Component<IPortfolioOverviewProps, IPortf
   /**
    * Changes view, doing a new search
    *
-   * @param {PortfolioOverviewView} view View configuration
+   * @param view View configuration
    */
   private async _onChangeView(view: PortfolioOverviewView) {
     if (this.state.currentView.id === view.id) {

SharePointFramework/PortfolioWebParts/src/components/ProjectList/ProjectCard/ProjectCardContent.tsx

@@ -7,7 +7,7 @@ import { IProjectCardProps } from './types'
 /**
  * Project Card Content
  *
- * @param {IProjectCardProps} props Props
+ * @param props Props
  */
 export const ProjectCardContent = ({
   project,

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

@@ -1,6 +1,7 @@
 import { DocumentCardTitle } from 'office-ui-fabric-react/lib/DocumentCard'
 import React, { FunctionComponent } from 'react'
 import ImageFadeIn from 'react-image-fade-in'
+import { placeholderImage } from '../types'
 import styles from './ProjectCard.module.scss'
 import { IProjectCardProps } from './types'
 
@@ -12,7 +13,7 @@ export const ProjectCardHeader: FunctionComponent<IProjectCardProps> = ({
   return (
     <div className={styles.header}>
       <div className={styles.logo} hidden={!showProjectLogo}>
-        {project.logo && <ImageFadeIn opacityTransition={1.5} src={project.logo} />}
+        <ImageFadeIn opacityTransition={1.5} src={project.logo ?? placeholderImage} />
       </div>
       <DocumentCardTitle title={project.title} shouldTruncate={shouldTruncateTitle} />
     </div>

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

@@ -1,14 +1,20 @@
 import { DocumentCard } from 'office-ui-fabric-react/lib/DocumentCard'
+import * as strings from 'PortfolioWebPartsStrings'
 import React, { FunctionComponent } from 'react'
 import styles from './ProjectCard.module.scss'
 import { ProjectCardContent } from './ProjectCardContent'
 import { ProjectCardFooter } from './ProjectCardFooter'
 import { ProjectCardHeader } from './ProjectCardHeader'
 import { IProjectCardProps } from './types'
 
-export const ProjectCard: FunctionComponent<IProjectCardProps> = (props: IProjectCardProps) => {
+export const ProjectCard: FunctionComponent<IProjectCardProps> = (props) => {
+  const { project } = props
   return (
-    <DocumentCard className={styles.projectCard} onClickHref={props.project.url}>
+    <DocumentCard
+      title={!project.userIsMember ? strings.NoAccessMessage : ''}
+      className={styles.projectCard}
+      onClickHref={project.userIsMember ? project.url : '#'}
+      style={!project.userIsMember ? { opacity: '20%', cursor: 'default' } : {}}>
       <ProjectCardHeader {...props} />
       <ProjectCardContent {...props} />
       <ProjectCardFooter {...props} />

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

@@ -1,18 +1,25 @@
-@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
 
 .root {
   @include ms-Grid;
   .container {
     @include ms-Grid-row;
     .searchBox {
       @include ms-Grid-col;
-      @include ms-sm9;
+      @include ms-sm6;
       @include ms-font-m;
     }
     .viewToggle {
       @include ms-Grid-col;
-      @include ms-sm3;
+      @include ms-sm12;
+      @include ms-font-m;
+      margin-top: 8px;
+    }
+    .projectDisplaySelect {
+      @include ms-Grid-col;
+      @include ms-sm5;
       @include ms-font-m;
+      margin-top: -7px;
     }
     .emptyMessage {
       @include ms-Grid-col;