('content-metadata.multi-value-pipe-separator') || DEFAULT_SEPARATOR;
@@ -238,7 +252,8 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
* Called after clicking save button. It confirms all changes done for metadata and hides both category and tag name controls.
* Before clicking on that button they are not saved.
*/
- saveChanges() {
+ saveChanges(event: Event) {
+ event.stopPropagation();
this._saving = true;
this.tagNameControlVisible = false;
this.categoryControlVisible = false;
@@ -251,6 +266,26 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
}
}
+ saveGeneralInfoChanges(event:Event) {
+ this.saveChanges(event);
+ this.editable = !this.editable;
+ }
+
+ saveTagsChanges(event: Event) {
+ this.saveChanges(event);
+ this.editableTags = !this.editableTags;
+ }
+
+ saveCategoriesChanges(event: Event) {
+ this.saveChanges(event);
+ this.editableCategories = !this.editableCategories;
+ }
+
+ saveGroupChanges(group: any, event:Event) {
+ this.saveChanges(event);
+ group.editable = !group.editable;
+ }
+
/**
* Register all tags which should be assigned to node. Please note that they are just in "register" state and are not yet saved
* until button for saving data is clicked. Calling that function causes that save button is enabled.
@@ -280,11 +315,100 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
this.categoryControlVisible = false;
}
- cancelChanges() {
+ cancelChanges(event: Event) {
+ event.stopPropagation();
this.revertChanges();
this.loadProperties(this.node);
}
+ cancelGroupChanges(group: any, event: Event) {
+ this.cancelChanges(event);
+ group.editable = !group.editable;
+ }
+
+ CancelTagsChanges(event: Event) {
+ this.cancelChanges(event);
+ this.editableTags = !this.editableTags;
+ }
+
+ cancelCategoriesChanges(event: Event) {
+ this.cancelChanges(event);
+ this.editableCategories = !this.editableCategories;
+ }
+
+ cancelGeneralInfoChanges(event: Event) {
+ this.cancelChanges(event);
+ this.editable = !this.editable;
+ }
+
+ toggleGeneralEdit(event: Event): void {
+ event.stopPropagation();
+ this.editable = !this.editable;
+ if (!this.panel.expanded) {
+ this.panel.open();
+ }
+ }
+
+ toggleTagsEdit(event: Event): void {
+ event.stopPropagation();
+ this.editableTags = !this.editableTags;
+ this.tagNameControlVisible = true;
+ if (this.editableTags) {
+ this.tagsPanelState = true;
+ } else {
+ this.tagsPanelState = false;
+ }
+ }
+
+ toggleCategoriesEdit(event: Event): void {
+ event.stopPropagation();
+ this.editableCategories = !this.editableCategories;
+ this.categoryControlVisible = true
+ if (this.editableCategories) {
+ this.categoriesPanelState = true;
+ } else {
+ this.categoriesPanelState = false;
+ }
+ }
+
+ toggleEdit(group: any, event: Event): void {
+ event.stopPropagation();
+ group.editable = !group.editable;
+ if(group.editable) {
+ group.expanded = true;
+ }
+ }
+
+ handlePanelOpen() {
+ this.tagsPanelState = true;
+ this.cdr.detectChanges();
+ }
+
+ handlePanelClose() {
+ this.tagsPanelState = false;
+ this.cdr.detectChanges();
+ }
+
+ handleGneralPanelOpen() {
+ this.generalInfoPanelState = true;
+ this.cdr.detectChanges();
+ }
+
+ handleGeneralPanelClose() {
+ this.generalInfoPanelState = false;
+ this.cdr.detectChanges();
+ }
+
+ handleCategoryPanelOpen() {
+ this.categoriesPanelState = true;
+ this.cdr.detectChanges();
+ }
+
+ handleCategoryPanelClose() {
+ this.categoriesPanelState = false;
+ this.cdr.detectChanges();
+ }
+
showGroup(group: CardViewGroup): boolean {
const properties = group.properties.filter((property) => !this.isEmpty(property.displayValue));
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/mock-data.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/mock-data.ts
index dbc4a45f21..c73212de96 100644
--- a/lib/content-services/src/lib/content-metadata/components/content-metadata/mock-data.ts
+++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/mock-data.ts
@@ -49,7 +49,9 @@ export const mockGroupProperties = [
clickCallBack: null,
displayValue: 400
}
- ]
+ ],
+ editable: true,
+ expanded: true,
},
{
title: 'CUSTOM',
@@ -69,6 +71,8 @@ export const mockGroupProperties = [
clickCallBack: null,
displayValue: 400
}
- ]
+ ],
+ editable: true,
+ expanded: true,
}
];
diff --git a/lib/content-services/src/lib/content-metadata/interfaces/card-view-group.interface.ts b/lib/content-services/src/lib/content-metadata/interfaces/card-view-group.interface.ts
index 48c22f4f5e..c85baa54b1 100644
--- a/lib/content-services/src/lib/content-metadata/interfaces/card-view-group.interface.ts
+++ b/lib/content-services/src/lib/content-metadata/interfaces/card-view-group.interface.ts
@@ -20,4 +20,6 @@ import { CardViewItem } from '@alfresco/adf-core';
export interface CardViewGroup {
title: string;
properties: CardViewItem[];
+ editable: boolean;
+ expanded: boolean
}
diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json
index 022006237f..6560c7ca2e 100644
--- a/lib/content-services/src/lib/i18n/en.json
+++ b/lib/content-services/src/lib/i18n/en.json
@@ -149,6 +149,7 @@
"TITLE": "Create Tags",
"CREATE_TAG": "Create: {{tag}}",
"NAME": "Name",
+ "INPUT_PLACEHOLDER": "Add a tag to these items",
"ERRORS": {
"EXISTING_TAG": "Tag already exists",
"ALREADY_ADDED_TAG": "Tag is already added",
@@ -179,6 +180,8 @@
"NAME": "Category name",
"LOADING": "Loading",
"HIDE_INPUT": "Hide input",
+ "INPUT_PLACEHOLDER": "Add a categories to these items",
+ "NO_CATEGORIES_ADDED": "There are currently no categories added",
"ERRORS": {
"NOT_FOUND": "Categories not found",
"REQUIRED": "Category name is required",
@@ -487,7 +490,9 @@
"MODIFIED_DATE": "Modified Date",
"CONTENT_TYPE": "Content Type",
"TAGS": "Tags",
- "ADD_TAG_TOOLTIP": "Add tag"
+ "ADD_TAG_TOOLTIP": "Add tag",
+ "HEADER_TITLE": "General info",
+ "NO_TAGS_ADDED": "There are currently no tags added"
},
"CONTENT_TYPE": {
"DIALOG" :{
diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
index 9e7f83145c..351e37a33e 100644
--- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
+++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
@@ -1,54 +1,39 @@
{
return elements.map(el => el.nativeElement);
}
- function clickAtHideNameInputButton() {
- fixture.debugElement.query(By.css(`[data-automation-id="hide-tag-name-input-button"]`)).nativeElement.click();
- fixture.detectChanges();
- }
-
function getAddedTags(): string[] {
const tagElements = fixture.debugElement.queryAll(By.css(`.adf-tags-creation .adf-tag`));
return tagElements.map(el => el.nativeElement.firstChild.nodeValue.trim());
@@ -262,27 +257,9 @@ describe('TagsCreatorComponent', () => {
const tagNameField = fixture.debugElement.query(By.css(tagNameFieldSelector));
expect(tagNameField).toBeTruthy();
expect(tagNameField.nativeElement.hasAttribute('hidden')).toBeFalsy();
- expect(tagNameField.query(By.directive(MatFormField))).toBeTruthy();
+ expect(tagNameField).toBeTruthy();
});
- it('should be hidden and cleared after clicking button for hiding input', fakeAsync(() => {
- component.tagNameControlVisible = true;
- typeTag('test');
- fixture.detectChanges();
- tick(100);
-
- clickAtHideNameInputButton();
-
- const tagNameField = fixture.debugElement.query(By.css(tagNameFieldSelector));
- expect(tagNameField).toBeFalsy();
-
- component.tagNameControlVisible = true;
- fixture.detectChanges();
- tick(100);
-
- expect(getNameInput().value).toBe('');
- }));
-
it('should input be autofocused', fakeAsync(() => {
component.tagNameControlVisible = true;
fixture.detectChanges();
@@ -290,38 +267,6 @@ describe('TagsCreatorComponent', () => {
expect(getNameInput()).toBe(document.activeElement as HTMLInputElement);
}));
- it('should input be autofocused after showing input second time', fakeAsync(() => {
- component.tagNameControlVisible = true;
- fixture.detectChanges();
- tick(100);
-
- clickAtHideNameInputButton();
- component.tagNameControlVisible = true;
- fixture.detectChanges();
- tick(100);
-
- expect(getNameInput()).toBe(document.activeElement as HTMLInputElement);
- }));
-
- it('should be hidden and cleared on discard changes', fakeAsync(() => {
- component.tagNameControlVisible = true;
- component.tags = ['Passed tag 1', 'Passed tag 2'];
- typeTag('test');
- fixture.detectChanges();
- tick(100);
- expect(getNameInput().value).toBe('test');
-
- component.tagNameControlVisible = false;
- fixture.detectChanges();
- tick(100);
- expect(getNameInput()).toBeFalsy();
-
- component.tagNameControlVisible = true;
- fixture.detectChanges();
- tick(100);
- expect(getNameInput().value).toBe('');
- }));
-
describe('Errors', () => {
function getFirstError(): string {
const error = fixture.debugElement.query(By.directive(MatError));
@@ -347,13 +292,6 @@ describe('TagsCreatorComponent', () => {
expect(error).toBe('TAG.TAGS_CREATOR.ERRORS.REQUIRED');
}));
- it('should not show error for required if tags are changed', fakeAsync(() => {
- typeTag('');
- component.tags = ['new tag 1', 'new tag 2'];
- fixture.detectChanges();
- expect(getFirstError()).toBeUndefined();
- }));
-
it('should show error when duplicated already added tag', fakeAsync(() => {
const tag = 'Some tag';
@@ -428,14 +366,6 @@ describe('TagsCreatorComponent', () => {
expect(getPanel()).toBeTruthy();
});
- it('should not be visible when something has been typed and input has been hidden', fakeAsync(() => {
- typeTag('some tag');
-
- clickAtHideNameInputButton();
-
- expect(getPanel()).toBeFalsy();
- }));
-
it('should have correct label when mode is Create and Assign', fakeAsync(() => {
component.mode = TagsCreatorMode.CREATE_AND_ASSIGN;
diff --git a/lib/core/src/lib/i18n/en.json b/lib/core/src/lib/i18n/en.json
index 2da9563fd5..b78227e430 100644
--- a/lib/core/src/lib/i18n/en.json
+++ b/lib/core/src/lib/i18n/en.json
@@ -193,7 +193,7 @@
},
"METADATA": {
"BASIC": {
- "HEADER": "Properties",
+ "HEADER": "General info",
"NAME": "Name",
"TITLE": "Title",
"DESCRIPTION": "Description",
diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss
index 4f99fded8e..b3f7d856cb 100644
--- a/lib/core/src/lib/styles/_components-variables.scss
+++ b/lib/core/src/lib/styles/_components-variables.scss
@@ -45,6 +45,8 @@
--adf-identity-user-info-line-height: $adf-ref-line-height,
--adf-identity-user-info-font-size: var(--theme-adf-picture-1-font-size),
--adf-user-info-container-margin-right: $adf-ref-margin-right,
+ --adf-metadata-property-panel-border-color: $adf-metadata-property-panel-border-color,
+ --adf-metadata-tags-background-color: $adf-metadata-tags-background-color
);
// propagates SCSS variables into the CSS variables scope
diff --git a/lib/core/src/lib/styles/_reference-variables.scss b/lib/core/src/lib/styles/_reference-variables.scss
index d214c5fff0..e82999a004 100644
--- a/lib/core/src/lib/styles/_reference-variables.scss
+++ b/lib/core/src/lib/styles/_reference-variables.scss
@@ -27,3 +27,5 @@ $adf-ref-height: 40px;
$adf-ref-width: 40px;
$adf-ref-line-height: 40px;
$adf-ref-margin-right: 8px;
+$adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12);
+$adf-metadata-tags-background-color: rgba(33, 33, 33, 0.05);