diff options
Diffstat (limited to 'app/assets/javascripts/organizations/new/components/app.vue')
-rw-r--r-- | app/assets/javascripts/organizations/new/components/app.vue | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/app/assets/javascripts/organizations/new/components/app.vue b/app/assets/javascripts/organizations/new/components/app.vue new file mode 100644 index 00000000000..8f71fdfe68b --- /dev/null +++ b/app/assets/javascripts/organizations/new/components/app.vue @@ -0,0 +1,82 @@ +<script> +import { GlSprintf, GlLink } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import { visitUrlWithAlerts } from '~/lib/utils/url_utility'; +import { createAlert } from '~/alert'; +import { helpPagePath } from '~/helpers/help_page_helper'; +import createOrganizationMutation from '../graphql/mutations/create_organization.mutation.graphql'; +import NewEditForm from '../../shared/components/new_edit_form.vue'; + +export default { + name: 'OrganizationNewApp', + components: { NewEditForm, GlSprintf, GlLink }, + i18n: { + pageTitle: s__('Organization|New organization'), + pageDescription: s__( + 'Organization|%{linkStart}Organizations%{linkEnd} are a top-level container to hold your groups and projects.', + ), + errorMessage: s__('Organization|An error occurred creating an organization. Please try again.'), + successAlertTitle: s__('Organization|Organization successfully created.'), + successAlertMessage: s__('Organization|You can now start using your new organization.'), + }, + data() { + return { + loading: false, + }; + }, + computed: { + organizationsHelpPagePath() { + return helpPagePath('user/organization/index'); + }, + }, + methods: { + async onSubmit(formValues) { + this.loading = true; + try { + const { + data: { + createOrganization: { organization, errors }, + }, + } = await this.$apollo.mutate({ + mutation: createOrganizationMutation, + variables: { + ...formValues, + }, + }); + + if (errors.length) { + // TODO: handle errors when using real API after https://gitlab.com/gitlab-org/gitlab/-/issues/417891 is complete. + return; + } + + visitUrlWithAlerts(organization.path, [ + { + id: 'organization-successfully-created', + title: this.$options.i18n.successAlertTitle, + message: this.$options.i18n.successAlertMessage, + variant: 'success', + }, + ]); + } catch (error) { + createAlert({ message: this.$options.i18n.errorMessage, error, captureError: true }); + } finally { + this.loading = false; + } + }, + }, +}; +</script> + +<template> + <div class="gl-py-6"> + <h1 class="gl-mt-0 gl-font-size-h-display">{{ $options.i18n.pageTitle }}</h1> + <p> + <gl-sprintf :message="$options.i18n.pageDescription"> + <template #link="{ content }" + ><gl-link :href="organizationsHelpPagePath">{{ content }}</gl-link></template + > + </gl-sprintf> + </p> + <new-edit-form :loading="loading" @submit="onSubmit" /> + </div> +</template> |