From 89e4680a8b9883bdb726b3de67ccfd5ec14eaf9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eva=20Mill=C3=A1n?= <evamillan@bitergia.com>
Date: Wed, 18 Oct 2023 12:07:38 +0200
Subject: [PATCH] [ui] Use DateInput when updating enrollment dates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the calendar in the modal to update enrollment
dates with the DateInput component, which features both
a calendar and a text field.

Signed-off-by: Eva Millán <evamillan@bitergia.com>
---
 .../text-field-to-upate-enrollment-dates.yml  |   8 +
 ui/src/components/EnrollmentList.vue          | 137 ++++++++++--------
 2 files changed, 81 insertions(+), 64 deletions(-)
 create mode 100644 releases/unreleased/text-field-to-upate-enrollment-dates.yml

diff --git a/releases/unreleased/text-field-to-upate-enrollment-dates.yml b/releases/unreleased/text-field-to-upate-enrollment-dates.yml
new file mode 100644
index 00000000..0e026e7d
--- /dev/null
+++ b/releases/unreleased/text-field-to-upate-enrollment-dates.yml
@@ -0,0 +1,8 @@
+---
+title: Text field to update enrollment dates
+category: added
+author: Eva Millán <evamillan@bitergia.com>
+issue: 819
+notes: >
+  Users have the option to enter the dates on a text
+  field when editing affiliations. 
diff --git a/ui/src/components/EnrollmentList.vue b/ui/src/components/EnrollmentList.vue
index eeddb257..b104b37a 100644
--- a/ui/src/components/EnrollmentList.vue
+++ b/ui/src/components/EnrollmentList.vue
@@ -80,39 +80,41 @@
                 <v-icon small right> mdi-lead-pencil </v-icon>
               </button>
             </template>
-            <v-date-picker
-              v-model="enrollment.form.fromDate"
-              :max="enrollment.end"
-              color="primary"
-              no-title
-              scrollable
-            >
-              <v-spacer></v-spacer>
-              <v-btn
-                text
-                color="primary"
-                @click="enrollment.form.fromDateMenu = false"
-              >
-                Cancel
-              </v-btn>
-              <v-btn
-                text
-                color="primary"
-                @click="
-                  $emit('updateEnrollment', {
-                    fromDate: enrollment.start,
-                    toDate: enrollment.end,
-                    newFromDate: new Date(
-                      enrollment.form.fromDate
-                    ).toISOString(),
-                    group: enrollment.group.name,
-                  });
-                  enrollment.form.fromDateMenu = false;
-                "
-              >
-                Save
-              </v-btn>
-            </v-date-picker>
+            <v-card>
+              <v-card-text>
+                <date-input
+                  v-model="enrollment.form.fromDate"
+                  label="Date from"
+                  :max="enrollment.end"
+                />
+              </v-card-text>
+              <v-card-actions class="pt-0">
+                <v-spacer></v-spacer>
+                <v-btn
+                  text
+                  color="primary"
+                  @click="enrollment.form.fromDateMenu = false"
+                >
+                  Cancel
+                </v-btn>
+                <v-btn
+                  :disabled="!enrollment.form.fromDate"
+                  color="primary"
+                  text
+                  @click="
+                    $emit('updateEnrollment', {
+                      fromDate: enrollment.start,
+                      toDate: enrollment.end,
+                      newFromDate: enrollment.form.fromDate,
+                      group: enrollment.group.name,
+                    });
+                    enrollment.form.fromDateMenu = false;
+                  "
+                >
+                  Save
+                </v-btn>
+              </v-card-actions>
+            </v-card>
           </v-menu>
           -
           <v-menu
@@ -136,37 +138,41 @@
                 <v-icon small right> mdi-lead-pencil </v-icon>
               </button>
             </template>
-            <v-date-picker
-              v-model="enrollment.form.toDate"
-              :min="enrollment.start"
-              color="primary"
-              no-title
-              scrollable
-            >
-              <v-spacer></v-spacer>
-              <v-btn
-                text
-                color="primary"
-                @click="enrollment.form.toDateMenu = false"
-              >
-                Cancel
-              </v-btn>
-              <v-btn
-                text
-                color="primary"
-                @click="
-                  $emit('updateEnrollment', {
-                    fromDate: enrollment.start,
-                    toDate: enrollment.end,
-                    newToDate: new Date(enrollment.form.toDate).toISOString(),
-                    group: enrollment.group.name,
-                  });
-                  enrollment.form.toDateMenu = false;
-                "
-              >
-                Save
-              </v-btn>
-            </v-date-picker>
+            <v-card>
+              <v-card-text>
+                <date-input
+                  v-model="enrollment.form.toDate"
+                  :min="enrollment.start"
+                  label="Date to"
+                />
+              </v-card-text>
+              <v-card-actions class="pt-0">
+                <v-spacer></v-spacer>
+                <v-btn
+                  text
+                  color="primary"
+                  @click="enrollment.form.toDateMenu = false"
+                >
+                  Cancel
+                </v-btn>
+                <v-btn
+                  :disabled="!enrollment.form.toDate"
+                  color="primary"
+                  text
+                  @click="
+                    $emit('updateEnrollment', {
+                      fromDate: enrollment.start,
+                      toDate: enrollment.end,
+                      newToDate: enrollment.form.toDate,
+                      group: enrollment.group.name,
+                    });
+                    enrollment.form.toDateMenu = false;
+                  "
+                >
+                  Save
+                </v-btn>
+              </v-card-actions>
+            </v-card>
           </v-menu>
         </div>
         <div>
@@ -352,8 +358,11 @@
 </template>
 
 <script>
+import DateInput from "./DateInput.vue";
+
 export default {
   name: "EnrollmentList",
+  components: { DateInput },
   props: {
     enrollments: {
       type: Array,