Radicale/radicale/web/internal_data/js/scenes/CreateEditCollectionScene.js

/**
 * This file is part of Radicale Server - Calendar Server
 * Copyright © 2017-2024 Unrud <unrud@outlook.com>
 * Copyright © 2023-2024 Matthew Hana <matthew.hana@gmail.com>
 * Copyright © 2024-2025 Peter Bieringer <pb@bieringer.de>
 * Copyright © 2026-2026 Max Berger <max@berger.name>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import { create_collection, edit_collection } from "../api/api.js";
import { COLOR_RE } from "../constants.js";
import { Collection, CollectionType } from "../models/collection.js";
import { collectionsCache } from "../utils/collections_cache.js";
import { ErrorHandler } from "../utils/error.js";
import { FormValidator, validate_color, validate_href } from "../utils/form_validator.js";
import { cleanHREFinput, get_element, get_element_by_id, onCleanHREFinput, random_hex, random_uuid } from "../utils/misc.js";
import { LoadingScene } from "./LoadingScene.js";
import { Scene, is_current_scene, pop_scene, pop_to_parent, push_scene } from "./scene_manager.js";

/**
 * @implements {Scene}
 */
export class CreateEditCollectionScene {
    /**
     * @param {string} user
     * @param {?string} password
     * @param {Collection} collection if it's a principal collection, a new
     *                                collection will be created inside of it.
     *                                Otherwise the collection will be edited.
     */
    constructor(user, password, collection) {
        let edit = collection.type !== CollectionType.PRINCIPAL;
        let html_scene = get_element_by_id(edit ? "editcollectionscene" : "createcollectionscene");
        /** @type {?HTMLElement} */ let title_form = edit ? get_element(html_scene, "[data-name=title]") : null;
        /** @type {HTMLElement} */ let error_form = get_element(html_scene, "[data-name=error]");
        /** @type {?HTMLInputElement} */ let href_form = edit ? null : /** @type {HTMLInputElement} */(get_element(html_scene, "[data-name=href]"));
        /** @type {HTMLInputElement} */ let displayname_form = /** @type {HTMLInputElement} */(get_element(html_scene, "[data-name=displayname]"));
        /** @type {HTMLInputElement} */ let description_form = /** @type {HTMLInputElement} */(get_element(html_scene, "[data-name=description]"));
        /** @type {HTMLInputElement} */ let source_form = /** @type {HTMLInputElement} */(get_element(html_scene, "[data-name=source]"));
        /** @type {HTMLElement} */ let source_label = get_element(html_scene, "label[for=source]");
        /** @type {HTMLSelectElement} */ let type_form = /** @type {HTMLSelectElement} */(get_element(html_scene, "[data-name=type]"));
        /** @type {HTMLInputElement} */ let color_form = /** @type {HTMLInputElement} */(get_element(html_scene, "[data-name=color]"));
        /** @type {HTMLElement} */ let submit_btn = get_element(html_scene, "[data-name=submit]");
        /** @type {HTMLElement} */ let cancel_btn = get_element(html_scene, "[data-name=cancel]");


        /** @type {?XMLHttpRequest} */ let create_edit_req = null;
        /** @type {?HTMLSelectElement} */ let saved_type_form = null;

        let errorHandler = new ErrorHandler(error_form);
        let validator = new FormValidator(errorHandler);

        if (!edit && href_form) {
            validator.addValidator(href_form, validate_href(href_form, "HREF"));
        }
        validator.addValidator(color_form, validate_color(color_form, "Color"));

        let href = edit ? collection.href : collection.href + random_uuid() + "/";
        let displayname = edit ? collection.displayname : "";
        let description = edit ? collection.description : "";
        let source = edit ? collection.source : "";
        let type = edit ? collection.type : CollectionType.CALENDAR_JOURNAL_TASKS;
        let color = edit && collection.color ? collection.color : "#" + random_hex(6);

        if (!edit && href_form) {
            href_form.addEventListener("input", onCleanHREFinput);
        }

        function remove_invalid_types() {
            if (!edit) {
                return;
            }
            /** @type {HTMLOptionsCollection} */ let options = type_form.options;
            // remove all options that are not supersets
            let valid_type_options = CollectionType.valid_options_for_type(type);
            for (let i = options.length - 1; i >= 0; i--) {
                if (valid_type_options.indexOf(options[i].value) < 0) {
                    options.remove(i);
                }
            }
        }

        function read_form() {
            if (!edit && href_form) {
                cleanHREFinput(href_form);
                let newhreftxtvalue = href_form.value.trim().toLowerCase();
                href = collection.href + newhreftxtvalue + "/";
            }
            displayname = displayname_form.value;
            description = description_form.value;
            source = source_form.value;
            type = type_form.value;
            color = color_form.value;
            return true;
        }

        function fill_form() {
            if (!edit && href_form) {
                href_form.value = random_uuid();
            }
            displayname_form.value = displayname;
            description_form.value = description;
            source_form.value = source;
            type_form.value = type;
            color_form.value = color;
            onTypeChange(null);
            type_form.addEventListener("change", onTypeChange);
        }

        function onsubmit() {
            try {
                if (!validator.validate()) {
                    return false;
                }
                read_form();
                let sane_color = color.trim();
                if (sane_color) {
                    /** @type {?RegExpExecArray} */ let match = COLOR_RE.exec(sane_color);
                    if (match) {
                        sane_color = match[1];
                    }
                }
                let loading_scene = new LoadingScene();
                push_scene(loading_scene);
                let collection = new Collection(href, type, displayname, description, sane_color, 0, 0, source);
                let callback = function (/** @type {?string} */ error1) {
                    if (!is_current_scene(loading_scene)) {
                        return;
                    }
                    create_edit_req = null;
                    if (error1) {
                        errorHandler.setError(error1);
                        pop_scene();
                    } else {
                        collectionsCache.invalidate();
                        pop_to_parent();
                    }
                };
                if (edit) {
                    create_edit_req = edit_collection(user, password, collection, callback);
                } else {
                    create_edit_req = create_collection(user, password, collection, callback);
                }
            } catch (err) {
                console.error(err);
            }
            return false;
        }

        function oncancel() {
            try {
                pop_scene();
            } catch (err) {
                console.error(err);
            }
            return false;
        }

        /** 
         * @param {?Event} _e
         */
        function onTypeChange(_e) {
            if (type_form.value == CollectionType.WEBCAL) {
                source_label.classList.remove("hidden");
                source_form.classList.remove("hidden");
            } else {
                source_label.classList.add("hidden");
                source_form.classList.add("hidden");
            }
        }

        this.show = function () {
            this.release();
            // Clone type_form because it's impossible to hide options without removing them
            saved_type_form = type_form;
            type_form = /** @type {HTMLSelectElement} */ (type_form.cloneNode(true));
            if (saved_type_form.parentNode) {
                saved_type_form.parentNode.replaceChild(type_form, saved_type_form);
            }
            remove_invalid_types();
            html_scene.classList.remove("hidden");
            if (edit && title_form) {
                title_form.textContent = collection.displayname || collection.href;
            }
            fill_form();
            submit_btn.onclick = onsubmit;
            cancel_btn.onclick = oncancel;
            validator.validate();
        };
        this.hide = function () {
            read_form();
            html_scene.classList.add("hidden");
            // restore type_form
            if (type_form.parentNode && saved_type_form) {
                type_form.parentNode.replaceChild(saved_type_form, type_form);
                type_form = saved_type_form;
            }
            saved_type_form = null;
            submit_btn.onclick = null;
            cancel_btn.onclick = null;
        };
        this.release = function () {
            if (create_edit_req !== null) {
                create_edit_req.abort();
                create_edit_req = null;
            }
        };
    }
}