From 3be625cc64a0483581db7e3370964d46edfc8ed2 Mon Sep 17 00:00:00 2001 From: Kevin Jump Date: Thu, 13 Feb 2025 16:57:50 +0000 Subject: [PATCH] regression - regroup the results on the report (#711) --- .../usync-assets/src/components/index.ts | 1 + .../components/usync-results-group-view.ts | 188 ++++++++++++++++++ .../src/components/usync-results-view.ts | 156 ++++++--------- .../usync-assets/src/lang/files/en-us.ts | 21 +- .../views/default/default.element.ts | 6 +- 5 files changed, 268 insertions(+), 104 deletions(-) create mode 100644 uSync.Backoffice.Management.Client/usync-assets/src/components/usync-results-group-view.ts diff --git a/uSync.Backoffice.Management.Client/usync-assets/src/components/index.ts b/uSync.Backoffice.Management.Client/usync-assets/src/components/index.ts index 4d8a03aa..300d0031 100644 --- a/uSync.Backoffice.Management.Client/usync-assets/src/components/index.ts +++ b/uSync.Backoffice.Management.Client/usync-assets/src/components/index.ts @@ -3,3 +3,4 @@ export * from './usync-action-box.js'; export * from './usync-progress-box.js'; export * from './usync-results-view.js'; export * from './usync-change-view.js'; +export * from './usync-results-group-view.js'; diff --git a/uSync.Backoffice.Management.Client/usync-assets/src/components/usync-results-group-view.ts b/uSync.Backoffice.Management.Client/usync-assets/src/components/usync-results-group-view.ts new file mode 100644 index 00000000..ab2bd7be --- /dev/null +++ b/uSync.Backoffice.Management.Client/usync-assets/src/components/usync-results-group-view.ts @@ -0,0 +1,188 @@ +import { + classMap, + css, + customElement, + html, + nothing, + property, + state, + when, +} from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { ChangeType, uSyncActionView } from '../api'; +import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; +import { USYNC_ERROR_MODAL } from '../dialogs'; + +@customElement('usync-result-group') +export class uSyncResultGroupView extends UmbLitElement { + @state() + expanded: boolean = false; + + @property({ type: Boolean }) + showAll: boolean = false; + + @property({ type: Array }) + results: Array = []; + + @property({ type: String }) + groupName: string = ''; + + async #showDetail(action: uSyncActionView) { + if (action.change == ChangeType.NO_CHANGE) return; + + this.dispatchEvent( + new CustomEvent('show-detail', { detail: action }), + ); + } + + getChangeCount() { + return this.results?.filter((r) => r.change !== ChangeType.NO_CHANGE).length; + } + + render() { + const changeCount = this.getChangeCount() ?? 0; + + if (changeCount === 0 && !this.showAll) return nothing; + + return html` + 0 })}> +
(this.expanded = !this.expanded)}> +

${this.localize.term('uSync_' + this.groupName)}

+

${changeCount}/${this.results?.length}

