Settings ======== CARE supports flexible, dynamic application behavior through a centralized system of configurable settings. These settings allow developers and administrators to customize the frontend and backend behavior without hardcoding values or redeploying the application. Settings are stored in the database, can be grouped by key namespaces, and support multiple data types. This section shows how to define a new setting, what types are supported, and how to use the setting in your Vue components. Example: Adding a New Setting ----------------------------- 1. Add a migration ~~~~~~~~~~~~~~~~~~ At first you need to add a new migration - please check out the :doc:`../backend/database` for the details. To add a new setting, define it similar to this example: .. code-block:: javascript 'use strict'; const settings = [{ key: "editor.document.enableComments", value: "true", type: "boolean", description: "Enable or disable comment functionality in the document editor" }]; module.exports = { async up(queryInterface, Sequelize) { await queryInterface.bulkInsert('setting', settings.map(t => { t['createdAt'] = new Date(); t['updatedAt'] = new Date(); return t; }), { returning: true }); }, async down(queryInterface, Sequelize) { await queryInterface.bulkDelete("setting", { key: settings.map(t => t.key) }, {}); } }; .. note:: After running the migration, make sure to execute ``make init`` **before restarting the server**. This ensures the new settings are correctly applied and available in the frontend. Supported Setting Types ~~~~~~~~~~~~~~~~~~~~~~~~ The ``type`` field of a setting defines how the setting is interpreted and rendered in the frontend. The following types are currently supported: - ``boolean``: Enables a checkbox or toggle in the UI. .. code-block:: javascript { key: "editor.document.enableComments", value: "true", type: "boolean", description: "Enable or disable comment functionality in the document editor" } - ``number`` or ``integer``: Enables a numeric input field (as string or integer). .. code-block:: javascript { key: "editor.edits.debounceTime", value: "150", type: "number", description: "Delay time in milliseconds before processing edits" } - ``string`` (default): Basic text field input. If ``type`` is omitted, it is treated as string by default. .. code-block:: javascript { key: "dashboard.navigation.component.default", value: "Home", description: "The default component to display in the dashboard" } - ``html``: Allows multi-line rich-text (HTML) input in the frontend, shown with a textarea. .. code-block:: javascript { key: "app.register.terms", type: "html", value: "

Please agree to the terms and conditions.

", description: "Terms and conditions text shown during registration" } .. note:: You can mix and match these types depending on your use case. The value must always be provided as a **string**, regardless of type. 2. Use your Settings in the Frontend ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ You can access the setting value inside any component using Vuex: .. code-block:: javascript this.$store.getters["settings/getValue"]("editor.document.enableComments") Settings are always returned as strings, so their usage in components depends on the expected type. You must manually parse them as needed based on the setting's ``type``. **Type: Boolean** .. code-block:: none .. code-block:: javascript export default { computed: { commentsEnabled() { return this.$store.getters["settings/getValue"]("editor.document.enableComments") === "true"; } }, methods: { addComment() { console.log("Add comment clicked"); } } }; **Type: Integer** .. code-block:: javascript export default { computed: { debounceTimeForEdits() { return parseInt(this.$store.getters["settings/getValue"]("editor.edits.debounceTime"), 10); } } }; .. warning:: Changes made to settings in the frontend **are not automatically saved** to the database. After modifying any setting through the UI, you **must** click the ``Save Settings`` button. Otherwise, your changes will be lost and not persisted.