@api-client/ui 0.0.17 → 0.1.0

package/src/apps/quick-api/fragments/SchemaNavigationFragment.ts

@@ -1,292 +0,0 @@
-import { CSSResult, type TemplateResult, html } from 'lit'
-import { createRef, ref } from 'lit/directives/ref.js'
-import { DomainNamespaceKind, DomainModelKind, DataDomain, DomainNamespace } from '@api-client/core/browser.js'
-import { Fragment } from '../../../core/Fragment.js'
-import type { MdMenu } from '@material/web/menu/menu.js'
-import type { MdMenuItem } from '@material/web/menu/menu-item.js'
-import type { KeydownReason, Reason } from '@material/web/menu/internal/controllers/shared.js'
-import { schemaEntity, schemaModel, schemaNamespace } from '../../../md/icons/Icons.js'
-import { adaptStatic } from '../../../decorators/styles.js'
-import styles from './SchemaNavigation.styles.js'
-import type { ISelectDetail } from '../../../elements/navigation/internals/AppNavigationElement.js'
-import { type SchemaScreenViewModel } from '../SchemaScreenViewModel.js'
-import { IntentFlags, IntentResult, type Intent } from '../../../core/ActivityManager.js'
-import { DATA_DOMAIN_BROWSE } from '../Intents.js'
-import type { BrowseDataDomainIntent, BrowseDataDomainResult } from '../../activities/BrowseDataDomainActivity.js'
-
-import '@material/web/icon/icon.js'
-import '@material/web/menu/menu.js'
-import '@material/web/menu/menu-item.js'
-import '@material/web/divider/divider.js'
-import '../../../elements/modeling/domain-navigation.js'
-import '../../../md/button/ui-filled-button.js'
-
-export default class SchemaNavigationFragment extends Fragment {
-  @adaptStatic
-  static get styles(): CSSResult[] {
-    return [styles]
-  }
-
-  viewModel?: SchemaScreenViewModel
-
-  menuRef = createRef<MdMenu>()
-
-  /**
-   * An entity can only be created if the current selection is a data model.
-   */
-  get allowsEntityCreate(): boolean {
-    const { viewModel } = this
-    if (!viewModel) {
-      return false
-    }
-    const { selection } = viewModel
-    return selection.kind === DomainModelKind
-  }
-
-  override async onCreate(data?: unknown): Promise<void> {
-    await super.onCreate(data)
-    if (data && typeof data === 'object') {
-      this.viewModel = data as SchemaScreenViewModel
-    }
-  }
-
-  override async onActivityResult(requestCode: number, resultCode: IntentResult, intent: Intent): Promise<void> {
-    await super.onActivityResult(requestCode, resultCode, intent)
-    if (resultCode === IntentResult.RESULT_CANCELED) {
-      return
-    }
-    if (intent.action === DATA_DOMAIN_BROWSE) {
-      this.handleReferenceResult(intent.data as BrowseDataDomainResult)
-    }
-  }
-
-  handleReferenceResult(data: BrowseDataDomainResult) {
-    if (data.result === 'canceled') {
-      return
-    }
-    throw new Error('Method not implemented.')
-  }
-
-  handleAddMenuClose(e: CustomEvent<{ initiator: MdMenuItem; reason: Reason; itemPath: MdMenuItem[] }>): void {
-    const { reason, initiator } = e.detail
-    if (reason.kind === 'keydown') {
-      const typedReason = reason as KeydownReason
-      if (typedReason.key === 'Escape') {
-        return
-      }
-    }
-    const { action = '' } = initiator.dataset
-    if (action === 'entity') {
-      this.addNewEntity()
-    } else if (action === 'data') {
-      this.addNewDataModel()
-    } else if (action === 'namespace') {
-      this.addNewDataNamespace()
-    } else if (action === 'reference') {
-      this.addNewReference()
-    }
-  }
-
-  addNewEntity(): void {
-    const { viewModel } = this
-    if (!viewModel) {
-      return
-    }
-    const { model, selection } = viewModel
-    if (!model || !model.value) {
-      return
-    }
-    if (selection.kind !== DomainModelKind) {
-      return
-    }
-    const dm = model.value.findModel(selection.key)
-    if (!dm) {
-      return
-    }
-    const created = dm.addEntity()
-    model.handleChange()
-    viewModel.selection = {
-      key: created.key,
-      kind: created.kind,
-    }
-    this.ensureTreeVisibility(created.key)
-    this.requestUpdate()
-  }
-
-  addNewDataModel(): void {
-    const { viewModel } = this
-    if (!viewModel) {
-      return
-    }
-    const { model, selection } = viewModel
-    if (!model || !model.value) {
-      return
-    }
-    let root: DataDomain | DomainNamespace | undefined = model.value
-    if (selection.kind === DomainNamespaceKind) {
-      root = model.value.findNamespace(selection.key)
-    }
-    if (!root) {
-      return
-    }
-    const created = root.addModel()
-    model.handleChange()
-    viewModel.selection = {
-      key: created.key,
-      kind: created.kind,
-    }
-    this.ensureTreeVisibility(created.key)
-    this.requestUpdate()
-  }
-
-  addNewDataNamespace(): void {
-    const { viewModel } = this
-    if (!viewModel) {
-      return
-    }
-    const { model, selection } = viewModel
-    if (!model || !model.value) {
-      return
-    }
-    let root: DataDomain | DomainNamespace | undefined = model.value
-    if (selection.kind === DomainNamespaceKind) {
-      root = model.value.findNamespace(selection.key)
-    }
-    if (!root) {
-      return
-    }
-    const created = root.addNamespace()
-    model.handleChange()
-    viewModel.selection = {
-      key: created.key,
-      kind: created.kind,
-    }
-    this.ensureTreeVisibility(created.key)
-    this.requestUpdate()
-  }
-
-  addNewReference(): void {
-    const intent: Intent = {
-      action: DATA_DOMAIN_BROWSE,
-      flags: IntentFlags.Modal | IntentFlags.ForResult,
-      data: {
-        reason: 'pick',
-        allowed: ['data-namespace'],
-        withExternal: true,
-        withRecent: true,
-      } as BrowseDataDomainIntent,
-    }
-    this.startActivityForResult(intent)
-  }
-
-  async ensureTreeVisibility(key: string): Promise<void> {
-    const nav = document.querySelector('domain-navigation')
-    if (!nav) {
-      return
-    }
-    nav.selected = key
-    await nav.updateComplete
-    nav.ensureTreeVisibility(key)
-  }
-
-  handleSelect(e: CustomEvent<ISelectDetail>): void {
-    const { viewModel } = this
-    if (!viewModel) {
-      return
-    }
-    viewModel.selection = e.detail
-    this.requestUpdate()
-  }
-
-  handleDeselect(): void {
-    const { viewModel } = this
-    if (!viewModel) {
-      return
-    }
-    viewModel.selection = {
-      key: '',
-      kind: '',
-    }
-    this.requestUpdate()
-  }
-
-  handleUiChange(): void {
-    const { viewModel } = this
-    if (!viewModel || !viewModel.model || !viewModel.model) {
-      return
-    }
-    viewModel.model.handleChange()
-  }
-
-  override render(): TemplateResult {
-    const { viewModel } = this
-    if (!viewModel || !viewModel.model || !viewModel.model.value) {
-      return html`<p>Application not ready...</p>`
-    }
-    return html`${this.renderAddMenu()}${this.renderNavigation(viewModel.model.value, viewModel.selection)}`
-  }
-
-  private renderNavigation(media: DataDomain, selection: ISelectDetail): TemplateResult {
-    return html`<domain-navigation
-      class="nav"
-      .root="${media}"
-      .selected="${selection.key}"
-      @select="${this.handleSelect}"
-      @deselect="${this.handleDeselect}"
-      @change="${this.handleUiChange}"
-    ></domain-navigation>`
-  }
-
-  private renderAddMenu(): TemplateResult {
-    return html`
-      <div class="schema-add-menu">
-        <ui-filled-button id="schema-new-anchor" trailingicon @click=${() => this.menuRef.value?.show()}>
-          Add
-          <md-icon slot="icon">arrow_drop_down</md-icon>
-        </ui-filled-button>
-        <md-menu
-          positioning="popover"
-          id="new-file-menu"
-          anchor="schema-new-anchor"
-          anchor-corner="end-start"
-          y-offset="8"
-          @close-menu="${this.handleAddMenuClose}"
-          ${ref(this.menuRef)}
-        >
-          ${this.renderEntityAddMenu()}
-          <md-menu-item data-action="data">
-            <div slot="headline">Data model</div>
-            <div slot="supporting-text">Create structure with sub-models</div>
-            <md-icon slot="start">${schemaModel}</md-icon>
-          </md-menu-item>
-          <md-menu-item data-action="namespace">
-            <div slot="headline">Namespace</div>
-            <div slot="supporting-text">A hierarchical structure element</div>
-            <md-icon slot="start">${schemaNamespace}</md-icon>
-          </md-menu-item>
-          <md-menu-item data-action="reference">
-            <div slot="headline">Add a reference</div>
-            <div slot="supporting-text">Make data actionable</div>
-            <md-icon slot="start">add_link</md-icon>
-          </md-menu-item>
-          <md-divider></md-divider>
-          <md-menu-item data-action="import">
-            <div slot="headline">Import schema</div>
-            <div slot="supporting-text">CSV, JSON schema, XLS</div>
-            <md-icon slot="start">download_2</md-icon>
-          </md-menu-item>
-        </md-menu>
-      </div>
-    `
-  }
-
-  private renderEntityAddMenu(): TemplateResult {
-    const { allowsEntityCreate } = this
-    const help = allowsEntityCreate ? 'A schema building block' : 'Select a data model to create an entity'
-    return html`<md-menu-item data-action="entity" ?disabled="${!allowsEntityCreate}">
-      <div slot="headline">Entity</div>
-      <div slot="supporting-text">${help}</div>
-      <md-icon slot="start">${schemaEntity}</md-icon>
-    </md-menu-item>`
-  }
-}

