chore(client/ts): port template_switch

Author: eliandoran

src/public/app/widgets/switch.ts

@@ -96,13 +96,13 @@ const TPL = `
 
 export default class SwitchWidget extends NoteContextAwareWidget {
 
-    private $switchOn!: JQuery<HTMLElement>;
-    private $switchOnName!: JQuery<HTMLElement>;
-    private $switchOnButton!: JQuery<HTMLElement>;
-    private $switchOff!: JQuery<HTMLElement>;
-    private $switchOffName!: JQuery<HTMLElement>;
-    private $switchOffButton!: JQuery<HTMLElement>;
-    private $helpButton!: JQuery<HTMLElement>;
+    protected $switchOn!: JQuery<HTMLElement>;
+    protected $switchOnName!: JQuery<HTMLElement>;
+    protected $switchOnButton!: JQuery<HTMLElement>;
+    protected $switchOff!: JQuery<HTMLElement>;
+    protected $switchOffName!: JQuery<HTMLElement>;
+    protected $switchOffButton!: JQuery<HTMLElement>;
+    protected $helpButton!: JQuery<HTMLElement>;
 
     doRender() {
         this.$widget = $(TPL);

src/public/app/widgets/template_switch.js renamed to src/public/app/widgets/template_switch.ts

@@ -1,13 +1,15 @@
 import SwitchWidget from "./switch.js";
 import attributeService from "../services/attributes.js";
 import { t } from "../services/i18n.js";
+import type FNote from "../entities/fnote.js";
+import type { EventData } from "../components/app_context.js";
 
 /**
  * Switch for the basic properties widget which allows the user to select whether the note is a template or not, which toggles the `#template` attribute.
  */
 export default class TemplateSwitchWidget extends SwitchWidget {
     isEnabled() {
-        return super.isEnabled() && !this.noteId.startsWith("_options");
+        return super.isEnabled() && !this.noteId?.startsWith("_options");
     }
 
     doRender() {
@@ -23,22 +25,28 @@ export default class TemplateSwitchWidget extends SwitchWidget {
     }
 
     async switchOn() {
-        await attributeService.setLabel(this.noteId, "template");
+        if (this.noteId) {
+            await attributeService.setLabel(this.noteId, "template");
+        }
     }
 
     async switchOff() {
+        if (!this.note || !this.noteId) {
+            return;
+        }
+
         for (const templateAttr of this.note.getOwnedLabels("template")) {
             await attributeService.removeAttributeById(this.noteId, templateAttr.attributeId);
         }
     }
 
-    async refreshWithNote(note) {
+    async refreshWithNote(note: FNote) {
         const isTemplate = note.hasLabel("template");
         this.$switchOn.toggle(!isTemplate);
         this.$switchOff.toggle(!!isTemplate);
     }
 
-    entitiesReloadedEvent({ loadResults }) {
+    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         if (loadResults.getAttributeRows().find((attr) => attr.type === "label" && attr.name === "template" && attr.noteId === this.noteId)) {
             this.refresh();
         }