#85, #86, improved #84 (squashed commit of the following): remove pri…

…ce field, omit deadline fields, add call-for-papers field

commit 6666f3e
Author: Espen Norderud <espen.norderud@miles.no>
Date:   Tue Aug 1 13:12:11 2023 +0200

    Auto-grow descriptions field

commit b300ff2
Author: Espen Norderud <espen.norderud@miles.no>
Date:   Tue Aug 1 13:11:53 2023 +0200

    #85: discard design (for now?) after meeting decision. Call-for-papers instead of price field.

    Deadlines UX is both too complex and not adaptable enough; move to description field along with price.
    Call-for-papers date picker placed where price used to be in the design (coherent alongside other dates).

commit 23a9b11
Author: Espen Norderud <espen.norderud@miles.no>
Date:   Mon Jul 31 17:13:08 2023 +0200

    Different approach: native (datalist) instead of smui

commit 71051cc
Author: Espen Norderud <espen.norderud@miles.no>
Date:   Mon Jul 31 14:43:08 2023 +0200

    Tmp

commit 5ed3d69
Author: Espen Norderud <espen.norderud@miles.no>
Date:   Mon Jul 31 14:04:31 2023 +0200

    Add early Deadlines component

src/components/conference/NewConference/CheckboxRow.svelte

@@ -12,7 +12,7 @@
 
 <fieldset class="checkbox-row">
     <legend class="textfield-label">Fagområde</legend>