package/src/apps/quick-api/fragments/TrashFragment.ts

@@ -1,174 +0,0 @@
-import { type TemplateResult, html, type CSSResult } from 'lit'
-import type { IUser, TrashEntry } from '@api-client/core/browser.js'
-import { Fragment } from '../../../core/Fragment.js'
-import services from '../../api_service.js'
-import TrashModel from '../../../data/TrashModel.js'
-import state from '../../../decorators/state.js'
-import layout from '../../../styles/m3/layout.module.js'
-import styles from '../filesystem/Files.styles.js'
-import { adaptStatic } from '../../../decorators/styles.js'
-
-import '@material/web/icon/icon.js'
-import '@material/web/iconbutton/icon-button.js'
-import '../../../elements/data-table/trash-table.js'
-
-export default class TrashFragment extends Fragment {
-  @adaptStatic
-  static get styles(): CSSResult[] {
-    return [styles, layout]
-  }
-
-  #oid?: string
-
-  model!: TrashModel
-
-  /**
-   * The current user
-   */
-  user!: IUser
-
-  /**
-   * The current organization id.
-   */
-  get oid(): string {
-    const oid = this.#oid
-    if (!oid) {
-      throw new Error(`OrganizationID is not set on the filesystem fragment.`)
-    }
-    return oid
-  }
-
-  @state() accessor selectedItems: string[] | undefined
-
-  override async onCreate(data?: unknown): Promise<void> {
-    super.onCreate(data)
-    const sdk = await services.get('sdk')
-    const org = await services.get('org')
-    const userService = await services.get('user')
-    const current = await org.currentOrganization()
-    if (!current) {
-      throw new Error(`No current organization.`)
-    }
-    const user = await userService.getUser()
-    if (!user) {
-      throw new Error(`No current user.`)
-    }
-    this.user = user
-    this.#oid = current.key
-    this.model = new TrashModel(current.key, sdk)
-  }
-
-  override onResume(): void | Promise<void> {
-    super.onResume()
-    this.refresh()
-  }
-
-  async refresh(): Promise<void> {
-    this.clearSelection()
-    this.model.reset()
-    this.model.scheduleQuery()
-  }
-
-  protected handleTableSelect(e: CustomEvent<{ selectedItems: TrashEntry[] }>): void {
-    const items = e.detail.selectedItems
-    this.selectedItems = items.map((i) => i.key)
-    this.requestUpdate()
-  }
-
-  clearSelection(): void {
-    this.selectedItems = undefined
-    this.requestUpdate()
-  }
-
-  protected handleFileAction(e: CustomEvent<{ key: string; action: string }>): void {
-    const { key, action } = e.detail
-    const item = this.model.getItem(key)
-    if (!item) {
-      return
-    }
-    if (action === 'restore') {
-      this.restore([key])
-    } else if (action === 'delete') {
-      this.delete([key])
-    }
-  }
-
-  async delete(keys: string[]): Promise<void> {
-    await this.model.delete(keys)
-    this.model.removeItems(keys)
-    this.clearSelection()
-  }
-
-  async restore(keys: string[]): Promise<void> {
-    await this.model.restore(keys)
-    this.model.removeItems(keys)
-    this.clearSelection()
-  }
-
-  handleDeleteSelected(): void {
-    const { selectedItems = [] } = this
-    if (!selectedItems.length) {
-      return
-    }
-    this.delete(selectedItems)
-  }
-
-  handleRestoreSelected(): void {
-    const { selectedItems = [] } = this
-    if (!selectedItems.length) {
-      return
-    }
-    this.restore(selectedItems)
-  }
-
-  override render(): TemplateResult {
-    const { selectedItems } = this
-    return html`
-      <div class="files-activity activity">
-        <div class="section-header">
-          ${selectedItems && selectedItems.length ? this.renderSelection(selectedItems) : this.renderHeader()}
-        </div>
-        <trash-table
-          .oid="${this.oid}"
-          .user="${this.user}"
-          .items="${this.model.items}"
-          selection="multi"
-          active
-          sort="name"
-          sortDirection="desc"
-          ariaLabel="Trashed items"
-          @select="${this.handleTableSelect}"
-          @action="${this.handleFileAction}"
-        >
-          <p slot="empty" class="empty">You have no trashed items.</p>
-        </trash-table>
-      </div>
-    `
-  }
-
-  protected renderHeader(): TemplateResult {
-    return html`<span class="headline-small spacing-headline-small">Trash</span>`
-  }
-
-  protected renderSelection(selected: string[]): TemplateResult {
-    const { length } = selected
-    return html`
-      <div class="file-selection-info">
-        <md-icon-button @click="${this.clearSelection}">
-          <md-icon>close</md-icon>
-        </md-icon-button>
-        <span class="selection-label body-large">${length} selected</span>
-        <md-icon-button
-          @click="${this.handleRestoreSelected}"
-          title="Restore from trash"
-          aria-label="Restore from trash"
-        >
-          <md-icon>restore_page</md-icon>
-        </md-icon-button>
-        <md-icon-button @click="${this.handleDeleteSelected}" title="Delete forever" aria-label="Delete forever">
-          <md-icon>delete_forever</md-icon>
-        </md-icon-button>
-      </div>
-    `
-  }
-}

