inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

add possible future configurability display mode document list and datatable (#2998)

Browse Source
This commit is contained in:
Eugenio Romano 2018-02-26 03:04:19 +00:00 committed by GitHub
parent 76cf4f178e
commit 97a10bde78
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 54 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
demo-shell/src/app/components/files/files.component.html
View File

@ -11,7 +11,7 @@
<adf-document-list
[currentFolderId]="'-recent-'"
locationFormat="/files"
[cardview]="true"
[display]="'gallery'"
[showHeader]="false"
[maxItems]="5"
(preview)="showFile($event)"
@ -67,8 +67,9 @@
<button
mat-icon-button
title="{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}"
(click)="toogleCardview()">
<mat-icon>view_comfy</mat-icon>
(click)="toogleGalleryView()">
<mat-icon *ngIf="displayMode === 'list'" >view_comfy</mat-icon>
<mat-icon *ngIf="displayMode === 'gallery'">list</mat-icon>
</button>
<button
mat-icon-button
@ -130,8 +131,9 @@
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item
(click)="toogleCardview()">
<mat-icon>view_comfy</mat-icon>
(click)="toogleGalleryView()">
<mat-icon *ngIf="displayMode === 'list'" >view_comfy</mat-icon>
<mat-icon *ngIf="displayMode === 'gallery'">list</mat-icon>
<span>{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}</span>
</button>
<button mat-menu-item
@ -171,7 +173,7 @@
[allowDropFiles]="true"
[selectionMode]="selectionMode"
[multiselect]="multiselect"
[cardview]="cardview"
[display]="displayMode"
[node]="nodeResult"
(error)="onNavigationError($event)"
(success)="resetError()"

21
demo-shell/src/app/components/files/files.component.ts
View File

@ -21,12 +21,19 @@ import {
} from '@angular/core';
import { MatDialog } from '@angular/material';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { MinimalNodeEntity, NodePaging, Pagination, PathElementEntity, MinimalNodeEntryEntity, SiteEntry } from 'alfresco-js-api';
import {
MinimalNodeEntity,
NodePaging,
Pagination,
PathElementEntity,
MinimalNodeEntryEntity,
SiteEntry
} from 'alfresco-js-api';
import {
AuthenticationService, ContentService, TranslationService,
FileUploadEvent, FolderCreatedEvent, LogService, NotificationService,
UploadService, DataColumn, DataRow, UserPreferencesService,
PaginationComponent, FormValues
PaginationComponent, FormValues, DisplayMode
} from '@alfresco/adf-core';
import { DocumentListComponent, PermissionStyleModel } from '@alfresco/adf-content-services';
@ -50,7 +57,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
fileNodeId: any;
showViewer = false;
showVersions = false;
cardview = false;
displayMode = DisplayMode.List;
toolbarColor = 'default';
@ -441,7 +448,11 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
this.turnedPreviousPage.emit(event);
}
toogleCardview(event: Pagination): void {
this.cardview = !this.cardview;
toogleGalleryView(): void {
if (this.displayMode === DisplayMode.List) {
this.displayMode = DisplayMode.Gallery;
} else {
this.displayMode = DisplayMode.List;
}
}
}

4
docs/datatable.component.md
View File

