src/components/pages/SettingsDataSet.vue - dev - vdele/app

src/components/pages/SettingsDataSet.vue
218 строк8 KB
Vasilii Polshakov
last fixes for 0.0.1-alpha
02 апр 2025, 12:32
02 апр 2025, 12:32ef3d4ef
<script setup lang="ts">
import { ref, onMounted, inject, type Ref} from 'vue';
import { openDB } from 'idb';
import AccountTableRow from '@/components/settings/AccountTableRow.vue';
import type { IModalStore } from '@/libs/types/stores';
import EditAccountModalBody from '@/components/EditAccountModalBody.vue';
import { useAccountStore } from '@/stores/account';
import { useUsersStore } from '@/stores/users';
import type { IGroup, IServiceRecord, IUser } from '@/libs/types';
import GroupTableRow from '@/components/settings/GroupTableRow.vue';
import { useProductsStore } from '@/stores/products';
import CreateGroupModalBody from '@/components/CreateGroupModalBody.vue';
import EditGroupModalBody from '@/components/EditGroupModalBody.vue';
import ServiceTableRow from '@/components/settings/ServiceTableRow.vue';
import EditServiceModalBody from '@/components/EditServiceModalBody.vue';
import CreateServiceModalBody from '@/components/CreateServiceModalBody.vue';

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

const accounts = ref<{uid: string, name: string}[]>();
const data = ref() as Ref<{
    uid: string;
    name: string;
    services: {
        uid: string;
        group: string;
        caption: string;
        description: string;
        prices: Array<number>;
    }[];
}[]>;

const accountStore = useAccountStore();

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

onMounted(async () => {
    const initDB = async () => {
        return openDB('MyDatabase', 1);
    }

    const db = await initDB();
    accounts.value = await db.getAll('users');

    const groups = await db.getAll('groups') as {uid: string, name: string}[];
    const services = await db.getAll('services') as {uid: string, group: string, caption: string, description: string, prices: Array<number> }[];

    const groupedDataArray = groups.map((group) => ({
        uid: group.uid,
        name: group.name,
        services: services.filter((service) => service.group === group.uid),
    }));

    data.value = groupedDataArray;
});

const deleteAccountRecordHandler = async (data: {account: IUser, idx: number, currentAccountUid: string}) => {
    //const index = accounts.value?.findIndex((v) => v.uid === uid);
    //if(index)
    //    accounts.value?.splice(index,1,);
    //console.log('delete account todo!!!');
    await userStore.delete(data.account);
};

const editAccountRecordHandler = (data: {account: IUser, idx: number, currentAccountUid: string}) => {
    modalStore.setBody({
        component: EditAccountModalBody,
        props: data.account,
    });
    modalStore.showModal();
};

// groups handlers
const createGroupRecordHandler = () => {
    //console.log('create');
    modalStore.setBody({
        component: CreateGroupModalBody,
        props: {},
    });
    modalStore.showModal();
};

const deleteGroupRecordHandler = async (group: IGroup) => {
    //console.log('delete', group);
    await productsStore.deleteGroup(group);
};

const editGroupRecordHandler = (group: IGroup) => {
    //console.log('edit', group);
    modalStore.setBody({
        component: EditGroupModalBody,
        props: group,
    });
    modalStore.showModal();
};

//service handlers
const createServiceRecordHandler = (group: IGroup) => {
    //console.log('create', group);
    modalStore.setBody({
        component: CreateServiceModalBody,
        props: { group: group.uid },
    });
    modalStore.showModal();
};

const deleteServiceRecordHandler = async (service: IServiceRecord) => {
    //console.log('delete', service);
    await productsStore.deleteService(service);
};

const editServiceRecordHandler = (service: IServiceRecord) => {
    //console.log('edit', service);
    modalStore.setBody({
        component: EditServiceModalBody,
        props: service,
    });
    modalStore.showModal();
};
</script>
<template>
    <div>
        <DevOnly>
            <div><code>Data_Set_Settings Page</code></div>
        </DevOnly>
        <section class="d-flex gap-2 flex-column">
            <div><span class="h3">Учётные записи:</span>
                <hr />
            </div>
            <div>
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col"></th>
                            <th scope="col">#</th>
                            <th scope="col">UID</th>
                            <th scope="col">Имя</th>
                            <th scope="col">Заметка</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-for="(account, key) in userStore.list" :key="`account-${account.uid}`">
                            <AccountTableRow :account="account" :idx="key" :current-account-uid="accountStore.self.uid"
                                @delete="deleteAccountRecordHandler" @edit="editAccountRecordHandler" />
                        </template>
                    </tbody>
                </table>
            </div>
        </section><br />

        <section class="d-flex gap-2 flex-column">
            <div><span class="h3">Группы:</span>
                <hr />
            </div>
            <div><button type="button" class="btn btn-outline-success" @click="createGroupRecordHandler">Добавить
                    группу</button></div>
            <div class="alert alert-danger" role="alert">
                ❗️ При удалении группы, <b>будут удалены все связанные</b> с ней <b>услуги</b>.
            </div>
            <div>
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col"></th>
                            <th scope="col">#</th>
                            <th scope="col">UID</th>
                            <th scope="col">Имя</th>
                            <th scope="col">Услуг в группе</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-for="(group, key) in productsStore.data" :key="`group-${group.uid}`">
                            <GroupTableRow :group="group" :idx="key + 1" @delete="deleteGroupRecordHandler"
                                @edit="editGroupRecordHandler" />
                        </template>
                    </tbody>
                </table>
            </div>
        </section><br />

        <section class="d-flex gap-2 flex-column">
            <div><span class="h3">Услуги:</span>
                <hr />
            </div>
            <div>
                <article v-for="group in productsStore.data" :key="`'service-'${group.uid}`"
                    class="d-flex gap-2 flex-column">
                    <div>[<code>{{ group.uid }}</code>] <b>{{ group.name }}</b></div>
                    <div><button type="button" class="btn btn-outline-success"
                            @click="() => { createServiceRecordHandler({ uid: group.uid, name: group.name }); }">Добавить
                            услугу</button></div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col"></th>
                                <th scope="col">#</th>
                                <th scope="col">UID</th>
                                <th scope="col">Название</th>
                                <th scope="col">Описание</th>
                                <th scope="col">Цены</th>
                                <th scope="col"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <template v-for="(service, key) in group.services" :key="`service-item-${service.uid}`">
                                <ServiceTableRow :service="service" :idx="key" @delete="deleteServiceRecordHandler"
                                    @edit="editServiceRecordHandler" />
                            </template>
                        </tbody>
                    </table>
                </article>
            </div>
        </section><br />
    </div>
</template>