@fiduswriter/editor 0.1.19 → 0.1.21

package/src/documents/access_rights/{index.js → index.ts}

@@ -10,8 +10,8 @@ import {
     postJson,
     setCheckableLabel
 } from "fwtoolkit"
+import type {ContentMenuInit} from "fwtoolkit/content_menu"
 
-ensureCSS(staticUrl("css/checkable_list.css"))
 import {AddContactDialog} from "../../contacts/add_dialog.js"
 import {
     collaboratorsTemplate,
@@ -23,13 +23,71 @@ import {
     shareTokenRowTemplate
 } from "./templates.js"
 
+ensureCSS(staticUrl("css/checkable_list.css"))
+
+interface Contact {
+    id: number | string
+    type: string
+    name: string
+    avatar?: string
+}
+
+interface AccessRightHolder {
+    id: number
+    type: string
+}
+
+interface AccessRight {
+    document_id?: number
+    holder: AccessRightHolder
+    rights: string
+}
+
+interface Collaborator {
+    holder: Contact
+    rights: string
+    count: number
+}
+
+interface ShareToken {
+    id: number
+    share_url: string
+    expires_at?: string
+    note?: string
+    rights: string
+}
+
+interface AccessRightsTabOptions {
+    documentIds: number[]
+    contacts: Contact[]
+    newContactCall: (contactData: Contact) => void
+    e2ee: boolean
+    documentPassword?: string
+    onShareSuccess?: (accessRights: AccessRight[]) => void
+    settings: Record<string, unknown>
+    container?: HTMLElement | null
+}
+
+interface AccessRightMenuItem {
+    type?: "header" | "action" | "separator"
+    title: string
+    tooltip?: string
+    icon?: string
+    right?: string
+    action?: () => void
+    selected?: boolean
+}
+
 /**
  * Build the collaborators list from raw access rights and document IDs.
  */
-function getCollaborators(accessRights, documentIds) {
-    const docCollabs = {}
+function getCollaborators(
+    accessRights: AccessRight[],
+    documentIds: number[]
+): Collaborator[] {
+    const docCollabs: Record<string, Collaborator> = {}
     accessRights.forEach(ar => {
-        if (!documentIds.includes(ar.document_id)) {
+        if (!ar.document_id || !documentIds.includes(ar.document_id)) {
             return
         }
         const holderIdent = ar.holder.type + ar.holder.id
@@ -39,8 +97,10 @@ function getCollaborators(accessRights, documentIds) {
             }
             docCollabs[holderIdent].count += 1
         } else {
-            docCollabs[holderIdent] = Object.assign({}, ar)
-            docCollabs[holderIdent].count = 1
+            docCollabs[holderIdent] = Object.assign({}, ar, {
+                holder: {id: ar.holder.id, type: ar.holder.type},
+                count: 1
+            }) as unknown as Collaborator
         }
     })
     return Object.values(docCollabs).filter(
@@ -51,17 +111,18 @@ function getCollaborators(accessRights, documentIds) {
 /**
  * Collect access rights from the DOM inside a given container.
  */
-function collectAccessRights(container) {
-    const accessRights = []
+function collectAccessRights(container: HTMLElement): AccessRight[] {
+    const accessRights: AccessRight[] = []
     container
         .querySelectorAll("#share-contact .fw-collaborator-tr")
         .forEach(el => {
+            const htmlEl = el as HTMLElement
             accessRights.push({
                 holder: {
-                    id: Number.parseInt(el.dataset.id),
-                    type: el.dataset.type
+                    id: Number.parseInt(htmlEl.dataset.id || "0"),
+                    type: htmlEl.dataset.type || ""
                 },
-                rights: el.dataset.rights
+                rights: htmlEl.dataset.rights || ""
             })
         })
     return accessRights
@@ -74,29 +135,42 @@ function collectAccessRights(container) {
  * or wrapped in its own Dialog via DocumentAccessRightsDialog.
  */
 export class AccessRightsTab {
+    documentIds: number[]
+    contacts: Contact[]
+    newContactCall: (contactData: Contact) => void
+    singleDocumentId: number | null
+    e2ee: boolean
+    documentPassword: string
+    onShareSuccess?: (accessRights: AccessRight[]) => void
+    settings: Record<string, unknown>
+    container: HTMLElement | null
+    accessRights: AccessRight[]
+    dialogTabs!: DialogTabs
+
     constructor({
         documentIds,
         contacts,
         newContactCall,
         e2ee,
-        documentPassword,
+        documentPassword = "",
         onShareSuccess,
         settings,
         container = null
-    }) {
+    }: AccessRightsTabOptions) {
         this.documentIds = documentIds
         this.contacts = contacts
         this.newContactCall = newContactCall
-        this.singleDocumentId = documentIds.length === 1 ? documentIds[0] : null
+        this.singleDocumentId =
+            documentIds.length === 1 ? documentIds[0] : null
         this.e2ee = e2ee
         this.documentPassword = documentPassword
         this.onShareSuccess = onShareSuccess
         this.settings = settings
-        this.container = container
+        this.container = container || null
         this.accessRights = []
     }
 
-    load() {
+    load(): Promise<void> {
         return postJson("/api/document/get_access_rights/", {
             document_ids: this.documentIds
         })
@@ -104,12 +178,13 @@ export class AccessRightsTab {
                 addAlert("error", gettext("Cannot load document access data."))
                 throw error
             })
-            .then(({json}) => {
-                this.accessRights = json.access_rights
+            .then(({json}: {json: unknown}) => {
+                const data = json as {access_rights: AccessRight[]}
+                this.accessRights = data.access_rights
             })
     }
 
-    render() {
+    render(): string {
         const collaborators = getCollaborators(
             this.accessRights,
             this.documentIds
@@ -156,7 +231,7 @@ export class AccessRightsTab {
         return html
     }
 
-    bindEvents() {
+    bindEvents(): void {
         const container = this.container
         if (!container) {
             return
@@ -165,38 +240,38 @@ export class AccessRightsTab {
         // Add selected contacts to collaborators
         container
             .querySelector("#add-share-contact")
-            .addEventListener("click", () => {
-                const selectedData = []
+            ?.addEventListener("click", () => {
+                const selectedData: Collaborator[] = []
                 container
                     .querySelectorAll("#my-contacts .fw-checkable.fw-checked")
                     .forEach(el => {
+                        const htmlEl = el as HTMLElement
                         const collaboratorEl = container.querySelector(
-                            `#collaborator-${el.dataset.type}-${el.dataset.id}`
+                            `#collaborator-${htmlEl.dataset.type}-${htmlEl.dataset.id}`
                         )
                         if (collaboratorEl) {
-                            if (collaboratorEl.dataset.rights === "delete") {
-                                collaboratorEl.dataset.rights = "read"
+                            const colRow = collaboratorEl as HTMLElement
+                            if (colRow.dataset.rights === "delete") {
+                                colRow.dataset.rights = "read"
                                 const accessRightIcon =
-                                    collaboratorEl.querySelector(
-                                        ".fw-icon-access-right"
-                                    )
-                                accessRightIcon.classList.remove(
+                                    colRow.querySelector(".fw-icon-access-right")
+                                accessRightIcon?.classList.remove(
                                     "icon-access-delete"
                                 )
-                                accessRightIcon.classList.add(
+                                accessRightIcon?.classList.add(
                                     "icon-access-read"
                                 )
                             }
                         } else {
                             const collaborator = this.contacts.find(
                                 contact =>
-                                    contact.type === el.dataset.type &&
+                                    contact.type === htmlEl.dataset.type &&
                                     contact.id ===
-                                        Number.parseInt(el.dataset.id)
+                                        Number.parseInt(htmlEl.dataset.id || "0")
                             )
                             if (!collaborator) {
                                 console.warn(
-                                    `No contact found of type: ${el.dataset.type} id: ${el.dataset.id}.`
+                                    `No contact found of type: ${htmlEl.dataset.type} id: ${htmlEl.dataset.id}.`
                                 )
                                 return
                             }
@@ -207,7 +282,8 @@ export class AccessRightsTab {
                                     name: collaborator.name,
                                     avatar: collaborator.avatar
                                 },
-                                rights: "read"
+                                rights: "read",
+                                count: 1
                             })
                         }
                     })
@@ -219,7 +295,7 @@ export class AccessRightsTab {
                     .forEach(el => el.classList.remove("fw-checked"))
                 container
                     .querySelector("#share-contact table tbody")
-                    .insertAdjacentHTML(
+                    ?.insertAdjacentHTML(
                         "beforeend",
                         collaboratorsTemplate({
                             collaborators: selectedData
@@ -232,69 +308,82 @@ export class AccessRightsTab {
 
         // Share-link actions
         container.addEventListener("click", event => {
-            const el = {}
+            const el: {target?: Element | null} = {}
             if (findTarget(event, "#create-share-token-btn", el)) {
                 this.openCreateShareTokenDialog()
                 return
             }
             if (findTarget(event, ".copy-share-token-btn", el)) {
-                const url = el.target.closest(".copy-share-token-btn").dataset
-                    .url
-                navigator.clipboard.writeText(url).then(
-                    () =>
-                        addAlert(
-                            "success",
-                            gettext("Link copied to clipboard.")
-                        ),
-                    () => addAlert("error", gettext("Could not copy link."))
-                )
+                const url = (
+                    (el.target as HTMLElement).closest(
+                        ".copy-share-token-btn"
+                    ) as HTMLElement | null
+                )?.dataset.url
+                if (url) {
+                    navigator.clipboard.writeText(url).then(
+                        () =>
+                            addAlert(
+                                "success",
+                                gettext("Link copied to clipboard.")
+                            ),
+                        () => addAlert("error", gettext("Could not copy link."))
+                    )
+                }
                 return
             }
             if (findTarget(event, ".revoke-share-token-btn", el)) {
-                const btn = el.target.closest(".revoke-share-token-btn")
-                const tokenId = Number.parseInt(btn.dataset.tokenId)
+                const btn = (el.target as HTMLElement).closest(
+                    ".revoke-share-token-btn"
+                ) as HTMLElement
+                const tokenId = Number.parseInt(btn.dataset.tokenId || "0")
                 const rowEl = btn.closest(".share-token-row")
-                this.revokeShareToken(tokenId, rowEl)
+                if (rowEl) {
+                    this.revokeShareToken(tokenId, rowEl as HTMLElement)
+                }
                 return
             }
         })
 
         // Collaborator actions
         container.addEventListener("click", event => {
-            const el = {}
+            const el: {target?: Element | null} = {}
             switch (true) {
                 case findTarget(event, ".fw-checkable", el):
-                    setCheckableLabel(el.target)
+                    setCheckableLabel(el.target as HTMLElement)
                     break
                 case findTarget(event, ".delete-collaborator", el): {
-                    const colRow = el.target.closest(".fw-collaborator-tr")
+                    const colRow = (el.target as HTMLElement).closest(
+                        ".fw-collaborator-tr"
+                    ) as HTMLElement
                     colRow.dataset.rights = "delete"
-                    colRow
-                        .querySelector(".fw-icon-access-right")
-                        .setAttribute(
-                            "class",
-                            "fw-icon-access-right icon-access-delete"
-                        )
+                    const icon = colRow.querySelector(".fw-icon-access-right")
+                    icon?.setAttribute(
+                        "class",
+                        "fw-icon-access-right icon-access-delete"
+                    )
                     break
                 }
                 case findTarget(event, ".edit-right", el): {
-                    const colRow = el.target.closest(".fw-collaborator-tr")
-                    const currentRight = colRow.dataset.rights
+                    const colRow = (el.target as HTMLElement).closest(
+                        ".fw-collaborator-tr"
+                    ) as HTMLElement
+                    const currentRight = colRow.dataset.rights || ""
                     const menu = this.getDropdownMenu(
                         currentRight,
                         newRight => {
                             colRow.dataset.rights = newRight
-                            colRow
-                                .querySelector(".fw-icon-access-right")
-                                .setAttribute(
-                                    "class",
-                                    `icon-access-right icon-access-${newRight}`
-                                )
+                            const icon = colRow.querySelector(
+                                ".fw-icon-access-right"
+                            )
+                            icon?.setAttribute(
+                                "class",
+                                `icon-access-right icon-access-${newRight}`
+                            )
                         }
                     )
                     const contentMenu = new ContentMenu({
-                        menu,
-                        menuPos: {X: event.pageX, Y: event.pageY},
+                        menu: menu as ContentMenuInit,
+                        menuPos: {X: (event as MouseEvent).pageX, Y: (event as MouseEvent).pageY},
                         width: 200
                     })
                     contentMenu.open()
@@ -306,10 +395,13 @@ export class AccessRightsTab {
         })
     }
 
-    getDropdownMenu(currentRight, onChange) {
+    getDropdownMenu(
+        currentRight: string,
+        onChange: (newRight: string) => void
+    ): {content: AccessRightMenuItem[]} {
         const E2EE_ALLOWED_RIGHTS = ["write", "read-without-comments", "read"]
 
-        const allItems = [
+        const allItems: AccessRightMenuItem[] = [
             {
                 type: "header",
                 title: gettext("Basic"),
@@ -396,7 +488,7 @@ export class AccessRightsTab {
                   if (item.type === "header") {
                       return true
                   }
-                  return E2EE_ALLOWED_RIGHTS.includes(item.right)
+                  return item.right && E2EE_ALLOWED_RIGHTS.includes(item.right)
               })
             : allItems
 
@@ -404,7 +496,9 @@ export class AccessRightsTab {
             if (item.type === "header") {
                 const nextItems = content.slice(index + 1)
                 const nextAction = nextItems.find(i => i.type === "action")
-                const nextHeader = nextItems.findIndex(i => i.type === "header")
+                const nextHeader = nextItems.findIndex(
+                    i => i.type === "header"
+                )
                 if (!nextAction) {
                     return false
                 }
@@ -421,8 +515,8 @@ export class AccessRightsTab {
         return {content: filteredContent}
     }
 
-    loadShareTokens() {
-        const listEl = this.container.querySelector("#share-token-list")
+    loadShareTokens(): void {
+        const listEl = this.container?.querySelector("#share-token-list")
         if (!listEl) {
             return
         }
@@ -430,9 +524,10 @@ export class AccessRightsTab {
         postJson("/api/document/share_token/list/", {
             document_id: this.singleDocumentId
         })
-            .then(({json}) => {
+            .then(({json}: {json: unknown}) => {
+                const data = json as {tokens: ShareToken[]}
                 listEl.innerHTML = shareTokenListTemplate({
-                    tokens: json.tokens
+                    tokens: data.tokens
                 })
             })
             .catch(() => {
@@ -440,7 +535,7 @@ export class AccessRightsTab {
             })
     }
 
-    openCreateShareTokenDialog() {
+    openCreateShareTokenDialog(): void {
         const createDialog = new Dialog({
             title: gettext("Create share link"),
             id: "create-share-token-dialog",
@@ -454,28 +549,35 @@ export class AccessRightsTab {
                     text: gettext("Create"),
                     classes: "fw-dark",
                     click: () => {
-                        const rights = createDialog.dialogEl.querySelector(
-                            "#share-token-rights"
+                        const rights = (
+                            createDialog.dialogEl.querySelector(
+                                "#share-token-rights"
+                            ) as HTMLSelectElement
                         ).value
-                        const expiresRaw = createDialog.dialogEl.querySelector(
-                            "#share-token-expires"
+                        const expiresRaw = (
+                            createDialog.dialogEl.querySelector(
+                                "#share-token-expires"
+                            ) as HTMLInputElement
                         ).value
-                        const note = createDialog.dialogEl
-                            .querySelector("#share-token-note")
-                            .value.trim()
+                        const note = (
+                            createDialog.dialogEl.querySelector(
+                                "#share-token-note"
+                            ) as HTMLInputElement
+                        ).value.trim()
                         postJson("/api/document/share_token/create/", {
                             document_id: this.singleDocumentId,
                             rights,
                             expires_at: expiresRaw || "",
                             note
                         })
-                            .then(({json}) => {
-                                let shareUrl = json.share_url
+                            .then(({json}: {json: unknown}) => {
+                                const data = json as ShareToken
+                                let shareUrl = data.share_url
                                 if (this.e2ee) {
                                     const passwordInput =
                                         createDialog.dialogEl.querySelector(
                                             "#share-token-password"
-                                        )
+                                        ) as HTMLInputElement | null
                                     const password = passwordInput
                                         ? passwordInput.value.trim()
                                         : ""
@@ -483,19 +585,19 @@ export class AccessRightsTab {
                                         shareUrl = `${shareUrl}#?password=${encodeURIComponent(password)}`
                                     }
                                 }
-                                json.share_url = shareUrl
+                                data.share_url = shareUrl
                                 const listEl =
-                                    this.container.querySelector(
+                                    this.container?.querySelector(
                                         "#share-token-list"
                                     )
                                 const placeholder =
-                                    listEl.querySelector(".fw-ar-no-tokens")
+                                    listEl?.querySelector(".fw-ar-no-tokens")
                                 if (placeholder) {
                                     placeholder.remove()
                                 }
-                                listEl.insertAdjacentHTML(
+                                listEl?.insertAdjacentHTML(
                                     "beforeend",
-                                    shareTokenRowTemplate({token: json})
+                                    shareTokenRowTemplate({token: data})
                                 )
                                 addAlert(
                                     "success",
@@ -517,19 +619,22 @@ export class AccessRightsTab {
         createDialog.open()
         const expiresInput = createDialog.dialogEl.querySelector(
             "#share-token-expires"
-        )
+        ) as HTMLInputElement
         enableDatePicker(expiresInput, true)
     }
 
-    revokeShareToken(tokenId, rowEl) {
+    revokeShareToken(tokenId: number, rowEl: HTMLElement): void {
         postJson("/api/document/share_token/revoke/", {token_id: tokenId})
-            .then(({json}) => {
-                if (json.success) {
+            .then(({json}: {json: unknown}) => {
+                const data = json as {success: boolean}
+                if (data.success) {
                     rowEl.remove()
                     const listEl =
-                        this.container.querySelector("#share-token-list")
-                    if (!listEl.querySelector(".share-token-row")) {
-                        listEl.innerHTML = shareTokenListTemplate({tokens: []})
+                        this.container?.querySelector("#share-token-list")
+                    if (!listEl?.querySelector(".share-token-row")) {
+                        if (listEl) {
+                            listEl.innerHTML = shareTokenListTemplate({tokens: []})
+                        }
                     }
                     addAlert("success", gettext("Share link revoked."))
                 } else {
@@ -541,8 +646,8 @@ export class AccessRightsTab {
             )
     }
 
-    submit() {
-        const accessRights = collectAccessRights(this.container)
+    submit(): Promise<void> {
+        const accessRights = collectAccessRights(this.container!)
         return post("/api/document/save_access_rights/", {
             document_ids: this.documentIds,
             access_rights: accessRights
@@ -564,14 +669,24 @@ export class AccessRightsTab {
  * Supports both single-document and bulk-document editing.
  */
 export class DocumentAccessRightsDialog {
+    documentIds: number[]
+    contacts: Contact[]
+    newContactCall: (contactData: Contact) => void
+    e2ee: boolean
+    documentPassword: string
+    onShareSuccess?: (accessRights: AccessRight[]) => void
+    settings: Record<string, unknown>
+    tab!: AccessRightsTab
+    dialog!: Dialog
+
     constructor(
-        documentIds,
-        contacts,
-        newContactCall,
-        e2ee,
-        documentPassword,
-        onShareSuccess,
-        settings
+        documentIds: number[],
+        contacts: Contact[],
+        newContactCall: (contactData: Contact) => void,
+        e2ee: boolean,
+        documentPassword = "",
+        onShareSuccess?: (accessRights: AccessRight[]) => void,
+        settings: Record<string, unknown> = {}
     ) {
         this.documentIds = documentIds
         this.contacts = contacts
@@ -582,7 +697,7 @@ export class DocumentAccessRightsDialog {
         this.settings = settings
     }
 
-    init() {
+    init(): void {
         this.tab = new AccessRightsTab({
             documentIds: this.documentIds,
             contacts: this.contacts,
@@ -595,41 +710,42 @@ export class DocumentAccessRightsDialog {
         this.tab.load().then(() => this.createDialog())
     }
 
-    createDialog() {
+    createDialog(): void {
         const html = this.tab.render()
 
         const buttons = [
             {
                 text:
-                    this.settings?.REGISTRATION_OPEN ||
-                    this.settings?.SOCIALACCOUNT_OPEN
+                    (this.settings?.REGISTRATION_OPEN as boolean | undefined) ||
+                    (this.settings?.SOCIALACCOUNT_OPEN as boolean | undefined)
                         ? gettext("Add contact or invite new user")
                         : gettext("Add contact"),
                 classes: "fw-light fw-add-button",
                 click: () => {
                     const dialog = new AddContactDialog(this.settings)
                     dialog.init().then(contactsData => {
-                        contactsData.forEach(contactData => {
+                        ;(contactsData as Contact[]).forEach(contactData => {
                             if (contactData.id) {
                                 this.tab.container
-                                    .querySelector(
+                                    ?.querySelector(
                                         "#my-contacts .fw-data-table-body"
                                     )
-                                    .insertAdjacentHTML(
+                                    ?.insertAdjacentHTML(
                                         "beforeend",
                                         contactsTemplate({
                                             contacts: [contactData]
                                         })
                                     )
                                 this.tab.container
-                                    .querySelector("#share-contact table tbody")
-                                    .insertAdjacentHTML(
+                                    ?.querySelector("#share-contact table tbody")
+                                    ?.insertAdjacentHTML(
                                         "beforeend",
                                         collaboratorsTemplate({
                                             collaborators: [
                                                 {
                                                     holder: contactData,
-                                                    rights: "read"
+                                                    rights: "read",
+                                                    count: 1
                                                 }
                                             ]
                                         })
@@ -637,14 +753,15 @@ export class DocumentAccessRightsDialog {
                                 this.newContactCall(contactData)
                             } else {
                                 this.tab.container
-                                    .querySelector("#share-contact table tbody")
-                                    .insertAdjacentHTML(
+                                    ?.querySelector("#share-contact table tbody")
+                                    ?.insertAdjacentHTML(
                                         "beforeend",
                                         collaboratorsTemplate({
                                             collaborators: [
                                                 {
                                                     holder: contactData,
-                                                    rights: "read"
+                                                    rights: "read",
+                                                    count: 1
                                                 }
                                             ]
                                         })
@@ -662,7 +779,7 @@ export class DocumentAccessRightsDialog {
                 }
             },
             {
-                type: "cancel"
+                type: "cancel" as const
             }
         ]
 
@@ -686,7 +803,7 @@ export class DocumentAccessRightsDialog {
                 ".fw-tabs-nav .fw-tab-link:last-child"
             )
             if (shareTab) {
-                shareTab.style.display = "none"
+                ;(shareTab as HTMLElement).style.display = "none"
             }
         }
     }