diff --git a/docs/content-services/components/content-metadata-card.component.md b/docs/content-services/components/content-metadata-card.component.md index e9257a9d1e2..bf545485364 100644 --- a/docs/content-services/components/content-metadata-card.component.md +++ b/docs/content-services/components/content-metadata-card.component.md @@ -56,12 +56,6 @@ Displays and edits metadata related to a node. | editable | `boolean` | | (optional) This flag toggles editable of content. | | customPanels | [`ContentMetadataCustomPanel`](../interfaces/content-metadata-custom-panel.interface.md)`[]` | | (optional) List of custom metadata panels to be displayed as [`Dynamic components`](../../extensions/components/dynamic.component.md). | -### Events - -| Name | Type | Description | -|----------------|-----------------------------------------------------------------------|---------------------------------------------------| -| editableChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when content's editable state is changed. | - ## Details The component shows metadata related to a given node. It uses the @@ -444,3 +438,4 @@ When the list of values is too long, the options selection panel will be enhance ## Custom metadata panels If there is a need to display some custom node properties that require additional UI or data to be fetched you can define custom metadata panels for the metadata component. After creating custom component to be displayed it has to be registered in [Extension Service](../../extensions/services/extension.service.md). Both `panelTitle` and `component` properties have to be defined. +![Chips for multi value properties](../../docassets/images/adf-search-select.png) diff --git a/docs/content-services/components/tags-creator.component.md b/docs/content-services/components/tags-creator.component.md index 30d59198332..fd83ec7e61f 100644 --- a/docs/content-services/components/tags-creator.component.md +++ b/docs/content-services/components/tags-creator.component.md @@ -37,3 +37,4 @@ Allows to create multiple tags. That component contains input and two lists. Top | existingTagsPanelVisibilityChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when bottom list is showing or hiding. | | tagNameControlVisibleChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when input is showing or hiding. | | tagsChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when tags in top list are changed. | + diff --git a/docs/docassets/images/UI_property_panel.png b/docs/docassets/images/UI_property_panel.png new file mode 100644 index 00000000000..7c236b27c88 Binary files /dev/null and b/docs/docassets/images/UI_property_panel.png differ diff --git a/docs/tutorials/content-metadata-component.md b/docs/tutorials/content-metadata-component.md index 2f77230ba40..29d3a74777c 100644 --- a/docs/tutorials/content-metadata-component.md +++ b/docs/tutorials/content-metadata-component.md @@ -98,12 +98,30 @@ Now that the `my-preset` configuration is defined, let's use it in a view of the ``` +### Properties + +| Name | Type | Default value | Description | +| ---- | ---- | ------------- | ----------- | +| readOnly | `boolean` | false | (optional) This flag sets the metadata in read only mode preventing changes. | +| editable | `boolean` | | (optional) This flag toggles editable of content. | +| editableTags | `boolean` | | (optional) This flag toggles editable of tags content. | +| editableCategories | `boolean` | | (optional) This flag toggles editable of categories content. | + +### Events + +| Name | Type | Description | +|----------------|-----------------------------------------------------------------------|---------------------------------------------------| +| editableChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when content's editable state is changed. | +| editableTagsChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when content's editableTags state is changed. | +| editableCategoriesChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when content's editableCategories state is changed. | +| groupChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when content's group state is changed. | + ### Viewing the result -After saving the html file, open the ADF app in a browser and dive into the `Personal Files > Sites > swsdp` folder of the Alfresco's repository. Once there, select the `documentLibrary` folder (one click only) and click on the view details icon (the `i` on the top right). Scrolling down the metadata tab on the right, click on the `More information` item at the bottom. Once clicked, you will see two different groups: `Properties` (already there by default) and `This is my preset`. Click on `This is my preset` to show the properties related. +After saving the html file, open the ADF app in a browser and dive into the `Personal Files > Sites > swsdp` folder of the Alfresco's repository. Once there, select the `documentLibrary` folder (one click only) and click on the view details icon (the `menu_open icon` on the top right). Scrolling down the metadata tab on the right. You will see different panels: `Properties` (already there by default), `Tags`, `Categories` and `grouped properties`. In the following screenshot you can see how the result should look: -![content_metadata_preset](../docassets/images/content_metadata_preset.png) +![UI_Property_Panel](../docassets/images/UI_property_panel.png) To check it out, double click on the `documentLibrary` folder and select (with one click) the `Presentations` folder. You should see the `This is my preset` group disappear from the metadata panel, because the node doesn't have the `st:siteContainer` aspect. diff --git a/e2e/content-services/components/permissions-component.e2e.ts b/e2e/content-services/components/permissions-component.e2e.ts index 211e2d47598..99df583372b 100644 --- a/e2e/content-services/components/permissions-component.e2e.ts +++ b/e2e/content-services/components/permissions-component.e2e.ts @@ -339,8 +339,8 @@ describe('Permissions Component', () => { await BrowserActions.closeMenuAndDialogs(); await contentList.checkActionMenuIsNotDisplayed(); await contentServicesPage.metadataContent('RoleEditor' + fileModel.name); - await metadataViewPage.editIconIsDisplayed(); - await metadataViewPage.editIconClick(); + await metadataViewPage.isEditGeneralIconDisplayed(); + await metadataViewPage.clickEditIconGeneral(); await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:title'); await metadataViewPage.enterPropertyText('properties.cm:title', 'newTitle1'); await expect(await metadataViewPage.getPropertyText('properties.cm:title')).toEqual('newTitle1'); @@ -360,8 +360,8 @@ describe('Permissions Component', () => { await BrowserActions.closeMenuAndDialogs(); await contentList.checkActionMenuIsNotDisplayed(); await contentServicesPage.metadataContent('RoleCollaborator' + fileModel.name); - await metadataViewPage.editIconIsDisplayed(); - await metadataViewPage.editIconClick(); + await metadataViewPage.isEditGeneralIconDisplayed(); + await metadataViewPage.clickEditIconGeneral(); await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:title'); await metadataViewPage.enterPropertyText('properties.cm:title', 'newTitle2'); await expect(await metadataViewPage.getPropertyText('properties.cm:title')).toEqual('newTitle2'); @@ -382,8 +382,8 @@ describe('Permissions Component', () => { await viewerPage.clickCloseButton(); await contentList.waitForTableBody(); await contentServicesPage.metadataContent('RoleCoordinator' + fileModel.name); - await metadataViewPage.editIconIsDisplayed(); - await metadataViewPage.editIconClick(); + await metadataViewPage.isEditGeneralIconDisplayed(); + await metadataViewPage.clickEditIconGeneral(); await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:title'); await metadataViewPage.enterPropertyText('properties.cm:title', 'newTitle3'); await expect(await metadataViewPage.getPropertyText('properties.cm:title')).toEqual('newTitle3'); diff --git a/e2e/content-services/metadata/aspect-oriented-config.e2e.ts b/e2e/content-services/metadata/aspect-oriented-config.e2e.ts index 4b1cdc92a5a..96376d942d4 100644 --- a/e2e/content-services/metadata/aspect-oriented-config.e2e.ts +++ b/e2e/content-services/metadata/aspect-oriented-config.e2e.ts @@ -122,8 +122,6 @@ describe('Aspect oriented config', () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.informationButtonIsDisplayed(); - await metadataViewPage.clickOnInformationButton(); await metadataViewPage.clickMetadataGroup('IMAGE'); await metadataViewPage.checkPropertyIsVisible('properties.exif:pixelXDimension', 'textitem'); @@ -152,8 +150,6 @@ describe('Aspect oriented config', () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.informationButtonIsDisplayed(); - await metadataViewPage.clickOnInformationButton(); await metadataViewPage.checkMetadataGroupIsPresent('EXIF'); await metadataViewPage.checkMetadataGroupIsPresent('properties'); @@ -170,8 +166,6 @@ describe('Aspect oriented config', () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.informationButtonIsDisplayed(); - await metadataViewPage.clickOnInformationButton(); await metadataViewPage.checkMetadataGroupIsPresent('EXIF'); await metadataViewPage.checkMetadataGroupIsPresent('properties'); @@ -191,8 +185,6 @@ describe('Aspect oriented config', () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.informationButtonIsDisplayed(); - await metadataViewPage.clickOnInformationButton(); await metadataViewPage.checkMetadataGroupIsPresent('EXIF'); await metadataViewPage.checkMetadataGroupIsPresent('properties'); @@ -232,9 +224,6 @@ describe('Aspect oriented config', () => { await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.informationButtonIsDisplayed(); - await metadataViewPage.clickOnInformationButton(); - await metadataViewPage.checkMetadataGroupIsPresent('GROUP-TITLE1-TRANSLATION-KEY'); await metadataViewPage.checkMetadataGroupIsPresent('GROUP-TITLE2-TRANSLATION-KEY'); @@ -262,10 +251,6 @@ describe('Aspect oriented config', () => { await CheckboxPage.check(metadataViewPage.presetSwitch); await metadataViewPage.enterPresetText('custom-preset'); - - await metadataViewPage.informationButtonIsDisplayed(); - await metadataViewPage.clickOnInformationButton(); - await metadataViewPage.checkMetadataGroupIsPresent('properties'); await metadataViewPage.checkMetadataGroupIsPresent('Versionable'); }); @@ -286,9 +271,6 @@ describe('Aspect oriented config', () => { await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.informationButtonIsDisplayed(); - await metadataViewPage.clickOnInformationButton(); - await metadataViewPage.checkMetadataGroupIsNotPresent(emptyAspectName); }); @@ -308,11 +290,6 @@ describe('Aspect oriented config', () => { await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.informationButtonIsDisplayed(); - await metadataViewPage.clickOnInformationButton(); - - await metadataViewPage.checkMetadataGroupIsNotPresent(aspectName); - await metadataViewPage.editIconClick(); await metadataViewPage.checkMetadataGroupIsPresent(aspectName); diff --git a/e2e/content-services/metadata/metadata-content-type.e2e.ts b/e2e/content-services/metadata/metadata-content-type.e2e.ts index c3647fc851b..f6f8ba66bea 100644 --- a/e2e/content-services/metadata/metadata-content-type.e2e.ts +++ b/e2e/content-services/metadata/metadata-content-type.e2e.ts @@ -114,16 +114,16 @@ describe('content type', () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.editIconIsDisplayed(); + await metadataViewPage.isEditGeneralIconDisplayed(); await expect(await viewerPage.getActiveTab()).toEqual('PROPERTIES'); const defaultType = (await metadataViewPage.hasContentType('Content')) || (await metadataViewPage.hasContentType('cm:content')); await expect(defaultType).toBe(true, 'Content type not found'); - await metadataViewPage.editIconClick(); + await metadataViewPage.clickEditIconGeneral(); await expect(await metadataViewPage.changeContentType(type.title)).toBe(true, 'Failed to update node type.'); - await metadataViewPage.clickSaveMetadata(); + await metadataViewPage.clickSaveGeneralMetadata(); await metadataViewPage.checkConfirmDialogDisplayed(); await metadataViewPage.applyNodeProperties(); @@ -139,7 +139,7 @@ describe('content type', () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.editIconIsDisplayed(); + await metadataViewPage.isEditGeneralIconDisplayed(); await expect(await viewerPage.getActiveTab()).toEqual('PROPERTIES'); const customType = (await metadataViewPage.hasContentType(type.title)) || (await metadataViewPage.hasContentType(`${model.namespacePrefix}:${type.name}`)); @@ -155,16 +155,16 @@ describe('content type', () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.editIconIsDisplayed(); + await metadataViewPage.isEditGeneralIconDisplayed(); await expect(await viewerPage.getActiveTab()).toEqual('PROPERTIES'); let defaultType = (await metadataViewPage.hasContentType('Content')) || (await metadataViewPage.hasContentType('cm:content')); await expect(defaultType).toBe(true, 'Content type not found'); - await metadataViewPage.editIconClick(); + await metadataViewPage.clickEditIconGeneral(); await expect(await metadataViewPage.changeContentType(type.title)).toBe(true, 'Failed to update node type.'); - await metadataViewPage.clickSaveMetadata(); + await metadataViewPage.clickSaveGeneralMetadata(); await metadataViewPage.checkConfirmDialogDisplayed(); await metadataViewPage.cancelNodeProperties(); @@ -178,7 +178,7 @@ describe('content type', () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.editIconIsDisplayed(); + await metadataViewPage.isEditGeneralIconDisplayed(); await expect(await viewerPage.getActiveTab()).toEqual('PROPERTIES'); defaultType = (await metadataViewPage.hasContentType('Content')) || (await metadataViewPage.hasContentType('cm:content')); diff --git a/e2e/content-services/metadata/metadata-permissions.e2e.ts b/e2e/content-services/metadata/metadata-permissions.e2e.ts index 6884b1b8b02..34e73c11e50 100644 --- a/e2e/content-services/metadata/metadata-permissions.e2e.ts +++ b/e2e/content-services/metadata/metadata-permissions.e2e.ts @@ -38,10 +38,6 @@ describe('permissions', () => { COMMENTS_TAB: 'COMMENTS', PROPERTY_TAB: 'PROPERTIES', DEFAULT_ASPECT: 'Properties', - MORE_INFO_BUTTON: 'More information', - LESS_INFO_BUTTON: 'Less information', - ARROW_DOWN: 'keyboard_arrow_down', - ARROW_UP: 'keyboard_arrow_up', EDIT_BUTTON_TOOLTIP: 'Edit' }; @@ -132,7 +128,6 @@ describe('permissions', () => { await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB); - await metadataViewPage.clickOnInformationButton(); await metadataViewPage.clickMetadataGroup('EXIF'); @@ -152,7 +147,6 @@ describe('permissions', () => { await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB); - await metadataViewPage.clickOnInformationButton(); await metadataViewPage.clickMetadataGroup('EXIF'); diff --git a/e2e/content-services/metadata/metadata-properties.e2e.ts b/e2e/content-services/metadata/metadata-properties.e2e.ts index 502e7721a8b..7a203d4dff5 100644 --- a/e2e/content-services/metadata/metadata-properties.e2e.ts +++ b/e2e/content-services/metadata/metadata-properties.e2e.ts @@ -37,10 +37,6 @@ describe('CardView Component - properties', () => { COMMENTS_TAB: 'COMMENTS', PROPERTY_TAB: 'PROPERTIES', DEFAULT_ASPECT: 'Properties', - MORE_INFO_BUTTON: 'More information', - LESS_INFO_BUTTON: 'Less information', - ARROW_DOWN: 'keyboard_arrow_down', - ARROW_UP: 'keyboard_arrow_up', EDIT_BUTTON_TOOLTIP: 'Edit' }; @@ -90,7 +86,6 @@ describe('CardView Component - properties', () => { await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB); - await metadataViewPage.clickOnInformationButton(); await metadataViewPage.clickMetadataGroup('EXIF'); @@ -108,11 +103,9 @@ describe('CardView Component - properties', () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.editIconIsDisplayed(); + await metadataViewPage.isEditGeneralIconDisplayed(); await CheckboxPage.check(metadataViewPage.readonlySwitch); - - await metadataViewPage.editIconIsNotDisplayed(); }); it('[C268965] Should multi property allow expand multi accordion at the same time when set', async () => { @@ -121,15 +114,9 @@ describe('CardView Component - properties', () => { await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.clickOnInformationButton(); - - await metadataViewPage.checkMetadataGroupIsNotExpand('EXIF'); - await metadataViewPage.checkMetadataGroupIsNotExpand('properties'); - await metadataViewPage.clickMetadataGroup('properties'); - - await metadataViewPage.checkMetadataGroupIsNotExpand('EXIF'); await metadataViewPage.checkMetadataGroupIsExpand('properties'); + await metadataViewPage.checkMetadataGroupIsNotExpand('EXIF'); await metadataViewPage.clickMetadataGroup('EXIF'); @@ -168,11 +155,7 @@ describe('CardView Component - properties', () => { await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.informationButtonIsDisplayed(); - await CheckboxPage.uncheck(metadataViewPage.defaultPropertiesSwitch); - - await metadataViewPage.informationButtonIsNotDisplayed(); }); it('[C307975] Should be able to choose which aspect to show expanded in the info-drawer', async () => { diff --git a/e2e/content-services/metadata/metadata-smoke-tests.e2e.ts b/e2e/content-services/metadata/metadata-smoke-tests.e2e.ts index 8de3740a56e..69bdd42dd73 100644 --- a/e2e/content-services/metadata/metadata-smoke-tests.e2e.ts +++ b/e2e/content-services/metadata/metadata-smoke-tests.e2e.ts @@ -39,11 +39,7 @@ describe('Metadata component', () => { TITLE: 'Details', COMMENTS_TAB: 'COMMENTS', PROPERTY_TAB: 'PROPERTIES', - DEFAULT_ASPECT: 'Properties', - MORE_INFO_BUTTON: 'More information', - LESS_INFO_BUTTON: 'Less information', - ARROW_DOWN: 'keyboard_arrow_down', - ARROW_UP: 'keyboard_arrow_up', + DEFAULT_ASPECT: 'General info', EDIT_BUTTON_TOOLTIP: 'Edit' }; @@ -120,26 +116,12 @@ describe('Metadata component', () => { await expect(await metadataViewPage.getSize()).toEqual(pngFileModel.getContent().getSizeInBytes()); await metadataViewPage.editIconIsDisplayed(); - await metadataViewPage.informationButtonIsDisplayed(); - await expect(await metadataViewPage.getInformationButtonText()).toEqual(METADATA.MORE_INFO_BUTTON); - await expect(await metadataViewPage.getInformationIconText()).toEqual(METADATA.ARROW_DOWN); - }); - - it('[C272769] Should be possible to display more details when clicking on More Information button', async () => { - await viewerPage.clickInfoButton(); - await viewerPage.checkInfoSideBarIsDisplayed(); - await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.informationButtonIsDisplayed(); - await metadataViewPage.clickOnInformationButton(); - await expect(await metadataViewPage.getInformationButtonText()).toEqual(METADATA.LESS_INFO_BUTTON); - await expect(await metadataViewPage.getInformationIconText()).toEqual(METADATA.ARROW_UP); }); it('[C270952] Should be possible to open/close properties using info icon', async () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.informationButtonIsDisplayed(); await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsNotDisplayed(); await viewerPage.clickInfoButton(); @@ -154,11 +136,11 @@ describe('Metadata component', () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.editIconIsDisplayed(); + await metadataViewPage.isEditGeneralIconDisplayed(); await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB); - await metadataViewPage.editIconClick(); + await metadataViewPage.clickEditIconGeneral(); await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:name'); await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:title'); await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:description'); @@ -170,15 +152,15 @@ describe('Metadata component', () => { await metadataViewPage.enterPropertyText('properties.cm:name', 'exampleText'); await metadataViewPage.clickResetMetadata(); await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(browser.params.resources.Files.ADF_DOCUMENTS.PNG.file_name); - + await metadataViewPage.clickEditIconGeneral(); await metadataViewPage.enterPropertyText('properties.cm:name', 'exampleText.png'); await metadataViewPage.enterPropertyText('properties.cm:title', 'example title'); await metadataViewPage.enterDescriptionText('example description'); + await metadataViewPage.clickSaveGeneralMetadata(); await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual('exampleText.png'); await expect(await metadataViewPage.getPropertyText('properties.cm:title')).toEqual('example title'); await expect(await metadataViewPage.getPropertyText('properties.cm:description')).toEqual('example description'); - await metadataViewPage.clickSaveMetadata(); await viewerPage.clickCloseButton(); await contentServicesPage.waitForTableBody(); @@ -187,16 +169,15 @@ describe('Metadata component', () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.editIconIsDisplayed(); + await metadataViewPage.isEditGeneralIconDisplayed(); await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual('exampleText.png'); await expect(await metadataViewPage.getPropertyText('properties.cm:title')).toEqual('example title'); - await expect(await metadataViewPage.getPropertyText('properties.cm:description')).toEqual('example description'); - await metadataViewPage.editIconClick(); + await metadataViewPage.clickEditIconGeneral(); await metadataViewPage.enterPropertyText('properties.cm:name', browser.params.resources.Files.ADF_DOCUMENTS.PNG.file_name); await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(browser.params.resources.Files.ADF_DOCUMENTS.PNG.file_name); - await metadataViewPage.clickSaveMetadata(); + await metadataViewPage.clickSaveGeneralMetadata(); }); it('[C260181] Should be possible edit all the metadata aspect', async () => { @@ -207,8 +188,6 @@ describe('Metadata component', () => { await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB); - await metadataViewPage.clickOnInformationButton(); - await metadataViewPage.clickMetadataGroup('EXIF'); await metadataViewPage.editIconClick(); @@ -250,18 +229,20 @@ describe('Metadata component', () => { it('[C261158] Should be possible edit the metadata When the node is a Folder', async () => { await contentServicesPage.metadataContent(folderName); - await metadataViewPage.editIconClick(); + await metadataViewPage.clickEditIconGeneral(); await metadataViewPage.enterPropertyText('properties.cm:name', 'newnameFolder'); await metadataViewPage.clickResetButton(); await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName); + await metadataViewPage.clickEditIconGeneral(); await metadataViewPage.enterPropertyText('properties.cm:name', 'newnameFolder'); - await metadataViewPage.clickSaveMetadata(); + await metadataViewPage.clickSaveGeneralMetadata(); await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual('newnameFolder'); + await metadataViewPage.clickEditIconGeneral(); await metadataViewPage.enterPropertyText('properties.cm:name', folderName); - await metadataViewPage.clickSaveMetadata(); + await metadataViewPage.clickSaveGeneralMetadata(); await expect(await metadataViewPage.getPropertyText('properties.cm:name')).toEqual(folderName); }); }); @@ -274,14 +255,14 @@ describe('Metadata component', () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.editIconIsDisplayed(); + await metadataViewPage.isEditGeneralIconDisplayed(); await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB); - await metadataViewPage.editIconClick(); + await metadataViewPage.clickEditIconGeneral(); await metadataViewPage.enterDescriptionText('check author example description'); - await metadataViewPage.clickSaveMetadata(); + await metadataViewPage.clickSaveGeneralMetadata(); await expect(await metadataViewPage.getPropertyText('properties.cm:description')).toEqual('check author example description'); await navigationBarPage.clickLogoutButton(); diff --git a/e2e/core/pages/metadata-view.page.ts b/e2e/core/pages/metadata-view.page.ts index c6b4bc9158e..7bfeaddaae9 100644 --- a/e2e/core/pages/metadata-view.page.ts +++ b/e2e/core/pages/metadata-view.page.ts @@ -33,9 +33,7 @@ export class MetadataViewPage { author = $(`[data-automation-id='card-textitem-value-properties.cm:author']`); titleProperty = $(`span[data-automation-id='card-textitem-value-properties.cm:title'] span`); editIcon = $(`button[data-automation-id='meta-data-card-toggle-edit']`); - informationButton = $(`button[data-automation-id='meta-data-card-toggle-expand']`); - informationSpan = $(`span[data-automation-id='meta-data-card-toggle-expand-label']`); - informationIcon = $(`span[data-automation-id='meta-data-card-toggle-expand-label'] ~ mat-icon`); + editIconGeneral = $(`button[data-automation-id='meta-data-general-info-edit']`); displayEmptySwitch = $(`#adf-metadata-empty`); readonlySwitch = $(`#adf-metadata-readonly`); multiSwitch = $(`#adf-metadata-multi`); @@ -45,6 +43,7 @@ export class MetadataViewPage { displayAspect = $(`input[data-placeholder='Display Aspect']`); applyAspect = element(by.cssContainingText(`button span.mat-button-wrapper`, 'Apply Aspect')); saveMetadataButton = $(`[data-automation-id='save-metadata']`); + saveGeneralMetadataButton = $(`[data-automation-id='save-general-info-metadata']`); resetMetadataButton = $(`[data-automation-id='reset-metadata']`); private getMetadataGroupLocator = async (groupName: string): Promise => @@ -108,28 +107,16 @@ export class MetadataViewPage { await BrowserVisibility.waitUntilElementIsNotVisible(this.editIcon); } - async editIconClick(): Promise { - await BrowserActions.clickExecuteScript('button[data-automation-id="meta-data-card-toggle-edit"]'); - } - - async informationButtonIsDisplayed(): Promise { - await BrowserVisibility.waitUntilElementIsClickable(this.informationButton); + async isEditGeneralIconDisplayed(): Promise { + await BrowserVisibility.waitUntilElementIsVisible(this.editIconGeneral); } - async informationButtonIsNotDisplayed(): Promise { - await BrowserVisibility.waitUntilElementIsNotVisible(this.informationButton); - } - - async clickOnInformationButton(): Promise { - await BrowserActions.click(this.informationButton); - } - - async getInformationButtonText(): Promise { - return BrowserActions.getText(this.informationSpan); + async editIconClick(): Promise { + await BrowserActions.clickExecuteScript('button[data-automation-id="meta-data-card-toggle-edit"]'); } - async getInformationIconText(): Promise { - return BrowserActions.getText(this.informationIcon); + async clickEditIconGeneral(): Promise { + await BrowserActions.click(this.editIconGeneral); } async clickOnPropertiesTab(): Promise { @@ -211,9 +198,7 @@ export class MetadataViewPage { } async getMetadataGroupTitle(groupName: string): Promise { - const group = $( - 'mat-expansion-panel[data-automation-id="adf-metadata-group-' + groupName + '"] > mat-expansion-panel-header > span > mat-panel-title' - ); + const group = $('mat-expansion-panel[data-automation-id="adf-metadata-group-' + groupName + '"] > mat-expansion-panel-header > span > div > mat-panel-title'); return BrowserActions.getText(group); } @@ -316,4 +301,8 @@ export class MetadataViewPage { async clickResetMetadata(): Promise { await BrowserActions.click(this.resetMetadataButton); } + + async clickSaveGeneralMetadata(): Promise { + await BrowserActions.click(this.saveGeneralMetadataButton); + } } diff --git a/e2e/core/viewer/viewer-content-services-component.e2e.ts b/e2e/core/viewer/viewer-content-services-component.e2e.ts index f0aadfd7fb8..05591d7009a 100644 --- a/e2e/core/viewer/viewer-content-services-component.e2e.ts +++ b/e2e/core/viewer/viewer-content-services-component.e2e.ts @@ -446,9 +446,9 @@ describe('Content Services Viewer', () => { await viewerPage.checkInfoSideBarIsDisplayed(); await viewerPage.clickOnTab('Properties'); await viewerPage.checkTabIsActive('Properties'); - await metadataViewPage.editIconClick(); + await metadataViewPage.clickEditIconGeneral(); await metadataViewPage.enterPropertyText('properties.cm:name', newName); - await metadataViewPage.clickSaveMetadata(); + await metadataViewPage.clickSaveGeneralMetadata(); await viewerPage.clickCloseButton(); } }); diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.html b/lib/content-services/src/lib/category/categories-management/categories-management.component.html index 516f0acca93..9c51a9b8fad 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.html +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.html @@ -1,10 +1,19 @@
-

