From 9b19dc225b2bc10a1f7acda6a9abc399c8d62036 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Sun, 15 Nov 2020 19:47:05 +0100
Subject: [PATCH] Allow setting the birthday

---
 src/components/utils/IsoDateInput.vue         | 85 +++++++++++++++++++
 src/flaschengeist.d.ts                        |  8 +-
 .../components/settings/MainUserSettings.vue  | 60 ++++++++-----
 src/plugins/user/store/user.ts                |  5 ++
 4 files changed, 132 insertions(+), 26 deletions(-)
 create mode 100644 src/components/utils/IsoDateInput.vue

diff --git a/src/components/utils/IsoDateInput.vue b/src/components/utils/IsoDateInput.vue
new file mode 100644
index 0000000..d14bbea
--- /dev/null
+++ b/src/components/utils/IsoDateInput.vue
@@ -0,0 +1,85 @@
+<template>
+  <q-input
+    class="col-xs-12 col-sm-6 q-pa-sm"
+    filled
+    :readonly="readonly"
+    :label="label"
+    :value="getDate()"
+    placeholder="YYYY-MM-DD"
+    v-on:input="dateChanged"
+    :rules="[isDate]"
+  >
+    <template v-slot:append>
+      <q-icon
+        name="event"
+        class="cursor-pointer"
+      >
+        <q-popup-proxy
+          ref="qDateProxy"
+          transition-show="scale"
+          transition-hide="scale"
+        >
+          <q-date
+            :value="getDate()"
+            mask="YYYY-MM-DD"
+            v-on:input="dateChanged"
+          >
+            <div class="row items-center justify-end">
+              <q-btn
+                v-close-popup
+                label="Schließen"
+                color="primary"
+                flat
+              />
+            </div>
+          </q-date>
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+import { date } from 'quasar';
+interface Props {
+  value?: Date;
+  label?: string;
+  readonly: boolean;
+}
+
+export default defineComponent({
+  name: 'IsoDateInput',
+  props: {
+    value: {
+      required: true,
+    },
+    label: {},
+    readonly: {
+      default: false,
+    },
+  },
+  setup(props: Props, { emit }) {
+    function getDate() {
+      if (props.value) {
+        return date.formatDate(props.value, 'YYYY-MM-DD');
+      }
+      return '';
+    }
+
+    function dateChanged(dateString: string) {
+      emit('input', new Date(dateString));
+    }
+
+    function isDate(val: string) {
+      return !val || /^\d{4}-\d\d-\d\d$/.test(val) || 'Datum ist nicht gültig.';
+    }
+
+    return {
+      getDate,
+      dateChanged,
+      isDate,
+    };
+  },
+});
+</script>
diff --git a/src/flaschengeist.d.ts b/src/flaschengeist.d.ts
index 8663558..1308f48 100644
--- a/src/flaschengeist.d.ts
+++ b/src/flaschengeist.d.ts
@@ -13,6 +13,7 @@ declare namespace FG {
     firstname: string;
     lastname: string;
     mail: string;
+    birthday?: Date;
     roles: Array<string>;
   }
   type Permission = string;
