From 1754cb64ceeb45319aed004e9c9bed1cabdd8c2a Mon Sep 17 00:00:00 2001 From: Dennis Labordus Date: Thu, 24 Nov 2022 09:31:50 +0100 Subject: [PATCH] Converted compare dialog to new component + fixed issue in new component Signed-off-by: Dennis Labordus --- src/compas-editors/CompasVersions.ts | 150 +++++++++--------- src/plain-compare-list.ts | 29 ++-- .../__snapshots__/CompasVersions.test.snap.js | 12 ++ .../plain-compare-list.test.snap.js | 30 +--- test/unit/plain-compare-list.test.ts | 54 ++++--- 5 files changed, 139 insertions(+), 136 deletions(-) diff --git a/src/compas-editors/CompasVersions.ts b/src/compas-editors/CompasVersions.ts index 0f19cd8bf..2fe1fcb54 100644 --- a/src/compas-editors/CompasVersions.ts +++ b/src/compas-editors/CompasVersions.ts @@ -4,10 +4,13 @@ import { LitElement, property, PropertyValues, + query, + state, TemplateResult, } from 'lit-element'; import { get, translate } from 'lit-translate'; +import '@material/mwc-dialog'; import '@material/mwc-fab'; import '@material/mwc-icon'; import '@material/mwc-icon-button'; @@ -15,15 +18,17 @@ import '@material/mwc-list'; import '@material/mwc-list/mwc-list-item'; import '@material/mwc-list/mwc-check-list-item'; +import { Dialog } from '@material/mwc-dialog'; import { MultiSelectedEvent } from '@material/mwc-list/mwc-list-foundation'; +import '../plain-compare-list.js'; + import { newLogEvent, newOpenDocEvent, newWizardEvent, Wizard, } from '../foundation.js'; -import { renderDiff } from '../foundation/compare.js'; import { CompasSclDataService, @@ -39,41 +44,6 @@ import { addVersionToCompasWizard } from '../compas/CompasUploadVersion.js'; import { getElementByName, styles } from './foundation.js'; import { wizards } from '../wizards/wizard-library.js'; -interface CompareOptions { - title: string; -} - -function compareWizard( - plugin: Element, - oldElement: Element, - newElement: Element, - options: CompareOptions -): Wizard { - function renderDialogContent(): TemplateResult { - return html` ${renderDiff(newElement, oldElement) ?? - html`${translate('compas.compare.noDiff')}`}`; - } - - function close() { - return function () { - plugin.dispatchEvent(newWizardEvent()); - return []; - }; - } - - return [ - { - title: options.title, - secondary: { - icon: '', - label: get('close'), - action: close(), - }, - content: [renderDialogContent()], - }, - ]; -} - /** An editor [[`plugin`]] for selecting the `Substation` section. */ export default class CompasVersionsPlugin extends LitElement { @property() @@ -279,25 +249,33 @@ export default class CompasVersionsPlugin extends LitElement { return selectedVersions; } + @state() + private compareDialogTitle: string | undefined; + @state() + private compareLeftElement: Element | undefined; + @state() + private compareLeftTitle: string | undefined; + @state() + private compareRightElement: Element | undefined; + @state() + private compareRightTitle: string | undefined; + @query('mwc-dialog#compareDialog') + private compareDialog!: Dialog; + async compareCurrentVersion(): Promise { const selectedVersions = this.getSelectedVersions(); if (selectedVersions.length === 1) { - const oldVersion = selectedVersions[0]; - - const oldScl = await this.getVersion(oldVersion); - const newScl = this.doc.documentElement; - - if (oldScl && newScl) { - this.dispatchEvent( - newWizardEvent( - compareWizard(this, oldScl, newScl, { - title: get('compas.compare.titleCurrent', { - oldVersion: oldVersion, - }), - }) - ) - ); - } + this.compareLeftTitle = selectedVersions[0]; + this.compareLeftElement = + (await this.getVersion(this.compareLeftTitle)) ?? undefined; + this.compareRightTitle = 'Latest'; + this.compareRightElement = this.doc.documentElement; + + this.compareDialogTitle = get('compas.compare.titleCurrent', { + oldVersion: this.compareLeftTitle, + }); + + this.compareDialog.open = true; } else { this.dispatchEvent( newWizardEvent( @@ -316,24 +294,20 @@ export default class CompasVersionsPlugin extends LitElement { const selectedVersions = this.getSelectedVersions(); if (selectedVersions.length === 2) { const sortedVersions = selectedVersions.slice().sort(compareVersions); - const oldVersion = sortedVersions[0]; - const newVersion = sortedVersions[1]; - - const oldScl = await this.getVersion(oldVersion); - const newScl = await this.getVersion(newVersion); - - if (oldScl && newScl) { - this.dispatchEvent( - newWizardEvent( - compareWizard(this, oldScl, newScl, { - title: get('compas.compare.title', { - oldVersion: oldVersion, - newVersion: newVersion, - }), - }) - ) - ); - } + + this.compareLeftTitle = sortedVersions[0]; + this.compareLeftElement = + (await this.getVersion(this.compareLeftTitle)) ?? undefined; + this.compareRightTitle = sortedVersions[1]; + this.compareRightElement = + (await this.getVersion(this.compareRightTitle)) ?? undefined; + + this.compareDialogTitle = get('compas.compare.title', { + oldVersion: this.compareLeftTitle, + newVersion: this.compareRightTitle, + }); + + this.compareDialog.open = true; } else { this.dispatchEvent( newWizardEvent( @@ -348,6 +322,35 @@ export default class CompasVersionsPlugin extends LitElement { } } + private onClosedCompareDialog(): void { + this.compareDialogTitle = undefined; + this.compareLeftElement = undefined; + this.compareRightElement = undefined; + } + + private renderCompareDialog(): TemplateResult { + return html` + ${this.compareLeftElement && this.compareRightElement + ? html`` + : html``} + + `; + } + private showMessageWizard(title: string, message: string): Wizard { return [ { @@ -540,12 +543,17 @@ export default class CompasVersionsPlugin extends LitElement { label="${translate('compas.versions.compareButton')}" @click=${this.compareVersions} > - `; + + ${this.renderCompareDialog()}`; } static styles = css` ${styles} + mwc-dialog { + --mdc-dialog-min-width: 64vw; + } + mwc-list-item#no-scl-versions > span { color: var(--base1); } diff --git a/src/plain-compare-list.ts b/src/plain-compare-list.ts index 78ffb4e71..750a5f2b8 100644 --- a/src/plain-compare-list.ts +++ b/src/plain-compare-list.ts @@ -60,10 +60,7 @@ export class PlainCompareList extends LitElement { render(): TemplateResult { return html` -
-
- ${this.renderFilterCheckbox()} -
+ ${this.renderFilterCheckbox()}

${this.leftHandTitle}

@@ -83,8 +80,8 @@ export class PlainCompareList extends LitElement { ${this.leftHandObject && this.rightHandObject ? html` ${renderDiff( - this.leftHandObject, this.rightHandObject, + this.leftHandObject, this.filterMutables ? this.filterToIgnore : {} )} ` @@ -93,13 +90,21 @@ export class PlainCompareList extends LitElement { } protected renderFilterCheckbox(): TemplateResult { - return html` - (this.filterMutables = !this.filterMutables)} - > - - `; + if (this.filterToIgnore) { + return html` +
+
+ + (this.filterMutables = !this.filterMutables)} + > + + +
+ `; + } + return html``; } static styles = css` diff --git a/test/integration/compas-editors/__snapshots__/CompasVersions.test.snap.js b/test/integration/compas-editors/__snapshots__/CompasVersions.test.snap.js index 8e152ec54..0fce0274f 100644 --- a/test/integration/compas-editors/__snapshots__/CompasVersions.test.snap.js +++ b/test/integration/compas-editors/__snapshots__/CompasVersions.test.snap.js @@ -157,6 +157,18 @@ snapshots["compas-versions-plugin items-in-list looks like the latest snapshot"] >
+ + + + `; diff --git a/test/unit/__snapshots__/plain-compare-list.test.snap.js b/test/unit/__snapshots__/plain-compare-list.test.snap.js index afcc997b0..7445726ad 100644 --- a/test/unit/__snapshots__/plain-compare-list.test.snap.js +++ b/test/unit/__snapshots__/plain-compare-list.test.snap.js @@ -2,15 +2,7 @@ export const snapshots = {}; snapshots["Plain Compare List Empty list looks like the latest snapshot"] = -`
-
-
- - - - -
-
+`

@@ -24,15 +16,7 @@ snapshots["Plain Compare List Empty list looks like the latest snapshot"] = /* end snapshot Plain Compare List Empty list looks like the latest snapshot */ snapshots["Plain Compare List Basic List looks like the latest snapshot"] = -`
-
-
- - - - -
-
+`

Project doc @@ -48,15 +32,7 @@ snapshots["Plain Compare List Basic List looks like the latest snapshot"] = /* end snapshot Plain Compare List Basic List looks like the latest snapshot */ snapshots["Plain Compare List Basic List Has a subtitlte, so looks like the latest snapshot"] = -`
-
-
- - - - -
-
+`

Project doc diff --git a/test/unit/plain-compare-list.test.ts b/test/unit/plain-compare-list.test.ts index 7f8652da4..e959bbc83 100644 --- a/test/unit/plain-compare-list.test.ts +++ b/test/unit/plain-compare-list.test.ts @@ -1,57 +1,59 @@ import { expect, fixture, html } from '@open-wc/testing'; -import '../../src/plain-compare-list'; +import '../../src/plain-compare-list.js'; + import { PlainCompareList } from '../../src/plain-compare-list.js'; describe('Plain Compare List', () => { let element: PlainCompareList; beforeEach(async () => { - element = await fixture( - html`` - ); + element = await fixture(html``); await element.updateComplete; }); + describe('Empty list', () => { it('looks like the latest snapshot', async () => { await expect(element).shadowDom.to.equalSnapshot(); }); }); + describe('Basic List', () => { let doc: XMLDocument; let template: XMLDocument; beforeEach(async () => { - doc = await fetch('/test/testfiles/menu/compare-ied-changed.scd') - .then(response => response.text()) - .then(str => new DOMParser().parseFromString(str, 'application/xml')); - template = await fetch('/test/testfiles/menu/compare-ied-original.scd') - .then(response => response.text()) - .then(str => new DOMParser().parseFromString(str, 'application/xml')); - - element.leftHandObject = - doc.querySelector('IED[name="FieldC_QA1_QB1_QB2_QC9"]')!; - element.rightHandObject = - template.querySelector('IED[name="FieldC_QA1_QB1_QB2_QC9"]')!; - - element.leftHandTitle = 'Project doc'; - element.rightHandTitle = 'Template doc'; - - await element.requestUpdate(); + doc = await fetch('/test/testfiles/menu/compare-ied-changed.scd') + .then(response => response.text()) + .then(str => new DOMParser().parseFromString(str, 'application/xml')); + template = await fetch('/test/testfiles/menu/compare-ied-original.scd') + .then(response => response.text()) + .then(str => new DOMParser().parseFromString(str, 'application/xml')); + + element.leftHandObject = doc.querySelector( + 'IED[name="FieldC_QA1_QB1_QB2_QC9"]' + )!; + element.rightHandObject = template.querySelector( + 'IED[name="FieldC_QA1_QB1_QB2_QC9"]' + )!; + + element.leftHandTitle = 'Project doc'; + element.rightHandTitle = 'Template doc'; + + await element.requestUpdate(); }); it('looks like the latest snapshot', async () => { - await expect(element).shadowDom.to.equalSnapshot(); + await expect(element).shadowDom.to.equalSnapshot(); }); it('Has a subtitlte, so looks like the latest snapshot', async () => { - element.leftHandSubtitle = 'subtitle'; - element.rightHandSubtitle = 'right subtitle'; + element.leftHandSubtitle = 'subtitle'; + element.rightHandSubtitle = 'right subtitle'; - await element.requestUpdate(); + await element.requestUpdate(); - await expect(element).shadowDom.to.equalSnapshot(); + await expect(element).shadowDom.to.equalSnapshot(); }); }); - });