From 8e7b3dc38dbf371a6f9e58fa18ccd5e1d6e9b2cd Mon Sep 17 00:00:00 2001
From: Sam <sam@rat.md>
Date: Mon, 8 Apr 2024 14:49:17 +0200
Subject: [PATCH] [TASK] Work in Progress

---
 CHANGELOG.md                                  |   3 +
 src/components/badge/BadgeStd.vue             |   2 +-
 src/components/control/SelectField.story.vue  |   4 +-
 ...ameField.story.vue => TimeFrame.story.vue} |  14 +-
 .../{TimeFrameField.vue => TimeFrame.vue}     |  14 +-
 src/components/control/TimeSlots.story.vue    | 145 +++++++++++
 src/components/control/TimeSlots.vue          | 237 ++++++++++++++++++
 src/utils/now.ts                              |  41 ++-
 8 files changed, 431 insertions(+), 29 deletions(-)
 rename src/components/control/{TimeFrameField.story.vue => TimeFrame.story.vue} (61%)
 rename src/components/control/{TimeFrameField.vue => TimeFrame.vue} (94%)
 create mode 100644 src/components/control/TimeSlots.story.vue
 create mode 100644 src/components/control/TimeSlots.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a69b5e..a6e461f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ miru.ink / Changelog
 - Add: New `escape` property on `DialogStd` component to allow closing the modal using the ESC key.
 - Add: New wobble animation when trying to close a static modal by an click outside.
 - Add: `CheckCircle` / `XCircle` lucide icon components.
+- Add: `TimeSlots` input control field component, supporting booking a timeslot.
 - Update: Change the `AvatarGroup` limit class and label when not enough space is available.
 - Update: `package.json` dependencies.
 - Update: Decrease height (by lower the padding) on `BadgeStd` component.
@@ -26,6 +27,8 @@ miru.ink / Changelog
 - Update: Apply new 32 / 40 / 56 px height system on `NumberField` control field.
 - Update: Apply new 32 / 40 / 56 px height system on `PasswordField` control field.
 - Update: Apply new 32 / 40 / 56 px height system on `SelectField` control field.
+- Update: Rename `TimeFrameField` to `TimeFrame`.
+- Update: Add `type` option to `now()` utility function to change returning value.
 - Fix: Add media-query based `max-width` stylings on `DialogStd` to support some space to screen-borders.
 - Fix: Demo-Icons on histoire stories.
 - Fix: Minor styling changes on `TooltipStd` component.
