inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-5645] Implemented changes as per review comments

Browse Source
This commit is contained in:
Yasa-Nataliya
2023-10-09 20:23:58 +05:30
parent f0de971e8e
commit 702805f039
14 changed files with 51 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/content-services/components/categories-management.component.md
-29
View File
@@ -42,32 +42,3 @@ Component allows to both assign/unassign categories to content and create multip
| ---- | ---- | ----------- |
| 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. |
## Method: `get isNameCategoryVisible(): boolean`
### Description
This method calculates and returns a boolean value indicating whether the category name control should be visible in the Categories Management Component. The visibility is determined by a specific condition based on the component's internal state.
### Return Value
- Type: `boolean`
- `true` if the category name control should be visible.
- `false` if the category name control should not be visible.
### Usage
You can access this method to determine the visibility of the category name control within the Categories Management Component. The method is used to control the display of the category name input field based on the following condition:
```typescript
return (!this.categoryNameControlVisible && this.categories?.length > 0) || this.categoryNameControlVisible;
```
## Method: `isCategoryEmpty(): boolean`
### Description
The `isCategoryEmpty` method is used within the Categories Management Component to determine whether the list of categories is empty. It returns a boolean value indicating the presence or absence of categories.
### Return Value
- Type: `boolean`
- `true` if the list of categories is not empty.
- `false` if the list of categories is empty.
### Usage
You can use this method to check whether there are categories present in the Categories Management Component. It's particularly useful when you need to conditionally display or hide elements based on the presence of categories.
docs/content-services/components/tags-creator.component.md
-25
View File
@@ -38,28 +38,3 @@ Allows to create multiple tags. That component contains input and two lists. Top
| tagNameControlVisibleChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when input is showing or hiding. |
| tagsChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string[]>` | Emitted when tags in top list are changed. |
## Method: `get isNameTagsVisible(): boolean`
### Description
The `isNameTagsVisible` method is used within the Tags Creator Component to determine whether the tag name control should be visible. It calculates a boolean value based on specific conditions that take into account the visibility of the tag name control and the presence of tags in the component.
### Return Value
- Type: `boolean`
- `true` if the tag name control should be visible.
- `false` if the tag name control should not be visible.
### Usage
You can use this method to control the visibility of the tag name input field within the Tags creator Component. It provides a way to dynamically show or hide the input field based on certain criteria.
## Method: `get isTagsEmpty(): boolean`
### Description
The `isTagsEmpty` method is a utility method used within the Tags creator Component to check whether the list of tags is empty or not. It returns a boolean value, indicating whether there are tags present in the component.
### Return Value
- Type: `boolean`
- `true` if the list of tags is not empty.
- `false` if the list of tags is empty.
### Usage
You can use this method to programmatically determine whether there are tags available in the Tags creator Component. It is particularly useful when you need to conditionally display messages, elements, or take specific actions based on the presence or absence of tags.
lib/content-services/src/lib/category/categories-management/categories-management.component.html
+1 -1
View File
@@ -30,7 +30,7 @@
</button>
</span>
</div>
<p *ngIf="!isCategoryEmpty" class="adf-no-categories-message">
<p *ngIf="!hasCategory" class="adf-no-categories-message">
{{ noCategoriesMsg | translate }}
</p>
</div>
lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts
+5 -5
View File
@@ -240,16 +240,16 @@ describe('CategoriesManagementComponent', () => {
});
});
describe('isCategoryEmpty', () => {
it('should return true when categories is not empty', () => {
describe('hasCategory', () => {
it('should return true when has categories', () => {
component.categories = [category3, category4];
const result = component.isCategoryEmpty;
const result = component.hasCategory;
expect(result).toBeTrue();
});
it('should return false when categories is empty', () => {
it('should return false when does not have categories', () => {
component.categories = [];
const result = component.isCategoryEmpty;
const result = component.hasCategory;
expect(result).toBeFalse();
});
});
lib/content-services/src/lib/category/categories-management/categories-management.component.ts
+7 -1
View File
@@ -177,6 +177,9 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
this.cancelExistingCategoriesLoading$.complete();
}
/*
* Returns `true` if categoryNameControlVisible is true, otherwise `false`
*/
get isNameCategoryVisible(): boolean {
return (!this.categoryNameControlVisible && this.categories?.length > 0) || this.categoryNameControlVisible;
}
@@ -185,7 +188,10 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
return this._categoryNameControl;
}
get isCategoryEmpty(): boolean {
/*
* Returns `true` if has categories, otherwise `false`
*/
get hasCategory(): boolean {
return this.categories?.length > 0;
}
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
+8 -4
View File
@@ -30,7 +30,8 @@
<button mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
(click)="cancelChanges(buttonType.GeneralInfo, $event, group)"
data-automation-id="reset-metadata">
data-automation-id="reset-metadata"
class="adf-metadata-action-buttons-clear">
<mat-icon>clear</mat-icon>
</button>
<button mat-icon-button
@@ -84,7 +85,8 @@
<button mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
(click)="cancelChanges(buttonType.Tags, $event, group)"
data-automation-id="reset-tags-metadata">
data-automation-id="reset-tags-metadata"
class="adf-metadata-action-buttons-clear">
<mat-icon>clear</mat-icon>
</button>
<button mat-icon-button
@@ -146,7 +148,8 @@
<button mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
(click)="cancelChanges(buttonType.Categories, $event, group)"
data-automation-id="reset-metadata">
data-automation-id="reset-metadata"
class="adf-metadata-action-buttons-clear">
<mat-icon>clear</mat-icon>
</button>
<button mat-icon-button
@@ -216,7 +219,8 @@
<button mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
(click)="cancelChanges(buttonType.Group, $event, group)"
data-automation-id="reset-metadata">
data-automation-id="reset-metadata"
class="adf-metadata-action-buttons-clear">
<mat-icon>clear</mat-icon>
</button>
<button mat-icon-button
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
+6 -3
View File
@@ -4,7 +4,7 @@
height: 56px;
.adf-metadata-properties-title {
font-weight: normal;
font-weight: 700;
font-size: 15px;
padding-left: 12px;
}
@@ -78,7 +78,10 @@
&-metadata-action-buttons {
display: flex;
justify-content: space-evenly;
margin: 10px;
&-clear {
color: var(--theme-metadata-action-button-clear-color);
}
}
&-metadata-categories-header {
@@ -111,7 +114,7 @@
}
.adf-content-metadata-card {
.mat-card:not([class*='mat-elevation-z']) {
.mat-card {
box-shadow: none;
}
}
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts
+6 -1
View File
@@ -49,8 +49,9 @@ import { TagService } from '../../../tag/services/tag.service';
import { CategoryService } from '../../../category/services/category.service';
import { CategoriesManagementMode } from '../../../category/categories-management/categories-management-mode';
import { MatExpansionPanel } from '@angular/material/expansion';
import { AllowableOperationsEnum, ContentService } from '@alfresco/adf-content-services';
import { ButtonType } from './button-type.enum';
import { AllowableOperationsEnum } from '../../../common/models/allowable-operations.enum';
import { ContentService } from '../../../common/services/content.service';
const DEFAULT_SEPARATOR = ', ';
@@ -151,12 +152,15 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
@Output()
groupChange = new EventEmitter<CardViewGroup>();
/** (optional) This flag toggles editable of categories content. **/
@Input()
editableCategories = false;
/** (optional) This flag toggles editable of tags content. **/
@Input()
editableTags = false;
/** group content state **/
@Input()
group: CardViewGroup;
@@ -360,6 +364,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
this.loadProperties(this.node);
}
// Returns the editing state of the panel
isEditingPanel(): boolean {
return (
(this.editable && this.hasMetadataChanged) ||
lib/content-services/src/lib/content-metadata/interfaces/card-view-group.interface.ts
+2 -2
View File
@@ -20,6 +20,6 @@ import { CardViewItem } from '@alfresco/adf-core';
export interface CardViewGroup {
title: string;
properties: CardViewItem[];
editable: boolean;
expanded: boolean;
editable?: boolean;
expanded?: boolean;
}
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
+1 -1
View File
@@ -14,7 +14,7 @@
</div>
<p
class="adf-no-tags-message"
*ngIf="!isTagsEmpty">
*ngIf="!hasTags">
{{ 'TAG.TAGS_CREATOR.NO_TAGS_CREATED' | translate }}
</p>
<div
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts
+6 -5
View File
@@ -337,15 +337,16 @@ describe('TagsCreatorComponent', () => {
});
});
describe('isTagsEmpty', () => {
it('should return true when tags is not empty', () => {
describe('hasTags', () => {
it('should return true when has tags', () => {
component.tags = ['new tag 1', 'new tag 2'];
const result = component.isTagsEmpty;
const result = component.hasTags;
expect(result).toBeTrue();
});
it('should return false when tags is empty', () => {
it('should return false when does not have tags', () => {
component.tags = [];
const result = component.isTagsEmpty;
const result = component.hasTags;
expect(result).toBeFalse();
});
});
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts
+7 -1
View File
@@ -219,11 +219,17 @@ export class TagsCreatorComponent implements OnInit, OnDestroy {
return this._tagNameControl;
}
/*
* Returns `true` if tagNameControlVisible is true, otherwise `false`
*/
get isNameTagsVisible(): boolean {
return (!this.tagNameControlVisible && this.tags?.length > 0) || this.tagNameControlVisible;
}
get isTagsEmpty(): boolean {
/*
* Returns `true` if has tags, otherwise `false`
*/
get hasTags(): boolean {
return this.tags?.length > 0;
}
lib/core/src/lib/styles/_components-variables.scss
+1
View File
@@ -47,6 +47,7 @@
--adf-user-info-container-margin-right: $adf-ref-margin-right,
--theme-metadata-property-panel-border-color: $metadata-property-panel-border-color,
--theme-metadata-buttons-background-color: $metadata-buttons-background-color,
--theme-metadata-action-button-clear-color: $metadata-action-button-clear-color
);
// propagates SCSS variables into the CSS variables scope
lib/core/src/lib/styles/_reference-variables.scss
+1
View File
@@ -29,3 +29,4 @@ $adf-ref-line-height: 40px;
$adf-ref-margin-right: 8px;
$metadata-property-panel-border-color: rgba(0, 0, 0, 0.12);
$metadata-buttons-background-color: rgba(33, 33, 33, 0.05);
$metadata-action-button-clear-color: #212328b2;