package/src/apps/quick-api/lib/SchemaContextualMenu.ts

@@ -1,63 +0,0 @@
-import { DomainEntityKind, DomainModelKind, DomainNamespaceKind } from '@api-client/core/browser.js'
-import { ContextualMenu } from '../../../elements/contextual-menu/internals/ContextualMenu.js'
-
-export class SchemaContextualMenu extends ContextualMenu {
-  override findTarget(e: MouseEvent): HTMLElement | SVGElement | undefined {
-    const path = e.composedPath()
-    while (path.length > 0) {
-      const item = path.shift()
-      if (item === this.workspace) {
-        this.logger.debug('findTarget', 'the target is the workspace')
-        return item as HTMLElement | SVGElement
-      }
-      if (item instanceof HTMLElement) {
-        this.logger.debug('findTarget', 'evaluating HTML target', item.localName)
-        const { localName } = item
-        switch (localName) {
-          case 'domain-navigation':
-            this.logger.debug('findTarget', 'the target is the data navigation')
-            return item
-          case 'input':
-            // show native context menu to inputs
-            this.logger.debug('findTarget', 'the target is an input element')
-            return undefined
-        }
-
-        // navigation items
-        if (item.matches('li[role="treeitem"]')) {
-          this.logger.debug('findTarget', 'the target is the list item with role treeitem')
-          return item
-        }
-      }
-    }
-    return undefined
-  }
-
-  override elementToTarget(element: HTMLElement | SVGElement): string | undefined {
-    // Navigation items
-    if (element.localName === 'domain-navigation') {
-      this.logger.debug('elementToTarget', 'matched domain-navigation to the namespace kind')
-      return 'domain-navigation'
-    }
-    if (element.matches('li[role="treeitem"]')) {
-      this.logger.debug('elementToTarget', 'matched schema navigation item')
-      const kind = element.dataset.kind
-      if (!kind) {
-        this.logger.warn('elementToTarget', 'the navigation item has no kind')
-        return undefined
-      }
-      this.logger.debug('elementToTarget', 'matching kind', kind)
-      switch (kind) {
-        case DomainEntityKind:
-          return 'entity'
-        case DomainModelKind:
-          return 'model'
-        case DomainNamespaceKind:
-          return 'namespace'
-      }
-      this.logger.debug('elementToTarget', 'kind not matched...')
-    }
-    this.logger.debug('elementToTarget', 'did not found any target')
-    return undefined
-  }
-}

