debian-mirror-gitlab/app/assets/javascripts/admin/users/index.js

89 lines
2.3 KiB
JavaScript
Raw Normal View History

2021-02-22 17:27:13 +05:30
import Vue from 'vue';
2021-06-08 01:23:25 +05:30
import VueApollo from 'vue-apollo';
import createDefaultClient from '~/lib/graphql';
2021-02-22 17:27:13 +05:30
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
2021-09-30 23:02:18 +05:30
import csrf from '~/lib/utils/csrf';
2021-02-22 17:27:13 +05:30
import AdminUsersApp from './components/app.vue';
2021-09-30 23:02:18 +05:30
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';
2021-06-08 01:23:25 +05:30
Vue.use(VueApollo);
const apolloProvider = new VueApollo({
defaultClient: createDefaultClient({}, { assumeImmutableResults: true }),
});
2021-02-22 17:27:13 +05:30
2021-09-30 23:02:18 +05:30
const initApp = (el, component, userPropKey, props = {}) => {
2021-02-22 17:27:13 +05:30
if (!el) {
return false;
}
2021-09-30 23:02:18 +05:30
const { [userPropKey]: user, paths } = el.dataset;
2021-02-22 17:27:13 +05:30
return new Vue({
el,
2021-06-08 01:23:25 +05:30
apolloProvider,
2021-03-08 18:12:59 +05:30
render: (createElement) =>
2021-09-30 23:02:18 +05:30
createElement(component, {
2021-02-22 17:27:13 +05:30
props: {
2021-09-30 23:02:18 +05:30
[userPropKey]: convertObjectPropsToCamelCase(JSON.parse(user), { deep: true }),
2021-02-22 17:27:13 +05:30
paths: convertObjectPropsToCamelCase(JSON.parse(paths)),
2021-09-30 23:02:18 +05:30
...props,
2021-02-22 17:27:13 +05:30
},
}),
});
2021-03-11 19:13:27 +05:30
};
2021-09-30 23:02:18 +05:30
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,
},
});
},
});
};