From d2d4bd1c7e1162255a5b1a9f50ad638790aae2bc Mon Sep 17 00:00:00 2001
From: WillDotWhite <will.white01@bbc.co.uk>
Date: Tue, 23 Jan 2024 10:42:18 +0000
Subject: [PATCH] Add availability field

---
 .../gmtkgamejam/models/posts/Availability.kt  |  5 +++
 ui/src/base.css                               |  8 +++++
 ui/src/pages/mypost/MyPost.css                |  4 +--
 ui/src/pages/mypost/MyPost.tsx                | 34 ++++++++++++++++++-
 ui/src/pages/mypost/MyPostWrapper.tsx         |  4 +--
 5 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/api/src/main/kotlin/com/gmtkgamejam/models/posts/Availability.kt b/api/src/main/kotlin/com/gmtkgamejam/models/posts/Availability.kt
index 5150b0ff..381731ee 100644
--- a/api/src/main/kotlin/com/gmtkgamejam/models/posts/Availability.kt
+++ b/api/src/main/kotlin/com/gmtkgamejam/models/posts/Availability.kt
@@ -2,6 +2,11 @@ package com.gmtkgamejam.models.posts
 
 enum class Availability {
 
+    /**
+     * Haven't decided/don't know yet
+     */
+    UNSURE,
+
     /**
      * A few hours over the whole jam
      */
diff --git a/ui/src/base.css b/ui/src/base.css
index ca620318..7ca135b9 100644
--- a/ui/src/base.css
+++ b/ui/src/base.css
@@ -3,6 +3,14 @@
         @apply bg-gray-300 border-2 border-gray-300 rounded-xl placeholder-gray-600 text-gray-900;
     }
 
+    input[type="radio"] {
+        appearance: none;
+        /* For iOS < 15 to remove gradient background */
+        background-color: #fff;
+        /* Not removed via appearance */
+        margin: 0;
+    }
+
     main {
         @apply container mx-auto p-1 px-4 pb-6;
         padding-bottom: 96px;
diff --git a/ui/src/pages/mypost/MyPost.css b/ui/src/pages/mypost/MyPost.css
index 46ac6243..0c679099 100644
--- a/ui/src/pages/mypost/MyPost.css
+++ b/ui/src/pages/mypost/MyPost.css
@@ -1,7 +1,7 @@
 @layer components {
     .c-form-block {
-        .form-block__input {
-
+        .form-block__availability {
+            @apply block sm:inline-block rounded-lg p-2 m-0 mb-2 mr-2 border border-white text-white;
         }
     }
 }
\ No newline at end of file
diff --git a/ui/src/pages/mypost/MyPost.tsx b/ui/src/pages/mypost/MyPost.tsx
index 5bbfbe30..85909783 100644
--- a/ui/src/pages/mypost/MyPost.tsx
+++ b/ui/src/pages/mypost/MyPost.tsx
@@ -45,6 +45,8 @@ export const MyPost: React.FC<{
                 <FieldTeamSize />
             </div>
 
+            <FieldAvailability currentAvailability={values.availability} />
+
             <Button
                 className="mt-4 bg-theme-d-7 rounded-xl w-full sm:w-full md:w-auto md:float-right"
                 type="button"
@@ -55,6 +57,8 @@ export const MyPost: React.FC<{
             >
                 {isSubmitting ? "Please wait..." : `${hasPost ? "Update" : "Create"} Post`}
             </Button>
+            {/* Quick workaround to stop Create Post button falling off bottom of form, until we replace float-right */}
+            <div className="clear-both">&nbsp;</div>
         </Form>
     )
 }
@@ -185,4 +189,32 @@ const FieldTeamSize: React.FC = () => {
             </span>
         </div>
     )
-}
\ No newline at end of file
+}
+
+const FieldAvailability: React.FC<{currentAvailability: string}> = ({currentAvailability}) => {
+
+    const availabilityOptions: CustomSelectOption[] = [
+        {label: "Not sure/haven't decided", value: "UNSURE"},
+        {label: "A few hours over the whole jam", value: "MINIMAL"},
+        {label: "Less than 4 hours per day", value: "PART_TIME"},
+        {label: "4-8 hours per day", value: "FULL_TIME"},
+        {label: "As much time as I can", value: "OVERTIME"}
+    ];
+
+    return (
+        <div className="c-form-block bg-black w-full grid-cols-1">
+            <div id="availability-radio-group">Availability</div>
+            <div role="group" aria-labelledby="availability-radio-group">
+                {availabilityOptions.map(option => (
+                    <label
+                        key={option.value}
+                        className={`form-block__availability ${option.value == currentAvailability ? "bg-theme" : "bg-theme-d-4 hover:bg-theme-d-7"}`}
+                    >
+                        <Field type="radio" name="availability" value={option.value} />
+                        {option.label}
+                    </label>
+                ))}
+            </div>
+        </div>
+    )
+}
diff --git a/ui/src/pages/mypost/MyPostWrapper.tsx b/ui/src/pages/mypost/MyPostWrapper.tsx
index 58bd4087..c438cd10 100644
--- a/ui/src/pages/mypost/MyPostWrapper.tsx
+++ b/ui/src/pages/mypost/MyPostWrapper.tsx
@@ -16,8 +16,8 @@ const defaultFormValues: Post = {
     skillsSought: [],
     languages: ["en"],
     preferredTools: [],
-    availability: "MINIMAL", //allAvailabilities[0],
-    timezoneOffsets: ["1"] // ["UTC+0"] as TimezoneOffset[],
+    availability: "UNSURE",
+    timezoneOffsets: ["1"],
 }
 
 export const MyPostWrapper: React.FC = () => {