package/src/apps/quick-api/lib/UiLib.ts

@@ -1,17 +0,0 @@
-import { DomainModelKind, DomainNamespaceKind } from '@api-client/core/browser.js'
-import type { IconType } from '../../../md/icons/Icons.js'
-
-/**
- * Gets the icon type for a given item kind.
- * @param kind - The kind of the item.
- * @returns The icon type.
- */
-export function getDomainIconType(kind: string): IconType {
-  if (kind === DomainModelKind) {
-    return 'schemaModel'
-  }
-  if (kind === DomainNamespaceKind) {
-    return 'schemaNamespace'
-  }
-  return 'schemaEntity'
-}

package/src/apps/services/ConfigurationService.ts

@@ -1,28 +0,0 @@
-import { Service } from '../../core/Service.js'
-import { WebConfigurationBindings } from '../../bindings/web/WebConfigurationBindings.js'
-
-export default class ConfigurationService extends Service {
-  static override key = 'api-service/config'
-  config!: WebConfigurationBindings
-
-  override async onCreate(): Promise<void> {
-    this.config = new WebConfigurationBindings()
-    return Promise.resolve()
-  }
-
-  override async onStart(): Promise<void> {
-    await this.config.initialize()
-  }
-
-  get local(): WebConfigurationBindings['local'] {
-    return this.config.local
-  }
-
-  get session(): WebConfigurationBindings['session'] {
-    return this.config.session
-  }
-
-  get telemetry(): WebConfigurationBindings['telemetry'] {
-    return this.config.telemetry
-  }
-}

