/**
 * -------------------------------------------------------------------------------------------
 * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
 * See License in the project root for license information.
 * -------------------------------------------------------------------------------------------
 */ import { DriveItem } from '@microsoft/microsoft-graph-types' ; import { customElement , html , property , TemplateResult } from 'lit-element' ; import { styles } from './mgt-file-css' ; import { MgtTemplatedComponent , Providers , ProviderState } from '@microsoft/mgt-element' ; import { getDriveItemById , getDriveItemByPath , getDriveItemByQuery , getGroupDriveItemById , getGroupDriveItemByPath , getListDriveItemById , getMyDriveItemById , getMyDriveItemByPath , getMyInsightsDriveItemById , getSiteDriveItemById , getSiteDriveItemByPath , getUserDriveItemById , getUserDriveItemByPath , getUserInsightsDriveItemById } from '../../graph/graph.files' ; import { getRelativeDisplayDate } from '../../utils/Utils' ; import { OfficeGraphInsightString , ViewType } from '../../graph/types' ; import { getFileTypeIconUriByExtension } from '../../styles/fluent-icons' ; import { getSvg , SvgIcon } from '../../utils/SvgHelper' ; import { strings } from './strings' ; export class extends MgtTemplatedComponent cssprop cssprop cssprop cssprop cssprop cssprop cssprop cssprop cssprop cssprop cssprop cssprop cssprop cssprop cssprop cssprop cssprop @ customElement ( 'mgt-file' ) export class MgtFile extends MgtTemplatedComponent { /**
     * Array of styles to apply to the element. The styles should be defined
     * using the `css` tag function.
     */ static get styles ( ) { return styles ; } protected get strings ( ) { return strings ; } type { string } memberof @ property ( { attribute : 'file-query' } ) public get fileQuery ( ) : string { return this . _fileQuery ; } public set fileQuery ( value ) { if ( value === this . _fileQuery ) { return ; } this . _fileQuery = value ; this . requestStateUpdate ( ) ; } type { string } memberof @ property ( { attribute : 'site-id' } ) public get siteId ( ) : string { return this . _siteId ; } public set siteId ( value ) { if ( value === this . _siteId ) { return ; } this . _siteId = value ; this . requestStateUpdate ( ) ; } type { string } memberof @ property ( { attribute : 'drive-id' } ) public get driveId ( ) : string { return this . _driveId ; } public set driveId ( value ) { if ( value === this . _driveId ) { return ; } this . _driveId = value ; this . requestStateUpdate ( ) ; } type { string } memberof @ property ( { attribute : 'group-id' } ) public get groupId ( ) : string { return this . _groupId ; } public set groupId ( value ) { if ( value === this . _groupId ) { return ; } this . _groupId = value ; this . requestStateUpdate ( ) ; } type { string } memberof @ property ( { attribute : 'list-id' } ) public get listId ( ) : string { return this . _listId ; } public set listId ( value ) { if ( value === this . _listId ) { return ; } this . _listId = value ; this . requestStateUpdate ( ) ; } type { string } memberof @ property ( { attribute : 'user-id' } ) public get userId ( ) : string { return this . _userId ; } public set userId ( value ) { if ( value === this . _userId ) { return ; } this . _userId = value ; this . requestStateUpdate ( ) ; } type { string } memberof @ property ( { attribute : 'item-id' } ) public get itemId ( ) : string { return this . _itemId ; } public set itemId ( value ) { if ( value === this . _itemId ) { return ; } this . _itemId = value ; this . requestStateUpdate ( ) ; } type { string } memberof @ property ( { attribute : 'item-path' } ) public get itemPath ( ) : string { return this . _itemPath ; } public set itemPath ( value ) { if ( value === this . _itemPath ) { return ; } this . _itemPath = value ; this . requestStateUpdate ( ) ; } type { OfficeGraphInsightString } memberof @ property ( { attribute : 'insight-type' } ) public get insightType ( ) : OfficeGraphInsightString { return this . _insightType ; } public set insightType ( value ) { if ( value === this . _insightType ) { return ; } this . _insightType = value ; this . requestStateUpdate ( ) ; } type { string } memberof @ property ( { attribute : 'insight-id' } ) public get insightId ( ) : string { return this . _insightId ; } public set insightId ( value ) { if ( value === this . _insightId ) { return ; } this . _insightId = value ; this . requestStateUpdate ( ) ; } type { MicrosoftGraph . DriveItem } memberof @ property ( { type : Object } ) public get fileDetails ( ) : DriveItem { return this . _fileDetails ; } public set fileDetails ( value ) { if ( value === this . _fileDetails ) { return ; } this . _fileDetails = value ; this . requestStateUpdate ( ) ; } type { string } memberof @ property ( { attribute : 'file-icon' } ) public get fileIcon ( ) : string { return this . _fileIcon ; } public set fileIcon ( value ) { if ( value === this . _fileIcon ) { return ; } this . _fileIcon = value ; this . requestStateUpdate ( ) ; } type { MicrosoftGraph . DriveItem } memberof @ property ( { type : Object } ) public driveItem : DriveItem ; type { string } memberof @ property ( { attribute : 'line1-property' } ) public line1Property : string ; type { string } memberof @ property ( { attribute : 'line2-property' } ) public line2Property : string ; type { string } memberof @ property ( { attribute : 'line3-property' } ) public line3Property : string ; type { ViewType } memberof @ property ( { attribute : 'view' , converter : value => { if ( ! value || value . length === 0 ) { return ViewType . threelines ; } value = value . toLowerCase ( ) ; if ( typeof ViewType [ value ] === 'undefined' ) { return ViewType . threelines ; } else { return ViewType [ value ] ; } } } ) public view : ViewType ; static return { * } memberof public static get requiredScopes ( ) : string [ ] { return [ ... new Set ( [ 'files.read' , 'files.read.all' , 'sites.read.all' ] ) ] ; } private _fileQuery : string ; private _siteId : string ; private _itemId : string ; private _driveId : string ; private _itemPath : string ; private _listId : string ; private _groupId : string ; private _userId : string ; private _insightType : OfficeGraphInsightString ; private _insightId : string ; private _fileDetails : DriveItem ; private _fileIcon : string ; constructor ( ) { super ( ) ; this . line1Property = 'name' ; this . line2Property = 'lastModifiedDateTime' ; this . line3Property = 'size' ; this . view = ViewType . threelines ; } public render ( ) { if ( ! this . driveItem && this . isLoadingState ) { return this . renderLoading ( ) ; } if ( ! this . driveItem ) { return this . renderNoData ( ) ; } const file = this . driveItem ; let fileTemplate ; fileTemplate = this . renderTemplate ( 'default' , { file } ) ; if ( ! fileTemplate ) { const fileDetailsTemplate = this . renderDetails ( file ) ; const fileTypeIconTemplate = this . renderFileTypeIcon ( ) ; fileTemplate = html `
        <div class="item">
          ${ fileTypeIconTemplate } ${ fileDetailsTemplate }
        </div>
      ` ; } return html `
      <span dir=${ this . direction }>
        ${ fileTemplate }
      </span>
    ` ; } protected returns { TemplateResult } memberof protected renderLoading ( ) { return this . renderTemplate ( 'loading' , null ) || html `` ; } protected returns { TemplateResult } memberof protected renderNoData ( ) { return this . renderTemplate ( 'no-data' , null ) || html `` ; } protected param { string } iconSrc memberof protected renderFileTypeIcon ( ) { if ( ! this . fileIcon && ! this . driveItem . name ) { return html `` ; } let fileIconSrc ; if ( this . fileIcon ) { fileIconSrc = this . fileIcon ; } else { const re = /(?:\.([^.]+))?$/ ; const fileType = this . driveItem . package === undefined && this . driveItem . folder === undefined ? re . exec ( this . driveItem . name ) [ 1 ] ? re . exec ( this . driveItem . name ) [ 1 ] . toLowerCase ( ) : 'null' : this . driveItem . package !== undefined ? this . driveItem . package . type === 'oneNote' ? 'onetoc' : 'folder' : 'folder' ; fileIconSrc = getFileTypeIconUriByExtension ( fileType , 48 , 'svg' ) ; } return html `
      <div class="item__file-type-icon">
        ${ fileIconSrc ? html `
              <img src=${ fileIconSrc } alt="File icon" />
            ` : html `
              ${ getSvg ( SvgIcon . File ) }
            ` }
      </div>
    ` ; } protected param { MicrosoftGraph . DriveItem } driveItem memberof protected renderDetails ( driveItem ) { if ( ! driveItem || this . view === ViewType . image ) { return html `` ; } const details = [ ] ; if ( this . view > ViewType . image ) { const text = this . getTextFromProperty ( driveItem , this . line1Property ) ; if ( text ) { details . push ( html `
          <div class="line1" aria-label="${ text }">${ text }</div>
        ` ) ; } } if ( this . view > ViewType . oneline ) { const text = this . getTextFromProperty ( driveItem , this . line2Property ) ; if ( text ) { details . push ( html `
          <div class="line2" aria-label="${ text }">${ text }</div>
        ` ) ; } } if ( this . view > ViewType . twolines ) { const text = this . getTextFromProperty ( driveItem , this . line3Property ) ; if ( text ) { details . push ( html `
          <div class="line3" aria-label="${ text }">${ text }</div>
        ` ) ; } } return html `
      <div class="item__details">
        ${ details }
      </div>
    ` ; } protected returns memberof protected async loadState ( ) { if ( this . fileDetails ) { this . driveItem = this . fileDetails ; return ; } const provider = Providers . globalProvider ; if ( ! provider || provider . state === ProviderState . Loading ) { return ; } if ( provider . state === ProviderState . SignedOut ) { this . driveItem = null ; return ; } const graph = provider . graph . forComponent ( this ) ; let driveItem ; const getFromMyDrive = ! this . driveId && ! this . siteId && ! this . groupId && ! this . listId && ! this . userId ; if ( ( this . driveId && ! this . itemId && ! this . itemPath ) || ( this . siteId && ! this . itemId && ! this . itemPath ) || ( this . groupId && ! this . itemId && ! this . itemPath ) || ( this . listId && ! this . siteId && ! this . itemId ) || ( this . insightType && ! this . insightId ) || ( this . userId && ! this . itemId && ! this . itemPath && ! this . insightType && ! this . insightId ) ) { driveItem = null ; } else if ( this . fileQuery ) { driveItem = await getDriveItemByQuery ( graph , this . fileQuery ) ; } else if ( this . itemId && getFromMyDrive ) { driveItem = await getMyDriveItemById ( graph , this . itemId ) ; } else if ( this . itemPath && getFromMyDrive ) { driveItem = await getMyDriveItemByPath ( graph , this . itemPath ) ; } else if ( this . userId ) { if ( this . itemId ) { driveItem = await getUserDriveItemById ( graph , this . userId , this . itemId ) ; } else if ( this . itemPath ) { driveItem = await getUserDriveItemByPath ( graph , this . userId , this . itemPath ) ; } else if ( this . insightType && this . insightId ) { driveItem = await getUserInsightsDriveItemById ( graph , this . userId , this . insightType , this . insightId ) ; } } else if ( this . driveId ) { if ( this . itemId ) { driveItem = await getDriveItemById ( graph , this . driveId , this . itemId ) ; } else if ( this . itemPath ) { driveItem = await getDriveItemByPath ( graph , this . driveId , this . itemPath ) ; } } else if ( this . siteId && ! this . listId ) { if ( this . itemId ) { driveItem = await getSiteDriveItemById ( graph , this . siteId , this . itemId ) ; } else if ( this . itemPath ) { driveItem = await getSiteDriveItemByPath ( graph , this . siteId , this . itemPath ) ; } } else if ( this . listId ) { driveItem = await getListDriveItemById ( graph , this . siteId , this . listId , this . itemId ) ; } else if ( this . groupId ) { if ( this . itemId ) { driveItem = await getGroupDriveItemById ( graph , this . groupId , this . itemId ) ; } else if ( this . itemPath ) { driveItem = await getGroupDriveItemByPath ( graph , this . groupId , this . itemPath ) ; } } else if ( this . insightType && ! this . userId ) { driveItem = await getMyInsightsDriveItemById ( graph , this . insightType , this . insightId ) ; } this . driveItem = driveItem ; } private getTextFromProperty ( driveItem , properties ) { if ( ! properties || properties . length === 0 ) { return null ; } const propertyList = properties . trim ( ) . split ( ',' ) ; let text ; let i = 0 ; while ( ! text && i < propertyList . length ) { const current = propertyList [ i ] . trim ( ) ; switch ( current ) { case 'size' : let size ; if ( driveItem . size ) { size = this . formatBytes ( driveItem . size ) ; } else { size = '0' ; } text = `${ this . strings . sizeSubtitle }: ${ size }` ; break ; case 'lastModifiedDateTime' : let relativeDateString ; let lastModifiedString ; if ( driveItem . lastModifiedDateTime ) { const lastModifiedDateTime = new Date ( driveItem . lastModifiedDateTime ) ; relativeDateString = getRelativeDisplayDate ( lastModifiedDateTime ) ; lastModifiedString = `${ this . strings . modifiedSubtitle } ${ relativeDateString }` ; } else { lastModifiedString = '' ; } text = lastModifiedString ; break ; default : text = driveItem [ current ] ; } i ++ ; } return text ; } private formatBytes ( bytes , decimals = 2 ) { if ( bytes === 0 ) return '0 Bytes' ; const k = 1024 ; const dm = decimals < 0 ? 0 : decimals ; const sizes = [ 'Bytes' , 'KB' , 'MB' , 'GB' , 'TB' , 'PB' , 'EB' , 'ZB' , 'YB' ] ; const i = Math . floor ( Math . log ( bytes ) / Math . log ( k ) ) ; return parseFloat ( ( bytes / Math . pow ( k , i ) ) . toFixed ( dm ) ) + ' ' + sizes [ i ] ; } }