diff --git a/src/components/badge/BadgeStd.vue b/src/components/badge/BadgeStd.vue
index 27defd0..7c5df8f 100644
--- a/src/components/badge/BadgeStd.vue
+++ b/src/components/badge/BadgeStd.vue
@@ -32,7 +32,7 @@ export interface BadgeProps {
     /**
      * The desired color used for this badge.
      */
-    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+    color?: null | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
 
     /**
      * The desired label text for this badge.
diff --git a/src/components/control/SelectField.story.vue b/src/components/control/SelectField.story.vue
index f779899..e9bb8a4 100644
--- a/src/components/control/SelectField.story.vue
+++ b/src/components/control/SelectField.story.vue
@@ -8,8 +8,8 @@
         
         <Variant title="Sizes" :init-state="stateSizes" v-slot="{ state }">
             <div class="max-w-[400px] mx-auto flex flex-col gap-4 p-2">
-                <SelectField v-bind="state" size="sm" placeholder="40px height" v-model="state.valueSM" />
-                <SelectField v-bind="state" placeholder="48px height" v-model="state.valueMD" />
+                <SelectField v-bind="state" size="sm" placeholder="32px height" v-model="state.valueSM" />
+                <SelectField v-bind="state" placeholder="40px height" v-model="state.valueMD" />
                 <SelectField v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
             </div>
         </Variant>
diff --git a/src/components/control/TimeFrameField.story.vue b/src/components/control/TimeFrame.story.vue
similarity index 61%
rename from src/components/control/TimeFrameField.story.vue
rename to src/components/control/TimeFrame.story.vue
index 606e793..36de1d6 100644
--- a/src/components/control/TimeFrameField.story.vue
+++ b/src/components/control/TimeFrame.story.vue
@@ -1,22 +1,22 @@
 <template>
-    <Story title="Form/Control/TimeFrameField" :layout="{ type: 'grid', width: '800px' }">
+    <Story title="Form/Control/TimeFrame" :layout="{ type: 'grid', width: '800px' }">
         <Variant title="Default" :init-state="stateDefault" v-slot="{ state }">
             <div class="max-w-[400px] mx-auto p-2">
-                <TimeFrameField v-bind="state" v-model="state.value" />
+                <TimeFrame v-bind="state" v-model="state.value" />
             </div>
         </Variant>
 
         <Variant title="Between" :init-state="stateBetween" v-slot="{ state }">
             <div class="max-w-[400px] mx-auto p-2">
-                <TimeFrameField v-bind="state" v-model="state.value" />
+                <TimeFrame v-bind="state" v-model="state.value" />
             </div>
         </Variant>
         
         <Variant title="Sizes" :init-state="stateSizes" v-slot="{ state }">
             <div class="max-w-[400px] mx-auto flex flex-col gap-4 p-2">
-                <TimeFrameField v-bind="state" size="sm" placeholder="32px height" v-model="state.valueSM" />
-                <TimeFrameField v-bind="state" placeholder="40px height" v-model="state.valueMD" />
-                <TimeFrameField v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
+                <TimeFrame v-bind="state" size="sm" placeholder="32px height" v-model="state.valueSM" />
+                <TimeFrame v-bind="state" placeholder="40px height" v-model="state.valueMD" />
+                <TimeFrame v-bind="state" size="lg" placeholder="56px height" v-model="state.valueLG" />
             </div>
         </Variant>
     </Story>
@@ -24,7 +24,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import TimeFrameField from './TimeFrameField.vue';
+import TimeFrame from './TimeFrame.vue';
 
 function stateDefault() {
     return {
diff --git a/src/components/control/TimeFrameField.vue b/src/components/control/TimeFrame.vue
similarity index 94%
rename from src/components/control/TimeFrameField.vue
rename to src/components/control/TimeFrame.vue
index ea1971c..c9f6539 100644
--- a/src/components/control/TimeFrameField.vue
+++ b/src/components/control/TimeFrame.vue
@@ -15,9 +15,9 @@
 import type { MaybeRef } from 'vue';
 
 /**
- * TimeFrameField Properties
+ * TimeFrame Properties
  */
-export interface TimeFrameFieldProps {
+export interface TimeFrameProps {
     /**
      * A custom time-frame field id, usually passed by the FormControl component. The default value is an 
      * auto-generated UUID.
@@ -77,9 +77,9 @@ export interface TimeFrameFieldProps {
 }
 
 /**
- * TimeFrameField Emits
+ * TimeFrame Emits
  */
-export interface TimeFrameFieldEmits {
+export interface TimeFrameEmits {
     /**
      * Update model value handler.
      */
@@ -88,7 +88,7 @@ export interface TimeFrameFieldEmits {
 
 // Default Export, used for IDE-related auto-import features
 export default {
-    name: 'TimeFrameField'
+    name: 'TimeFrame'
 }
 </script>
 
@@ -98,10 +98,10 @@ import InputField from '../control/InputField.vue';
 import FormFieldGroup from '../form/FormFieldGroup.vue';
 
 // Define Component
-const props = withDefaults(defineProps<TimeFrameFieldProps>(), {
+const props = withDefaults(defineProps<TimeFrameProps>(), {
     seconds: 60
 });
-const emits = defineEmits<TimeFrameFieldEmits>();
+const emits = defineEmits<TimeFrameEmits>();
 
 // States
 const valueStart = ref<null | string>(null);
diff --git a/src/components/control/TimeSlots.story.vue b/src/components/control/TimeSlots.story.vue
new file mode 100644
index 0000000..06e0c5d
--- /dev/null
+++ b/src/components/control/TimeSlots.story.vue
@@ -0,0 +1,145 @@
+<template>
+    <Story title="Form/Control/TimeSlots" :layout="{ type: 'grid', width: '800px' }">
+        <Variant title="Default" :init-state="stateDefault" v-slot="{ state }">
+            <div class="max-w-[200px] mx-auto p-2">
+                <TimeSlots :slots="prepareDefaultSlots()" v-bind="state" v-model="state.value" />
+            </div>
+        </Variant>
+
+        <Variant title="Time-Slots" :init-state="stateDefault" v-slot="{ state }">
+            <div class="max-w-[250px] mx-auto p-2">
+                <TimeSlots :slots="timeSlots" v-bind="state" v-model="state.value" />
+            </div>
+        </Variant>
+    </Story>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import TimeSlots, { type TimeSlotOption } from './TimeSlots.vue';
+
+// Default Slots
+const defaultSlots = computed<TimeSlotOption[]>(() => {
+    const datetime = new Date();
+    const defaultSlots: TimeSlotOption[] = [];
+    
+    defaultSlots.push({
+        date: new Date(datetime.getTime()),
+        slots: 4
+    });
+    
+    datetime.setDate(datetime.getDate()+1);
+    defaultSlots.push({
+        date: new Date(datetime.getTime()),
+        slots: 1
+    });
+    
+    datetime.setDate(datetime.getDate()+1);
+    defaultSlots.push({
+        date: new Date(datetime.getTime()),
+        slots: 0
+    });
+    
+    datetime.setDate(datetime.getDate()+1);
+    defaultSlots.push({
+        date: new Date(datetime.getTime()),
+        slots: 2
+    });
+    return defaultSlots;
+});
+
+// Default Slots
+const timeSlots = computed<TimeSlotOption[]>(() => {
+    const datetime = new Date();
+    const defaultSlots: TimeSlotOption[] = [];
+    
+    defaultSlots.push({
+        date: new Date(datetime.getTime()),
+        slots: [
+            {
+                start: '09:00',
+                amount: 3
+            },
+            {
+                start: '10:00',
+                amount: 3
+            },
+            {
+                start: '11:00',
+                amount: 2
+            },
+            {
+                start: '12:00',
+                amount: 1
+            }
+        ]
+    });
+    
+    datetime.setDate(datetime.getDate()+1);
+    defaultSlots.push({
+        date: new Date(datetime.getTime()),
+        slots: [
+            {
+                start: '09:00',
+                amount: 0
+            },
+            {
+                start: '10:00',
+                amount: 0
+            },
+            {
+                start: '11:00',
+                amount: 2
+            },
+            {
+                start: '12:00',
+                amount: 1
+            }
+        ]
+    });
+    return defaultSlots;
+});
+
+// Prepare Default Slots
+function prepareDefaultSlots() {
+    const datetime = new Date();
+    const defaultSlots: TimeSlotOption[] = [];
+    
+    defaultSlots.push({
+        date: new Date(datetime.getTime()),
+        slots: 4
+    });
+    
+    datetime.setDate(datetime.getDate()+1);
+    defaultSlots.push({
+        date: new Date(datetime.getTime()),
+        slots: 1
+    });
+    
+    datetime.setDate(datetime.getDate()+1);
+    defaultSlots.push({
+        date: new Date(datetime.getTime()),
+        slots: 0
+    });
+    
+    datetime.setDate(datetime.getDate()+1);
+    defaultSlots.push({
+        date: new Date(datetime.getTime()),
+        slots: 2
+    });
+    return defaultSlots;
+}
+
+/**
+ * States for the default variant
+ * @returns
+ */
+function stateDefault() {
+    return {
+        value: ref()
+    };
+}
+</script>
+
+<docs lang="md">
+</docs>
diff --git a/src/components/control/TimeSlots.vue b/src/components/control/TimeSlots.vue
new file mode 100644
index 0000000..51e8ad1
--- /dev/null
+++ b/src/components/control/TimeSlots.vue
@@ -0,0 +1,237 @@
+<template>
+    <div class="field-time-slots">
+        <template v-if="props.slots">
+            <template v-for="(slot, idx) of generator()" :key="idx">
+                <button 
+                    type="button" 
+                    class="time-slot-option" 
+                    :class="[slot.selected ? 'is-selected' : '']"
+                    :disabled="toValue(props.disabled) || slot.disabled || slot.amount == 0"
+                    @click="onSelect(slot.value)">
+                    <span>{{ slot.label }}</span>
+                    <BadgeStd :label="slot.amount" size="sm" :color="slot.selected ? 'primary' : null" />
+                </button>
+            </template>
+        </template>
+    </div>
+</template>
+
+<script lang="ts">
+import type { MaybeRef } from 'vue';
+
+export interface TimeSlotOption {
+    /**
+     * Parsable Date string or Date object.
+     */
+    date: string | Date;
+
+    /**
+     * The available time slots.
+     */
+    slots: number | {
+        /**
+         * Start Time (09:00)
+         */
+        start: string;
+
+        /**
+         * End Time (optional, could be 09:30 for a 30 min slot)
+         */
+        end?: string;
+
+        /**
+         * Amount of available / bookable slots.
+         */
+        amount: number;
+    }[];
+
+    /**
+     * Allows to disable date/time strings.
+     */
+    disabled?: boolean;
+}
+
+/**
+ * TimeSlots Properties
+ */
+export interface TimeSlotsProps {
+    /**
+     * A custom time-slots field id, usually passed by the FormControl component. The default value is an 
+     * auto-generated UUID.
+     */
+    id?: null | string;
+
+    /**
+     * The name attribute for this time-slots field.
+     */
+    name?: null | string;
+
+    /**
+     * The value for this time-slots field, must be passed as v-model value.
+     */
+    modelValue?: null | string;
+
+    /**
+     * The available slots to book.
+     */
+    slots?: TimeSlotOption[];
+
+    /**
+     * The desired size for this time-slots field, note that `md` is the default value.
+     */
+    size?: 'sm' | 'md' | 'lg';
+
+    /**
+     * The validation state for this time-slots field.
+     */
+    validation?: null | 'invalid' | 'valid';
+
+    /**
+     * Additional time-slots field validation message, requires the validation property set either
+     * to valid or invalid.
+     */
+    validationMessage?: null | string;
+
+    /**
+     * The disabled state for this time-slots field.
+     */
+    disabled?: MaybeRef<boolean>;
+
+    /**
+     * The readonly state for this time-slots field.
+     */
+    readonly?: MaybeRef<boolean>;
+
+    /**
+     * The required state for this time-slots field.
+     */
+    required?: MaybeRef<boolean>;
+}
+
+/**
+ * TimeSlots Emits
+ */
+export interface TimeSlotsEmits {
+    /**
+     * Update model value handler.
+     */
+    (event: 'update:modelValue', value: string | null): void;
+}
+
+// Default Export, used for IDE-related auto-import features
+export default {
+    name: 'TimeSlots'
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, toValue } from 'vue';
+import BadgeStd from '../badge/BadgeStd.vue';
+
+// Define Component
+const props = defineProps<TimeSlotsProps>();
+const emits = defineEmits<TimeSlotsEmits>();
+
+// States
+const value = computed({
+    get() {
+        return props.modelValue || null;
+    },
+    set(value: null | string) {
+        emits('update:modelValue', value);
+    }
+});
+
+/**
+ * Loop through the available slots
+ * @returns
+ */
+function* generator(): Generator<{ label: string, value: string, amount: number, selected: boolean, disabled: boolean }> {
+    if (!(props.slots && props.slots.length > 0)) {
+        return;
+    }
+
+    for (const slot of props.slots) {
+        if (typeof slot.slots == 'number') {
+            const val = formatDate(slot.date);
+            yield {
+                label: val,
+                value: val,
+                amount: slot.slots,
+                selected: value.value == val,
+                disabled: typeof slot.disabled == 'boolean' ? slot.disabled : false
+            }
+        } else {
+            for (const sub of slot.slots) {
+                const val = formatDate(slot.date) + ` (${sub.start}${sub.end ? ` - ${sub.end}` : ''})`;
+                yield {
+                    label: val,
+                    value: val,
+                    amount: sub.amount,
+                    selected: value.value == val,
+                    disabled: typeof slot.disabled == 'boolean' ? slot.disabled : false
+                }
+            }
+        }
+    }
+}
+
+/**
+ * Format Date String
+ * @param date
+ */
+function formatDate(date: string | Date) {
+    if (typeof date == 'string') {
+        return date;
+    } else {
+        return [
+            date.getFullYear().toString(),
+            ('00' + (date.getMonth()+1)).slice(-2),
+            ('00' + date.getDate()).slice(-2)
+        ].join('-');
+    }
+}
+
+/**
+ * Select the desired value.
+ * @param val
+ */
+function onSelect(val: string) {
+    value.value = val;
+}
+</script>
+
+<style scoped>
+.field-time-slots {
+    @apply w-full h-auto p-2 flex flex-col gap-1.5 border border-solid rounded-md overflow-x-auto outline-none shadow-none;
+    @apply duration-300 ease-in-out;
+    @apply bg-transparent border-gray-400 dark:border-gray-700;
+    max-height: 300px;
+}
+
+.time-slot-option {
+    @apply w-full px-3 py-1.5 basis-full shrink-0 grow-0 flex flex-row items-center justify-between gap-3 rounded-md;
+    @apply duration-300 ease-in-out transition-colors;
+
+    &:disabled {
+        @apply cursor-not-allowed;
+        @apply bg-gray-100 text-gray-500;
+    }
+
+    &:not(:disabled):hover {
+        @apply bg-gray-200/50;
+    }
+
+    &:not(:disabled).is-selected {
+        @apply bg-primary-600 text-primary-50;
+    }
+
+    & .option.label {
+        @apply ml-auto;
+    }
+
+    &:deep(.badge) {
+        @apply tabular-nums;
+    }
+}
+</style>
diff --git a/src/utils/now.ts b/src/utils/now.ts
index 62901fd..679815b 100644
--- a/src/utils/now.ts
+++ b/src/utils/now.ts
@@ -1,21 +1,38 @@
 
+export type NowTypes = null | 'full' | 'date' | 'time' | 'iso' | '8601' | 'iso-8601';
+
 /**
  * Current Date/Time as simple DB iso string.
+ * @param type
  * @returns 
  */
-function now(): string {
+function now(type: NowTypes = null): string {
+    type = type === null ? 'full' : type;
+
     const date = new Date;
-    return [
-        date.getFullYear().toString(),
-        ('00' + (date.getMonth()+1)).slice(-2),
-        ('00' + date.getDate()).slice(-2)
-    ].join('-')
-    + ' ' +
-    [
-        ('00' + date.getHours()).slice(-2),
-        ('00' + date.getMinutes()).slice(-2),
-        ('00' + date.getSeconds()).slice(-2)
-    ].join(':')
+    if (type === 'iso' || type == '8601' || type == 'iso-8601') {
+        return date.toISOString();
+    } else {
+        const result: string[] = [];
+
+        if (type == 'full' || type == 'date') {
+            result.push([
+                date.getFullYear().toString(),
+                ('00' + (date.getMonth()+1)).slice(-2),
+                ('00' + date.getDate()).slice(-2)
+            ].join('-'))
+        }
+
+        if (type == 'full' || type == 'time') {
+            result.push([
+                ('00' + date.getHours()).slice(-2),
+                ('00' + date.getMinutes()).slice(-2),
+                ('00' + date.getSeconds()).slice(-2)
+            ].join(':'))
+        }
+
+        return result.join(' ');
+    }
 }
 
 export default now;