@api-client/ui 0.0.17 → 0.1.0

package/src/data/FileModel.ts

@@ -1,58 +0,0 @@
-import { type IFile } from '@api-client/core/browser.js'
-import { Model } from '../core/Model.js'
-import { LiveData } from '../core/LiveData.js'
-import type SdkService from '../apps/services/SdkService.js'
-
-enum ModelState {
-  /**
-   * Not doing anything.
-   */
-  idle,
-  /**
-   * Currently querying for file data.
-   */
-  reading,
-  /**
-   * Data was received and the result yielded no results or less than the limit.
-   */
-  ended,
-}
-
-export default class FileModel extends Model<IFile> {
-  /**
-   * The current files
-   */
-  file?: LiveData<IFile>
-
-  /**
-   * The current state of the model.
-   */
-  state: ModelState = ModelState.idle
-
-  constructor(
-    protected oid: string,
-    protected sdk: SdkService
-  ) {
-    super()
-  }
-
-  read(key: string): void {
-    this.debounce(this.#read.bind(this, key))
-  }
-
-  async #read(key: string): Promise<void> {
-    if (this.state !== ModelState.idle) {
-      return
-    }
-    this.state = ModelState.reading
-    try {
-      const result = await this.sdk.file.read(this.oid, key)
-      this.file = new LiveData(result)
-    } catch (e) {
-      const err = e as Error
-      this.notifyError(new Error(`Unable to load the file. ${err.message}`))
-      this.state = ModelState.idle
-    }
-    this.dispatchEvent(new Event('querycomplete'))
-  }
-}

package/src/data/FilesModel.ts

