@api-client/ui 0.0.17 → 0.1.1

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

@@ -1,165 +0,0 @@
-import { type TemplateResult, html } from 'lit'
-import { Fragment } from '../../../core/Fragment.js'
-import { Intent } from '../../../core/ActivityManager.js'
-import { QUICK_API_START } from '../Intents.js'
-import type { StartScreenViewModel } from '../StartScreenActivity.js'
-import type { LiveData } from '../../../core/LiveData.js'
-import { navigateScreen } from '../../../core/ApplicationRoute.js'
-
-import '@material/web/iconbutton/icon-button'
-import '@material/web/icon/icon'
-import '../../../elements/navigation/ui-navigation-item.js'
-
-/**
- * The fragment that renders the Start application navigation.
- * Note, the fragment should be placed inside a `<nav>` element.
- */
-export default class NavigationFragment extends Fragment {
-  viewModel?: LiveData<StartScreenViewModel>
-
-  override async onCreate(data?: unknown): Promise<void> {
-    await super.onCreate(data)
-    if (data && typeof data === 'object') {
-      this.viewModel = data as LiveData<StartScreenViewModel>
-    }
-  }
-
-  mainNavHandler(e: Event): void {
-    const target = e.target as HTMLElement
-    const { page } = target.dataset
-    if (!page) {
-      return
-    }
-    const { viewModel } = this
-    if (viewModel) {
-      viewModel.value.uri = page
-      navigateScreen(page)
-    } else {
-      const intent: Intent = {
-        action: QUICK_API_START,
-        data: {
-          uri: page,
-        },
-      }
-      this.getActivity()?.startActivity(intent)
-    }
-    this.requestUpdate()
-  }
-
-  override render(): TemplateResult {
-    return this.renderNavigation()
-  }
-
-  renderNavigation(): TemplateResult {
-    const { viewModel } = this
-    let route = '/content/create'
-    if (viewModel && viewModel.value.uri) {
-      route = viewModel.value.uri
-    }
-    return html`
-      <div class="app-title">
-        <md-icon-button class="menu-button">
-          <md-icon>Menu</md-icon>
-        </md-icon-button>
-        <h1 class="title-large">Quick API</h1>
-      </div>
-      <div class="navigation-drawer">
-        <ol class="nav-list">
-          <div class="navigation-section-header title-small">Content</div>
-          <li>
-            <ui-navigation-item
-              data-page="/content/create"
-              .selected=${route === '/content/create'}
-              @click="${this.mainNavHandler}"
-            >
-              <md-icon slot="icon">design_services</md-icon>
-              Create
-            </ui-navigation-item>
-          </li>
-          <li>
-            <ui-navigation-item
-              data-page="/content/shared"
-              .selected=${route === '/content/shared'}
-              @click="${this.mainNavHandler}"
-            >
-              <md-icon slot="icon">group</md-icon>
-              Shared
-            </ui-navigation-item>
-          </li>
-          <li>
-            <ui-navigation-item
-              data-page="/content/trash"
-              .selected=${route === '/content/trash'}
-              @click="${this.mainNavHandler}"
-            >
-              <md-icon slot="icon">delete</md-icon>
-              Trash
-            </ui-navigation-item>
-          </li>
-          <div class="navigation-section-header title-small">API Platform</div>
-          <li>
-            <ui-navigation-item
-              data-page="/platform/runtime"
-              .selected=${route === '/platform/runtime'}
-              @click="${this.mainNavHandler}"
-            >
-              <md-icon slot="icon">terminal</md-icon>
-              Runtime
-            </ui-navigation-item>
-          </li>
-          <li>
-            <ui-navigation-item
-              data-page="/platform/behaviors"
-              .selected=${route === '/platform/behaviors'}
-              @click="${this.mainNavHandler}"
-            >
-              <md-icon slot="icon">api</md-icon>
-              Behaviors
-            </ui-navigation-item>
-          </li>
-          <li>
-            <ui-navigation-item
-              data-page="/platform/taxonomies"
-              .selected=${route === '/platform/taxonomies'}
-              @click="${this.mainNavHandler}"
-            >
-              <md-icon slot="icon">account_tree</md-icon>
-              Data taxonomies
-            </ui-navigation-item>
-          </li>
-          <div class="navigation-section-header title-small">Administration</div>
-          <li>
-            <ui-navigation-item
-              data-page="/admin/users"
-              .selected=${route === '/admin/users'}
-              @click="${this.mainNavHandler}"
-            >
-              <md-icon slot="icon">person</md-icon>
-              Users
-            </ui-navigation-item>
-          </li>
-          <li>
-            <ui-navigation-item
-              data-page="/admin/billing"
-              .selected=${route === '/admin/billing'}
-              @click="${this.mainNavHandler}"
-            >
-              <md-icon slot="icon">credit_card</md-icon>
-              Billing
-            </ui-navigation-item>
-          </li>
-          <li>
-            <ui-navigation-item
-              data-page="/admin/organization"
-              .selected=${route === '/admin/organization'}
-              @click="${this.mainNavHandler}"
-            >
-              <md-icon slot="icon">corporate_fare</md-icon>
-              Organization
-            </ui-navigation-item>
-          </li>
-        </ol>
-      </div>
-    `
-  }
-}

