Fixes issues with single folder in document template dialog "Hent dok…

…umentmal" (#376)

CHANGELOG.md

@@ -3,7 +3,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 Every change is marked with Pull Request ID.
 
-## 1.2.4 - TBA
+## 1.2.5 - TBA
+
+## Fixed
+
+- Fixes issues with single folder in "Hent dokumentmal" #376
+
+## 1.2.4 - 30.11.2020
 
 ## Added
 

SharePointFramework/PortfolioWebParts/package.json

@@ -42,8 +42,8 @@
         "object-assign": "4.1.1",
         "object-get": "2.1.0",
         "office-ui-fabric-react": "6.214.0",
-        "pp365-shared": "file:../@Shared",
-        "pp365-projectwebparts": "file:../ProjectWebParts",
+        "pp365-shared": "1.2.6",
+        "pp365-projectwebparts": "1.2.6",
         "react": "16.8.5",
         "react-calendar-timeline": "0.26.6",
         "react-dom": "16.8.5",

SharePointFramework/ProjectExtensions/package.json

@@ -37,7 +37,7 @@
     "@uifabric/utilities": "6.45.1",
     "msgraph-helper": "0.8.3",
     "office-ui-fabric-react": "6.214.0",
-    "pp365-shared": "file:../@Shared",
+    "pp365-shared": "1.2.6",
     "react": "16.8.5",
     "react-dom": "16.8.5",
     "react-markdown": "4.2.2",

SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/DocumentTemplateDialogScreenEditCopy/DocumentTemplateItem/index.tsx

@@ -3,16 +3,16 @@ import { SPDataAdapter } from 'data'
 import { Icon } from 'office-ui-fabric-react/lib/Icon'
 import { TextField } from 'office-ui-fabric-react/lib/TextField'
 import * as strings from 'ProjectExtensionsStrings'
-import * as React from 'react'
+import React, { useState, useEffect, FormEvent } from 'react'
 import styles from './DocumentTemplateItem.module.scss'
