feat(web/input): time input field (#206)

* feat(web/input): time input

web/src/features/dev/debug/input.ts

@@ -14,6 +14,12 @@ export const debugInput = () => {
             placeholder: '420',
             description: 'Description that tells you what this input field does',
           },
+          {
+            type: 'time',
+            format: '12',
+            label: 'Locker Time',
+            description: 'Description that tells you what this input field does',
+          },
           { type: 'checkbox', label: 'Some checkbox' },
           { type: 'input', label: 'Locker PIN', password: true, icon: 'lock' },
           { type: 'checkbox', label: 'Some other checkbox', checked: true },

web/src/features/dialog/InputDialog.tsx

@@ -61,7 +61,7 @@ const InputDialog: React.FC = () => {
         {
           value:
             row.type !== 'checkbox'
-              ? row.type === 'date' || row.type === 'date-range'
+              ? row.type === 'date' || row.type === 'date-range' || row.type === 'time'
                 ? // Set date to current one if default is set to true
                   row.default === true
                   ? new Date().getTime()
@@ -146,7 +146,7 @@ const InputDialog: React.FC = () => {
                   {row.type === 'number' && <NumberField control={form.control} row={row} index={index} />}
                   {row.type === 'slider' && <SliderField control={form.control} row={row} index={index} />}
                   {row.type === 'color' && <ColorField control={form.control} row={row} index={index} />}
-                  {row.type === 'date' || row.type === 'date-range' ? (
+                  {row.type === 'date' || row.type === 'date-range' || row.type === 'time' ? (
                     <DateField control={form.control} row={row} index={index} />
                   ) : null}
                   {row.type === 'textarea' && (

web/src/features/dialog/components/fields/date.tsx

@@ -1,7 +1,7 @@
 import { IDateInput } from '../../../../interfaces/dialog';
 import { Control, useController } from 'react-hook-form';
 import { FormValues } from '../../InputDialog';
-import { DatePicker, DateRangePicker } from '@mantine/dates';
+import { DatePicker, DateRangePicker, TimeInput } from '@mantine/dates';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface Props {
@@ -19,7 +19,7 @@ const DateField: React.FC<Props> = (props) => {
 
   return (
     <>
-      {props.row.type === 'date' ? (
+      {props.row.type === 'date' && (
         <DatePicker
           value={controller.field.value ? new Date(controller.field.value) : controller.field.value}
           name={controller.field.name}
@@ -38,8 +38,8 @@ const DateField: React.FC<Props> = (props) => {
           minDate={props.row.min ? new Date(props.row.min) : undefined}
           maxDate={props.row.max ? new Date(props.row.max) : undefined}
         />
-      ) : (
+      )} 
-        props.row.type === 'date-range' && (
+      {props.row.type === 'date-range' && (
           <DateRangePicker
             value={
               controller.field.value
@@ -65,8 +65,25 @@ const DateField: React.FC<Props> = (props) => {
             minDate={props.row.min ? new Date(props.row.min) : undefined}
             maxDate={props.row.max ? new Date(props.row.max) : undefined}
           />
-        )
+        )}
-      )}
+
+        {props.row.type === 'time' && (
+          <TimeInput 
+            value={controller.field.value ? new Date(controller.field.value) : controller.field.value}
+            name={controller.field.name}
+            ref={controller.field.ref}
+            onBlur={controller.field.onBlur}
+            onChange={(date) => controller.field.onChange(date ? date.getTime() : null)}
+            label={props.row.label}
+            description={props.row.description}
+            placeholder={props.row.placeholder}
+            disabled={props.row.disabled}
+            format={props.row.format || "12"}
+            withAsterisk={props.row.required}
+            clearable={props.row.clearable}
+            icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
+          />
+        )}
     </>
   );
 };

web/src/interfaces/dialog.ts

@@ -70,11 +70,12 @@ export interface IColorInput {
 }
 
 export interface IDateInput {
-  type: 'date' | 'date-range';
+  type: 'date' | 'date-range' | 'time';
   label: string;
   default?: string | [string, string] | true;
   disabled?: boolean;
   description?: string;
+  format?: '12' | '24' | undefined;
   required?: boolean;
   placeholder?: string;
   clearable?: boolean;