From 02d0c4dcdba86cefc9bacd1c27669defe2b85a86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toma=C5=BE=20Jerman?= Date: Tue, 4 Apr 2023 12:50:50 +0200 Subject: [PATCH] Add resource translation UI for page layouts --- .../components/Admin/Page/PageTranslator.vue | 90 ++++++++++ .../Admin/PageLayout/PageLayoutTranslator.vue | 159 ++++++++++++++++++ .../compose/src/views/Admin/Pages/Builder.vue | 1 + .../compose/src/views/Admin/Pages/Edit.vue | 11 +- .../compose/src/views/Public/Pages/View.vue | 1 + lib/js/src/api-clients/compose.ts | 8 - .../resource-translator.yaml | 5 + server/compose/page_layout.cue | 2 +- server/compose/rest/page_layout.go | 7 +- server/compose/service/locale.go | 64 ++++++- server/compose/service/page.go | 8 - server/compose/service/page_layout.go | 28 ++- server/compose/types/locale.gen.go | 2 +- server/compose/types/page_layout.go | 25 ++- 14 files changed, 365 insertions(+), 46 deletions(-) create mode 100644 client/web/compose/src/components/Admin/PageLayout/PageLayoutTranslator.vue diff --git a/client/web/compose/src/components/Admin/Page/PageTranslator.vue b/client/web/compose/src/components/Admin/Page/PageTranslator.vue index 8ad11fd4e..bcc4d1957 100644 --- a/client/web/compose/src/components/Admin/Page/PageTranslator.vue +++ b/client/web/compose/src/components/Admin/Page/PageTranslator.vue @@ -31,6 +31,16 @@ export default { required: true, }, + pageLayouts: { + type: Array, + default: () => [], + }, + + pageLayout: { + type: compose.PageLayout, + required: false, + }, + block: { type: compose.PageBlock, required: false, @@ -79,6 +89,15 @@ export default { titles[this.resource] = this.$t('title', { handle: handle || pageID }) } + if (this.pageLayout) { + const { namespaceID, pageID, pageLayoutID, handle, meta } = this.pageLayout + titles[`compose:page-layout/${namespaceID}/${pageID}/${pageLayoutID}`] = this.$t('layout.title', { handle: handle || meta.title || pageLayoutID }) + } else { + this.pageLayouts.forEach(({ namespaceID, pageID, pageLayoutID, handle, meta }) => { + titles[`compose:page-layout/${namespaceID}/${pageID}/${pageLayoutID}`] = this.$t('layout.title', { handle: handle || meta.title || pageLayoutID }) + }) + } + return titles }, @@ -97,6 +116,10 @@ export default { set = set.filter(({ key }) => key.startsWith(`pageBlock.${this.block.blockID}.`)) } + if (this.pageLayout) { + set = set.filter(({ resource }) => resource.endsWith(`${pageID}`) || resource.endsWith(`/${this.pageLayout.pageLayoutID}`)) + } + return set }) } @@ -124,6 +147,8 @@ export default { return translations.find(t => t.key === key && t.lang === this.currentLanguage && t.resource === this.resource) } + const layoutResource = ({ pageLayoutID, pageID, namespaceID }) => `compose:page-layout/${namespaceID}/${pageID}/${pageLayoutID}` + let tr = find('title') if (tr !== undefined) { this.page.title = tr.message @@ -203,12 +228,71 @@ export default { return block } + const updatePageLayoutTranslations = pageLayout => { + if (pageLayout.pageLayoutID === NoID) return pageLayout + + const find = (key) => { + return translations.find(t => t.key === key && t.lang === this.currentLanguage && t.resource === layoutResource(pageLayout)) + } + + let tr = find('title') + if (tr !== undefined) { + pageLayout.meta.title = tr.message + } + + tr = find('description') + if (tr !== undefined) { + pageLayout.meta.description = tr.message + } + + // Refresh page buttons for record pages + if (pageLayout.moduleID && pageLayout.moduleID !== NoID) { + tr = find('config.buttons.new.label') + if (tr) { + pageLayout.config.buttons.new.label = tr.message + } + + tr = find('config.buttons.edit.label') + if (tr) { + pageLayout.config.buttons.edit.label = tr.message + } + + tr = find('config.buttons.submit.label') + if (tr) { + pageLayout.config.buttons.submit.label = tr.message + } + + tr = find('config.buttons.delete.label') + if (tr) { + pageLayout.config.buttons.delete.label = tr.message + } + + tr = find('config.buttons.clone.label') + if (tr) { + pageLayout.config.buttons.clone.label = tr.message + } + + tr = find('config.buttons.back.label') + if (tr) { + pageLayout.config.buttons.back.label = tr.message + } + } + + return pageLayout + } + if (this.block) { this.block = updateBlockTranslations(this.block) } else { this.page.blocks = this.page.blocks.map(block => updateBlockTranslations(block)) } + if (this.pageLayout) { + this.pageLayout = updatePageLayoutTranslations(this.pageLayout) + } else { + this.pageLayouts = this.pageLayouts.map(pageLayout => updatePageLayoutTranslations(pageLayout)) + } + return this.page }) .then(page => { @@ -217,6 +301,12 @@ export default { if (this.block) { this.$emit('update:block', this.block) } + + if (this.pageLayout) { + this.$emit('update:pageLayout', this.pageLayout) + } else { + this.$emit('update:pageLayouts', this.pageLayouts) + } }) } }, diff --git a/client/web/compose/src/components/Admin/PageLayout/PageLayoutTranslator.vue b/client/web/compose/src/components/Admin/PageLayout/PageLayoutTranslator.vue new file mode 100644 index 000000000..975984dcf --- /dev/null +++ b/client/web/compose/src/components/Admin/PageLayout/PageLayoutTranslator.vue @@ -0,0 +1,159 @@ + + + diff --git a/client/web/compose/src/views/Admin/Pages/Builder.vue b/client/web/compose/src/views/Admin/Pages/Builder.vue index ce520ad25..479e4d287 100644 --- a/client/web/compose/src/views/Admin/Pages/Builder.vue +++ b/client/web/compose/src/views/Admin/Pages/Builder.vue @@ -41,6 +41,7 @@ @@ -247,6 +248,7 @@ + @@ -664,6 +671,7 @@ import { mapGetters, mapActions } from 'vuex' import EditorToolbar from 'corteza-webapp-compose/src/components/Admin/EditorToolbar' import PageTranslator from 'corteza-webapp-compose/src/components/Admin/Page/PageTranslator' +import PageLayoutTranslator from 'corteza-webapp-compose/src/components/Admin/PageLayout/PageLayoutTranslator' import pages from 'corteza-webapp-compose/src/mixins/pages' import Uploader from 'corteza-webapp-compose/src/components/Public/Page/Attachment/Uploader' import Draggable from 'vuedraggable' @@ -681,6 +689,7 @@ export default { components: { EditorToolbar, PageTranslator, + PageLayoutTranslator, Uploader, Draggable, VueSelect, diff --git a/client/web/compose/src/views/Public/Pages/View.vue b/client/web/compose/src/views/Public/Pages/View.vue index 02942e7e0..b7659d637 100644 --- a/client/web/compose/src/views/Public/Pages/View.vue +++ b/client/web/compose/src/views/Public/Pages/View.vue @@ -29,6 +29,7 @@ v-if="trPage" data-test-id="button-page-translations" :page.sync="trPage" + :page-layout.sync="layout" style="margin-left:2px;" /> blockID { - blockID = b.BlockID - } - } - old = res.Clone() aProps.setNamespace(ns) diff --git a/server/compose/service/page_layout.go b/server/compose/service/page_layout.go index 0a7c556ad..2c7353dc5 100644 --- a/server/compose/service/page_layout.go +++ b/server/compose/service/page_layout.go @@ -334,14 +334,6 @@ func (svc pageLayout) updater(ctx context.Context, s store.Storer, ns *types.Nam return err } - // Get max blockID for later use - blockID := uint64(0) - for _, b := range res.Blocks { - if b.BlockID > blockID { - blockID = b.BlockID - } - } - old = res.Clone() aProps.setNamespace(ns) @@ -455,11 +447,11 @@ func (svc pageLayout) handleUpdate(ctx context.Context, upd *types.PageLayout) p } } - // Get max blockID for later use - blockID := uint64(0) - for _, b := range res.Blocks { - if b.BlockID > blockID { - blockID = b.BlockID + // Get max actionID for later use + actionID := uint64(0) + for _, a := range res.Config.Actions { + if a.ActionID > actionID { + actionID = a.ActionID } } @@ -494,11 +486,11 @@ func (svc pageLayout) handleUpdate(ctx context.Context, upd *types.PageLayout) p } // Assure blockIDs - for i, b := range res.Blocks { - if b.BlockID == 0 { - blockID++ - b.BlockID = blockID - res.Blocks[i] = b + for i, a := range res.Config.Actions { + if a.ActionID == 0 { + actionID++ + a.ActionID = actionID + res.Config.Actions[i] = a changes |= pageLayoutChanged } diff --git a/server/compose/types/locale.gen.go b/server/compose/types/locale.gen.go index 680dbb836..b95fd524b 100644 --- a/server/compose/types/locale.gen.go +++ b/server/compose/types/locale.gen.go @@ -62,7 +62,7 @@ var ( LocaleKeyPageLayoutConfigButtonsDeleteLabel = LocaleKey{Path: "config.buttons.delete.label"} LocaleKeyPageLayoutConfigButtonsCloneLabel = LocaleKey{Path: "config.buttons.clone.label"} LocaleKeyPageLayoutConfigButtonsBackLabel = LocaleKey{Path: "config.buttons.back.label"} - LocaleKeyPageLayoutConfigActionsActionIDLabel = LocaleKey{Path: "config.actions.{{actionID}}.label"} + LocaleKeyPageLayoutConfigActionsActionIDMetaLabel = LocaleKey{Path: "config.actions.{{actionID}}.meta.label"} ) // ResourceTranslation returns string representation of Locale resource for Chart by calling ChartResourceTranslation fn diff --git a/server/compose/types/page_layout.go b/server/compose/types/page_layout.go index db3dfd1d6..f8d325326 100644 --- a/server/compose/types/page_layout.go +++ b/server/compose/types/page_layout.go @@ -145,6 +145,25 @@ func (p *PageLayout) decodeTranslations(tt locale.ResourceTranslationIndex) { // @note not doing blocks because they are simply copied from the page's index + if aux = tt.FindByKey(LocaleKeyPageLayoutConfigButtonsNewLabel.Path); aux != nil { + p.Config.Buttons.New.Label = aux.Msg + } + if aux = tt.FindByKey(LocaleKeyPageLayoutConfigButtonsEditLabel.Path); aux != nil { + p.Config.Buttons.Edit.Label = aux.Msg + } + if aux = tt.FindByKey(LocaleKeyPageLayoutConfigButtonsSubmitLabel.Path); aux != nil { + p.Config.Buttons.Submit.Label = aux.Msg + } + if aux = tt.FindByKey(LocaleKeyPageLayoutConfigButtonsDeleteLabel.Path); aux != nil { + p.Config.Buttons.Delete.Label = aux.Msg + } + if aux = tt.FindByKey(LocaleKeyPageLayoutConfigButtonsCloneLabel.Path); aux != nil { + p.Config.Buttons.Clone.Label = aux.Msg + } + if aux = tt.FindByKey(LocaleKeyPageLayoutConfigButtonsBackLabel.Path); aux != nil { + p.Config.Buttons.Back.Label = aux.Msg + } + for i, action := range p.Config.Actions { actionID := locale.ContentID(action.ActionID, i) rpl := strings.NewReplacer( @@ -152,7 +171,7 @@ func (p *PageLayout) decodeTranslations(tt locale.ResourceTranslationIndex) { ) if aux = tt.FindByKey(rpl.Replace(LocaleKeyPagePageBlockBlockIDTitle.Path)); aux != nil { - p.Config.Actions[i].Label = aux.Msg + p.Config.Actions[i].Meta.Label = aux.Msg } } } @@ -171,8 +190,8 @@ func (p *PageLayout) encodeTranslations() (out locale.ResourceTranslationSet) { out = append(out, &locale.ResourceTranslation{ Resource: p.ResourceTranslation(), - Key: rpl.Replace(LocaleKeyPageLayoutConfigActionsActionIDLabel.Path), - Msg: action.Label, + Key: rpl.Replace(LocaleKeyPageLayoutConfigActionsActionIDMetaLabel.Path), + Msg: action.Meta.Label, }) }