1 files changed, 50 insertions, 8 deletions
diff --git a/app/assets/javascripts/crm/contacts/components/contact_form_wrapper.vue b/app/assets/javascripts/crm/contacts/components/contact_form_wrapper.vue
index 58eaabfbb7f..f114ffedfe6 100644
--- a/app/assets/javascripts/crm/contacts/components/contact_form_wrapper.vue
+++ b/app/assets/javascripts/crm/contacts/components/contact_form_wrapper.vue
@@ -3,6 +3,7 @@ import { s__, __ } from '~/locale';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { TYPE_CRM_CONTACT, TYPE_GROUP } from '~/graphql_shared/constants';
 import ContactForm from '../../components/form.vue';
+import getGroupOrganizationsQuery from '../../organizations/components/graphql/get_group_organizations.query.graphql';
 import getGroupContactsQuery from './graphql/get_group_contacts.query.graphql';
 import createContactMutation from './graphql/create_contact.mutation.graphql';
 import updateContactMutation from './graphql/update_contact.mutation.graphql';
@@ -19,6 +20,26 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      organizations: [],
+    };
+  },
+  apollo: {
+    organizations: {
+      query() {
+        return getGroupOrganizationsQuery;
+      },
+      variables() {
+        return {
+          groupFullPath: this.groupFullPath,
+        };
+      },
+      update(data) {
+        return this.extractOrganizations(data);
+      },
+    },
+  },
   computed: {
     contactGraphQLId() {
       if (!this.isEditMode) return null;
@@ -52,14 +73,35 @@ export default {
     additionalCreateParams() {
       return { groupId: this.groupGraphQLId };
     },
+    fields() {
+      return [
+        { name: 'firstName', label: __('First name'), required: true },
+        { name: 'lastName', label: __('Last name'), required: true },
+        { name: 'email', label: __('Email'), required: true },
+        { name: 'phone', label: __('Phone') },
+        {
+          name: 'organizationId',
+          label: s__('Crm|Organization'),
+          values: this.organizationSelectValues,
+        },
+        { name: 'description', label: __('Description') },
+      ];
+    },
+    organizationSelectValues() {
+      const values = this.organizations.map((o) => {
+        return { value: o.id, text: o.name };
+      });
+
+      values.unshift({ value: null, text: s__('Crm|No organization') });
+      return values;
+    },
+  },
+  methods: {
+    extractOrganizations(data) {
+      const organizations = data?.group?.organizations?.nodes || [];
+      return organizations.slice().sort((a, b) => a.name.localeCompare(b.name));
+    },
   },
-  fields: [
-    { name: 'firstName', label: __('First name'), required: true },
-    { name: 'lastName', label: __('Last name'), required: true },
-    { name: 'email', label: __('Email'), required: true },
-    { name: 'phone', label: __('Phone') },
-    { name: 'description', label: __('Description') },
-  ],
 };
 </script>
 
@@ -71,7 +113,7 @@ export default {
     :mutation="mutation"
     :additional-create-params="additionalCreateParams"
     :existing-id="contactGraphQLId"
-    :fields="$options.fields"
+    :fields="fields"
     :title="title"
     :success-message="successMessage"
   />