import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import csrf from '~/lib/utils/csrf'; import AdminUsersApp from './components/app.vue'; import ModalManager from './components/modals/user_modal_manager.vue'; import UserActions from './components/user_actions.vue'; import { CONFIRM_DELETE_BUTTON_SELECTOR, MODAL_TEXTS_CONTAINER_SELECTOR, MODAL_MANAGER_SELECTOR, } from './constants'; Vue.use(VueApollo); const apolloProvider = new VueApollo({ defaultClient: createDefaultClient(), }); const initApp = (el, component, userPropKey, props = {}) => { if (!el) { return false; } const { [userPropKey]: user, paths } = el.dataset; return new Vue({ el, apolloProvider, render: (createElement) => createElement(component, { props: { [userPropKey]: convertObjectPropsToCamelCase(JSON.parse(user), { deep: true }), paths: convertObjectPropsToCamelCase(JSON.parse(paths)), ...props, }, }), }); }; export const initAdminUsersApp = (el = document.querySelector('#js-admin-users-app')) => initApp(el, AdminUsersApp, 'users'); export const initAdminUserActions = (el = document.querySelector('#js-admin-user-actions')) => initApp(el, UserActions, 'user', { showButtonLabels: true }); export const initDeleteUserModals = () => { const modalsMountElement = document.querySelector(MODAL_TEXTS_CONTAINER_SELECTOR); if (!modalsMountElement) { return; } const modalConfiguration = Array.from(modalsMountElement.children).reduce((accumulator, node) => { const { modal, ...config } = node.dataset; return { ...accumulator, [modal]: { title: node.dataset.title, ...config, content: node.innerHTML, }, }; }, {}); // eslint-disable-next-line no-new new Vue({ el: MODAL_MANAGER_SELECTOR, functional: true, methods: { show(...args) { this.$refs.manager.show(...args); }, }, render(h) { return h(ModalManager, { ref: 'manager', props: { selector: CONFIRM_DELETE_BUTTON_SELECTOR, modalConfiguration, csrfToken: csrf.token, }, }); }, }); };