debian-mirror-gitlab/app/assets/javascripts/crm/components/organizations_root.vue
2022-01-26 12:08:38 +05:30

140 lines
4 KiB
Vue

<script>
import { GlAlert, GlButton, GlLoadingIcon, GlTable, GlTooltipDirective } from '@gitlab/ui';
import { parseBoolean } from '~/lib/utils/common_utils';
import { s__, __ } from '~/locale';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import { INDEX_ROUTE_NAME, NEW_ROUTE_NAME } from '../constants';
import getGroupOrganizationsQuery from './queries/get_group_organizations.query.graphql';
import NewOrganizationForm from './new_organization_form.vue';
export default {
components: {
GlAlert,
GlButton,
GlLoadingIcon,
GlTable,
NewOrganizationForm,
},
directives: {
GlTooltip: GlTooltipDirective,
},
inject: ['canAdminCrmOrganization', 'groupFullPath', 'groupIssuesPath'],
data() {
return {
error: false,
organizations: [],
};
},
apollo: {
organizations: {
query() {
return getGroupOrganizationsQuery;
},
variables() {
return {
groupFullPath: this.groupFullPath,
};
},
update(data) {
return this.extractOrganizations(data);
},
error() {
this.error = true;
},
},
},
computed: {
isLoading() {
return this.$apollo.queries.organizations.loading;
},
showNewForm() {
return this.$route.name === NEW_ROUTE_NAME;
},
canCreateNew() {
return parseBoolean(this.canAdminCrmOrganization);
},
},
methods: {
extractOrganizations(data) {
const organizations = data?.group?.organizations?.nodes || [];
return organizations.slice().sort((a, b) => a.name.localeCompare(b.name));
},
getIssuesPath(path, value) {
return `${path}?scope=all&state=opened&crm_organization_id=${value}`;
},
displayNewForm() {
if (this.showNewForm) return;
this.$router.push({ name: NEW_ROUTE_NAME });
},
hideNewForm(success) {
if (success) this.$toast.show(this.$options.i18n.organizationAdded);
this.$router.replace({ name: INDEX_ROUTE_NAME });
},
},
fields: [
{ key: 'name', sortable: true },
{ key: 'defaultRate', sortable: true },
{ key: 'description', sortable: true },
{
key: 'id',
label: __('Issues'),
formatter: (id) => {
return getIdFromGraphQLId(id);
},
},
],
i18n: {
emptyText: s__('Crm|No organizations found'),
issuesButtonLabel: __('View issues'),
title: s__('Crm|Customer Relations Organizations'),
newOrganization: s__('Crm|New organization'),
errorText: __('Something went wrong. Please try again.'),
organizationAdded: s__('Crm|Organization has been added'),
},
};
</script>
<template>
<div>
<gl-alert v-if="error" variant="danger" class="gl-mt-6" @dismiss="error = false">
{{ $options.i18n.errorText }}
</gl-alert>
<div
class="gl-display-flex gl-align-items-baseline gl-flex-direction-row gl-justify-content-space-between gl-mt-6"
>
<h2 class="gl-font-size-h2 gl-my-0">
{{ $options.i18n.title }}
</h2>
<div
v-if="canCreateNew"
class="gl-display-none gl-md-display-flex gl-align-items-center gl-justify-content-end"
>
<gl-button variant="confirm" data-testid="new-organization-button" @click="displayNewForm">
{{ $options.i18n.newOrganization }}
</gl-button>
</div>
</div>
<new-organization-form v-if="showNewForm" :drawer-open="showNewForm" @close="hideNewForm" />
<gl-loading-icon v-if="isLoading" class="gl-mt-5" size="lg" />
<gl-table
v-else
class="gl-mt-5"
:items="organizations"
:fields="$options.fields"
:empty-text="$options.i18n.emptyText"
show-empty
>
<template #cell(id)="data">
<gl-button
v-gl-tooltip.hover.bottom="$options.i18n.issuesButtonLabel"
data-testid="issues-link"
icon="issues"
:aria-label="$options.i18n.issuesButtonLabel"
:href="getIssuesPath(groupIssuesPath, data.value)"
/>
</template>
</gl-table>
</div>
</template>