Untitled

 avatar
unknown
javascript
2 years ago
13 kB
5
Indexable
import {Controller} from '@hotwired/stimulus';
import EntityList from "../../../js/components/datatable/entityList/entityList";
import RoutingService from "../../../js/services/RoutingService";
import mustache from "mustache/mustache.mjs";
import TranslatorService from "../../../js/services/TranslatorService";
import DateTimeService from "../../../js/services/DateTimeService";
import DeleteEntityConfirmation from "../../../js/components/modal/DeleteEntityConfirmation/DeleteEntityConfirmation";
import $ from "jquery";
import EntityListFilters from "../../../js/components/datatable/entityList/entityListFilters";
import apiService from "../../../js/services/ApiService";
import EntityListSelectable, {
    EntityListSelectableOptionModel
} from "../../../js/components/datatable/entityList/entityListSelectable";

export default class extends Controller {

    fetchMustache() {
        return fetch('/js/mustache/online_lesson_buttons.mustache')
            .then((response) => response.text())
            .then((template) => {
                return template;
            })
    }

    connect() {
        this.fetchMustache().then((template) => {
            TranslatorService.afterTranslationLoaded = () => {
                this.renderTable(template);
            };
        })

        $('.form-control').on('keypress', function (e) {
            if (e.which === 13) {
                e.preventDefault();
            }
        });

        this.isAdmin = $('.app-meeting').hasClass('role-admin');
    }

    renderTable(template) {
        this.template = template;
        const tableHandle = $('#index-table');
        const filters = new EntityListFilters($('#index-table-filters'));
        const selectable = new EntityListSelectable(tableHandle, this.selectableOptions());
        console.log(selectable);
        selectable.toggleButton = $(".selectable-checkbox--toggle");
        this.datatable = new EntityList(
            tableHandle,
            RoutingService.generate('admin_api_meeting_list', {type: tableHandle.data('type')}),
            this.getTableConfiguration(tableHandle.data('type'), selectable),
            filters,
            null,
            true,
            [[this.getTableSort(tableHandle.data('type')), 'asc']]
        );
        if (tableHandle.data('type') === "Webinar") {
            this.datatable.setCreatedRowHandler = ((row, data, index) => {
                if (data.diaryFilled) {
                    $(row).addClass('has-diary')
                } else {
                    $(row).addClass('no-diary')
                }
            })
        }
        $('body').on('click', '.delete-button', function () {
            const buttonHandle = $(this);
            const modal = new DeleteEntityConfirmation(
                this.datatable,
                TranslatorService.trans('ui.meeting.delete_confirm', 'js'),
                TranslatorService.trans('ui.meeting.delete_success', 'js'),
                TranslatorService.trans('ui.meeting.delete_error', 'js'),
            );

            modal.generateUrlFunction = () => {
                const entityId = buttonHandle.data('id');
                return RoutingService.generate('admin_api_meeting_delete', {id: entityId});
            }

            modal.init();
        })

        $('#diary-mass-download').on('click', () => {
            window.open(RoutingService.generate('admin_api_diary_mass_export', this.datatable.datatableHandle.ajax.params()), '_blank').focus();
        })
    }

    getTableSort(type) {
        switch (type) {
            case 'PrivateLesson':
                return 6;
            case 'VideoMeeting':
                return 9;
        }
        return 9;
    }

