From 1610b5931fef831b5c8eff0916fc445131a0a00e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eva=20Mill=C3=A1n?= <evamillan@bitergia.com>
Date: Tue, 12 Dec 2023 11:55:17 +0100
Subject: [PATCH] [ui] Replace job criteria select with checkboxes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the select field for the unify and recommend
matches jobs with checkboxes to improve UX.

Signed-off-by: Eva Millán <evamillan@bitergia.com>
---
 .../improve-readability-of-form-options.yml   |   8 +
 ui/src/components/JobModal.vue                | 146 ++++++++++++------
 ui/src/styles/index.scss                      |   4 +
 3 files changed, 108 insertions(+), 50 deletions(-)
 create mode 100644 releases/unreleased/improve-readability-of-form-options.yml

diff --git a/releases/unreleased/improve-readability-of-form-options.yml b/releases/unreleased/improve-readability-of-form-options.yml
new file mode 100644
index 00000000..a3748efa
--- /dev/null
+++ b/releases/unreleased/improve-readability-of-form-options.yml
@@ -0,0 +1,8 @@
+---
+title: Improved readability of job settings
+category: added
+author: Eva Millán <evamillan@bitergia.com>
+issue: null
+notes: >
+  The options for the "unify" and "recommend matches"
+  jobs are now displayed in a clearer way.
diff --git a/ui/src/components/JobModal.vue b/ui/src/components/JobModal.vue
index 6adfaf8c..8e920341 100644
--- a/ui/src/components/JobModal.vue
+++ b/ui/src/components/JobModal.vue
@@ -43,56 +43,102 @@
             />
           </v-col>
         </v-row>
-        <v-row v-if="selected === 'unify'">
-          <v-col>
-            <v-select
-              v-model="forms.unify.criteria"
-              :items="['name', 'email', 'username']"
-              :menu-props="{ bottom: true, offsetY: true }"
-              label="Criteria"
-              dense
-              hide-details
-              multiple
-              outlined
-            />
-            <v-checkbox
-              v-model="forms.unify.strict"
-              label="Exclude individuals with invalid email adresses and names"
-              id="unify_strict"
-              hide-details
-            />
-            <v-checkbox
-              v-model="forms.unify.exclude"
-              label="Exclude individuals in RecommenderExclusionTerm list"
-              id="unify_exclude"
-            />
-          </v-col>
-        </v-row>
-        <v-row v-if="selected === 'recommendMatches'">
-          <v-col>
-            <v-select
-              v-model="forms.recommendMatches.criteria"
-              :items="['name', 'email', 'username']"
-              :menu-props="{ bottom: true, offsetY: true }"
-              label="Criteria"
-              dense
-              hide-details
-              multiple
-              outlined
-            />
-            <v-checkbox
-              v-model="forms.recommendMatches.strict"
-              label="Exclude individuals with invalid email adresses and names"
-              id="recommend_strict"
-              hide-details
-            />
-            <v-checkbox
-              v-model="forms.recommendMatches.exclude"
-              label="Exclude individuals in RecommenderExclusionTerm list"
-              id="recommend_exclude"
-            />
-          </v-col>
-        </v-row>
+        <v-form v-if="selected === 'unify'">
+          <v-row class="ma-0 mt-2">
+            <v-col class="pa-0 mb-3">
+              <v-checkbox
+                v-model="forms.unify.exclude"
+                label="Exclude individuals in RecommenderExclusionTerm list"
+                dense
+                hide-details
+              />
+              <v-checkbox
+                v-model="forms.unify.strict"
+                label="Exclude individuals with invalid email adresses and names"
+                dense
+                hide-details
+              />
+            </v-col>
+          </v-row>
+          <v-row class="ma-0">
+            <v-col class="pa-0">
+              <fieldset>
+                <legend class="subheader text--secondary">
+                  Unify profiles based on their:
+                </legend>
+                <v-checkbox
+                  v-model="forms.unify.criteria"
+                  label="Name"
+                  value="name"
+                  dense
+                  hide-details
+                />
+                <v-checkbox
+                  v-model="forms.unify.criteria"
+                  label="Email"
+                  value="email"
+                  dense
+                  hide-details
+                />
+                <v-checkbox
+                  v-model="forms.unify.criteria"
+                  label="Username"
+                  value="username"
+                  dense
+                  hide-details
+                />
+              </fieldset>
+            </v-col>
+          </v-row>
+        </v-form>
+        <v-form v-if="selected === 'recommendMatches'">
+          <v-row class="ma-0 mt-2">
+            <v-col class="pa-0 mb-3">
+              <v-checkbox
+                v-model="forms.recommendMatches.exclude"
+                label="Exclude individuals in RecommenderExclusionTerm list"
+                dense
+                hide-details
+              />
+              <v-checkbox
+                v-model="forms.recommendMatches.strict"
+                label="Exclude individuals with invalid email adresses and names"
+                dense
+                hide-details
+              />
+            </v-col>
+          </v-row>
+          <v-row class="ma-0">
+            <v-col class="pa-0">
+              <fieldset>
+                <legend class="subheader text--secondary">
+                  Recommend matches based on:
+                </legend>
+                <v-checkbox
+                  v-model="forms.recommendMatches.criteria"
+                  label="Name"
+                  value="name"
+                  dense
+                  hide-details
+                />
+                <v-checkbox
+                  v-model="forms.recommendMatches.criteria"
+                  label="Email"
+                  value="email"
+                  dense
+                  hide-details
+                />
+                <v-checkbox
+                  v-model="forms.recommendMatches.criteria"
+                  label="Username"
+                  value="username"
+                  dense
+                  hide-details
+                />
+              </fieldset>
+            </v-col>
+          </v-row>
+        </v-form>
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
diff --git a/ui/src/styles/index.scss b/ui/src/styles/index.scss
index 6d2395a5..c47e27e4 100644
--- a/ui/src/styles/index.scss
+++ b/ui/src/styles/index.scss
@@ -194,3 +194,7 @@ button.v-pagination__item {
 .v-snack__content::first-letter {
   text-transform: capitalize;
 }
+
+fieldset {
+  border: 0;
+}