thetool/public/js/pages/UserPermissionTemplate/UserPermissionTemplate.js

Vue.component('UserPermissionTemplate', {
    template: `
      <tt-card>
        <div class="template-header">
          <h3>Berechtigungsvorlagen</h3>
          <tt-button text="Neue Vorlage erstellen" icon="fas fa-plus" additional-class="btn-primary" @click="openModal()"/>
        </div>

        <div v-if="loading" class="text-center p-5"><i class="fas fa-spinner fa-spin fa-2x"></i></div>

        <ul v-else-if="templates.length" class="list-group list-group-flush template-list">
          <li v-for="template in templates" :key="template.id" class="list-group-item">
            <span>{{ template.name }}</span>
            <div class="actions">
              <tt-button icon="far fa-edit" additional-class="btn-outline-primary" sm @click="openModal(template)" title="Bearbeiten"/>
              <tt-button icon="fas fa-trash" additional-class="btn-outline-danger" sm @click="deleteTemplate(template)" title="Löschen"/>
            </div>
          </li>
        </ul>
        <div v-else class="text-center text-muted p-5">
          Keine Vorlagen gefunden.
        </div>

        <tt-modal v-if="showModal" :show.sync="showModal" :title="modalTitle" @submit="saveTemplate" :delete="false" :save-loading="isSaving" size="xl">
          <tt-input label="Vorlagename" v-model="editableTemplate.name" required sm/>
          <hr>
          <div class="permissions-grid">
            <div v-for="(group, groupName) in permissionsConfig" :key="groupName" class="permission-group">
              <h5>{{ groupName }}</h5>
              <div v-for="(label, key) in group" :key="key" class="form-group form-check">
                <input type="checkbox" class="form-check-input" :id="'perm-' + key + modalKey" v-model="editableTemplate.permissions[key]">
                <label class="form-check-label" :for="'perm-' + key + modalKey" v-html="label"></label>
              </div>
            </div>
          </div>
        </tt-modal>
      </tt-card>
    `,
    data() {
        // Helper function to get a fresh permissions object. It's defined here to avoid relying on `this`.
        const getFreshPermissions = (config) => {
            const permissions = {};
            if (!config) return permissions;
            Object.values(config).forEach(group => {
                Object.keys(group).forEach(key => {
                    permissions[key] = false;
                });
            });
            return permissions;
        };

        return {
            loading: true,
            templates: [],
            showModal: false,
            isSaving: false,
            editableTemplate: {
                id: null,
                name: '',
                permissions: getFreshPermissions(window.TT_CONFIG.PERMISSIONS_CONFIG) // Initialize correctly
            },
            modalKey: Date.now(),
        }
    },
    computed: {
        permissionsConfig() {
            return window.TT_CONFIG.PERMISSIONS_CONFIG;
        },
        modalTitle() {
            return this.editableTemplate && this.editableTemplate.id ? 'Vorlage bearbeiten' : 'Neue Vorlage erstellen';
        }
    },
    methods: {
        fetchTemplates() {
            this.loading = true;
            axios.get('/UserEdit/getPermissionTemplates')
                .then(response => {
                    this.templates = response.data;
                })
                .catch(e => window.notify('error', 'Vorlagen konnten nicht geladen werden.'))
                .finally(() => this.loading = false);
        },
        openModal(template = null) {
            this.modalKey = Date.now(); // Ensure unique IDs for checkboxes in modal
            if (template) {
                this.editableTemplate = JSON.parse(JSON.stringify(template)); // Deep copy
                const permissions = this.freshPermissions();
                // Ensure all keys from config exist on the loaded template's permissions
                for (const key in permissions) {
                    if (this.editableTemplate.permissions.hasOwnProperty(key)) {
                        permissions[key] = this.editableTemplate.permissions[key];
                    }
                }
                this.editableTemplate.permissions = permissions;
            } else {
                this.editableTemplate = { id: null, name: '', permissions: this.freshPermissions() };
            }
            this.showModal = true;
        },
        freshPermissions() {
            const permissions = {};
            Object.values(this.permissionsConfig).forEach(group => {
                Object.keys(group).forEach(key => {
                    permissions[key] = false;
                });
            });
            return permissions;
        },
        async saveTemplate() {
            if (!this.editableTemplate.name) {
                return window.notify('error', 'Bitte einen Namen für die Vorlage eingeben.');
            }
            this.isSaving = true;
            try {
                const response = await axios.post('/UserEdit/savePermissionTemplate', this.editableTemplate);
                if(response.data.success) {
                    window.notify('success', response.data.message);
                    this.showModal = false;
                    this.fetchTemplates(); // Refresh list
                } else {
                    window.notify('error', response.data.message || 'Fehler beim Speichern.');
                }
            } catch (e) {
                window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
            } finally {
                this.isSaving = false;
            }
        },
        async deleteTemplate(template) {
            if (!confirm(`Soll die Vorlage "${template.name}" wirklich gelöscht werden?`)) return;
            try {
                const response = await axios.post('/UserEdit/deletePermissionTemplate', { id: template.id });
                if(response.data.success) {
                    window.notify('success', response.data.message);
                    this.fetchTemplates(); // Refresh list
                } else {
                    window.notify('error', response.data.message || 'Fehler beim Löschen.');
                }
            } catch (e) {
                window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
            }
        }
    },
    mounted() {
        this.fetchTemplates();
    }
});