From 4c82c46868ff1accc92beb2e70baa6c9948f1e76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20S=C5=82omka?= Date: Tue, 14 Nov 2023 14:50:16 +0100 Subject: [PATCH 01/11] Moved subitems to separate tab --- .../translations/ibexa_locationview.en.xliff | 15 +++++ .../admin/content/location_view.html.twig | 13 +--- .../admin/content/tab/sub_items.html.twig | 21 ++++++ .../component/sub_items/sub_items.html.twig | 14 ++++ src/lib/Tab/LocationView/SubItemsTab.php | 64 +++++++++++++++++++ 5 files changed, 117 insertions(+), 10 deletions(-) create mode 100644 src/bundle/Resources/views/themes/admin/content/tab/sub_items.html.twig create mode 100644 src/bundle/Resources/views/themes/admin/ui/component/sub_items/sub_items.html.twig create mode 100644 src/lib/Tab/LocationView/SubItemsTab.php diff --git a/src/bundle/Resources/translations/ibexa_locationview.en.xliff b/src/bundle/Resources/translations/ibexa_locationview.en.xliff index 9f9bea1ab8..cb46929ad0 100644 --- a/src/bundle/Resources/translations/ibexa_locationview.en.xliff +++ b/src/bundle/Resources/translations/ibexa_locationview.en.xliff @@ -296,6 +296,11 @@ Roles key: tab.name.roles + + Sub Items + Sub Items + key: tab.name.sub_items + Translations Translations @@ -366,6 +371,16 @@ Link key: tab.relations.table.relation_type.link + + Sub Items + Sub Items + key: tab.sub_items.sub_items + + + Sub Items + Sub Items + key: tab.subitems.sub_items + Add Add diff --git a/src/bundle/Resources/views/themes/admin/content/location_view.html.twig b/src/bundle/Resources/views/themes/admin/content/location_view.html.twig index 119e63ea1c..cf41efabcf 100644 --- a/src/bundle/Resources/views/themes/admin/content/location_view.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/location_view.html.twig @@ -146,20 +146,14 @@ 'roles_pagination_params': roles_pagination_params, 'policies_pagination_params': policies_pagination_params, 'is_location_visible': not location.invisible, + 'subitems_module': subitems_module, }) }} {% if content_type.isContainer %} {{ form_start(form_subitems_content_edit, { 'action': path('ibexa.content.edit'), 'attr': { 'hidden': 'hidden' }}) }} {{ form_end(form_subitems_content_edit) }} - {% set udwConfigSingle = ibexa_udw_config('single_container', {}) %} -
+ + {% include '@ibexadesign/content/modal/location_bulk_action_failed.html.twig' only %} {% endif %} @@ -183,7 +177,6 @@ {% endblock %} {% block react_modules %} - {{ encore_entry_script_tags('ibexa-admin-ui-subitems-js', null, 'ibexa') }} {{ encore_entry_script_tags('ibexa-admin-ui-mfu-js', null, 'ibexa') }} {{ encore_entry_script_tags('ibexa-admin-ui-content-tree-js', null, 'ibexa') }} {% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/content/tab/sub_items.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/sub_items.html.twig new file mode 100644 index 0000000000..0fc1909628 --- /dev/null +++ b/src/bundle/Resources/views/themes/admin/content/tab/sub_items.html.twig @@ -0,0 +1,21 @@ +{% trans_default_domain 'ibexa_locationview' %} + +{% set sub_items %} + {% include '@ibexadesign/ui/component/sub_items/sub_items.html.twig' %} +{% endset %} + +{% set content_details_items = [ + { + label: 'tab.sub_items.sub_items'|trans()|desc('Sub Items'), + content: sub_items, + }, +] %} + +{% include '@ibexadesign/ui/component/details/details.html.twig' with { + headline: 'tab.subitems.sub_items'|trans()|desc('Sub Items'), + items: content_details_items, +} only %} + +{% block react_modules %} + {{ encore_entry_script_tags('ibexa-admin-ui-subitems-js', null, 'ibexa') }} +{% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/component/sub_items/sub_items.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/sub_items/sub_items.html.twig new file mode 100644 index 0000000000..ddade81fb5 --- /dev/null +++ b/src/bundle/Resources/views/themes/admin/ui/component/sub_items/sub_items.html.twig @@ -0,0 +1,14 @@ +{% set udwConfigSingle = ibexa_udw_config('single_container', {}) %} + +
+ + + +{#{{ dump(subitems_module) }}#} diff --git a/src/lib/Tab/LocationView/SubItemsTab.php b/src/lib/Tab/LocationView/SubItemsTab.php new file mode 100644 index 0000000000..bc3a614a76 --- /dev/null +++ b/src/lib/Tab/LocationView/SubItemsTab.php @@ -0,0 +1,64 @@ +translator->trans('tab.name.sub_items', [], 'ibexa_locationview'); + } + + public function getOrder(): int + { + return 200; + } + + /** + * {@inheritdoc} + */ + public function getTemplate(): string + { + return '@ibexadesign/content/tab/sub_items.html.twig'; + } + + /** + * {@inheritdoc} + */ + public function getTemplateParameters(array $contextParameters = []): array + { + /** @var \Ibexa\Contracts\Core\Repository\Values\Content\Content $content */ + $content = $contextParameters['content']; + + $versionInfo = $content->getVersionInfo(); + $contentInfo = $versionInfo->getContentInfo(); + + $viewParameters = [ + 'content_info' => $contentInfo, + 'version_info' => $versionInfo, + ]; + + return array_replace($contextParameters, $viewParameters); + } +} From d2a23cb48eaddaff8afde15f51b8a67a2e34d6cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Wed, 15 Nov 2023 14:36:51 +0100 Subject: [PATCH 02/11] fixed styles and js; moved mfu to tab --- .../js/scripts/helpers/timezone.helper.js | 1 + .../scss/ui/modules/sub-items-list/_main.scss | 5 ++--- .../admin/content/location_view.html.twig | 8 +------ .../admin/content/tab/sub_items.html.twig | 21 ++----------------- .../sub_items/multifile_upload.html.twig | 7 +++++++ .../component/sub_items/sub_items.html.twig | 4 ---- .../src/modules/sub-items/sub.items.module.js | 8 +++++-- 7 files changed, 19 insertions(+), 35 deletions(-) create mode 100644 src/bundle/Resources/views/themes/admin/ui/component/sub_items/multifile_upload.html.twig diff --git a/src/bundle/Resources/public/js/scripts/helpers/timezone.helper.js b/src/bundle/Resources/public/js/scripts/helpers/timezone.helper.js index 5272f5c053..3e2f103533 100644 --- a/src/bundle/Resources/public/js/scripts/helpers/timezone.helper.js +++ b/src/bundle/Resources/public/js/scripts/helpers/timezone.helper.js @@ -29,4 +29,5 @@ formatShortDateTime, getBrowserTimezone, }); + console.log('d'); })(window, window.document, window.ibexa, window.moment); diff --git a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_main.scss b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_main.scss index 23d9667f95..9af68b3bf9 100644 --- a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_main.scss +++ b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_main.scss @@ -1,7 +1,6 @@ .m-sub-items { - margin-top: calculateRem(72px); - margin-bottom: calculateRem(24px); - padding: calculateRem(16px) 0; + margin-top: calculateRem(30px); + max-width: 100%; background: $ibexa-color-white; border-radius: $ibexa-border-radius; diff --git a/src/bundle/Resources/views/themes/admin/content/location_view.html.twig b/src/bundle/Resources/views/themes/admin/content/location_view.html.twig index cf41efabcf..c34271e826 100644 --- a/src/bundle/Resources/views/themes/admin/content/location_view.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/location_view.html.twig @@ -123,13 +123,6 @@ {% endblock %} {% block content %} -
@@ -178,6 +171,7 @@ {% block react_modules %} {{ encore_entry_script_tags('ibexa-admin-ui-mfu-js', null, 'ibexa') }} + {{ encore_entry_script_tags('ibexa-admin-ui-subitems-js', null, 'ibexa') }} {{ encore_entry_script_tags('ibexa-admin-ui-content-tree-js', null, 'ibexa') }} {% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/content/tab/sub_items.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/sub_items.html.twig index 0fc1909628..329470d49c 100644 --- a/src/bundle/Resources/views/themes/admin/content/tab/sub_items.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/tab/sub_items.html.twig @@ -1,21 +1,4 @@ {% trans_default_domain 'ibexa_locationview' %} -{% set sub_items %} - {% include '@ibexadesign/ui/component/sub_items/sub_items.html.twig' %} -{% endset %} - -{% set content_details_items = [ - { - label: 'tab.sub_items.sub_items'|trans()|desc('Sub Items'), - content: sub_items, - }, -] %} - -{% include '@ibexadesign/ui/component/details/details.html.twig' with { - headline: 'tab.subitems.sub_items'|trans()|desc('Sub Items'), - items: content_details_items, -} only %} - -{% block react_modules %} - {{ encore_entry_script_tags('ibexa-admin-ui-subitems-js', null, 'ibexa') }} -{% endblock %} +{% include '@ibexadesign/ui/component/sub_items/multifile_upload.html.twig' %} +{% include '@ibexadesign/ui/component/sub_items/sub_items.html.twig' %} diff --git a/src/bundle/Resources/views/themes/admin/ui/component/sub_items/multifile_upload.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/sub_items/multifile_upload.html.twig new file mode 100644 index 0000000000..28bb623c67 --- /dev/null +++ b/src/bundle/Resources/views/themes/admin/ui/component/sub_items/multifile_upload.html.twig @@ -0,0 +1,7 @@ +
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/sub_items/sub_items.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/sub_items/sub_items.html.twig index ddade81fb5..9d34b5505e 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/sub_items/sub_items.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/sub_items/sub_items.html.twig @@ -8,7 +8,3 @@ data-udw-config-bulk-move-items="{{ udwConfigSingle }}" data-udw-config-bulk-add-location="{{ udwConfigSingle }}" >
- - - -{#{{ dump(subitems_module) }}#} diff --git a/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js b/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js index 86e7f54758..bd8d353ef4 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js +++ b/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js @@ -22,7 +22,7 @@ const DESCENDING_SORT_ORDER = 'descending'; const DEFAULT_SORT_ORDER = ASCENDING_SORT_ORDER; const ACTION_FLOW_ADD_LOCATIONS = 'add'; const ACTION_FLOW_MOVE = 'move'; -const SUBITEMS_PADDING = 15; +const SUBITEMS_PADDING = 24; export const VIEW_MODE_TABLE = 'table'; export const VIEW_MODE_GRID = 'grid'; @@ -140,6 +140,8 @@ export default class SubItemsModule extends Component { const calculatedWidth = this.calculateSubItemsWidth(); const { subItemsWidth } = this.state; + console.log(calculatedWidth); + if (calculatedWidth !== subItemsWidth) { this.setState({ subItemsWidth: calculatedWidth }); } @@ -149,7 +151,9 @@ export default class SubItemsModule extends Component { const mainRow = document.querySelector('.ibexa-main-row'); const mainRowRect = mainRow.getBoundingClientRect(); - return mainRowRect.width - SUBITEMS_PADDING; + console.log(mainRowRect); + + return mainRowRect.width - 2 * SUBITEMS_PADDING; } getDefaultSortClause(sortClauses) { From 6ae07b65f81aeea4dd95422bfacc39ff6cdac08a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Tue, 7 Nov 2023 11:47:42 +0100 Subject: [PATCH 03/11] temp --- .../scss/ui/modules/_sub.items.list.scss | 4 +- ...> _view.columns.toggler.list.element.scss} | 2 +- ...oggler.scss => _view.columns.toggler.scss} | 5 +- .../sub-items-list/_view.switcher.scss | 7 +- .../translations/ibexa_sub_items.en.xliff | 66 +++++------ .../table-view/table.view.component.js | 96 ++-------------- .../table-view/table.view.item.component.js | 13 ++- .../view.columns.toggler.js} | 67 ++++++++---- .../view.columns.toggler.list.element.js} | 10 +- .../src/modules/sub-items/sub.items.module.js | 103 +++++++++++++++++- 10 files changed, 212 insertions(+), 161 deletions(-) rename src/bundle/Resources/public/scss/ui/modules/sub-items-list/{_table.view.columns.toggler.list.element.scss => _view.columns.toggler.list.element.scss} (88%) rename src/bundle/Resources/public/scss/ui/modules/sub-items-list/{_table.view.columns.toggler.scss => _view.columns.toggler.scss} (64%) rename src/bundle/ui-dev/src/modules/sub-items/components/{table-view/table.view.columns.toggler.js => view-columns-toggler/view.columns.toggler.js} (61%) rename src/bundle/ui-dev/src/modules/sub-items/components/{table-view/table.view.columns.toggler.list.element.js => view-columns-toggler/view.columns.toggler.list.element.js} (56%) diff --git a/src/bundle/Resources/public/scss/ui/modules/_sub.items.list.scss b/src/bundle/Resources/public/scss/ui/modules/_sub.items.list.scss index 04e992e9e2..8d66c72b16 100644 --- a/src/bundle/Resources/public/scss/ui/modules/_sub.items.list.scss +++ b/src/bundle/Resources/public/scss/ui/modules/_sub.items.list.scss @@ -1,6 +1,6 @@ @import 'sub-items-list/no.items'; -@import 'sub-items-list/table.view.columns.toggler.list.element'; -@import 'sub-items-list/table.view.columns.toggler'; +@import 'sub-items-list/view.columns.toggler.list.element'; +@import 'sub-items-list/view.columns.toggler'; @import 'sub-items-list/table.view.item'; @import 'sub-items-list/table.view'; @import 'sub-items-list/language.selector'; diff --git a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_table.view.columns.toggler.list.element.scss b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view.columns.toggler.list.element.scss similarity index 88% rename from src/bundle/Resources/public/scss/ui/modules/sub-items-list/_table.view.columns.toggler.list.element.scss rename to src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view.columns.toggler.list.element.scss index f95d5fb756..960cd9d14f 100644 --- a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_table.view.columns.toggler.list.element.scss +++ b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view.columns.toggler.list.element.scss @@ -1,4 +1,4 @@ -.c-table-view-columns-toggler-list-element { +.c-view-columns-toggler-list-element { cursor: pointer; .ibexa-popup-menu__item-content { diff --git a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_table.view.columns.toggler.scss b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view.columns.toggler.scss similarity index 64% rename from src/bundle/Resources/public/scss/ui/modules/sub-items-list/_table.view.columns.toggler.scss rename to src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view.columns.toggler.scss index 59c29724ca..14c3637398 100644 --- a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_table.view.columns.toggler.scss +++ b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view.columns.toggler.scss @@ -1,10 +1,13 @@ -.c-table-view-columns-toggler { +.c-view-columns-toggler { height: 100%; position: relative; display: flex; justify-content: center; align-items: center; color: $ibexa-color-dark; + background-color: $ibexa-color-light-100; + border-left: calculateRem(2px) solid $ibexa-color-light; + padding: calculateRem(12px) calculateRem(16px); &__panel { top: calculateRem(36px); diff --git a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view.switcher.scss b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view.switcher.scss index dafe7638a2..72c7796cdf 100644 --- a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view.switcher.scss +++ b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view.switcher.scss @@ -1,5 +1,6 @@ .c-view-switcher { - margin-left: calculateRem(8px); - padding-left: calculateRem(8px); - border-left: calculateRem(2px) solid $ibexa-color-light; + background-color: $ibexa-color-light-100; + padding: calculateRem(12px) calculateRem(16px) calculateRem(12px) 0; + border-top-right-radius: calculateRem(12px); + border-bottom-right-radius: calculateRem(12px); } diff --git a/src/bundle/Resources/translations/ibexa_sub_items.en.xliff b/src/bundle/Resources/translations/ibexa_sub_items.en.xliff index 2853a95cff..50a079d576 100644 --- a/src/bundle/Resources/translations/ibexa_sub_items.en.xliff +++ b/src/bundle/Resources/translations/ibexa_sub_items.en.xliff @@ -201,80 +201,75 @@ Sub-items key: items_list.title - + Content type Content type - key: items_table.header.content_type + key: items_table.columns.content_type - + Contributor Contributor - key: items_table.header.contributor + key: items_table.columns.contributor - + Creator Creator - key: items_table.header.creator + key: items_table.columns.creator - - Filters - Filters - key: items_table.header.filters - - + Location ID Location ID - key: items_table.header.location_id + key: items_table.columns.location_id - + Location remote ID Location remote ID - key: items_table.header.location_remote_id + key: items_table.columns.location_remote_id - + Modified Modified - key: items_table.header.modified + key: items_table.columns.modified - + Name Name - key: items_table.header.name + key: items_table.columns.name - + Object ID Object ID - key: items_table.header.object_id + key: items_table.columns.object_id - + Object remote ID Object remote ID - key: items_table.header.object_remote_id + key: items_table.columns.object_remote_id - + Priority Priority - key: items_table.header.priority + key: items_table.columns.priority - + Published Published - key: items_table.header.pubished + key: items_table.columns.pubished - + Section Section - key: items_table.header.section + key: items_table.columns.section - + Translations Translations - key: items_table.header.translations + key: items_table.columns.translations - + Visibility Visibility - key: items_table.header.visibility + key: items_table.columns.visibility Not Visible @@ -311,6 +306,11 @@ Reveal key: unhide_locations_btn.label + + Columns + Columns + key: view_columns_toggler.label + Grid view Grid view diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.component.js index c475fa02af..6999f35840 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.component.js +++ b/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.component.js @@ -3,51 +3,17 @@ import { createPortal } from 'react-dom'; import PropTypes from 'prop-types'; import TableViewItemComponent from './table.view.item.component'; -import TableViewColumnsTogglerComponent from './table.view.columns.toggler'; import ThreeStateCheckboxComponent from '../three-state-checkbox/three.state.checkbox.component'; import LanguageSelector from '../sub-items-list/language.selector.compoment'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; +import { columnsLabels as headerLabels } from '../../sub.items.module'; -const { Translator } = window; - -const COLUMNS_VISIBILITY_LOCAL_STORAGE_DATA_KEY = 'sub-items_columns-visibility'; -const DEFAULT_COLUMNS_VISIBILITY = { - modified: true, - 'content-type': true, - priority: true, - translations: true, - visibility: true, - creator: true, - contributor: true, - published: true, - section: true, - 'location-id': true, - 'location-remote-id': true, - 'object-id': true, - 'object-remote-id': true, -}; const SORTKEY_MAP = { name: 'ContentName', modified: 'DateModified', priority: 'LocationPriority', }; const TABLE_HEAD_CLASS = 'ibexa-table__header-cell c-table-view__cell c-table-view__cell--head'; -export const headerLabels = { - name: Translator.trans(/*@Desc("Name")*/ 'items_table.header.name', {}, 'ibexa_sub_items'), - modified: Translator.trans(/*@Desc("Modified")*/ 'items_table.header.modified', {}, 'ibexa_sub_items'), - 'content-type': Translator.trans(/*@Desc("Content type")*/ 'items_table.header.content_type', {}, 'ibexa_sub_items'), - priority: Translator.trans(/*@Desc("Priority")*/ 'items_table.header.priority', {}, 'ibexa_sub_items'), - translations: Translator.trans(/*@Desc("Translations")*/ 'items_table.header.translations', {}, 'ibexa_sub_items'), - visibility: Translator.trans(/*@Desc("Visibility")*/ 'items_table.header.visibility', {}, 'ibexa_sub_items'), - creator: Translator.trans(/*@Desc("Creator")*/ 'items_table.header.creator', {}, 'ibexa_sub_items'), - contributor: Translator.trans(/*@Desc("Contributor")*/ 'items_table.header.contributor', {}, 'ibexa_sub_items'), - published: Translator.trans(/*@Desc("Published")*/ 'items_table.header.pubished', {}, 'ibexa_sub_items'), - section: Translator.trans(/*@Desc("Section")*/ 'items_table.header.section', {}, 'ibexa_sub_items'), - 'location-id': Translator.trans(/*@Desc("Location ID")*/ 'items_table.header.location_id', {}, 'ibexa_sub_items'), - 'location-remote-id': Translator.trans(/*@Desc("Location remote ID")*/ 'items_table.header.location_remote_id', {}, 'ibexa_sub_items'), - 'object-id': Translator.trans(/*@Desc("Object ID")*/ 'items_table.header.object_id', {}, 'ibexa_sub_items'), - 'object-remote-id': Translator.trans(/*@Desc("Object remote ID")*/ 'items_table.header.object_remote_id', {}, 'ibexa_sub_items'), -}; export default class TableViewComponent extends Component { constructor(props) { @@ -55,8 +21,6 @@ export default class TableViewComponent extends Component { this.renderItem = this.renderItem.bind(this); this.selectAll = this.selectAll.bind(this); - this.setColumnsVisibilityInLocalStorage = this.setColumnsVisibilityInLocalStorage.bind(this); - this.toggleColumnVisibility = this.toggleColumnVisibility.bind(this); this.setLanguageSelectorData = this.setLanguageSelectorData.bind(this); this.openLanguageSelector = this.openLanguageSelector.bind(this); this.closeLanguageSelector = this.closeLanguageSelector.bind(this); @@ -66,7 +30,6 @@ export default class TableViewComponent extends Component { this._refScroller = createRef(); this.state = { - columnsVisibility: this.getColumnsVisibilityFromLocalStorage(), languageSelectorData: {}, languageSelectorOpen: false, scrollShadowLeft: false, @@ -80,8 +43,8 @@ export default class TableViewComponent extends Component { this.handleScrollerScroll(); } - componentDidUpdate(prevProps, prevState) { - if (this.state.columnsVisibility !== prevState.columnsVisibility) { + componentDidUpdate(prevProps) { + if (this.props.columnsVisibility !== prevProps.columnsVisibility) { this.handleScrollerScroll(); } } @@ -107,27 +70,6 @@ export default class TableViewComponent extends Component { }); } - getColumnsVisibilityFromLocalStorage() { - const columnsVisibilityData = localStorage.getItem(COLUMNS_VISIBILITY_LOCAL_STORAGE_DATA_KEY); - const columnsVisibility = { ...DEFAULT_COLUMNS_VISIBILITY }; - - if (columnsVisibilityData) { - Object.entries(JSON.parse(columnsVisibilityData)).forEach(([id, isVisible]) => { - if (id in columnsVisibility) { - columnsVisibility[id] = isVisible; - } - }); - } - - return columnsVisibility; - } - - setColumnsVisibilityInLocalStorage() { - const columnsVisibilityData = JSON.stringify(this.state.columnsVisibility); - - localStorage.setItem(COLUMNS_VISIBILITY_LOCAL_STORAGE_DATA_KEY, columnsVisibilityData); - } - /** * Selects all visible items */ @@ -139,18 +81,6 @@ export default class TableViewComponent extends Component { toggleAllItemsSelect(isSelectAction); } - toggleColumnVisibility(column) { - this.setState( - (state) => ({ - columnsVisibility: { - ...state.columnsVisibility, - [column]: !state.columnsVisibility[column], - }, - }), - this.setColumnsVisibilityInLocalStorage, - ); - } - /** * Sets language selector data * @@ -185,7 +115,8 @@ export default class TableViewComponent extends Component { * @memberof TableViewComponent */ renderItem(item) { - const { columnsVisibility, scrollShadowLeft, scrollShadowRight } = this.state; + const { scrollShadowLeft, scrollShadowRight } = this.state; + const { columnsVisibility } = this.props; const { handleItemPriorityUpdate, handleEditItem, generateLink, languages, onItemSelect, selectedLocationsIds } = this.props; const isSelected = selectedLocationsIds.has(item.id); @@ -209,8 +140,8 @@ export default class TableViewComponent extends Component { } renderBasicColumnsHeader() { - const { sortClause, sortOrder, onSortChange } = this.props; - const { columnsVisibility, scrollShadowLeft } = this.state; + const { sortClause, sortOrder, onSortChange, columnsVisibility } = this.props; + const { scrollShadowLeft } = this.state; const columnsToRender = { name: true, ...columnsVisibility, @@ -263,16 +194,10 @@ export default class TableViewComponent extends Component { return null; } - const { columnsVisibility, scrollShadowRight } = this.state; const { selectedLocationsIds, items } = this.props; const anyLocationSelected = !!selectedLocationsIds.size; const allLocationsSelected = selectedLocationsIds.size === items.length; const isCheckboxIndeterminate = anyLocationSelected && !allLocationsSelected; - const togglerClassName = createCssClassNames({ - 'c-table-view__cell': true, - 'c-table-view__cell--toggler': true, - 'c-table-view__cell--shadow-left': scrollShadowRight, - }); return ( @@ -287,12 +212,7 @@ export default class TableViewComponent extends Component { /> {this.renderBasicColumnsHeader()} - - - + ); diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js index f4aef24edc..2bebedcc18 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js +++ b/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js @@ -263,9 +263,18 @@ export default class TableViewItemComponent extends PureComponent { const { invisible, hidden } = this.props.item; const visibleLabel = Translator.trans(/*@Desc("Visible")*/ 'items_table.row.visible.label', {}, 'ibexa_sub_items'); const notVisibleLabel = Translator.trans(/*@Desc("Not Visible")*/ 'items_table.row.not_visible.label', {}, 'ibexa_sub_items'); - const label = !invisible && !hidden ? visibleLabel : notVisibleLabel; + const isVisible = !invisible && !hidden; + const label = isVisible ? visibleLabel : notVisibleLabel; + const badgeClasses = createCssClassNames({ + 'ibexa-badge': true, + 'ibexa-badge--success': isVisible, + }); - return
{label}
; + return ( +
+ {label} +
+ ); } renderCreatorCell() { diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.columns.toggler.js b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js similarity index 61% rename from src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.columns.toggler.js rename to src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js index c826292aba..831a8de0db 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.columns.toggler.js +++ b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js @@ -2,15 +2,15 @@ import React, { Component, createRef } from 'react'; import PropTypes from 'prop-types'; import Icon from '../../../common/icon/icon'; -import TableViewColumnsTogglerListElement from './table.view.columns.toggler.list.element'; -import { headerLabels } from './table.view.component'; +import ViewColumnsTogglerListElement from './view.columns.toggler.list.element'; +import { columnsLabels } from '../../sub.items.module'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; const { Translator } = window; const DEFAULT_PANEL_HEIGHT = 450; -export default class TableViewColumnsTogglerComponent extends Component { +export default class ViewColumnsTogglerComponent extends Component { constructor(props) { super(props); @@ -50,9 +50,9 @@ export default class TableViewColumnsTogglerComponent extends Component { } getBtnBottomDocumentOffset() { - const buttonTopOffset = this._refTogglerButton.current.getBoundingClientRect().top + window.scrollY; + const buttonTopOffset = this._refTogglerButton.current.getBoundingClientRect().top; - return document.documentElement.scrollHeight - buttonTopOffset; + return window.innerHeight - buttonTopOffset; } hidePanel({ target }) { @@ -60,7 +60,7 @@ export default class TableViewColumnsTogglerComponent extends Component { return; } - const isClickInsideToggler = target.closest('.c-table-view-columns-toggler'); + const isClickInsideToggler = target.closest('.c-view-columns-toggler'); if (!isClickInsideToggler) { this.setState(() => ({ @@ -71,6 +71,7 @@ export default class TableViewColumnsTogglerComponent extends Component { togglePanel() { this.setState((state) => ({ + buttonBottomDocumentOffset: this.getBtnBottomDocumentOffset(), isOpen: !state.isOpen, })); } @@ -86,17 +87,17 @@ export default class TableViewColumnsTogglerComponent extends Component { const showAboveBtn = buttonBottomDocumentOffset < panelHeight; const className = createCssClassNames({ 'ibexa-popup-menu': true, - 'c-table-view-columns-toggler__panel': true, - 'c-table-view-columns-toggler__panel--above-btn': showAboveBtn, + 'c-view-columns-toggler__panel': true, + 'c-view-columns-toggler__panel--above-btn': showAboveBtn, }); return (
    {Object.entries(columnsVisibility).map(([columnKey, isColumnVisible]) => { - const label = headerLabels[columnKey]; + const label = columnsLabels[columnKey]; return ( - ; + }; + + renderToggler() { + const label = Translator.trans(/*@Desc("Columns")*/ 'view_columns_toggler.label', {}, 'ibexa_sub_items'); + + return ( +
    + + + {label} + + {this.renderCaretIcon()} +
    + ) + } + + render() { return ( -
    - - {this.renderPanel()} +
    +
    + {this.renderToggler()} + {this.renderPanel()} +
    ); } } -TableViewColumnsTogglerComponent.propTypes = { +ViewColumnsTogglerComponent.propTypes = { columnsVisibility: PropTypes.object.isRequired, toggleColumnVisibility: PropTypes.func.isRequired, }; diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.columns.toggler.list.element.js b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.list.element.js similarity index 56% rename from src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.columns.toggler.list.element.js rename to src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.list.element.js index ff65331834..470f35f99e 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.columns.toggler.list.element.js +++ b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.list.element.js @@ -1,9 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -const TableViewColumnsTogglerListElement = ({ label, isColumnVisible, toggleColumnVisibility, columnKey }) => { +const ViewColumnsTogglerListElement = ({ label, isColumnVisible, toggleColumnVisibility, columnKey }) => { return ( -
  • toggleColumnVisibility(columnKey)}> +
  • toggleColumnVisibility(columnKey)}>
    - +
    • ); }; -TableViewColumnsTogglerListElement.propTypes = { +ViewColumnsTogglerListElement.propTypes = { label: PropTypes.string.isRequired, columnKey: PropTypes.string.isRequired, isColumnVisible: PropTypes.bool.isRequired, toggleColumnVisibility: PropTypes.func.isRequired, }; -export default TableViewColumnsTogglerListElement; +export default ViewColumnsTogglerListElement; diff --git a/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js b/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js index bd8d353ef4..849d8b5e57 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js +++ b/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; +import ViewColumnsTogglerComponent from './components/view-columns-toggler/view.columns.toggler'; import ViewSwitcherComponent from './components/view-switcher/view.switcher.component.js'; import SubItemsListComponent from './components/sub-items-list/sub.items.list.component.js'; import Popup from '../common/popup/popup.component'; @@ -24,6 +25,39 @@ const ACTION_FLOW_ADD_LOCATIONS = 'add'; const ACTION_FLOW_MOVE = 'move'; const SUBITEMS_PADDING = 24; +const COLUMNS_VISIBILITY_LOCAL_STORAGE_DATA_KEY = 'sub-items_columns-visibility'; +const DEFAULT_COLUMNS_VISIBILITY = { + 'content-type': true, + priority: false, + translations: true, + visibility: true, + contributor: true, + modified: true, + creator: false, + published: false, + section: false, + 'location-id': false, + 'location-remote-id': false, + 'object-id': false, + 'object-remote-id': false, +}; +export const columnsLabels = { + name: Translator.trans(/*@Desc("Name")*/ 'items_table.columns.name', {}, 'ibexa_sub_items'), + modified: Translator.trans(/*@Desc("Modified")*/ 'items_table.columns.modified', {}, 'ibexa_sub_items'), + 'content-type': Translator.trans(/*@Desc("Content type")*/ 'items_table.columns.content_type', {}, 'ibexa_sub_items'), + priority: Translator.trans(/*@Desc("Priority")*/ 'items_table.columns.priority', {}, 'ibexa_sub_items'), + translations: Translator.trans(/*@Desc("Translations")*/ 'items_table.columns.translations', {}, 'ibexa_sub_items'), + visibility: Translator.trans(/*@Desc("Visibility")*/ 'items_table.columns.visibility', {}, 'ibexa_sub_items'), + creator: Translator.trans(/*@Desc("Creator")*/ 'items_table.columns.creator', {}, 'ibexa_sub_items'), + contributor: Translator.trans(/*@Desc("Contributor")*/ 'items_table.columns.contributor', {}, 'ibexa_sub_items'), + published: Translator.trans(/*@Desc("Published")*/ 'items_table.columns.pubished', {}, 'ibexa_sub_items'), + section: Translator.trans(/*@Desc("Section")*/ 'items_table.columns.section', {}, 'ibexa_sub_items'), + 'location-id': Translator.trans(/*@Desc("Location ID")*/ 'items_table.columns.location_id', {}, 'ibexa_sub_items'), + 'location-remote-id': Translator.trans(/*@Desc("Location remote ID")*/ 'items_table.columns.location_remote_id', {}, 'ibexa_sub_items'), + 'object-id': Translator.trans(/*@Desc("Object ID")*/ 'items_table.columns.object_id', {}, 'ibexa_sub_items'), + 'object-remote-id': Translator.trans(/*@Desc("Object remote ID")*/ 'items_table.columns.object_remote_id', {}, 'ibexa_sub_items'), +}; + export const VIEW_MODE_TABLE = 'table'; export const VIEW_MODE_GRID = 'grid'; @@ -56,6 +90,8 @@ export default class SubItemsModule extends Component { this.changeSorting = this.changeSorting.bind(this); this.calculateSubItemsWidth = this.calculateSubItemsWidth.bind(this); this.resizeSubItems = this.resizeSubItems.bind(this); + this.setColumnsVisibilityInLocalStorage = this.setColumnsVisibilityInLocalStorage.bind(this); + this.toggleColumnVisibility = this.toggleColumnVisibility.bind(this); this._refListViewWrapper = React.createRef(); this._refMainContainerWrapper = React.createRef(); @@ -82,6 +118,7 @@ export default class SubItemsModule extends Component { sortClause: sortClauseData.name, sortOrder: sortClauseData.order, subItemsWidth: this.calculateSubItemsWidth(), + columnsVisibility: this.getColumnsVisibilityFromLocalStorage(), }; } @@ -1199,7 +1236,7 @@ export default class SubItemsModule extends Component { } renderListView() { - const { activePageItems, sortClause, sortOrder } = this.state; + const { activePageItems, sortClause, sortOrder, columnsVisibility } = this.state; const pageLoaded = !!activePageItems; if (!pageLoaded) { @@ -1222,6 +1259,7 @@ export default class SubItemsModule extends Component { onSortChange={this.changeSorting} sortClause={sortClause} sortOrder={sortOrder} + columnsVisibility={this.filterSmartModeColumns(columnsVisibility)} languageContainerSelector={this.props.languageContainerSelector} /> ); @@ -1237,9 +1275,66 @@ export default class SubItemsModule extends Component { ); } + filterSmartModeColumns(allColumns) { + if (false) { + return allColumns; + } + + const expertModeColumns = [ + 'section', + 'location-id', + 'location-remote-id', + 'object-id', + 'object-remote-id', + ]; + + const filteredColumns = {}; + + Object.keys(allColumns).forEach((columnKey) => { + if (!expertModeColumns.includes(columnKey)) { + filteredColumns[columnKey] = allColumns[columnKey]; + } + }) + + return filteredColumns; + } + + getColumnsVisibilityFromLocalStorage() { + const columnsVisibilityData = localStorage.getItem(COLUMNS_VISIBILITY_LOCAL_STORAGE_DATA_KEY); + const columnsVisibility = { ...DEFAULT_COLUMNS_VISIBILITY }; + + if (columnsVisibilityData) { + Object.entries(JSON.parse(columnsVisibilityData)).forEach(([id, isVisible]) => { + if (id in columnsVisibility) { + columnsVisibility[id] = isVisible; + } + }); + } + + return columnsVisibility; + } + + setColumnsVisibilityInLocalStorage() { + const columnsVisibilityData = JSON.stringify(this.state.columnsVisibility); + + localStorage.setItem(COLUMNS_VISIBILITY_LOCAL_STORAGE_DATA_KEY, columnsVisibilityData); + } + + toggleColumnVisibility(column) { + this.setState( + (state) => ({ + columnsVisibility: { + ...state.columnsVisibility, + [column]: !state.columnsVisibility[column], + }, + }), + this.setColumnsVisibilityInLocalStorage, + ); + } + render() { const listTitle = Translator.trans(/*@Desc("Sub-items")*/ 'items_list.title', {}, 'ibexa_sub_items'); - const { selectedItems, activeView, totalCount, isDuringBulkOperation, activePageItems, subItemsWidth } = this.state; + const { selectedItems, activeView, totalCount, isDuringBulkOperation, activePageItems, subItemsWidth, columnsVisibility } = this.state; const nothingSelected = !selectedItems.size; const isTableViewActive = activeView === VIEW_MODE_TABLE; const pageLoaded = !!activePageItems; @@ -1273,6 +1368,10 @@ export default class SubItemsModule extends Component { {this.renderBulkHideBtn(bulkHideBtnDisabled)} {this.renderBulkUnhideBtn(bulkUnhideBtnDisabled)} {this.renderBulkDeleteBtn(bulkBtnDisabled)} +
From a348994b9e9789b8e8305654760be4aa77855143 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Wed, 15 Nov 2023 14:49:52 +0100 Subject: [PATCH 04/11] changed translations sub-items => subitems in sil --- .../public/js/scripts/helpers/timezone.helper.js | 1 - .../translations/ibexa_locationview.en.xliff | 14 ++------------ .../translations/ibexa_sub_items.en.xliff | 4 ++-- .../src/modules/sub-items/sub.items.module.js | 2 +- src/lib/Tab/LocationView/SubItemsTab.php | 2 +- 5 files changed, 6 insertions(+), 17 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/helpers/timezone.helper.js b/src/bundle/Resources/public/js/scripts/helpers/timezone.helper.js index 3e2f103533..5272f5c053 100644 --- a/src/bundle/Resources/public/js/scripts/helpers/timezone.helper.js +++ b/src/bundle/Resources/public/js/scripts/helpers/timezone.helper.js @@ -29,5 +29,4 @@ formatShortDateTime, getBrowserTimezone, }); - console.log('d'); })(window, window.document, window.ibexa, window.moment); diff --git a/src/bundle/Resources/translations/ibexa_locationview.en.xliff b/src/bundle/Resources/translations/ibexa_locationview.en.xliff index cb46929ad0..7cb5a85409 100644 --- a/src/bundle/Resources/translations/ibexa_locationview.en.xliff +++ b/src/bundle/Resources/translations/ibexa_locationview.en.xliff @@ -297,8 +297,8 @@ key: tab.name.roles - Sub Items - Sub Items + Subitems + Subitems key: tab.name.sub_items @@ -371,16 +371,6 @@ Link key: tab.relations.table.relation_type.link - - Sub Items - Sub Items - key: tab.sub_items.sub_items - - - Sub Items - Sub Items - key: tab.subitems.sub_items - Add Add diff --git a/src/bundle/Resources/translations/ibexa_sub_items.en.xliff b/src/bundle/Resources/translations/ibexa_sub_items.en.xliff index 50a079d576..eaa9d7018a 100644 --- a/src/bundle/Resources/translations/ibexa_sub_items.en.xliff +++ b/src/bundle/Resources/translations/ibexa_sub_items.en.xliff @@ -197,8 +197,8 @@ key: instant.filter.placeholder - Sub-items - Sub-items + Subitems + Subitems key: items_list.title diff --git a/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js b/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js index 849d8b5e57..5ff53bdeb2 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js +++ b/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js @@ -1333,7 +1333,7 @@ export default class SubItemsModule extends Component { } render() { - const listTitle = Translator.trans(/*@Desc("Sub-items")*/ 'items_list.title', {}, 'ibexa_sub_items'); + const listTitle = Translator.trans(/*@Desc("Subitems")*/ 'items_list.title', {}, 'ibexa_sub_items'); const { selectedItems, activeView, totalCount, isDuringBulkOperation, activePageItems, subItemsWidth, columnsVisibility } = this.state; const nothingSelected = !selectedItems.size; const isTableViewActive = activeView === VIEW_MODE_TABLE; diff --git a/src/lib/Tab/LocationView/SubItemsTab.php b/src/lib/Tab/LocationView/SubItemsTab.php index bc3a614a76..99d7400c38 100644 --- a/src/lib/Tab/LocationView/SubItemsTab.php +++ b/src/lib/Tab/LocationView/SubItemsTab.php @@ -26,7 +26,7 @@ public function getIdentifier(): string public function getName(): string { - /** @Desc("Sub Items") */ + /** @Desc("Subitems") */ return $this->translator->trans('tab.name.sub_items', [], 'ibexa_locationview'); } From 8821092ff8f14b7b60929a86a48c4c5f7d33e00b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Wed, 15 Nov 2023 14:52:17 +0100 Subject: [PATCH 05/11] removed empty unnecessary lines --- .../views/themes/admin/content/location_view.html.twig | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/bundle/Resources/views/themes/admin/content/location_view.html.twig b/src/bundle/Resources/views/themes/admin/content/location_view.html.twig index c34271e826..3e05dec8d2 100644 --- a/src/bundle/Resources/views/themes/admin/content/location_view.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/location_view.html.twig @@ -143,11 +143,10 @@ }) }} {% if content_type.isContainer %} - {{ form_start(form_subitems_content_edit, { 'action': path('ibexa.content.edit'), 'attr': { 'hidden': 'hidden' }}) }} - {{ form_end(form_subitems_content_edit) }} + {{ form_start(form_subitems_content_edit, { 'action': path('ibexa.content.edit'), 'attr': { 'hidden': 'hidden' }}) }} + {{ form_end(form_subitems_content_edit) }} - - {% include '@ibexadesign/content/modal/location_bulk_action_failed.html.twig' only %} + {% include '@ibexadesign/content/modal/location_bulk_action_failed.html.twig' only %} {% endif %} {% if form_user_invitation is defined %} From 51d0c1176d34f42dccb26d3cba2a06659455b7ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Wed, 15 Nov 2023 15:24:43 +0100 Subject: [PATCH 06/11] fixed sonar; and changed translation due to Justyna input... --- .../public/scss/ui/modules/common/_simple.dropdown.scss | 1 + .../Resources/translations/ibexa_locationview.en.xliff | 4 ++-- src/bundle/Resources/translations/ibexa_sub_items.en.xliff | 4 ++-- .../src/modules/common/simple-dropdown/simple.dropdown.js | 4 ++-- .../components/view-columns-toggler/view.columns.toggler.js | 4 ++-- src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js | 6 +----- src/lib/Tab/LocationView/SubItemsTab.php | 2 +- 7 files changed, 11 insertions(+), 14 deletions(-) diff --git a/src/bundle/Resources/public/scss/ui/modules/common/_simple.dropdown.scss b/src/bundle/Resources/public/scss/ui/modules/common/_simple.dropdown.scss index 05a14cc452..6717e7ea25 100644 --- a/src/bundle/Resources/public/scss/ui/modules/common/_simple.dropdown.scss +++ b/src/bundle/Resources/public/scss/ui/modules/common/_simple.dropdown.scss @@ -9,6 +9,7 @@ &__selected { font-size: $ibexa-text-font-size-medium; + border: 0; padding: calculateRem(2px) calculateRem(30px) calculateRem(2px) calculateRem(8px); min-height: calculateRem(21px); cursor: pointer; diff --git a/src/bundle/Resources/translations/ibexa_locationview.en.xliff b/src/bundle/Resources/translations/ibexa_locationview.en.xliff index 7cb5a85409..9b8eb2812e 100644 --- a/src/bundle/Resources/translations/ibexa_locationview.en.xliff +++ b/src/bundle/Resources/translations/ibexa_locationview.en.xliff @@ -297,8 +297,8 @@ key: tab.name.roles - Subitems - Subitems + Sub-items + Sub-items key: tab.name.sub_items diff --git a/src/bundle/Resources/translations/ibexa_sub_items.en.xliff b/src/bundle/Resources/translations/ibexa_sub_items.en.xliff index eaa9d7018a..50a079d576 100644 --- a/src/bundle/Resources/translations/ibexa_sub_items.en.xliff +++ b/src/bundle/Resources/translations/ibexa_sub_items.en.xliff @@ -197,8 +197,8 @@ key: instant.filter.placeholder - Subitems - Subitems + Sub-items + Sub-items key: items_list.title diff --git a/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js b/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js index 4783f66f50..48cbc32676 100644 --- a/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js +++ b/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js @@ -70,11 +70,11 @@ const SimpleDropdown = ({ options, selectedOption, extraClasses, onOptionClick, }; const renderSelectedItem = () => { return ( -
+
+ ); }; diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js index 831a8de0db..fa28de58f2 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js +++ b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js @@ -120,7 +120,7 @@ export default class ViewColumnsTogglerComponent extends Component { const label = Translator.trans(/*@Desc("Columns")*/ 'view_columns_toggler.label', {}, 'ibexa_sub_items'); return ( -
{this.renderCaretIcon()} -
+ ) } diff --git a/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js b/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js index 5ff53bdeb2..60e8ed1a56 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js +++ b/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js @@ -177,8 +177,6 @@ export default class SubItemsModule extends Component { const calculatedWidth = this.calculateSubItemsWidth(); const { subItemsWidth } = this.state; - console.log(calculatedWidth); - if (calculatedWidth !== subItemsWidth) { this.setState({ subItemsWidth: calculatedWidth }); } @@ -188,8 +186,6 @@ export default class SubItemsModule extends Component { const mainRow = document.querySelector('.ibexa-main-row'); const mainRowRect = mainRow.getBoundingClientRect(); - console.log(mainRowRect); - return mainRowRect.width - 2 * SUBITEMS_PADDING; } @@ -1333,7 +1329,7 @@ export default class SubItemsModule extends Component { } render() { - const listTitle = Translator.trans(/*@Desc("Subitems")*/ 'items_list.title', {}, 'ibexa_sub_items'); + const listTitle = Translator.trans(/*@Desc("Sub-items")*/ 'items_list.title', {}, 'ibexa_sub_items'); const { selectedItems, activeView, totalCount, isDuringBulkOperation, activePageItems, subItemsWidth, columnsVisibility } = this.state; const nothingSelected = !selectedItems.size; const isTableViewActive = activeView === VIEW_MODE_TABLE; diff --git a/src/lib/Tab/LocationView/SubItemsTab.php b/src/lib/Tab/LocationView/SubItemsTab.php index 99d7400c38..f09787faa7 100644 --- a/src/lib/Tab/LocationView/SubItemsTab.php +++ b/src/lib/Tab/LocationView/SubItemsTab.php @@ -26,7 +26,7 @@ public function getIdentifier(): string public function getName(): string { - /** @Desc("Subitems") */ + /** @Desc("Sub-items") */ return $this->translator->trans('tab.name.sub_items', [], 'ibexa_locationview'); } From a7e748c2c3bcb9565151d1daf6d1b5a1ba4b920a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Wed, 15 Nov 2023 15:29:20 +0100 Subject: [PATCH 07/11] fixed linter --- .../_view.columns.toggler.list.element.scss | 1 + .../common/simple-dropdown/simple.dropdown.js | 2 +- .../table-view/table.view.component.js | 3 ++- .../view.columns.toggler.js | 18 +++++------------- .../view.columns.toggler.list.element.js | 6 +++--- .../src/modules/sub-items/sub.items.module.js | 18 +++++------------- 6 files changed, 17 insertions(+), 31 deletions(-) diff --git a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view.columns.toggler.list.element.scss b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view.columns.toggler.list.element.scss index 960cd9d14f..163e45f230 100644 --- a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view.columns.toggler.list.element.scss +++ b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view.columns.toggler.list.element.scss @@ -3,6 +3,7 @@ .ibexa-popup-menu__item-content { display: flex; + align-items: center; } .ibexa-input--checkbox { diff --git a/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js b/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js index 48cbc32676..d7007de970 100644 --- a/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js +++ b/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js @@ -70,7 +70,7 @@ const SimpleDropdown = ({ options, selectedOption, extraClasses, onOptionClick, }; const renderSelectedItem = () => { return ( - - ) - + ); } render() { return ( -
+
{this.renderToggler()} {this.renderPanel()} diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.list.element.js b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.list.element.js index 470f35f99e..9a893e85e9 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.list.element.js +++ b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.list.element.js @@ -3,8 +3,8 @@ import PropTypes from 'prop-types'; const ViewColumnsTogglerListElement = ({ label, isColumnVisible, toggleColumnVisibility, columnKey }) => { return ( -
  • toggleColumnVisibility(columnKey)}> -
    +
  • +
    • + ); }; diff --git a/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js b/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js index 60e8ed1a56..d40a4bd9bf 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js +++ b/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js @@ -1272,17 +1272,8 @@ export default class SubItemsModule extends Component { } filterSmartModeColumns(allColumns) { - if (false) { - return allColumns; - } - - const expertModeColumns = [ - 'section', - 'location-id', - 'location-remote-id', - 'object-id', - 'object-remote-id', - ]; + // TODO: filter when smart mode implemented + const expertModeColumns = ['section', 'location-id', 'location-remote-id', 'object-id', 'object-remote-id']; const filteredColumns = {}; @@ -1290,7 +1281,7 @@ export default class SubItemsModule extends Component { if (!expertModeColumns.includes(columnKey)) { filteredColumns[columnKey] = allColumns[columnKey]; } - }) + }); return filteredColumns; } @@ -1330,7 +1321,8 @@ export default class SubItemsModule extends Component { render() { const listTitle = Translator.trans(/*@Desc("Sub-items")*/ 'items_list.title', {}, 'ibexa_sub_items'); - const { selectedItems, activeView, totalCount, isDuringBulkOperation, activePageItems, subItemsWidth, columnsVisibility } = this.state; + const { selectedItems, activeView, totalCount, isDuringBulkOperation, activePageItems, subItemsWidth, columnsVisibility } = + this.state; const nothingSelected = !selectedItems.size; const isTableViewActive = activeView === VIEW_MODE_TABLE; const pageLoaded = !!activePageItems; From 67a8b83f6e617d6390d246f9b77bb5e42886eeb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20S=C5=82omka?= Date: Mon, 20 Nov 2023 14:03:31 +0100 Subject: [PATCH 08/11] Apply suggestions from code review Co-authored-by: Mikolaj Adamczyk --- src/lib/Tab/LocationView/SubItemsTab.php | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/lib/Tab/LocationView/SubItemsTab.php b/src/lib/Tab/LocationView/SubItemsTab.php index f09787faa7..85cb78df56 100644 --- a/src/lib/Tab/LocationView/SubItemsTab.php +++ b/src/lib/Tab/LocationView/SubItemsTab.php @@ -11,7 +11,6 @@ use Ibexa\Contracts\AdminUi\Tab\AbstractEventDispatchingTab; use Ibexa\Contracts\AdminUi\Tab\OrderedTabInterface; use JMS\TranslationBundle\Annotation\Desc; -use Symfony\Component\EventDispatcher\EventDispatcherInterface; use Symfony\Contracts\Translation\TranslatorInterface; use Twig\Environment; @@ -35,17 +34,11 @@ public function getOrder(): int return 200; } - /** - * {@inheritdoc} - */ public function getTemplate(): string { return '@ibexadesign/content/tab/sub_items.html.twig'; } - /** - * {@inheritdoc} - */ public function getTemplateParameters(array $contextParameters = []): array { /** @var \Ibexa\Contracts\Core\Repository\Values\Content\Content $content */ From 4002e24f0de32d3ed97d42c70fa11ae141befedf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20S=C5=82omka?= Date: Mon, 20 Nov 2023 14:32:34 +0100 Subject: [PATCH 09/11] Fixed code styles --- src/lib/Tab/LocationView/SubItemsTab.php | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/lib/Tab/LocationView/SubItemsTab.php b/src/lib/Tab/LocationView/SubItemsTab.php index 85cb78df56..c6457cf248 100644 --- a/src/lib/Tab/LocationView/SubItemsTab.php +++ b/src/lib/Tab/LocationView/SubItemsTab.php @@ -11,8 +11,6 @@ use Ibexa\Contracts\AdminUi\Tab\AbstractEventDispatchingTab; use Ibexa\Contracts\AdminUi\Tab\OrderedTabInterface; use JMS\TranslationBundle\Annotation\Desc; -use Symfony\Contracts\Translation\TranslatorInterface; -use Twig\Environment; class SubItemsTab extends AbstractEventDispatchingTab implements OrderedTabInterface { From 73ce2cea48d7c8ded980fd04e0c329e1331a9718 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Noco=C5=84?= Date: Tue, 21 Nov 2023 10:57:32 +0100 Subject: [PATCH 10/11] [Behat] Adapted tests to new Sub-items --- src/lib/Behat/Page/ContentViewPage.php | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/lib/Behat/Page/ContentViewPage.php b/src/lib/Behat/Page/ContentViewPage.php index 49cf253ddb..c85af5443c 100644 --- a/src/lib/Behat/Page/ContentViewPage.php +++ b/src/lib/Behat/Page/ContentViewPage.php @@ -76,9 +76,6 @@ class ContentViewPage extends Page /** @var \Ibexa\Contracts\Core\Repository\Repository */ private $repository; - /** @var bool */ - private $expectedIsContainer; - /** @var \Ibexa\Behat\Core\Behat\ArgumentParser; */ private $argumentParser; @@ -193,6 +190,7 @@ public function choosePreview(string $language): void public function goToSubItem(string $contentItemName): void { + $this->switchToTab('Sub-items'); $this->subItemList->verifyIsLoaded(); $this->subItemList->sortBy('Modified', false); @@ -215,9 +213,8 @@ public function navigateToPath(string $path): void public function setExpectedLocationPath(string $locationPath) { - [$this->expectedContentType, $this->expectedContentName, $contentId, $contentMainLocationId, $isContainer] = $this->getContentData($this->argumentParser->parseUrl($locationPath)); + [$this->expectedContentType, $this->expectedContentName, $contentId, $contentMainLocationId] = $this->getContentData($this->argumentParser->parseUrl($locationPath)); $this->route = sprintf('/view/content/%s/full/1/%s', $contentId, $contentMainLocationId); - $this->expectedIsContainer = $isContainer; $this->locationPath = $locationPath; $this->subItemList->shouldHaveGridViewEnabled($this->hasGridViewEnabledByDefault()); } @@ -232,10 +229,6 @@ public function verifyIsLoaded(): void 'Breadcrumb shows invalid path' ); - if ($this->expectedIsContainer) { - $this->subItemList->verifyIsLoaded(); - } - Assert::assertEquals( $this->expectedContentName, $this->getHTMLPage()->find($this->getLocator('pageTitle'))->getText() @@ -266,6 +259,8 @@ public function editContent(?string $language) public function isChildElementPresent(array $parameters): bool { + $this->switchToTab('Sub-items'); + return $this->subItemList->isElementInTable($parameters); } @@ -331,7 +326,6 @@ private function getContentData(string $locationPath): array $content->getName(), $content->id, $content->contentInfo->getMainLocation()->id, - $content->getContentType()->isContainer, ]; }); } From 56c1086cec85014bb5bd31d5b5aa0503842a2944 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Tue, 21 Nov 2023 11:20:21 +0100 Subject: [PATCH 11/11] fix sonar code smell --- .../components/view-columns-toggler/view.columns.toggler.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js index 6cca050c9c..9e82c37585 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js +++ b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js @@ -83,7 +83,7 @@ export default class ViewColumnsTogglerComponent extends Component { const { columnsVisibility, toggleColumnVisibility } = this.props; const { buttonBottomDocumentOffset, panelHeight: measuredPanelHeight } = this.state; - const panelHeight = measuredPanelHeight ? measuredPanelHeight : DEFAULT_PANEL_HEIGHT; + const panelHeight = measuredPanelHeight ?? DEFAULT_PANEL_HEIGHT; const showAboveBtn = buttonBottomDocumentOffset < panelHeight; const className = createCssClassNames({ 'ibexa-popup-menu': true,