@fiduswriter/image-manager 0.1.12 → 0.1.14

package/src/selection_dialog/index.ts

@@ -1,212 +1,202 @@
-import {Dialog, SelectionDataTable, cancelPromise, escapeText, gettext} from "fwtoolkit"
-import type {DialogButtonSpec} from "fwtoolkit/basic"
-import type {DataTable} from "simple-datatables"
-
-import type {ImageDB} from "../database.js"
-import type {
-    ImageManagerPage,
-    ImageSelectionItem
-} from "../types.js"
+import {
+  Dialog,
+  SelectionDataTable,
+  cancelPromise,
+  escapeText,
+  gettext,
+} from "fwtoolkit";
+import type { DialogButtonSpec } from "fwtoolkit/basic";
+import type { DataTable } from "simple-datatables";
+
+import type { ImageDB } from "../database.js";
+import type { ImageManagerPage, ImageSelectionItem } from "../types.js";
 
 export class ImageSelectionDialog {
-    imageDB: ImageDB
-
-    userImageDB: ImageDB
-
-    page: ImageManagerPage
-
-    imgId: number | false
-
-    imgDb: "document" | "user" = "document"
-
-    images: ImageSelectionItem[] = []
-
-    imageDialog!: Dialog
-
-    selectionTable!: SelectionDataTable
-
-    table: DataTable | null = null
-
-    constructor(
-        imageDB: ImageDB,
-        userImageDB: ImageDB,
-        imgId: number | false,
-        page: ImageManagerPage
-    ) {
-        this.imageDB = imageDB
-        this.userImageDB = userImageDB
-        this.page = page
-        this.imgId = imgId // a preselected image
-        // the preselection image will always come from the document
-        this.images = [] // images from both databases
-    }
-
-    isE2EE(): boolean {
-        return this.page.e2ee?.encrypted === true
-    }
-
-    init(): Promise<unknown> {
-        console.log(
-            "DEBUG selection init: docImages=",
-            Object.keys(this.imageDB.db).length,
-            "userImages=",
-            Object.keys(this.userImageDB.db).length
-        )
-        this.images = Object.values(this.imageDB.db).map(image => ({
-            image,
-            db: "document" as const
-        }))
-        Object.values(this.userImageDB.db).forEach(image => {
-            if (this.imageDB.db[image.id]) {
-                return
-            }
-            this.images.push({
-                image,
-                db: "user" as const
-            })
-        })
-        console.log("DEBUG selection images=", this.images.length)
-        const buttons: DialogButtonSpec[] = []
-        const p = new Promise(resolve => {
-            if (!this.page.app.isOffline()) {
-                buttons.push({
-                    text: gettext("Add new image"),
-                    icon: "plus-circle",
-                    click: () => {
-                        import("../edit_dialog/index.js").then(
-                            ({ImageEditDialog}) => {
-                                const targetDB = this.isE2EE()
-                                    ? this.imageDB
-                                    : this.userImageDB
-                                const imageUpload = new ImageEditDialog(
-                                    targetDB,
-                                    false,
-                                    this.page
-                                )
-
-                                resolve(
-                                    imageUpload.init().then(imageId => {
-                                        console.log(
-                                            "DEBUG upload resolved imageId=",
-                                            imageId
-                                        )
-                                        this.imgId = imageId || false
-                                        // For E2EE docs the image goes straight
-                                        // into the document DB, not the user's.
-                                        this.imgDb = this.isE2EE()
-                                            ? "document"
-                                            : "user"
-                                        console.log(
-                                            "DEBUG closing selection dialog"
-                                        )
-                                        this.imageDialog.close()
-                                        console.log(
-                                            "DEBUG reinit selection dialog"
-                                        )
-                                        return this.init()
-                                    })
-                                )
-                            }
-                        )
-                    }
-                })
-            }
-
-            buttons.push({
-                text: gettext("Use image"),
-                classes: "fw-dark",
-                click: () => {
-                    this.imageDialog.close()
-                    resolve({id: this.imgId, db: this.imgDb})
-                }
-            })
-
-            buttons.push({
-                type: "cancel" as const,
-                click: () => {
-                    this.imageDialog.close()
-                    resolve(cancelPromise())
-                }
-            })
-        })
-        this.imageDialog = new Dialog({
-            buttons,
-            width: 300,
-            body: '<div class="image-selection-table"></div>',
-            title: gettext("Images"),
-            id: "select-image-dialog"
-        })
-        this.imageDialog.open()
-        this.initTable()
-        this.imageDialog.centerDialog()
-        return p
+  imageDB: ImageDB;
+
+  userImageDB: ImageDB;
+
+  page: ImageManagerPage;
+
+  imgId: number | false;
+
+  imgDb: "document" | "user" = "document";
+
+  images: ImageSelectionItem[] = [];
+
+  imageDialog!: Dialog;
+
+  selectionTable!: SelectionDataTable;
+
+  table: DataTable | null = null;
+
+  constructor(
+    imageDB: ImageDB,
+    userImageDB: ImageDB,
+    imgId: number | false,
+    page: ImageManagerPage,
+  ) {
+    this.imageDB = imageDB;
+    this.userImageDB = userImageDB;
+    this.page = page;
+    this.imgId = imgId; // a preselected image
+    // the preselection image will always come from the document
+    this.images = []; // images from both databases
+  }
+
+  isE2EE(): boolean {
+    return this.page.e2ee?.encrypted === true;
+  }
+
+  init(): Promise<unknown> {
+    console.log(
+      "DEBUG selection init: docImages=",
+      Object.keys(this.imageDB.db).length,
+      "userImages=",
+      Object.keys(this.userImageDB.db).length,
+    );
+    this.images = Object.values(this.imageDB.db).map((image) => ({
+      image,
+      db: "document" as const,
+    }));
+    Object.values(this.userImageDB.db).forEach((image) => {
+      if (this.imageDB.db[image.id]) {
+        return;
+      }
+      this.images.push({
+        image,
+        db: "user" as const,
+      });
+    });
+    console.log("DEBUG selection images=", this.images.length);
+    const buttons: DialogButtonSpec[] = [];
+    const p = new Promise((resolve) => {
+      if (!this.page.app.isOffline()) {
+        buttons.push({
+          text: gettext("Add new image"),
+          icon: "plus-circle",
+          click: () => {
+            import("../edit_dialog/index.js").then(({ ImageEditDialog }) => {
+              const targetDB = this.isE2EE() ? this.imageDB : this.userImageDB;
+              const imageUpload = new ImageEditDialog(
+                targetDB,
+                false,
+                this.page,
+              );
+
+              resolve(
+                imageUpload.init().then((imageId) => {
+                  console.log("DEBUG upload resolved imageId=", imageId);
+                  this.imgId = imageId || false;
+                  // For E2EE docs the image goes straight
+                  // into the document DB, not the user's.
+                  this.imgDb = this.isE2EE() ? "document" : "user";
+                  console.log("DEBUG closing selection dialog");
+                  this.imageDialog.close();
+                  console.log("DEBUG reinit selection dialog");
+                  return this.init();
+                }),
+              );
+            });
+          },
+        });
+      }
+
+      buttons.push({
+        text: gettext("Use image"),
+        classes: "fw-dark",
+        click: () => {
+          this.imageDialog.close();
+          resolve({ id: this.imgId, db: this.imgDb });
+        },
+      });
+
+      buttons.push({
+        type: "cancel" as const,
+        click: () => {
+          this.imageDialog.close();
+          resolve(cancelPromise());
+        },
+      });
+    });
+    this.imageDialog = new Dialog({
+      buttons,
+      width: 300,
+      body: '<div class="image-selection-table"></div>',
+      title: gettext("Images"),
+      id: "select-image-dialog",
+    });
+    this.imageDialog.open();
+    this.initTable();
+    this.imageDialog.centerDialog();
+    return p;
+  }
+
+  initTable(): void {
+    /* Initialize the overview table */
+    const tableEl = document.createElement("table");
+    tableEl.classList.add("fw-data-table");
+    tableEl.classList.add("fw-small");
+    const host = this.imageDialog.dialogEl.querySelector(
+      "div.image-selection-table",
+    ) as HTMLElement | null;
+    if (!host) {
+      return;
     }
-
-    initTable(): void {
-        /* Initialize the overview table */
-        const tableEl = document.createElement("table")
-        tableEl.classList.add("fw-data-table")
-        tableEl.classList.add("fw-small")
-        const host = this.imageDialog.dialogEl.querySelector(
-            "div.image-selection-table"
-        ) as HTMLElement | null
-        if (!host) {
-            return
+    host.innerHTML = "";
+    host.appendChild(tableEl);
+
+    const selectedIds =
+      this.imgId === false ? [] : [`${this.imgDb}-${this.imgId}`];
+
+    this.selectionTable = new SelectionDataTable({
+      dom: host,
+      classes: ["fw-data-table", "fw-small"],
+      columns: [
+        {
+          select: 0,
+          hidden: true,
+        },
+        {
+          select: [0, 2],
+          type: "string",
+        },
+        {
+          select: [1, 3],
+          sortable: false,
+        },
+      ],
+      data: this.images.map((image) => this.createTableRow(image)),
+      idColumn: 0,
+      multiple: false,
+      selectedIds,
+      scrollY: "270px",
+      labels: {
+        noRows: gettext("No images available"), // Message shown when there are no images
+        noResults: gettext("No images found"), // Message shown when no images are found after search
+        placeholder: gettext("Search..."), // placeholder for search field
+      },
+      onChange: (selected) => {
+        if (selected.length) {
+          const [db, id] = String(selected[0]).split("-");
+          this.imgId = Number.parseInt(id);
+          this.imgDb = db as "document" | "user";
+        } else {
+          this.imgId = false;
         }
-        host.innerHTML = ""
-        host.appendChild(tableEl)
-
-        const selectedIds =
-            this.imgId === false ? [] : [`${this.imgDb}-${this.imgId}`]
-
-        this.selectionTable = new SelectionDataTable({
-            dom: host,
-            classes: ["fw-data-table", "fw-small"],
-            columns: [
-                {
-                    select: 0,
-                    hidden: true
-                },
-                {
-                    select: [0, 2],
-                    type: "string"
-                },
-                {
-                    select: [1, 3],
-                    sortable: false
-                }
-            ],
-            data: this.images.map(image => this.createTableRow(image)),
-            idColumn: 0,
-            multiple: false,
-            selectedIds,
-            scrollY: "270px",
-            labels: {
-                noRows: gettext("No images available"), // Message shown when there are no images
-                noResults: gettext("No images found"), // Message shown when no images are found after search
-                placeholder: gettext("Search...") // placeholder for search field
-            },
-            onChange: selected => {
-                if (selected.length) {
-                    const [db, id] = String(selected[0]).split("-")
-                    this.imgId = Number.parseInt(id)
-                    this.imgDb = db as "document" | "user"
-                } else {
-                    this.imgId = false
-                }
-            }
-        })
-        this.selectionTable.init()
-        this.table = this.selectionTable.table!
-    }
-
-    createTableRow(image: ImageSelectionItem): [string, string, string] {
-        return [
-            `${image.db}-${image.image.id}`,
-            image.image.thumbnail === undefined
-                ? `<img src="${image.image.image}" style="max-heigth:30px;max-width:30px;">`
-                : `<img src="${image.image.thumbnail}" style="max-heigth:30px;max-width:30px;">`,
-            escapeText(image.image.title)
-        ]
-    }
+      },
+    });
+    this.selectionTable.init();
+    this.table = this.selectionTable.table!;
+  }
+
+  createTableRow(image: ImageSelectionItem): [string, string, string] {
+    return [
+      `${image.db}-${image.image.id}`,
+      image.image.thumbnail === undefined
+        ? `<img src="${image.image.image}" style="max-heigth:30px;max-width:30px;">`
+        : `<img src="${image.image.thumbnail}" style="max-heigth:30px;max-width:30px;">`,
+      escapeText(image.image.title),
+    ];
+  }
 }

package/src/types.ts

@@ -1,133 +1,147 @@
-import type {DataTable} from "simple-datatables"
-import type {ImageDB} from "./database.js"
+import type { DataTable } from "simple-datatables";
+import type { ImageDB } from "./database.js";
 
 /** A single license under which an image is available. */
 export interface License {
-    url: string
-    title: string
-    start?: string | false
+  url: string;
+  title: string;
+  start?: string | false;
 }
 
 /** Copyright and licensing information for an image. */
 export interface Copyright {
-    holder?: string | false
-    year?: number | false
-    freeToRead: boolean
-    licenses: License[]
+  holder?: string | false;
+  year?: number | false;
+  freeToRead: boolean;
+  licenses: License[];
 }
 
 /** A category used to group images. */
 export interface ImageCategory {
-    id: number
-    category_title: string
+  id: number;
+  category_title: string;
 }
 
 /** A single image as stored in the client-side image database. */
 export interface Image {
-    id: number
-    title: string
-    file_type: string
-    image: string
-    thumbnail?: string
-    width: number
-    height: number
-    added: number
-    cats: number[]
-    copyright: Copyright
-    [key: string]: unknown
+  id: number;
+  title: string;
+  file_type: string;
+  image: string;
+  thumbnail?: string;
+  width: number;
+  height: number;
+  added: number;
+  cats: number[];
+  copyright: Copyright;
+  [key: string]: unknown;
 }
 
 /** End-to-end encryption context passed to dialogs that handle images. */
 export interface E2EEContext {
-    encrypted: boolean
-    key: CryptoKey
+  encrypted: boolean;
+  key: CryptoKey;
+}
+
+/** API connector for image server operations. */
+export interface ImageApi {
+  getImages(): Promise<ImagesResponse>;
+  saveImage(
+    data: SaveImageRequest,
+    files?: Record<string, unknown>,
+  ): Promise<SaveImageResponse>;
+  saveCategories(cats: SaveCategoriesRequest): Promise<SaveCategoriesResponse>;
+  deleteImages(ids: number[]): Promise<unknown>;
 }
 
 /** Subset of the main Fidus Writer app object used by image-manager code. */
 export interface ImageManagerApp {
-    imageDB: ImageDB
-    isOffline: () => boolean
-    settings: {
-        APPS: string[]
-        MEDIA_MAX_SIZE?: number
-        [key: string]: unknown
-    }
-    name: string
-    [key: string]: unknown
+  imageDB: ImageDB;
+  isOffline: () => boolean;
+  settings: {
+    APPS: string[];
+    MEDIA_MAX_SIZE?: number;
+    [key: string]: unknown;
+  };
+  name: string;
+  apiConnectors: {
+    image: ImageApi;
+  };
+  [key: string]: unknown;
 }
 
 /** Page object passed to image dialogs. */
 export interface ImageManagerPage {
-    app: ImageManagerApp
-    e2ee?: E2EEContext
-    menu?: unknown
-    [key: string]: unknown
+  app: ImageManagerApp;
+  e2ee?: E2EEContext;
+  menu?: unknown;
+  [key: string]: unknown;
 }
 
 /** Plugin instance created by the overview's plugin activation. */
 export interface ImageOverviewPlugin {
-    init?: () => Promise<unknown> | unknown
-    [key: string]: unknown
+  init?: () => Promise<unknown> | unknown;
+  [key: string]: unknown;
 }
 
 /** Constructor for an image-overview plugin. */
 export interface ImageOverviewPluginConstructor {
-    new (overview: unknown): ImageOverviewPlugin
+  new (overview: unknown): ImageOverviewPlugin;
 }
 
 /** Row displayed in the image overview data table. */
 export type ImageTableRow = [
-    id: number,
-    selected: boolean,
-    file: string,
-    size: string,
-    added: string,
-    actions: string
-]
+  id: number,
+  selected: boolean,
+  file: string,
+  size: string,
+  added: string,
+  actions: string,
+];
 
 /** An image selection item coming from either the document or user DB. */
 export interface ImageSelectionItem {
-    image: Image
-    db: "document" | "user"
+  image: Image;
+  db: "document" | "user";
 }
 
 /** Response body from `POST /api/usermedia/images/`. */
 export interface ImagesResponse {
-    imageCategories: ImageCategory[]
-    images: Image[]
+  imageCategories: ImageCategory[];
+  images: Image[];
 }
 
 /** Response body from `POST /api/usermedia/save/`. */
 export interface SaveImageResponse {
-    errormsg: Record<string, string> & {error?: string}
-    values: Image
+  errormsg: Record<string, string> & { error?: string };
+  values: Image;
 }
 
 /** Request body for `POST /api/usermedia/save/`. */
 export interface SaveImageRequest {
-    id?: number
-    title: string
-    copyright: Copyright | string
-    cats: (string | number)[]
-    image?: File | Blob
-    original_file_type?: string
-    [key: string]: unknown
+  id?: number;
+  title: string;
+  copyright: Copyright | string;
+  cats: (string | number)[];
+  image?: File | Blob;
+  original_file_type?: string;
+  [key: string]: unknown;
 }
 
 /** Request body for `POST /api/usermedia/save_category/`. */
 export interface SaveCategoriesRequest {
-    ids: (string | number)[]
-    titles: string[]
+  ids: (string | number)[];
+  titles: string[];
 }
 
 /** Response body from `POST /api/usermedia/save_category/`. */
 export interface SaveCategoriesResponse {
-    entries: ImageCategory[]
+  entries: ImageCategory[];
 }
 
 /** Request body for `POST /api/usermedia/delete/`. */
 export interface DeleteImagesRequest {
-    ids: (string | number)[]
+  ids: (string | number)[];
 }
 
-export type {DataTable}
+export type { DataTable };