@yuebai008/cli/dist/cli-server/client/front_end/panels/application/DatabaseQueryView.js

Command line interface for rapid qg-minigame development

import*as Common from"../../core/common/common.js";import*as i18n from"../../core/i18n/i18n.js";import*as Platform from"../../core/platform/platform.js";import*as IconButton from"../../ui/components/icon_button/icon_button.js";import*as DataGrid from"../../ui/legacy/components/data_grid/data_grid.js";import*as UI from"../../ui/legacy/legacy.js";const UIStrings={databaseQuery:"Database Query",queryS:"Query: {PH1}"},str_=i18n.i18n.registerUIStrings("panels/application/DatabaseQueryView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class DatabaseQueryView extends(Common.ObjectWrapper.eventMixin(UI.Widget.VBox)){database;queryWrapper;promptContainer;promptElement;prompt;proxyElement;queryResults;virtualSelectedIndex;lastSelectedElement;selectionTimeout;constructor(e){super(),this.database=e,this.element.classList.add("storage-view","query","monospace"),this.element.addEventListener("selectstart",this.selectStart.bind(this),!1),this.queryWrapper=this.element.createChild("div","database-query-group-messages"),this.queryWrapper.addEventListener("focusin",this.onFocusIn.bind(this)),this.queryWrapper.addEventListener("focusout",this.onFocusOut.bind(this)),this.queryWrapper.addEventListener("keydown",this.onKeyDown.bind(this)),this.queryWrapper.tabIndex=-1,this.promptContainer=this.element.createChild("div","database-query-prompt-container");const t=new IconButton.Icon.Icon;t.data={iconName:"chevron-right",color:"var(--icon-action)",width:"16px",height:"16px"},t.classList.add("prompt-icon"),this.promptContainer.appendChild(t),this.promptElement=this.promptContainer.createChild("div"),this.promptElement.className="database-query-prompt",this.promptElement.addEventListener("keydown",this.promptKeyDown.bind(this)),this.prompt=new UI.TextPrompt.TextPrompt,this.prompt.initialize(this.completions.bind(this)," "),this.proxyElement=this.prompt.attach(this.promptElement),this.element.addEventListener("click",this.messagesClicked.bind(this),!0),this.queryResults=[],this.virtualSelectedIndex=-1,this.selectionTimeout=0}messagesClicked(){this.prompt.focus(),this.prompt.isCaretInsidePrompt()||this.element.hasSelection()||this.prompt.moveCaretToEndOfPrompt()}onKeyDown(e){if(!UI.UIUtils.isEditing()&&this.queryResults.length&&!e.shiftKey){switch(e.key){case"ArrowUp":if(!(this.virtualSelectedIndex>0))return;this.virtualSelectedIndex--;break;case"ArrowDown":if(!(this.virtualSelectedIndex<this.queryResults.length-1))return;this.virtualSelectedIndex++;break;case"Home":this.virtualSelectedIndex=0;break;case"End":this.virtualSelectedIndex=this.queryResults.length-1;break;default:return}e.consume(!0),this.updateFocusedItem()}}onFocusIn(e){-1===this.virtualSelectedIndex&&this.isOutsideViewport(e.relatedTarget)&&e.target===this.queryWrapper&&this.queryResults.length&&(this.virtualSelectedIndex=this.queryResults.length-1),this.updateFocusedItem()}onFocusOut(e){this.isOutsideViewport(e.relatedTarget)&&(this.virtualSelectedIndex=-1),this.updateFocusedItem(),this.queryWrapper.scrollTop=1e7}isOutsideViewport(e){return null!==e&&!e.isSelfOrDescendant(this.queryWrapper)}updateFocusedItem(){let e=this.virtualSelectedIndex;this.queryResults.length&&this.virtualSelectedIndex<0&&(e=this.queryResults.length-1);const t=e>=0?this.queryResults[e]:null,s=this.lastSelectedElement!==t,i=this.queryWrapper===Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument);t&&(s||i)&&this.element.hasFocus()&&(t.hasFocus()||t.focus()),this.queryResults.length&&!this.queryWrapper.hasFocus()?this.queryWrapper.tabIndex=0:this.queryWrapper.tabIndex=-1,this.lastSelectedElement=t}async completions(e,t,s){if(!t)return[];t=t.toLowerCase();return(await this.database.tableNames()).map((e=>e+" ")).concat(SQL_BUILT_INS).filter((e=>e.toLowerCase().startsWith(t))).map((e=>({text:e})))}selectStart(e){this.selectionTimeout&&clearTimeout(this.selectionTimeout),this.prompt.clearAutocomplete(),this.selectionTimeout=window.setTimeout(function(){this.selectionTimeout=0,this.prompt.isCaretInsidePrompt()||this.element.hasSelection()||this.prompt.moveCaretToEndOfPrompt(),this.prompt.autoCompleteSoon()}.bind(this),100)}promptKeyDown(e){"Enter"!==e.key||this.enterKeyPressed(e)}async enterKeyPressed(e){e.consume(!0);const t=this.prompt.textWithCurrentSuggestion();if(this.prompt.clearAutocomplete(),t.length){this.prompt.setEnabled(!1);try{const e=await new Promise(((e,s)=>{this.database.executeSql(t,((t,s)=>e({columnNames:t,values:s})),(e=>s(e)))}));this.queryFinished(t,e.columnNames,e.values)}catch(e){this.appendErrorQueryResult(t,e)}this.prompt.setEnabled(!0),this.prompt.setText(""),this.prompt.focus()}}queryFinished(e,t,s){const i=DataGrid.SortableDataGrid.SortableDataGrid.create(t,s,i18nString(UIStrings.databaseQuery)),r=e.trim();let n=null;i&&(i.setStriped(!0),i.renderInline(),i.autoSizeColumns(5),n=i.asWidget(),i.setFocusable(!1)),this.appendViewQueryResult(r,n),(r.match(/^create /i)||r.match(/^drop table /i))&&this.dispatchEventToListeners(Events.SchemaUpdated,this.database)}appendViewQueryResult(e,t){const s=this.appendQueryResult(e);t?t.show(s):s.remove(),this.scrollResultIntoView()}appendErrorQueryResult(e,t){const s=this.appendQueryResult(e);s.classList.add("error");const i=new IconButton.Icon.Icon;i.data={iconName:"cross-circle-filled",color:"var(--icon-error)",width:"14px",height:"14px"},i.classList.add("prompt-icon"),s.appendChild(i),UI.UIUtils.createTextChild(s,t),this.scrollResultIntoView()}scrollResultIntoView(){this.queryResults[this.queryResults.length-1].scrollIntoView(!1),this.promptElement.scrollIntoView(!1)}appendQueryResult(e){const t=document.createElement("div");t.className="database-user-query",t.tabIndex=-1,UI.ARIAUtils.setLabel(t,i18nString(UIStrings.queryS,{PH1:e})),this.queryResults.push(t),this.updateFocusedItem();const s=new IconButton.Icon.Icon;s.data={iconName:"chevron-right",color:"var(--icon-default)",width:"16px",height:"16px"},s.classList.add("prompt-icon"),t.appendChild(s);const i=document.createElement("span");i.className="database-query-text",i.textContent=e,t.appendChild(i);const r=document.createElement("div");return r.className="database-query-result",t.appendChild(r),this.queryWrapper.appendChild(t),r}}export var Events;!function(e){e.SchemaUpdated="SchemaUpdated"}(Events||(Events={}));export const SQL_BUILT_INS=["SELECT ","FROM ","WHERE ","LIMIT ","DELETE FROM ","CREATE ","DROP ","TABLE ","INDEX ","UPDATE ","INSERT INTO ","VALUES ("];