@fiduswriter/image-manager 0.1.13 → 0.1.16

package/src/overview/categories.ts

@@ -1,128 +1,118 @@
 import {
-    Dialog,
-    activateWait,
-    addAlert,
-    deactivateWait,
-    gettext,
-    postJson
-} from "fwtoolkit"
-import type {OverviewMenuDropdownItem} from "fwtoolkit/overview_menu"
+  Dialog,
+  activateWait,
+  addAlert,
+  deactivateWait,
+  gettext,
+} from "fwtoolkit";
+import type { OverviewMenuDropdownItem } from "fwtoolkit/overview_menu";
 
-import {usermediaEditcategoriesTemplate} from "./templates.js"
-import type {ImageOverview} from "./index.js"
-import type {
-    ImageCategory,
-    SaveCategoriesRequest,
-    SaveCategoriesResponse
-} from "../types.js"
+import { usermediaEditcategoriesTemplate } from "./templates.js";
+import type { ImageOverview } from "./index.js";
+import type { ImageCategory, SaveCategoriesRequest } from "../types.js";
 
 export class ImageOverviewCategories {
-    imageOverview: ImageOverview
+  imageOverview: ImageOverview;
 
-    constructor(imageOverview: ImageOverview) {
-        this.imageOverview = imageOverview
-        imageOverview.mod.categories = this
-    }
+  constructor(imageOverview: ImageOverview) {
+    this.imageOverview = imageOverview;
+    imageOverview.mod.categories = this;
+  }
 
-    //save changes or create a new category
-    saveCategories(cats: SaveCategoriesRequest): void {
-        activateWait()
+  //save changes or create a new category
+  saveCategories(cats: SaveCategoriesRequest): void {
+    activateWait();
 
-        postJson("/api/usermedia/save_category/", cats as unknown as Record<string, unknown>)
-            .catch(error => {
-                addAlert("error", gettext("Could not update categories"))
-                deactivateWait()
-                throw error
-            })
-            .then(({json}) => {
-                const response = json as SaveCategoriesResponse
-                this.imageOverview.app.imageDB.cats = response.entries
-                this.setImageCategoryList(response.entries)
-                addAlert("success", gettext("The categories have been updated"))
-                deactivateWait()
-            })
-    }
+    this.imageOverview.app.apiConnectors.image
+      .saveCategories(cats)
+      .catch((error) => {
+        addAlert("error", gettext("Could not update categories"));
+        deactivateWait();
+        throw error;
+      })
+      .then((response) => {
+        this.imageOverview.app.imageDB.cats = response.entries;
+        this.setImageCategoryList(response.entries);
+        addAlert("success", gettext("The categories have been updated"));
+        deactivateWait();
+      });
+  }
 
-    setImageCategoryList(imageCategories: ImageCategory[]): void {
-        const catSelector = this.imageOverview.menu.model.content.find(
-            (menuItem): menuItem is OverviewMenuDropdownItem =>
-                menuItem.id === "cat_selector"
-        )
-        if (!catSelector) {
-            return
-        }
-        catSelector.content = catSelector.content.filter(
-            cat => cat.type !== "category"
-        )
-        catSelector.content = catSelector.content.concat(
-            imageCategories.map(cat => ({
-                type: "category",
-                title: cat.category_title,
-                action: (_overview: unknown) => {
-                    const trs = document.querySelectorAll(
-                        "#imagelist > tbody > tr"
-                    )
-                    trs.forEach(tr => {
-                        const imageCell = tr.querySelector(".fw-usermedia-image")
-                        if (
-                            imageCell &&
-                            imageCell.classList.contains(`cat_${cat.id}`)
-                        ) {
-                            ;(tr as HTMLElement).style.display = ""
-                        } else {
-                            ;(tr as HTMLElement).style.display = "none"
-                        }
-                    })
-                }
-            }))
-        )
-        this.imageOverview.menu.update()
+  setImageCategoryList(imageCategories: ImageCategory[]): void {
+    const catSelector = this.imageOverview.menu.model.content.find(
+      (menuItem): menuItem is OverviewMenuDropdownItem =>
+        menuItem.id === "cat_selector",
+    );
+    if (!catSelector) {
+      return;
     }
-
-    //open a dialog for editing categories
-    editCategoryDialog(): void {
-        const buttons = [
-            {
-                text: gettext("Submit"),
-                classes: "fw-dark",
-                click: () => {
-                    const cats: SaveCategoriesRequest = {
-                        ids: [],
-                        titles: []
-                    }
-                    document
-                        .querySelectorAll("#edit-categories .category-form")
-                        .forEach(el => {
-                            const input = el as HTMLInputElement
-                            const thisVal = input.value.trim()
-                            let thisId: string | number = input.dataset.id || "0"
-                            if ("undefined" == typeof thisId) {
-                                thisId = 0
-                            }
-                            if ("" !== thisVal) {
-                                cats.ids.push(thisId)
-                                cats.titles.push(thisVal)
-                            }
-                        })
-                    this.saveCategories(cats)
-                    dialog.close()
-                }
-            },
-            {
-                type: "cancel" as const
+    catSelector.content = catSelector.content.filter(
+      (cat) => cat.type !== "category",
+    );
+    catSelector.content = catSelector.content.concat(
+      imageCategories.map((cat) => ({
+        type: "category",
+        title: cat.category_title,
+        action: (_overview: unknown) => {
+          const trs = document.querySelectorAll("#imagelist > tbody > tr");
+          trs.forEach((tr) => {
+            const imageCell = tr.querySelector(".fw-usermedia-image");
+            if (imageCell && imageCell.classList.contains(`cat_${cat.id}`)) {
+              (tr as HTMLElement).style.display = "";
+            } else {
+              (tr as HTMLElement).style.display = "none";
             }
-        ]
+          });
+        },
+      })),
+    );
+    this.imageOverview.menu.update();
+  }
 
-        const dialog = new Dialog({
-            id: "edit-categories",
-            title: gettext("Edit Categories"),
-            body: usermediaEditcategoriesTemplate({
-                categories: this.imageOverview.app.imageDB.cats
-            }),
-            width: 350,
-            height: 350,
-            buttons
-        })
-        dialog.open()
-    }
+  //open a dialog for editing categories
+  editCategoryDialog(): void {
+    const buttons = [
+      {
+        text: gettext("Submit"),
+        classes: "fw-dark",
+        click: () => {
+          const cats: SaveCategoriesRequest = {
+            ids: [],
+            titles: [],
+          };
+          document
+            .querySelectorAll("#edit-categories .category-form")
+            .forEach((el) => {
+              const input = el as HTMLInputElement;
+              const thisVal = input.value.trim();
+              let thisId: string | number = input.dataset.id || "0";
+              if ("undefined" == typeof thisId) {
+                thisId = 0;
+              }
+              if ("" !== thisVal) {
+                cats.ids.push(thisId);
+                cats.titles.push(thisVal);
+              }
+            });
+          this.saveCategories(cats);
+          dialog.close();
+        },
+      },
+      {
+        type: "cancel" as const,
+      },
+    ];
+
+    const dialog = new Dialog({
+      id: "edit-categories",
+      title: gettext("Edit Categories"),
+      body: usermediaEditcategoriesTemplate({
+        categories: this.imageOverview.app.imageDB.cats,
+      }),
+      width: 350,
+      height: 350,
+      buttons,
+    });
+    dialog.open();
+  }
 }

package/src/overview/index.ts

@@ -11,7 +11,6 @@ import {
   gettext,
   isActivationEvent,
   localizeDate,
-  post,
   setDocTitle,
   staticUrl,
   whenReady,
@@ -157,7 +156,8 @@ export class ImageOverview {
       return;
     }
     activateWait();
-    post("/api/usermedia/delete/", { ids: numericIds })
+    this.app.apiConnectors.image
+      .deleteImages(numericIds)
       .catch((error) => {
         addAlert("error", gettext("The image(s) could not be deleted"));
         deactivateWait();

package/src/overview/menu.ts

@@ -1,85 +1,85 @@
-import {gettext} from "fwtoolkit"
-import type {ContentMenuInit} from "fwtoolkit/content_menu"
-import type {OverviewMenuModel} from "fwtoolkit/overview_menu"
+import { gettext } from "fwtoolkit";
+import type { ContentMenuInit } from "fwtoolkit/content_menu";
+import type { OverviewMenuModel } from "fwtoolkit/overview_menu";
 
-import type {ImageManagerPage} from "../types.js"
-import type {ImageOverview} from "./index.js"
+import type { ImageManagerPage } from "../types.js";
+import type { ImageOverview } from "./index.js";
 
 export const bulkMenuModel = (): ContentMenuInit => ({
-    content: [
-        {
-            title: gettext("Delete selected"),
-            tooltip: gettext("Delete selected images."),
-            action: (overview: unknown) => {
-                const ids = (overview as ImageOverview).getSelected()
-                if (ids.length) {
-                    ;(overview as ImageOverview).deleteImageDialog(ids)
-                }
-            },
-            disabled: (overview: unknown) =>
-                !(overview as ImageOverview).getSelected().length ||
-                (overview as ImageOverview).app.isOffline()
+  content: [
+    {
+      title: gettext("Delete selected"),
+      tooltip: gettext("Delete selected images."),
+      action: (overview: unknown) => {
+        const ids = (overview as ImageOverview).getSelected();
+        if (ids.length) {
+          (overview as ImageOverview).deleteImageDialog(ids);
         }
-    ]
-})
+      },
+      disabled: (overview: unknown) =>
+        !(overview as ImageOverview).getSelected().length ||
+        (overview as ImageOverview).app.isOffline(),
+    },
+  ],
+});
 
 export const menuModel = (): OverviewMenuModel => ({
-    content: [
-        {
-            type: "dropdown",
-            id: "cat_selector",
-            keys: "Alt-c",
-            content: [
-                {
-                    title: gettext("All categories"),
-                    action: (_overview: unknown) => {
-                        const trs = document.querySelectorAll(
-                            "#imagelist > tbody > tr"
-                        )
-                        trs.forEach(tr => ((tr as HTMLElement).style.display = ""))
-                    }
-                }
-            ],
-            order: 1
-        },
+  content: [
+    {
+      type: "dropdown",
+      id: "cat_selector",
+      keys: "Alt-c",
+      content: [
         {
-            type: "text",
-            title: gettext("Edit categories"),
-            keys: "Alt-e",
-            action: (overview: unknown) =>
-                (overview as ImageOverview).mod.categories!.editCategoryDialog(),
-            order: 2,
-            disabled: (overview: unknown) => (overview as ImageOverview).app.isOffline()
+          title: gettext("All categories"),
+          action: (_overview: unknown) => {
+            const trs = document.querySelectorAll("#imagelist > tbody > tr");
+            trs.forEach((tr) => ((tr as HTMLElement).style.display = ""));
+          },
         },
-        {
-            type: "text",
-            title: gettext("Upload new image"),
-            keys: "Alt-u",
-            action: (overview: unknown) => {
-                import("../edit_dialog/index.js").then(({ImageEditDialog}) => {
-                    const imageUpload = new ImageEditDialog(
-                        (overview as ImageOverview).app.imageDB,
-                        false,
-                        overview as ImageManagerPage
-                    )
-                    imageUpload.init().then(imageId => {
-                        if (imageId) {
-                            ;(overview as ImageOverview).updateTable([imageId])
-                        }
-                    })
-                })
-            },
-            order: 3,
-            disabled: (overview: unknown) => (overview as ImageOverview).app.isOffline()
-        },
-        {
-            type: "search",
-            icon: "search",
-            title: gettext("Search images"),
-            keys: "Alt-s",
-            input: (overview: unknown, text: string) =>
-                (overview as ImageOverview).table!.search(text),
-            order: 4
-        }
-    ]
-})
+      ],
+      order: 1,
+    },
+    {
+      type: "text",
+      title: gettext("Edit categories"),
+      keys: "Alt-e",
+      action: (overview: unknown) =>
+        (overview as ImageOverview).mod.categories!.editCategoryDialog(),
+      order: 2,
+      disabled: (overview: unknown) =>
+        (overview as ImageOverview).app.isOffline(),
+    },
+    {
+      type: "text",
+      title: gettext("Upload new image"),
+      keys: "Alt-u",
+      action: (overview: unknown) => {
+        import("../edit_dialog/index.js").then(({ ImageEditDialog }) => {
+          const imageUpload = new ImageEditDialog(
+            (overview as ImageOverview).app.imageDB,
+            false,
+            overview as ImageManagerPage,
+          );
+          imageUpload.init().then((imageId) => {
+            if (imageId) {
+              (overview as ImageOverview).updateTable([imageId]);
+            }
+          });
+        });
+      },
+      order: 3,
+      disabled: (overview: unknown) =>
+        (overview as ImageOverview).app.isOffline(),
+    },
+    {
+      type: "search",
+      icon: "search",
+      title: gettext("Search images"),
+      keys: "Alt-s",
+      input: (overview: unknown, text: string) =>
+        (overview as ImageOverview).table!.search(text),
+      order: 4,
+    },
+  ],
+});