- {{ noCategoriesMsg | translate }} -

-
+
+ + + {{ categoryNameErrorMessageKey | translate }} + +
+
-
- - search - - {{ 'CATEGORIES_MANAGEMENT.NAME' | translate }} - - - {{ categoryNameErrorMessageKey | translate }} - - -
+

+ {{ noCategoriesMsg | translate }} +

diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss index 31911029be8..9cc1235d162 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss @@ -1,8 +1,14 @@ .adf-categories-management { + padding-top: 12px; + .adf-category-name-field { display: flex; justify-content: space-between; width: 100%; + background: var(--theme-metadata-buttons-background-color); + height: 32px; + border-radius: 12px; + align-items: center; mat-form-field { width: 100%; @@ -11,6 +17,20 @@ .adf-btn-padded { margin-right: -14px; } + + .mat-form-field-underline { + display: none; + } + + .mat-form-field-appearance-fill { + .mat-form-field-flex { + background: none; + } + + .mat-form-field-infix { + padding: 0; + } + } } .adf-assigned-categories { @@ -31,11 +51,15 @@ [hidden] { visibility: hidden; } + + .adf-no-categories-message { + margin-top: 28.5px; + margin-bottom: 0; + height: 30px; + } } .adf-categories-list { - padding-bottom: 10px; - .mat-list-base .mat-list-item, .mat-list-base .mat-list-option { display: flex; diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts index d7e3801e14f..d7c1cf0aaca 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts @@ -220,44 +220,33 @@ describe('CategoriesManagementComponent', () => { component.categoryNameControlVisible = true; fixture.detectChanges(); }); - it('should be hidden initially', () => { - component.categoryNameControlVisible = false; - fixture.detectChanges(); - const categoryControl: HTMLDivElement = fixture.debugElement.query(By.css('.adf-category-name-field')).nativeElement; - expect(categoryControl.hidden).toBeTrue(); - }); it('should be visible when categoryNameControlVisible is true', () => { const categoryControl = fixture.debugElement.query(By.css('.adf-category-name-field')); expect(categoryControl).toBeTruthy(); }); - it('should have correct label and hide button', () => { - const categoryControlLabel = fixture.debugElement.query(By.css('#adf-category-name-input-label')).nativeElement; - const categoryControlHideBtn: HTMLButtonElement = fixture.debugElement.query(By.css('.adf-category-name-field button')).nativeElement; - expect(categoryControlHideBtn).toBeTruthy(); - expect(categoryControlHideBtn.attributes.getNamedItem('title').textContent.trim()).toBe('CATEGORIES_MANAGEMENT.HIDE_INPUT'); - expect(categoryControlLabel.textContent.trim()).toBe('CATEGORIES_MANAGEMENT.NAME'); + it('should return true when categoryNameControlVisible is true', () => { + component.categoryNameControlVisible = true; + const result = component.isNameCategoryVisible; + expect(result).toBeTrue(); }); - it('should hide and clear category control and existing categories panel on clicking hide button', fakeAsync(() => { - typeCategory('test'); - const categoryControlHideBtn: HTMLButtonElement = fixture.debugElement.query(By.css('.adf-category-name-field button')).nativeElement; - const controlVisibilityChangeSpy = spyOn(component.categoryNameControlVisibleChange, 'emit').and.callThrough(); - categoryControlHideBtn.click(); - fixture.detectChanges(); - - const categoryControl: HTMLDivElement = fixture.debugElement.query(By.css('.adf-category-name-field')).nativeElement; - expect(categoryControl.hidden).toBeTrue(); - expect(component.categoryNameControlVisible).toBeFalse(); - expect(component.existingCategoriesPanelVisible).toBeFalse(); - expect(controlVisibilityChangeSpy).toHaveBeenCalledOnceWith(false); + it('should return false when categoryNameControlVisible is false and categories length is 0', () => { + component.categoryNameControlVisible = false; + component.categories = []; + const result = component.isNameCategoryVisible; + expect(result).toBeFalse(); + }); + }); - component.categoryNameControlVisible = true; - fixture.detectChanges(); - tick(100); - expect(getCategoryControlInput().value).toBe(''); - })); + describe('isCategoryEmpty', () => { + it('should return true when categories empty', () => { + component.categories = []; + component.categoryNameControlVisible = false; + const result = component.isCategoryEmpty; + expect(result).toBeTrue(); + }); }); describe('Spinner', () => { @@ -476,13 +465,8 @@ describe('CategoriesManagementComponent', () => { expect(categoriesChangeSpy).toHaveBeenCalledOnceWith(component.categories); })); - it('should clear and hide input after category is created', fakeAsync(() => { - const controlVisibilityChangeSpy = spyOn(component.categoryNameControlVisibleChange, 'emit'); + it('should clear input after category is created', fakeAsync(() => { createCategory('test'); - const categoryControl: HTMLDivElement = fixture.debugElement.query(By.css('.adf-category-name-field')).nativeElement; - - expect(categoryControl.hidden).toBeTrue(); - expect(controlVisibilityChangeSpy).toHaveBeenCalledOnceWith(false); expect(getExistingCategoriesList()).toEqual([]); expect(component.categoryNameControl.value).toBe(''); expect(component.categoryNameControl.untouched).toBeTrue(); diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts index 51d4683fe13..ac84cd907c3 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts @@ -177,10 +177,24 @@ 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; + } + get categoryNameControl(): FormControl { return this._categoryNameControl; } + /* + * Returns `true` if categories empty, otherwise `false` + */ + get isCategoryEmpty(): boolean { + return this.categories?.length === 0 && !this.categoryNameControlVisible; + } + get existingCategories(): Category[] { return this._existingCategories; } @@ -205,16 +219,6 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { return this.managementMode === CategoriesManagementMode.CRUD; } - /** - * Hides and emits categoryNameControl and hides existing categories panel. - */ - hideNameInput() { - this.categoryNameControlVisible = false; - this.categoryNameControlVisibleChange.emit(false); - this._existingCategoriesPanelVisible = false; - this.clearCategoryNameInput(); - } - /** * Adds category that has been typed to a categoryNameControl and hides it afterwards. */ @@ -223,7 +227,6 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { const newCatName = this.categoryNameControl.value.trim(); const newCat = new Category({ id: newCatName, name: newCatName }); this.categories.push(newCat); - this.hideNameInput(); this.clearCategoryNameInput(); this._existingCategories = null; this.categoriesChange.emit(this.categories); diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html index 3b9930e3b91..0278ba6332e 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html @@ -24,24 +24,6 @@ data-automation-id="meta-data-card-edit-aspect"> menu -
- diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts index 8d8416f17a6..a6a3bc7e394 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts @@ -147,55 +147,6 @@ describe('ContentMetadataCardComponent', () => { expect(contentMetadataComponent).toBeNull(); }); - it('should toggle editable by clicking on the button', () => { - component.editable = true; - component.node.allowableOperations = [AllowableOperationsEnum.UPDATE]; - fixture.detectChanges(); - - getToggleEditButton().triggerEventHandler('click', {}); - fixture.detectChanges(); - - expect(component.editable).toBe(false); - }); - - it('should emit editableChange by clicking on toggle edit button', () => { - component.node.allowableOperations = [AllowableOperationsEnum.UPDATE]; - fixture.detectChanges(); - spyOn(component.editableChange, 'emit'); - - getToggleEditButton().nativeElement.click(); - expect(component.editableChange.emit).toHaveBeenCalledWith(true); - }); - - it('should toggle expanded by clicking on the button', () => { - component.expanded = true; - fixture.detectChanges(); - - const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-expand"]')); - button.triggerEventHandler('click', {}); - fixture.detectChanges(); - - expect(component.expanded).toBe(false); - }); - - it('should have the proper text on button while collapsed', () => { - component.expanded = false; - fixture.detectChanges(); - - const buttonLabel = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-expand-label"]')); - - expect(buttonLabel.nativeElement.innerText.trim()).toBe('ADF_VIEWER.SIDEBAR.METADATA.MORE_INFORMATION'); - }); - - it('should have the proper text on button while collapsed', () => { - component.expanded = true; - fixture.detectChanges(); - - const buttonLabel = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-expand-label"]')); - - expect(buttonLabel.nativeElement.innerText.trim()).toBe('ADF_VIEWER.SIDEBAR.METADATA.LESS_INFORMATION'); - }); - it('should hide the edit button in readOnly is true', () => { component.readOnly = true; fixture.detectChanges(); @@ -211,14 +162,6 @@ describe('ContentMetadataCardComponent', () => { expect(getToggleEditButton()).toBeNull(); }); - it('should show the edit button if node does has `update` permissions', () => { - component.readOnly = false; - component.node.allowableOperations = [AllowableOperationsEnum.UPDATE]; - fixture.detectChanges(); - - expect(getToggleEditButton()).not.toBeNull(); - }); - it('should expand the card when custom display aspect is valid', () => { expect(component.expanded).toBeFalsy(); diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts index 4522d57b672..6210dbb838e 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core'; +import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; import { Node } from '@alfresco/js-api'; import { NodeAspectService } from '../../../aspect-list/services/node-aspect.service'; import { ContentMetadataCustomPanel, PresetConfig } from '../../interfaces/content-metadata.interfaces'; @@ -84,10 +84,6 @@ export class ContentMetadataCardComponent implements OnChanges { @Input() customPanels: ContentMetadataCustomPanel[]; - /** Emitted when content's editable state is changed. */ - @Output() - editableChange = new EventEmitter(); - private _displayDefaultProperties: boolean = true; /** @@ -125,15 +121,6 @@ export class ContentMetadataCardComponent implements OnChanges { this.expanded = !this._displayDefaultProperties; } - toggleEdit(): void { - this.editable = !this.editable; - this.editableChange.emit(this.editable); - } - - toggleExpanded(): void { - this.expanded = !this.expanded; - } - hasAllowableOperations() { return this.contentService.hasAllowableOperations(this.node, AllowableOperationsEnum.UPDATE); } diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/button-type.enum.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/button-type.enum.ts new file mode 100644 index 00000000000..9e2275a42eb --- /dev/null +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/button-type.enum.ts @@ -0,0 +1,24 @@ +/*! + * @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. + */ + +// eslint-disable-next-line no-shadow +export enum ButtonType { + GeneralInfo = 'generalInfo', + Tags = 'tags', + Categories = 'categories', + Group = 'group' +} diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html index 783c3c60574..93ea9dfa309 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html @@ -3,12 +3,48 @@ [multi]="multi"> + [attr.data-automation-id]="'adf-metadata-group-properties'" + hideToggle + (opened)="toggleGeneralInfoPanel()" + (closed)="toggleGeneralInfoPanel()"> - - {{ 'CORE.METADATA.BASIC.HEADER' | translate }} - +
+ + {{ isGeneralInfoPanelVisible ? 'expand_more' : 'chevron_right'}} + + + {{ 'CORE.METADATA.BASIC.HEADER' | translate }} + +
+ +
+ + +
+ - + - {{ 'METADATA.BASIC.TAGS' | translate }} +
+ + {{ isTagPanelVisible ? 'expand_more' : 'chevron_right'}} + + + {{ 'METADATA.BASIC.TAGS' | translate }} + +
+
+ +
+
+ + +
-

{{ tag }}

- -
-
-

{{ 'METADATA.BASIC.TAGS' | translate }}

- + +
+ {{ tag }} +
+
+ {{ 'METADATA.BASIC.NO_TAGS_ADDED' | translate }}
- - -
+
+ + +
+ - + - {{ 'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE' | translate }} +
+ + {{ isCategoriesPanelVisible ? 'expand_more' : 'chevron_right'}} + + {{ 'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE' | translate }} + +
+
+ +
+
+ + +
-

{{ category.name }}

- -
-
-

{{ 'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE' | translate }}

- + +
+

{{ category.name }}

- - -
+
+ {{ 'CATEGORIES_MANAGEMENT.NO_CATEGORIES_ADDED' | translate }} +
+
+ + +
+ @@ -84,23 +187,61 @@ -
- + - - {{ group.title | translate }} - +
+ + {{ group.expanded ? 'expand_more' : 'chevron_right'}} + + +

+ {{ group.title | translate }} +

+ +
+ +
+ + +
- + +
+ {{ 'METADATA.BASIC.NO_ITEMS_MESSAGE' | translate: { groupTitle: group.title } }} +
-
- - -
- - -
-
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss index 99468a7eb37..83b90a09a1b 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss @@ -1,16 +1,25 @@ .adf { &-metadata-properties { - .mat-expansion-panel-header.mat-expanded:hover, - .mat-expansion-panel-header.mat-expanded:focus { - background: var(--adf-theme-background-hover-color); - } - mat-expansion-panel-header { - height: 64px; + height: 56px; + padding: 0 12px; + border-radius: 12px; + + .mat-content { + display: contents; + } .adf-metadata-properties-title { - font-weight: normal; + font-weight: 700; font-size: 15px; + padding-left: 12px; + } + + .adf-metadata-properties-group-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 80px; } } @@ -18,21 +27,43 @@ box-shadow: none; } - .adf-metadata-properties-tag { - height: 40px; + .adf-mat-divider { + margin-left: -24px; + margin-right: -24px; + } + + .adf-edit-icon-buttons { + color: var(--adf-theme-foreground-text-color-054); + } + + .adf-metadata-properties-panel-content { display: flex; align-items: center; - margin-top: -14px; - margin-bottom: 1em; + flex: 1; + } - &:first-of-type { - margin-top: 5px; - } + .adf-metadata-properties-tag { + height: 32px; + display: inline-flex; + align-items: center; + border-radius: 16px; + width: fit-content; + background: var(--theme-metadata-buttons-background-color); + margin-top: 12px; + padding: 6px 12px; + justify-content: center; + margin-left: 8px; } - &-tags { - padding: 0 10px 0 26px; + .adf-metadata-no-item-added { + display: flex; + align-items: center; + justify-content: center; + font-size: 15px; + padding-top: 16px; + } + &-tags { &-title { display: flex; justify-content: space-between; @@ -42,15 +73,8 @@ } adf-tags-creator { - margin-top: 19px; - .adf-tags-creation { padding-right: 0; - padding-left: 12px; - - .adf-tag { - margin-top: -14px; - } } &.adf-creator-with-existing-tags-panel { @@ -67,13 +91,16 @@ &-metadata-action-buttons { display: flex; justify-content: space-evenly; - margin: 10px; + + &-clear { + color: var(--theme-metadata-action-button-clear-color); + } } &-metadata-categories-header { display: flex; flex-direction: column; - padding: 0 24px; + padding-right: 24px; .adf-metadata-categories-title { display: flex; @@ -92,3 +119,25 @@ } } } + +.adf-metadata-properties .adf-metadata-grouped-properties-container .mat-expansion-panel { + .mat-expansion-panel-body { + padding: 0 24px; + } +} + +.adf-info-drawer-layout-content .adf-content-metadata-card .adf-metadata-properties .mat-expansion-panel { + border: 1px solid var(--theme-metadata-property-panel-border-color); + border-radius: 12px; + margin-bottom: 12px; +} + +.adf-content-metadata-card { + .mat-card { + box-shadow: none; + } +} + +.adf-metadata-grouped-properties-container .mat-content.mat-content-hide-toggle { + align-items: center; +} diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts index 9bb10750b3f..f09b205b074 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts @@ -21,7 +21,7 @@ import { By } from '@angular/platform-browser'; import { Category, CategoryPaging, ClassesApi, Node, Tag, TagBody, TagEntry, TagPaging, TagPagingList } from '@alfresco/js-api'; import { ContentMetadataComponent } from './content-metadata.component'; import { ContentMetadataService } from '../../services/content-metadata.service'; -import { AppConfigService, CardViewBaseItemModel, CardViewComponent, LogService, UpdateNotification } from '@alfresco/adf-core'; +import { AppConfigService, CardViewBaseItemModel, CardViewComponent, LogService, NotificationService, UpdateNotification } from '@alfresco/adf-core'; import { NodesApiService } from '../../../common/services/nodes-api.service'; import { EMPTY, of, throwError } from 'rxjs'; import { ContentTestingModule } from '../../../testing/content.testing.module'; @@ -31,6 +31,7 @@ import { CardViewContentUpdateService } from '../../../common/services/card-view import { PropertyGroup } from '../../interfaces/property-group.interface'; import { PropertyDescriptorsService } from '../../services/property-descriptors.service'; import { + CardViewGroup, CategoriesManagementComponent, CategoriesManagementMode, CategoryService, @@ -38,6 +39,7 @@ import { TagsCreatorMode, TagService } from '@alfresco/adf-content-services'; +import { ButtonType } from './button-type.enum'; describe('ContentMetadataComponent', () => { let component: ContentMetadataComponent; @@ -49,6 +51,8 @@ describe('ContentMetadataComponent', () => { let folderNode: Node; let tagService: TagService; let categoryService: CategoryService; + let getClassSpy: jasmine.Spy; + let notificationService: NotificationService; const preset = 'custom-preset'; @@ -71,26 +75,40 @@ describe('ContentMetadataComponent', () => { const category2 = new Category({ id: 'test2', name: 'testCat2' }); const categoryPagingResponse: CategoryPaging = { list: { pagination: {}, entries: [{ entry: category1 }, { entry: category2 }] } }; - const findTagElements = (): DebugElement[] => fixture.debugElement.queryAll(By.css('.adf-metadata-properties-tag')); + const findTagElements = (): DebugElement[] => fixture.debugElement.queryAll(By.css('.adf-metadata-properties .adf-metadata-properties-tag')); const findCancelButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('[data-automation-id=reset-metadata]')).nativeElement; + const findCancelTagsButton = (): HTMLButtonElement => + fixture.debugElement.query(By.css('[data-automation-id=reset-tags-metadata]')).nativeElement; const clickOnCancel = () => { findCancelButton().click(); fixture.detectChanges(); }; - const findSaveButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('[data-automation-id=save-metadata]')).nativeElement; + const findSaveGeneralInfoButton = (): HTMLButtonElement => + fixture.debugElement.query(By.css('[data-automation-id=save-general-info-metadata]')).nativeElement; + const findSaveTagsButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('[data-automation-id=save-tags-metadata]')).nativeElement; + const findSaveCategoriesButton = (): HTMLButtonElement => + fixture.debugElement.query(By.css('[data-automation-id=save-categories-metadata]')).nativeElement; - const clickOnSave = () => { - findSaveButton().click(); + const clickOnGeneralInfoSave = () => { + findSaveGeneralInfoButton().click(); + fixture.detectChanges(); + }; + + const clickOnTagsSave = () => { + findSaveTagsButton().click(); fixture.detectChanges(); }; const findTagsCreator = (): TagsCreatorComponent => fixture.debugElement.query(By.directive(TagsCreatorComponent))?.componentInstance; - const findShowingTagInputButton = (): HTMLButtonElement => - fixture.debugElement.query(By.css('[data-automation-id=showing-tag-input-button]')).nativeElement; + const findShowingTagInputButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('.adf-tags-buttons')).nativeElement; + const getToggleEditButton = () => fixture.debugElement.query(By.css('[data-automation-id="meta-data-general-info-edit"]')); + const getTagsToggleEditButton = () => fixture.debugElement.query(By.css('[data-automation-id="showing-tag-input-button"]')); + const getCategoriesToggleEditButton = () => fixture.debugElement.query(By.css('[data-automation-id="meta-data-categories-edit"]')); + const getGroupToggleEditButton = () => fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]')); /** * Get metadata categories @@ -116,7 +134,7 @@ describe('ContentMetadataComponent', () => { * @returns native element */ function getAssignCategoriesBtn(): HTMLButtonElement { - return fixture.debugElement.query(By.css('.adf-metadata-categories-title button')).nativeElement; + return fixture.debugElement.query(By.css('.adf-metadata-categories-title')).nativeElement; } /** @@ -135,8 +153,8 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - clickOnSave(); - + const event = new MouseEvent('click'); + component.saveChanges(ButtonType.Group, event); await fixture.whenStable(); } @@ -175,6 +193,9 @@ describe('ContentMetadataComponent', () => { nodesApiService = TestBed.inject(NodesApiService); tagService = TestBed.inject(TagService); categoryService = TestBed.inject(CategoryService); + notificationService = TestBed.inject(NotificationService); + const propertyDescriptorsService = TestBed.inject(PropertyDescriptorsService); + const classesApi = propertyDescriptorsService['classesApi']; node = { id: 'node-id', @@ -197,6 +218,7 @@ describe('ContentMetadataComponent', () => { component.node = node; component.preset = preset; spyOn(contentMetadataService, 'getContentTypeProperty').and.returnValue(of([])); + getClassSpy = spyOn(classesApi, 'getClass'); fixture.detectChanges(); }); @@ -272,7 +294,7 @@ describe('ContentMetadataComponent', () => { })); it('should call removeTag and assignTagsToNode on TagService on save click', fakeAsync(() => { - component.editable = true; + component.editableTags = true; component.displayTags = true; const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel; const expectedNode = { ...node, name: 'some-modified-value' }; @@ -284,14 +306,13 @@ describe('ContentMetadataComponent', () => { spyOn(tagService, 'assignTagsToNode').and.returnValue(EMPTY); const tagName1 = tagPaging.list.entries[0].entry.tag; const tagName2 = 'New tag 3'; - updateService.update(property, 'updated-value'); - tick(600); - fixture.detectChanges(); findTagsCreator().tagsChange.emit([tagName1, tagName2]); - clickOnSave(); - + fixture.detectChanges(); + tick(600); + clickOnTagsSave(); + tick(100); const tag1 = new TagBody(); tag1.tag = tagName1; const tag2 = new TagBody(); @@ -300,8 +321,8 @@ describe('ContentMetadataComponent', () => { expect(tagService.assignTagsToNode).toHaveBeenCalledWith(node.id, [tag1, tag2]); })); - it('should call getTagsByNodeId on TagService on save click', fakeAsync(() => { - component.editable = true; + it('should call getTagsByNodeId on TagService on save click', () => { + component.editableTags = true; component.displayTags = true; const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel; const expectedNode = { ...node, name: 'some-modified-value' }; @@ -313,15 +334,15 @@ describe('ContentMetadataComponent', () => { spyOn(tagService, 'assignTagsToNode').and.returnValue(of({})); updateService.update(property, 'updated-value'); - tick(600); fixture.detectChanges(); findTagsCreator().tagsChange.emit([tagPaging.list.entries[0].entry.tag, 'New tag 3']); getTagsByNodeIdSpy.calls.reset(); - clickOnSave(); + const mockEvent = new MouseEvent('click'); + component.saveChanges(ButtonType.Tags, mockEvent); expect(tagService.getTagsByNodeId).toHaveBeenCalledWith(node.id); - })); + }); it('should throw error on unsuccessful save', fakeAsync(() => { const logService: LogService = TestBed.inject(LogService); @@ -340,7 +361,7 @@ describe('ContentMetadataComponent', () => { spyOn(nodesApiService, 'updateNode').and.returnValue(throwError(new Error('My bad'))); fixture.detectChanges(); - fixture.whenStable().then(() => clickOnSave()); + fixture.whenStable().then(() => clickOnGeneralInfoSave()); discardPeriodicTasks(); flush(); })); @@ -357,7 +378,7 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); tick(100); - clickOnSave(); + clickOnGeneralInfoSave(); tick(100); expect(component.node).toEqual(expectedNode); @@ -367,7 +388,7 @@ describe('ContentMetadataComponent', () => { })); it('should call removeTag and assignTagsToNode on TagService after confirming confirmation dialog when content type is changed', fakeAsync(() => { - component.editable = true; + component.editableTags = true; component.displayTags = true; const property = { key: 'nodeType', value: 'ft:sbiruli' } as CardViewBaseItemModel; const expectedNode = { ...node, nodeType: 'ft:sbiruli' }; @@ -388,7 +409,7 @@ describe('ContentMetadataComponent', () => { findTagsCreator().tagsChange.emit([tagName1, tagName2]); tick(100); fixture.detectChanges(); - clickOnSave(); + clickOnTagsSave(); tick(100); const tag1 = new TagBody(); @@ -412,7 +433,7 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); tick(100); - clickOnSave(); + clickOnGeneralInfoSave(); tick(100); expect(component.node).toEqual(expectedNode); @@ -420,6 +441,182 @@ describe('ContentMetadataComponent', () => { })); }); + describe('toggleEdit', () => { + let mockEvent: MouseEvent; + let showErrorSpy: jasmine.Spy; + const mockGroup: CardViewGroup = { + editable: false, + expanded: false, + title: '', + properties: [] + }; + beforeEach(() => { + mockEvent = new MouseEvent('click'); + component.editableGroup = mockGroup; + showErrorSpy = spyOn(notificationService, 'showError').and.stub(); + }); + + it('should toggle General Info editing mode', () => { + component.editable = false; + component.toggleEdit(mockEvent, mockGroup, ButtonType.GeneralInfo); + expect(component.editableTags).toBe(false); + expect(component.editableCategories).toBe(false); + expect(component.editableGroup.editable).toBe(false); + }); + + it('should toggle Tags editing mode', () => { + component.editableTags = false; + component.toggleEdit(mockEvent, mockGroup, ButtonType.Tags); + expect(component.isTagPanelVisible).toBe(component.editableTags); + expect(component.tagNameControlVisible).toBe(true); + expect(component.editableCategories).toBe(false); + expect(component.editableGroup.editable).toBe(false); + }); + + it('should toggle Categories editing mode', () => { + component.editableCategories = false; + component.toggleEdit(mockEvent, mockGroup, ButtonType.Categories); + expect(component.isCategoriesPanelVisible).toBe(component.editableCategories); + expect(component.categoryControlVisible).toBe(true); + expect(component.editableTags).toBe(false); + expect(component.editableGroup.editable).toBe(false); + }); + + it('should toggle Group editing mode', () => { + component.toggleEdit(mockEvent, mockGroup, ButtonType.Group); + expect(component.editable).toBe(false); + expect(component.editableGroup).toBe(mockGroup.editable ? mockGroup : null); + if (mockGroup.editable) { + expect(mockGroup.expanded).toBe(true); + } + }); + + it('should show Snackbar when Editing Panel is Active', () => { + spyOn(component, 'isEditingPanel').and.returnValue(true); + component.toggleEdit(mockEvent, mockGroup, ButtonType.GeneralInfo); + expect(component.isEditingPanel).toHaveBeenCalled(); + expect(showErrorSpy).toHaveBeenCalledWith('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES'); + }); + }); + + describe('toggleEditMode', () => { + it('should toggle general editable', () => { + component.editable = false; + component.toggleEditMode(ButtonType.GeneralInfo); + expect(component.editable).toBe(true); + }); + + it('should toggle tags editable', () => { + component.editableTags = false; + component.toggleEditMode(ButtonType.Tags); + expect(component.editableTags).toBe(true); + }); + + it('should toggle categories editable', () => { + component.editableCategories = false; + component.toggleEditMode(ButtonType.Categories); + expect(component.editableCategories).toBe(true); + }); + + it('should toggle group editable', () => { + const group: CardViewGroup = { + editable: false, + expanded: false, + title: '', + properties: [] + }; + component.editableGroup = null; + component.toggleEditMode(ButtonType.Group, group); + expect(group.editable).toBe(true); + }); + }); +; + describe('Permission', () => { + it('should hide the general info edit button if node does not have `update` permissions', () => { + component.readOnly = false; + component.node.allowableOperations = null; + fixture.detectChanges(); + + expect(getToggleEditButton()).toBeNull(); + }); + + it('should hide the tags edit button if node does not have `update` permissions', () => { + component.readOnly = false; + component.node.allowableOperations = null; + fixture.detectChanges(); + + expect(getTagsToggleEditButton()).toBeNull(); + }); + + it('should hide the categories edit button if node does not have `update` permissions', () => { + component.readOnly = false; + component.node.allowableOperations = null; + fixture.detectChanges(); + + expect(getCategoriesToggleEditButton()).toBeNull(); + }); + + it('should hide the groups edit button if node does not have `update` permissions', () => { + component.readOnly = false; + component.node.allowableOperations = null; + fixture.detectChanges(); + + expect(getGroupToggleEditButton()).toBeNull(); + }); + }); + + describe('hasToggleEdit', () => { + it('should return true when editable is false, readOnly is false, and hasAllowableOperations is true', () => { + component.editable = false; + component.readOnly = false; + component.hasAllowableOperations = true; + const result = component.hasToggleEdit; + expect(result).toBe(true); + }); + + it('should return false when editable is true', () => { + component.editable = true; + component.readOnly = false; + component.hasAllowableOperations = true; + const result = component.hasToggleEdit; + expect(result).toBe(false); + }); + }); + + describe('hasTagsToggleEdit', () => { + it('should have hasTagsToggleEdit property as expected', () => { + component.editableTags = false; + component.readOnly = false; + component.hasAllowableOperations = true; + fixture.detectChanges(); + expect(component.hasTagsToggleEdit).toBe(true); + }); + }); + + describe('hasGroupToggleEdit', () => { + it('should return true when group is not editable, not read-only, and has allowable operations', () => { + component.readOnly = false; + component.hasAllowableOperations = true; + const group: CardViewGroup = { + title: 'Group Title', + properties: [], + expanded: true, + editable: false + }; + const result = component.hasGroupToggleEdit(group); + expect(result).toBe(true); + }); + }); + + describe('hasCategoriesToggleEdit', () => { + it('should have hasCategoriesToggleEdit property as expected', () => { + component.editableCategories = false; + component.readOnly = false; + component.hasAllowableOperations = true; + expect(component.hasCategoriesToggleEdit).toBe(true); + }); + }); + describe('Reseting', () => { it('should reset properties on reset click', async () => { component.changedProperties = { properties: { 'property-key': 'updated-value' } }; @@ -562,9 +759,7 @@ describe('ContentMetadataComponent', () => { }); it('should hide card views group when the grouped properties are empty', async () => { - component.expanded = true; - - spyOn(contentMetadataService, 'getGroupedProperties').and.returnValue(of([{ properties: [] } as any])); + spyOn(contentMetadataService, 'getGroupedProperties').and.stub(); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); @@ -577,21 +772,7 @@ describe('ContentMetadataComponent', () => { it('should display card views group when there is at least one property that is not empty', async () => { component.expanded = true; - - const cardViewGroup = { - title: 'Group 1', - properties: [ - { - data: null, - default: null, - displayValue: 'DefaultName', - icon: '', - key: 'properties.cm:default', - label: 'To' - } - ] - }; - spyOn(contentMetadataService, 'getGroupedProperties').and.returnValue(of([{ properties: [cardViewGroup] } as any])); + spyOn(contentMetadataService, 'getGroupedProperties').and.stub(); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); @@ -725,7 +906,7 @@ describe('ContentMetadataComponent', () => { 'cm:versionable': '*' }); - spyOn(classesApi, 'getClass').and.returnValue(Promise.resolve(verResponse)); + getClassSpy.and.returnValue(Promise.resolve(verResponse)); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); @@ -745,7 +926,7 @@ describe('ContentMetadataComponent', () => { 'cm:versionable': '*' }); - spyOn(classesApi, 'getClass').and.returnValue(Promise.resolve(verResponse)); + getClassSpy.and.returnValue(Promise.resolve(verResponse)); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); @@ -765,7 +946,7 @@ describe('ContentMetadataComponent', () => { exclude: 'cm:versionable' }); - spyOn(classesApi, 'getClass').and.returnValue(Promise.resolve(verResponse)); + getClassSpy.and.returnValue(Promise.resolve(verResponse)); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); @@ -786,7 +967,7 @@ describe('ContentMetadataComponent', () => { 'cm:versionable': '*' }); - spyOn(classesApi, 'getClass').and.returnValue(Promise.resolve(verResponse)); + getClassSpy.and.returnValue(Promise.resolve(verResponse)); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); @@ -806,7 +987,7 @@ describe('ContentMetadataComponent', () => { exclude: ['cm:versionable', 'cm:auditable'] }); - spyOn(classesApi, 'getClass').and.returnValue(Promise.resolve(verResponse)); + getClassSpy.and.returnValue(Promise.resolve(verResponse)); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); @@ -830,7 +1011,7 @@ describe('ContentMetadataComponent', () => { 'exif:exif': ['exif:pixelXDimension', 'exif:pixelYDimension'] }); - spyOn(classesApi, 'getClass').and.returnValue(Promise.resolve(exifResponse)); + getClassSpy.and.returnValue(Promise.resolve(exifResponse)); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); @@ -864,7 +1045,7 @@ describe('ContentMetadataComponent', () => { 'exif:exif': ['exif:pixelXDimension', 'exif:pixelYDimension'] }); - spyOn(classesApi, 'getClass').and.returnValue(Promise.resolve(exifResponse)); + getClassSpy.and.returnValue(Promise.resolve(exifResponse)); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); fixture.detectChanges(); @@ -892,16 +1073,10 @@ describe('ContentMetadataComponent', () => { component.displayAspect = 'EXIF'; component.expanded = true; component.displayEmpty = true; - fixture.detectChanges(); await fixture.whenStable(); - let defaultProp = queryDom(fixture); - let exifProp = queryDom(fixture, 'EXIF'); - let customProp = queryDom(fixture, 'CUSTOM'); expect(defaultProp.componentInstance.expanded).toBeFalsy(); - expect(exifProp.componentInstance.expanded).toBeTruthy(); - expect(customProp.componentInstance.expanded).toBeFalsy(); component.displayAspect = 'CUSTOM'; @@ -909,23 +1084,14 @@ describe('ContentMetadataComponent', () => { await fixture.whenStable(); defaultProp = queryDom(fixture); - exifProp = queryDom(fixture, 'EXIF'); - customProp = queryDom(fixture, 'CUSTOM'); expect(defaultProp.componentInstance.expanded).toBeFalsy(); - expect(exifProp.componentInstance.expanded).toBeFalsy(); - expect(customProp.componentInstance.expanded).toBeTruthy(); - component.displayAspect = 'Properties'; fixture.detectChanges(); await fixture.whenStable(); defaultProp = queryDom(fixture); - exifProp = queryDom(fixture, 'EXIF'); - customProp = queryDom(fixture, 'CUSTOM'); expect(defaultProp.componentInstance.expanded).toBeTruthy(); - expect(exifProp.componentInstance.expanded).toBeFalsy(); - expect(customProp.componentInstance.expanded).toBeFalsy(); }); it('should not expand anything if input is wrong', async () => { @@ -938,10 +1104,8 @@ describe('ContentMetadataComponent', () => { const defaultProp = queryDom(fixture); const exifProp = queryDom(fixture, 'EXIF'); - const customProp = queryDom(fixture, 'CUSTOM'); expect(defaultProp.componentInstance.expanded).toBeFalsy(); expect(exifProp.componentInstance.expanded).toBeFalsy(); - expect(customProp.componentInstance.expanded).toBeFalsy(); }); }); @@ -1053,7 +1217,7 @@ describe('ContentMetadataComponent', () => { }); it('should render tags after loading tags after clicking on Cancel button', fakeAsync(() => { - component.editable = true; + component.editableTags = true; fixture.detectChanges(); TestBed.inject(CardViewContentUpdateService).itemUpdated$.next({ changed: {} @@ -1061,9 +1225,8 @@ describe('ContentMetadataComponent', () => { tick(500); fixture.detectChanges(); spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging)); - - clickOnCancel(); - component.editable = false; + findCancelTagsButton().click(); + component.editableTags = false; fixture.detectChanges(); const tagElements = findTagElements(); expect(tagElements).toHaveSize(2); @@ -1077,7 +1240,7 @@ describe('ContentMetadataComponent', () => { component.ngOnInit(); fixture.detectChanges(); - component.editable = true; + component.editableTags = true; fixture.detectChanges(); expect(findTagElements()).toHaveSize(0); }); @@ -1087,7 +1250,7 @@ describe('ContentMetadataComponent', () => { let tagsCreator: TagsCreatorComponent; beforeEach(() => { - component.editable = true; + component.editableTags = true; component.displayTags = true; fixture.detectChanges(); tagsCreator = findTagsCreator(); @@ -1097,12 +1260,6 @@ describe('ContentMetadataComponent', () => { expect(tagsCreator.tagNameControlVisible).toBeFalse(); }); - it('should hide showing tag input button after emitting tagNameControlVisibleChange event with true', () => { - tagsCreator.tagNameControlVisibleChange.emit(true); - fixture.detectChanges(); - expect(findShowingTagInputButton().hasAttribute('hidden')).toBeTrue(); - }); - it('should show showing tag input button after emitting tagNameControlVisibleChange event with false', fakeAsync(() => { tagsCreator.tagNameControlVisibleChange.emit(true); fixture.detectChanges(); @@ -1120,28 +1277,20 @@ describe('ContentMetadataComponent', () => { it('should enable cancel button after emitting tagsChange event', () => { tagsCreator.tagsChange.emit(['New tag 1', 'New tag 2', 'New tag 3']); fixture.detectChanges(); - expect(findCancelButton().disabled).toBeFalse(); + expect(findCancelTagsButton().disabled).toBeFalse(); }); it('should enable save button after emitting tagsChange event', () => { tagsCreator.tagsChange.emit(['New tag 1', 'New tag 2', 'New tag 3']); fixture.detectChanges(); - expect(findSaveButton().disabled).toBeFalse(); + expect(findSaveTagsButton().disabled).toBeFalse(); }); it('should have assigned false to disabledTagsRemoving', () => { expect(tagsCreator.disabledTagsRemoving).toBeFalse(); }); - it('should have assigned true to disabledTagsRemoving after clicking on update button', () => { - tagsCreator.tagsChange.emit([]); - fixture.detectChanges(); - - clickOnSave(); - expect(tagsCreator.disabledTagsRemoving).toBeTrue(); - }); - - it('should have assigned false to disabledTagsRemoving if forkJoin fails', fakeAsync(() => { + it('should have assigned false to disabledTagsRemoving if forkJoin fails', () => { const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel; const expectedNode = { ...node, name: 'some-modified-value' }; spyOn(nodesApiService, 'updateNode').and.returnValue(of(expectedNode)); @@ -1154,22 +1303,12 @@ describe('ContentMetadataComponent', () => { const tagName2 = 'New tag 3'; updateService.update(property, 'updated-value'); - tick(600); fixture.detectChanges(); tagsCreator.tagsChange.emit([tagName1, tagName2]); - clickOnSave(); + clickOnTagsSave(); expect(tagsCreator.disabledTagsRemoving).toBeFalse(); - })); - - it('should have assigned false to tagNameControlVisible after clicking on update button', () => { - tagsCreator.tagNameControlVisibleChange.emit(true); - tagsCreator.tagsChange.emit([]); - fixture.detectChanges(); - - clickOnSave(); - expect(tagsCreator.tagNameControlVisible).toBeFalse(); }); describe('Setting tags', () => { @@ -1199,7 +1338,7 @@ describe('ContentMetadataComponent', () => { }); it('should show tags creator if editable is true and displayTags is true', () => { - component.editable = true; + component.editableTags = true; component.displayTags = true; fixture.detectChanges(); expect(findTagsCreator()).toBeDefined(); @@ -1263,7 +1402,7 @@ describe('ContentMetadataComponent', () => { }); it('should render categories after discard changes button is clicked', fakeAsync(() => { - component.editable = true; + component.editableCategories = true; fixture.detectChanges(); TestBed.inject(CardViewContentUpdateService).itemUpdated$.next({ changed: {} @@ -1285,7 +1424,7 @@ describe('ContentMetadataComponent', () => { })); it('should be hidden when editable is true', () => { - component.editable = true; + component.editableCategories = true; fixture.detectChanges(); expect(getCategories().length).toBe(0); }); @@ -1295,7 +1434,7 @@ describe('ContentMetadataComponent', () => { let categoriesManagementComponent: CategoriesManagementComponent; beforeEach(() => { - component.editable = true; + component.editableCategories = true; component.displayCategories = true; component.node.aspectNames.push('generalclassifiable'); spyOn(categoryService, 'getCategoryLinksForNode').and.returnValue(of(categoryPagingResponse)); @@ -1307,12 +1446,6 @@ describe('ContentMetadataComponent', () => { expect(categoriesManagementComponent.categoryNameControlVisible).toBeFalse(); }); - it('should hide assign categories button when categoryNameControlVisible changes to true', () => { - categoriesManagementComponent.categoryNameControlVisibleChange.emit(true); - fixture.detectChanges(); - expect(getAssignCategoriesBtn().hasAttribute('hidden')).toBeTrue(); - }); - it('should show assign categories button when categoryNameControlVisible changes to false', fakeAsync(() => { categoriesManagementComponent.categoryNameControlVisibleChange.emit(true); fixture.detectChanges(); @@ -1341,22 +1474,14 @@ describe('ContentMetadataComponent', () => { categoriesManagementComponent.categoriesChange.emit([category1, category2]); fixture.detectChanges(); expect(findCancelButton().disabled).toBeFalse(); - expect(findSaveButton().disabled).toBeFalse(); + expect(findSaveCategoriesButton().disabled).toBeFalse(); }); it('should not disable removal initially', () => { expect(categoriesManagementComponent.disableRemoval).toBeFalse(); }); - it('should disable removal on saving', () => { - categoriesManagementComponent.categoriesChange.emit([]); - fixture.detectChanges(); - - clickOnSave(); - expect(categoriesManagementComponent.disableRemoval).toBeTrue(); - }); - - it('should not disable removal if forkJoin fails', fakeAsync(() => { + it('should not disable removal if forkJoin fails', () => { const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel; const expectedNode = { ...node, name: 'some-modified-value' }; spyOn(nodesApiService, 'updateNode').and.returnValue(of(expectedNode)); @@ -1367,24 +1492,12 @@ describe('ContentMetadataComponent', () => { spyOn(categoryService, 'linkNodeToCategory').and.returnValue(throwError({})); updateService.update(property, 'updated-value'); - tick(600); fixture.detectChanges(); categoriesManagementComponent.categoriesChange.emit([category1, category2]); - clickOnSave(); + findSaveCategoriesButton(); expect(categoriesManagementComponent.disableRemoval).toBeFalse(); - discardPeriodicTasks(); - flush(); - })); - - it('should set categoryNameControlVisible to false after saving', () => { - categoriesManagementComponent.categoryNameControlVisibleChange.emit(true); - categoriesManagementComponent.categoriesChange.emit([]); - fixture.detectChanges(); - - clickOnSave(); - expect(categoriesManagementComponent.categoryNameControlVisible).toBeFalse(); }); describe('Setting categories', () => { diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts index 60680dacd8f..ed733529517 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts @@ -15,23 +15,27 @@ * limitations under the License. */ -import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core'; import { - Category, - CategoryEntry, - CategoryLinkBody, - CategoryPaging, - Node, - TagBody, - TagEntry, - TagPaging -} from '@alfresco/js-api'; + ChangeDetectorRef, + Component, + EventEmitter, + Input, + OnChanges, + OnDestroy, + OnInit, + Output, + SimpleChanges, + ViewChild, + ViewEncapsulation +} from '@angular/core'; +import { Category, CategoryEntry, CategoryLinkBody, CategoryPaging, Node, TagBody, TagEntry, TagPaging } from '@alfresco/js-api'; import { forkJoin, Observable, of, Subject, zip } from 'rxjs'; import { AppConfigService, CardViewBaseItemModel, CardViewItem, LogService, + NotificationService, TranslationService, UpdateNotification } from '@alfresco/adf-core'; @@ -44,6 +48,10 @@ import { TagsCreatorMode } from '../../../tag/tags-creator/tags-creator-mode'; 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 { ButtonType } from './button-type.enum'; +import { AllowableOperationsEnum } from '../../../common/models/allowable-operations.enum'; +import { ContentService } from '../../../common/services/content.service'; const DEFAULT_SEPARATOR = ', '; @@ -55,6 +63,8 @@ const DEFAULT_SEPARATOR = ', '; encapsulation: ViewEncapsulation.None }) export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { + @ViewChild(MatExpansionPanel) + panel: MatExpansionPanel; protected onDestroy$ = new Subject(); /** (required) The node entity to fetch metadata about */ @@ -119,6 +129,73 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { @Input() customPanels: ContentMetadataCustomPanel[] = []; + /** + * (optional) This flag sets the metadata in read-only mode, + * preventing changes. + */ + @Input() + readOnly = false; + + /** + * Emitted when content's editable state is changed. + * + * @event editableChange + * @type {EventEmitter} + */ + @Output() + editableChange = new EventEmitter(); + + /** + * Emitted when content's editableTags state is changed. + * + * @event editableTagsChange + * @type {EventEmitter} + */ + @Output() + editableTagsChange = new EventEmitter(); + + /** + * Emitted when content's editableCategories state is changed. + * + * @event editableCategoriesChange + * @type {EventEmitter} + */ + @Output() + editableCategoriesChange = new EventEmitter(); + + /** + * Emitted when content's group state is changed. + * + * @event groupChange + * @type {EventEmitter} + */ + @Output() + groupChange = new EventEmitter(); + + /** + * (optional) This flag toggles editable of categories content. + * + * @type {boolean} + */ + @Input() + editableCategories = false; + + /** + * (optional) This flag toggles editable of tags content. + * + * @type {boolean} + */ + @Input() + editableTags = false; + + /** + * Group content state + * + * @type {CardViewGroup} + */ + @Input() + group: CardViewGroup; + private _assignedTags: string[] = []; private assignedTagsEntries: TagEntry[] = []; private _editable = false; @@ -140,6 +217,12 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { categoriesManagementMode = CategoriesManagementMode.ASSIGN; categoryControlVisible = false; classifiableChanged = this.classifiableChangedSubject.asObservable(); + isGeneralInfoPanelVisible: boolean; + isTagPanelVisible: boolean; + isCategoriesPanelVisible: boolean; + hasAllowableOperations = false; + editableGroup: CardViewGroup; + buttonType = ButtonType; constructor( private contentMetadataService: ContentMetadataService, @@ -149,7 +232,10 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { private translationService: TranslationService, private appConfig: AppConfigService, private tagService: TagService, - private categoryService: CategoryService + private categoryService: CategoryService, + private cdr: ChangeDetectorRef, + private contentService: ContentService, + private notificationService: NotificationService ) { this.copyToClipboardAction = this.appConfig.get('content-metadata.copy-to-clipboard-action'); this.multiValueSeparator = this.appConfig.get('content-metadata.multi-value-pipe-separator') || DEFAULT_SEPARATOR; @@ -158,23 +244,19 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { ngOnInit() { this.cardViewContentUpdateService.itemUpdated$ - .pipe( - debounceTime(500), - takeUntil(this.onDestroy$)) - .subscribe( - (updatedNode: UpdateNotification) => { - this.hasMetadataChanged = true; - this.targetProperty = updatedNode.target; - this.updateChanges(updatedNode.changed); - } - ); + .pipe(debounceTime(500), takeUntil(this.onDestroy$)) + .subscribe((updatedNode: UpdateNotification) => { + this.hasMetadataChanged = true; + this.targetProperty = updatedNode.target; + this.updateChanges(updatedNode.changed); + }); - this.cardViewContentUpdateService.updatedAspect$.pipe( - debounceTime(500), - takeUntil(this.onDestroy$)) + this.cardViewContentUpdateService.updatedAspect$ + .pipe(debounceTime(500), takeUntil(this.onDestroy$)) .subscribe((node) => this.loadProperties(node)); this.loadProperties(this.node); + this.hasAllowableOperations = this.contentService.hasAllowableOperations(this.node, AllowableOperationsEnum.UPDATE); } get assignedTags(): string[] { @@ -200,8 +282,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { try { statusCode = JSON.parse(error.message).error.statusCode; - } catch { - } + } catch {} let message = `METADATA.ERRORS.${statusCode}`; @@ -240,10 +321,15 @@ 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. + * Called after clicking the save button. It confirms all changes done for metadata and hides both category and tag name controls. + * + * @param buttonType - The type of button clicked. + * @param event - The click event. + * @param group - The group associated with the action. */ - saveChanges() { + saveChanges(buttonType: ButtonType, event: MouseEvent, group?: CardViewGroup) { + event.stopPropagation(); + this.toggleEditMode(buttonType, group); this._saving = true; this.tagNameControlVisible = false; this.categoryControlVisible = false; @@ -256,6 +342,27 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { } } + toggleEditMode(buttonType: ButtonType, group?: CardViewGroup) { + switch (buttonType) { + case ButtonType.GeneralInfo: + this.editable = !this.editable; + break; + case ButtonType.Tags: + this.editableTags = !this.editableTags; + break; + case ButtonType.Categories: + this.editableCategories = !this.editableCategories; + break; + case ButtonType.Group: + if (group) { + group.editable = !group.editable; + } + break; + default: + break; + } + } + /** * 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. @@ -285,11 +392,119 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { this.categoryControlVisible = false; } - cancelChanges() { + cancelChanges(buttonType: ButtonType, event: MouseEvent, group?: CardViewGroup) { + event.stopPropagation(); + this.toggleEditMode(buttonType, group); this.revertChanges(); this.loadProperties(this.node); } + // Returns the editing state of the panel + isEditingPanel(): boolean { + return ( + (this.editable && this.hasMetadataChanged) || + (this.editableTags && this.hasMetadataChanged) || + (this.editableCategories && this.hasMetadataChanged) || + (this.editableGroup?.editable && this.hasMetadataChanged) + ); + } + + toggleEdit(event: MouseEvent, group: CardViewGroup, buttonType: ButtonType): void { + event.stopPropagation(); + if (this.isEditingPanel()) { + this.notificationService.showError('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES'); + return; + } + + if (this.editableGroup && this.editableGroup !== group) { + this.editableGroup.editable = false; + } + + switch (buttonType) { + case ButtonType.GeneralInfo: + this.editable = !this.editable; + this.editableChange.emit(this.editable); + this.panel.open(); + group.editable = false; + break; + case ButtonType.Tags: + this.editableTags = !this.editableTags; + this.editableTagsChange.emit(this.editableTags); + this.isTagPanelVisible = this.editableTags; + this.tagNameControlVisible = true; + group.editable = false; + break; + case ButtonType.Categories: + this.editableCategories = !this.editableCategories; + this.editableCategoriesChange.emit(this.editableCategories); + this.isCategoriesPanelVisible = this.editableCategories; + this.categoryControlVisible = true; + group.editable = false; + break; + case ButtonType.Group: + group.editable = !group.editable; + this.groupChange.emit(group); + this.editableGroup = group.editable ? group : null; + if (group.editable) { + group.expanded = true; + } + break; + default: + break; + } + + if (buttonType !== ButtonType.GeneralInfo) { + this.editable = false; + } + + if (buttonType !== ButtonType.Tags) { + this.editableTags = false; + } + + if (buttonType !== ButtonType.Categories) { + this.editableCategories = false; + } + } + + toggleGeneralInfoPanel() { + this.isGeneralInfoPanelVisible = !this.isGeneralInfoPanelVisible; + this.cdr.detectChanges(); + } + + toggleTagsPanel(tagPanelState: boolean) { + this.isTagPanelVisible = tagPanelState; + this.cdr.detectChanges(); + } + + handleCategoriesPanelState(isCategoriesPanelVisible: boolean) { + this.isCategoriesPanelVisible = isCategoriesPanelVisible; + this.cdr.detectChanges(); + } + + isTagsEmpty(): boolean { + return this.tags?.length === 0 && !this.editableTags; + } + + isCategoryEmpty(): boolean { + return this.categories?.length === 0 && !this.editableCategories; + } + + get hasToggleEdit(): boolean { + return !this.editable && !this.readOnly && this.hasAllowableOperations; + } + + get hasTagsToggleEdit(): boolean { + return !this.editableTags && !this.readOnly && this.hasAllowableOperations; + } + + get hasCategoriesToggleEdit(): boolean { + return !this.editableCategories && !this.readOnly && this.hasAllowableOperations; + } + + hasGroupToggleEdit(group: CardViewGroup): boolean { + return !group.editable && !this.readOnly && this.hasAllowableOperations; + } + showGroup(group: CardViewGroup): boolean { const properties = group.properties.filter((property) => !this.isEmpty(property.displayValue)); @@ -315,13 +530,15 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { updatedNode: this.nodesApiService.updateNode(this.node.id, this.changedProperties), ...(this.displayTags ? this.saveTags() : {}), ...(this.displayCategories ? this.saveCategories() : {}) - }).pipe( - catchError((err) => { - this.cardViewContentUpdateService.updateElement(this.targetProperty); - this.handleUpdateError(err); - this._saving = false; - return of(null); - })) + }) + .pipe( + catchError((err) => { + this.cardViewContentUpdateService.updateElement(this.targetProperty); + this.handleUpdateError(err); + this._saving = false; + return of(null); + }) + ) .subscribe((result: any) => { if (result) { this.updateUndefinedNodeProperties(result.updatedNode); @@ -335,9 +552,9 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { this.loadTagsForNode(this.node.id); } if (this.displayCategories && !!result.LinkingCategories) { - this.assignedCategories = result.LinkingCategories.list ? - result.LinkingCategories.list.entries.map((entry: CategoryEntry) => entry.entry) : - [result.LinkingCategories.entry]; + this.assignedCategories = result.LinkingCategories.list + ? result.LinkingCategories.list.entries.map((entry: CategoryEntry) => entry.entry) + : [result.LinkingCategories.entry]; } } this._saving = false; @@ -374,11 +591,14 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { private getProperties(node: Node) { const properties$ = this.contentMetadataService.getBasicProperties(node); const contentTypeProperty$ = this.contentMetadataService.getContentTypeProperty(node); - return zip(properties$, contentTypeProperty$) - .pipe(map(([properties, contentTypeProperty]) => { - const filteredProperties = contentTypeProperty.filter((property) => properties.findIndex((baseProperty) => baseProperty.key === property.key) === -1); + return zip(properties$, contentTypeProperty$).pipe( + map(([properties, contentTypeProperty]) => { + const filteredProperties = contentTypeProperty.filter( + (property) => properties.findIndex((baseProperty) => baseProperty.key === property.key) === -1 + ); return [...properties, ...filteredProperties]; - })); + }) + ); } private isEmpty(value: any): boolean { @@ -434,11 +654,14 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { } }); if (this.tags.length) { - observables.tagsAssigning = this.tagService.assignTagsToNode(this.node.id, this.tags.map((tag) => { - const tagBody = new TagBody(); - tagBody.tag = tag; - return tagBody; - })); + observables.tagsAssigning = this.tagService.assignTagsToNode( + this.node.id, + this.tags.map((tag) => { + const tagBody = new TagBody(); + tagBody.tag = tag; + return tagBody; + }) + ); } } return observables; 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 dbc4a45f212..0fa230138fc 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 48c22f4f5e8..3b164bf67f9 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 7b10cb8cf74..edc7c8ca90e 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,7 @@ "NAME": "Category name", "LOADING": "Loading", "HIDE_INPUT": "Hide input", + "NO_CATEGORIES_ADDED": "There are currently no categories added", "ERRORS": { "NOT_FOUND": "Categories not found", "REQUIRED": "Category name is required", @@ -487,7 +489,11 @@ "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", + "NO_ITEMS_MESSAGE": "There are currently no {{ groupTitle }} added", + "SAVE_OR_DISCARD_CHANGES": "Save or discard changes to continue" }, "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 9e7f83145ce..812be46e98c 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,38 @@
+
+ + + {{ tagNameErrorMessageKey | translate }} + +

+ *ngIf="isTagsEmpty"> {{ 'TAG.TAGS_CREATOR.NO_TAGS_CREATED' | translate }}

-

+ {{ tag }} -

-
-
- - search - - {{ 'TAG.TAGS_CREATOR.NAME' | translate }} - - - {{ tagNameErrorMessageKey | translate }} - - +
{ return elements.map(el => el.nativeElement); } - /** - * Click at the hide name input button - */ - function clickAtHideNameInputButton() { - fixture.debugElement.query(By.css(`[data-automation-id="hide-tag-name-input-button"]`)).nativeElement.click(); - fixture.detectChanges(); - } - /** * Get newly added tags * @@ -311,24 +303,6 @@ describe('TagsCreatorComponent', () => { expect(tagNameField.query(By.directive(MatFormField))).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(); @@ -341,7 +315,6 @@ describe('TagsCreatorComponent', () => { fixture.detectChanges(); tick(100); - clickAtHideNameInputButton(); component.tagNameControlVisible = true; fixture.detectChanges(); tick(100); @@ -349,24 +322,29 @@ describe('TagsCreatorComponent', () => { 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(); + describe('isNameTagsVisible', () => { + it('should return true when tagNameControlVisible is true', () => { + component.tagNameControlVisible = true; + const result = component.isNameTagsVisible; + expect(result).toBeTrue(); + }); + + it('should return false when tagNameControlVisible is false and tags length is 0', () => { + component.tagNameControlVisible = false; + component.tags = []; + const result = component.isNameTagsVisible; + expect(result).toBeFalse(); + }); + }); - component.tagNameControlVisible = true; - fixture.detectChanges(); - tick(100); - expect(getNameInput().value).toBe(''); - })); + describe('isTagsEmpty', () => { + it('should return true when tags empty', () => { + component.tags = []; + component.tagNameControlVisible = false; + const result = component.isTagsEmpty; + expect(result).toBeTrue(); + }); + }); describe('Errors', () => { /** @@ -487,14 +465,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/content-services/src/lib/tag/tags-creator/tags-creator.component.ts b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts index 4978491ecdb..db83d893da8 100644 --- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts +++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts @@ -104,7 +104,7 @@ export class TagsCreatorComponent implements OnInit, OnDestroy { if (tagNameControlVisible) { this._existingTagsPanelVisible = true; setTimeout(() => { - this.tagNameInputElement.nativeElement.scrollIntoView(); + this.tagNameInputElement?.nativeElement?.scrollIntoView(); }); } else { this._existingTagsPanelVisible = false; @@ -219,6 +219,20 @@ 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; + } + + /* + * Returns `true` if tags empty, otherwise `false` + */ + get isTagsEmpty(): boolean { + return this.tags.length === 0 && !this.tagNameControlVisible; + } + get existingTags(): TagEntry[] { return this._existingTags; } @@ -243,17 +257,6 @@ export class TagsCreatorComponent implements OnInit, OnDestroy { return this._existingTagsPanelVisible; } - /** - * Hide input for typing name for new tag or for searching. When input is hidden then panel of existing tags is hidden as well. - */ - hideNameInput(): void { - this.tagNameControlVisible = false; - this._existingTagsPanelVisible = false; - this.existingTagsPanelVisibilityChange.emit(this.existingTagsPanelVisible); - this.tagNameControlVisibleChange.emit(this.tagNameControlVisible); - this.clearTagNameInput(); - } - /** * Add tags to top list using value which is set in input. Adding tag is not allowed when value in input is invalid * or if user is still typing what means that validation for input is not called yet. @@ -261,7 +264,6 @@ export class TagsCreatorComponent implements OnInit, OnDestroy { addTag(): void { if (!this._typing && !this.tagNameControl.invalid) { this.tags.push(this.tagNameControl.value.trim()); - this.hideNameInput(); this.clearTagNameInput(); this.checkScrollbarVisibility(); this.tagsChange.emit(this.tags); diff --git a/lib/core/src/lib/i18n/en.json b/lib/core/src/lib/i18n/en.json index 2da9563fd5c..f062cbe98e2 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", @@ -401,10 +401,6 @@ "SIDEBAR": { "THUMBNAILS": { "PAGE": "Page {{ pageNum }}" - }, - "METADATA": { - "MORE_INFORMATION": "More information", - "LESS_INFORMATION": "Less information" } }, "PDF_DIALOG": { diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss index 4f99fded8ef..0404615943b 100644 --- a/lib/core/src/lib/styles/_components-variables.scss +++ b/lib/core/src/lib/styles/_components-variables.scss @@ -45,6 +45,9 @@ --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, + --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 diff --git a/lib/core/src/lib/styles/_reference-variables.scss b/lib/core/src/lib/styles/_reference-variables.scss index d214c5fff04..3c1652a39ea 100644 --- a/lib/core/src/lib/styles/_reference-variables.scss +++ b/lib/core/src/lib/styles/_reference-variables.scss @@ -27,3 +27,6 @@ $adf-ref-height: 40px; $adf-ref-width: 40px; $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;