package/src/apps/services/LoggingService.ts

@@ -1,48 +0,0 @@
-import { Logger, ILogObj } from 'tslog'
-import { Service } from '../../core/Service.js'
-
-export default class LoggingService extends Service {
-  static override key = 'api-service/logger'
-
-  logger!: Logger<ILogObj>
-
-  protected development = false
-
-  constructor(development?: boolean) {
-    super()
-    this.development = development ?? false
-  }
-
-  protected override async onCreate(): Promise<void> {
-    const level = this.development ? 0 : 4
-    this.logger = new Logger({ name: 'quick-api', type: 'pretty', minLevel: level })
-  }
-
-  silly(...args: unknown[]): void {
-    this.logger.silly(...args)
-  }
-
-  debug(...args: unknown[]): void {
-    this.logger.debug(...args)
-  }
-
-  info(...args: unknown[]): void {
-    this.logger.info(...args)
-  }
-
-  warn(...args: unknown[]): void {
-    this.logger.warn(...args)
-  }
-
-  error(...args: unknown[]): void {
-    this.logger.error(...args)
-  }
-
-  fatal(...args: unknown[]): void {
-    this.logger.fatal(...args)
-  }
-
-  trace(...args: unknown[]): void {
-    this.logger.trace(...args)
-  }
-}