-import { IDocumentTemplateItemProps } from './IDocumentTemplateItemProps'
+import { IDocumentTemplateItemProps } from './types'
 
 // tslint:disable-next-line: naming-convention
 export const DocumentTemplateItem = (props: IDocumentTemplateItemProps) => {
   const nameId = getId('name')
   const titleId = getId('title')
   let changeTimeout: number
-  const [isExpanded, setIsExpanded] = React.useState(false)
+  const [isExpanded, setIsExpanded] = useState(false)
 
   /**
    * On input change
@@ -22,9 +22,9 @@ export const DocumentTemplateItem = (props: IDocumentTemplateItemProps) => {
    * @param {number} resolveDelay Resolve delay
    */
   function onInputChange(
-    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    event: FormEvent<HTMLInputElement | HTMLTextAreaElement>,
     newValue: string,
-    resolveDelay = 400
+    resolveDelay: number = 400
   ) {
     clearTimeout(changeTimeout)
     changeTimeout = setTimeout(async () => {
@@ -49,7 +49,7 @@ export const DocumentTemplateItem = (props: IDocumentTemplateItemProps) => {
     }, resolveDelay)
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     SPDataAdapter.isFilenameValid(props.folderServerRelativeUrl, props.model.name).then(
       (errorMessage) => {
         if (errorMessage) {

SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/DocumentTemplateDialogScreenEditCopy/DocumentTemplateItem/IDocumentTemplateItemProps.tsx → SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/DocumentTemplateDialogScreenEditCopy/DocumentTemplateItem/types.tsx

@@ -17,3 +17,10 @@ export interface IDocumentTemplateItemProps {
    */
   folderServerRelativeUrl: string
 }
+
+export interface IDocumentTemplateItemState {
+  /**
+   * Is expanded
+   */
+  isExpanded: boolean
+}

SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/DocumentTemplateDialogScreenEditCopy/index.tsx

@@ -1,23 +1,23 @@
 import { stringIsNullOrEmpty, TypedHash } from '@pnp/common'
+import { ISPLibraryFolder } from 'data/SPDataAdapter/ISPLibraryFolder'
 import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button'
 import { DialogFooter } from 'office-ui-fabric-react/lib/Dialog'
 import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'
 import * as strings from 'ProjectExtensionsStrings'
-import * as React from 'react'
+import React, { useState } from 'react'
 import { InfoMessage } from '../../InfoMessage'
-import { DocumentTemplateDialogScreen } from '../DocumentTemplateDialogScreen'
+import { DocumentTemplateDialogScreen } from '../types'
 import styles from './DocumentTemplateDialogScreenEditCopy.module.scss'
 import { DocumentTemplateItem } from './DocumentTemplateItem'
-import { IDocumentTemplateDialogScreenEditCopyProps } from './IDocumentTemplateDialogScreenEditCopyProps'
-import { ISPLibraryFolder } from 'data/SPDataAdapter/ISPLibraryFolder'
+import { IDocumentTemplateDialogScreenEditCopyProps } from './types'
 
 // tslint:disable-next-line: naming-convention
 export const DocumentTemplateDialogScreenEditCopy = (
   props: IDocumentTemplateDialogScreenEditCopyProps
 ) => {
-  const [templates, setTemplates] = React.useState([...props.selectedTemplates])
-  const [selectedLibrary, setLibrary] = React.useState<ISPLibraryFolder>(props.libraries[0])
-  const [selectedFolder, setFolder] = React.useState<ISPLibraryFolder>(null)
+  const [templates, setTemplates] = useState([...props.selectedTemplates])
+  const [selectedLibrary, setLibrary] = useState<ISPLibraryFolder>(props.libraries[0])
+  const [selectedFolder, setFolder] = useState<ISPLibraryFolder>(null)
 
   /**
    * On input changed
@@ -45,23 +45,19 @@ export const DocumentTemplateDialogScreenEditCopy = (
   /**
    * On library changed
    *
-   * @param {any} _event Event
    * @param {IDropdownOption} option Option
-   * @param {number} _index Index
    */
-  function onLibraryChanged(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) {
+  function onLibraryChanged(option: IDropdownOption) {
     setLibrary(option.data)
     setFolder(null)
   }
 
   /**
    * On folder changed
    *
-   * @param {any} _event Event
    * @param {IDropdownOption} option Option
-   * @param {number} _index Index
    */
-  function onFolderChanged(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) {
+  function onFolderChanged(option: IDropdownOption) {
     setFolder(option.data)
   }
 
@@ -93,25 +89,28 @@ export const DocumentTemplateDialogScreenEditCopy = (
           disabled={props.libraries.length === 1}
           label={strings.DocumentLibraryDropdownLabel}
           defaultSelectedKey={selectedLibrary.Id}
-          onChange={onLibraryChanged}
+          onChange={(_, option) => onLibraryChanged(option)}
           options={props.libraries.map((lib) => ({ key: lib.Id, text: lib.Title, data: lib }))}
         />
       </div>
       <div>
         <Dropdown
-          disabled={selectedLibrary.Folders.length < 2}
+          disabled={selectedLibrary.Folders.length < 1}
           label={strings.FolderDropdownLabel}
-          placeholder={
-            selectedLibrary.Folders.length === 0 &&
-            `Det finnes ingen mapper i ${selectedLibrary.Title}.`
-          }
-          defaultSelectedKey={selectedFolder && selectedFolder.Id}
-          options={selectedLibrary.Folders.map((fld) => ({
-            key: fld.Id,
-            text: fld.Title,
-            data: fld
-          }))}
-          onChange={onFolderChanged}
+          defaultSelectedKey={selectedFolder ? selectedFolder.Id : '-'}
+          options={[
+            {
+              key: '-',
+              text: strings.DocumentTemplateDialogScreenEditCopyRootLevelText,
+              data: null
+            },
+            ...selectedLibrary.Folders.map((fld) => ({
+              key: fld.Id,
+              text: fld.Title,
+              data: fld
+            }))
+          ]}
+          onChange={(_, option) => onFolderChanged(option)}
         />
       </div>
       <DialogFooter>

SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/DocumentTemplateDialogScreenEditCopy/IDocumentTemplateDialogScreenEditCopyProps.tsx → SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/DocumentTemplateDialogScreenEditCopy/types.tsx

@@ -1,5 +1,5 @@
+import { DocumentTemplateDialogScreen } from '..'
 import { IDocumentLibrary, TemplateFile } from '../../../models'
-import { DocumentTemplateDialogScreen } from '../DocumentTemplateDialogScreen'
 
 export interface IDocumentTemplateDialogScreenEditCopyProps {
   /**

SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/DocumentTemplateDialogScreenSelect/index.tsx

@@ -5,22 +5,22 @@ import {
   SelectionMode
 } from 'office-ui-fabric-react/lib/DetailsList'
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection'
-import * as strings from 'ProjectExtensionsStrings'
-import * as React from 'react'
 import { format } from 'office-ui-fabric-react/lib/Utilities'
+import * as strings from 'ProjectExtensionsStrings'
+import React, { Component, ReactElement } from 'react'
 import { InfoMessage } from '../../InfoMessage'
 import {
   DocumentTemplateDialogScreenSelectDefaultProps,
   IDocumentTemplateDialogScreenSelectProps
-} from './IDocumentTemplateDialogScreenSelectProps'
+} from './types'
 
-export class DocumentTemplateDialogScreenSelect extends React.Component<
+export class DocumentTemplateDialogScreenSelect extends Component<
   IDocumentTemplateDialogScreenSelectProps,
   {}
 > {
   public static defaultProps = DocumentTemplateDialogScreenSelectDefaultProps
 
-  public render(): React.ReactElement<IDocumentTemplateDialogScreenSelectProps> {
+  public render(): ReactElement<IDocumentTemplateDialogScreenSelectProps> {
     return (
       <>
         <InfoMessage

SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/index.tsx

@@ -5,27 +5,26 @@ import { MessageBarType } from 'office-ui-fabric-react/lib/MessageBar'
 import { ProgressIndicator } from 'office-ui-fabric-react/lib/ProgressIndicator'
 import { format } from 'office-ui-fabric-react/lib/Utilities'
 import * as strings from 'ProjectExtensionsStrings'
-import * as React from 'react'
+import React, { useState } from 'react'
 import { SPDataAdapter } from '../../data'
 import { TemplateFile } from '../../models/index'
 import { BaseDialog } from '../@BaseDialog/index'
 import { InfoMessage } from '../InfoMessage'
 import styles from './DocumentTemplateDialog.module.scss'
-import { DocumentTemplateDialogScreen } from './DocumentTemplateDialogScreen'
 import { DocumentTemplateDialogScreenEditCopy } from './DocumentTemplateDialogScreenEditCopy'
 import { DocumentTemplateDialogScreenSelect } from './DocumentTemplateDialogScreenSelect'
-import { IDocumentTemplateDialogProps } from './IDocumentTemplateDialogProps'
+import { DocumentTemplateDialogScreen, IDocumentTemplateDialogProps } from './types'
 
 // tslint:disable-next-line: naming-convention
 export const DocumentTemplateDialog = (props: IDocumentTemplateDialogProps) => {
   // eslint-disable-next-line @typescript-eslint/no-use-before-define
   const selection = new Selection({ onSelectionChanged })
 
-  const [selected, setSelected] = React.useState([])
-  const [progress, setProgress] = React.useState(null)
-  const [screen, setScreen] = React.useState(DocumentTemplateDialogScreen.Select)
-  const [isBlocking, setIsBlocking] = React.useState(false)
-  const [uploaded, setUploaded] = React.useState([])
+  const [selected, setSelected] = useState([])
+  const [progress, setProgress] = useState(null)
+  const [screen, setScreen] = useState(DocumentTemplateDialogScreen.Select)
+  const [isBlocking, setIsBlocking] = useState(false)
+  const [uploaded, setUploaded] = useState([])
 
   function onSelectionChanged() {
     setSelected(selection.getSelection() as TemplateFile[])
@@ -147,5 +146,5 @@ export const DocumentTemplateDialog = (props: IDocumentTemplateDialogProps) => {
   )
 }
 
-export * from './IDocumentTemplateDialogDismissProps'
+export * from './types'
 export { IDocumentTemplateDialogProps }

SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/IDocumentTemplateDialogProps.tsx → SharePointFramework/ProjectExtensions/src/components/DocumentTemplateDialog/types.tsx

@@ -1,5 +1,8 @@
 import { TemplateFile, IDocumentLibrary } from '../../models'
-import { IDocumentTemplateDialogDismissProps } from './IDocumentTemplateDialogDismissProps'
+
+export interface IDocumentTemplateDialogDismissProps {
+  reload?: boolean
+}
 
 export interface IDocumentTemplateDialogProps {
   /**
@@ -27,3 +30,25 @@ export interface IDocumentTemplateDialogProps {
    */
   onDismiss: (props: IDocumentTemplateDialogDismissProps) => void
 }
+
+export enum DocumentTemplateDialogScreen {
+  /**
+   * Select screen
+   */
+  Select,
+
+  /**
+   * Edit copy screen
+   */
+  EditCopy,
+
+  /**
+   * Copy progess screen
+   */
+  CopyProgress,
+
+  /**
+   * Summary scren
+   */
+  Summary
+}

SharePointFramework/ProjectExtensions/src/loc/myStrings.d.ts

@@ -1,4 +1,5 @@
 declare interface IProjectExtensionsStrings {
+  DocumentTemplateDialogScreenEditCopyRootLevelText: string
   ApplyExtensionText: string;
   ProcessListItemText: string;
   ProcessFileText: string;

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

@@ -76,6 +76,7 @@ define([], function () {
     UnknownErrorText: 'Ukjent feil',
     TemplateListContentConfigText: 'Den valgte prosjektmalen inneholder konfigurasjon for standardinnhold.',
     FolderDropdownLabel:'Velg mappe',
-    DocumentLibraryDropdownLabel: 'Velg dokumentbibliotek'
+    DocumentLibraryDropdownLabel: 'Velg dokumentbibliotek',
+    DocumentTemplateDialogScreenEditCopyRootLevelText: 'Øverste nivå'
   }
 });