feat(client/ts): port editability_select

This commit is contained in:
Elian Doran 2025-01-28 16:21:26 +02:00
parent aecba70efc
commit 3f6dc717b6
No known key found for this signature in database

View File

@ -1,6 +1,10 @@
import attributeService from "../services/attributes.js"; import attributeService from "../services/attributes.js";
import NoteContextAwareWidget from "./note_context_aware_widget.js"; import NoteContextAwareWidget from "./note_context_aware_widget.js";
import { t } from "../services/i18n.js"; import { t } from "../services/i18n.js";
import type FNote from "../entities/fnote.js";
import type { EventData } from "../components/app_context.js";
type Editability = "auto" | "readOnly" | "autoReadOnlyDisabled";
const TPL = ` const TPL = `
<div class="dropdown editability-select-widget"> <div class="dropdown editability-select-widget">
@ -44,9 +48,15 @@ const TPL = `
`; `;
export default class EditabilitySelectWidget extends NoteContextAwareWidget { export default class EditabilitySelectWidget extends NoteContextAwareWidget {
private dropdown!: bootstrap.Dropdown;
private $editabilityActiveDesc!: JQuery<HTMLElement>;
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
// TODO: Remove once bootstrap is added to webpack.
//@ts-ignore
this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")); this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
this.$editabilityActiveDesc = this.$widget.find(".editability-active-desc"); this.$editabilityActiveDesc = this.$widget.find(".editability-active-desc");
@ -56,24 +66,28 @@ export default class EditabilitySelectWidget extends NoteContextAwareWidget {
const editability = $(e.target).closest("[data-editability]").attr("data-editability"); const editability = $(e.target).closest("[data-editability]").attr("data-editability");
if (!this.note || !this.noteId) {
return;
}
for (const ownedAttr of this.note.getOwnedLabels()) { for (const ownedAttr of this.note.getOwnedLabels()) {
if (["readOnly", "autoReadOnlyDisabled"].includes(ownedAttr.name)) { if (["readOnly", "autoReadOnlyDisabled"].includes(ownedAttr.name)) {
await attributeService.removeAttributeById(this.noteId, ownedAttr.attributeId); await attributeService.removeAttributeById(this.noteId, ownedAttr.attributeId);
} }
} }
if (editability !== "auto") { if (editability && editability !== "auto") {
await attributeService.addLabel(this.noteId, editability); await attributeService.addLabel(this.noteId, editability);
} }
}); });
} }
async refreshWithNote(note) { async refreshWithNote(note: FNote) {
let editability = "auto"; let editability: Editability = "auto";
if (this.note.isLabelTruthy("readOnly")) { if (this.note?.isLabelTruthy("readOnly")) {
editability = "readOnly"; editability = "readOnly";
} else if (this.note.isLabelTruthy("autoReadOnlyDisabled")) { } else if (this.note?.isLabelTruthy("autoReadOnlyDisabled")) {
editability = "autoReadOnlyDisabled"; editability = "autoReadOnlyDisabled";
} }
@ -89,7 +103,7 @@ export default class EditabilitySelectWidget extends NoteContextAwareWidget {
this.$editabilityActiveDesc.text(labels[editability]); this.$editabilityActiveDesc.text(labels[editability]);
} }
entitiesReloadedEvent({ loadResults }) { entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
if (loadResults.getAttributeRows().find((attr) => attr.noteId === this.noteId)) { if (loadResults.getAttributeRows().find((attr) => attr.noteId === this.noteId)) {
this.refresh(); this.refresh();
} }