feat(collections): basic properties for calendar

apps/client/src/widgets/ribbon_widgets/book_properties.ts

@@ -3,6 +3,7 @@ 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";
+import { bookPropertiesConfig, renderBookProperty } from "./book_properties_config.js";
 
 const TPL = /*html*/`
 <div class="book-properties-widget">
@@ -15,6 +16,18 @@ const TPL = /*html*/`
         .book-properties-widget > * {
             margin-right: 15px;
         }
+
+        .book-properties-container {
+            display: flex;
+        }
+
+        .book-properties-container > * {
+            margin-right: 15px;
+        }
+
+        .book-properties-container input[type="checkbox"] {
+            margin-right: 5px;
+        }
     </style>
 
     <div style="display: flex; align-items: baseline">
@@ -29,6 +42,9 @@ const TPL = /*html*/`
         </select>
     </div>
 
+    <div class="book-properties-container">
+    </div>
+
     <button type="button"
             class="collapse-all-button btn btn-sm"
             title="${t("book_properties.collapse_all_notes")}">
@@ -53,6 +69,7 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
     private $viewTypeSelect!: JQuery<HTMLElement>;
     private $expandChildrenButton!: JQuery<HTMLElement>;
     private $collapseAllButton!: JQuery<HTMLElement>;
+    private $propertiesContainer!: JQuery<HTMLElement>;
 
     get name() {
         return "bookProperties";
@@ -107,6 +124,8 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
 
             this.triggerCommand("refreshNoteList", { noteId: this.noteId });
         });
+
+        this.$propertiesContainer = this.$widget.find(".book-properties-container");
     }
 
     async refreshWithNote(note: FNote) {
@@ -120,6 +139,15 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
 
         this.$expandChildrenButton.toggle(viewType === "list");
         this.$collapseAllButton.toggle(viewType === "list");
+
+        this.$propertiesContainer.empty();
+
+        const bookPropertiesData = bookPropertiesConfig[viewType];
+        if (bookPropertiesData) {
+            for (const property of bookPropertiesData.properties) {
+                this.$propertiesContainer.append(renderBookProperty(property, note));
+            }
+        }
     }
 
     async toggleViewType(type: string) {

apps/client/src/widgets/ribbon_widgets/book_properties_config.ts

@@ -0,0 +1,58 @@
+import FNote from "../../entities/fnote";
+import attributes from "../../services/attributes";
+import { ViewTypeOptions } from "../../services/note_list_renderer"
+
+interface BookConfig {
+    properties: BookProperty[]
+}
+
+interface BookProperty {
+    label: string;
+    type: "checkbox",
+    bindToLabel: string
+}
+
+export const bookPropertiesConfig: Record<ViewTypeOptions, BookConfig> = {
+    calendar: {
+        properties: [
+            {
+                label: "Hide weekends",
+                type: "checkbox",
+                bindToLabel: "calendar:hideWeekends"
+            },
+            {
+                label: "Show week numbers",
+                type: "checkbox",
+                bindToLabel: "calendar:weekNumbers"
+            }
+        ]
+    }
+};
+
+export function renderBookProperty(property: BookProperty, note: FNote) {
+    const $container = $("<div>");
+    const $label = $("<label>").text(property.label);
+    $container.append($label);
+
+    switch (property.type) {
+        case "checkbox":
+            const $checkbox = $("<input>", {
+                type: "checkbox",
+                class: "form-check-input",
+            });
+            $checkbox.on("change", () => {
+                if ($checkbox.prop("checked")) {
+                    attributes.setLabel(note.noteId, property.bindToLabel);
+                } else {
+                    attributes.removeOwnedLabelByName(note, property.bindToLabel);
+                }
+            });
+            $checkbox.prop("checked", note.hasOwnedLabel(property.bindToLabel));
+            $container.prepend($checkbox);
+            break;
+        default:
+            throw new Error(`Unknown property type: ${property.type}`);
+    }
+
+    return $container;
+}