@api-client/ui 0.0.11 → 0.0.13

package/src/pages/api-client/pages/Files.page.ts

@@ -1,19 +1,13 @@
 import { 
   IFile, HttpProject, Project, Folder, ProjectKind, FolderKind, 
   EventUtils, DataNamespace, DataFile, DataFileKind, 
-  FileAddOptions, FileBreadcrumb, ContextSpaceListOptions, 
-  BroadcastEvent, BroadcastFileData, 
-  FileMetaCreatedBroadcastEvent,
-  DeletedBroadcastEvent,
-  FilePatchBroadcastEvent,
-  ContextListResult,
+  FileAddOptions, FileBreadcrumb, 
   ICapabilities,
 } from "@api-client/core/build/browser.js";
 import { html, nothing, TemplateResult } from "lit";
 import { join } from "lit/directives/join.js";
 import { map } from "lit/directives/map.js";
 import { until } from 'lit/directives/until.js';
-import { Patch } from "@api-client/json";
 import type ApiClientScreen from "../ApiClient.screen.js";
 import { DataTable } from "../../../ui/table/DataTable.js";
 import { NavigationEvents } from "../../../events/NavigationEvents.js";
@@ -22,9 +16,10 @@ import { DataImportProcessor } from "../../../http-client/store/DataImportProces
 import { SnackNotifications } from "../../../ui/notification/SnackNotifications.js";
 import { UiDialogClosingReason } from "../../../ui/dialog/UiDialog.js";
 import { FileBindings } from "../../../bindings/base/FileBindings.js";
-import { IconType } from "../../../ui/icons/Icons.js";
 import UserCache from '../../../store/UserCache.js';
 import AppInfo from '../AppInfo.js';
+import { fileIcon } from "../../../elements/store/FilesLib.js";
+import { FileSystem } from "../../../store/FileSystem.js";
 import '@github/relative-time-element';
 import '../../../define/ui/ui-list.js';
 import '../../../define/ui/ui-list-item.js';
@@ -35,7 +30,7 @@ import '../../../define/ui/ui-button.js';
 import '../../../define/ui/ui-divider.js';
 import '../../../define/ui/ui-text-field.js';
 import '../../../define/dialog/rename-dialog.js';