+
+ + ${when( + this.expanded == true, + () => html`${this.renderGroupedRows(this.results)}`, + )} + + + `; + } + + renderGroupedRows(results?: uSyncActionView[]) { + const rowsHtml = results?.map((result) => { + if (!this.showAll && result.change == ChangeType.NO_CHANGE) return nothing; + + const icon = + result.change == ChangeType.NO_CHANGE + ? 'icon-trafic' + : result.success + ? 'icon-check color-green' + : 'icon-wrong color-red'; + + return html` + + + + + this.#showDetail(result)} + .clipText=${true} + style="--uui-table-cell-padding: var(--uui-size-space-2);"> +
+
${result.name}
+
${this.renderMessage(result)}
+
+
+
${result.itemType}
+
${result.change}
+
+ + + `; + }); + + return html`${rowsHtml}`; + } + + renderMessage(result: uSyncActionView) { + return (result.change != ChangeType.FAIL && + result.change != ChangeType.IMPORT_FAIL) || + !result.message + ? html`${result.message}` + : html` this.#viewError(e, result)}>`; + } + + async #viewError(e: Event, result: uSyncActionView) { + e.stopPropagation(); + const modalContext = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); + const modal = modalContext?.open(this, USYNC_ERROR_MODAL, { + data: { + action: result, + }, + }); + + const data = await modal?.onSubmit().catch(() => { + return; + }); + + return data; + } + + static styles = css` + uui-box { + cursor: pointer; + --uui-box-default-padding: 1px 20px; + } + + .summary { + display: flex; + margin: 0 -20px; + padding: 0 20px; + justify-content: space-between; + } + + .expanded { + border-bottom: 1px solid var(--uui-color-border); + } + + .count { + color: var(--uui-color-border); + } + + .has_changes .count { + color: var(--uui-text); + } + + .changerow { + cursor: pointer; + } + + .icon-cell { + width: var(--uui-size-8); + } + + .item-name { + display: flex; + justify-content: space-between; + } + + .item-detail { + display: flex; + justify-content: space-between; + font-size: smaller; + color: var(--uui-color-disabled-contrast); + } + + uui-table-row:first-child uui-table-cell { + border-top-color: transparent; + } + `; +} + +export default uSyncResultGroupView; + +declare global { + interface HTMLElementTagNameMap { + 'usync-result-group': uSyncResultGroupView; + } +} diff --git a/uSync.Backoffice.Management.Client/usync-assets/src/components/usync-results-view.ts b/uSync.Backoffice.Management.Client/usync-assets/src/components/usync-results-view.ts index f577c316..5497c7c8 100644 --- a/uSync.Backoffice.Management.Client/usync-assets/src/components/usync-results-view.ts +++ b/uSync.Backoffice.Management.Client/usync-assets/src/components/usync-results-view.ts @@ -3,11 +3,10 @@ import { html, customElement, property, - nothing, css, state, } from '@umbraco-cms/backoffice/external/lit'; -import { ChangeType, USYNC_ERROR_MODAL, uSyncActionView } from '@jumoo/uSync'; +import { ChangeType, uSyncActionView } from '@jumoo/uSync'; import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; import { UMB_MODAL_MANAGER_CONTEXT, @@ -40,10 +39,12 @@ export class uSyncResultsView extends UmbElementMixin(LitElement) { this.showAll = !this.showAll; } - async #openDetailsView(result: uSyncActionView) { + async #showDetail(e: CustomEvent) { + const action = e.detail; + const detailsModal = this.#modalContext?.open(this, USYNC_DETAILS_MODAL, { data: { - item: result, + item: action, }, }); @@ -53,120 +54,76 @@ export class uSyncResultsView extends UmbElementMixin(LitElement) { if (!data) return; } - async #viewError(result: uSyncActionView) { - const modal = this.#modalContext?.open(this, USYNC_ERROR_MODAL, { - data: { - action: result, - }, - }); - - const data = await modal?.onSubmit().catch(() => { - return; - }); - - return data; + groupBy(arr: T[], fn: (item: T) => any) { + return arr.reduce>((prev, curr) => { + const groupKey = fn(curr); + const group = prev[groupKey] || []; + group.push(curr); + return { ...prev, [groupKey]: group }; + }, {}); } render() { - this.changeCount = 0; - - var rowsHtml = this.results?.map((result) => { - if (this.showAll == false && result.change == 'NoChange') { - return nothing; - } - - this.changeCount++; - - const classes = result.success ? 'success' : 'error'; - - return html` - - - ${result.change} - ${result.itemType} - ${result.name} - ${result.details.length > 0 - ? this.renderDetailsButton(result) - : this.renderMessage(result)} - - `; - }); + this.changeCount = + this.results?.filter((r) => r.change !== ChangeType.NO_CHANGE).length ?? 0; + + const groups = this.groupBy(this.results || [], (result) => result.itemType); + const groupsHtml = []; - return this.changeCount == 0 + for (const key in groups) { + const groupChanges = + groups[key].filter((r) => r.change !== ChangeType.NO_CHANGE).length ?? 0; + if (groupChanges === 0 && !this.showAll) continue; + + const groupHtml = html` `; + + groupsHtml.push(groupHtml); + } + + return this.changeCount == 0 && !this.showAll ? html` - ${this.renderResultBar(this.results?.length || 0)} + ${this.renderResultBar(this.results?.length || 0, this.changeCount)}
` - : html` - ${this.renderResultBar(this.results?.length || 0)} - - - - Success - - - Change - - - Type - - - Name - - - Detail - - - - ${rowsHtml} - - `; + : html`
+ ${this.renderResultBar(this.results?.length || 0, this.changeCount)} + ${groupsHtml} +
`; } - renderResultBar(count: number) { - return html`
+ renderResultBar(count: number, changes: number) { + const localKey = changes === 0 ? 'uSync_noChangeCount' : 'uSync_changeCount'; + + return html`
- ${count} items + ${changes}/${count} items
`; } - renderDetailsButton(result: uSyncActionView) { - return html` - this.#openDetailsView(result)}> - `; - } - - renderMessage(result: uSyncActionView) { - return (result.change != ChangeType.FAIL && - result.change != ChangeType.IMPORT_FAIL) || - !result.message - ? nothing - : html` this.#viewError(result)}>`; - } - static styles = css` :host { display: block; margin: var(--uui-size-space-4) 0; + display: flex; + flex-direction: column; + gap: var(--uui-size-space-4); + } + + #result-box { + display: flex; + flex-direction: column; + gap: var(--uui-size-space-4); } uui-table { @@ -177,7 +134,12 @@ export class uSyncResultsView extends UmbElementMixin(LitElement) { .result-header { display: flex; justify-content: space-between; - margin-top: calc(var(--uui-size-space-4) * -1); + padding: var(--uui-size-space-4); + } + + .result-header h3 { + margin: 0; + padding: 0; } .empty { diff --git a/uSync.Backoffice.Management.Client/usync-assets/src/lang/files/en-us.ts b/uSync.Backoffice.Management.Client/usync-assets/src/lang/files/en-us.ts index 6bb62593..34e8bac0 100644 --- a/uSync.Backoffice.Management.Client/usync-assets/src/lang/files/en-us.ts +++ b/uSync.Backoffice.Management.Client/usync-assets/src/lang/files/en-us.ts @@ -12,7 +12,7 @@ export default { ImportFile: 'Import from File', noChange: 'Nothing has changed', - showAll: 'Show all', + showAll: 'Show all items', detailHeadline: 'Detected Changes', detailHeader: 'Things that are different', @@ -27,7 +27,9 @@ export default { changeType: 'Type', changeName: 'Name', changeDetail: 'Detail', - changeCount: '{0} items', + changeHeading: 'Results', + changeCount: '{1}/{0} changes', + noChangeCount: '0/{0} changes', legacyInfo: `