@@ -1,186 +0,0 @@
-import { ListFileKind, type ContextListResult, type ContextListOptions, type IFile } from '@api-client/core/browser.js'
-import { Model } from '../core/Model.js'
-import { LiveData } from '../core/LiveData.js'
-import type SdkService from '../apps/services/SdkService.js'
-import { filesSortFunction } from '../apps/quick-api/filesystem/FilesLib.js'
-
-export type FilesSource = 'own' | 'shared'
-
-enum ModelState {
-  /**
-   * Not doing anything.
-   */
-  idle,
-  /**
-   * Currently querying for file data.
-   */
-  reading,
-  /**
-   * Data was received and the result yielded no results or less than the limit.
-   */
-  ended,
-}
-
-export default class FilesModel extends Model<IFile[]> {
-  source: FilesSource = 'own'
-
-  /**
-   * The current files
-   */
-  files: LiveData<IFile[]> = new LiveData<IFile[]>([])
-
-  /**
-   * The pagination cursor for files to use with the next query.
-   */
-  cursor?: string
-
-  /**
-   * The current state of the model.
-   */
-  state: ModelState = ModelState.idle
-
-  /**
-   * The list of file kinds to list.
-   * Folders are always included.
-   */
-  kinds?: ListFileKind[]
-
-  /**
-   * The variable parent folder key.
-   * This is set when interacting with the UI or when the `folder` attribute change.
-   */
-  parent?: string
-
-  constructor(
-    protected oid: string,
-    protected sdk: SdkService,
-    source: FilesSource = 'own'
-  ) {
-    super()
-    this.source = source
-    // this.fileMetaMessageHandler = this.fileMetaMessageHandler.bind(this);
-  }
-
-  resetListState(): void {
-    this.files.set([])
-    this.cursor = undefined
-    this.state = ModelState.idle
-  }
-
-  scheduleQuery(): void {
-    this.debounce(this.#query)
-  }
-
-  /**
-   * Sets a parent and makes the query.
-   * It does nothing if the parent is already set.
-   *
-   * @param key The key of the parent to query. Empty for root folder.
-   */
-  selectFolder(key?: string): void {
-    if (this.parent === key) {
-      return
-    }
-    this.parent = key
-    this.resetListState()
-    this.scheduleQuery()
-  }
-
-  /**
-   * Finds a file by the key.
-   * @param key The key of the file to find
-   * @returns The file, if any
-   */
-  getFile(key: string): IFile | undefined {
-    return this.files.value.find((i) => i.key === key)
-  }
-
-  replaceFile(file: IFile): void {
-    const files = this.files.value
-    const index = files.findIndex((i) => i.key === file.key)
-    if (index === -1) {
-      files.push(file)
-    } else {
-      files[index] = file
-    }
-    files.sort(filesSortFunction)
-  }
-
-  addFile(file: IFile): void {
-    const files = this.files.value
-    files.push(file)
-    files.sort(filesSortFunction)
-  }
-
-  removeFile(key: string): void {
-    const files = this.files.value
-    const index = files.findIndex((i) => i.key === key)
-    if (index === -1) {
-      return
-    }
-    files.splice(index, 1)
-  }
-
-  removeFiles(keys: string[]): void {
-    this.files.set(this.files.value.filter((file) => !keys.includes(file.key)))
-  }
-
-  async #query(): Promise<void> {
-    if (this.state !== ModelState.idle) {
-      return
-    }
-    this.state = ModelState.reading
-    try {
-      const result = await this.listFiles()
-      this.#processFileResults(result)
-    } catch (e) {
-      const err = e as Error
-      this.notifyError(new Error(`Unable to load files list. ${err.message}`))
-      this.state = ModelState.idle
-    }
-    this.dispatchEvent(new Event('querycomplete'))
-  }
-
-  #processFileResults(result: ContextListResult<IFile>): void {
-    const { items, cursor } = result
-    if (cursor) {
-      this.cursor = cursor
-    }
-    if (!items.length) {
-      this.state = ModelState.ended
-      return
-    }
-    if (!this.files.value.length) {
-      // we only sort the first page as later the user scrolls and sorting would change the order.
-      items.sort(filesSortFunction)
-    }
-    this.files.set(this.files.value.concat(items))
-    this.state = ModelState.idle
-  }
-
-  async listFiles(): Promise<ContextListResult<IFile>> {
-    const { kinds } = this
-    const opts = this.getPageQueryOptions()
-    if (this.source === 'shared' && !this.parent) {
-      return this.sdk.shared.list(this.oid, kinds, opts)
-    }
-    return this.sdk.file.list(this.oid, kinds, opts)
-  }
-
-  getPageQueryOptions(): ContextListOptions {
-    const { cursor: filesCursor, parent, limit } = this
-    const opts: ContextListOptions = {
-      // descending: true,
-    }
-    if (filesCursor) {
-      opts.cursor = filesCursor
-    }
-    if (parent) {
-      opts.parent = parent
-    }
-    if (typeof limit === 'number' && limit) {
-      opts.limit = limit
-    }
-    return opts
-  }
-}

package/src/data/PatchableFileModel.ts

