@fiduswriter/bibliography-manager 0.1.6 → 0.1.8

package/src/overview/{index.js → index.ts}

@@ -12,17 +12,51 @@ import {
     setDocTitle,
     whenReady
 } from "fwtoolkit"
+import type {DialogButtonSpec} from "fwtoolkit/dialog"
+import type {DatatableBulk} from "fwtoolkit"
+import type {OverviewMenuModel} from "fwtoolkit/overview_menu"
+import type {ContentMenuInit} from "fwtoolkit/content_menu"
+import type {DataTable} from "simple-datatables"
 import {baseBodyTemplate, FeedbackTab, SiteMenu} from "@fiduswriter/common"
-import {plugins} from "../plugins/bibliography_overview/index.js"
+import {plugins as defaultBibPlugins} from "../plugins/bibliography_overview/index.js"
 import {getBibTypeTitle} from "../form/strings.js"
 import {litToText, nameToText} from "../tools.js"
+import type {
+    BibCategory,
+    BibliographyApp,
+    IdTranslation,
+    NameDictObject,
+    NodeArray
+} from "../types/biblio.js"
 import {bulkMenuModel, menuModel} from "./menu.js"
 import {editCategoriesTemplate} from "./templates.js"
 
+interface PluginExport {
+    new (overview: BibliographyOverview): {init: () => Promise<unknown> | void}
+    name: string
+}
+
+type BibPlugin = [string, Record<string, PluginExport>]
+
 export class BibliographyOverview {
-    constructor({app, user}) {
+    app: BibliographyApp
+    user: Record<string, unknown>
+    bibPlugins: BibPlugin[]
+    lastSort: {column: number; dir: "asc" | "desc"}
+    dom!: HTMLElement
+    overviewTable?: OverviewDataTable
+    table?: DataTable
+    dtBulk?: DatatableBulk
+    menu?: OverviewMenuView
+    plugins?: Record<string, {init: () => Promise<unknown> | void}>
+
+    constructor(
+        {app, user}: {app: BibliographyApp; user: Record<string, unknown>},
+        bibPlugins: BibPlugin[] = defaultBibPlugins as BibPlugin[]
+    ) {
         this.app = app
         this.user = user
+        this.bibPlugins = bibPlugins
 
         this.lastSort = {column: 0, dir: "asc"}
     }
@@ -30,12 +64,15 @@ export class BibliographyOverview {
     /** Bind the init function to doc loading.
      * @function bind
      */
-    init() {
+    init(): Promise<void> {
         return whenReady().then(() => {
             this.render()
             const smenu = new SiteMenu(this.app, "bibliography")
             smenu.init()
-            this.menu = new OverviewMenuView(this, menuModel)
+            this.menu = new OverviewMenuView(
+                this,
+                menuModel as () => OverviewMenuModel
+            )
             this.menu.init()
             this.setBibCategoryList(this.app.bibDB.cats)
             this.initTable(Object.keys(this.app.bibDB.db))
@@ -47,7 +84,7 @@ export class BibliographyOverview {
         })
     }
 
-    render() {
+    render(): void {
         this.dom = document.createElement("body")
         this.dom.innerHTML = baseBodyTemplate({
             contents: "",
@@ -66,7 +103,7 @@ export class BibliographyOverview {
         feedbackTab.init()
     }
 
-    onResize() {
+    onResize(): void {
         if (!this.table) {
             return
         }
@@ -74,18 +111,18 @@ export class BibliographyOverview {
     }
 
     /* Initialize the overview table */
-    initTable(ids) {
+    initTable(ids: string[]): void {
         if (this.overviewTable) {
             this.overviewTable.destroy()
-            this.overviewTable = null
+            this.overviewTable = undefined
         }
-        this.table = null
-        this.dtBulk = null
+        this.table = undefined
+        this.dtBulk = undefined
 
-        const contentsEl = this.dom.querySelector(".fw-contents")
+        const contentsEl = this.dom.querySelector(".fw-contents") as HTMLElement
         contentsEl.innerHTML = ""
 
-        const hiddenCols = [0]
+        const hiddenCols: number[] = [0]
 
         if (window.innerWidth < 500) {
             hiddenCols.push(1)
@@ -123,8 +160,8 @@ export class BibliographyOverview {
             data: ids.map(id => this.createTableRow(id)),
             idColumn: 0,
             checkboxColumn: 1,
-            bulkMenu: bulkMenuModel(),
-            bulkMenuPage: this,
+            bulkMenu: bulkMenuModel() as unknown as ContentMenuInit,
+            bulkMenuPage: this as Record<string, unknown>,
             searchable: true,
             scrollY: `${Math.max(window.innerHeight - 360, 100)}px`,
             tabIndex: 1,
@@ -145,19 +182,22 @@ export class BibliographyOverview {
                 `<div class='${options.classes.container}'${options.scrollY.length ? ` style='height: ${options.scrollY}; overflow-Y: auto;'` : ""}></div>`,
             rowRender: (row, tr, _index) => {
                 const id = row.cells[0].data
-                const inputNode = {
+                const inputNode: {
+                    nodeName: string
+                    attributes: Record<string, string | boolean | number>
+                } = {
                     nodeName: "input",
                     attributes: {
                         type: "checkbox",
                         class: "entry-select fw-check",
-                        "data-id": id,
+                        "data-id": id as number,
                         id: `bib-${id}`
                     }
                 }
                 if (row.cells[1].data) {
                     inputNode.attributes.checked = true
                 }
-                tr.childNodes[0].childNodes = [
+                ;(tr as {childNodes: {childNodes: unknown[]}[]}).childNodes[0].childNodes = [
                     inputNode,
                     {
                         nodeName: "label",
@@ -171,22 +211,22 @@ export class BibliographyOverview {
                 if (this.getSelected().length > 0) {
                     return
                 }
-                const rowIndex = this.table.data.data.indexOf(row)
-                const editButton = this.table.dom.querySelector(
+                const rowIndex = this.table!.data.data.indexOf(row as never)
+                const editButton = this.table!.dom.querySelector(
                     `tr[data-index="${rowIndex}"] span.edit-bib`
                 )
                 if (editButton) {
-                    editButton.click()
+                    ;(editButton as HTMLElement).click()
                 }
             },
             onDelete: row => {
-                const bibId = row.cells[0].data
+                const bibId = row.cells[0].data as number
                 this.deleteBibEntryDialog([bibId])
             }
         })
         this.overviewTable.init()
-        this.table = this.overviewTable.table
-        this.table.id = "bibliography"
+        this.table = this.overviewTable.table as DataTable
+        ;(this.table as unknown as {id: string}).id = "bibliography"
         this.dtBulk = this.overviewTable.dtBulk
 
         this.table.on("datatable.sort", (column, dir) => {
@@ -200,75 +240,79 @@ export class BibliographyOverview {
      * @function setBibCategoryList
      * @param newBibCategories The new categories which will be added to the existing ones.
      */
-    setBibCategoryList(bibCategories) {
-        const catSelector = this.menu.model.content.find(
+    setBibCategoryList(bibCategories: BibCategory[]): void {
+        const catSelector = this.menu!.model.content.find(
             menuItem => menuItem.id === "cat_selector"
         )
-        catSelector.content = catSelector.content.filter(
-            cat => cat.type !== "category"
-        )
+        if (!catSelector) {
+            return
+        }
+        const dropdown = catSelector as {
+            content: {type?: string; title?: string; action?: unknown}[]
+        }
+        dropdown.content = dropdown.content.filter(cat => cat.type !== "category")
 
-        catSelector.content = catSelector.content.concat(
+        dropdown.content = dropdown.content.concat(
             bibCategories.map(cat => ({
                 title: cat.category_title,
                 type: "category",
-                action: _overview => {
+                action: (_overview: BibliographyOverview) => {
                     const trs = this.dom.querySelectorAll(
                         "#bibliography > tbody > tr"
                     )
                     trs.forEach(tr => {
+                        const titleEl = tr.querySelector(".fw-data-table-title")
                         if (
-                            tr
-                                .querySelector(".fw-data-table-title")
-                                .classList.contains(`cat_${cat.id}`)
+                            titleEl &&
+                            titleEl.classList.contains(`cat_${cat.id}`)
                         ) {
-                            tr.style.display = ""
+                            ;(tr as HTMLElement).style.display = ""
                         } else {
-                            tr.style.display = "none"
+                            ;(tr as HTMLElement).style.display = "none"
                         }
                     })
                 }
             }))
         )
-        this.menu.update()
+        this.menu!.update()
     }
 
     /** This takes a list of new bib entries and adds them to BibDB and the bibliography table
      * @function updateTable
      */
-    updateTable(ids) {
+    updateTable(ids: number[]): void {
         // Remove items that already exist
         this.removeTableRows(ids)
-        this.table.insert({data: ids.map(id => this.createTableRow(id))})
+        this.table!.insert({data: ids.map(id => this.createTableRow(id))})
         // Redo last sort
-        this.table.columns.sort(this.lastSort.column, this.lastSort.dir)
+        this.table!.columns.sort(this.lastSort.column, this.lastSort.dir)
     }
 
-    createTableRow(id) {
-        const bibInfo = this.app.bibDB.db[id]
+    createTableRow(id: string | number): (string | number | boolean)[] {
+        const bibInfo = this.app.bibDB.db[id as number]
         const bibauthors = bibInfo.fields.author || bibInfo.fields.editor
         const cats = bibInfo.cats.map(cat => `cat_${cat}`)
         return [
-            id,
+            id as number,
             false, // checkbox
             `<span class="fw-data-table-title ${cats.join(" ")}">
                 <i class="fa fa-book"></i>
                 <span class="edit-bib fw-link-text fw-searchable" data-id="${id}">
-                    ${bibInfo.fields.title?.length ? escapeText(litToText(bibInfo.fields.title)) : gettext("Untitled")}
+                    ${(bibInfo.fields.title as NodeArray | undefined)?.length ? escapeText(litToText(bibInfo.fields.title as NodeArray)) : gettext("Untitled")}
                 </span>
                 ${bibInfo.entry_key ? `<small class="bib-entry-key">${escapeText(bibInfo.entry_key)}</small>` : ""}
             </span>`, // title
             getBibTypeTitle(bibInfo.bib_type), // sourcetype
-            bibauthors ? nameToText(bibauthors) : "", // author
-            `<span class="fw-date">${bibInfo.fields.date ? bibInfo.fields.date.replace("/", " ") : ""}</span>`, // published,
+            bibauthors ? nameToText(bibauthors as NameDictObject[]) : "", // author
+            `<span class="fw-date">${bibInfo.fields.date ? (bibInfo.fields.date as string).replace("/", " ") : ""}</span>`, // published,
             `<span class="delete-bib fw-link-text" data-id="${id}"><i class="fa fa-trash-alt">  </i></span>` // delete icon
         ]
     }
 
-    removeTableRows(ids) {
-        const existingRows = this.table.data.data
+    removeTableRows(ids: number[]): void {
+        const existingRows = this.table!.data.data
             .map((row, index) => {
-                const id = row.cells[0].data
+                const id = row.cells[0].data as number
                 if (ids.includes(id)) {
                     return index
                 } else {
@@ -278,14 +322,14 @@ export class BibliographyOverview {
             .filter(rowIndex => rowIndex !== false)
 
         if (existingRows.length) {
-            this.table.rows.remove(existingRows)
+            this.table!.rows.remove(existingRows as number[])
         }
     }
 
     /** Opens a dialog for editing categories.
      * @function editCategoriesDialog
      */
-    editCategoriesDialog() {
+    editCategoriesDialog(): void {
         if (this.app.isOffline()) {
             addAlert(
                 "info",
@@ -295,20 +339,23 @@ export class BibliographyOverview {
             )
             return
         }
-        const buttons = [
+        const buttons: DialogButtonSpec[] = [
             {
                 text: gettext("Submit"),
                 classes: "fw-dark",
                 click: () => {
-                    const cats = {ids: [], titles: []}
+                    const cats: {ids: number[]; titles: string[]} = {
+                        ids: [],
+                        titles: []
+                    }
                     this.dom
                         .querySelectorAll("#edit-categories .category-form")
                         .forEach(el => {
-                            const title = el.value.trim()
+                            const title = (el as HTMLInputElement).value.trim()
                             if (title.length) {
                                 cats.ids.push(
                                     Number.parseInt(
-                                        el.getAttribute("data-id") || 0
+                                        el.getAttribute("data-id") || "0"
                                     )
                                 )
                                 cats.titles.push(title)
@@ -349,8 +396,8 @@ export class BibliographyOverview {
      * @function deleteBibEntryDialog
      * @param ids Ids of items that are to be deleted.
      */
-    deleteBibEntryDialog(ids) {
-        const buttons = [
+    deleteBibEntryDialog(ids: number[]): void {
+        const buttons: DialogButtonSpec[] = [
             {
                 text: gettext("Delete"),
                 classes: "fw-dark",
@@ -375,13 +422,13 @@ export class BibliographyOverview {
     }
 
     // get IDs of selected bib entries
-    getSelected() {
+    getSelected(): number[] {
         return Array.from(
             this.dom.querySelectorAll(".entry-select:checked:not(:disabled)")
-        ).map(el => Number.parseInt(el.getAttribute("data-id")))
+        ).map(el => Number.parseInt(el.getAttribute("data-id") || ""))
     }
 
-    activatePlugins() {
+    activatePlugins(): Promise<unknown> | void {
         if (this.plugins) {
             // Plugins have been activated already
             return
@@ -390,18 +437,18 @@ export class BibliographyOverview {
         this.plugins = {}
 
         return Promise.all(
-            plugins.map(([app, plugin]) => {
+            this.bibPlugins.map(([app, plugin]) => {
                 if (!this.app.settings.APPS.includes(app)) {
                     return Promise.resolve()
                 }
                 return Promise.all(
                     Object.values(plugin).map(pluginExport => {
                         if (typeof pluginExport === "function") {
-                            this.plugins[pluginExport.name] = new pluginExport(
+                            this.plugins![pluginExport.name] = new pluginExport(
                                 this
                             )
                             return (
-                                this.plugins[pluginExport.name].init() ||
+                                this.plugins![pluginExport.name].init() ||
                                 Promise.resolve()
                             )
                         }
@@ -415,7 +462,7 @@ export class BibliographyOverview {
     /** Initialize the bibliography table and bind interactive parts.
      * @function bibEvents
      */
-    bindEvents() {
+    bindEvents(): void {
         this.dom.addEventListener("click", event =>
             this.handleActivation(event)
         )
@@ -425,58 +472,77 @@ export class BibliographyOverview {
 
         // Allow pasting of bibtex data.
         this.dom.addEventListener("paste", event => {
-            if (event.target.nodeName === "INPUT") {
+            if ((event.target as Element).nodeName === "INPUT") {
                 // We are inside of an input element, cancel.
                 return false
             }
+            if (!event.clipboardData) {
+                return false
+            }
             const text = event.clipboardData.getData("text")
             return this.getBibtex(text)
         })
 
         // The two drag events are needed to allow dropping
         this.dom.addEventListener("dragover", event => {
-            if (event.dataTransfer.types.includes("text/plain")) {
+            if (
+                event.dataTransfer &&
+                event.dataTransfer.types.includes("text/plain")
+            ) {
                 event.preventDefault()
             }
         })
 
         this.dom.addEventListener("dragenter", event => {
-            if (event.dataTransfer.types.includes("text/plain")) {
+            if (
+                event.dataTransfer &&
+                event.dataTransfer.types.includes("text/plain")
+            ) {
                 event.preventDefault()
             }
         })
 
         // Allow dropping of bibtex data
         this.dom.addEventListener("drop", event => {
-            if (event.target.nodeName === "INPUT") {
+            if ((event.target as Element).nodeName === "INPUT") {
                 // We are inside of an input element, cancel.
                 return false
             }
+            if (!event.dataTransfer) {
+                return false
+            }
             const text = fixUTF8(event.dataTransfer.getData("text"))
             return this.getBibtex(text)
         })
     }
 
-    handleActivation(event) {
+    handleActivation(event: Event): void {
         if (!isActivationEvent(event)) {
             return
         }
-        const el = {}
+        const el: {target?: Element | null} = {}
         switch (true) {
             case findTarget(event, ".delete-bib", el): {
-                const bibId = Number.parseInt(el.target.dataset.id)
+                const bibId = Number.parseInt(
+                    (el.target as HTMLElement).dataset.id || ""
+                )
                 this.deleteBibEntryDialog([bibId])
                 break
             }
             case findTarget(event, ".edit-bib", el): {
-                const bibId = Number.parseInt(el.target.dataset.id)
+                const bibId = Number.parseInt(
+                    (el.target as HTMLElement).dataset.id || ""
+                )
                 import("../form/index.js").then(({BibEntryForm}) => {
                     const form = new BibEntryForm(
                         this.app.bibDB,
                         this.app,
                         bibId
                     )
-                    form.init().then(idTranslations => {
+                    form.init().then((idTranslations: IdTranslation[] | void) => {
+                        if (!idTranslations) {
+                            return
+                        }
                         const ids = idTranslations.map(idTrans => idTrans[1])
                         return this.updateTable(ids)
                     })
@@ -484,7 +550,10 @@ export class BibliographyOverview {
                 break
             }
             case findTarget(event, ".fw-add-input", el): {
-                const itemEl = el.target.closest(".fw-list-input")
+                const itemEl = (el.target as HTMLElement).closest(".fw-list-input")
+                if (!itemEl) {
+                    break
+                }
                 if (!itemEl.nextElementSibling) {
                     itemEl.insertAdjacentHTML(
                         "afterend",
@@ -496,7 +565,7 @@ export class BibliographyOverview {
                         </tr>`
                     )
                 } else {
-                    itemEl.parentElement.removeChild(itemEl)
+                    itemEl.parentElement!.removeChild(itemEl)
                 }
                 break
             }
@@ -506,7 +575,7 @@ export class BibliographyOverview {
     }
 
     // find bibtex in pasted or dropped data.
-    getBibtex(text) {
+    getBibtex(text: string): boolean {
         import("../import/index.js").then(({BibliographyImporter}) => {
             const importer = new BibliographyImporter(
                 text,
@@ -519,30 +588,30 @@ export class BibliographyOverview {
         return true
     }
 
-    saveCategories(cats) {
+    saveCategories(cats: {ids: number[]; titles: string[]}): void {
         this.app.bibDB
             .saveCategories(cats)
             .then(bibCats => this.setBibCategoryList(bibCats))
     }
 
-    deleteBibEntries(ids) {
+    deleteBibEntries(ids: number[]): void {
         this.app.bibDB
             .deleteBibEntries(ids)
             .then(ids => this.removeTableRows(ids))
     }
 
-    close() {
+    close(): void {
         if (this.table) {
             this.table.destroy()
-            this.table = null
+            this.table = undefined
         }
         if (this.dtBulk) {
             this.dtBulk.destroy()
-            this.dtBulk = null
+            this.dtBulk = undefined
         }
         if (this.menu) {
             this.menu.destroy()
-            this.menu = null
+            this.menu = undefined
         }
     }
 }

package/src/overview/{menu.js → menu.ts}

@@ -1,26 +1,28 @@
 import {BibLatexFileExporter} from "../export/index.js"
 import {BibliographyFileImportDialog} from "../import/index.js"
+import type {IdTranslation} from "../types/biblio.js"
+import type {BibliographyOverview} from "./index.js"
 
 export const bulkMenuModel = () => ({
     content: [
         {
             title: gettext("Delete selected"),
             tooltip: gettext("Delete selected bibliography entries."),
-            action: overview => {
+            action: (overview: BibliographyOverview) => {
                 const ids = overview
                     .getSelected()
-                    .map(id => Number.parseInt(id))
+                    .map(id => Number.parseInt(String(id)))
                 if (ids.length) {
                     overview.deleteBibEntryDialog(ids)
                 }
             },
-            disabled: overview =>
+            disabled: (overview: BibliographyOverview) =>
                 !overview.getSelected().length || overview.app.isOffline()
         },
         {
             title: gettext("Export selected"),
             tooltip: gettext("Export selected bibliography entries."),
-            action: overview => {
+            action: (overview: BibliographyOverview) => {
                 const ids = overview.getSelected()
                 if (ids.length) {
                     const exporter = new BibLatexFileExporter(
@@ -30,7 +32,7 @@ export const bulkMenuModel = () => ({
                     exporter.init()
                 }
             },
-            disabled: overview =>
+            disabled: (overview: BibliographyOverview) =>
                 !overview.getSelected().length || overview.app.isOffline()
         }
     ]
@@ -45,11 +47,11 @@ export const menuModel = () => ({
             content: [
                 {
                     title: gettext("All categories"),
-                    action: _overview => {
+                    action: (_overview: BibliographyOverview) => {
                         const trs = document.querySelectorAll(
                             "#bibliography > tbody > tr"
                         )
-                        trs.forEach(tr => (tr.style.display = ""))
+                        trs.forEach(tr => ((tr as HTMLElement).style.display = ""))
                     }
                 }
             ],
@@ -59,20 +61,23 @@ export const menuModel = () => ({
             type: "text",
             title: gettext("Edit categories"),
             keys: "Alt-e",
-            action: overview => overview.editCategoriesDialog(),
+            action: (overview: BibliographyOverview) => overview.editCategoriesDialog(),
             order: 2
         },
         {
             type: "text",
             title: gettext("Register new source"),
             keys: "Alt-n",
-            action: overview => {
+            action: (overview: BibliographyOverview) => {
                 import("../form/index.js").then(({BibEntryForm}) => {
                     const form = new BibEntryForm(
                         overview.app.bibDB,
                         overview.app
                     )
-                    form.init().then(idTranslations => {
+                    form.init().then((idTranslations: IdTranslation[] | void) => {
+                        if (!idTranslations) {
+                            return
+                        }
                         const ids = idTranslations.map(idTrans => idTrans[1])
                         return overview.updateTable(ids)
                     })
@@ -84,7 +89,7 @@ export const menuModel = () => ({
             type: "text",
             title: gettext("Import bibliography"),
             keys: "Alt-u",
-            action: overview => {
+            action: (overview: BibliographyOverview) => {
                 const fileImporter = new BibliographyFileImportDialog(
                     overview.app.bibDB,
                     ids => overview.updateTable(ids),
@@ -99,7 +104,8 @@ export const menuModel = () => ({
             icon: "search",
             title: gettext("Search bibliography"),
             keys: "Alt-s",
-            input: (overview, text) => overview.table.search(text),
+            input: (overview: BibliographyOverview, text: string) =>
+                overview.table!.search(text),
             order: 5
         }
     ]

package/src/overview/{templates.js → templates.ts}

@@ -1,7 +1,8 @@
 import {escapeText} from "fwtoolkit"
+import type {BibCategory} from "../types/biblio.js"
 
 /** A template for each category in the category list edit of the bibliography categories list. */
-const categoryFormsTemplate = ({categories}) =>
+const categoryFormsTemplate = ({categories}: {categories: BibCategory[]}) =>
     `${categories
         .map(
             cat =>
@@ -22,7 +23,7 @@ const categoryFormsTemplate = ({categories}) =>
     </tr>`
 
 /** A template for the editing of bibliography categories list. */
-export const editCategoriesTemplate = ({categories}) =>
+export const editCategoriesTemplate = ({categories}: {categories: BibCategory[]}) =>
     `<table id="editCategoryList" class="fw-dialog-table">
         <tbody>
             ${categoryFormsTemplate({categories})}

package/src/plugins/bibliography_overview/index.ts

@@ -0,0 +1 @@
+export const plugins: unknown[] = []