Added show more/fewer items buttons in Tag List Component (#3770)

e2e/content-services/tag_component.e2e.ts

@@ -38,7 +38,10 @@ describe('Tag component', () => {
     let pdfFileModel = new FileModel({ 'name': resources.Files.ADF_DOCUMENTS.PDF.file_name });
     let deleteFile = new FileModel({ 'name': Util.generateRandomString() });
     let sameTag = Util.generateRandomStringToLowerCase();
-    let tagList = [Util.generateRandomStringToLowerCase(), Util.generateRandomStringToLowerCase()];
+    let tagList = [
+        Util.generateRandomStringToLowerCase(),
+        Util.generateRandomStringToLowerCase(),
+        Util.generateRandomStringToLowerCase()];
     let uppercaseTag = Util.generateRandomStringToUpperCase();
     let digitsTag = Util.generateRandomStringDigits();
     let nonLatinTag = Util.generateRandomStringNonLatin();
@@ -100,6 +103,7 @@ describe('Tag component', () => {
 
     it('[C260378] Multiple tags', () => {
         tagPage.insertNodeId(pdfFileModel.id);
+        tagPage.addTag(tagList[2]);
         tagPage.checkTagListIsOrderedAscending();
         tagPage.checkTagListByNodeIdIsOrderedAscending();
         tagPage.checkTagListContentServicesIsOrderedAscending();

e2e/pages/adf/tagPage.js

@@ -30,7 +30,7 @@ var TagPage = function () {
     var errorMessage = element(by.css("mat-hint[data-automation-id='errorMessage']"));
     var tagListRowLocator = by.css("adf-tag-node-actions-list mat-list-item div");
     var tagListByNodeIdRowLocator = by.css("adf-tag-node-list mat-chip span");
-    var tagListContentServicesRowLocator = by.css("div[class='adf-list-tag']");
+    var tagListContentServicesRowLocator = by.css("div[class*='adf-list-tag']");
 
     this.goToTagPage = function () {
         browser.driver.get(tagURL);

lib/content-services/tag/services/tag.service.ts

@@ -47,8 +47,8 @@ export class TagService {
      * Gets a list of all the tags already defined in the repository.
      * @returns TagPaging object (defined in JSAPI) containing the tags
      */
-    getAllTheTags(): Observable<TagPaging> {
-        return from(this.apiService.getInstance().core.tagsApi.getTags())
+    getAllTheTags(opts?: any): Observable<TagPaging> {
+        return from(this.apiService.getInstance().core.tagsApi.getTags(opts))
             .pipe(catchError(err => this.handleError(err)));
     }
 

lib/content-services/tag/tag-list.component.html

@@ -1,5 +1,26 @@
-<mat-list>
-    <mat-list-item *ngFor="let currentEntry of tagsEntries; let idx = index">
-        <div class="adf-list-tag" id="tag_name_{{idx}}">{{currentEntry.entry.tag}}</div>
-    </mat-list-item>
-</mat-list>
+<mat-chip-list class="adf-tag-chips-list">
+    <div class="adf-list-tag" *ngFor="let currentEntry of tagsEntries; let idx = index">
+        <mat-chip class="adf-primary-background-color">
+            <span id="tag_name_{{idx}}">{{currentEntry.entry.tag}}</span>
+        </mat-chip>
+    </div>
+</mat-chip-list>
+
+<div class="adf-tag-list-controls">
+    <button
+        *ngIf="!isSizeMinimum"
+        [disabled]="isLoading"
+        data-automation-id="show-fewer-tags"
+        mat-icon-button
+        (click)="loadLessTags()">
+        <mat-icon>keyboard_arrow_up</mat-icon>
+    </button>
+    <button
+        *ngIf="pagination.hasMoreItems"
+        [disabled]="isLoading"
+        data-automation-id="show-more-tags"
+        mat-icon-button
+        (click)="loadMoreTags()">
+        <mat-icon>keyboard_arrow_down</mat-icon>
+    </button>
+</div>

lib/content-services/tag/tag-list.component.scss

@@ -1,4 +1,20 @@
+.adf-tag-chips-list {
+    display: flex;
+    flex-direction: column;
+
+    & div {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
 .adf-list-tag{
-    padding: 16px;
+    display: block;
     font-size: 16px;
 }
+
+.adf-tag-list-controls {
+    margin-top: 30px;
+    display: flex;
+    justify-content: center;
+}

lib/content-services/tag/tag-list.component.ts

@@ -17,12 +17,11 @@
 
 import { Component, EventEmitter, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { TagService } from './services/tag.service';
+import { PaginationModel } from '@alfresco/adf-core';
 
 /**
- *
  * This component provide a list of all the tag inside the ECM
  */
-
 @Component({
     selector: 'adf-tag-list',
     templateUrl: './tag-list.component.html',
@@ -31,30 +30,79 @@ import { TagService } from './services/tag.service';
 })
 export class TagListComponent implements OnInit {
 
-    tagsEntries: any;
-
     /** Emitted when a tag is selected. */
     @Output()
     result = new EventEmitter();
 
+    /**
+     * Array of tags that are displayed
+     */
+    tagsEntries: any = [];
+
+    /**
+     * Number of items per iteration
+     */
+    size: number = 10;
+
+    defaultPagination: PaginationModel;
+    pagination: PaginationModel;
+
+    isLoading = false;
+    isSizeMinimum = true;
+
     /**
      * Constructor
      * @param tagService
      */
     constructor(private tagService: TagService) {
+
+        this.defaultPagination = {
+            skipCount: 0,
+            maxItems: this.size,
+            hasMoreItems: false
+        };
+
+        this.pagination = this.defaultPagination;
+
         this.tagService.refresh.subscribe(() => {
-            this.refreshTag();
+            this.tagsEntries = [];
+            this.refreshTag(this.defaultPagination);
         });
     }
 
     ngOnInit() {
-        return this.refreshTag();
+        return this.refreshTag(this.defaultPagination);
     }
 
-    refreshTag() {
-        this.tagService.getAllTheTags().subscribe((data: any) => {
-            this.tagsEntries = data.list.entries;
+    refreshTag(opts?: any) {
+        this.tagService.getAllTheTags(opts).subscribe((tags: any) => {
+            this.tagsEntries = this.tagsEntries.concat(tags.list.entries);
+            this.pagination = tags.list.pagination;
             this.result.emit(this.tagsEntries);
+            this.isLoading = false;
         });
     }
+
+    loadMoreTags() {
+        if (this.pagination.hasMoreItems) {
+            this.isLoading = true;
+            this.isSizeMinimum = false;
+
+            this.refreshTag({
+                skipCount: this.pagination.skipCount + this.pagination.count,
+                maxItems: this.size
+            });
+        }
+    }
+
+    loadLessTags() {
+        this.isSizeMinimum = false;
+        this.tagsEntries = this.tagsEntries.slice(0, this.tagsEntries.length - this.pagination.count);
+        this.pagination.skipCount = this.pagination.skipCount - this.pagination.count;
+        this.pagination.hasMoreItems = true;
+
+        if (this.tagsEntries.length <= this.size) {
+            this.isSizeMinimum = true;
+        }
+    }
 }