@@ -1,266 +0,0 @@
-import { Operation, Patch } from '@api-client/json'
-import { uuidV4, type MediaPatchInfo } from '@api-client/core/browser.js'
-import { Model } from '../core/Model.js'
-import type SdkService from '../apps/services/SdkService.js'
-
-enum ModelState {
-  /**
-   * Not doing anything.
-   */
-  idle,
-  /**
-   * Currently querying for file data.
-   */
-  reading,
-  /**
-   * Data received and the result yielded no results or less than the limit.
-   */
-  ended,
-}
-
-/**
- * Represents a change within the source object.
- */
-interface FileChange {
-  operations: Operation[]
-  timestamp: number
-}
-
-export interface PatchableFileModelOptions<T> {
-  oid: string
-  fid: string
-  sdk: SdkService
-  initialize: (value: unknown) => T
-  bufferDelay?: number
-}
-
-type WithJson = object & { toJSON(): unknown }
-
-export abstract class PatchableFileModel<T extends object> extends Model<T> {
-  /**
-   * This is essentially a snapshot of the document that is
-   * always consistent with the server (to our knowledge).
-   * It is used to:
-   * - compare with the current `value` to generate diff patches
-   * - apply server patches once they arrive and then rebased client patches.
-   * After that new revision has server and client patches.
-   */
-  private revision?: T
-  /**
-   * The current value of the document.
-   */
-  value?: unknown
-
-  /**
-   * The current state of the model.
-   */
-  state: ModelState = ModelState.idle
-
-  private buffer: FileChange[] = []
-  private bufferTimeoutId: ReturnType<typeof setTimeout> | null = null
-  private readonly bufferDelay: number
-
-  protected oid: string
-  protected fid: string
-  protected sdk: SdkService
-  protected initCallback: (value: unknown) => T
-
-  /**
-   * The current file media version.
-   */
-  private version = 0
-
-  constructor(options: PatchableFileModelOptions<T>) {
-    super()
-    this.bufferDelay = options.bufferDelay || 500
-    this.oid = options.oid
-    this.fid = options.fid
-    this.sdk = options.sdk
-    this.initCallback = options.initialize
-  }
-
-  async read(): Promise<void> {
-    if (this.state !== ModelState.idle) {
-      return
-    }
-    this.state = ModelState.reading
-    try {
-      const result = await this.sdk.file.readMedia(this.oid, this.fid)
-      this.version = result.version
-      this.setupFile(this.initCallback(result.media as T))
-    } catch (e) {
-      const err = e as Error
-      this.notifyError(new Error(`Unable to load the file. ${err.message}`))
-      this.state = ModelState.idle
-      throw err
-    }
-    this.dispatchEvent(new Event('querycomplete'))
-  }
-
-  /**
-   * Called when the file was downloaded and the content is ready to be setup.
-   * Add any listeners to the content here.
-   * @param content The file content to setup.
-   */
-  protected abstract setupFile(content: T): void
-
-  protected setupPreviousData(content: T): void {
-    const typed = content as WithJson
-    if (typeof typed.toJSON === 'function') {
-      this.revision = typed.toJSON() as T
-    } else {
-      this.revision = structuredClone(content)
-    }
-  }
-
-  /**
-   * Applies incoming server patches to the document and rebases client patches.
-   *
-   * This method integrates server-side changes into the document and reconciles
-   * them with any local changes made by the client. It ensures that client
-   * changes are applied on top of the latest server state.
-   *
-   * **Process:**
-   *
-   * 1.  Applies the `server` patches to the `revision`.
-   * 2.  Calculates the client's local changes (diff between `revision` and `value`).
-   * 3.  If there are local changes, rebases them against the server patches.
-   * 4.  Applies the rebased client patches to the `revision`.
-   * 5.  Updates the `value` to match the `revision`.
-   * 6. Dispatches `change` event.
-   *
-   * @param server - The server patches to be applied to the document.
-   * @returns The rebased **client** patches that were applied to the document.
-   *   These patches are safe to send to the server. Returns an empty array if there were no local changes.
-   * @throws {Error} If the local patches cannot be applied to the document after
-   *   server changes. This indicates a conflict that the client application
-   *   should handle (e.g., by notifying the user and refreshing the document).
-   *
-   * @example
-   * ```typescript
-   * const doc = new JsonDocument({ a: 1, b: [2, 3] });
-   *
-   * // Simulate local changes (UI edits)
-   * doc.value.a = 4;
-   * doc.value.b.push(5);
-   *
-   * // Simulate a server patch
-   * const serverPatch: Operation[] = [{ op: 'add', path: '/b/0', value: 0 }];
-   *
-   * // Apply the server patch and rebase local changes
-   * const rebasedClientPatches = doc.applyServer(serverPatch);
-   *
-   * console.log(doc.value); // Output: { a: 4, b: [0, 2, 3, 5] }
-   * console.log(rebasedClientPatches);
-   * // Output: [{ op: 'replace', path: '/a', value: 4 }, { op: 'add', path: '/b/3', value: 5 }]
-   * ```
-   */
-  applyServerPatch(server: Operation[]): Operation[] {
-    const { value } = this
-    if (!value) {
-      return []
-    }
-    const client = Patch.diff(this.revision, this.readValue())
-    const ar = Patch.apply(this.revision, server)
-    let result: Operation[] = []
-    if (client.length) {
-      result = Patch.rebase(server, client)
-      Patch.apply(ar.doc, result)
-    }
-    this.revision = ar.doc as T
-    const content = this.initCallback(ar.doc)
-    this.setValue(content)
-    return result
-  }
-
-  /**
-   * Called when a change is made to the data object.
-   */
-  async handleChange(): Promise<void> {
-    const nextPatch = Patch.diff(this.revision, this.readValue())
-    if (nextPatch.length === 0) {
-      return
-    }
-    this.buffer.push({
-      operations: nextPatch,
-      timestamp: Date.now(),
-    })
-    this.scheduleSend()
-  }
-
-  /**
-   * Schedules sending the buffered patches to the server after a delay.
-   */
-  private scheduleSend(): void {
-    if (this.bufferTimeoutId !== null) {
-      clearTimeout(this.bufferTimeoutId)
-    }
-
-    this.bufferTimeoutId = setTimeout(() => {
-      this.send()
-      this.bufferTimeoutId = null
-    }, this.bufferDelay)
-  }
-
-  /**
-   * Sends the buffered patches to the server.
-   */
-  private async send(): Promise<void> {
-    if (this.buffer.length === 0) {
-      return
-    }
-
-    const combinedPatch: Operation[] = this.buffer.flatMap((change) => change.operations)
-    this.buffer = []
-    try {
-      await this.sendPatchToServer(combinedPatch)
-    } catch (e) {
-      const err = e as Error
-      this.notifyError(err)
-      this.state = ModelState.idle
-      throw err
-      // Retry logic or other error handling can be added here
-    }
-  }
-
-  private async sendPatchToServer(patch: Operation[]): Promise<void> {
-    const info: MediaPatchInfo = {
-      timestamp: Date.now(),
-      patch,
-      // app: 'quick-api',
-      // appVersion: 'v1',
-      id: uuidV4(),
-      version: this.version,
-    }
-    const result = await this.sdk.file.patchMedia(this.oid, this.fid, info)
-    this.version = result.newVersion
-    // update revision so the current patches become a base.
-    this.revision = this.createRevision()
-  }
-
-  /**
-   * A function that creates a new revision of the current file.
-   */
-  protected abstract createRevision(): T
-
-  /**
-   * Returns the current value of the file.
-   */
-  protected abstract readValue(): T
-
-  /**
-   * Sets the value of the file.
-   * @param value The new value to set.
-   */
-  protected abstract setValue(value: T): void
-
-  /**
-   * Checks whether this contents is identified by the passed `oid` and `fid`
-   * @param oid The organization id
-   * @param fid The file id
-   * @returns Whether the current file is the same as the passed arguments.
-   */
-  isFile(oid: string, fid: string): boolean {
-    return this.oid === oid && this.fid === fid
-  }
-}