-    <JustifiedRow addClass="checkbox-justified-row">
+    <JustifiedRow addClass="checkbox-justified-row" justify="start">
         {#each categories as category}
             <FormField>
                 <Checkbox

src/components/conference/NewConference/Modal/DatePickerRow.svelte

@@ -25,7 +25,7 @@
             {earliest}
             {latest}
             on:refreshDate={updateIntervalWarning}
-            intervalWarning={$intervalWarning}
+            warning={$intervalWarning}
     />
     <DatePicker
             label="Sluttdato"
@@ -35,7 +35,7 @@
             {earliest}
             {latest}
             on:refreshDate={updateIntervalWarning}
-            intervalWarning={$intervalWarning}
+            warning={$intervalWarning}
     />
 </JustifiedRow>
 

src/components/conference/NewConference/Page/DatePickersAndPriceRow.svelte

@@ -1,8 +1,7 @@
 <script>
     import JustifiedRow from "../../../form/JustifiedRow.svelte";
     import DatePicker from "../../../form/DatePicker.svelte";
-    import {startDate, endDate, intervalWarning, price} from "../stores.ts";
-    import TextField from "../../../form/TextField.svelte";
+    import {startDate, endDate, callForPapersDate, intervalWarning, callForPapersWarning} from "../stores.ts";
 
 
 
@@ -14,31 +13,40 @@
 
     function updateIntervalWarning() {
         intervalWarning.set(!!$startDate && !!$endDate && $startDate > $endDate);
+        callForPapersWarning.set(!!$callForPapersDate && !!$endDate && $callForPapersDate > $endDate)
     }
 </script>
 
 <JustifiedRow>
     <DatePicker
             label="Startdato"
-            width="35%"
+            width="31%"
             required
             bind:date={$startDate}
             {earliest}
             {latest}
             on:refreshDate={updateIntervalWarning}
-            intervalWarning={$intervalWarning}
+            warning={$intervalWarning}
     />
     <DatePicker
             label="Sluttdato"
-            width="35%"
+            width="31%"
             required
             bind:date={$endDate}
             {earliest}
             {latest}
             on:refreshDate={updateIntervalWarning}
-            intervalWarning={$intervalWarning}
+            warning={$intervalWarning}
+    />
+    <DatePicker
+            label="Frist: call for papers"
+            width="31%"
+            bind:date={$callForPapersDate}
+            earliest={addYears(earliest, -1)}
+            {latest}
+            on:refreshDate={updateIntervalWarning}
+            warning={$callForPapersWarning}
     />
-    <TextField bind:value={$price} label="Pris" placeholder="Kr" width="22%" />
 </JustifiedRow>
 
 <style>

src/components/conference/NewConference/Page/Description.svelte

@@ -2,10 +2,31 @@
 import JustifiedRow from "../../../form/JustifiedRow.svelte";
 import {description} from "../stores.ts";
 import TextField from "../../../form/TextField.svelte";
+import {onMount} from "svelte";
+import {makeid} from "../../../../utils/conference-utils.ts";
+
+
+function OnInput() {
+    this.style.height = 0;
+    this.style.height = (Math.max(this.scrollHeight, minHeight)) + "px";
+}
+
+const id = "description-field-" + makeid(5);
+let minHeight;
+
+onMount(() => {
+    const textareaElement = document.querySelector(`#${id} textarea`);
+
+    minHeight = textareaElement.scrollHeight;
+
+    textareaElement.setAttribute("style", `overflow-y:hidden;`);
+    textareaElement.addEventListener("input", OnInput, false);
+});
+
 </script>
 
 
-<JustifiedRow>
+<JustifiedRow {id}>
     <TextField
             bind:value={$description}
             label="Beskrivelse"
@@ -16,3 +37,4 @@ import TextField from "../../../form/TextField.svelte";
             required
     />
 </JustifiedRow>
+

src/components/conference/NewConference/stores.ts

@@ -8,6 +8,7 @@ export const location: Writable<string> = writable('');
 export const price: Writable<string> = writable('');
 export const startDate: Writable<Date|null> = writable(null);
 export const endDate: Writable<Date|null> = writable(null);
+export const callForPapersDate: Writable<Date|null> = writable(null);
 export const selectedCategoryTags: Writable<string[]> = writable([]);
 export const description: Writable<string> = writable('');
 
@@ -17,6 +18,8 @@ export const displayNewConferenceModal = writable(false);
 export const pending = writable(false);
 export const intervalWarning = writable(false);
 
+export const callForPapersWarning = writable(false)
+
 
 
 
@@ -25,6 +28,7 @@ export const intervalWarning = writable(false);
 export type NewConferenceStoreInitType = {
     startDate?: Date | string,
     endDate?: Date | string,
+    callForPapersDate?: Date | string,
     name?: string,
     url?: string,
     selectedCategoryTags?: string[],
@@ -47,6 +51,7 @@ function getParsedDate(date?: Date | string) {
 export const initStore = (initValues?: NewConferenceStoreInitType) => {
     startDate.set(getParsedDate(initValues?.startDate));
     endDate.set(getParsedDate(initValues?.endDate));
+    callForPapersDate.set(getParsedDate(initValues?.callForPapersDate));
     name.set(initValues?.name ?? '');
     url.set(initValues?.url ?? '');
     selectedCategoryTags.set(
@@ -62,5 +67,6 @@ export const initStore = (initValues?: NewConferenceStoreInitType) => {
     displayNewConferenceModal.set(false);
     pending.set(false);
     intervalWarning.set(false);
+    callForPapersWarning.set(false);
 }
 

src/components/form/DatePicker.svelte

@@ -6,37 +6,39 @@
     import { createEventDispatcher } from 'svelte';
     import {makeid} from "../../utils/conference-utils";
     import darkTheme from "../../stores/theme-store";
+    import {norwegianLocale} from "./norwegianLocale";
+    import {parseDateYYYYMMDD, formatDateYYYYMMDD} from "../../utils/date-time-utils";
     /*
 
     */
 
     export let
         date: Date|null = null,
         format: string = "dd.MM yyyy";
+
     export let
         width: string|undefined,
         label: string|undefined,
-        required: boolean|undefined,
+        required: boolean|undefined = false,
         earliest: Date|undefined,
         latest: Date|undefined,
-        intervalWarning: boolean|undefined=false;
+        warning: boolean|undefined=false;
 
     let valid, inputField, visible;
+    let innerDate: Date|null = null;
 
-    const id = `datepicker-${label}-${makeid(3)}`;
+    const id = `datepicker-${makeid(5)}`;
 
     const dispatch = createEventDispatcher();
 
-    const norwegianLocale = {
-        weekdays: ['Sø', 'Ma', 'Ti', 'On', 'To', 'Fr', 'Lø'],
-        months: ['Januar', 'Februar', 'Mars', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Desember']
-    };
+
 
     onMount( ()=> {
         inputField = document.querySelector(`#${id} input[type=text]`)
     });
 
     afterUpdate( () => {
+        date = parseDateYYYYMMDD(formatDateYYYYMMDD(innerDate));
         dispatch("refreshDate");
     });
 
@@ -52,18 +54,18 @@
     }
 </script>
 
-<LabeledField label={label} required width={width}>
+<LabeledField {label} {required} {width}>
     <div
             id={id}
             class="datepicker-root"
-            class:warning={intervalWarning}
-            class:valid={!intervalWarning && valid && date}
+            class:warning={warning}
+            class:valid={!warning && valid && date}
             on:keydown={doSelect}
             style={$darkTheme ? '/* TODO: Should be theme variables: */ --date-picker-background: #212121;--date-picker-foreground: #fff;' : '' }
     >
         <DateInput
                 bind:visible={visible}
-                bind:value={date}
+                bind:value={innerDate}
                 bind:valid={valid}
                 min={earliest}
                 max={latest}
@@ -72,7 +74,7 @@
                 placeholder={format.replace(/y/g, 'Å').replace(/d/g, "D").replace(/[H]/g, "t")}
                 closeOnSelection
         />
-        <Icon class="material-icons" slot="trailingIcon">{intervalWarning ? "warning" : (valid && date) ? "check" : "today"}</Icon>
+        <Icon class="material-icons" slot="trailingIcon">{warning ? "warning" : (valid && date) ? "check" : "today"}</Icon>
     </div>
 </LabeledField>
 

src/components/form/JustifiedRow.svelte

@@ -1,8 +1,11 @@
 <script>
-    export let addClass=null;
+    export let justify=undefined, addClass=null, id=undefined;
 </script>
 
-<div class={`justified-row ${addClass || ''}`}><slot /></div>
+<div class={`justified-row ${addClass || ''} ${justify ? 'justify-' + justify : ''}`} {id}>
+    <slot />
+</div>
+
 
 <style>
     .justified-row {
@@ -13,4 +16,10 @@
         width: 100%;
         margin-bottom: 26px;
     }
+    .justified-row.justify-start {
+        justify-content: flex-start;
+    }
+    .justified-row.justify-end {
+        justify-content: flex-end;
+    }
 </style>

src/components/form/LabeledField.svelte

@@ -1,8 +1,8 @@
 <script>
-    export let width, label, addClass, required=false;
+    export let width, label, addClass=undefined, required=false;
 </script>
 
-<div class={'labeled-field' + (addClass ? ` ${addClass}` : '')} style:width={width}>
+<div class={`labeled-field ${addClass}`} style:width={width}>
     {#if label}
         <label class="textfield-label" class:required>
             {label}

src/components/form/norwegianLocale.ts

@@ -0,0 +1,4 @@
+export const norwegianLocale = {
+    weekdays: ['Sø', 'Ma', 'Ti', 'On', 'To', 'Fr', 'Lø'],
+    months: ['Januar', 'Februar', 'Mars', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Desember']
+};

src/utils/date-time-utils.ts

@@ -20,12 +20,12 @@ export const formatDate = (date: string, formatOptions: IFormatOptions) =>
 	intlFormat(Date.parse(date), formatOptions, { locale: 'nb-NO' });
 
 // Format date to YYYY-MM-DD
-export const formatDateYYYYMMDD = (date: Date) => {
+export const formatDateYYYYMMDD = (date: Date|null) => {
     // timezone-safety not necessary (?)
     //date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
     return ('function' === typeof date?.toISOString)
         ? date.toISOString().slice(0,10)
         : undefined;
 };
 
-export const parseDateYYYYMMDD = (yyyymmdd: string) => parse(yyyymmdd, 'yyyy-MM-dd', new Date())
+export const parseDateYYYYMMDD = (yyyymmdd: string|undefined) => yyyymmdd ? parse(yyyymmdd, 'yyyy-MM-dd', new Date()) : null;