@ -138,7 +138,7 @@ export class DataTableDemo {
| allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
| loading | boolean | false | Flag that indicates if the datatable is in loading state and needs to show the loading template. Read the documentation above to see how to configure a loading template |
| showHeader | boolean | true | Toggles header visibility |
| cardview | boolean | true | enable the cardview mode |
| display | string | 'list' | change the display mode can be one of the values provided by the enum : **list**, **gallery** |
| selection | DataRow\[] | \[] | Contains selected rows |
### Events
@ -205,7 +205,7 @@ If you want enable the card view mode you need to set to true the input paramete
```html
<adf-datatable
[data]="data"
[cardview]="true">
[display]="'gallery'">
</adf-datatable
```

4
docs/document-list.component.md
View File

@ -79,7 +79,7 @@ Displays the documents from a repository.
| skipCount | `number` | `0` | Number of elements to skip over for pagination purposes |
| enableInfiniteScrolling | `boolean` | `false` | Set document list to work in infinite scrolling mode |
| showHeader | `boolean` | `true` | Toggles header visibility |
| cardview | `boolean` | `false` | Enable the cardview mode |
| display | string | 'list' | change the display mode can be one of the values provided by the enum : **list**, **gallery** |
### Events
@ -141,7 +141,7 @@ If you want enable the card view mode you need to set to true the input paramete
```html
<adf-document-list
[currentFolderId]="'-my-'"
[cardview]="true">
[display]="'gallery'">
</adf-document-list>
```

2
lib/content-services/document-list/components/document-list.component.html
View File

@ -9,7 +9,7 @@
[rowStyle]="rowStyle"
[rowStyleClass]="rowStyleClass"
[loading]="loading"
[cardview]="cardview"
[display]="display"
[noPermission]="noPermission"
[showHeader]="!isEmpty() && showHeader"
(showRowContextMenu)="onShowRowContextMenu($event)"

4
lib/content-services/document-list/components/document-list.component.spec.ts
View File

@ -220,7 +220,7 @@ describe('DocumentList', () => {
});
it('should use the cardview style if cardview is true', (done) => {
documentList.cardview = true;
documentList.display = 'gallery';
fixture.detectChanges();
@ -232,7 +232,7 @@ describe('DocumentList', () => {
});
it('should use the base document list style if cardview is false', (done) => {
documentList.cardview = false;
documentList.display = 'list';
fixture.detectChanges();

5
lib/content-services/document-list/components/document-list.component.ts
View File

@ -21,6 +21,7 @@ import {
DataRowActionEvent,
DataSorting,
DataTableComponent,
DisplayMode,
ObjectDataColumn,
PaginatedComponent,
PaginationQueryParams
@ -71,9 +72,9 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
@ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
/* Enable the cardview mode */
/* change the display mode of the table list or gallery */
@Input()
cardview: boolean = false;
display: string = DisplayMode.List;
/** Define a set of CSS styles styles to apply depending on the permission
* of the user on that node. See the Permission Style model

22
lib/core/datatable/components/datatable/datatable.component.html
View File

@ -1,9 +1,9 @@
<div
*ngIf="data" class="full-width adf-data-table-card"
[class.adf-data-table-card]="cardview"
[class.adf-data-table]="!cardview">
*ngIf="data" class="full-width"
[class.adf-data-table-card]="display === 'gallery'"
[class.adf-data-table]="display === 'list'">
<div *ngIf="showHeader && !loading" class="adf-datatable-header">
<div class="adf-datatable-row" *ngIf="!cardview">
<div class="adf-datatable-row" *ngIf="display === 'list'">
<!-- Actions (left) -->
<div *ngIf="actions && actionsPosition === 'left'" class="actions-column adf-datatable-table-cell-header">
<span class="sr-only">Actions</span>
@ -31,7 +31,7 @@
<span class="sr-only">Actions</span>
</div>
</div>
<mat-form-field *ngIf="cardview">
<mat-form-field *ngIf="display === 'gallery'">
<mat-select [value]="getSortingKey()">
<mat-option *ngFor="let col of getSortableColumns()"
[value]="col.key"
@ -174,8 +174,8 @@
</div>
<div *ngIf="data.getRows().length === 0"
[class.adf-datatable-row]="!cardview"
[class.adf-data-table-card-empty]="cardview">
[class.adf-datatable-row]="display === 'list'"
[class.adf-data-table-card-empty]="display === 'gallery'">
<div class="adf-no-content-container adf-datatable-table-cell"
[attr.colspan]="1 + data.getColumns().length">
<ng-template *ngIf="noContentTemplate"
@ -187,8 +187,8 @@
</div>
</ng-container>
<div *ngIf="!loading && noPermission"
[class.adf-datatable-row]="!cardview"
[class.adf-data-table-card-permissions]="cardview">
[class.adf-datatable-row]="display === 'list'"
[class.adf-data-table-card-permissions]="display === 'gallery'">
class="adf-no-permission__row">
<div class="adf-no-permission__cell adf-no-content-container adf-datatable-table-cell">
<ng-template *ngIf="noPermissionTemplate"
@ -198,8 +198,8 @@
</div>
</div>
<div *ngIf="loading"
[class.adf-datatable-row]="!cardview"
[class.adf-data-table-card-loading]="cardview">
[class.adf-datatable-row]="display === 'list'"
[class.adf-data-table-card-loading]="display === 'gallery'">
<div class="adf-datatable-table-cell"
[attr.colspan]="1 + data.getColumns().length">
<ng-template *ngIf="loadingTemplate"

4
lib/core/datatable/components/datatable/datatable.component.spec.ts
View File

@ -60,7 +60,7 @@ describe('DataTable', () => {
[new ObjectDataColumn({ key: 'name' })]
);
dataTable.cardview = true;
dataTable.display = 'gallery';
dataTable.ngOnChanges({
data: new SimpleChange(null, newData, false)
});
@ -80,7 +80,7 @@ describe('DataTable', () => {
[new ObjectDataColumn({ key: 'name' })]
);
dataTable.cardview = false;
dataTable.ngOnChanges({
data: new SimpleChange(null, newData, false)
});

9
lib/core/datatable/components/datatable/datatable.component.ts
View File

@ -38,6 +38,11 @@ import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/buffer';
import 'rxjs/add/operator/filter';
export enum DisplayMode {
List = 'list',
Gallery = 'gallery'
}
@Component({
selector: 'adf-datatable',
styleUrls: ['./datatable.component.scss'],
@ -53,9 +58,9 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
@Input()
data: DataTableAdapter;
/* Enable the cardview mode */
/* change the display mode of the table list or gallery */
@Input()
cardview: boolean = false;
display: string = DisplayMode.List;
/* The rows that the datatable will show */
@Input()