package/src/data/PatchableLiveDataContentModel.ts

@@ -1,26 +0,0 @@
-import { LiveData } from '../core/LiveData.js'
-import { PatchableFileModel } from './PatchableFileModel.js'
-
-export default class PatchableLiveDataContentModel<T extends object> extends PatchableFileModel<T> {
-  /**
-   * The current value of the document.
-   */
-  declare value?: LiveData<T>
-
-  protected setupFile(content: T): void {
-    this.value = new LiveData(content)
-    this.setupPreviousData(content)
-  }
-
-  protected override createRevision(): T {
-    return JSON.parse(JSON.stringify(this.value?.value)) as T
-  }
-
-  protected override readValue(): T {
-    return this.value?.value as T
-  }
-
-  protected override setValue(value: T): void {
-    this.value?.set(value)
-  }
-}

package/src/data/PatchableRawContentModel.ts

@@ -1,42 +0,0 @@
-import { PatchableFileModel, type PatchableFileModelOptions } from './PatchableFileModel.js'
-
-export default class PatchableRawContentModel<T extends object> extends PatchableFileModel<T> {
-  /**
-   * The current value of the document.
-   */
-  declare value?: T
-
-  constructor(options: PatchableFileModelOptions<T>) {
-    super(options)
-    this.changeListener = this.changeListener.bind(this)
-  }
-
-  protected changeListener(): void {
-    // this.handleChange()
-  }
-
-  protected setupFile(content: T): void {
-    this.value = content
-    const typed = content as EventTarget
-    typed.addEventListener('change', this.changeListener)
-    this.setupPreviousData(content)
-  }
-
-  protected override createRevision(): T {
-    return JSON.parse(JSON.stringify(this.value)) as T
-  }
-
-  protected override readValue(): T {
-    return this.value as T
-  }
-
-  protected override setValue(content: T): void {
-    if (this.value) {
-      const typed = this.value as EventTarget
-      typed.removeEventListener('change', this.changeListener)
-    }
-    const typed = content as EventTarget
-    typed.addEventListener('change', this.changeListener)
-    this.value = content
-  }
-}

