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

Command line interface for rapid qg-minigame development

import*as i18n from"../../../core/i18n/i18n.js";import*as DataGrid from"../../../ui/components/data_grid/data_grid.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as IconButton from"../../../ui/components/icon_button/icon_button.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import interestGroupAccessGridStyles from"./interestGroupAccessGrid.css.js";const UIStrings={allInterestGroupStorageEvents:"All interest group storage events.",eventTime:"Event Time",eventType:"Access Type",groupOwner:"Owner",groupName:"Name",noEvents:"No interest group events recorded."},str_=i18n.i18n.registerUIStrings("panels/application/components/InterestGroupAccessGrid.ts",UIStrings);export const i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class InterestGroupAccessGrid extends HTMLElement{static litTagName=LitHtml.literal`devtools-interest-group-access-grid`;#e=this.attachShadow({mode:"open"});#t=[];connectedCallback(){this.#e.adoptedStyleSheets=[interestGroupAccessGridStyles],this.#i()}set data(e){this.#t=e,this.#i()}#i(){LitHtml.render(LitHtml.html`
      <div>
        <span class="heading">Interest Groups</span>
        <${IconButton.Icon.Icon.litTagName} class="info-icon" title=${i18nString(UIStrings.allInterestGroupStorageEvents)}
          .data=${{iconName:"info",color:"var(--icon-default)",width:"16px"}}>
        </${IconButton.Icon.Icon.litTagName}>
        ${this.#n()}
      </div>
    `,this.#e,{host:this})}#n(){if(0===this.#t.length)return LitHtml.html`<div class="no-events-message">${i18nString(UIStrings.noEvents)}</div>`;const e={columns:[{id:"event-time",title:i18nString(UIStrings.eventTime),widthWeighting:10,hideable:!1,visible:!0,sortable:!0},{id:"event-type",title:i18nString(UIStrings.eventType),widthWeighting:5,hideable:!1,visible:!0,sortable:!0},{id:"event-group-owner",title:i18nString(UIStrings.groupOwner),widthWeighting:10,hideable:!1,visible:!0,sortable:!0},{id:"event-group-name",title:i18nString(UIStrings.groupName),widthWeighting:10,hideable:!1,visible:!0,sortable:!0}],rows:this.#r(),initialSort:{columnId:"event-time",direction:"ASC"}};return LitHtml.html`
      <${DataGrid.DataGridController.DataGridController.litTagName} .data=${e}></${DataGrid.DataGridController.DataGridController.litTagName}>
    `}#r(){return this.#t.map((e=>({cells:[{columnId:"event-time",value:e.accessTime,renderer:this.#s.bind(this)},{columnId:"event-type",value:e.type},{columnId:"event-group-owner",value:e.ownerOrigin},{columnId:"event-group-name",value:e.name}]})))}#s(e){const t=new Date(1e3*e);return LitHtml.html`${t.toLocaleString()}`}}ComponentHelpers.CustomElements.defineComponent("devtools-interest-group-access-grid",InterestGroupAccessGrid);