uSync has found a legacy uSync folder at %0%.
Its likely that the content in it will need coverting in someway

`, @@ -60,6 +62,21 @@ export default { uploadIntro: 'Select a zip file containing uSync files that you want to upload', uploadSuccess: 'The files have been uploaded and extracted to the uSync folder', uploadError: 'There was an error uploading the files', + + ILanguage: 'Language', + IDictionaryItem: 'Dictionary Items', + IDataType: 'DataTypes', + ITemplate: 'Templates', + IContentType: 'Content Types', + IMediaType: 'Media Types', + IMemberType: 'Member Types', + IContent: 'Content', + IMedia: 'Media', + IDomain: 'Domains', + IWebhook: 'Webhooks', + IRelationType: 'Relation Types', + MediaFile: 'Media Files', + XElement: 'Other', }, uSyncSettings: { settings: 'uSync Settings', diff --git a/uSync.Backoffice.Management.Client/usync-assets/src/workspace/views/default/default.element.ts b/uSync.Backoffice.Management.Client/usync-assets/src/workspace/views/default/default.element.ts index 5984708f..bf906887 100644 --- a/uSync.Backoffice.Management.Client/usync-assets/src/workspace/views/default/default.element.ts +++ b/uSync.Backoffice.Management.Client/usync-assets/src/workspace/views/default/default.element.ts @@ -192,11 +192,7 @@ export class uSyncDefaultViewElement extends UmbLitElement { #renderReport() { if (!this._completed) return nothing; - return html` - - - - `; + return html``; } static styles = [