From 978d4153eddfacc9fc53def06cb10179e2e9c4e2 Mon Sep 17 00:00:00 2001
From: davidcanonieto <david.cano@alfresco.com>
Date: Wed, 12 Sep 2018 14:33:18 +0200
Subject: [PATCH] Added show more/fewer items buttons in Tag List Component
 (#3770)

---
 e2e/content-services/tag_component.e2e.ts     |  6 +-
 e2e/pages/adf/tagPage.js                      |  2 +-
 .../tag/services/tag.service.ts               |  4 +-
 .../tag/tag-list.component.html               | 31 +++++++--
 .../tag/tag-list.component.scss               | 18 ++++-
 .../tag/tag-list.component.ts                 | 66 ++++++++++++++++---
 6 files changed, 108 insertions(+), 19 deletions(-)

diff --git a/e2e/content-services/tag_component.e2e.ts b/e2e/content-services/tag_component.e2e.ts
index d65818db2c..518d92a364 100644
--- a/e2e/content-services/tag_component.e2e.ts
+++ b/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();
diff --git a/e2e/pages/adf/tagPage.js b/e2e/pages/adf/tagPage.js
index 4e963b9f6f..5dbad334aa 100644
--- a/e2e/pages/adf/tagPage.js
+++ b/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);
diff --git a/lib/content-services/tag/services/tag.service.ts b/lib/content-services/tag/services/tag.service.ts
index 77594a8e09..904ce93679 100644
--- a/lib/content-services/tag/services/tag.service.ts
+++ b/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)));
     }
 
diff --git a/lib/content-services/tag/tag-list.component.html b/lib/content-services/tag/tag-list.component.html
index 2e591b666c..942cc215e1 100644
--- a/lib/content-services/tag/tag-list.component.html
+++ b/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>
diff --git a/lib/content-services/tag/tag-list.component.scss b/lib/content-services/tag/tag-list.component.scss
index 2a7350d7c3..fb265aa178 100644
--- a/lib/content-services/tag/tag-list.component.scss
+++ b/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;
+}
diff --git a/lib/content-services/tag/tag-list.component.ts b/lib/content-services/tag/tag-list.component.ts
index 69c86e7207..1cba65e515 100644
--- a/lib/content-services/tag/tag-list.component.ts
+++ b/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;
+        }
+    }
 }