@@ -25,10 +26,9 @@ declare namespace FG {
     id: number;
     time: Date;
     amount: number;
-    reversal?: this;
-    sender_id?: string;
-    receiver_id?: string;
-    author_id?: string;
+    sender_id: string;
+    receiver_id: string;
+    author_id: string;
   }
   interface Event {
     id: number;
diff --git a/src/plugins/user/components/settings/MainUserSettings.vue b/src/plugins/user/components/settings/MainUserSettings.vue
index e1e4064..37b6205 100644
--- a/src/plugins/user/components/settings/MainUserSettings.vue
+++ b/src/plugins/user/components/settings/MainUserSettings.vue
@@ -1,5 +1,8 @@
 <template>
-  <q-form @submit="save" @reset="reset">
+  <q-form
+    @submit="save"
+    @reset="reset"
+  >
     <q-card-section class="fit row justify-start content-center items-center">
       <q-input
         class="col-xs-12 col-sm-6 q-pa-sm"
@@ -15,12 +18,12 @@
         v-model="props.user.lastname"
         filled
       />
+
       <q-input
         class="col-xs-12 col-sm-6 q-pa-sm"
-        label="Benutzername"
-        :readonly="!props.newUser"
-        v-model="props.user.userid"
-        :rules="[isUseridUsed, notEmpty]"
+        label="Angezeigter Name"
+        :rules="[notEmpty]"
+        v-model="props.user.display_name"
         filled
       />
       <q-input
@@ -32,9 +35,10 @@
       />
       <q-input
         class="col-xs-12 col-sm-6 q-pa-sm"
-        label="Display Name"
-        :rules="[notEmpty]"
-        v-model="props.user.display_name"
+        label="Benutzername"
+        :readonly="!props.newUser"
+        v-model="props.user.userid"
+        :rules="[isUseridUsed, notEmpty]"
         filled
       />
       <q-select
@@ -49,6 +53,10 @@
         option-label="name"
         option-value="name"
       />
+      <IsoDateInput
+        v-model="props.user.birthday"
+        label="Geburtstag"
+      />
     </q-card-section>
     <q-separator v-if="!props.newUser" />
     <q-card-section
@@ -83,8 +91,15 @@
       />
     </q-card-section>
     <q-card-actions align="right">
-      <q-btn label="Reset" type="reset" />
-      <q-btn color="primary" type="submit" label="Speichern" />
+      <q-btn
+        label="Reset"
+        type="reset"
+      />
+      <q-btn
+        color="primary"
+        type="submit"
+        label="Speichern"
+      />
     </q-card-actions>
   </q-form>
 </template>
@@ -94,11 +109,12 @@ import {
   computed,
   defineComponent,
   ref,
-  onBeforeMount
+  onBeforeMount,
 } from '@vue/composition-api';
 import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
 import { hasPermission } from 'src/components/permission';
+import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
 
 interface Props {
   user?: FG.User;
@@ -107,19 +123,20 @@ interface Props {
 
 export default defineComponent({
   name: 'MainUserSettings',
+  components: { IsoDateInput: IsoDateInput },
   props: {
     user: {
-      required: true
+      required: true,
     },
     newUser: {
-      default: false
-    }
+      default: false,
+    },
   },
   setup(props: Props, { root, emit }) {
     const store = <Store<StateInterface>>root.$store;
 
     onBeforeMount(() => {
-      store.dispatch('user/getRoles', false).catch(error => {
+      store.dispatch('user/getRoles', false).catch((error) => {
         console.warn(error);
       });
     });
@@ -133,13 +150,13 @@ export default defineComponent({
     const oldUser = computed(() => {
       if (isCurrentUser.value) return <FG.User>store.state.user.currentUser;
       else
-        return store.state.user.users.filter(user => {
+        return store.state.user.users.filter((user) => {
           user.userid === props.user?.userid;
         })[0];
     });
 
     const allRoles = computed(() =>
-      store.state.user.roles.map(role => role.name)
+      store.state.user.roles.map((role) => role.name)
     );
     const password = ref('');
     const new_password = ref('');
@@ -148,14 +165,13 @@ export default defineComponent({
     function save() {
       let changed = <FG.User>props.user;
       changed = Object.assign(changed, {
-        password: password.value
+        password: password.value,
       });
       if (new_password.value != '') {
         changed = Object.assign(changed, {
-          new_password: new_password.value
+          new_password: new_password.value,
         });
       }
-      console.log(changed);
 
       emit('update:user', changed);
     }
@@ -206,8 +222,8 @@ export default defineComponent({
       notEmpty,
       isUseridUsed,
       save,
-      reset
+      reset,
     };
-  }
+  },
 });
 </script>
diff --git a/src/plugins/user/store/user.ts b/src/plugins/user/store/user.ts
index 11400cf..b8f91be 100644
--- a/src/plugins/user/store/user.ts
+++ b/src/plugins/user/store/user.ts
@@ -68,6 +68,8 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
       axios
         .get(`/users/${rootState.session.currentSession.userid}`)
         .then((response: AxiosResponse<CurrentUserResponse>) => {
+          if (response.data.birthday)
+            response.data.birthday = new Date(response.data.birthday);
           commit('setCurrentUser', response.data);
           commit('setCurrentPermissions', response.data.permissions);
         })
@@ -87,6 +89,9 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
     axios
       .get('/users')
       .then((response: AxiosResponse<FG.User[]>) => {
+        response.data.forEach(user => {
+          if (user.birthday) user.birthday = new Date(user.birthday);
+        });
         commit('setUsers', response.data);
       })
       .catch(err => {