-import '../../../define/files/share-file.js';
+import '../../../define/store/share-file.js';
 
 enum ImportState {
   Analyzing,
@@ -49,41 +44,20 @@ enum ImportState {
  * A class that specializes in rendering the list of files in HTTP Client.
  */
 export class FilesPage {
+  fs = new FileSystem();
 
-  /**
-   * The list of files to render.
-   * Do not overwrite this property or when you must then update the DataTable's `items` as well.
-   */
-  files: IFile[] = [];
-
-  /**
-   * The pagination cursor for files.
-   * As long there's a cursor, there are more files to request.
-   */
-  cursor?: string;
-
-  /**
-   * The key of the currently rendered folder.
-   */
-  folder?: string;
-
-  breadcrumbs?: FileBreadcrumb[];
-
-  dt = new DataTable(() => this.files, { ariaLabel: 'Your files', active: true, selection: 'single' });
+  dt = new DataTable(() => this.fs.files, { ariaLabel: 'Your files', active: true, selection: 'single' });
 
   importProcessor?: DataImportProcessor;
 
   importState?: ImportState;
 
-  /**
-   * Whether the UI is reading files 
-   */
-  readingFiles?: boolean;
-
   /**
    * A selected in the table item.
    */
   selectedItem?: string;
+
+  errorMessage?: string;
   
   constructor(protected screen: ApiClientScreen) {
     this.createProjectHandler = this.createProjectHandler.bind(this);
@@ -105,122 +79,24 @@ export class FilesPage {
     this.dt.addEventListener('activate', this.itemActivateHandler.bind(this));
     this.dt.addEventListener('render', this.handleTableRender.bind(this));
     this.dt.addEventListener('select', this.handleTableSelect.bind(this));
-  }
-
-  async refresh(): Promise<void> {
-    this.resetList();
-    this.screen.render();
-    await this.readFiles();
-  }
-
-  resetList(): void {
-    this.files = [];
-    this.cursor = undefined;
-    this.breadcrumbs = undefined;
-  }
-
-  async readFiles(): Promise<void> {
-    const { selectedSpace } = this.screen;
-    if (!selectedSpace) {
-      return;
-    }
-    if (this.readingFiles) {
-      return;
-    }
-    this.readingFiles = true;
-    const { cursor: filesCursor, folder } = this;
-    const opts: ContextSpaceListOptions = {
-      space: selectedSpace,
-      descending: true,
-    };
-    if (filesCursor) {
-      opts.cursor = filesCursor;
-    }
-    if (folder) {
-      opts.parent = folder;
-    }
-    try {
-      const result = await this.listFiles(opts);
-      const { items, cursor } = result;
-      this.files = this.files.concat(items).sort(this.filesSortFunction.bind(this));
-      this.cursor = cursor;
-      if (folder) {
-        const br = await this.screen.bindings.store.files.breadcrumbs(folder);
-        this.breadcrumbs = br.items.reverse();
-      }
-    } finally {
-      this.readingFiles = false;
-    }
-    this.screen.render();
-  }
+    this.dt.addEventListener('scrollend', this.handleTableScrollEnd.bind(this));
 
-  protected async listFiles(opts: ContextSpaceListOptions): Promise<ContextListResult<IFile>> {
-    return this.screen.bindings.store.files.list(opts);
-  }
-
-  /**
-   * Sorts files on the list.
-   * 
-   * Folders are always on top.
-   */
-  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) {
-      return (a.info.name || '').localeCompare(b.info.name || '');
-    }
-    return b.lastModified.time - a.lastModified.time;
-  }
-
-  handleFileEvent(event: BroadcastEvent): void {
-    const typed = event as BroadcastEvent & BroadcastFileData;
-    if (typed.parent && typed.parent !== this.folder) {
-      return;
-    }
-    if (typed.alt !== 'meta') {
-      return;
-    }
-    switch (event.operation) {
-      case 'created': this.handleFileCreated((typed as FileMetaCreatedBroadcastEvent).data); break;
-      case 'deleted': this.handleFileDeleted(typed as DeletedBroadcastEvent); break;
-      case 'patch': this.handleFilePatch(typed as FilePatchBroadcastEvent); break;
-      default:
-    }
-  }
-
-  handleFileCreated(file: IFile): void {
-    this.files.push(file);
-    this.files.sort(this.filesSortFunction.bind(this));
-    this.screen.render();
-  }
-
-  handleFileDeleted(event: DeletedBroadcastEvent): void {
-    this.removeFileFromList(event.key);
-  }
-
-  removeFileFromList(key: string): void {
-    const index = this.files.findIndex(i => i.key === key);
-    if (index === -1) {
-      return;
-    }
-    this.files.splice(index, 1);
-    this.screen.render();
+    this.fs.observe();
+    this.fs.addEventListener('change', () => this.screen.render());
+    this.fs.addEventListener('error', (e: Event) => {
+      const event = e as CustomEvent<string>;
+      this.errorMessage = event.detail;
+    });
+    this.fs.addEventListener('querycomplete', () => {
+      document.body.dispatchEvent(new Event('querycomplete', { bubbles: true }));
+    });
   }
 
-  handleFilePatch(event: FilePatchBroadcastEvent): void {
-    const { data, key } = event;
-    const index = this.files.findIndex(i => i.key === key);
-    if (index === -1) {
-      return;
-    }
-    const file = this.files[index];
-    const result = Patch.apply(file, data.patch);
-    this.files[index] = result.doc as IFile;
+  async refresh(): Promise<void> {
+    this.fs.resetList();
     this.screen.render();
+    await this.fs.queryPage();
+    await this.fs.queryBreadcrumbs();
   }
 
   protected cancelCreateProjectDialog(): void {
@@ -331,8 +207,8 @@ export class FilesPage {
       throw new Error('You need to select a space first');
     }
     const opts: FileAddOptions = {};
-    if (this.folder) {
-      opts.parent = this.folder;
+    if (this.fs.parent) {
+      opts.parent = this.fs.parent;
     }
     const result = await this.screen.bindings.store.files.add(file, opts);
     if (media) {
@@ -365,6 +241,13 @@ export class FilesPage {
       this.screen.openDialog('createProjectDialog');
     } else if (option === 'schema') {
       this.screen.openDialog('createSchemaDialog');
+    } else if (option === 'certificate') {
+      const { parent } = this.fs;
+      if (parent) {
+        navigate('certificates', 'add', parent);
+      } else {
+        navigate('certificates', 'add');
+      }
     }
   }
 
@@ -422,7 +305,7 @@ export class FilesPage {
     this.importState = ImportState.Importing;
     this.screen.render();
     try {
-      await importProcessor.importProject(this.screen.bindings.store, selectedSpace, this.folder);
+      await importProcessor.importProject(this.screen.bindings.store, selectedSpace, this.fs.parent);
       this.importState = ImportState.Done;
       this.screen.render();
     } catch (e) {
@@ -465,8 +348,12 @@ export class FilesPage {
     this.screen.render();
   }
 
+  protected handleTableScrollEnd(): void {
+    this.fs.debounceQuery();
+  }
+
   openProject(key: string): void {
-    const file = this.files.find(i => i.key === key);
+    const file = this.fs.files.find(i => i.key === key);
     if (!file) {
       throw new Error(`Invalid state: file not found`);
     }
@@ -550,7 +437,7 @@ export class FilesPage {
   }
 
   protected renameFile(key: string): void {
-    const file = this.files.find(i => i.key === key);
+    const file = this.fs.files.find(i => i.key === key);
     if (!file) {
       return;
     }
@@ -571,7 +458,7 @@ export class FilesPage {
   }
 
   protected shareFile(key: string): void {
-    const file = this.files.find(i => i.key === key);
+    const file = this.fs.files.find(i => i.key === key);
     if (!file) {
       return;
     }
@@ -582,7 +469,7 @@ export class FilesPage {
     dialog.modal = true;
     document.body.appendChild(dialog);
     dialog.open = true;
-    dialog.addEventListener('closed', () => {
+    dialog.addEventListener('close', () => {
       document.body.removeChild(dialog);
     });
   }
@@ -626,7 +513,7 @@ export class FilesPage {
     if (!selectedItem) {
       return nothing
     }
-    const file = this.files.find(i => i.key === selectedItem);
+    const file = this.fs.files.find(i => i.key === selectedItem);
     if (!file) {
       return nothing;
     }
@@ -693,6 +580,10 @@ export class FilesPage {
           <ui-icon icon="schema" slot="start"></ui-icon>
           Data schema
         </ui-list-item>
+        <ui-list-item image="icon" data-option="certificate" role="menuitem">
+          <ui-icon icon="certificate" slot="start"></ui-icon>
+          Certificate
+        </ui-list-item>
         <ui-divider></ui-divider>
         <ui-list-item image="icon" data-option="folder" role="menuitem">
           <ui-icon icon="folder" slot="start"></ui-icon>
@@ -726,7 +617,7 @@ export class FilesPage {
   }
 
   protected renderBreadcrumbs(): TemplateResult {
-    const { breadcrumbs=[] } = this;
+    const { breadcrumbs = [] } = this.fs;
     if (!breadcrumbs.length) {
       return html``;
     }
@@ -868,17 +759,10 @@ export class FilesPage {
   }
 
   protected nameCell(item: IFile): TemplateResult {
-    let icon: IconType | undefined;
-    switch (item.kind) {
-      case DataFileKind: icon = 'schema'; break;
-      case FolderKind: icon = 'folder'; break;
-      case ProjectKind: icon = 'collectionsBookmark'; break;
-      default: 
-    }
-
+    const icon = fileIcon(item);
     return this.dt.cell(html`
       ${icon ? html`<ui-icon icon="${icon}" class="cell-icon"></ui-icon>` : nothing}
-      ${item.info.name || 'Unnamed project'}
+      ${item.info.name || 'Unnamed file'}
     `, { class: 'name-cell', data: { kind: item.kind } });
   }
 

package/src/pages/api-client/pages/Shared.page.ts

@@ -1,4 +1,4 @@
-import { BroadcastEvent, BroadcastFileData, ContextListResult, ContextSpaceListOptions, FileAccessBroadcastEvent, IFile } from "@api-client/core/build/browser.js";
+import { IFile } from "@api-client/core/build/browser.js";
 import { html, TemplateResult } from "lit";
 import type ApiClientScreen from "../ApiClient.screen.js";
 import { FilesPage } from "./Files.page.js";
@@ -7,45 +7,7 @@ export class SharedPage extends FilesPage {
   constructor(screen: ApiClientScreen) {
     super(screen);
     this.dt.options.ariaLabel = 'Shared with you';
-  }
-
-  protected override async listFiles(opts: ContextSpaceListOptions): Promise<ContextListResult<IFile>> {
-    return this.screen.bindings.store.shared.list(opts);
-  }
-
-  override handleFileEvent(event: BroadcastEvent): void {
-    const typed = event as BroadcastEvent & BroadcastFileData;
-    if (typed.parent && typed.parent !== this.folder) {
-      return;
-    }
-    // if (typed.alt !== 'meta') {
-    //   return;
-    // }
-    switch (event.operation) {
-      case 'access-granted': this.handleFileAccessGranted(typed as FileAccessBroadcastEvent); break;
-      case 'access-removed': this.handleFileAccessRemoved(typed as FileAccessBroadcastEvent); break;
-      default: super.handleFileEvent(event);
-    }
-  }
-
-  async handleFileAccessGranted(event: FileAccessBroadcastEvent): Promise<void> {
-    const { key } = event;
-    try {
-      const file = await this.screen.bindings.store.files.read(key);
-      const index = this.files.findIndex(i => i.key === key);
-      if (index >= 0) {
-        this.files.splice(index, 1);
-      }
-      this.handleFileCreated(file);
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.warn(e);
-    }
-  }
-
-  handleFileAccessRemoved(event: FileAccessBroadcastEvent): void {
-    const { key } = event;
-    this.removeFileFromList(key);
+    this.fs.source = 'shared';
   }
 
   override render(): TemplateResult {

package/src/pages/demo/DemoPage.ts

@@ -8,6 +8,7 @@ import CheckboxElement from '../../ui/input/CheckboxElement.js';
 import typography from "../../styles/m3/typography.module.js";
 import surface from "../../styles/m3/surface.module.js";
 import '../../define/ui/ui-icon.js';
+import '../../define/ui/ui-button.js';
 
 /**
  * A base class for demo pages in the API Client ecosystem.
@@ -33,6 +34,11 @@ export abstract class DemoPage extends RouteMixin(RenderableMixin(EventTarget))
    */
   @reactive() darkThemeActive = false;
 
+  /**
+   * For some demo pages, whether the user is authenticated in the store.
+   */
+  authenticated = false;
+
   constructor() {
     super();
     this.handleMediaQuery = this.handleMediaQuery.bind(this);
@@ -151,4 +157,15 @@ export abstract class DemoPage extends RouteMixin(RenderableMixin(EventTarget))
    * ```
    */
   abstract contentTemplate(): TemplateResult;
+
+  handleAuthenticate(): void {
+    // ...
+  }
+
+  authenticateTemplate(): TemplateResult {
+    return html`
+    <p>Store authorization required.</p>
+    <ui-button @click="${this.handleAuthenticate}">Authenticate</ui-button>
+    `;
+  }
 }