Modulo Generic

Il modulo Generic è la base per realizzare un modulo completamente personalizzato.

Per attivare una sezione con modulo Generic vanno configurati i settaggi nella relativa sezione dati specificando l'eventuale classe di implementazione dei metodi e il controllo personalizzato per la parte di UI.

Il campo Settings definisce una serie di parametri di configurazione per gestire form e altre strutture presenti nel modulo.

Posso impostare una classe personalizzata ereditando da Module o da ModuleGeneric per gestire, ad esempio, le notifiche della sezione:

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);
        }
    }
}

Nell'esempio proposto la classe non è necessaria mentre è impostato il componente Vue.js definisce la parte UI:

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>