    getTableConfiguration(type, selectable) {
        switch (type) {
            case 'PrivateLesson':
                return [
                    {
                        data: 'id',
                        orderable: false,
                        render: function (data, type, row, meta) {
                            return selectable.renderCheckbox(data);
                        }
                    },
                    {data: 'name'},
                    {
                        data: 'type',
                        render: (data) => TranslatorService.trans('ui.meeting.type.' + data.toLowerCase(), 'js'),
                    },
                    {data: 'subject'},
                    {data: 'users'},
                    {data: 'channel'},
                    {
                        data: 'duration',
                        render: (data) => data + ' min',
                    },
                    {
                        data: 'startsAt',
                        render: (data) => DateTimeService.toLocaleString(data),
                    },
                    {
                        data: 'createdAt',
                        render: (data) => DateTimeService.toLocaleString(data),
                    },
                    {
                        data: 'updatedAt',
                        render: (data) => DateTimeService.toLocaleString(data),
                    },
                    {
                        orderable: false,
                        data: (data, type, row) => {
                            return mustache.render(this.template, {
                                'clone_url': RoutingService.generate('admin_web_meeting_clone', {id: data.id}),
                                'clone_tooltip': TranslatorService.trans('ui.buttons.clone'),
                                'edit_url': RoutingService.generate('admin_web_meeting_update', {id: data.id}),
                                'edit_tooltip': TranslatorService.trans('ui.buttons.edit'),
                                'object_id': data.id,
                                'delete_tooltip': TranslatorService.trans('ui.buttons.delete'),
                                'has_diary': false,
                                'diary_filled': false,
                            });
                        }
                    }
                ];
            case 'VideoMeeting':
                return [
                    {
                        data: 'id',
                        orderable: false,
                        render: function (data, type, row, meta) {
                            return selectable.renderCheckbox(data);
                        }
                    },
                    {data: 'name'},
                    {
                        data: 'type',
                        render: (data) => TranslatorService.trans('ui.meeting.type.' + data.toLowerCase(), 'js'),
                    },
                    {data: 'subject'},
                    {data: 'users'},
                    {data: 'educationLevels'},
                    {
                        visible: false,
                        data: 'weeks'
                    },
                    {
                        orderable: false,
                        data: 'limit',
                        render: (data, i, row) => {
                            return data ? `${row.participantsCount} / ${data} os` : 'brak'
                        },
                    },
                    {data: 'channel'},
                    {
                        data: 'duration',
                        render: (data) => data + ' min',
                    },
                    {
                        data: 'startsAt',
                        render: (data) => DateTimeService.toLocaleString(data),
                    },
                    {
                        data: 'visibleAt',
                        render: (data) => DateTimeService.toLocaleString(data),
                    },
                    {
                        data: 'createdAt',
                        render: (data) => DateTimeService.toLocaleString(data),
                    },
                    {
                        data: 'updatedAt',
                        render: (data) => DateTimeService.toLocaleString(data),
                    },
                    {
                        orderable: false,
                        data: (data, type, row) => {
                            return mustache.render(this.template, {
                                'clone_url': RoutingService.generate('admin_web_meeting_clone', {id: data.id}),
                                'clone_tooltip': TranslatorService.trans('ui.buttons.clone'),
                                'edit_url': RoutingService.generate('admin_web_meeting_update', {id: data.id}),
                                'edit_tooltip': TranslatorService.trans('ui.buttons.edit'),
                                'object_id': data.id,
                                'delete_tooltip': TranslatorService.trans('ui.buttons.delete'),
                                'has_diary': false,
                                'diary_filled': false,
                            });
                        }
                    }
                ];
        }

        return [
            {
                data: 'id',
                orderable: false,
                render: function (data, type, row, meta) {
                    return selectable.renderCheckbox(data);
                }
            },
            {data: 'name'},
            {
                data: 'type',
                render: (data) => TranslatorService.trans('ui.meeting.type.' + data.toLowerCase(), 'js'),
            },
            {data: 'subject'},
            {data: 'users'},
            {data: 'educationLevels'},
            {data: 'weeks'},
            {data: 'channel'},

            {
                data: 'duration',
                render: (data) => data + ' min',
            },
            {
                orderable: false,
                data: 'limit',
                render: (data, i, row) => {
                    return data ? `${row.participantsCount} / ${data} os` : `${row.participantsCount} os`
                },
            },
            {
                data: 'startsAt',
                render: (data) => DateTimeService.toLocaleString(data),
            },
            {
                data: 'visibleAt',
                render: (data) => DateTimeService.toLocaleString(data),
            },
            {
                data: 'createdAt',
                render: (data) => DateTimeService.toLocaleString(data),
            },
            {
                data: 'updatedAt',
                render: (data) => DateTimeService.toLocaleString(data),
            },
            {
                orderable: false,
                data: (data, type, row) => {
                    return mustache.render(this.template, {
                        'clone_url': RoutingService.generate('admin_web_meeting_clone', {id: data.id}),
                        'clone_tooltip': TranslatorService.trans('ui.buttons.clone'),
                        'edit_url': RoutingService.generate('admin_web_meeting_update', {id: data.id}),
                        'edit_tooltip': TranslatorService.trans('ui.buttons.edit'),
                        'object_id': data.id,
                        'delete_tooltip': TranslatorService.trans('ui.buttons.delete'),
                        'has_diary': true,
                        'diary_tooltip': TranslatorService.trans('ui.meeting.go_to_diary'),
                        'diary_pdf_tooltip': TranslatorService.trans('ui.meeting.generate_pdf'),
                        'diary_url': RoutingService.generate('admin_web_diary_update', {id: data.id}),
                        'diary_pdf_url': RoutingService.generate('admin_web_diary_pdf', {id: data.id}),
                        /*** FEATURE FLAGS ***/
                        'is_enabled_flag_r3': data.isEnabledFlag,
                    });
                }
            }
        ];
    }

    selectableOptions() {
        const sortableDeleteOption = new EntityListSelectableOptionModel(`<i class="fa-regular fa-trash-can"></i> ${TranslatorService.trans('ui.buttons.delete')}`)
        sortableDeleteOption.fn = (selectable) => {

            const modal = new DeleteEntityConfirmation(
                this.datatable,
                TranslatorService.trans('ui.meeting.mass_delete_confirm', 'js'),
                TranslatorService.trans('ui.meeting.mass_delete_success', 'flash'),
            );

            modal.generateUrlFunction = () => {
                return RoutingService.generate('admin_api_meeting_mass_delete', {mass_delete: {meetings: selectable.selectedEntity}});
            }

            modal.init();
        }

        return [sortableDeleteOption];
    }
}
Editor is loading...