package/src/apps/quick-api/fragments/SchemaEditorEmptyState.fragment.ts

@@ -1,11 +0,0 @@
-import { type TemplateResult, html } from 'lit'
-import { Fragment } from '../../../core/Fragment.js'
-
-/**
- * A fragment that renders the schema editor empty state.
- */
-export default class SchemaEditorEmptyState extends Fragment {
-  override render(): TemplateResult {
-    return html`<div class="empty-state">Nothing.</div>`
-  }
-}

package/src/apps/quick-api/fragments/SchemaEditorHost.styles.ts

@@ -1,22 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  .schema-editor {
-    flex-direction: row;
-    display: flex;
-    align-items: flex-start;
-    gap: 20px;
-    align-self: stretch;
-    padding: 20px;
-    border-radius: var(--md-sys-shape-corner-medium, 12px);
-  }
-
-  .schema-editor > .editor {
-    flex: 1;
-    align-self: stretch;
-    padding: 20px;
-    border-radius: var(--md-sys-shape-corner-medium, 12px);
-    background: var(--md-sys-color-surface);
-    overflow: auto;
-  }
-`

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

@@ -1,239 +0,0 @@
-import { type CSSResult, html, nothing, type TemplateResult } from 'lit'
-import {
-  DataDomain,
-  DomainEntityKind,
-  DomainModelKind,
-  DomainAssociationKind,
-  DomainPropertyKind,
-  DomainNamespaceKind,
-} from '@api-client/core/browser.js'
-import { Fragment } from '../../../core/Fragment.js'
-import type { ISelectDetail } from '../../../elements/navigation/internals/AppNavigationElement.js'
-import { adaptStatic } from '../../../decorators/styles.js'
-import styles from './SchemaEditorHost.styles.js'
-import { type SchemaScreenViewModel } from '../SchemaScreenViewModel.js'
-import { type ChangeEventDetail } from '../../../core/reactive/reactive.js'
-import type { EntitySelectDetail } from '../../../elements/modeling/types.js'
-import state from '../../../decorators/state.js'
-
-import '../../../md/icons/ui-icon.js'
-import '../../../elements/modeling/domain-namespace-editor.js'
-import '../../../elements/modeling/domain-model-editor.js'
-import '../../../elements/modeling/domain-entity-editor.js'
-import '../../../elements/modeling/domain-property-editor.js'
-import '../../../elements/modeling/domain-association-editor.js'
-
-export default class SchemaEditorHost extends Fragment {
-  viewModel?: SchemaScreenViewModel
-
-  @adaptStatic
-  static get styles(): CSSResult[] {
-    return [styles]
-  }
-
-  /**
-   * The kind of the currently rendered object
-   */
-  kind?: string
-  /**
-   * The key of the currently rendered object
-   */
-  key?: string
-  /**
-   * The key of the currently rendered field.
-   */
-  @state() accessor fieldKey: string | undefined
-  /**
-   * The kind of the currently rendered field.
-   */
-  @state() accessor fieldKind: string | undefined
-
-  get hasSelection(): boolean {
-    return !!this.key && !!this.kind
-  }
-
-  get hasRightFrame(): boolean {
-    return this.kind === DomainEntityKind
-  }
-
-  override async onCreate(data?: unknown): Promise<void> {
-    await super.onCreate(data)
-    if (data && typeof data === 'object') {
-      this.viewModel = data as SchemaScreenViewModel
-      this.viewModel.addListener(this.handleLiveData.bind(this))
-      this.handleSelection(this.viewModel.selection)
-    }
-  }
-
-  async handleLiveData(detail: ChangeEventDetail): Promise<void> {
-    const { path, value } = detail
-    if (path === 'selection') {
-      this.handleSelection(value as ISelectDetail)
-    }
-  }
-
-  handleSelection(value: ISelectDetail): void {
-    const { key, kind } = value
-    if (this.key === key && this.kind === kind) {
-      return
-    }
-    this.key = key
-    this.kind = kind
-    this.fieldKey = undefined
-    this.fieldKind = undefined
-    this.requestUpdate()
-  }
-
-  handleUiChange(): void {
-    const { viewModel } = this
-    if (!viewModel || !viewModel.model || !viewModel.model) {
-      return
-    }
-    viewModel.model.handleChange()
-  }
-
-  handleEntitySelect(e: CustomEvent<EntitySelectDetail>): void {
-    const { key, kind } = e.detail
-    if (kind === DomainPropertyKind || kind === DomainAssociationKind) {
-      this.fieldKey = key
-      this.fieldKind = kind
-    }
-  }
-
-  handleEntityOpen(e: CustomEvent<EntitySelectDetail>): void {
-    const { viewModel } = this
-    if (!viewModel) {
-      return
-    }
-    viewModel.selection = e.detail
-    this.requestUpdate()
-  }
-
-  handlePropertyDelete(e: CustomEvent<{ key: string; kind: string }>): void {
-    const { key, kind } = e.detail
-    if (this.fieldKey === key && this.fieldKind === kind) {
-      this.fieldKey = undefined
-      this.fieldKind = undefined
-      this.viewModel?.model?.handleChange()
-    }
-  }
-
-  override render(): TemplateResult {
-    if (!this.hasSelection) {
-      return this.renderEmptySelection()
-    }
-    return html`${this.renderLeftFrame()}${this.renderRightFrame()}`
-  }
-
-  renderEmptySelection(): TemplateResult {
-    return html`
-      <section class="empty-screen">
-        <div class="icon-wrapper">
-          <ui-icon class="icon" icon="schemaEntity"></ui-icon>
-        </div>
-        <p class="empty-message body-large">Find your data entities here</p>
-        <p class="empty-message body-large">Add a data entity to describe your schema.</p>
-      </section>
-    `
-  }
-
-  renderLeftFrame(): TemplateResult | typeof nothing {
-    const { viewModel, key, kind } = this
-    if (!viewModel || !key || !kind) {
-      return nothing
-    }
-    const { model } = viewModel
-    if (!model || !model.value) {
-      return nothing
-    }
-    let content: TemplateResult | typeof nothing = nothing
-    if (kind === DomainModelKind) {
-      content = this.renderDomainModelEditor(model.value, key)
-    } else if (kind === DomainEntityKind) {
-      content = this.renderDomainEntityEditor(model.value, key)
-    } else if (kind === DomainNamespaceKind) {
-      content = this.renderDomainNamespaceEditor(model.value, key)
-    }
-    return html`<section class="editor left">${content}</section>`
-  }
-
-  renderDomainModelEditor(root: DataDomain, selected: string): TemplateResult {
-    return html`<domain-model-editor
-      .root="${root}"
-      .selected="${selected}"
-      @change="${this.handleUiChange}"
-      @startactivityforresult="${this.handleIntentEvent}"
-    ></domain-model-editor>`
-  }
-
-  renderDomainEntityEditor(root: DataDomain, selected: string): TemplateResult {
-    return html`<domain-entity-editor
-      .root="${root}"
-      .selected="${selected}"
-      .selectedProperty="${this.fieldKey}"
-      @change="${this.handleUiChange}"
-      @select="${this.handleEntitySelect}"
-      @openentity="${this.handleEntityOpen}"
-      @startactivityforresult="${this.handleIntentEvent}"
-    ></domain-entity-editor>`
-  }
-
-  renderDomainNamespaceEditor(root: DataDomain, selected: string): TemplateResult {
-    return html`<domain-namespace-editor
-      .root="${root}"
-      .selected="${selected}"
-      @change="${this.handleUiChange}"
-      @startactivityforresult="${this.handleIntentEvent}"
-    ></domain-namespace-editor>`
-  }
-
-  renderRightFrame(): TemplateResult | typeof nothing {
-    if (!this.hasRightFrame) {
-      return nothing
-    }
-    const { viewModel, key, fieldKind } = this
-    if (!viewModel || !key) {
-      return nothing
-    }
-    const { model } = viewModel
-    if (!model || !model.value) {
-      return nothing
-    }
-    let content: TemplateResult | typeof nothing = nothing
-    if (this.fieldKey) {
-      if (fieldKind === DomainAssociationKind) {
-        content = this.renderAssociationEditor(model.value, this.fieldKey)
-      } else if (fieldKind === DomainPropertyKind) {
-        content = this.renderPropertyEditor(model.value, this.fieldKey)
-      }
-    } else {
-      content = this.renderPropertyEmptyScreen()
-    }
-    return html`<section class="editor right">${content}</section>`
-  }
-
-  renderPropertyEditor(root: DataDomain, selected: string): TemplateResult {
-    return html`<domain-property-editor
-      .root="${root}"
-      .selected="${selected}"
-      @change="${this.handleUiChange}"
-      @startactivityforresult="${this.handleIntentEvent}"
-      @delete="${this.handlePropertyDelete}"
-    ></domain-property-editor>`
-  }
-
-  renderAssociationEditor(root: DataDomain, selected: string): TemplateResult {
-    return html`<domain-association-editor
-      .root="${root}"
-      .selected="${selected}"
-      @change="${this.handleUiChange}"
-      @startactivityforresult="${this.handleIntentEvent}"
-      @openentity="${this.handleEntityOpen}"
-      @delete="${this.handlePropertyDelete}"
-    ></domain-association-editor>`
-  }
-
-  renderPropertyEmptyScreen(): TemplateResult {
-    return html`<div class="property-empty-screen body-medium">Select a field to get started.</div>`
-  }
-}

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

@@ -1,117 +0,0 @@
-import { type TemplateResult, html } from 'lit'
-import type { DataDomain, IFile } from '@api-client/core/browser.js'
-import { Fragment } from '../../../core/Fragment.js'
-import { ai as AiIcon } from '../../../md/icons/Icons.js'
-import { observable } from '../../../directives/observable.js'
-import { type SchemaScreenViewModel } from '../SchemaScreenViewModel.js'
-import { RENAME_FILE } from '../Intents.js'
-import { Intent, IntentFlags, IntentResult } from '../../../core/ActivityManager.js'
-import services from '../../api_service.js'
-
-import '@material/web/icon/icon.js'
-import '@material/web/iconbutton/icon-button.js'
-import '../../../elements/user/ui-user-avatar.js'
-
-export default class SchemaHeaderFragment extends Fragment {
-  viewModel?: SchemaScreenViewModel
-
-  override async onCreate(data?: unknown): Promise<void> {
-    await super.onCreate(data)
-    if (data && typeof data === 'object') {
-      this.viewModel = data as SchemaScreenViewModel
-    }
-  }
-
-  async handleEditName(): Promise<void> {
-    const { viewModel } = this
-    if (!viewModel) {
-      return
-    }
-    const { org, fid } = viewModel
-    if (!org || !fid) {
-      return
-    }
-    const sdk = await services.get('sdk')
-    const file = await sdk.file.read(org.key, fid)
-    const intent: Intent = {
-      action: RENAME_FILE,
-      flags: IntentFlags.Modal | IntentFlags.ForResult,
-      data: file,
-    }
-    this.startActivityForResult(intent)
-  }
-
-  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 === RENAME_FILE) {
-      this.replaceFile(intent.data as IFile)
-    }
-  }
-
-  replaceFile(file: IFile): void {
-    const { viewModel } = this
-    if (!viewModel) {
-      return
-    }
-    const { model } = viewModel
-    if (!model || !model.value) {
-      return
-    }
-    model.value.info.name = file.info.name
-    model.handleChange()
-    // model.value.value.info.displayName = file.info.displayName
-    // model.value.value.info.description = file.info.description
-  }
-
-  override render(): TemplateResult {
-    const { viewModel } = this
-    if (!viewModel) {
-      return html`<p>Application is not read yet...</p>`
-    }
-    return this.renderHeader(viewModel)
-  }
-
-  renderHeader(data: SchemaScreenViewModel): TemplateResult {
-    const { model, user } = data
-    if (!model || !model.value || !user) {
-      return html`<p>Application is not read yet...</p>`
-    }
-    return html`
-      <md-icon-button aria-label="Toggle navigation">
-        <md-icon>menu</md-icon>
-      </md-icon-button>
-      ${this.renderTitle(model.value)} ${this.renderFileControls()}
-      <md-icon-button class="gap-icon" aria-label="Help topics">
-        <md-icon>help</md-icon>
-      </md-icon-button>
-      <md-icon-button aria-label="Application settings">
-        <md-icon>settings</md-icon>
-      </md-icon-button>
-      <md-icon-button aria-label="AI Copilot">
-        <md-icon>${AiIcon}</md-icon>
-      </md-icon-button>
-      <ui-user-avatar .user="${user}"></ui-user-avatar>
-    `
-  }
-
-  renderTitle(model: DataDomain): TemplateResult {
-    return html` <span class="title-large">${observable(model, 'info.name', 'Untitled Data Model')} </span> `
-  }
-
-  renderFileControls(): TemplateResult {
-    return html`
-      <md-icon-button aria-label="Edit name" title="Edit name" @click="${this.handleEditName}">
-        <md-icon>edit</md-icon>
-      </md-icon-button>
-      <md-icon-button aria-label="Share file">
-        <md-icon>person_add</md-icon>
-      </md-icon-button>
-      <md-icon-button aria-label="File options">
-        <md-icon>more_vert</md-icon>
-      </md-icon-button>
-    `
-  }
-}

package/src/apps/quick-api/fragments/SchemaNavigation.styles.ts

@@ -1,16 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  .schema-add-menu {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 0;
-  }
-
-  domain-navigation.nav {
-    padding: 12px;
-    box-sizing: border-box;
-  }
-`