diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-16 03:15:50 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-16 03:15:50 +0300 |
commit | e04431d29efaf17dda9dfbfbd0c5001693b25ee4 (patch) | |
tree | f114abad1f4882ef6c9c702e8de3a84334809031 /app/assets/javascripts/crm | |
parent | 1c898dc5c10bbedf94386d917259153d73608495 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/crm')
-rw-r--r-- | app/assets/javascripts/crm/components/contact_form.vue (renamed from app/assets/javascripts/crm/components/new_contact_form.vue) | 130 | ||||
-rw-r--r-- | app/assets/javascripts/crm/components/contacts_root.vue | 58 | ||||
-rw-r--r-- | app/assets/javascripts/crm/components/queries/update_contact.mutation.graphql | 10 | ||||
-rw-r--r-- | app/assets/javascripts/crm/constants.js | 3 | ||||
-rw-r--r-- | app/assets/javascripts/crm/contacts_bundle.js | 10 | ||||
-rw-r--r-- | app/assets/javascripts/crm/routes.js | 20 |
6 files changed, 175 insertions, 56 deletions
diff --git a/app/assets/javascripts/crm/components/new_contact_form.vue b/app/assets/javascripts/crm/components/contact_form.vue index 53e6bb1a123..81ae5c246be 100644 --- a/app/assets/javascripts/crm/components/new_contact_form.vue +++ b/app/assets/javascripts/crm/components/contact_form.vue @@ -4,7 +4,8 @@ import { produce } from 'immer'; import { __, s__ } from '~/locale'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import { TYPE_GROUP } from '~/graphql_shared/constants'; -import createContact from './queries/create_contact.mutation.graphql'; +import createContactMutation from './queries/create_contact.mutation.graphql'; +import updateContactMutation from './queries/update_contact.mutation.graphql'; import getGroupContactsQuery from './queries/get_group_contacts.query.graphql'; export default { @@ -21,6 +22,11 @@ export default { type: Boolean, required: true, }, + contact: { + type: Object, + required: false, + default: () => {}, + }, }, data() { return { @@ -35,66 +41,111 @@ export default { }, computed: { invalid() { - return this.firstName === '' || this.lastName === '' || this.email === ''; + const { firstName, lastName, email } = this; + + return firstName.trim() === '' || lastName.trim() === '' || email.trim() === ''; + }, + editMode() { + return Boolean(this.contact); + }, + title() { + return this.editMode ? this.$options.i18n.editTitle : this.$options.i18n.newTitle; + }, + buttonLabel() { + return this.editMode + ? this.$options.i18n.editButtonLabel + : this.$options.i18n.createButtonLabel; + }, + mutation() { + return this.editMode ? updateContactMutation : createContactMutation; + }, + variables() { + const { contact, firstName, lastName, phone, email, description, editMode, groupId } = this; + + const variables = { + input: { + firstName, + lastName, + phone, + email, + description, + }, + }; + + if (editMode) { + variables.input.id = contact.id; + } else { + variables.input.groupId = convertToGraphQLId(TYPE_GROUP, groupId); + } + + return variables; }, }, + mounted() { + if (this.editMode) { + const { contact } = this; + + this.firstName = contact.firstName || ''; + this.lastName = contact.lastName || ''; + this.phone = contact.phone || ''; + this.email = contact.email || ''; + this.description = contact.description || ''; + } + }, methods: { save() { + const { mutation, variables, updateCache, close } = this; + this.submitting = true; + return this.$apollo .mutate({ - mutation: createContact, - variables: { - input: { - groupId: convertToGraphQLId(TYPE_GROUP, this.groupId), - firstName: this.firstName, - lastName: this.lastName, - phone: this.phone, - email: this.email, - description: this.description, - }, - }, - update: this.updateCache, + mutation, + variables, + update: updateCache, }) .then(({ data }) => { - if (data.customerRelationsContactCreate.errors.length === 0) this.close(true); + if ( + data.customerRelationsContactCreate?.errors.length === 0 || + data.customerRelationsContactUpdate?.errors.length === 0 + ) { + close(true); + } this.submitting = false; }) .catch(() => { - this.errorMessages = [__('Something went wrong. Please try again.')]; + this.errorMessages = [this.$options.i18n.somethingWentWrong]; this.submitting = false; }); }, close(success) { this.$emit('close', success); }, - updateCache(store, { data: { customerRelationsContactCreate } }) { - if (customerRelationsContactCreate.errors.length > 0) { - this.errorMessages = customerRelationsContactCreate.errors; + updateCache(store, { data }) { + const mutationData = + data.customerRelationsContactCreate || data.customerRelationsContactUpdate; + + if (mutationData?.errors.length > 0) { + this.errorMessages = mutationData.errors; return; } - const variables = { - groupFullPath: this.groupFullPath, - }; - const sourceData = store.readQuery({ + const queryArgs = { query: getGroupContactsQuery, - variables, - }); + variables: { groupFullPath: this.groupFullPath }, + }; - const data = produce(sourceData, (draftState) => { + const sourceData = store.readQuery(queryArgs); + + queryArgs.data = produce(sourceData, (draftState) => { draftState.group.contacts.nodes = [ - ...sourceData.group.contacts.nodes, - customerRelationsContactCreate.contact, + ...sourceData.group.contacts.nodes.filter(({ id }) => id !== this.contact?.id), + mutationData.contact, ]; }); - store.writeQuery({ - query: getGroupContactsQuery, - variables, - data, - }); + store.writeQuery(queryArgs); }, getDrawerHeaderHeight() { const wrapperEl = document.querySelector('.content-wrapper'); @@ -107,14 +158,17 @@ export default { }, }, i18n: { - buttonLabel: s__('Crm|Create new contact'), + createButtonLabel: s__('Crm|Create new contact'), + editButtonLabel: __('Save changes'), cancel: __('Cancel'), firstName: s__('Crm|First name'), lastName: s__('Crm|Last name'), email: s__('Crm|Email'), phone: s__('Crm|Phone number (optional)'), description: s__('Crm|Description (optional)'), - title: s__('Crm|New Contact'), + newTitle: s__('Crm|New contact'), + editTitle: s__('Crm|Edit contact'), + somethingWentWrong: __('Something went wrong. Please try again.'), }, }; </script> @@ -127,7 +181,7 @@ export default { @close="close(false)" > <template #title> - <h4>{{ $options.i18n.title }}</h4> + <h3>{{ title }}</h3> </template> <gl-alert v-if="errorMessages.length" variant="danger" @dismiss="errorMessages = []"> <ul class="gl-mb-0! gl-ml-5"> @@ -160,9 +214,9 @@ export default { variant="confirm" :disabled="invalid" :loading="submitting" - data-testid="create-new-contact-button" + data-testid="save-contact-button" type="submit" - >{{ $options.i18n.buttonLabel }}</gl-button + >{{ buttonLabel }}</gl-button > </span> </form> diff --git a/app/assets/javascripts/crm/components/contacts_root.vue b/app/assets/javascripts/crm/components/contacts_root.vue index 7ff1d4fa1fd..178ce84c64d 100644 --- a/app/assets/javascripts/crm/components/contacts_root.vue +++ b/app/assets/javascripts/crm/components/contacts_root.vue @@ -2,9 +2,11 @@ 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 { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils'; +import { TYPE_CRM_CONTACT } from '~/graphql_shared/constants'; +import { INDEX_ROUTE_NAME, NEW_ROUTE_NAME, EDIT_ROUTE_NAME } from '../constants'; import getGroupContactsQuery from './queries/get_group_contacts.query.graphql'; -import NewContactForm from './new_contact_form.vue'; +import ContactForm from './contact_form.vue'; export default { components: { @@ -12,7 +14,7 @@ export default { GlButton, GlLoadingIcon, GlTable, - NewContactForm, + ContactForm, }, directives: { GlTooltip: GlTooltipDirective, @@ -47,11 +49,19 @@ export default { return this.$apollo.queries.contacts.loading; }, showNewForm() { - return this.$route.path.startsWith('/new'); + return this.$route.name === NEW_ROUTE_NAME; }, - canCreateNew() { + showEditForm() { + return !this.isLoading && this.$route.name === EDIT_ROUTE_NAME; + }, + canAdmin() { return parseBoolean(this.canAdminCrmContact); }, + editingContact() { + return this.contacts.find( + (contact) => contact.id === convertToGraphQLId(TYPE_CRM_CONTACT, this.$route.params.id), + ); + }, }, methods: { extractContacts(data) { @@ -61,16 +71,28 @@ export default { displayNewForm() { if (this.showNewForm) return; - this.$router.push({ path: '/new' }); + this.$router.push({ name: NEW_ROUTE_NAME }); }, hideNewForm(success) { if (success) this.$toast.show(s__('Crm|Contact has been added')); - this.$router.replace({ path: '/' }); + this.$router.replace({ name: INDEX_ROUTE_NAME }); + }, + hideEditForm(success) { + if (success) this.$toast.show(s__('Crm|Contact has been updated')); + + this.editingContactId = 0; + this.$router.replace({ name: INDEX_ROUTE_NAME }); }, getIssuesPath(path, value) { return `${path}?scope=all&state=opened&crm_contact_id=${value}`; }, + edit(value) { + if (this.showEditForm) return; + + this.editingContactId = value; + this.$router.push({ name: EDIT_ROUTE_NAME, params: { id: value } }); + }, }, fields: [ { key: 'firstName', sortable: true }, @@ -87,7 +109,7 @@ export default { }, { key: 'id', - label: __('Issues'), + label: '', formatter: (id) => { return getIdFromGraphQLId(id); }, @@ -96,6 +118,7 @@ export default { i18n: { emptyText: s__('Crm|No contacts found'), issuesButtonLabel: __('View issues'), + editButtonLabel: __('Edit'), title: s__('Crm|Customer Relations Contacts'), newContact: s__('Crm|New contact'), errorText: __('Something went wrong. Please try again.'), @@ -116,7 +139,7 @@ export default { </h2> <div class="gl-display-none gl-md-display-flex gl-align-items-center gl-justify-content-end"> <gl-button - v-if="canCreateNew" + v-if="canAdmin" variant="confirm" data-testid="new-contact-button" @click="displayNewForm" @@ -125,7 +148,13 @@ export default { </gl-button> </div> </div> - <new-contact-form v-if="showNewForm" :drawer-open="showNewForm" @close="hideNewForm" /> + <contact-form v-if="showNewForm" :drawer-open="showNewForm" @close="hideNewForm" /> + <contact-form + v-if="showEditForm" + :contact="editingContact" + :drawer-open="showEditForm" + @close="hideEditForm" + /> <gl-loading-icon v-if="isLoading" class="gl-mt-5" size="lg" /> <gl-table v-else @@ -138,11 +167,20 @@ export default { <template #cell(id)="data"> <gl-button v-gl-tooltip.hover.bottom="$options.i18n.issuesButtonLabel" + class="gl-mr-3" data-testid="issues-link" icon="issues" :aria-label="$options.i18n.issuesButtonLabel" :href="getIssuesPath(groupIssuesPath, data.value)" /> + <gl-button + v-if="canAdmin" + v-gl-tooltip.hover.bottom="$options.i18n.editButtonLabel" + data-testid="edit-contact-button" + icon="pencil" + :aria-label="$options.i18n.editButtonLabel" + @click="edit(data.value)" + /> </template> </gl-table> </div> diff --git a/app/assets/javascripts/crm/components/queries/update_contact.mutation.graphql b/app/assets/javascripts/crm/components/queries/update_contact.mutation.graphql new file mode 100644 index 00000000000..f55f6a10e0a --- /dev/null +++ b/app/assets/javascripts/crm/components/queries/update_contact.mutation.graphql @@ -0,0 +1,10 @@ +#import "./crm_contact_fields.fragment.graphql" + +mutation updateContact($input: CustomerRelationsContactUpdateInput!) { + customerRelationsContactUpdate(input: $input) { + contact { + ...ContactFragment + } + errors + } +} diff --git a/app/assets/javascripts/crm/constants.js b/app/assets/javascripts/crm/constants.js new file mode 100644 index 00000000000..3b085837aea --- /dev/null +++ b/app/assets/javascripts/crm/constants.js @@ -0,0 +1,3 @@ +export const INDEX_ROUTE_NAME = 'index'; +export const NEW_ROUTE_NAME = 'new'; +export const EDIT_ROUTE_NAME = 'edit'; diff --git a/app/assets/javascripts/crm/contacts_bundle.js b/app/assets/javascripts/crm/contacts_bundle.js index 2362a593d45..f49ec64210f 100644 --- a/app/assets/javascripts/crm/contacts_bundle.js +++ b/app/assets/javascripts/crm/contacts_bundle.js @@ -4,6 +4,7 @@ import VueApollo from 'vue-apollo'; import VueRouter from 'vue-router'; import createDefaultClient from '~/lib/graphql'; import CrmContactsRoot from './components/contacts_root.vue'; +import routes from './routes'; Vue.use(VueApollo); Vue.use(VueRouter); @@ -25,14 +26,7 @@ export default () => { const router = new VueRouter({ base: basePath, mode: 'history', - routes: [ - { - // eslint-disable-next-line @gitlab/require-i18n-strings - name: 'Contacts List', - path: '/', - component: CrmContactsRoot, - }, - ], + routes, }); return new Vue({ diff --git a/app/assets/javascripts/crm/routes.js b/app/assets/javascripts/crm/routes.js new file mode 100644 index 00000000000..586fd7b987d --- /dev/null +++ b/app/assets/javascripts/crm/routes.js @@ -0,0 +1,20 @@ +import { INDEX_ROUTE_NAME, NEW_ROUTE_NAME, EDIT_ROUTE_NAME } from './constants'; +import CrmContactsRoot from './components/contacts_root.vue'; + +export default [ + { + name: INDEX_ROUTE_NAME, + path: '/', + component: CrmContactsRoot, + }, + { + name: NEW_ROUTE_NAME, + path: '/new', + component: CrmContactsRoot, + }, + { + name: EDIT_ROUTE_NAME, + path: '/:id/edit', + component: CrmContactsRoot, + }, +]; |