import * as React from 'react' ; import * as ReactDom from 'react-dom' ; import { Version , Environment , EnvironmentType } from '@microsoft/sp-core-library' ; import { BaseClientSideWebPart , IPropertyPaneConfiguration , IPropertyPaneDropdownOption , IPropertyPaneField , PropertyPaneDropdown , PropertyPaneLabel } from '@microsoft/sp-webpart-base' ; import * as lodash from '@microsoft/sp-lodash-subset' ; import ITodoDataProvider from './dataProviders/ITodoDataProvider' ; import ITodoTaskList from './models/ITodoTaskList' ; import TodoContainer from './components/TodoContainer/TodoContainer' ; import MockDataProvider from './tests/MockDataProvider' ; import SharePointDataProvider from './dataProviders/SharePointDataProvider' ; import ITodoContainerProps from './components/TodoContainer/ITodoContainerProps' ; import * as strings from 'Sp2019ToDoWebPartWebPartStrings' ; export interface IToDoWebPartProps { spListId : string ; } export default class Sp2019ToDoWebPartWebPart extends BaseClientSideWebPart < IToDoWebPartProps > { private _dropdownOptions : IPropertyPaneDropdownOption [ ] ; private _dataProvider : ITodoDataProvider ; private _selectedList : ITodoTaskList ; private _disableDropdown : boolean ; private _taskLists : ITodoTaskList [ ] ; protected onInit ( ) { return new Promise < void > ( ( resolve , reject ) : void => { this . context . statusRenderer . displayLoadingIndicator ( this . domElement , "Todo" ) ; if ( DEBUG && Environment . type === EnvironmentType . Local ) { this . _dataProvider = new MockDataProvider ( ) ; } else { this . _dataProvider = new SharePointDataProvider ( ) ; this . _dataProvider . webPartContext = this . context ; } this . _openPropertyPane = this . _openPropertyPane . bind ( this ) ; this . _loadTaskLists ( ) . then ( _ => { if ( this . properties . spListId ) { this . _setSelectedList ( this . properties . spListId . toString ( ) ) ; this . context . statusRenderer . clearLoadingIndicator ( this . domElement ) ; } resolve ( ) ; } , err => reject ( err ) ) ; } ) ; } public render ( ) { const element = React . createElement ( TodoContainer , { dataProvider : this . _dataProvider , webPartDisplayMode : this . displayMode , configureStartCallback : this . _openPropertyPane } ) ; ReactDom . render ( element , this . domElement ) ; } protected get dataVersion ( ) : Version { return Version . parse ( '1.0' ) ; } private _loadTaskLists ( ) { return this . _dataProvider . getTaskLists ( ) . then ( ( taskLists ) => { this . _taskLists = taskLists ; this . _disableDropdown = taskLists . length === 0 ; if ( taskLists . length !== 0 ) { this . _dropdownOptions = taskLists . map ( ( list ) => { return { key : list . Id , text : list . Title } ; } ) ; } } ) ; } private _setSelectedList ( value ) { const selectedIndex = lodash . findIndex ( this . _dropdownOptions , ( item ) => item . key === value ) ; const selectedDropDownOption = this . _dropdownOptions [ selectedIndex ] ; if ( selectedDropDownOption ) { this . _selectedList = this . _taskLists . filter ( l => l . Id === value ) [ 0 ] ; this . _dataProvider . selectedList = this . _selectedList ; } } private _openPropertyPane ( ) { this . context . propertyPane . open ( ) ; } protected onDispose ( ) { ReactDom . unmountComponentAtNode ( this . domElement ) ; } protected getPropertyPaneConfiguration ( ) { return { pages : [ { header : { description : strings . PropertyPaneDescription } , groups : [ { groupName : strings . BasicGroupName , groupFields : this . _getGroupFields ( ) } ] } ] } ; } protected onPropertyPaneFieldChanged ( propertyPath , oldValue , newValue ) { if ( propertyPath === 'spListId' ) { this . _setSelectedList ( newValue ) ; } super . onPropertyPaneFieldChanged ( propertyPath , oldValue , newValue ) ; } private _getGroupFields ( ) { const fields = [ ] ; fields . push ( PropertyPaneDropdown ( 'spListId' , { label : "Select a list" , disabled : this . _disableDropdown , options : this . _dropdownOptions } ) ) ; if ( this . _disableDropdown ) { fields . push ( PropertyPaneLabel ( null , { text : 'Could not find tasks lists in your site. Create one or more tasks list and then try using the web part.' } ) ) ; } return fields ; } }