blob: b2bd76d68390d31bfe580594a26648fc8fa868bc [file] [log] [blame]
/**
* @module modules/query-dialog-sk
* @description <h2><code>query-dialog-sk</code></h2>
*
* A dialog that shows a query-sk element.
*
* Events:
*
* query-dialog-open: Emitted when the dialog is opened.
*
* query-dialog-close: Emitted when the dialog is closed.
*
* edit: Emitted when user clicks the "Show matches" button (and closes the
* dialog in the process). The "detail" field of the event contains
* the url-encoded selections.
*/
import { define } from 'elements-sk/define';
import { html } from 'lit-html';
import dialogPolyfill from 'dialog-polyfill';
import { $$ } from 'common-sk/modules/dom';
import { ParamSet, toParamSet } from 'common-sk/modules/query';
import { QuerySk, QuerySkQueryChangeEventDetail } from '../../../infra-sk/modules/query-sk/query-sk';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import '../../../infra-sk/modules/query-sk';
import '../../../infra-sk/modules/paramset-sk';
import 'elements-sk/styles/buttons';
export class QueryDialogSk extends ElementSk {
private static _template = (el: QueryDialogSk) => html`
<dialog>
<div class=content>
<query-sk @query-change=${el.queryChange}
hide_invert
hide_regex></query-sk>
<div class=selection-summary>
${el.isSelectionEmpty()
? html`<p class=empty-selection>No items selected.</p>`
: html`<paramset-sk .paramsets=${[el.currentSelection]}></paramset-sk>`}
</div>
</div>
<div class=buttons>
<button class="show-matches action" @click=${el.showMatches}>
${el._submitButtonLabel}
</button>
<button class=cancel @click=${el.close}>Cancel</button>
</div>
</dialog>`;
private dialog: HTMLDialogElement | null = null;
private querySk: QuerySk | null = null;
private _submitButtonLabel: string = 'Show Matches';
constructor() {
super(QueryDialogSk._template);
}
connectedCallback() {
super.connectedCallback();
this._render();
this.dialog = $$('dialog', this);
this.querySk = $$('query-sk', this);
dialogPolyfill.registerDialog(this.dialog!);
}
open(paramSet: ParamSet, selection: string) {
this.querySk!.paramset = paramSet;
this.querySk!.current_query = selection;
this._render();
this.dialog!.showModal();
this.dispatchEvent(new CustomEvent('query-dialog-open', { bubbles: true }));
}
/** Can be used to customize the label of the submit button. */
get submitButtonLabel() { return this._submitButtonLabel; }
set submitButtonLabel(label: string) {
// This is used by filter-dialog-sk to change the button label to "Submit".
this._submitButtonLabel = label;
this._render();
}
private queryChange(e: CustomEvent<QuerySkQueryChangeEventDetail>) {
// This updates the paramset-sk with the new selection from the query-sk component.
this._render();
}
private showMatches() {
this.dialog!.close();
this.dispatchEvent(new CustomEvent<string>('edit', {
bubbles: true,
detail: this.querySk!.current_query,
}));
this.dispatchEvent(new CustomEvent('query-dialog-close', { bubbles: true }));
}
private close() {
this.dialog!.close();
this.dispatchEvent(new CustomEvent('query-dialog-close', { bubbles: true }));
}
private get currentSelection() {
return this.querySk ? toParamSet(this.querySk.current_query) : {};
}
private isSelectionEmpty() {
return Object.keys(this.currentSelection).length === 0;
}
}
define('query-dialog-sk', QueryDialogSk);