[ui] Make organization selector larger

Makes the enrollment modal and the organization selector in it larger to allow for longer names. Signed-off-by: Eva Millán <[email protected]>
chaoss · Oct 19, 2023 · 5fbfa95 · 5fbfa95
1 parent d796fd0
commit 5fbfa95
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 4 deletions.
diff --git a/releases/unreleased/improve-organization-selector.yml b/releases/unreleased/improve-organization-selector.yml
@@ -0,0 +1,11 @@
+---
+title: Improved organization selector
+category: added
+author: Eva Millán <[email protected]>
+issue: 820
+notes: >
+  The organization selector that is used to affiliate individuals
+  now has the option to create an organization if the desired one
+  is not found.
+  Its size is also increased to improve the readability of longer
+  names.
diff --git a/ui/src/components/EnrollModal.vue b/ui/src/components/EnrollModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="isOpen" max-width="550px">
+  <v-dialog v-model="isOpen" :max-width="organization ? '550px' : '700px'">
     <v-card class="pa-3">
       <v-card-title class="headline">{{ title }}</v-card-title>
       <v-card-text>
@@ -10,18 +10,18 @@
           Enrollment dates (optional)
         </h6>
         <v-row>
-          <v-col v-if="!organization" cols="4">
+          <v-col v-if="!organization" cols="6">
             <organization-selector
               v-model="form.organization"
               :add-organization="addOrganization"
               :fetch-organizations="fetchOrganizations"
               @error="($event) => (errorMessage = $event)"
             />
           </v-col>
-          <v-col :cols="organization ? 6 : 4">
+          <v-col :cols="organization ? 6 : 3">
             <date-input v-model="form.dateFrom" label="Date from" outlined />
           </v-col>
-          <v-col :cols="organization ? 6 : 4">
+          <v-col :cols="organization ? 6 : 3">
             <date-input v-model="form.dateTo" label="Date to" outlined />
           </v-col>
         </v-row>

diff --git a/ui/tests/unit/__snapshots__/mutations.spec.js.snap b/ui/tests/unit/__snapshots__/mutations.spec.js.snap
@@ -261,13 +261,15 @@ exports[`IndividualsTable Mock query for deleteIdentity 1`] = `
    
   <profile-modal-stub
     addidentity="[Function]"
+    addorganization="[Function]"
     enroll="[Function]"
     fetchorganizations="[Function]"
     getcountries="[Function]"
     updateprofile="[Function]"
   />
    
   <enroll-modal-stub
+    addorganization="[Function]"
     enroll="[Function]"
     fetchorganizations="[Function]"
     text=""
@@ -559,13 +561,15 @@ exports[`IndividualsTable Mock query for merge 1`] = `
    
   <profile-modal-stub
     addidentity="[Function]"
+    addorganization="[Function]"
     enroll="[Function]"
     fetchorganizations="[Function]"
     getcountries="[Function]"
     updateprofile="[Function]"
   />
    
   <enroll-modal-stub
+    addorganization="[Function]"
     enroll="[Function]"
     fetchorganizations="[Function]"
     text=""
@@ -857,13 +861,15 @@ exports[`IndividualsTable Mock query for moveIdentity 1`] = `
    
   <profile-modal-stub
     addidentity="[Function]"
+    addorganization="[Function]"
     enroll="[Function]"
     fetchorganizations="[Function]"
     getcountries="[Function]"
     updateprofile="[Function]"
   />
    
   <enroll-modal-stub
+    addorganization="[Function]"
     enroll="[Function]"
     fetchorganizations="[Function]"
     text=""
@@ -1155,13 +1161,15 @@ exports[`IndividualsTable Mock query for unmerge 1`] = `
    
   <profile-modal-stub
     addidentity="[Function]"
+    addorganization="[Function]"
     enroll="[Function]"
     fetchorganizations="[Function]"
     getcountries="[Function]"
     updateprofile="[Function]"
   />
    
   <enroll-modal-stub
+    addorganization="[Function]"
     enroll="[Function]"
     fetchorganizations="[Function]"
     text=""
@@ -1453,13 +1461,15 @@ exports[`IndividualsTable Mock query for updateEnrollment 1`] = `
    
   <profile-modal-stub
     addidentity="[Function]"
+    addorganization="[Function]"
     enroll="[Function]"
     fetchorganizations="[Function]"
     getcountries="[Function]"
     updateprofile="[Function]"
   />
    
   <enroll-modal-stub
+    addorganization="[Function]"
     enroll="[Function]"
     fetchorganizations="[Function]"
     text=""
@@ -1751,13 +1761,15 @@ exports[`IndividualsTable Mock query for withdraw 1`] = `
    
   <profile-modal-stub
     addidentity="[Function]"
+    addorganization="[Function]"
     enroll="[Function]"
     fetchorganizations="[Function]"
     getcountries="[Function]"
     updateprofile="[Function]"
   />
    
   <enroll-modal-stub
+    addorganization="[Function]"
     enroll="[Function]"
     fetchorganizations="[Function]"
     text=""

diff --git a/ui/tests/unit/__snapshots__/queries.spec.js.snap b/ui/tests/unit/__snapshots__/queries.spec.js.snap
@@ -268,13 +268,15 @@ exports[`IndividualsTable Mock query for getCountries 1`] = `
    
   <profile-modal-stub
     addidentity="[Function]"
+    addorganization="[Function]"
     enroll="[Function]"
     fetchorganizations="[Function]"
     getcountries="[Function]"
     updateprofile="[Function]"
   />
    
   <enroll-modal-stub
+    addorganization="[Function]"
     enroll="[Function]"
     fetchorganizations="[Function]"
     text=""
@@ -566,13 +568,15 @@ exports[`IndividualsTable Mock query for getPaginatedIndividuals 1`] = `
    
   <profile-modal-stub
     addidentity="[Function]"
+    addorganization="[Function]"
     enroll="[Function]"
     fetchorganizations="[Function]"
     getcountries="[Function]"
     updateprofile="[Function]"
   />
    
   <enroll-modal-stub
+    addorganization="[Function]"
     enroll="[Function]"
     fetchorganizations="[Function]"
     text=""