Generic module

The Generic module is the basis for creating a completely customized module.

To activate a section with a Generic module, the settings in the relevant data section must be configured, specifying the possible implementation class of the methods and the custom control for the UI part.

The Settings field defines a set of configuration parameters for managing forms and other structures on the form.

I can set up a custom class inheriting from Module or ModuleGeneric to handle, for example, section notifications:

using System;
using System.Threading.Tasks;
using Microsoft.Extensions.DependencyInjection;
using DataWeb.Error;
using System.Threading;

namespace DataWeb.Structure.Modules
{
    public class ModuleAppErrorList(Section section, NavigationContext navigationContext, IServiceProvider serviceProvider) : Module(section, navigationContext, serviceProvider)
    {
        private readonly IAppErrorService appErrorService = serviceProvider.GetService<IAppErrorService>();

        public override async Task<long> GetSectionNotificationCountAsync(CancellationToken cancellationToken = default)
        {
            return await appErrorService.GetErrorsCountAsync(cancellationToken);
        }
    }
}

In the proposed example, the class is not needed while the component Vue.js defines the UI part is set:

import Vue from "vue";
import Component from "vue-class-component";
import { Watch } from "vue-property-decorator";
import Localizer from "@DataWeb/Scripts/Common/Localizer";

@Component({ name: "ModuleAppSettingList" })
export default class ModuleAppSettingList extends Vue {
    public localizer: any = Localizer;
    public isDataLoading: boolean = false;
    public isCacheClearing: boolean = false;
    public formContext: any = null;

    get navigationContext(): any {
        return this.$store.getters["navigationStore/navigationContext"]
    }

    get itemIdMaster(): any {
        return this.$store.getters["itemStore/itemIdMaster"];
    }

    get settingsControls(): any {
        return this.$store.getters["moduleAppSettingListStore/settingsControls"];
    }

    @Watch("navigationContext") onPropertyChanged(value: any, oldValue: any) {
        this.getData();
    }

    public created() {
        this.formContext = { navigationContext: this.navigationContext, nav: this.navigationContext.nav };

        this.getData();
    }

    public async getData() {
        this.isDataLoading = true;

        await this.$store.dispatch("moduleAppSettingListStore/getData", { nav: this.navigationContext.nav });

        this.isDataLoading = false;
    }

    public async saveSettings() {
        let controlValues = [];

        this.$store.commit("itemStore/setValidationState", null);

        for (let control of this.settingsControls) {
            if (control.isDataField) {
                controlValues.push({ name: control.name, value: control.value });
            }
        }

        try {
            let response = await this.$store.dispatch("moduleAppSettingListStore/saveSettings", { nav: this.navigationContext.nav, controlValues: controlValues });
            if (response) {
                await this.$store.dispatch("toastStore/onAddToast", { message: this.localizer.get("DataWeb.Setting.SettingApp_AppSettings_Saved"), type: "Success" });

                this.getData();
            }
        } catch (error) {
            if (error.response.status === 400) {
                this.$store.commit("itemStore/setValidationState", error.response.data);
            }
        }
    }

    public async clearCache() {
        this.isCacheClearing = true;

        let response = await this.$store.dispatch("moduleAppSettingListStore/clearCache", { nav: this.navigationContext.nav });
        if (response) {
            await this.$store.dispatch("toastStore/onAddToast", { message: this.localizer.get("DataWeb.Setting.SettingApp_Cache_Cleared"), type: "Success" });
        }

        this.isCacheClearing = false;
    }

    public getModuleData() {
        return { isCompleted: true, nav: this.navigationContext.nav };
    }
};

<script lang="ts" src="./ModuleAppSettingList"></script>

<template>
    <div v-if="!isDataLoading">
        <div class="dw-module-list">
            <div class="dw-setting">
                <div class="item">
                    <div class="content">
                        <div class="dw-heading dw-pdg" data-pdgb="15">
                            <span class="label">{ localizer.get("DataWeb.Setting.SettingApp_Cache") }</span>
                        </div>
                        <div class="abstract">{ localizer.get("DataWeb.Setting.SettingApp_Cache_Description") }</div>
                        <div class="controls">
                            <div class="form-item">
                                <template v-if="!isCacheClearing">
                                    <div class="dw-cta">
                                        <button @click="clearCache()" data-background="gray" data-color="red" class="button">{ localizer.get("DataWeb.Setting.SettingApp_Cache_Clear") }</button>
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="dw-cta" data-cta="multi">
                                        <button class="button" data-background="gray" data-disabled>{ localizer.get("DataWeb.Setting.SettingApp_Cache_Clear") }</button>
                                    </div>
                                    <span class="loader small"><span class="icon"></span></span>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item" data-type="form">
                    <div class="dw-module-form">
                        <div class="dw-form">
                            <dw-form :controls="settingsControls" :store="'formStore'" :context="formContext"></dw-form>
                        </div>
                    </div>
                    <div class="content">
                        <div class="dw-cta">
                            <button @click="saveSettings()" class="button">{ localizer.get("DataWeb.Setting.SettingApp_AppSettings_Save") }</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>