@api-client/ui 0.0.17 → 0.1.1

package/src/apps/quick-api/filesystem/Files.styles.ts

@@ -1,72 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  .files-activity {
-    display: flex;
-    padding: 20px;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 12px;
-    flex: 1 0 0;
-    align-self: stretch;
-    align-items: stretch;
-    border-radius: var(--md-sys-shape-corner-medium, 12px);
-    background: var(--md-sys-color-surface);
-  }
-
-  /* data table */
-
-  .name-cell {
-    flex: 1;
-  }
-
-  .updated-cell {
-    width: 200px;
-  }
-
-  .owner-cell {
-    width: 200px;
-  }
-
-  .menu-cell {
-    width: 40px;
-    padding: 0;
-    overflow: unset;
-  }
-
-  .cell-icon {
-    margin-right: 12px;
-    min-width: 24px;
-  }
-
-  .menu-area {
-    /* buttons with menu */
-    position: relative;
-  }
-
-  .section-header {
-    /* the breadcrumbs and the add button */
-    display: flex;
-    align-items: center;
-    color: var(--md-sys-color-on-surface);
-  }
-
-  .breadcrumbs {
-    flex: 1;
-  }
-
-  .file-selection-info {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    align-self: stretch;
-    background: var(--md-sys-color-surface-container-high);
-    border-radius: var(--md-sys-shape-corner-extra-large);
-    color: var(--md-sys-color-on-surface);
-  }
-
-  .file-menu {
-    min-width: 360px;
-  }
-`

package/src/apps/quick-api/filesystem/FilesLib.ts

@@ -1,43 +0,0 @@
-import { SVGTemplateResult } from 'lit'
-import { schemaModel as schemaIcon, folderFilled as folderIcon } from '../../../md/icons/Icons.js'
-import { type IFile, type TrashEntry, DomainFileKind, FolderKind } from '@api-client/core/browser.js'
-
-/**
- * Sorts files on the list.
- *
- * Folders are always on top.
- */
-export function filesSortFunction(a: IFile, b: IFile): number {
-  if (a.kind !== b.kind) {
-    if (a.kind === FolderKind) {
-      return -1
-    }
-    return 1
-  }
-  if (a.kind === b.kind && a.kind === FolderKind) {
-    if (!a.info) {
-      return -1
-    }
-    if (!b.info) {
-      return 1
-    }
-    return (a.info.name || '').localeCompare(b.info.name || '')
-  }
-  return b.lastModified.time - a.lastModified.time
-}
-
-export function fileIcon(item: IFile | TrashEntry): SVGTemplateResult | undefined {
-  let icon: SVGTemplateResult | undefined
-  switch (item.kind) {
-    case DomainFileKind:
-      icon = schemaIcon
-      break
-    case FolderKind:
-      icon = folderIcon
-      break
-    // case ProjectKind: icon = 'collectionsBookmark'; break;
-    // case CertificateFileKind: icon = 'certificate'; break;
-    default:
-  }
-  return icon
-}

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

@@ -1,417 +0,0 @@
-import { CSSResult, TemplateResult, html, nothing } from 'lit'
-import {
-  type IUser,
-  File,
-  type FileBreadcrumb,
-  type IFile,
-  FolderKind,
-  DomainFileKind,
-  DataDomain,
-  DomainFile,
-} from '@api-client/core/browser.js'
-import { Fragment } from '../../../core/Fragment.js'
-import services from '../../api_service.js'
-import state from '../../../decorators/state.js'
-import { adaptStatic } from '../../../decorators/styles.js'
-import { api, folderFilled, schemaModel } from '../../../md/icons/Icons.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 type { AppInfo } from '../../types.js'
-import styles from '../filesystem/Files.styles.js'
-import { Intent, IntentFlags, IntentResult } from '../../../core/ActivityManager.js'
-import { CREATE_FOLDER, RENAME_FILE } from '../Intents.js'
-import FilesModel, { FilesSource } from '../../../data/FilesModel.js'
-import BreadcrumbsModel from '../../../data/BreadcrumbsModel.js'
-import { readRouteParams, navigateScreen, openApp } from '../../../core/ApplicationRoute.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 '@material/web/dialog/dialog.js'
-import '@material/web/button/text-button.js'
-import '@material/web/textfield/outlined-text-field.js'
-import '@material/web/iconbutton/icon-button.js'
-import '../../../elements/file-system/ui-breadcrumbs.js'
-import '../../../elements/data-table/filesystem-table.js'
-import '../../../md/button/ui-filled-button.js'
-
-export interface FilesystemConfiguration {
-  /**
-   * What kind of files we render.
-   */
-  source?: FilesSource
-  /**
-   * The initial URI
-   */
-  uri?: string
-}
-
-export interface FilesystemFragmentInteraction {
-  getAppInfo(): AppInfo
-}
-
-const ownRoot = '/content/create'
-const sharedRoot = '/content/shared'
-
-/**
- * A UI fragment that is responsible for rendering user files.
- * It uses the sdk to communicate with the server.
- */
-export default class FilesystemFragment extends Fragment {
-  @adaptStatic
-  static get styles(): CSSResult[] {
-    return [styles]
-  }
-
-  source: FilesSource = 'own'
-
-  files!: FilesModel
-
-  breadcrumbs!: BreadcrumbsModel
-
-  #oid?: string
-
-  /**
-   * 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
-  }
-
-  /**
-   * The current user
-   */
-  user!: IUser
-
-  @state() accessor errorMessage: string | undefined
-
-  @state() accessor selectedItems: string[] | undefined
-
-  override async onCreate(data?: FilesystemConfiguration): Promise<void> {
-    super.onCreate(data)
-    let parent: string | undefined
-    if (data) {
-      if (data.source) {
-        this.source = data.source
-      }
-      if (data.uri) {
-        const result = readRouteParams([`${ownRoot}/(?<parent>.*)`, `${sharedRoot}/(?<parent>.*)`], data.uri)
-        if (result && result.parent) {
-          parent = result.parent as string
-        }
-      }
-    }
-    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.files = new FilesModel(current.key, sdk, this.source)
-    this.files.parent = parent
-    this.files.addEventListener('error', (e: Event) => {
-      const event = e as CustomEvent<string>
-      this.errorMessage = event.detail
-    })
-    this.breadcrumbs = new BreadcrumbsModel(current.key, sdk)
-    this.breadcrumbs.parent = parent
-  }
-
-  override onResume(): void | Promise<void> {
-    super.onResume()
-    this.refresh()
-  }
-
-  async refresh(): Promise<void> {
-    this.clearSelection()
-    this.files.resetListState()
-    this.files.scheduleQuery()
-    this.breadcrumbs.reset()
-    this.breadcrumbs.scheduleQuery(this.files.parent)
-  }
-
-  async openFolder(key?: string): Promise<void> {
-    this.files.selectFolder(key)
-    this.breadcrumbs.reset()
-    this.breadcrumbs.scheduleQuery(key)
-    this.clearSelection()
-    const params: string[] = [this.source === 'own' ? ownRoot : sharedRoot]
-    if (key) {
-      params.push(key)
-    }
-    navigateScreen(...params)
-  }
-
-  async openFile(file: IFile): Promise<void> {
-    const { kind, key } = file
-    if (kind === DomainFileKind) {
-      openApp('schema.html', 'schema', this.oid, key)
-    } else {
-      throw new Error(`Unknown activation item: ${kind}`)
-    }
-  }
-
-  async deleteFiles(keys: string[]): Promise<void> {
-    const sdk = await services.get('sdk')
-    await sdk.file.deleteBulk(this.oid, keys)
-    this.files.removeFiles(keys)
-    this.requestUpdate()
-  }
-
-  protected itemActivateHandler(e: CustomEvent<IFile>): void {
-    const item = e.detail
-    const { kind } = item
-    if (kind === FolderKind) {
-      this.openFolder(item.key)
-    } else if (kind === DomainFileKind) {
-      this.openFile(item)
-    } else {
-      throw new Error(`Unknown activation item: ${kind}`)
-    }
-  }
-
-  protected handleTableSelect(e: CustomEvent<{ selectedItems: IFile[] }>): 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.files.getFile(key)
-    if (!item) {
-      return
-    }
-    const file = new File().new(item)
-    if (action === 'rename') {
-      const intent: Intent = {
-        action: RENAME_FILE,
-        flags: IntentFlags.Modal | IntentFlags.ForResult,
-        data: file.toJSON(), // removes the Proxy object. Intents are copied.
-      }
-      this.startActivityForResult(intent)
-    } else if (action === 'delete') {
-      this.deleteFiles([item.key])
-    } else if (action === 'open') {
-      if (file.isFile()) {
-        this.openFile(item)
-      } else if (file.isFolder()) {
-        this.openFolder(file.key)
-      }
-    } else if (action === 'move') {
-      //
-    } else if (action === 'share') {
-      //
-    }
-  }
-
-  /**
-   * The callback method that is triggered when another activity that was
-   * started for result finishes.
-   *
-   * @param requestCode The request code that was used to start the activity.
-   * @param data The data that was passed back.
-   * @param intent The intent that was used to start the activity.
-   */
-  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) {
-      const updated = intent.data as IFile
-      this.files.replaceFile(updated)
-      this.requestUpdate()
-    } else if (intent.action === CREATE_FOLDER) {
-      const created = intent.data as IFile
-      this.files.addFile(created)
-      this.requestUpdate()
-    }
-  }
-
-  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 === 'folder') {
-      const intent: Intent = {
-        action: CREATE_FOLDER,
-        flags: IntentFlags.Modal | IntentFlags.ForResult,
-        data: {
-          parent: this.files.parent,
-        },
-      }
-      this.startActivityForResult(intent)
-    } else if (action === 'data') {
-      this.createDataModel()
-    }
-  }
-
-  async createDataModel(): Promise<void> {
-    const { oid } = this
-    const sdk = await services.get('sdk')
-    const media = new DataDomain()
-    const file = DomainFile.fromDataDomain(media, oid)
-    await sdk.file.create(file.toJSON(), media, oid, { parent: this.files.parent })
-    this.refresh()
-  }
-
-  handleBreadcrumbsNavigate(e: CustomEvent<FileBreadcrumb>): void {
-    const { key } = e.detail
-    this.openFolder(key)
-  }
-
-  handleOpenNewFileMenu(): void {
-    const menu = document.querySelector('#new-file-menu') as MdMenu
-    if (menu) {
-      menu.open = !menu.open
-    }
-  }
-
-  handleDeleteSelected(): void {
-    const { selectedItems = [] } = this
-    if (!selectedItems.length) {
-      return
-    }
-    this.deleteFiles(selectedItems)
-  }
-
-  override render(): TemplateResult {
-    const { selectedItems } = this
-    const own = this.source === 'own'
-    const ariaLabel = own ? 'Your files' : 'Shared files'
-    const files = this.files.files
-    const content = html`
-      <div class="files-activity activity">
-        <div class="section-header">
-          ${selectedItems && selectedItems.length ? this.renderSelection(selectedItems) : this.renderBreadcrumbs()}
-        </div>
-        <filesystem-table
-          .oid="${this.oid}"
-          .user="${this.user}"
-          .items="${files}"
-          selection="multi"
-          active
-          sort="name"
-          sortDirection="desc"
-          ariaLabel="${ariaLabel}"
-          @activate="${this.itemActivateHandler}"
-          @select="${this.handleTableSelect}"
-          @action="${this.handleFileAction}"
-        >
-          ${own
-            ? html`<p slot="empty" class="empty">You have no files.</p>`
-            : html`<p slot="empty" class="empty">You have no shared files.</p>`}
-        </filesystem-table>
-      </div>
-    `
-    return content
-  }
-
-  protected renderSelection(selected: string[]): TemplateResult {
-    const { length } = selected
-    return html`
-      <div class="file-selection-info">
-        <md-icon-button @click="${this.clearSelection}" title="Clear selection" aria-label="Clear selection">
-          <md-icon>close</md-icon>
-        </md-icon-button>
-        <span class="selection-label body-large">${length} selected</span>
-        <md-icon-button title="Share selected" aria-label="Share selected">
-          <md-icon>person_add</md-icon>
-        </md-icon-button>
-        <!-- <md-icon-button>
-          <md-icon>drive_file_move</md-icon>
-        </md-icon-button> -->
-        <md-icon-button
-          @click="${this.handleDeleteSelected}"
-          title="Move selected to trash"
-          aria-label="Move selected to trash"
-        >
-          <md-icon>delete</md-icon>
-        </md-icon-button>
-      </div>
-    `
-  }
-
-  protected renderBreadcrumbs(): TemplateResult {
-    const { breadcrumbs } = this.breadcrumbs
-    const rootName = this.source === 'own' ? 'Files' : 'Shared'
-    return html`
-      <div class="breadcrumbs">
-        <ui-breadcrumbs
-          .breadcrumbs="${breadcrumbs}"
-          root-name="${rootName}"
-          @navigate="${this.handleBreadcrumbsNavigate}"
-        ></ui-breadcrumbs>
-      </div>
-      ${this.renderAddFileMenu()}
-    `
-  }
-
-  protected renderAddFileMenu(): TemplateResult | typeof nothing {
-    const own = this.source === 'own'
-    if (!own) {
-      return nothing
-    }
-    return html`
-      <span class="menu-area">
-        <ui-filled-button id="new-file-anchor" trailingicon @click="${this.handleOpenNewFileMenu}">
-          Add
-          <md-icon slot="icon">arrow_drop_down</md-icon>
-        </ui-filled-button>
-        <md-menu
-          positioning="popover"
-          id="new-file-menu"
-          anchor="new-file-anchor"
-          y-offset="8"
-          @close-menu="${this.handleAddMenuClose}"
-        >
-          <md-menu-item data-action="folder">
-            <div slot="headline">Folder</div>
-            <div slot="supporting-text">A folder for your domains</div>
-            <md-icon slot="start">${folderFilled}</md-icon>
-          </md-menu-item>
-          <md-menu-item data-action="data">
-            <div slot="headline">Data model</div>
-            <div slot="supporting-text">Define your data</div>
-            <md-icon slot="start">${schemaModel}</md-icon>
-          </md-menu-item>
-          <md-menu-item data-action="api">
-            <div slot="headline">API</div>
-            <div slot="supporting-text">Make data actionable</div>
-            <md-icon slot="start">${api}</md-icon>
-          </md-menu-item>
-          <md-divider></md-divider>
-          <md-menu-item data-action="import">
-            <div slot="headline">Import data model</div>
-            <div slot="supporting-text">Use well-know domains</div>
-            <md-icon slot="start">download_2</md-icon>
-          </md-menu-item>
-        </md-menu>
-      </span>
-    `
-  }
-}

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

@@ -1,72 +0,0 @@
-import { type TemplateResult, html } from 'lit'
-import { IUser } from '@api-client/core/browser.js'
-import { Fragment } from '../../../core/Fragment.js'
-import { ai as AiIcon } from '../../../md/icons/Icons.js'
-import services from '../../api_service.js'
-import type { StartScreenViewModel } from '../StartScreenActivity.js'
-import type { LiveData } from '../../../core/LiveData.js'
-
-import '@material/web/focus/md-focus-ring.js'
-import '@material/web/icon/icon.js'
-import '@material/web/iconbutton/icon-button.js'
-import '../../../md/button/ui-filled-tonal-button.js'
-import '../../../elements/user/ui-user-avatar.js'
-
-/**
- * The fragment that renders the Start application header.
- */
-export default class HeaderFragment extends Fragment {
-  viewModel?: LiveData<StartScreenViewModel>
-  organizationName?: string
-  user?: IUser
-
-  override async onCreate(data?: unknown): Promise<void> {
-    await super.onCreate(data)
-    if (data && typeof data === 'object') {
-      this.viewModel = data as LiveData<StartScreenViewModel>
-    }
-  }
-
-  override async onResume(): Promise<void> {
-    await super.onResume()
-    const userService = await services.get('user')
-    const orgService = await services.get('org')
-    this.user = (await userService.getUser()) || undefined
-    const org = await orgService.currentOrganization()
-    this.organizationName = org?.name
-  }
-
-  override render(): TemplateResult {
-    return this.renderHeader()
-  }
-
-  renderHeader(): TemplateResult {
-    return html`
-      <div class="main-search">
-        <md-focus-ring part="focus-ring" for="search-input"></md-focus-ring>
-        <md-icon class="search-icon">search</md-icon>
-        <input
-          class="search-input body-large"
-          id="search-input"
-          type="search"
-          placeholder="Find files"
-          autocomplete="off"
-        />
-      </div>
-      <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-filled-tonal-button trailingicon aria-label="Current organization">
-        ${this.organizationName}
-        <md-icon slot="icon">arrow_drop_down</md-icon>
-      </ui-filled-tonal-button>
-      <ui-user-avatar .user="${this.user}"></ui-user-avatar>
-    `
-  }
-}

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

@@ -1,47 +0,0 @@
-import { Fragment } from '../../../core/Fragment.js'
-import FilesystemFragment, { type FilesystemFragmentInteraction } from './FilesystemFragment.js'
-import type { StartScreenViewModel } from '../StartScreenActivity.js'
-import type { LiveData } from '../../../core/LiveData.js'
-import TrashFragment from './TrashFragment.js'
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface MainFragmentInteraction extends FilesystemFragmentInteraction {}
-
-/**
- * The fragment that renders Start screen main views.
- * It is a host for other fragments.
- */
-export default class MainFragment extends Fragment {
-  viewModel?: LiveData<StartScreenViewModel>
-
-  override async onCreate(data?: unknown): Promise<void> {
-    await super.onCreate(data)
-    let uri: string | undefined
-    if (data && typeof data === 'object') {
-      this.viewModel = data as LiveData<StartScreenViewModel>
-      this.viewModel.addEventListener('update', this.handleLiveData.bind(this))
-      uri = this.viewModel.value.uri
-    }
-    this.addChild('/content/create', new FilesystemFragment({ parent: this }), { source: 'own', uri })
-    this.addChild('/content/shared', new FilesystemFragment({ parent: this }), { source: 'shared', uri })
-    this.addChild('/content/trash', new TrashFragment({ parent: this }))
-  }
-
-  async handleLiveData(e: Event): Promise<void> {
-    const event = e as CustomEvent<{ prop: string | symbol; path: string; value: unknown }>
-    const { path, value } = event.detail
-    if (path === 'uri') {
-      const [current] = this.fragmentManager.getVisible()
-      if (current) {
-        await this.fragmentManager.hideFragment(current)
-      }
-      await this.fragmentManager.showFragment(value as string)
-    }
-  }
-
-  override async onResume(): Promise<void> {
-    const atoms = (this.viewModel?.value.uri || '/content/create').split('/').filter(Boolean)
-    const current = `/${atoms[0]}/${atoms[1]}`
-    await this.fragmentManager.showFragment(current)
-  }
-}