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

refactor: simplify panel state management and enhance template syntax in content metadata component

Browse Source 
- Replaced inline conditional checks with dedicated methods for panel expansion and editing states.
- Updated template syntax to improve readability and maintainability using @if syntax.
- Removed unused CommonModule import and added AsyncPipe for better performance.
This commit is contained in:
Denys Vuika
2026-02-27 13:05:52 +00:00
parent 24a7e55b68
commit 8b4324cfec
2 changed files with 198 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
+47 -25
View File
@@ -1,10 +1,13 @@
@let isExpandedProperties = (currentPanel.panelTitle === DefaultPanels.PROPERTIES && currentPanel.expanded) ?? false;
@let isExpandedTags = (currentPanel.panelTitle === DefaultPanels.TAGS && currentPanel.expanded) ?? false;
@let isExpandedCategories = (currentPanel.panelTitle === DefaultPanels.CATEGORIES && currentPanel.expanded) ?? false;
@let isExpandedProperties = isPanelExpanded(DefaultPanels.PROPERTIES);
@let isExpandedTags = isPanelExpanded(DefaultPanels.TAGS);
@let isExpandedCategories = isPanelExpanded(DefaultPanels.CATEGORIES);
@let isEditingTags = isPanelEditing(DefaultPanels.TAGS);
@let isEditingCategories = isPanelEditing(DefaultPanels.CATEGORIES);
@let isEditingProperties = isPanelEditing(DefaultPanels.PROPERTIES);
<mat-accordion displayMode="flat" [multi]="multi" class="adf-metadata-properties">
@if (displayDefaultProperties) {
<mat-expansion-panel
*ngIf="displayDefaultProperties"
class="adf-content-metadata-panel"
[expanded]="isExpandedProperties"
(opened)="expandPanel(DefaultPanels.PROPERTIES)"
@@ -18,8 +21,8 @@
<adf-content-metadata-header
[title]="'CORE.METADATA.BASIC.HEADER'"
[expanded]="isExpandedProperties">
@if (!readOnly && !isEditingProperties) {
<button
*ngIf="!readOnly && !isPanelEditing(DefaultPanels.PROPERTIES)"
mat-icon-button
(click)="toggleGroupEditing(DefaultPanels.PROPERTIES, $event)"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
@@ -28,7 +31,9 @@
class="adf-edit-icon-buttons">
<mat-icon adf-icon="mode_edit" />
</button>
<div *ngIf="isPanelEditing(DefaultPanels.PROPERTIES)" class="adf-metadata-action-buttons">
}
@if (isEditingProperties) {
<div class="adf-metadata-action-buttons">
<button
mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
@@ -47,20 +52,21 @@
<mat-icon adf-icon="check" />
</button>
</div>
}
</adf-content-metadata-header>
</mat-expansion-panel-header>
<adf-card-view
class="adf-metadata-properties-expansion-panel"
(keydown)="keyDown($event)"
[properties]="(basicProperties$ | async) ?? []"
[editable]="!readOnly && isPanelEditing(DefaultPanels.PROPERTIES)"
[editable]="!readOnly && isEditingProperties"
[displayEmpty]="displayEmpty"
[copyToClipboardAction]="copyToClipboardAction"
[useChipsForMultiValueProperty]="useChipsForMultiValueProperty"
[multiValueSeparator]="multiValueSeparator" />
</mat-expansion-panel>
<ng-container *ngIf="displayTags">
}
@if (displayTags) {
<mat-expansion-panel
hideToggle
[expanded]="isExpandedTags"
@@ -73,8 +79,8 @@
[attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.SECTION' | translate: { sectionName: ('METADATA.BASIC.TAGS' | translate) }"
[class.adf-metadata-properties-header-expanded]="isExpandedTags">
<adf-content-metadata-header [title]="'METADATA.BASIC.TAGS'" [expanded]="isExpandedTags">
@if (!readOnly && !isEditingTags) {
<button
*ngIf="!readOnly && !isPanelEditing(DefaultPanels.TAGS)"
mat-icon-button
(click)="toggleGroupEditing(DefaultPanels.TAGS, $event)"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
@@ -83,7 +89,9 @@
class="adf-edit-icon-buttons">
<mat-icon adf-icon="mode_edit" />
</button>
<div *ngIf="isPanelEditing(DefaultPanels.TAGS)" class="adf-metadata-action-buttons">
}
@if (isEditingTags) {
<div class="adf-metadata-action-buttons">
<button
mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
@@ -102,27 +110,32 @@
<mat-icon adf-icon="check" />
</button>
</div>
}
</adf-content-metadata-header>
</mat-expansion-panel-header>
<div *ngIf="currentPanel.panelTitle === DefaultPanels.TAGS && editedPanelTitle !== DefaultPanels.TAGS"
class="adf-metadata-properties-tags">
@if (!isEditingTags) {
<div class="adf-metadata-properties-tags">
<adf-dynamic-chip-list [chips]="tagsToDisplay" [showDelete]="false" />
</div>
<div *ngIf="showEmptyTagMessage" class="adf-metadata-no-item-added">
}
@if (showEmptyTagMessage) {
<div class="adf-metadata-no-item-added">
{{ 'METADATA.BASIC.NO_TAGS_ADDED' | translate }}
</div>
}
@if (!readOnly && isEditingTags) {
<adf-tags-creator
*ngIf="!readOnly && isPanelEditing(DefaultPanels.TAGS)"
class="adf-metadata-properties-tags"
[tagNameControlVisible]="editing"
(tagsChange)="storeTagsToAssign($event)"
[mode]="tagsCreatorMode"
[tags]="assignedTags"
[disabledTagsRemoving]="saving" />
}
</mat-expansion-panel>
</ng-container>
}
<ng-container *ngIf="displayCategories">
@if (displayCategories) {
<mat-expansion-panel
hideToggle
[expanded]="isExpandedCategories"
@@ -137,8 +150,8 @@
<adf-content-metadata-header
[title]="'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE'"
[expanded]="isExpandedCategories">
@if (!readOnly && !isEditingCategories) {
<button
*ngIf="!readOnly && !isPanelEditing(DefaultPanels.CATEGORIES)"
mat-icon-button
(click)="toggleGroupEditing(DefaultPanels.CATEGORIES, $event)"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
@@ -147,7 +160,9 @@
class="adf-categories-button adf-edit-icon-buttons">
<mat-icon adf-icon="mode_edit" />
</button>
<div *ngIf="isPanelEditing(DefaultPanels.CATEGORIES)" class="adf-metadata-action-buttons">
}
@if (isEditingCategories) {
<div class="adf-metadata-action-buttons">
<button
mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
@@ -166,9 +181,10 @@
<mat-icon adf-icon="check" />
</button>
</div>
}
</adf-content-metadata-header>
</mat-expansion-panel-header>
@if (currentPanel.panelTitle === DefaultPanels.CATEGORIES && editedPanelTitle !== DefaultPanels.CATEGORIES) {
@if (!isEditingCategories) {
<div>
@for (category of categories; track category.id) {
<p class="adf-metadata-categories">{{ category.name }}</p>
@@ -180,8 +196,8 @@
{{ 'CATEGORIES_MANAGEMENT.NO_CATEGORIES_ADDED' | translate }}
</div>
}
@if (!readOnly && isEditingCategories) {
<adf-categories-management
*ngIf="!readOnly && isPanelEditing(DefaultPanels.CATEGORIES)"
class="adf-metadata-categories-header"
[categoryNameControlVisible]="editing"
[disableRemoval]="saving"
@@ -189,8 +205,9 @@
[managementMode]="categoriesManagementMode"
[classifiableChanged]="classifiableChanged"
(categoriesChange)="storeCategoriesToAssign($event)" />
}
</mat-expansion-panel>
</ng-container>
}
@for (customPanel of customPanels; track customPanel.panelTitle) {
@let isExpandedCustomPanel = (currentPanel.panelTitle === customPanel.panelTitle && currentPanel.expanded) ?? false;
@@ -232,8 +249,8 @@
[attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.SECTION' | translate: { sectionName: (group.title | translate) }"
[class.adf-metadata-properties-header-expanded]="isExpandedGroup">
<adf-content-metadata-header [title]="group.title" [expanded]="isExpandedGroup">
@if (group.editable && !this.readOnly && !isPanelEditing(group.title)) {
<button
*ngIf="group.editable && !this.readOnly && !isPanelEditing(group.title)"
mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate: { sectionName: (group.title | translate) }"
@@ -242,7 +259,9 @@
(click)="toggleGroupEditing(group.title, $event)">
<mat-icon adf-icon="mode_edit" />
</button>
<div class="adf-metadata-action-buttons" *ngIf="group.editable && isPanelEditing(group.title)">
}
@if (group.editable && isPanelEditing(group.title)) {
<div class="adf-metadata-action-buttons">
<button
mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
@@ -261,11 +280,14 @@
<mat-icon adf-icon="check" />
</button>
</div>
}
</adf-content-metadata-header>
</mat-expansion-panel-header>
<div *ngIf="!showGroup(group) && !displayEmpty && group.editable && editedPanelTitle !== group.title" class="adf-metadata-no-item-added">
@if (!showGroup(group) && !displayEmpty && group.editable && editedPanelTitle !== group.title) {
<div class="adf-metadata-no-item-added">
{{ 'METADATA.BASIC.NO_ITEMS_MESSAGE' | translate : { groupTitle: group.title | translate } }}
</div>
}
<adf-card-view
class="adf-metadata-properties-expansion-panel"
(keydown)="keyDown($event)"
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts
+6 -2
View File
@@ -41,7 +41,6 @@ import { CategoryService } from '../../../category/services/category.service';
import { CategoriesManagementMode } from '../../../category/categories-management/categories-management-mode';
import { AllowableOperationsEnum } from '../../../common/models/allowable-operations.enum';
import { ContentService } from '../../../common/services/content.service';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatChipsModule } from '@angular/material/chips';
import { MatExpansionModule } from '@angular/material/expansion';
@@ -52,6 +51,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { TranslatePipe } from '@ngx-translate/core';
import { ContentMetadataHeaderComponent } from './content-metadata-header.component';
import { CategoriesManagementComponent } from '../../../category/categories-management/categories-management.component';
import { AsyncPipe } from '@angular/common';
const DEFAULT_SEPARATOR = ', ';
@@ -66,7 +66,7 @@ export type DefaultPanels = (typeof DefaultPanels)[keyof typeof DefaultPanels];
@Component({
selector: 'adf-content-metadata',
imports: [
CommonModule,
AsyncPipe,
MatExpansionModule,
ContentMetadataHeaderComponent,
MatButtonModule,
@@ -246,6 +246,10 @@ export class ContentMetadataComponent implements OnChanges, OnInit {
);
}
isPanelExpanded(panelTitle: string): boolean {
return (this.currentPanel.panelTitle === panelTitle && this.currentPanel.expanded) ?? false;
}
protected handleUpdateError(error: Error) {
let statusCode = 0;