@omnia/foundation/extensibility/typings/directives/DocumentPicker.html

Provide omnia foundation typings and tooling work on client side for omnia extension.

<div class="omf-document-picker">
    <div class="clearfix">
        <div class="col-sm-6" style="padding-left: 0">
            <omf-dropdown-list [items]="scope.filterScopes"
                               [(selectedItemValue)]="scope.selectedFilterScope"
                               [onItemSelected]="scope.changeSelectedFilterScope">
            </omf-dropdown-list>
        </div>
        <omf-spinner [spinning]="scope.isLoadingLibraries" spinSize="md">
            <div class="col-sm-6" style="padding-right: 0" *ngIf="scope.libraries != undefined && scope.selectedFilterScope == ('Components.DocumentPicker.CurrentSite' | omfLocalize)">
                <omf-dropdown-list [items]="scope.libraries"
                                   textProperty="title"
                                   valueProperty="title"
                                   [(selectedItemValue)]="scope.selectedLibrary.title"
                                   [onItemDeselected]="scope.changeSelectedLibrary"
                                   [onItemSelected]="scope.changeSelectedLibrary">
                </omf-dropdown-list>
            </div>
        </omf-spinner>
    </div>
    <div *ngIf="scope.selectedFilterScope == ('Components.DocumentPicker.CurrentSite' | omfLocalize)">
        <fieldset [disabled]="scope.isLoadingLibraries">
            <div class="form-group omf-search-box-container">
                <input class="form-control omf-search-box" type="text" [(ngModel)]="scope.searchString" omf-input="scope.searchString" />
                <i class="fa fa-search"></i>
            </div>
            <div class="form-group">
                <ul class="omf-folder-navigations">
                    <li *ngFor="let folder of scope.folderNavigationNodes; let i = index">
                        <span *ngIf="!(i == scope.folderNavigationNodes.length - 1)">
                            <a (click)="scope.navigateToFolder(folder, i)" href="javascript:void(0)">{{folder.title}}</a>
                            <i class="fa fa-angle-right omf-separation"></i>
                        </span>
                        <span *ngIf="i == scope.folderNavigationNodes.length - 1">{{folder.title}}</span>
                    </li>
                </ul>
            </div>
            <div class="omf-document-picker-itemlist">
                <omf-spinner [spinning]="scope.isLoadingDocuments">
                    <div class="omf-document-picker-item"
                         *ngFor="let document of scope.documentsInCurrentSite | omfArrayFilter: filterFile : scope.searchString"
                         (click)="scope.changeSelectedDocument(document)"
                         [ngClass]="{ 'is-selected': document == scope.selectedDocument }">
                        <div class="col-sm-6">
                            <img class="omf-document-picker-item-icon" src="{{scope.getIcon(document)}}" />
                            <span class="omf-document-picker-item-title" [omfInnerHtml]="scope.getFileName(document)"></span>
                        </div>
                    </div>
                    <div *ngIf="scope.documentsInCurrentSite != undefined && scope.documentsInCurrentSite.length == 0">
                        {{'Components.DocumentPicker.NoResult' | omfLocalize}}
                    </div>
                </omf-spinner>
            </div>
            <button *ngIf="scope.isAllowUploadDocument" class="btn btn-default" (click)="scope.openUploadDocumentDialog()">{{'Components.DocumentPicker.UploadDocument' | omfLocalize}}</button>
        </fieldset>
    </div>
    <div *ngIf="(scope.selectedFilterScope == ('Components.DocumentPicker.AllSite' | omfLocalize)) || (scope.selectedFilterScope == ('Components.DocumentPicker.CurrentSiteCollection' | omfLocalize))">
        <div class="form-group omf-search-box-container">
            <input class="form-control omf-search-box" type="text" [(ngModel)]="scope.searchString" (keyup)="scope.searchAllSites()" />
            <i class="fa fa-search"></i>
        </div>
        <div class="omf-document-picker-itemlist">
            <omf-spinner [spinning]="scope.isLoadingDocuments">
                <div class="omf-document-picker-item-header" *ngIf="scope.documentsInAllSites.length > 0">
                    <div class="col-sm-6" style="padding-left: 0">
                        <span>{{'Components.DocumentPicker.Document' | omfLocalize}}</span>
                    </div>
                    <div class="col-sm-6" style="padding-right: 0">
                        <span>{{'Components.DocumentPicker.SiteTitle' | omfLocalize}}</span>
                    </div>
                </div>
                <div class="omf-document-picker-item" *ngFor="let document of scope.documentsInAllSites" (click)="scope.changeSelectedDocument(document)" [ngClass]="{ 'is-selected': document == scope.selectedDocument }">
                    <div class="col-sm-6" style="padding-left: 0">
                        <img class="omf-document-picker-item-icon" src="{{scope.getIcon(document)}}" />
                        <span class="omf-document-picker-item-title" [omfInnerHtml]="scope.getFileName(document)"></span>
                    </div>
                    <div class="col-sm-6" style="padding-right: 0">
                        <span class="omf-document-picker-item-webtitle">{{document.webTitle}}</span>
                    </div>
                </div>
                <div *ngIf="scope.documentsInAllSites.length == 0 && scope.completedSearch">
                    {{'Components.DocumentPicker.NoResult' | omfLocalize}}
                </div>
            </omf-spinner>
        </div>
    </div>
</div>