diff --git a/demo-shell/src/app/components/file-view/file-view.component.html b/demo-shell/src/app/components/file-view/file-view.component.html index 1fab5fc9ae5..936ed69521d 100644 --- a/demo-shell/src/app/components/file-view/file-view.component.html +++ b/demo-shell/src/app/components/file-view/file-view.component.html @@ -29,20 +29,17 @@ - - - + +

- - + [displayEmpty]="displayEmptyMetadata" + [displayTags]="true" + [displayCategories]="true"> + 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..d4303b954a0 100644 --- a/docs/content-services/components/tags-creator.component.md +++ b/docs/content-services/components/tags-creator.component.md @@ -13,7 +13,7 @@ Allows to create multiple tags. That component contains input and two lists. Top ```html @@ -35,5 +35,4 @@ Allows to create multiple tags. That component contains input and two lists. Top | Name | Type | Description | | ---- | ---- | ----------- | | 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..1243e911e2e 100644 --- a/docs/tutorials/content-metadata-component.md +++ b/docs/tutorials/content-metadata-component.md @@ -98,12 +98,18 @@ 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. | + ### 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/viewer-content-services-component.e2e.ts b/e2e/content-services/components/viewer-content-services-component.e2e.ts index f38cdb292c4..13c314891ed 100644 --- a/e2e/content-services/components/viewer-content-services-component.e2e.ts +++ b/e2e/content-services/components/viewer-content-services-component.e2e.ts @@ -426,9 +426,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/e2e/content-services/metadata/metadata-content-type.e2e.ts b/e2e/content-services/metadata/metadata-content-type.e2e.ts index c3647fc851b..29c84300e4a 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'); + 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,9 +139,9 @@ 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'); + await expect(await viewerPage.getActiveTab()).toEqual('Properties'); const customType = (await metadataViewPage.hasContentType(type.title)) || (await metadataViewPage.hasContentType(`${model.namespacePrefix}:${type.name}`)); await expect(customType).toBe(true, 'Custom type not found'); await expect(await metadataViewPage.getPropertyText(`properties.${model.namespacePrefix}:${property.name}`)).toContain(property.defaultValue); @@ -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'); + 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,9 +178,9 @@ 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'); + await expect(await viewerPage.getActiveTab()).toEqual('Properties'); defaultType = (await metadataViewPage.hasContentType('Content')) || (await metadataViewPage.hasContentType('cm:content')); await expect(defaultType).toBe(true, 'Content type not found'); await viewerPage.clickCloseButton(); diff --git a/e2e/content-services/metadata/metadata-permissions.e2e.ts b/e2e/content-services/metadata/metadata-permissions.e2e.ts index 6884b1b8b02..fcbcb506b85 100644 --- a/e2e/content-services/metadata/metadata-permissions.e2e.ts +++ b/e2e/content-services/metadata/metadata-permissions.e2e.ts @@ -15,14 +15,7 @@ * limitations under the License. */ -import { createApiService, - LoginPage, - StringUtil, - UploadActions, - UserModel, - UsersActions, - ViewerPage -} from '@alfresco/adf-testing'; +import { createApiService, LoginPage, StringUtil, UploadActions, UserModel, UsersActions, ViewerPage } from '@alfresco/adf-testing'; import { MetadataViewPage } from '../../core/pages/metadata-view.page'; import { NavigationBarPage } from '../../core/pages/navigation-bar.page'; import { FileModel } from '../../models/ACS/file.model'; @@ -31,20 +24,6 @@ import CONSTANTS = require('../../util/constants'); import { SitesApi } from '@alfresco/js-api'; describe('permissions', () => { - - const METADATA = { - DATA_FORMAT: 'mmm dd yyyy', - 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', - EDIT_BUTTON_TOOLTIP: 'Edit' - }; - const loginPage = new LoginPage(); const viewerPage = new ViewerPage(); const metadataViewPage = new MetadataViewPage(); @@ -130,9 +109,7 @@ describe('permissions', () => { await metadataViewPage.clickOnPropertiesTab(); await metadataViewPage.editIconIsDisplayed(); - await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB); - - await metadataViewPage.clickOnInformationButton(); + await expect(await viewerPage.getActiveTab()).toEqual('Properties'); await metadataViewPage.clickMetadataGroup('EXIF'); @@ -150,9 +127,7 @@ describe('permissions', () => { await metadataViewPage.clickOnPropertiesTab(); await metadataViewPage.editIconIsDisplayed(); - await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB); - - await metadataViewPage.clickOnInformationButton(); + await expect(await viewerPage.getActiveTab()).toEqual('Properties'); 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..629cd937203 100644 --- a/e2e/content-services/metadata/metadata-properties.e2e.ts +++ b/e2e/content-services/metadata/metadata-properties.e2e.ts @@ -34,13 +34,9 @@ describe('CardView Component - properties', () => { const METADATA = { DATA_FORMAT: 'mmm dd yyyy', TITLE: 'Details', - COMMENTS_TAB: 'COMMENTS', - PROPERTY_TAB: '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 a8586adaf69..ff66f84ecd1 100644 --- a/e2e/content-services/metadata/metadata-smoke-tests.e2e.ts +++ b/e2e/content-services/metadata/metadata-smoke-tests.e2e.ts @@ -36,14 +36,9 @@ describe('Metadata component', () => { const METADATA = { DATA_FORMAT: 'PP', 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', - EDIT_BUTTON_TOOLTIP: 'Edit' + COMMENTS_TAB: 'Comments', + PROPERTY_TAB: 'Properties', + DEFAULT_ASPECT: 'General info' }; const loginPage = new LoginPage(); @@ -103,7 +98,7 @@ describe('Metadata component', () => { await contentServicesPage.waitForTableBody(); }); - it("[C245652] Should be possible to display a file's properties", async () => { + it('[C245652] Should be possible to display a file properties', async () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); @@ -129,36 +124,12 @@ describe('Metadata component', () => { expect(modifiedDate).toEqual(format(new Date(pngFileModel.createdAt), METADATA.DATA_FORMAT), pngFileModel.createdAt); expect(mimeTypeName).toEqual(pngFileModel.getContent().mimeTypeName); expect(size).toEqual(pngFileModel.getContent().getSizeInBytes()); - - await metadataViewPage.editIconIsDisplayed(); - await metadataViewPage.informationButtonIsDisplayed(); - - const informationButtonText = await metadataViewPage.getInformationButtonText(); - const informationIconText = await metadataViewPage.getInformationIconText(); - - expect(informationButtonText).toEqual(METADATA.MORE_INFO_BUTTON); - expect(informationIconText).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(); - - const informationButtonText = await metadataViewPage.getInformationButtonText(); - const informationIconText = await metadataViewPage.getInformationIconText(); - - expect(informationButtonText).toEqual(METADATA.LESS_INFO_BUTTON); - expect(informationIconText).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(); @@ -166,25 +137,17 @@ describe('Metadata component', () => { await expect(await viewerPage.getActiveTab()).toEqual(METADATA.COMMENTS_TAB); await metadataViewPage.clickOnPropertiesTab(); await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB); - await expect(await metadataViewPage.getEditIconTooltip()).toEqual(METADATA.EDIT_BUTTON_TOOLTIP); }); it('[C245654] Should be possible edit the basic Metadata Info of a Document', async () => { 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.editPropertyIconIsDisplayed('properties.cm:name'); - await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:title'); - await metadataViewPage.editPropertyIconIsDisplayed('properties.cm:description'); - - await expect(await metadataViewPage.getPropertyIconTooltip('properties.cm:name')).toEqual('Edit'); - await expect(await metadataViewPage.getPropertyIconTooltip('properties.cm:title')).toEqual('Edit'); - await expect(await metadataViewPage.getPropertyIconTooltip('properties.cm:description')).toEqual('Edit'); + await metadataViewPage.clickEditIconGeneral(); await metadataViewPage.enterPropertyText('properties.cm:name', 'exampleText'); await metadataViewPage.clickResetMetadata(); @@ -192,14 +155,15 @@ describe('Metadata component', () => { 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(); @@ -208,32 +172,26 @@ 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 () => { await viewerPage.clickInfoButton(); await viewerPage.checkInfoSideBarIsDisplayed(); await metadataViewPage.clickOnPropertiesTab(); - await metadataViewPage.editIconIsDisplayed(); await expect(await viewerPage.getActiveTab()).toEqual(METADATA.PROPERTY_TAB); - - await metadataViewPage.clickOnInformationButton(); - await metadataViewPage.clickMetadataGroup('EXIF'); - await metadataViewPage.editIconClick(); await metadataViewPage.enterPropertyText('properties.exif:software', 'test custom text software'); @@ -255,14 +213,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 03c67b4724b..8815076cbe8 100644 --- a/e2e/core/pages/metadata-view.page.ts +++ b/e2e/core/pages/metadata-view.page.ts @@ -32,9 +32,7 @@ export class MetadataViewPage { description = $(`span[data-automation-id='card-textitem-value-properties.cm:description']`); author = $(`[data-automation-id='card-textitem-value-properties.cm:author']`); 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`); @@ -43,6 +41,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 => @@ -102,28 +101,17 @@ 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 informationButtonIsNotDisplayed(): Promise { - await BrowserVisibility.waitUntilElementIsNotVisible(this.informationButton); - } - - async clickOnInformationButton(): Promise { - await BrowserActions.click(this.informationButton); + async isEditGeneralIconDisplayed(): Promise { + await BrowserVisibility.waitUntilElementIsVisible(this.editIconGeneral); } - 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 BrowserVisibility.waitUntilElementIsVisible(this.editIconGeneral); + await BrowserActions.click(this.editIconGeneral); } async clickOnPropertiesTab(): Promise { @@ -137,11 +125,6 @@ export class MetadataViewPage { return BrowserActions.getAttribute(this.editIcon, 'title'); } - async editPropertyIconIsDisplayed(propertyName: string) { - const editPropertyIcon = $('[data-automation-id="header-' + propertyName + '"] .adf-textitem-edit-icon'); - await BrowserVisibility.waitUntilElementIsPresent(editPropertyIcon); - } - async enterPropertyText(propertyName: string, text: string | number): Promise { const textField = $('input[data-automation-id="card-textitem-value-' + propertyName + '"]'); await BrowserActions.clearSendKeys(textField, text.toString()); @@ -161,11 +144,6 @@ export class MetadataViewPage { return BrowserActions.getInputValue(textField); } - async getPropertyIconTooltip(propertyName: string): Promise { - const editPropertyIcon = $('[data-automation-id="header-' + propertyName + '"] .adf-textitem-edit-icon'); - return BrowserActions.getAttribute(editPropertyIcon, 'title'); - } - async clickMetadataGroup(groupName: string): Promise { const group = await this.getMetadataGroupLocator(groupName); await BrowserActions.click(group); @@ -286,4 +264,8 @@ export class MetadataViewPage { async clickResetMetadata(): Promise { await BrowserActions.click(this.resetMetadataButton); } + + async clickSaveGeneralMetadata(): Promise { + await BrowserActions.click(this.saveGeneralMetadataButton); + } } 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 f0ca8efe99f..1f106b31a2b 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,16 @@

-

- {{ noCategoriesMsg | translate }} -

-
+
+ + {{ categoryNameErrorMessageKey | translate }} +
+
@@ -21,33 +26,9 @@
-
- - 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..ffa69523b5e 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,15 +1,17 @@ .adf-categories-management { + padding-top: 12px; + .adf-category-name-field { - display: flex; justify-content: space-between; width: 100%; + color: var(--adf-metadata-property-panel-text-color); + background: var(--adf-metadata-buttons-background-color); + height: 32px; + border-radius: 12px; + align-items: center; - mat-form-field { - width: 100%; - } - - .adf-btn-padded { - margin-right: -14px; + input { + padding: 7px 8px; } } @@ -18,10 +20,6 @@ justify-content: space-between; align-items: center; word-break: break-word; - - .adf-btn-padded { - margin-right: -14px; - } } .adf-categories-padded { @@ -31,11 +29,14 @@ [hidden] { visibility: hidden; } + + .adf-no-categories-message { + 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 e7e88da813a..25e41c89590 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 @@ -223,44 +223,19 @@ 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'); + describe('showEmptyCategoryMessage', () => { + it('should return true when categories empty and category in non editable state', () => { + component.categories = []; + component.categoryNameControlVisible = false; + expect(component.showEmptyCategoryMessage).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); - - component.categoryNameControlVisible = true; - fixture.detectChanges(); - tick(100); - expect(getCategoryControlInput().value).toBe(''); - })); }); describe('Spinner', () => { @@ -472,13 +447,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..e5fd1d24b5c 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 @@ -181,6 +181,13 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { return this._categoryNameControl; } + /* + * Returns `true` if categories empty and category panel non editable state, otherwise `false` + */ + get showEmptyCategoryMessage(): boolean { + return this.categories.length === 0 && !this.categoryNameControlVisible; + } + get existingCategories(): Category[] { return this._existingCategories; } @@ -205,16 +212,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 +220,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/common/services/content.service.spec.ts b/lib/content-services/src/lib/common/services/content.service.spec.ts index 74e38254125..7df05204ccf 100644 --- a/lib/content-services/src/lib/common/services/content.service.spec.ts +++ b/lib/content-services/src/lib/common/services/content.service.spec.ts @@ -129,4 +129,52 @@ describe('ContentService', () => { expect(contentService.hasPermissions(permissionNode, 'manager')).toBeTruthy(); }); }); + + describe('Node Icons', () => { + let node: Node; + + node = { + isFolder: true, + isFile: false, + createdByUser: { id: 'admin', displayName: 'Administrator' }, + modifiedAt: new Date('2017-05-24T15:08:55.640Z'), + nodeType: 'cm:content', + content: { + mimeType: 'application/rtf', + mimeTypeName: 'Rich Text Format', + sizeInBytes: 14530 + }, + createdAt: new Date('2017-05-24T15:08:55.640Z'), + modifiedByUser: { id: 'admin', displayName: 'Administrator' }, + name: 'b_txt_file.rtf', + id: 'test node 1', + aspectNames: [''] + } as Node; + + it('should resolve folder icon', () => { + expect(contentService.getNodeIcon(node)).toContain('assets/images/ft_ic_folder.svg'); + }); + + it('should resolve link folder icon', () => { + node.nodeType = 'app:folderlink'; + expect(contentService.getNodeIcon(node)).toContain('assets/images/ft_ic_folder_shortcut_link.svg'); + }); + + it('should resolve smart folder icon', () => { + node.aspectNames = ['smf:customConfigSmartFolder']; + expect(contentService.getNodeIcon(node)).toContain('assets/images/ft_ic_smart_folder.svg'); + }); + + it('should resolve file icon for content type', () => { + node.isFolder = false; + node.isFile = true; + expect(contentService.getNodeIcon(node)).toContain('assets/images/ft_ic_ms_word.svg'); + }); + + it('should resolve fallback file icon for unknown node', () => { + node.isFolder = false; + node.isFile = false; + expect(contentService.getNodeIcon(node)).toContain('assets/images/ft_ic_miscellaneous'); + }); + }); }); diff --git a/lib/content-services/src/lib/common/services/content.service.ts b/lib/content-services/src/lib/common/services/content.service.ts index 379e360bc19..d55109a38db 100644 --- a/lib/content-services/src/lib/common/services/content.service.ts +++ b/lib/content-services/src/lib/common/services/content.service.ts @@ -18,7 +18,7 @@ import { Injectable } from '@angular/core'; import { ContentApi, Node, NodeEntry } from '@alfresco/js-api'; import { Subject } from 'rxjs'; -import { AlfrescoApiService, AuthenticationService } from '@alfresco/adf-core'; +import { AlfrescoApiService, AuthenticationService, ThumbnailService } from '@alfresco/adf-core'; import { PermissionsEnum } from '../models/permissions.enum'; import { AllowableOperationsEnum } from '../models/allowable-operations.enum'; @@ -43,7 +43,7 @@ export class ContentService { return this._contentApi; } - constructor(public authService: AuthenticationService, public apiService: AlfrescoApiService) {} + constructor(public authService: AuthenticationService, public apiService: AlfrescoApiService, private thumbnailService?: ThumbnailService) {} /** * Gets a content URL for the given node. @@ -145,4 +145,48 @@ export class ContentService { return hasAllowableOperations; } + + getNodeIcon(node: Node): string { + if (node?.isFolder) { + return this.getFolderIcon(node); + } + if (node?.isFile) { + return this.thumbnailService.getMimeTypeIcon(node?.content?.mimeType); + } + return this.thumbnailService.getDefaultMimeTypeIcon(); + } + + private getFolderIcon(node: Node): string { + if (this.isSmartFolder(node)) { + return this.thumbnailService.getMimeTypeIcon('smartFolder'); + } else if (this.isRuleFolder(node)) { + return this.thumbnailService.getMimeTypeIcon('ruleFolder'); + } else if (this.isLinkFolder(node)) { + return this.thumbnailService.getMimeTypeIcon('linkFolder'); + } else { + return this.thumbnailService.getMimeTypeIcon('folder'); + } + } + + isSmartFolder(node: Node): boolean { + if (node) { + return this.hasAspect(node, 'smf:customConfigSmartFolder') || this.hasAspect(node, 'smf:systemConfigSmartFolder'); + } + return false; + } + + isRuleFolder(node: Node): boolean { + if (node) { + return this.hasAspect(node, 'rule:rules'); + } + return false; + } + + isLinkFolder(node: Node): boolean { + return node?.nodeType === 'app:folderlink'; + } + + private hasAspect(node: Node, aspectName: string): boolean { + return node?.aspectNames?.includes(aspectName); + } } 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..d49b5d688b3 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 @@ -5,7 +5,7 @@ [expanded]="expanded" [node]="node" [displayEmpty]="displayEmpty" - [editable]="editable" + [readOnly]="!editable" [multi]="multi" [displayAspect]="displayAspect" [preset]="preset" @@ -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..8cd19d3bd8f 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 @@ -114,14 +114,6 @@ describe('ContentMetadataCardComponent', () => { expect(contentMetadataComponent.displayEmpty).toBe(true); }); - it('should pass through the editable to the underlying component', () => { - component.editable = true; - fixture.detectChanges(); - const contentMetadataComponent = fixture.debugElement.query(By.directive(ContentMetadataComponent)).componentInstance; - - expect(contentMetadataComponent.editable).toBe(true); - }); - it('should pass through the multi to the underlying component', () => { component.multi = true; fixture.detectChanges(); @@ -147,55 +139,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 +154,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/content-metadata-header.component.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata-header.component.ts new file mode 100644 index 00000000000..8c857e2a11c --- /dev/null +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata-header.component.ts @@ -0,0 +1,55 @@ +/*! + * @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. + */ + +import { CommonModule } from '@angular/common'; +import { Component, Input, ViewEncapsulation } from '@angular/core'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatIconModule } from '@angular/material/icon'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + standalone: true, + imports: [CommonModule, MatIconModule, MatExpansionModule, TranslateModule], + selector: 'adf-content-metadata-header', + encapsulation: ViewEncapsulation.None, + styles: [ + ` + adf-content-metadata-header { + display: flex; + align-items: center; + flex: 1; + } + + .adf-metadata-properties-title { + font-weight: 700; + font-size: 15px; + padding-left: 12px; + } + ` + ], + template: ` + + {{ expanded ? 'expand_more' : 'chevron_right' }} + {{ title | translate }} + + + ` +}) +export class ContentMetadataHeaderComponent { + @Input() title: string = null; + @Input() expanded = true; +} 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 d5d41f07c36..419c68bf012 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 @@ -1,138 +1,225 @@ -
- - - - - {{ 'CORE.METADATA.BASIC.HEADER' | translate }} - - - - - - - - - {{ 'METADATA.BASIC.TAGS' | translate }} - -

{{ tag }}

- -
-
-

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

- +
+ -
- - -
- - - - - {{ 'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE' | translate }} - -

{{ category.name }}

- -
-
-

{{ 'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE' | translate }}

-
- - + + + + + + + + + + + +
+ + +
+ + +
+ {{ tag }} +
+
+ {{ 'METADATA.BASIC.NO_TAGS_ADDED' | translate }}
- - + + + + + + + - {{ customPanel.panelTitle | translate }} + + +
+ + +
+ - +
+

{{ category.name }}

+
+
+ {{ 'CATEGORIES_MANAGEMENT.NO_CATEGORIES_ADDED' | translate }} +
+ + - - -
- - - - {{ group.title | translate }} - - + - - - + + + + + + + + +
+ + + + +
+ + +
+ + +
+ {{ 'METADATA.BASIC.NO_ITEMS_MESSAGE' | translate: { groupTitle: group.title | translate } }}
- - - - - - - - -
- - -
+ + + +
+ -
+ + + + + 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..e275852775b 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,56 +1,64 @@ +$panel-properties-height: 56px !default; + .adf { &-metadata-properties { - .mat-expansion-panel-header.mat-expanded:hover, - .mat-expansion-panel-header.mat-expanded:focus { - background: var(--adf-theme-background-hover-color); + .adf-content-metadata-panel { + box-shadow: none; + border: 1px solid var(--adf-metadata-property-panel-border-color); + border-radius: 12px; + margin: 12px; } mat-expansion-panel-header { - height: 64px; + height: $panel-properties-height; + padding: 0 12px; + border-radius: 12px 12px 0 0; + + &.mat-expanded { + height: $panel-properties-height; + border-bottom: 1px solid var(--adf-metadata-property-panel-border-color); + } - .adf-metadata-properties-title { - font-weight: normal; - font-size: 15px; + .mat-content { + display: contents; + margin-right: 0; } } - .mat-expansion-panel:not([class*='mat-elevation-z']) { - box-shadow: none; + .mat-expansion-panel-content { + .mat-expansion-panel-body { + padding: 0 12px 12px; + } + } + + .adf-edit-icon-buttons { + color: var(--adf-theme-foreground-text-color-054); } .adf-metadata-properties-tag { - height: 40px; - display: flex; + min-height: 32px; + display: inline-flex; align-items: center; - margin-top: -14px; - margin-bottom: 1em; + border-radius: 16px; + width: fit-content; + background: var(--adf-metadata-buttons-background-color); + margin-top: 12px; + padding: 6px 12px; + justify-content: center; + margin-left: 8px; + overflow-wrap: anywhere; + } - &:first-of-type { - margin-top: 5px; - } + .adf-metadata-no-item-added { + word-break: break-all; + font-size: 15px; + padding: 16px 0 0 12px; } &-tags { - padding: 0 10px 0 26px; - - &-title { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 15px; - height: 68px; - } - 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,24 +75,19 @@ &-metadata-action-buttons { display: flex; justify-content: space-evenly; - margin: 10px; + + &-clear { + color: var(--adf-metadata-action-button-clear-color); + } } &-metadata-categories-header { - display: flex; - flex-direction: column; - padding: 0 24px; - - .adf-metadata-categories-title { + .adf-categories-button { display: flex; justify-content: space-between; align-items: center; font-size: 15px; - height: 64px; - - button { - margin-right: -14px; - } + height: $panel-properties-height; [hidden] { visibility: hidden; 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 65847fe4b8b..f0bf225e8d3 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,16 +21,16 @@ 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, 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'; -import { mockGroupProperties } from './mock-data'; import { TranslateModule } from '@ngx-translate/core'; import { CardViewContentUpdateService } from '../../../common/services/card-view-content-update.service'; import { PropertyGroup } from '../../interfaces/property-group.interface'; import { PropertyDescriptorsService } from '../../services/property-descriptors.service'; import { + CardViewGroup, CategoriesManagementComponent, CategoriesManagementMode, CategoryService, @@ -49,6 +49,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 +73,38 @@ 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 findTagsCreator = (): TagsCreatorComponent => fixture.debugElement.query(By.directive(TagsCreatorComponent))?.componentInstance; + const clickOnTagsSave = () => { + findSaveTagsButton().click(); + fixture.detectChanges(); + }; - const findShowingTagInputButton = (): HTMLButtonElement => - fixture.debugElement.query(By.css('[data-automation-id=showing-tag-input-button]')).nativeElement; + const findTagsCreator = (): TagsCreatorComponent => fixture.debugElement.query(By.directive(TagsCreatorComponent))?.componentInstance; + 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 @@ -110,22 +124,12 @@ describe('ContentMetadataComponent', () => { return fixture.debugElement.query(By.directive(CategoriesManagementComponent))?.componentInstance; } - /** - * Get categories title button - * - * @returns native element - */ - function getAssignCategoriesBtn(): HTMLButtonElement { - return fixture.debugElement.query(By.css('.adf-metadata-categories-title button')).nativeElement; - } - /** * Update aspect property * * @param newValue value to set */ async function updateAspectProperty(newValue: string): Promise { - component.editable = true; 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)); @@ -135,8 +139,7 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - clickOnSave(); - + component.onSaveGroupChanges({} as any); await fixture.whenStable(); } @@ -144,12 +147,6 @@ describe('ContentMetadataComponent', () => { TestBed.configureTestingModule({ imports: [TranslateModule.forRoot(), ContentTestingModule], providers: [ - { - provide: LogService, - useValue: { - error: jasmine.createSpy('error') - } - }, { provide: TagService, useValue: { @@ -175,6 +172,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 +197,7 @@ describe('ContentMetadataComponent', () => { component.node = node; component.preset = preset; spyOn(contentMetadataService, 'getContentTypeProperty').and.returnValue(of([])); + getClassSpy = spyOn(classesApi, 'getClass'); fixture.detectChanges(); }); @@ -206,7 +207,7 @@ describe('ContentMetadataComponent', () => { describe('Default input param values', () => { it('should have editable input param as false by default', () => { - expect(component.editable).toBe(false); + expect(component.isEditingModeGeneralInfo).toBe(false); }); it('should have displayEmpty input param as false by default', () => { @@ -272,7 +273,7 @@ describe('ContentMetadataComponent', () => { })); it('should call removeTag and assignTagsToNode on TagService on save click', fakeAsync(() => { - component.editable = true; + component.isEditingModeTags = true; component.displayTags = true; const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel; const expectedNode = { ...node, name: 'some-modified-value' }; @@ -284,24 +285,26 @@ describe('ContentMetadataComponent', () => { spyOn(tagService, 'assignTagsToNode').and.returnValue(EMPTY); const tagName1 = tagPaging.list.entries[0].entry.tag; const tagName2 = 'New tag 3'; - + component.isEditingModeTags = true; + component.readOnly = false; updateService.update(property, 'updated-value'); - tick(600); - fixture.detectChanges(); findTagsCreator().tagsChange.emit([tagName1, tagName2]); - clickOnSave(); - - const tag1 = new TagBody(); - tag1.tag = tagName1; - const tag2 = new TagBody(); - tag2.tag = tagName2; + fixture.detectChanges(); + tick(600); + clickOnTagsSave(); + tick(100); + const tag1 = new TagBody({ tag: tagName1 }); + const tag2 = new TagBody({ tag: tagName2 }); expect(tagService.removeTag).toHaveBeenCalledWith(node.id, tagPaging.list.entries[1].entry.id); expect(tagService.assignTagsToNode).toHaveBeenCalledWith(node.id, [tag1, tag2]); + + discardPeriodicTasks(); + flush(); })); - it('should call getTagsByNodeId on TagService on save click', fakeAsync(() => { - component.editable = true; + it('should call getTagsByNodeId on TagService on save click', () => { + component.isEditingModeTags = true; component.displayTags = true; const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel; const expectedNode = { ...node, name: 'some-modified-value' }; @@ -313,25 +316,23 @@ 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(); + component.onSaveTagsChanges(); expect(tagService.getTagsByNodeId).toHaveBeenCalledWith(node.id); - })); + }); it('should throw error on unsuccessful save', fakeAsync(() => { - const logService: LogService = TestBed.inject(LogService); - component.editable = true; + component.isEditingModeGeneralInfo = true; + component.readOnly = false; const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel; updateService.update(property, 'updated-value'); tick(600); const sub = contentMetadataService.error.subscribe((err) => { - expect(logService.error).toHaveBeenCalledWith(new Error('My bad')); expect(err.statusCode).toBe(0); expect(err.message).toBe('METADATA.ERRORS.GENERIC'); sub.unsubscribe(); @@ -340,13 +341,14 @@ describe('ContentMetadataComponent', () => { spyOn(nodesApiService, 'updateNode').and.returnValue(throwError(new Error('My bad'))); fixture.detectChanges(); - fixture.whenStable().then(() => clickOnSave()); + fixture.whenStable().then(() => clickOnGeneralInfoSave()); discardPeriodicTasks(); flush(); })); it('should open the confirm dialog when content type is changed', fakeAsync(() => { - component.editable = true; + component.isEditingModeGeneralInfo = true; + component.readOnly = false; const property = { key: 'nodeType', value: 'ft:sbiruli' } as CardViewBaseItemModel; const expectedNode = { ...node, nodeType: 'ft:sbiruli' }; spyOn(contentMetadataService, 'openConfirmDialog').and.returnValue(of(true)); @@ -357,17 +359,17 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); tick(100); - clickOnSave(); + clickOnGeneralInfoSave(); tick(100); expect(component.node).toEqual(expectedNode); expect(contentMetadataService.openConfirmDialog).toHaveBeenCalledWith({ nodeType: 'ft:poppoli' }); expect(nodesApiService.updateNode).toHaveBeenCalled(); discardPeriodicTasks(); + flush(); })); it('should call removeTag and assignTagsToNode on TagService after confirming confirmation dialog when content type is changed', fakeAsync(() => { - component.editable = true; component.displayTags = true; const property = { key: 'nodeType', value: 'ft:sbiruli' } as CardViewBaseItemModel; const expectedNode = { ...node, nodeType: 'ft:sbiruli' }; @@ -380,7 +382,8 @@ describe('ContentMetadataComponent', () => { spyOn(tagService, 'assignTagsToNode').and.returnValue(EMPTY); const tagName1 = tagPaging.list.entries[0].entry.tag; const tagName2 = 'New tag 3'; - + component.isEditingModeTags = true; + component.readOnly = false; updateService.update(property, 'ft:poppoli'); tick(600); @@ -388,19 +391,22 @@ describe('ContentMetadataComponent', () => { findTagsCreator().tagsChange.emit([tagName1, tagName2]); tick(100); fixture.detectChanges(); - clickOnSave(); + clickOnTagsSave(); tick(100); - const tag1 = new TagBody(); - tag1.tag = tagName1; - const tag2 = new TagBody(); - tag2.tag = tagName2; + const tag1 = new TagBody({ tag: tagName1 }); + const tag2 = new TagBody({ tag: tagName2 }); + expect(tagService.removeTag).toHaveBeenCalledWith(node.id, tagPaging.list.entries[1].entry.id); expect(tagService.assignTagsToNode).toHaveBeenCalledWith(node.id, [tag1, tag2]); + + discardPeriodicTasks(); + flush(); })); it('should retrigger the load of the properties when the content type has changed', fakeAsync(() => { - component.editable = true; + component.isEditingModeGeneralInfo = true; + component.readOnly = false; const property = { key: 'nodeType', value: 'ft:sbiruli' } as CardViewBaseItemModel; const expectedNode = Object.assign({}, node, { nodeType: 'ft:sbiruli' }); spyOn(contentMetadataService, 'openConfirmDialog').and.returnValue(of(true)); @@ -412,21 +418,227 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); tick(100); - clickOnSave(); + clickOnGeneralInfoSave(); tick(100); expect(component.node).toEqual(expectedNode); expect(updateService.updateNodeAspect).toHaveBeenCalledWith(expectedNode); + + discardPeriodicTasks(); + flush(); })); }); + describe('toggleEdit', () => { + let showErrorSpy: jasmine.Spy; + const mockGroup: CardViewGroup = { + editable: false, + expanded: false, + title: '', + properties: [] + }; + + beforeEach(() => { + component.currentGroup = mockGroup; + showErrorSpy = spyOn(notificationService, 'showError').and.stub(); + }); + + it('should toggle General Info editing mode', () => { + component.isEditingModeGeneralInfo = false; + component.onToggleGeneralInfoEdit(); + expect(component.isEditingModeTags).toBe(false); + expect(component.isEditingModeCategories).toBe(false); + expect(component.currentGroup.editable).toBe(false); + }); + + it('should toggle Tags editing mode', () => { + component.isEditingModeTags = false; + component.onToggleTagsEdit(); + expect(component.isTagPanelExpanded).toBe(component.isEditingModeTags); + expect(component.tagNameControlVisible).toBe(true); + expect(component.isEditingModeCategories).toBe(false); + expect(component.currentGroup.editable).toBe(false); + }); + + it('should toggle Categories editing mode', () => { + component.isEditingModeCategories = false; + component.onToggleCategoriesEdit(); + expect(component.isCategoriesPanelExpanded).toBe(component.isEditingModeCategories); + expect(component.categoryControlVisible).toBe(true); + expect(component.isEditingModeTags).toBe(false); + expect(component.currentGroup.editable).toBe(false); + }); + + it('should toggle Group editing mode', () => { + component.onToggleGroupEdit(mockGroup); + expect(component.isEditingModeGeneralInfo).toBe(false); + expect(component.currentGroup).toBe(mockGroup); + }); + + it('should show Snackbar when Editing Panel is Active', () => { + spyOn(component, 'isEditingPanel').and.returnValue(true); + component.onToggleGeneralInfoEdit(); + expect(component.isEditingPanel).toHaveBeenCalled(); + expect(showErrorSpy).toHaveBeenCalledWith('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES'); + }); + }); + + describe('toggleEditMode', () => { + it('should toggle general editable', () => { + component.isEditingModeGeneralInfo = false; + component.onToggleGeneralInfoEdit(); + expect(component.isEditingModeGeneralInfo).toBe(true); + }); + + it('should toggle tags editable', () => { + component.isEditingModeTags = false; + component.onToggleTagsEdit(); + expect(component.isEditingModeTags).toBe(true); + }); + + it('should toggle categories editable', () => { + component.isEditingModeCategories = false; + component.onToggleCategoriesEdit(); + expect(component.isEditingModeCategories).toBe(true); + }); + + it('should toggle group editable', () => { + const group: CardViewGroup = { + editable: false, + expanded: false, + title: '', + properties: [] + }; + component.currentGroup = null; + component.onToggleGroupEdit(group); + expect(group.editable).toBe(true); + }); + }); + + describe('Permission', () => { + beforeEach(() => { + component.readOnly = false; + component.node.allowableOperations = null; + + component.ngOnInit(); + }); + + it('should hide the general info edit button if node does not have `update` permissions', async () => { + fixture.detectChanges(); + await fixture.whenStable(); + + expect(component.readOnly).toBeTrue(); + expect(getToggleEditButton()).toBeNull(); + }); + + it('should hide the tags edit button if node does not have `update` permissions', async () => { + fixture.detectChanges(); + await fixture.whenStable(); + + expect(component.readOnly).toBeTrue(); + expect(getTagsToggleEditButton()).toBeNull(); + }); + + it('should hide the categories edit button if node does not have `update` permissions', async () => { + fixture.detectChanges(); + await fixture.whenStable(); + + expect(component.readOnly).toBeTrue(); + 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.isEditingModeGeneralInfo = false; + component.readOnly = false; + expect(component.canEditGeneralInfo).toBe(true); + }); + + it('should return false when editable is true', () => { + component.isEditingModeGeneralInfo = true; + component.readOnly = false; + fixture.detectChanges(); + expect(component.canEditGeneralInfo).toBe(false); + expect(component.isEditingGeneralInfo).toBe(true); + }); + }); + + describe('hasTagsToggleEdit', () => { + it('should have hasTagsToggleEdit property as expected', () => { + component.isEditingModeTags = false; + component.readOnly = false; + fixture.detectChanges(); + expect(component.canEditTags).toBe(true); + }); + + it('should return false when editable is true', () => { + component.isEditingModeTags = true; + component.readOnly = false; + fixture.detectChanges(); + expect(component.canEditTags).toBe(false); + expect(component.isEditingTags).toBe(true); + }); + }); + + describe('hasGroupToggleEdit', () => { + it('should return true when group is not editable, not read-only', () => { + component.readOnly = false; + const group: CardViewGroup = { + title: 'Group Title', + properties: [], + expanded: true, + editable: false + }; + const result = component.hasGroupToggleEdit(group); + expect(result).toBe(true); + }); + + it('should return true when group is editable, not read-only', () => { + component.readOnly = false; + const group: CardViewGroup = { + title: 'Group Title', + properties: [], + expanded: true, + editable: true + }; + const result = component.isGroupToggleEditing(group); + expect(result).toBe(true); + }); + }); + + describe('hasCategoriesToggleEdit', () => { + it('should have hasCategoriesToggleEdit property as expected', () => { + component.isEditingModeCategories = false; + component.readOnly = false; + expect(component.canEditCategories).toBe(true); + }); + + it('should return false when editable is true', () => { + component.isEditingModeCategories = true; + component.readOnly = false; + fixture.detectChanges(); + expect(component.canEditCategories).toBe(false); + expect(component.isEditingCategories).toBe(true); + }); + }); + describe('Reseting', () => { it('should reset properties on reset click', async () => { component.changedProperties = { properties: { 'property-key': 'updated-value' } }; component.hasMetadataChanged = true; component.tagNameControlVisible = true; component.categoryControlVisible = true; - component.editable = true; + component.isEditingModeGeneralInfo = true; + component.readOnly = false; const expectedNode = Object.assign({}, node, { name: 'some-modified-value' }); spyOn(nodesApiService, 'updateNode').and.returnValue(of(expectedNode)); @@ -562,9 +774,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 +787,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) }); @@ -601,6 +797,33 @@ describe('ContentMetadataComponent', () => { const basicPropertiesGroup = fixture.debugElement.query(By.css('.adf-metadata-grouped-properties-container mat-expansion-panel')); expect(basicPropertiesGroup).toBeDefined(); }); + + it('should revert changes for general info panel on cancel', () => { + const spy = spyOn(contentMetadataService, 'getBasicProperties'); + component.onCancelGeneralInfoEdit(); + expect(spy).toHaveBeenCalled(); + }); + + it('should revert changes for getGroupedProperties panel on cancel', () => { + spyOn(contentMetadataService, 'getGroupedProperties'); + component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); + component.onCancelGroupEdit({} as CardViewGroup); + expect(contentMetadataService.getGroupedProperties).toHaveBeenCalledWith(expectedNode, 'custom-preset'); + }); + + it('should revert changes for categories panel on cancel', () => { + const spy = spyOn(categoryService, 'getCategoryLinksForNode').and.returnValue(of(categoryPagingResponse)); + component.displayCategories = true; + component.onCancelCategoriesEdit(); + expect(spy).toHaveBeenCalledWith(expectedNode.id); + }); + + it('should revert changes for tags panel on cancel', () => { + const spy = spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(mockTagPaging())); + component.displayTags = true; + component.onCancelTagsEdit(); + expect(spy).toHaveBeenCalledWith(expectedNode.id); + }); }); describe('Properties displaying', () => { @@ -725,7 +948,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 +968,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 +988,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 +1009,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 +1029,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 +1053,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 +1087,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(); @@ -880,28 +1103,21 @@ describe('ContentMetadataComponent', () => { }); describe('Expand the panel', () => { - let expectedNode: Node; beforeEach(() => { - expectedNode = { ...node, name: 'some-modified-value' }; - spyOn(contentMetadataService, 'getGroupedProperties').and.returnValue(of(mockGroupProperties)); - component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); + component.isGeneralPanelExpanded = false; }); it('should open and update drawer with expand section dynamically', async () => { + component.displayEmpty = true; 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 +1125,7 @@ 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 () => { @@ -937,11 +1137,16 @@ describe('ContentMetadataComponent', () => { await fixture.whenStable(); 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(); + }); + + it('should expand the section when displayAspect set as Properties', async () => { + component.displayAspect = 'Properties'; + + component.ngOnInit(); + fixture.detectChanges(); + + expect(component.isGeneralPanelExpanded).toBeTruthy(); }); }); @@ -1053,7 +1258,8 @@ describe('ContentMetadataComponent', () => { }); it('should render tags after loading tags after clicking on Cancel button', fakeAsync(() => { - component.editable = true; + component.isEditingModeTags = true; + component.readOnly = false; fixture.detectChanges(); TestBed.inject(CardViewContentUpdateService).itemUpdated$.next({ changed: {} @@ -1061,9 +1267,8 @@ describe('ContentMetadataComponent', () => { tick(500); fixture.detectChanges(); spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging)); - - clickOnCancel(); - component.editable = false; + findCancelTagsButton().click(); + component.isEditingModeTags = false; fixture.detectChanges(); const tagElements = findTagElements(); expect(tagElements).toHaveSize(2); @@ -1077,7 +1282,7 @@ describe('ContentMetadataComponent', () => { component.ngOnInit(); fixture.detectChanges(); - component.editable = true; + component.isEditingModeTags = true; fixture.detectChanges(); expect(findTagElements()).toHaveSize(0); }); @@ -1087,7 +1292,7 @@ describe('ContentMetadataComponent', () => { let tagsCreator: TagsCreatorComponent; beforeEach(() => { - component.editable = true; + component.isEditingModeTags = true; component.displayTags = true; fixture.detectChanges(); tagsCreator = findTagsCreator(); @@ -1097,51 +1302,29 @@ 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(); - tick(); - tagsCreator.tagNameControlVisibleChange.emit(false); - fixture.detectChanges(); - tick(100); - expect(findShowingTagInputButton().hasAttribute('hidden')).toBeFalse(); - })); - - it('should have assigned correct mode', () => { + it('should load in create and assign mode by default', () => { expect(tagsCreator.mode).toBe(TagsCreatorMode.CREATE_AND_ASSIGN); }); it('should enable cancel button after emitting tagsChange event', () => { + component.readOnly = false; 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']); + component.readOnly = false; 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)); @@ -1152,24 +1335,15 @@ describe('ContentMetadataComponent', () => { spyOn(tagService, 'assignTagsToNode').and.returnValue(EMPTY); const tagName1 = tagPaging.list.entries[0].entry.tag; const tagName2 = 'New tag 3'; - + component.isEditingModeTags = true; + component.readOnly = false; 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 +1373,7 @@ describe('ContentMetadataComponent', () => { }); it('should show tags creator if editable is true and displayTags is true', () => { - component.editable = true; + component.isEditingModeTags = true; component.displayTags = true; fixture.detectChanges(); expect(findTagsCreator()).toBeDefined(); @@ -1263,7 +1437,8 @@ describe('ContentMetadataComponent', () => { }); it('should render categories after discard changes button is clicked', fakeAsync(() => { - component.editable = true; + component.isEditingModeCategories = true; + component.readOnly = false; fixture.detectChanges(); TestBed.inject(CardViewContentUpdateService).itemUpdated$.next({ changed: {} @@ -1272,7 +1447,7 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); clickOnCancel(); - component.editable = false; + component.isEditingModeGeneralInfo = false; fixture.detectChanges(); const categories = getCategories(); @@ -1285,7 +1460,7 @@ describe('ContentMetadataComponent', () => { })); it('should be hidden when editable is true', () => { - component.editable = true; + component.isEditingModeCategories = true; fixture.detectChanges(); expect(getCategories().length).toBe(0); }); @@ -1295,7 +1470,7 @@ describe('ContentMetadataComponent', () => { let categoriesManagementComponent: CategoriesManagementComponent; beforeEach(() => { - component.editable = true; + component.isEditingModeCategories = true; component.displayCategories = true; component.node.aspectNames.push('generalclassifiable'); spyOn(categoryService, 'getCategoryLinksForNode').and.returnValue(of(categoryPagingResponse)); @@ -1307,23 +1482,7 @@ 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(); - tick(); - categoriesManagementComponent.categoryNameControlVisibleChange.emit(false); - fixture.detectChanges(); - tick(100); - expect(getAssignCategoriesBtn().hasAttribute('hidden')).toBeFalse(); - })); - - it('should have correct mode', () => { + it('should load with assign mode by default', () => { expect(categoriesManagementComponent.managementMode).toBe(CategoriesManagementMode.ASSIGN); }); @@ -1339,24 +1498,17 @@ describe('ContentMetadataComponent', () => { it('should enable discard and save buttons after emitting categories change event', () => { categoriesManagementComponent.categoriesChange.emit([category1, category2]); + component.readOnly =false; 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 +1519,14 @@ describe('ContentMetadataComponent', () => { spyOn(categoryService, 'linkNodeToCategory').and.returnValue(throwError({})); updateService.update(property, 'updated-value'); - tick(600); + component.readOnly = false; + component.isEditingModeCategories = true; 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', () => { @@ -1410,7 +1552,7 @@ describe('ContentMetadataComponent', () => { it('should render correct custom panel with title and component', () => { component.customPanels = [{ panelTitle: 'testTitle', component: 'testComponent' }]; fixture.detectChanges(); - const panelTitle = fixture.debugElement.queryAll(By.css('mat-panel-title'))[1].nativeElement; + const panelTitle = fixture.debugElement.query(By.css('.adf-metadata-custom-panel-title .adf-metadata-properties-title')).nativeElement; const customComponent = fixture.debugElement.query(By.css('adf-dynamic-component')).nativeElement; expect(panelTitle.innerText).toEqual('testTitle'); expect(customComponent).toBeDefined(); 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 1a293ec23b7..dbd136c2459 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,22 @@ * 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'; + Component, + Input, + OnChanges, + OnDestroy, + OnInit, + SimpleChanges, + 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 +43,8 @@ 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 { AllowableOperationsEnum } from '../../../common/models/allowable-operations.enum'; +import { ContentService } from '../../../common/services/content.service'; const DEFAULT_SEPARATOR = ', '; @@ -61,17 +62,6 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { @Input() node: Node; - /** Toggles whether the edit button should be shown */ - @Input() - set editable(editable: boolean) { - this._editable = editable; - this._assignedTags = [...this.tags]; - } - - get editable(): boolean { - return this._editable; - } - /** Toggles whether to display empty values in the card view */ @Input() displayEmpty: boolean = false; @@ -119,9 +109,15 @@ 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; + private _assignedTags: string[] = []; private assignedTagsEntries: TagEntry[] = []; - private _editable = false; private _tagsCreatorMode = TagsCreatorMode.CREATE_AND_ASSIGN; private _tags: string[] = []; private targetProperty: CardViewBaseItemModel; @@ -140,16 +136,25 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { categoriesManagementMode = CategoriesManagementMode.ASSIGN; categoryControlVisible = false; classifiableChanged = this.classifiableChangedSubject.asObservable(); + isGeneralPanelExpanded = true; + isTagPanelExpanded: boolean; + isCategoriesPanelExpanded: boolean; + currentGroup: CardViewGroup; + + isEditingModeGeneralInfo = false; + isEditingModeTags = false; + isEditingModeCategories = false; constructor( private contentMetadataService: ContentMetadataService, private cardViewContentUpdateService: CardViewContentUpdateService, private nodesApiService: NodesApiService, - private logService: LogService, private translationService: TranslationService, private appConfig: AppConfigService, private tagService: TagService, - private categoryService: CategoryService + private categoryService: CategoryService, + 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 +163,32 @@ 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$)) - .subscribe((node) => this.loadProperties(node)); + this.cardViewContentUpdateService.updatedAspect$ + .pipe(debounceTime(500), takeUntil(this.onDestroy$)) + .subscribe((node) => { + this.node.aspectNames = node?.aspectNames; + this.loadProperties(node); + }); this.loadProperties(this.node); + this.verifyAllowableOperations(); + + if (this.displayAspect === 'Properties') { + this.isGeneralPanelExpanded = true; + } + } + + private verifyAllowableOperations() { + if (!this.node?.allowableOperations || !this.contentService.hasAllowableOperations(this.node, AllowableOperationsEnum.UPDATE)) { + this.readOnly = true; + } } get assignedTags(): string[] { @@ -194,14 +208,11 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { } protected handleUpdateError(error: Error) { - this.logService.error(error); - let statusCode = 0; try { statusCode = JSON.parse(error.message).error.statusCode; - } catch { - } + } catch {} let message = `METADATA.ERRORS.${statusCode}`; @@ -219,6 +230,10 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { if (changes.node && !changes.node.firstChange) { this.loadProperties(changes.node.currentValue); } + if(changes?.readOnly && changes?.readOnly?.currentValue) { + this.cancelEditing(); + this.groupedProperties$ = this.contentMetadataService.getGroupedProperties(this.node, this.preset); + } } ngOnDestroy() { @@ -239,14 +254,36 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { }); } - /** - * Called after clicking save button. It confirms all changes done for metadata and hides both category and tag name controls. - * Before clicking on that button they are not saved. - */ - saveChanges() { + private onSave(event?: MouseEvent) { + event?.stopPropagation(); + + this.onSaveChanges(); + this.cancelEditing(); + } + + onSaveGeneralInfoChanges(event?: MouseEvent) { + this.onSave(event); + } + + onSaveTagsChanges(event?: MouseEvent) { + this.onSave(event); + } + + onSaveCategoriesChanges(event?: MouseEvent) { + this.onSave(event); + } + + onSaveGroupChanges(group: CardViewGroup, event?: MouseEvent) { + this.onSave(event); + + group.editable = false; + } + + private onSaveChanges() { this._saving = true; this.tagNameControlVisible = false; this.categoryControlVisible = false; + if (this.hasContentTypeChanged(this.changedProperties)) { this.contentMetadataService.openConfirmDialog(this.changedProperties).subscribe(() => { this.updateNode(); @@ -285,9 +322,168 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { this.categoryControlVisible = false; } - cancelChanges() { + // Returns the editing state of the panel + isEditingPanel(): boolean { + return ( + (this.isEditingModeGeneralInfo || this.isEditingModeTags || this.isEditingModeCategories || this.currentGroup?.editable) && this.hasMetadataChanged + ); + } + + onToggleGeneralInfoEdit(event?: MouseEvent) { + event?.stopPropagation(); + + if (this.isEditingPanel()) { + this.notificationService.showError('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES'); + return; + } + + const currentMode = this.isEditingModeGeneralInfo; + this.cancelEditing(); + this.isEditingModeGeneralInfo = !currentMode; + this.isGeneralPanelExpanded = true; + this.groupedProperties$ = this.contentMetadataService.getGroupedProperties(this.node, this.preset); + } + + onToggleTagsEdit(event?: MouseEvent) { + event?.stopPropagation(); + + if (this.isEditingPanel()) { + this.notificationService.showError('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES'); + return; + } + + const currentValue = this.isEditingModeTags; + this.cancelEditing(); + this.isEditingModeTags = !currentValue; + this.isTagPanelExpanded = this.isEditingModeTags; + this.tagNameControlVisible = true; + this.groupedProperties$ = this.contentMetadataService.getGroupedProperties(this.node, this.preset); + } + + private cancelEditing() { + this.isEditingModeGeneralInfo = false; + this.isEditingModeCategories = false; + this.isEditingModeTags = false; + } + + onCancelGeneralInfoEdit(event?: MouseEvent) { + event?.stopPropagation(); + + this.cancelEditing(); this.revertChanges(); - this.loadProperties(this.node); + + this.basicProperties$ = this.getProperties(this.node); + } + + onCancelCategoriesEdit(event?: MouseEvent) { + event?.stopPropagation(); + + this.cancelEditing(); + this.revertChanges(); + + this.loadCategoriesForNode(this.node.id); + + const aspectNames = this.node.aspectNames || []; + if (!aspectNames.includes('generalclassifiable')) { + this.categories = []; + this.classifiableChangedSubject.next(); + } + } + + onCancelTagsEdit(event?: MouseEvent) { + event?.stopPropagation(); + + this.cancelEditing(); + this.revertChanges(); + + this.basicProperties$ = this.getProperties(this.node); + this.loadTagsForNode(this.node.id); + } + + onCancelGroupEdit(group: CardViewGroup, event?: MouseEvent) { + event?.stopPropagation(); + + this.cancelEditing(); + this.revertChanges(); + + group.editable = false; + this.groupedProperties$ = this.contentMetadataService.getGroupedProperties(this.node, this.preset); + } + + onToggleCategoriesEdit(event?: MouseEvent) { + event?.stopPropagation(); + + if (this.isEditingPanel()) { + this.notificationService.showError('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES'); + return; + } + + const currentValue = this.isEditingModeCategories; + this.cancelEditing(); + this.isEditingModeCategories = !currentValue; + this.isCategoriesPanelExpanded = this.isEditingModeCategories; + this.categoryControlVisible = true; + this.groupedProperties$ = this.contentMetadataService.getGroupedProperties(this.node, this.preset); + } + + onToggleGroupEdit(group: CardViewGroup, event?: MouseEvent) { + event?.stopPropagation(); + + if (this.isEditingPanel()) { + this.notificationService.showError('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES'); + return; + } + this.cancelEditing(); + + if (this.currentGroup && this.currentGroup.title !== group.title) { + this.currentGroup.editable = false; + } + + group.editable = !group.editable; + this.currentGroup = group.editable ? group : null; + if (group.editable) { + group.expanded = true; + } + } + + get showEmptyTagMessage(): boolean { + return this.tags?.length === 0 && !this.isEditingModeTags; + } + + get showEmptyCategoryMessage(): boolean { + return this.categories?.length === 0 && !this.isEditingModeCategories; + } + + get canEditGeneralInfo(): boolean { + return !this.isEditingModeGeneralInfo && !this.readOnly; + } + + get isEditingGeneralInfo(): boolean { + return this.isEditingModeGeneralInfo && !this.readOnly; + } + + get canEditTags(): boolean { + return !this.isEditingModeTags && !this.readOnly; + } + + get isEditingTags(): boolean { + return this.isEditingModeTags && !this.readOnly; + } + + get canEditCategories(): boolean { + return !this.isEditingModeCategories && !this.readOnly; + } + + get isEditingCategories(): boolean { + return this.isEditingModeCategories && !this.readOnly; + } + + hasGroupToggleEdit(group: CardViewGroup): boolean { + return !group.editable && !this.readOnly; + } + + isGroupToggleEditing(group: CardViewGroup): boolean { + return group.editable && !this.readOnly; } showGroup(group: CardViewGroup): boolean { @@ -300,10 +496,6 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { return groupTitle === this.displayAspect; } - canExpandProperties(): boolean { - return !this.expanded || this.displayAspect === 'Properties'; - } - keyDown(event: KeyboardEvent) { if (event.keyCode === 37 || event.keyCode === 39) { // ArrowLeft && ArrowRight event.stopPropagation(); @@ -315,13 +507,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 +529,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; @@ -358,12 +552,16 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { if (node) { this.basicProperties$ = this.getProperties(node); this.groupedProperties$ = this.contentMetadataService.getGroupedProperties(node, this.preset); + if (this.displayTags) { this.loadTagsForNode(node.id); } + if (this.displayCategories) { this.loadCategoriesForNode(node.id); - if (!this.node.aspectNames.includes('generalclassifiable')) { + + const aspectNames = node.aspectNames || []; + if (!aspectNames.includes('generalclassifiable')) { this.categories = []; this.classifiableChangedSubject.next(); } @@ -374,11 +572,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 +635,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/content-metadata.module.ts b/lib/content-services/src/lib/content-metadata/content-metadata.module.ts index 0ffad897fb3..c7991bd1fae 100644 --- a/lib/content-services/src/lib/content-metadata/content-metadata.module.ts +++ b/lib/content-services/src/lib/content-metadata/content-metadata.module.ts @@ -24,6 +24,7 @@ import { ContentMetadataCardComponent } from './components/content-metadata-card import { TagModule } from '../tag/tag.module'; import { CategoriesModule } from '../category/category.module'; import { ExtensionsModule } from '@alfresco/adf-extensions'; +import { ContentMetadataHeaderComponent } from './components/content-metadata/content-metadata-header.component'; @NgModule({ imports: [ @@ -32,11 +33,13 @@ import { ExtensionsModule } from '@alfresco/adf-extensions'; CoreModule, TagModule, CategoriesModule, - ExtensionsModule + ExtensionsModule, + ContentMetadataHeaderComponent ], exports: [ ContentMetadataComponent, - ContentMetadataCardComponent + ContentMetadataCardComponent, + ContentMetadataHeaderComponent ], declarations: [ ContentMetadataComponent, 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/content-metadata/interfaces/content-metadata-custom-panel.interface.ts b/lib/content-services/src/lib/content-metadata/interfaces/content-metadata-custom-panel.interface.ts index 68a22c8a013..9f41b4f856f 100644 --- a/lib/content-services/src/lib/content-metadata/interfaces/content-metadata-custom-panel.interface.ts +++ b/lib/content-services/src/lib/content-metadata/interfaces/content-metadata-custom-panel.interface.ts @@ -18,4 +18,5 @@ export interface ContentMetadataCustomPanel { panelTitle: string; component: string; + expanded?: boolean; } diff --git a/lib/content-services/src/lib/content-metadata/public-api.ts b/lib/content-services/src/lib/content-metadata/public-api.ts index 6ad88e9f2a8..5b8ed25df60 100644 --- a/lib/content-services/src/lib/content-metadata/public-api.ts +++ b/lib/content-services/src/lib/content-metadata/public-api.ts @@ -16,14 +16,15 @@ */ export * from './components/content-metadata/content-metadata.component'; +export * from './components/content-metadata/content-metadata-header.component'; export * from './components/content-metadata-card/content-metadata-card.component'; + export * from './services/basic-properties.service'; export * from './services/content-metadata.service'; export * from './services/property-descriptors.service'; export * from './services/property-groups-translator.service'; export * from './services/config/content-metadata-config.factory'; export * from './services/content-type-property.service'; - export * from './services/config/indifferent-config.service'; export * from './services/config/layout-oriented-config.service'; export * from './services/config/aspect-oriented-config.service'; diff --git a/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.spec.ts b/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.spec.ts index dad4c454f15..c0f05551558 100644 --- a/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.spec.ts +++ b/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.spec.ts @@ -25,7 +25,7 @@ import { CardViewDateItemModel, CardViewIntItemModel, CardViewFloatItemModel, - LogService, + NotificationService, CardViewBoolItemModel, CardViewDatetimeItemModel, CardViewSelectItemModel, @@ -42,7 +42,7 @@ describe('PropertyGroupTranslatorService', () => { let propertyGroup: OrganisedPropertyGroup; let property: Property; let propertyValues: { [key: string]: any }; - let logService: LogService; + let notificationService: NotificationService; beforeEach(() => { TestBed.configureTestingModule({ @@ -51,7 +51,7 @@ describe('PropertyGroupTranslatorService', () => { ContentTestingModule ] }); - logService = TestBed.inject(LogService); + notificationService = TestBed.inject(NotificationService); service = TestBed.inject(PropertyGroupTranslatorService); property = { @@ -137,7 +137,7 @@ describe('PropertyGroupTranslatorService', () => { }); it('should log an error if unrecognised type is found', () => { - spyOn(logService, 'error').and.stub(); + const showError = spyOn(notificationService, 'showError').and.stub(); property.name = 'FAS:PLAGUE'; property.title = 'The Faro Plague'; @@ -149,7 +149,7 @@ describe('PropertyGroupTranslatorService', () => { propertyGroups.push(Object.assign({}, propertyGroup)); service.translateToCardViewGroups(propertyGroups, propertyValues, null); - expect(logService.error).toHaveBeenCalledWith('Unknown type for mapping: daemonic:scorcher'); + expect(showError).toHaveBeenCalledWith('Unknown type for mapping: daemonic:scorcher'); }); it('should fall back to single-line property type if unrecognised type is found', () => { diff --git a/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.ts b/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.ts index 5e48d1d3195..19e2eda19e2 100644 --- a/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.ts +++ b/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { CardViewItemProperties, CardViewItem, @@ -26,10 +26,10 @@ import { CardViewDatetimeItemModel, CardViewIntItemModel, CardViewFloatItemModel, - LogService, MultiValuePipe, AppConfigService, - DecimalNumberPipe + DecimalNumberPipe, + NotificationService } from '@alfresco/adf-core'; import { Property, CardViewGroup, OrganisedPropertyGroup } from '../interfaces/content-metadata.interfaces'; import { of } from 'rxjs'; @@ -51,10 +51,10 @@ export const RECOGNISED_ECM_TYPES = [D_TEXT, D_MLTEXT, D_DATE, D_DATETIME, D_INT providedIn: 'root' }) export class PropertyGroupTranslatorService { + private notificationService = inject(NotificationService); valueSeparator: string; - constructor(private logService: LogService, - private multiValuePipe: MultiValuePipe, + constructor(private multiValuePipe: MultiValuePipe, private decimalNumberPipe: DecimalNumberPipe, private appConfig: AppConfigService) { this.valueSeparator = this.appConfig.get('content-metadata.multi-value-pipe-separator'); @@ -187,7 +187,7 @@ export class PropertyGroupTranslatorService { private checkECMTypeValidity(ecmPropertyType: string) { if (RECOGNISED_ECM_TYPES.indexOf(ecmPropertyType) === -1) { - this.logService.error(`Unknown type for mapping: ${ecmPropertyType}`); + this.notificationService.showError(`Unknown type for mapping: ${ecmPropertyType}`); } } diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json index def0dce4cc4..c58a54faf09 100644 --- a/lib/content-services/src/lib/i18n/en.json +++ b/lib/content-services/src/lib/i18n/en.json @@ -148,7 +148,7 @@ "NO_EXISTING_TAGS": "No Existing Tags", "TITLE": "Create Tags", "CREATE_TAG": "Create: {{tag}}", - "NAME": "Name", + "TAG_SEARCH_PLACEHOLDER": "Search Tags", "ERRORS": { "EXISTING_TAG": "Tag already exists", "ALREADY_ADDED_TAG": "Tag is already added", @@ -158,8 +158,7 @@ "CREATE_TAGS": "Error while creating the tags" }, "TOOLTIPS": { - "DELETE_TAG": "Delete tag", - "HIDE_INPUT": "Hide input" + "DELETE_TAG": "Delete tag" }, "TAGS_LOADING": "Tags loading", "CREATE_TAGS_SUCCESS": "Tags created successfully" @@ -169,7 +168,6 @@ "CATEGORIES_TITLE": "Categories", "NO_CATEGORIES_CREATED": "No Categories created", "NO_CATEGORIES_ASSIGNED": "No Categories assigned", - "ASSIGN_CATEGORIES": "Assign Categories", "UNASSIGN_CATEGORY": "Unassign Category", "DELETE_CATEGORY": "Delete Category", "EXISTING_CATEGORIES": "Existing Categories:", @@ -178,7 +176,7 @@ "GENERIC_CREATE": "Create: {{name}}", "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", @@ -187,7 +185,8 @@ "DUPLICATED_CATEGORY": "Category is already added", "CREATE_CATEGORIES": "Error while creating categories", "EXISTING_CATEGORIES": "Some categories already exist" - } + }, + "CATEGORIES_SEARCH_PLACEHOLDER": "Search Categories" }, "ADF_FILE_UPLOAD": { "BUTTON": { @@ -488,7 +487,9 @@ "MODIFIED_DATE": "Modified Date", "CONTENT_TYPE": "Content Type", "TAGS": "Tags", - "ADD_TAG_TOOLTIP": "Add tag" + "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..581e4093a08 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,37 @@
+
+ + {{ tagNameErrorMessageKey | translate }} +

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

-

+ {{ tag }} -

-
-
- - search - - {{ 'TAG.TAGS_CREATOR.NAME' | translate }} - - - {{ tagNameErrorMessageKey | translate }} - - +
{ let tagService: TagService; let notificationService: NotificationService; - const tagNameFieldSelector = '.adf-tag-name-field'; - beforeEach(() => { TestBed.configureTestingModule({ declarations: [TagsCreatorComponent], @@ -113,14 +111,6 @@ describe('TagsCreatorComponent', () => { 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 * @@ -301,34 +291,6 @@ describe('TagsCreatorComponent', () => { }); describe('Tag name field', () => { - it('should be visible if tagNameControlVisible is true', () => { - component.tagNameControlVisible = true; - fixture.detectChanges(); - - const tagNameField = fixture.debugElement.query(By.css(tagNameFieldSelector)); - expect(tagNameField).toBeTruthy(); - expect(tagNameField.nativeElement.hasAttribute('hidden')).toBeFalsy(); - 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 +303,6 @@ describe('TagsCreatorComponent', () => { fixture.detectChanges(); tick(100); - clickAtHideNameInputButton(); component.tagNameControlVisible = true; fixture.detectChanges(); tick(100); @@ -349,24 +310,13 @@ 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(); - - component.tagNameControlVisible = true; - fixture.detectChanges(); - tick(100); - expect(getNameInput().value).toBe(''); - })); + describe('showEmptyTagMessage', () => { + it('should return true when tags empty and non editable state', () => { + component.tags = []; + component.tagNameControlVisible = false; + expect(component.showEmptyTagMessage).toBeTrue(); + }); + }); describe('Errors', () => { /** @@ -487,14 +437,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..fb58525f8cf 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; @@ -127,11 +127,6 @@ export class TagsCreatorComponent implements OnInit, OnDestroy { */ @Output() tagsChange = new EventEmitter(); - /** - * Emitted when input is showing or hiding. - */ - @Output() - tagNameControlVisibleChange = new EventEmitter(); readonly nameErrorMessagesByErrors = new Map([ ['duplicatedExistingTag', 'EXISTING_TAG'], @@ -219,6 +214,13 @@ export class TagsCreatorComponent implements OnInit, OnDestroy { return this._tagNameControl; } + /* + * Returns `true` if tags empty and non editable state, otherwise `false` + */ + get showEmptyTagMessage(): boolean { + return this.tags?.length === 0 && !this.tagNameControlVisible; + } + get existingTags(): TagEntry[] { return this._existingTags; } @@ -243,17 +245,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 +252,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/card-view/components/base-card-view.ts b/lib/core/src/lib/card-view/components/base-card-view.ts index 8f962d56ca2..d6c8326ed35 100644 --- a/lib/core/src/lib/card-view/components/base-card-view.ts +++ b/lib/core/src/lib/card-view/components/base-card-view.ts @@ -26,6 +26,9 @@ import { takeUntil } from 'rxjs/operators'; export abstract class BaseCardView implements OnDestroy { protected cardViewUpdateService = inject(CardViewUpdateService); + @Input() + editable = false; + @Input() property: T; @@ -39,6 +42,18 @@ export abstract class BaseCardView implements OnDestroy }); } + get isEditable(): boolean { + return this.editable && this.property.editable; + } + + get isReadonlyProperty(): boolean { + return this.editable && !this.property.editable; + } + + get hasIcon(): boolean { + return !!this.property.icon; + } + ngOnDestroy(): void { this.destroy$.next(true); this.destroy$.complete(); diff --git a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts index 1be88fdbc2e..a499566d0a0 100644 --- a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts +++ b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts @@ -33,11 +33,7 @@ export class CardViewArrayItemComponent extends BaseCardView +
{ - @Input() - editable: boolean; - - isEditable() { - return this.editable && this.property.editable; - } - changed(change: MatCheckboxChange) { this.cardViewUpdateService.update({ ...this.property } as CardViewBoolItemModel, change.checked ); this.property.value = change.checked; diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html index 8399d648a97..1da4ec816a2 100644 --- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html +++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html @@ -1,11 +1,12 @@ -
- + {{ property.displayValue}} -
+
+ [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"> {{ property.displayValue }} - + clear - +
- + - +
@@ -60,41 +63,37 @@
- - + + {{ propertyValue }} - cancel + cancel - - - +
+ + - - + - +
diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss index 5cd6e66d5cd..bacd208cad6 100644 --- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss @@ -1,6 +1,21 @@ -/* stylelint-disable no-descending-specificity */ -.adf { - &-invisible-date-input { +.adf-card-view-dateitem { + .adf-property-value { + padding: 6px 0; + line-height: 20px; + border-bottom: 1px solid var(--adf-metadata-property-panel-border-color); + color: var(--adf-metadata-property-panel-title-color); + + &.adf-property-value-editable { + border-radius: 6px; + border-bottom: inherit; + } + + &.adf-property-readonly-value { + padding-left: 12px; + } + } + + .adf-invisible-date-input { height: 2px; width: 0; overflow: hidden; @@ -11,33 +26,24 @@ float: right; } - &-dateitem-chip-list-container.adf-property-field { + .adf-dateitem-chip-list-container.adf-property-field { margin-bottom: -7px !important; border-bottom: 0; cursor: pointer; - - .adf-dateitem-editable-controls { - margin-top: 15px; - } - - .mat-datetimepicker-toggle { - position: absolute; - right: 0; - top: -20px; - } } - &-dateitem-editable { + .adf-dateitem-editable { cursor: pointer; - border-bottom: 1px solid var(--adf-theme-foreground-text-color-042); - padding-bottom: 6px; + padding: 0 12px; + /* stylelint-disable-next-line no-descending-specificity */ &-controls { display: flex; align-items: center; justify-content: space-between; + padding-bottom: 6px; - button.mat-icon-button { + .mat-icon-button { line-height: 20px; height: 20px; width: 20px; @@ -47,29 +53,21 @@ width: 16px; height: 16px; opacity: 0.5; - } - &:hover mat-icon { - opacity: 1; + &:hover { + opacity: 1; + } } .adf-datepicker-toggle { flex: 1 0 auto; } - mat-icon.adf-date-reset-icon { + .adf-date-reset-icon { line-height: 10px; - font-size: var(--theme-subheading-2-font-size); - width: 16px; - height: 16px; position: relative; top: 4px; - padding-left: 8px; - opacity: 0.3; - } - - &:hover mat-icon.adf-date-reset-icon { - opacity: 1; + padding: 0 8px; } } } diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts index 321a67e6cef..bb85bc7b369 100644 --- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts +++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts @@ -166,7 +166,7 @@ describe('CardViewDateItemComponent', () => { component.property.editable = true; fixture.detectChanges(); - expect(component.isEditable()).toBe(false); + expect(component.isEditable).toBe(false); const datePicker = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-${component.property.key}"]`)); const datePickerToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepickertoggle-${component.property.key}"]`)); expect(datePicker).toBeNull('Datepicker should NOT be in DOM'); diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts index 87589f24055..c1da00bbdb6 100644 --- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts +++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts @@ -20,7 +20,6 @@ import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core'; import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimepickerComponent, MatDatetimepickerInputEvent } from '@mat-datetimepicker/core'; import { CardViewDateItemModel } from '../../models/card-view-dateitem.model'; import { UserPreferencesService, UserPreferenceValues } from '../../../common/services/user-preferences.service'; -import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { BaseCardView } from '../base-card-view'; import { ClipboardService } from '../../../clipboard/clipboard.service'; @@ -45,24 +44,16 @@ import { isValid } from 'date-fns'; }) export class CardViewDateItemComponent extends BaseCardView implements OnInit, OnDestroy { @Input() - property: CardViewDateItemModel; + displayEmpty = true; @Input() - editable: boolean = false; - - @Input() - displayEmpty: boolean = true; - - @Input() - displayClearAction: boolean = true; + displayClearAction = true; @ViewChild('datetimePicker') public datepicker: MatDatetimepickerComponent; valueDate: Date; - private onDestroy$ = new Subject(); - constructor( private dateAdapter: DateAdapter, private userPreferencesService: UserPreferencesService, @@ -75,7 +66,7 @@ export class CardViewDateItemComponent extends BaseCardView { this.property.locale = locale; }); @@ -94,8 +85,7 @@ export class CardViewDateItemComponent extends BaseCardView{{ property.label | translate }}
-
- +
+ {{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }} @@ -23,50 +20,44 @@
- -
+
-
{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}
-
{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.VALUE' | translate }}
+
{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}
+
{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.VALUE' | translate }}
-
-
- - - -
-
- - - - -
+
+ + + + +
-
+
diff --git a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss index 843f5183754..b126d71d816 100644 --- a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss @@ -1,43 +1,48 @@ -.adf-card-view { - &__key-value-pairs { - &__row { - display: flex; - justify-content: center; - } +.adf-card-view-key-value-pairs-item { + .adf-property-col-key { + width: 50%; + margin-right: 4px; + } - &__col { - width: 50%; + .adf-property-col-value { + margin-left: 4px; + width: 50%; + } - .mat-form-field { - width: 100%; - font-size: var(--theme-body-1-font-size); - } + .adf-property-col-delete { + width: auto; + } - .mat-form-field-appearance-legacy .mat-form-field-label { - color: var(--adf-theme-foreground-text-color-040) !important; + .adf-card-view { + &__key-value-pairs { + &__row { + display: flex; + justify-content: center; + align-items: center; } - } - &__add-btn-container { - display: flex; - justify-content: center; - } + &__add-btn-container { + display: flex; + justify-content: center; + } - &__add-btn.mat-button { - margin-bottom: 20px; - } + &__add-btn.mat-button { + margin-bottom: 20px; + } - &__read-only { - padding-bottom: 20px; + &__read-only { + padding-bottom: 20px; - .mat-table { - box-shadow: none; - } + .mat-table { + box-shadow: none; + } - .mat-header-row, - .mat-row { - padding: 0; + .mat-header-row, + .mat-row { + padding: 0; + } } } } + } diff --git a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.spec.ts b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.spec.ts index 639a236ecff..7ef53d3bdc4 100644 --- a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.spec.ts +++ b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.spec.ts @@ -75,7 +75,7 @@ describe('CardViewKeyValuePairsItemComponent', () => { component.ngOnChanges(); fixture.detectChanges(); - expect(component.isEditable()).toBe(false); + expect(component.isEditable).toBe(false); const table = fixture.debugElement.query(By.css('.adf-card-view__key-value-pairs__read-only')); const form = fixture.debugElement.query(By.css('.adf-card-view__key-value-pairs')); @@ -111,7 +111,7 @@ describe('CardViewKeyValuePairsItemComponent', () => { addButton.triggerEventHandler('click', null); fixture.detectChanges(); - const removeButton = fixture.debugElement.query(By.css('.adf-card-view__key-value-pairs__remove-btn')); + const removeButton = fixture.debugElement.query(By.css('.adf-property-col-delete')); removeButton.triggerEventHandler('click', null); fixture.detectChanges(); diff --git a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts index abe88ff3696..0e13fbe0927 100644 --- a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts +++ b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, Input, OnChanges, ViewEncapsulation } from '@angular/core'; +import { Component, OnChanges, ViewEncapsulation } from '@angular/core'; import { CardViewKeyValuePairsItemModel } from '../../models/card-view.models'; import { CardViewKeyValuePairsItemType } from '../../interfaces/card-view.interfaces'; import { MatTableDataSource } from '@angular/material/table'; @@ -30,10 +30,6 @@ import { BaseCardView } from '../base-card-view'; }) export class CardViewKeyValuePairsItemComponent extends BaseCardView implements OnChanges { - - @Input() - editable: boolean = false; - values: CardViewKeyValuePairsItemType[]; matTableValues: MatTableDataSource; @@ -42,10 +38,6 @@ export class CardViewKeyValuePairsItemComponent extends BaseCardView { - @Input() - property: CardViewMapItemModel; - @Input() displayEmpty: boolean = true; diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html index 81c0220aafc..8aeacf38062 100644 --- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html +++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html @@ -1,28 +1,30 @@ - +
{{ property.label | translate }}
{{ (property.displayValue | async) | translate }}
-
- +
+ - + [aria-label]="property.label | translate"> - - {{ 'CORE.CARDVIEW.NONE' | translate }} + {{ 'CORE.CARDVIEW.NONE' | translate }} diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss index 3ad503239e2..359657f2037 100644 --- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss @@ -1,22 +1,36 @@ -.mat-form-field-type-mat-select { - width: 100%; -} +.adf-card-view-selectitem { + .adf-property-value { + width: 100%; + } -.adf-select-item-padding { - padding-top: 6px; - padding-bottom: 20px; -} + .adf-select-filter-input { + background: var(--adf-theme-background-card-color); + position: sticky; + top: 0; + left: 0; + right: 0; + z-index: 1; + } -.adf-select-item-padding-editable { - padding-top: 6px; - padding-bottom: 6px; -} + .adf-property-value-editable { + mat-select { + padding: 6px 0 6px 12px; + margin-top: 0; + border-radius: 6px; + + .mat-select-value { + color: var(--adf-metadata-action-button-clear-color); + } + } + } + + .adf-property-read-only { + padding: 6px 0; + border-bottom: 1px solid var(--adf-metadata-property-panel-border-color); + color: var(--adf-metadata-property-panel-title-color); + } -.adf-select-filter-input { - background: var(--adf-theme-background-card-color); - position: sticky; - top: 0; - left: 0; - right: 0; - z-index: 1; + .adf-property-readonly-value { + color: var(--adf-metadata-property-panel-label-color); + } } diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts index 24cb8fae198..32ed33a2a80 100644 --- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts +++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts @@ -108,7 +108,7 @@ describe('CardViewSelectItemComponent', () => { fixture.detectChanges(); expect(component.value).toEqual('two'); - expect(component.isEditable()).toBe(true); + expect(component.isEditable).toBe(true); const select = await loader.getHarness(MatSelectHarness); await select.open(); @@ -131,7 +131,7 @@ describe('CardViewSelectItemComponent', () => { fixture.detectChanges(); expect(component.value).toEqual(2); - expect(component.isEditable()).toBe(true); + expect(component.isEditable).toBe(true); const select = await loader.getHarness(MatSelectHarness); await select.open(); @@ -154,7 +154,7 @@ describe('CardViewSelectItemComponent', () => { component.ngOnChanges(); fixture.detectChanges(); - expect(component.isEditable()).toBe(true); + expect(component.isEditable).toBe(true); const select = await loader.getHarness(MatSelectHarness); await select.open(); diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.ts b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.ts index 636f43ecb2a..89761a2138a 100644 --- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.ts +++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.ts @@ -17,7 +17,7 @@ import { Component, Input, OnChanges, OnDestroy, OnInit, inject, ViewEncapsulation } from '@angular/core'; import { CardViewSelectItemModel } from '../../models/card-view-selectitem.model'; -import { BehaviorSubject, combineLatest, Observable, Subject } from 'rxjs'; +import { BehaviorSubject, combineLatest, Observable } from 'rxjs'; import { CardViewSelectItemOption } from '../../interfaces/card-view.interfaces'; import { MatSelectChange } from '@angular/material/select'; import { BaseCardView } from '../base-card-view'; @@ -35,8 +35,6 @@ export class CardViewSelectItemComponent extends BaseCardView[]>; @Input() @@ -46,11 +44,8 @@ export class CardViewSelectItemComponent extends BaseCardView = new BehaviorSubject(''); + filter$ = new BehaviorSubject(''); showInputFilter: boolean = false; - - private onDestroy$ = new Subject(); - list$: Observable[]> = null; ngOnChanges(): void { @@ -59,8 +54,8 @@ export class CardViewSelectItemComponent extends BaseCardView[]) => { + .pipe(takeUntil(this.destroy$)) + .subscribe((options) => { this.showInputFilter = options.length > this.optionsLimit; }); @@ -71,21 +66,17 @@ export class CardViewSelectItemComponent extends BaseCardView[]> { + private getOptions(): Observable[]> { return this.options$ || this.property.options$; } getList(): Observable[]> { return combineLatest([this.getOptions(), this.filter$]) .pipe( - map(([items, filter]) => items.filter((item: CardViewSelectItemOption) => + map(([items, filter]) => items.filter((item) => filter ? item.label.toLowerCase().includes(filter.toLowerCase()) : true)), - takeUntil(this.onDestroy$) + takeUntil(this.destroy$) ); } @@ -95,17 +86,12 @@ export class CardViewSelectItemComponent extends BaseCardView
- + + {{ property.label | translate }} - - - - - + +
- + class="adf-property-field adf-textitem-chip-list-container" + [ngClass]="{'adf-property-read-only': !isEditable}"> + {{ property.label | translate }} - + {{ propertyValue }} - cancel + cancel @@ -74,6 +74,10 @@ [floatLabel]="'never'"> - mode_edit
@@ -100,8 +102,13 @@ {{ property.default | translate }}
- +
  • {{ error.message | translate: error }}
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss index 541ed71b6c6..da1ca2a4d92 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss @@ -1,204 +1,67 @@ -.adf { - &-textitem-edit-icon.mat-icon { - font-size: var(--theme-subheading-2-font-size); - width: 16px; - height: 16px; - color: var(--adf-theme-foreground-text-color-025); +.adf-card-view-textitem { + .adf-textitem-error { + font-size: var(--theme-caption-font-size); + padding-top: 6px; + + ul { + margin: 0; + padding: 0; + list-style-type: none; + + li { + margin: 0; + padding: 0; + } + } } - &-textitem-action.mat-icon-button { + .adf-textitem-action { width: 20px; height: 20px; line-height: 20px; color: var(--adf-theme-foreground-text-color-025); - } - &-textitem-action:hover, - &-textitem-action:focus { - color: var(--adf-theme-foreground-text-color); - } - - &-update-icon { - padding-left: 13px; - } - - &-textitem-readonly { - cursor: pointer !important; - - &:hover .adf-textitem-action, - &:focus .adf-textitem-action { + &:hover, + &:focus { color: var(--adf-theme-foreground-text-color); } } - &-textitem-chip-list-container { - margin-bottom: 25px !important; - margin-top: 6px; - + .adf-textitem-chip-list-container { .mat-form-field-label { margin-top: 6px; } } - &-textitem-clickable { - cursor: pointer !important; + .adf-textitem-clickable { + cursor: pointer; padding-top: 3px; - .adf-textitem-edit-icon.mat-icon { - line-height: 16px; - } - - &:hover .adf-textitem-action { + .adf-textitem-action:hover { color: var(--adf-theme-foreground-text-color); } - } - &-textitem-clickable-value { - cursor: pointer !important; - color: var(--theme-primary-color) !important; - } - - &-textitem-editable { - &-controls { - display: flex; - align-items: center; - - mat-icon:not(.adf-button-disabled):hover { - color: var(--adf-theme-foreground-text-color); - cursor: pointer !important; - } - - mat-form-field { - width: 100%; - } - - input:focus, - textarea:focus { - border: 1px solid var(--theme-accent-color-a200); - } - } - - &-error { - font-size: var(--theme-caption-font-size); - padding-top: 6px; - - ul { - margin: 0; - padding: 0; - list-style-type: none; - - li { - margin: 0; - padding: 0; - } + .adf-property-field { + .mat-input-element { + color: var(--theme-primary-color); + cursor: pointer; } } } - &-textitem-default-value { + .adf-textitem-default-value { color: var(--adf-theme-foreground-text-color-054); } - &-textitem-editable .mat-form-field-wrapper { - margin: 0; - padding-bottom: 0; - } - - &-textitem-editable .mat-form-field-underline { - display: none; - } - - &-textitem-editable .mat-form-field-infix { - padding: 0; - border-top: none; + .adf-property-read-only { + border-bottom: 1px solid var(--adf-metadata-property-panel-border-color); } - &-textitem-editable .mat-form-field-label-wrapper { - padding-top: 2em; - position: static; + .adf-property-readonly-value { + color: var(--adf-metadata-property-panel-label-color); } - &-textitem-editable .mat-form-field-label { - top: 4px; - } - - &-textitem-editable .mat-input-element { - font-family: inherit; - position: relative; - padding-top: 6px; - } - - &-textitem-editable .mat-input-element:focus { - padding: 5px; - left: -6px; - top: 0; - } - - &-textitem-editable input.mat-input-element { - margin-bottom: 2px; - } - - &-textitem-editable input.mat-input-element:focus { - margin-bottom: -8px; - } - - &-textitem-scroll { - overflow-x: auto; - white-space: nowrap; - display: block; - - &::-webkit-scrollbar { - height: 5px; - } - - &:hover::-webkit-scrollbar-thumb { - display: block; - background-color: var(--adf-theme-foreground-text-color-025); - border-radius: 2px; - } - } - - &-textitem-multiline { - display: block; - } -} - -.adf-property-field { - .adf-property-clear-value, - .adf-textitem-edit-value { - width: 30px; - height: 30px; - } -} - -.mat-form-field:not(.adf-textitem-chip-list-input) { - .mat-form-field-suffix { - .adf-textitem-edit-icon { - display: block; - } - - .adf-textitem-clear-icon { - display: none; - } - - .adf-textitem-edit-icon, - .adf-textitem-clear-icon { - background: transparent; - border: none; - - &:hover { - cursor: pointer; - } - } - - &:hover { - .adf-textitem-edit-icon { - display: none; - } - - .adf-textitem-clear-icon { - display: block; - } - } + .adf-property-value-editable { + color: var(--adf-metadata-property-panel-title-color); } } diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts index 1431cd1641d..9a05e55e868 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts @@ -189,24 +189,6 @@ describe('CardViewTextItemComponent', () => { expect(value).toBe('Lorem ipsum'); }); - it('should render the edit icon in case of editable:true', () => { - component.editable = true; - component.property.editable = true; - - fixture.detectChanges(); - - const editIcon = fixture.debugElement.query(By.css('.adf-textitem-edit-icon')); - expect(editIcon).not.toBeNull('Edit icon should be shown'); - }); - - it('should NOT render the edit icon in case of editable:false', async () => { - component.editable = false; - fixture.detectChanges(); - await fixture.whenStable(); - const editIcon = fixture.debugElement.query(By.css('.adf-textitem-edit-icon')); - expect(editIcon).toBeNull('Edit icon should NOT be shown'); - }); - it('should NOT render the picker and toggle in case of editable:true but (general) editable:false', async () => { component.editable = false; component.property.editable = true; @@ -313,6 +295,20 @@ describe('CardViewTextItemComponent', () => { const labelElement = fixture.debugElement.query(By.css(`.adf-property-label`)); expect(labelElement).toBeNull(); }); + + it('should return true when editable is true, and property.editable is false', () => { + component.editable = true; + component.property.editable = false; + fixture.detectChanges(); + expect(component.isReadonlyProperty).toBe(true); + }); + + it('should return false when editable is false, and property.editable is false', () => { + component.editable = false; + component.property.editable = false; + fixture.detectChanges(); + expect(component.isReadonlyProperty).toBe(false); + }); }); describe('clickable', () => { @@ -491,26 +487,6 @@ describe('CardViewTextItemComponent', () => { ); }); - it('should clear value when clear value icon is clicked', async () => { - spyOn(component, 'update'); - component.property.value = 'testValue'; - component.property.icon = 'FAKE_ICON'; - component.property.clickable = true; - component.property.editable = true; - component.editable = true; - component.property.isValid = () => true; - - fixture.detectChanges(); - await fixture.whenStable(); - fixture.detectChanges(); - const clickEl = fixture.debugElement.query(By.css(`.adf-textitem-clear-icon`)); - clickEl.triggerEventHandler('click', new MouseEvent('click')); - - fixture.detectChanges(); - const elementValue = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`)); - expect(elementValue.nativeElement.textContent).toEqual(''); - expect(component.update).toHaveBeenCalled(); - }); }); describe('Update', () => { @@ -593,7 +569,7 @@ describe('CardViewTextItemComponent', () => { component.editable = true; fixture.detectChanges(); - const errorMessage: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error'); + const errorMessage: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-textitem-error'); expect(errorMessage.textContent).toBe(expectedErrorMessages[0].message); }); @@ -602,13 +578,13 @@ describe('CardViewTextItemComponent', () => { component.editable = true; fixture.detectChanges(); - let errorMessage: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error'); + let errorMessage: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-textitem-error'); expect(errorMessage.textContent).toBe(expectedErrorMessages[0].message); component.editable = false; fixture.detectChanges(); - errorMessage = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error'); + errorMessage = fixture.debugElement.nativeElement.querySelector('.adf-textitem-error'); expect(errorMessage).toBeNull(); }); diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts index 0b1f5b68f41..cbcbeeaa751 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts @@ -24,7 +24,6 @@ import { TranslationService } from '../../../translation/translation.service'; import { CardViewItemValidator } from '../../interfaces/card-view-item-validator.interface'; import { UntypedFormControl } from '@angular/forms'; import { debounceTime, takeUntil, filter } from 'rxjs/operators'; -import { Subject } from 'rxjs'; export const DEFAULT_SEPARATOR = ', '; const templateTypes = { @@ -44,30 +43,24 @@ const templateTypes = { }) export class CardViewTextItemComponent extends BaseCardView implements OnChanges, OnDestroy { @Input() - editable: boolean = false; + displayEmpty = true; @Input() - displayEmpty: boolean = true; + copyToClipboardAction = true; @Input() - copyToClipboardAction: boolean = true; - - @Input() - useChipsForMultiValueProperty: boolean = true; + useChipsForMultiValueProperty = true; @Input() multiValueSeparator: string = DEFAULT_SEPARATOR; @Input() - displayLabelForChips: boolean = false; + displayLabelForChips = false; editedValue: string | string[]; errors: CardViewItemValidator[]; templateType: string; - - textInput: UntypedFormControl = new UntypedFormControl(); - - private onDestroy$ = new Subject(); + textInput = new UntypedFormControl(); constructor(private clipboardService: ClipboardService, private translateService: TranslationService, private cd: ChangeDetectorRef) { super(); @@ -79,7 +72,7 @@ export class CardViewTextItemComponent extends BaseCardView textInputValue !== this.editedValue && textInputValue !== null), debounceTime(50), - takeUntil(this.onDestroy$) + takeUntil(this.destroy$) ) .subscribe((textInputValue) => { this.editedValue = textInputValue; @@ -198,8 +191,7 @@ export class CardViewTextItemComponent extends BaseCardView
+
diff --git a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss index 1c59e361d4a..0752b877950 100644 --- a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss +++ b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss @@ -14,44 +14,44 @@ $adf-info-drawer-icon-size-half: 24px !default; overflow: auto; width: 100%; - background-color: var(--theme-background-color); + background-color: var(--theme-card-background-color); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); & .mat-tab-label { - font-weight: bold; + height: 32px; text-align: left; - text-transform: uppercase; opacity: 1; } &-header { - padding: 13px 0 0 23px; + padding: 8px 0 0 24px; display: flex; - justify-content: space-between; align-items: center; + justify-content: space-between; + height: 56px; margin-bottom: 40px; &-buttons { - padding-right: 18px; - mat-icon { cursor: pointer; } } &-title { - width: 197px; - height: 32px; + display: flex; font-size: $adf-info-drawer-layout-title-font-size; - line-height: 1.6; - letter-spacing: -0.5px; + line-height: 28px; + letter-spacing: 0.15px; text-align: left; + align-items: start; color: var(--adf-theme-foreground-text-color-054); + overflow: hidden; & > div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + color: var(--adf-metadata-property-panel-title-color); } } } diff --git a/lib/core/src/lib/info-drawer/info-drawer.component.html b/lib/core/src/lib/info-drawer/info-drawer.component.html index 85d51c51037..4fff27cf841 100644 --- a/lib/core/src/lib/info-drawer/info-drawer.component.html +++ b/lib/core/src/lib/info-drawer/info-drawer.component.html @@ -1,13 +1,13 @@ -
{{ title | translate }}
- + {{ 'INFO_DRAWER.ICON' | translate }} +
{{ title | translate }}
+ - - + - - - - - - - - ` + + + + + + + + + ` }) class CustomInfoDrawerComponent extends InfoDrawerComponent { tabIndex: number; + icon: string; } describe('Custom InfoDrawer', () => { let fixture: ComponentFixture; let component: CustomInfoDrawerComponent; let translateService: TranslateService; + const getNodeIcon = () => + fixture.debugElement.queryAll(By.css('[info-drawer-node-icon]')); beforeEach(() => { TestBed.configureTestingModule({ @@ -139,7 +142,7 @@ describe('Custom InfoDrawer', () => { fixture.detectChanges(); const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active')); expect(tab.length).toBe(1); - expect(tab[0].nativeElement.innerText).toContain('TAB1'); + expect(tab[0].nativeElement.innerText).toContain('Tab1'); }); it('should select the tab 2 (index 1)', () => { @@ -147,7 +150,7 @@ describe('Custom InfoDrawer', () => { fixture.detectChanges(); const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active')); expect(tab.length).toBe(1); - expect(tab[0].nativeElement.innerText).toContain('TAB2'); + expect(tab[0].nativeElement.innerText).toContain('Tab2'); }); it('should render a tab with icon', () => { @@ -157,21 +160,33 @@ describe('Custom InfoDrawer', () => { expect(tab[0].nativeElement.innerText).not.toBe('TAB3'); expect(tab[0].nativeElement.innerText).toContain('tab-icon'); }); + + it('should render a icon with title', () => { + component.icon = '/assets/images/ft_ic_miscellaneous.svg'; + fixture.detectChanges(); + const icon = getNodeIcon(); + const srcAttribute = icon[0].nativeElement.getAttribute('src'); + expect(icon.length).toBe(1); + expect(srcAttribute).toContain('/assets/images/ft_ic_miscellaneous.svg'); + }); }); @Component({ template: ` - + - ` + ` }) class VisibilityInfoDrawerComponent extends InfoDrawerComponent { showHeader: boolean; + icon: string; } describe('Header visibility InfoDrawer', () => { let fixture: ComponentFixture; let component: VisibilityInfoDrawerComponent; + const getNodeIcon = () => + fixture.debugElement.queryAll(By.css('[info-drawer-node-icon]')); beforeEach(() => { TestBed.configureTestingModule({ @@ -189,18 +204,24 @@ describe('Header visibility InfoDrawer', () => { }); it('should show info drawer header by default', () => { + component.icon = '/assets/images/ft_ic_miscellaneous.svg'; fixture.detectChanges(); const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]')); + const icon = getNodeIcon(); + const srcAttribute = icon[0].nativeElement.getAttribute('src'); expect(title.length).toBe(1); + expect(icon.length).toBe(1); + expect(srcAttribute).toContain('/assets/images/ft_ic_miscellaneous.svg'); expect(title[0].nativeElement.innerText).toBe('Fake Visibility Info Drawer Title'); expect(component.showHeader).toEqual(true); }); - it('should not show info drawer header when showHeader is false', () => { - fixture.detectChanges(); + it('should not show info drawer header with icon when showHeader is false', () => { component.showHeader = false; fixture.detectChanges(); const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]')); + const icon = getNodeIcon(); expect(title.length).toBe(0); + expect(icon.length).toBe(0); }); }); diff --git a/lib/core/src/lib/info-drawer/info-drawer.component.ts b/lib/core/src/lib/info-drawer/info-drawer.component.ts index 1c7d4cfeadb..f6fda8b9751 100644 --- a/lib/core/src/lib/info-drawer/info-drawer.component.ts +++ b/lib/core/src/lib/info-drawer/info-drawer.component.ts @@ -47,6 +47,9 @@ export class InfoDrawerComponent { @Input() title: string|null = null; + @Input() + icon: string | null = null; + /** The selected index tab. */ @Input() selectedIndex: number = 0; diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss index 11f24ab28c8..4614e0392e1 100644 --- a/lib/core/src/lib/styles/_components-variables.scss +++ b/lib/core/src/lib/styles/_components-variables.scss @@ -1,3 +1,4 @@ +/* stylelint-disable scss/no-global-function-names */ @use './reference-variables' as *; @use '@angular/material' as mat; @@ -52,7 +53,6 @@ --adf-identity-user-info-line-height: $adf-ref-line-height, --adf-identity-user-info-font-size: var(--theme-adf-picture-1-font-size), --adf-user-info-container-margin-right: $adf-ref-margin-right, - --adf-info-drawer-tab-default-color: mat.get-color-from-palette($accent), --adf-info-drawer-tab-default-background: mat.get-color-from-palette($background, card), --adf-info-drawer-tab-default-bottom-line:$adf-ref-tab-bottom-line-default, @@ -70,8 +70,13 @@ --adf-people-cloud-input-label-focus-color: mat.get-color-from-palette($primary), --adf-people-cloud-autosuggest-result-active-color: mat.get-color-from-palette($foreground, text), --adf-people-cloud-autosuggest-result-disabled-color: mat.get-color-from-palette($foreground, secondary-text), - --adf-people-cloud-input-caption-error-color: mat.get-color-from-palette($warn) - + --adf-people-cloud-input-caption-error-color: mat.get-color-from-palette($warn), + --adf-metadata-property-panel-border-color: $adf-ref-metadata-property-panel-border-color, + --adf-metadata-buttons-background-color: $adf-ref-metadata-buttons-background-color, + --adf-metadata-action-button-clear-color: $adf-ref-metadata-action-button-clear-color, + --adf-metadata-property-panel-text-color: $adf-ref-metadata-property-panel-text-color, + --adf-metadata-property-panel-label-color: $adf-ref-metadata-property-panel-label-color, + --adf-metadata-property-panel-title-color: $adf-ref-metadata-property-panel-title-color, ); // propagates SCSS variables into the CSS variables scope diff --git a/lib/core/src/lib/styles/_index.scss b/lib/core/src/lib/styles/_index.scss index 6b3286a8f1e..ac5dc35201f 100644 --- a/lib/core/src/lib/styles/_index.scss +++ b/lib/core/src/lib/styles/_index.scss @@ -57,7 +57,6 @@ --adf-theme-foreground-text-color-075: mat.get-color-from-palette($foreground, text, 0.75), --adf-theme-foreground-text-color-064: mat.get-color-from-palette($foreground, text, 0.64), --adf-theme-foreground-text-color-054: mat.get-color-from-palette($foreground, text, 0.54), - --adf-theme-foreground-text-color-042: mat.get-color-from-palette($foreground, text, 0.42), --adf-theme-foreground-text-color-040: mat.get-color-from-palette($foreground, text, 0.4), --adf-theme-foreground-text-color-027: mat.get-color-from-palette($foreground, text, 0.27), --adf-theme-foreground-text-color-025: mat.get-color-from-palette($foreground, text, 0.25), diff --git a/lib/core/src/lib/styles/_reference-variables.scss b/lib/core/src/lib/styles/_reference-variables.scss index 36de914b001..338bb3b93a8 100644 --- a/lib/core/src/lib/styles/_reference-variables.scss +++ b/lib/core/src/lib/styles/_reference-variables.scss @@ -17,3 +17,9 @@ $adf-ref-line-height: 40px; $adf-ref-margin-right: 8px; $adf-ref-tab-bottom-line-default: unset; $adf-ref-tab-bottom-line-active: unset; +$adf-ref-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12); +$adf-ref-metadata-buttons-background-color: rgba(33, 33, 33, 0.05); +$adf-ref-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698); +$adf-ref-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7); +$adf-ref-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24); +$adf-ref-metadata-property-panel-title-color: rgb(33, 33, 33); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer-wrapper/properties-viewer-wrapper.component.html b/lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer-wrapper/properties-viewer-wrapper.component.html index 747400664d6..a0e599538c1 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer-wrapper/properties-viewer-wrapper.component.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer-wrapper/properties-viewer-wrapper.component.html @@ -1,7 +1,18 @@ - +
diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts index 7d312457d49..d8b4fd70548 100644 --- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts @@ -222,17 +222,6 @@ describe('TaskHeaderCloudComponent', () => { const loading = fixture.debugElement.query(By.css('.adf-task-header-loading')); expect(loading).toBeTruthy(); }); - - it('should not render edit icon if the task in assigned state and assingned user is different from current logged-in user', () => { - isTaskEditableSpy.and.returnValue(false); - fixture.detectChanges(); - const priorityEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-priority"]`)); - const descriptionEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-description"]`)); - const dueDateEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="datepickertoggle-dueDate"]`)); - expect(priorityEditIcon).toBeNull(); - expect(descriptionEditIcon).toBeNull(); - expect(dueDateEditIcon).toBeNull(); - }); }); describe('Task with parentTaskId', () => { @@ -328,9 +317,7 @@ describe('TaskHeaderCloudComponent', () => { it('should render edit icon if the task in assigned state and assingee should be current user', () => { fixture.detectChanges(); - const descriptionEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="header-description"] [class*="adf-textitem-edit-icon"]`)); const dueDateEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="datepickertoggle-dueDate"]`)); - expect(descriptionEditIcon).not.toBeNull(); expect(dueDateEditIcon).not.toBeNull(); }); @@ -372,16 +359,6 @@ describe('TaskHeaderCloudComponent', () => { const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-assignee"]`)); expect(value).toBeNull(); }); - - it('should not render edit icon if the task in created state and not assigned', () => { - fixture.detectChanges(); - const priorityEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-priority"]`)); - const descriptionEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-description"]`)); - const dueDateEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="datepickertoggle-dueDate"]`)); - expect(priorityEditIcon).toBeNull(); - expect(descriptionEditIcon).toBeNull(); - expect(dueDateEditIcon).toBeNull(); - }); }); describe('Completed Task', () => { @@ -404,16 +381,6 @@ describe('TaskHeaderCloudComponent', () => { const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-assignee"]`)); expect(value).toBeNull('Edit icon should NOT be shown'); }); - - it('should not render edit icon if the task in completed state', () => { - fixture.detectChanges(); - const priorityEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-priority"]`)); - const descriptionEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-description"]`)); - const dueDateEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="datepickertoggle-dueDate"]`)); - expect(priorityEditIcon).toBeNull(); - expect(descriptionEditIcon).toBeNull(); - expect(dueDateEditIcon).toBeNull(); - }); }); describe('Suspended Task', () => { @@ -436,16 +403,6 @@ describe('TaskHeaderCloudComponent', () => { const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-assignee"]`)); expect(value).toBeNull(); }); - - it('should not render edit icon if the task in suspended state', () => { - fixture.detectChanges(); - const priorityEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-priority"]`)); - const descriptionEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-description"]`)); - const dueDateEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="datepickertoggle-dueDate"]`)); - expect(priorityEditIcon).toBeNull(); - expect(descriptionEditIcon).toBeNull(); - expect(dueDateEditIcon).toBeNull(); - }); }); describe('Task with candidates', () => { diff --git a/lib/testing/src/lib/protractor/core/pages/card-view/card-view-text-item.page.ts b/lib/testing/src/lib/protractor/core/pages/card-view/card-view-text-item.page.ts index 03984fb4ad0..b433debb36b 100644 --- a/lib/testing/src/lib/protractor/core/pages/card-view/card-view-text-item.page.ts +++ b/lib/testing/src/lib/protractor/core/pages/card-view/card-view-text-item.page.ts @@ -25,7 +25,7 @@ export class CardTextItemPage { clearButton = 'button[data-automation-id*="card-textitem-reset"]'; field = '[data-automation-id*="card-textitem-value"]'; labelLocator = '[data-automation-id*="card-textitem-label"]'; - errorMessage = '.adf-textitem-editable-error'; + errorMessage = '.adf-textitem-error'; clickableElement = '.adf-textitem-clickable'; readOnlyField = '.adf-property-read-only';