src/components/FullscreenModal.vue - dev - vdele/app

src/components/FullscreenModal.vue
91 строка4 KB
Vasilii Polshakov
last fixes for 0.0.1-alpha
02 апр 2025, 12:32
02 апр 2025, 12:32ef3d4ef
<script setup lang="ts">
import { nextTick, useTemplateRef, inject} from 'vue';
import type { IModalStore } from '@/libs/types/stores';
import { useUsersStore } from '@/stores/users';
import type { IGroup, IServiceRecord, IUser } from '@/libs/types';
import { useProductsStore } from '@/stores/products';

const userStore = useUsersStore();
const productsStore = useProductsStore();

const modalStore = inject('modalStore') as IModalStore;

const modalInstance = useTemplateRef('modal-instance');

const closeModalHandler = () => {
    if(modalInstance.value){
        modalInstance.value.classList.remove('show');

        setTimeout(() => {
            nextTick(() => {
                //modalInstance.value!.style.display = 'none';
                modalStore.hideModal();
                modalInstance.value?.classList.add('show');
            });            
        }, 300);
    }

};

const saveEmitHandler = async (data: {store: string, record: {}}) => {
    // {store: 'users', record: state.value}
    switch(data.store){
        case 'users':
            const user = data.record as IUser;
            await userStore.update(user)
                .finally(() => { closeModalHandler(); });
        break;
        case 'groups': 
            const group = data.record as IGroup;
            await productsStore.editGroup(group)
                .finally(() => { closeModalHandler(); });
        break;
        case 'services':
            const service = data.record as IServiceRecord;
            await productsStore.editService(service)
                .finally(() => { closeModalHandler(); });
        break;
    };
};

const createEmitHandler = async (data: {store: string, record: {}}) => {
    switch(data.store){
        case 'groups':
            const group = data.record as IGroup;
            await productsStore.createGroup(group)
                .finally(() => { closeModalHandler(); });
        break;
        case 'services':
            const service = data.record as IServiceRecord;
            await productsStore.createService(service)
                .finally(() => { closeModalHandler(); });
        break;
    };
};
</script>
<template>
    <div ref="modal-instance" class="modal fade show" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" style="display: block;" aria-modal="true" role="dialog">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h4" id="exampleModalFullscreenLabel">Редактирование записи.</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="closeModalHandler"></button>
                </div>
                <div class="modal-body">
                    <template v-if="modalStore.contentModel.value">
                        <component 
                            :is="modalStore.contentModel.value.component" 
                            v-bind="modalStore.contentModel.value.props" 
                            @cancel="closeModalHandler"
                            @save="saveEmitHandler"
                            @create="createEmitHandler"
                        ></component>
                    </template>
                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="closeModalHandler">Close</button>-->
                </div>
            </div>
        </div>
    </div>
</template>