first commit

assets/js/components/appointment_status_options.js

@@ -0,0 +1,124 @@
+/* ----------------------------------------------------------------------------
+ * Easy!Appointments - Online Appointment Scheduler
+ *
+ * @package     EasyAppointments
+ * @author      A.Tselegidis <alextselegidis@gmail.com>
+ * @copyright   Copyright (c) Alex Tselegidis
+ * @license     https://opensource.org/licenses/GPL-3.0 - GPLv3
+ * @link        https://easyappointments.org
+ * @since       v1.5.0
+ * ---------------------------------------------------------------------------- */
+
+/**
+ * Appointment status options component.
+ *
+ * This module implements the appointment status options.
+ */
+App.Components.AppointmentStatusOptions = (function () {
+    /**
+     * Render an appointment status option.
+     *
+     * @param {String} [appointmentStatusOption]
+     *
+     * @return {jQuery} Returns a jQuery selector with the list group item markup.
+     */
+    function renderListGroupItem(appointmentStatusOption = '') {
+        return $(`
+            <li class="list-group-item d-flex justify-content-between align-items-center p-0 border-0 mb-3 appointment-status-option">
+                <label class="w-100 me-2">
+                    <input class="form-control" value="${appointmentStatusOption}">
+                </label>
+    
+                <button type="button" class="btn btn-outline-danger delete-appointment-status-option">
+                    <i class="fas fa-trash"></i>
+                </button>
+            </li>
+        `);
+    }
+
+    /**
+     * Event: Delete Appointment Status Option "Click"
+     *
+     * @param {jQuery.Event} event
+     */
+    function onDeleteAppointmentStatusOptionClick(event) {
+        $(event.currentTarget).closest('li').remove();
+    }
+
+    /**
+     * Event: Add Appointment Status Option "Click"
+     *
+     * @param {jQuery.Event} event
+     */
+    function onAddAppointmentStatusOptionClick(event) {
+        const $target = $(event.currentTarget);
+
+        const $listGroup = $target.closest('.appointment-status-options').find('.list-group');
+
+        if (!$listGroup.length) {
+            return;
+        }
+
+        renderListGroupItem().appendTo($listGroup);
+    }
+
+    /**
+     * Get target options.
+     *
+     * @param {jQuery} $target Container element ".status-list" selector.
+     *
+     * @return {String[]}
+     */
+    function getOptions($target) {
+        const $listGroup = $target.find('.list-group');
+
+        const appointmentStatusOptions = [];
+
+        $listGroup.find('li').each((index, listGroupItemEl) => {
+            const $listGroupItem = $(listGroupItemEl);
+            const appointmentStatusOption = $listGroupItem.find('input:text').val();
+            appointmentStatusOptions.push(appointmentStatusOption);
+        });
+
+        return appointmentStatusOptions;
+    }
+
+    /**
+     * Set target options.
+     *
+     * @param {jQuery} $target Container element ".status-list" selector.
+     * @param {String[]} appointmentStatusOptions Appointment status options.
+     */
+    function setOptions($target, appointmentStatusOptions) {
+        if (!$target.length || !appointmentStatusOptions || !appointmentStatusOptions.length) {
+            return;
+        }
+
+        const $listGroup = $target.find('.list-group');
+
+        if (!$listGroup.length) {
+            return;
+        }
+
+        $listGroup.empty();
+
+        appointmentStatusOptions.forEach((appointmentStatusOption) => {
+            renderListGroupItem(appointmentStatusOption).appendTo($listGroup);
+        });
+    }
+
+    /**
+     * Initialize the module.
+     */
+    function initialize() {
+        $(document).on('click', '.delete-appointment-status-option', onDeleteAppointmentStatusOptionClick);
+        $(document).on('click', '.add-appointment-status-option', onAddAppointmentStatusOptionClick);
+    }
+
+    document.addEventListener('DOMContentLoaded', initialize);
+
+    return {
+        getOptions,
+        setOptions,
+    };
+})();