[ACS-4523] Assigning content to categories (#8451)

* [ACS-4523] Add categories management mode component, manage mode completed * [ACS-4523] Add categories management fixes and unit tests * [ACS-4523] Add unit tests to content metadata * ACS-4523] CR fixes * [ACS-4523] Tag and category name controls decoupled * [ACS-4523] CR fixes * [ACS-4523] CR fixes * [ACS-4523] CR fixes * [ACS-4523] Display path for already linked categories * [ACS-4523] Add new license header * [ACS-4523] Fix category service import
Alfresco · Apr 20, 2023 · a563dc2 · a563dc2
1 parent e9b8d99
commit a563dc2
Show file tree

Hide file tree

Showing 25 changed files with 1,619 additions and 123 deletions.
diff --git a/docs/content-services/components/categories-management.component.md b/docs/content-services/components/categories-management.component.md
@@ -0,0 +1,44 @@
+---
+Title: Categories management component
+Added: v6.0.0-A.3
+Status: Active
+Last reviewed: 2023-04-07
+---
+
+# [Categories management component](../../../lib/content-services/src/lib/category/categories-management/categories-management.component.ts "Defined in categories-management.component.ts")
+
+Component allows to both assign/unassign categories to content and create multiple categories depending on selected mode. In assign mode component is composed of: list of categories that will be assigned to a file, input to search for existing categories that user can select and second list under the input containing existing categories that node can be assigned to. In crud mode component is composed of: list of categories that will be created, input to type a name of category that will be created and a list of categories existing under a given parent, in this mode existing categories are not selectable.
+
+## Basic Usage
+
+```html
+<adf-categories-management
+    [(categoryNameControlVisible)]="categoryControlVisible"
+    [disableRemoval]="saving"
+    [categories]="categories"
+    [parentId]="parentId"
+    [managementMode]="categoriesManagementMode"
+    [classifiableChanged]="classifiableChanged"
+    (categoriesChange)="storeCategoriesToAssign($event)">
+</adf-categories-management>
+```
+
+## Class members
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| categories | [`Category`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/Category.md)[] | [] | List of categories to assign/create. |
+| categoryNameControlVisible | `boolean` | false | Determines if category name control is visible. |
+| classifiableChanged | [`Observable<void>`](https://rxjs.dev/guide/observable) | | (optional) Observable emitting when `classifiable` aspect changes for a given node. |
+| disableRemoval | `boolean` | false | Determines if categories assigned/created can be unassigned/removed from the list. |
+| managementMode | `CategoriesManagementMode` | | Management mode determines if component works in assign/unassign mode or create mode. |
+| parentId | `string` | | (optional) ID of a parent category that new categories will be created under. |
+
+### Events
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| categoriesChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`Category`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/Category.md)`>` | Emitted when categories list changes. |
+| categoryNameControlVisibleChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when category name control visibility changes. |
diff --git a/docs/content-services/services/category.service.md b/docs/content-services/services/category.service.md
@@ -43,6 +43,25 @@ Manages categories in Content Services.
     -   _skipCount:_ `number`  - Specify how many first results should be skipped. Default 0.
     -   _maxItems:_ `number`  - (Optional) Specify max number of returned categories. Default is specified by [UserPreferencesService](../../core/services/user-preferences.service.md).
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`ResultSetPaging`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/search-rest-api/docs/ResultSetPaging.md)`>` - [`Observable`](http://reactivex.io/documentation/observable.html)&lt;ResultSetPaging> Found categories which name contains searched name.
+-   **updateCategory**(categoryId: `string`, payload: `CategoryBody`): [`Observable`](http://reactivex.io/documentation/observable.html)`<CategoryEntry>`<br/>
+    Updates category
+    -   _categoryId:_ `string`  - The identifier of a category.
+    -   _payload:_ `CategoryBody`  - Updated category body
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<CategoryEntry>` - [`Observable`](http://reactivex.io/documentation/observable.html)&lt;CategoryEntry>
+-   **getCategoryLinksForNode**(nodeId: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`CategoryPaging`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/api/content-rest-api/docs/CategoryPaging.md)`>`<br/>
+    Provides list of categories that node is linked to.
+    -   _nodeId:_ `string`  - Id of a node that is linked to categories
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`CategoryPaging`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/api/content-rest-api/docs/CategoryPaging.md)`>` - Found categories that node is linked to.
+-   **unlinkNodeFromCategory**(nodeId: `string`, categoryId: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<void>`<br/>
+    Unlinks category from a node.
+    -   _nodeId:_ `string`  - The identifier of a node.
+    -   _categoryId:_ `string`  - The identifier of a category.
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<void>`
+-   **linkNodeToCategory**(nodeId: `string`, categoryLinkBodyCreate: `CategoryLinkBody[]`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`CategoryPaging`]((https://github.com/Alfresco/alfresco-js-api/blob/master/src/api/content-rest-api/docs/CategoryPaging.md))` | `[`CategoryEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/api/content-rest-api/docs/CategoryEntry.md)`>`<br/>
+    Links node to a category.
+    -   _nodeId:_ `string`  - The identifier of a node.
+    -   _categoryLinkBodyCreate:_ [`CategoryLinkBody[]`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/api/content-rest-api/docs/CategoryLinkBody.md)  - Categories that node will be linked to.
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`CategoryPaging`]((https://github.com/Alfresco/alfresco-js-api/blob/master/src/api/content-rest-api/docs/CategoryPaging.md))` | `[`CategoryEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/api/content-rest-api/docs/CategoryEntry.md)`>` - Categories that node has been linked to.
 
 ## Details
 

diff --git a/lib/content-services/src/lib/category/categories-management/categories-management-mode.ts b/lib/content-services/src/lib/category/categories-management/categories-management-mode.ts
@@ -0,0 +1,21 @@
+/*!
+ * @license
+ * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export enum CategoriesManagementMode {
+    CRUD,
+    ASSIGN
+}
diff --git a/...tent-services/src/lib/category/categories-management/categories-management.component.html b/...tent-services/src/lib/category/categories-management/categories-management.component.html
@@ -0,0 +1,85 @@
+<div class="adf-categories-management">
+    <p *ngIf="!categories.length && !categoryNameControlVisible"
+       class="adf-no-categories-message">
+        {{ isCRUDMode ? 'CATEGORIES_MANAGEMENT.NO_CATEGORIES_CREATED' : 'CATEGORIES_MANAGEMENT.NO_CATEGORIES_ASSIGNED' | translate }}
+    </p>
+    <div class="adf-categories-list"
+         [class.adf-categories-list-fixed]="!categoryNameControlVisible">
+        <span
+            *ngFor="let category of categories"
+            [class.adf-categories-padded]="!isCRUDMode"
+            class="adf-assigned-categories">
+            {{ category.name }}
+            <button
+                data-automation-id="categories-remove-category-button"
+                mat-icon-button
+                [class.adf-btn-padded]="!isCRUDMode"
+                (click)="removeCategory(category)"
+                [attr.title]="isCRUDMode ? 'CATEGORIES_MANAGEMENT.DELETE_CATEGORY' : 'CATEGORIES_MANAGEMENT.UNASSIGN_CATEGORY' | translate"
+                [disabled]="disableRemoval">
+                <mat-icon>remove</mat-icon>
+            </button>
+        </span>
+    </div>
+    <div *ngIf="((!categoryNameControlVisible && categories.length)) || categoryNameControlVisible"
+        [hidden]="!categoryNameControlVisible"
+        class="adf-category-name-field">
+        <mat-form-field>
+            <mat-icon matPrefix>search</mat-icon>
+            <mat-label id="adf-category-name-input-label">
+                {{ 'CATEGORIES_MANAGEMENT.NAME' | translate }}
+            </mat-label>
+            <input
+                #categoryNameInput
+                matInput
+                autocomplete="off"
+                [formControl]="categoryNameControl"
+                (keyup.enter)="addCategory()"
+                aria-labelledby="adf-category-name-input-label"
+                adf-auto-focus
+            />
+            <mat-error [hidden]="!categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
+        </mat-form-field>
+        <button
+            mat-icon-button
+            [class.adf-btn-padded]="!isCRUDMode"
+            (click)="hideNameInput()"
+            [attr.title]="'CATEGORIES_MANAGEMENT.HIDE_INPUT' | translate">
+            <mat-icon>remove</mat-icon>
+        </button>
+    </div>
+</div>
+<div class="adf-existing-categories-panel" *ngIf="existingCategoriesPanelVisible">
+    <ng-container *ngIf="isCRUDMode && (!existingCategoriesLoading || existingCategories)">
+        <span class="adf-create-category-label"
+            (click)="addCategory()"
+            [hidden]="categoryNameControl.invalid || typing">
+            {{ 'CATEGORIES_MANAGEMENT.GENERIC_CREATE' | translate : { name: categoryNameControl.value } }}
+        </span>
+    </ng-container>
+    <div *ngIf="categoryNameControlVisible" class="adf-categories-list">
+        <ng-container *ngIf="!existingCategoriesLoading && existingCategories">
+            <p class="adf-existing-categories-label">
+                {{ isCRUDMode ? 'CATEGORIES_MANAGEMENT.EXISTING_CATEGORIES' : 'CATEGORIES_MANAGEMENT.SELECT_EXISTING_CATEGORY' | translate }}
+            </p>
+            <mat-selection-list
+                [disabled]="isCRUDMode"
+                (selectionChange)="addCategoryToAssign($event)">
+                <mat-list-option
+                    *ngFor="let category of existingCategories"
+                    class="adf-category"
+                    [value]="category">
+                    {{ category.name }}
+                </mat-list-option>
+                <p *ngIf="!existingCategories?.length && !existingCategoriesLoading">
+                    {{ 'CATEGORIES_MANAGEMENT.NO_EXISTING_CATEGORIES' | translate }}
+                </p>
+            </mat-selection-list>
+        </ng-container>
+        <mat-spinner
+            *ngIf="existingCategoriesLoading"
+            [diameter]="50"
+            [attr.aria-label]="'CATEGORIES_MANAGEMENT.LOADING' | translate">
+        </mat-spinner>
+    </div>
+</div>
diff --git a/...tent-services/src/lib/category/categories-management/categories-management.component.scss b/...tent-services/src/lib/category/categories-management/categories-management.component.scss
@@ -0,0 +1,79 @@
+.adf-categories-management {
+    .adf-category-name-field {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+
+        mat-form-field {
+            width: 100%;
+        }
+
+        .adf-btn-padded {
+            margin-right: -14px;
+        }
+    }
+
+    .adf-assigned-categories {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        word-break: break-word;
+
+        .adf-btn-padded {
+            margin-right: -14px;
+        }
+    }
+
+    .adf-categories-padded {
+        padding: 5px 0;
+    }
+
+    [hidden] {
+        visibility: hidden;
+    }
+}
+
+.adf-categories-list {
+    padding-bottom: 10px;
+
+    .mat-list-base .mat-list-item,
+    .mat-list-base .mat-list-option {
+        display: flex;
+        height: 100%;
+        overflow-wrap: anywhere;
+        padding: 5px 0;
+        font-size: 14px;
+
+        &.mat-list-item-disabled {
+            background-color: inherit;
+            color: inherit;
+        }
+
+        .mat-list-item-content,
+        .mat-list-item-content-reverse {
+            padding: 0;
+
+            .mat-pseudo-checkbox {
+                display: none;
+            }
+        }
+    }
+
+    .adf-existing-categories-label {
+        font-size: 10px;
+        color: var(--theme-secondary-text-color);
+        margin-bottom: 2px;
+    }
+
+    mat-spinner {
+        margin: auto;
+    }
+}
+
+.adf-existing-categories-panel {
+    .adf-create-category-label {
+        color: var(--theme-primary-color);
+        cursor: pointer;
+        overflow-wrap: anywhere;
+    }
+}