package/src/data/TrashModel.ts

@@ -1,114 +0,0 @@
-import type { TrashEntry, ContextListResult, ContextListOptions } from '@api-client/core/browser.js'
-import { Model } from '../core/Model.js'
-import { LiveData } from '../core/LiveData.js'
-import type SdkService from '../apps/services/SdkService.js'
-
-enum ModelState {
-  /**
-   * Not doing anything.
-   */
-  idle,
-  /**
-   * Currently querying for breadcrumb data.
-   */
-  reading,
-  /**
-   * Data was received and the result yielded no results or less than the limit.
-   */
-  ended,
-}
-
-export default class TrashModel extends Model<TrashEntry[]> {
-  /**
-   * The current state of the model.
-   */
-  state: ModelState = ModelState.idle
-
-  /**
-   * The trash items
-   */
-  items: LiveData<TrashEntry[]> = new LiveData<TrashEntry[]>([])
-
-  /**
-   * The pagination cursor for files to use with the next query.
-   */
-  cursor?: string
-
-  constructor(
-    protected oid: string,
-    protected sdk: SdkService
-  ) {
-    super()
-  }
-
-  reset(): void {
-    this.state = ModelState.idle
-    this.cursor = undefined
-    this.items.set([])
-  }
-
-  scheduleQuery(): void {
-    this.debounce(this.#query)
-  }
-
-  async #query(): Promise<void> {
-    if (this.state !== ModelState.idle) {
-      return
-    }
-    this.state = ModelState.reading
-    try {
-      const result = await this.sdk.trash.list(this.oid, this.getPageQueryOptions())
-      this.#processTrashResults(result)
-    } catch (e) {
-      const err = e as Error
-      this.notifyError(new Error(`Unable to load breadcrumbs list. ${err.message}`))
-      this.state = ModelState.idle
-    }
-  }
-
-  #processTrashResults(result: ContextListResult<TrashEntry>): void {
-    const { items, cursor } = result
-    if (cursor) {
-      this.cursor = cursor
-    }
-    if (!items.length) {
-      this.state = ModelState.ended
-      return
-    }
-    this.items.set(this.items.value.concat(items))
-    this.state = ModelState.idle
-  }
-
-  getPageQueryOptions(): ContextListOptions {
-    const { cursor, limit } = this
-    const opts: ContextListOptions = {}
-    if (cursor) {
-      opts.cursor = cursor
-    }
-    if (typeof limit === 'number' && limit) {
-      opts.limit = limit
-    }
-    return opts
-  }
-
-  /**
-   * Finds a file by the key.
-   * @param key The key of the file to find
-   * @returns The file, if any
-   */
-  getItem(key: string): TrashEntry | undefined {
-    return this.items.value.find((i) => i.key === key)
-  }
-
-  delete(keys: string[]): Promise<void> {
-    return this.sdk.trash.delete(this.oid, keys)
-  }
-
-  restore(keys: string[]): Promise<void> {
-    return this.sdk.trash.restore(this.oid, keys)
-  }
-
-  removeItems(keys: string[]): void {
-    this.items.set(this.items.value.filter((item) => !keys.includes(item.key)))
-  }
-}

package/src/elements/data-table/filesystem-table.ts

@@ -1,16 +0,0 @@
-import type { CSSResultOrNative } from 'lit'
-import { customElement } from 'lit/decorators.js'
-import Element from './internals/FilesystemDataTable.js'
-import tableStyles from './internals/DataTable.styles.js'
-import fsStyles from './internals/Filesystem.styles.js'
-
-@customElement('filesystem-table')
-export class FilesystemDataElement extends Element {
-  static override styles: CSSResultOrNative[] = [tableStyles, fsStyles]
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'filesystem-table': FilesystemDataElement
-  }
-}