Use datetime field to edit start/end time

ui/package-lock.json

@@ -8,6 +8,7 @@
       "name": "atsebayt",
       "version": "0.0.1",
       "dependencies": {
+        "dayjs": "^1.11.5",
         "svelte-frappe-charts": "^1.9.1",
         "vite": "^3.0.4"
       },
@@ -645,6 +646,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz",
+      "integrity": "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -3091,6 +3097,11 @@
         "which": "^2.0.1"
       }
     },
+    "dayjs": {
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz",
+      "integrity": "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

ui/package.json

@@ -28,6 +28,7 @@
   },
   "type": "module",
   "dependencies": {
+    "dayjs": "^1.11.5",
     "svelte-frappe-charts": "^1.9.1",
     "vite": "^3.0.4"
   }

ui/src/components/DateTimeInput.svelte

@@ -0,0 +1,21 @@
+<script>
+ import dayjs from 'dayjs';
+
+ export let format = 'YYYY-MM-DD HH:mm';
+ export let date = new Date();
+
+ let className = '';
+ export { className as class };
+
+ export let id = null;
+
+ let internal;
+
+ const input = (x) => (internal = dayjs(x).format(format));
+ const output = (x) => (date = dayjs(x, format).toDate().toISOString());
+
+ $: input(date)
+ $: output(internal)
+</script>
+
+<input type="datetime-local" class={className} id={id} bind:value={internal}>

ui/src/components/SurveyAdmin.svelte

@@ -3,6 +3,7 @@
  import { goto } from '$app/navigation';
 
  import { getQuestions } from '../lib/questions';
+ import DateTimeInput from './DateTimeInput.svelte';
  import { ToastsStore } from '../stores/toasts';
 
  const dispatch = createEventDispatcher();
@@ -108,7 +109,7 @@
             <label for="start_availability" class="col-form-label col-form-label-sm">Date de début</label>
         </div>
         <div class="col-sm-8">
-            <input type="text" class="form-control form-control-sm" id="start_availability" bind:value={survey.start_availability}>
+            <DateTimeInput class="form-control form-control-sm" id="start_availability" bind:date={survey.start_availability} />
         </div>
     </div>
 
@@ -117,7 +118,7 @@
             <label for="end_availability" class="col-form-label col-form-label-sm">Date de fin</label>
         </div>
         <div class="col-8">
-            <input type="text" class="form-control form-control-sm" id="end_availability" bind:value={survey.end_availability}>
+            <DateTimeInput class="form-control form-control-sm" id="end_availability" bind:date={survey.end_availability} />
         </div>
     </div>
 

ui/src/components/WorkAdmin.svelte

@@ -2,6 +2,7 @@
  import { createEventDispatcher } from 'svelte';
  import { goto } from '$app/navigation';
 
+ import DateTimeInput from './DateTimeInput.svelte';
  import { ToastsStore } from '../stores/toasts';
 
  const dispatch = createEventDispatcher();
@@ -102,7 +103,7 @@
             <label for="start_availability" class="col-form-label col-form-label-sm">Date de début</label>
         </div>
         <div class="col-sm-8">
-            <input type="text" class="form-control form-control-sm" id="start_availability" bind:value={work.start_availability}>
+            <DateTimeInput class="form-control form-control-sm" id="start_availability" bind:date={work.start_availability} />
         </div>
     </div>
 
@@ -111,7 +112,7 @@
             <label for="end_availability" class="col-form-label col-form-label-sm">Date de fin</label>
         </div>
         <div class="col-8">
-            <input type="text" class="form-control form-control-sm" id="end_availability" bind:value={work.end_availability}>
+            <DateTimeInput class="form-control form-control-sm" id="end_availability" bind:date={work.end_availability} />
         </div>
     </div>