feat: add course to attendee

cesium · Nov 24, 2023 · c191cbf · c191cbf
1 parent 6d472fd
commit c191cbf
Show file tree

Hide file tree

Showing 8 changed files with 164 additions and 14 deletions.
diff --git a/.github/workflows/trello.yml b/.github/workflows/trello.yml
@@ -10,8 +10,8 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-    steps: 
-      # Link PR to Trello    
+    steps:
+      # Link PR to Trello
       - name: Link to Trello
         uses: rematocorp/[email protected]
         with:

diff --git a/components/Input/index.tsx b/components/Input/index.tsx
@@ -27,14 +27,6 @@ export default forwardRef<HTMLInputElement, Props>(function Input(
   let textColor = `text-${fgColor}`;
   let backColor = `bg-${bgColor}`;
 
-  if (enabled === false) {
-    textColor = "text-gray-500";
-    backColor = "bg-gray-100";
-  } else if (enabled === true) {
-    textColor = `bg-${fgColor}`;
-    backColor = `bg-${bgColor}`;
-  }
-
   return (
     <div>
       <label
@@ -51,7 +43,9 @@ export default forwardRef<HTMLInputElement, Props>(function Input(
           autoComplete={autocomplete}
           value={value}
           required
-          className={`text-iregular ${textColor} ${backColor} block w-full appearance-none rounded-full border border-gray-300 px-3 py-2 pl-6 placeholder-gray-400 shadow-sm focus:outline-none sm:text-sm`}
+          className={`text-iregular ${
+            enabled == false ? "text-gray-500" : textColor
+          } ${backColor} block w-full appearance-none rounded-full border border-gray-300 px-3 py-2 pl-6 placeholder-gray-400 shadow-sm focus:outline-none sm:text-sm`}
           onChange={onChange}
           disabled={enabled == false}
           ref={ref}

diff --git a/components/Select/index.tsx b/components/Select/index.tsx
@@ -0,0 +1,60 @@
+import { SelectHTMLAttributes } from "react";
+
+import { ChevronDownIcon } from "@heroicons/react/solid";
+
+interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
+  text: string;
+  options: string[];
+  customStyle?: string;
+  fgColor: string;
+  bgColor: string;
+  enabled?: boolean;
+}
+
+export default function Select({
+  id,
+  text,
+  options,
+  enabled,
+  fgColor,
+  bgColor,
+  customStyle,
+  ...rest
+}: Props) {
+  let textColor = `text-${fgColor}`;
+  let backColor = `bg-${bgColor}`;
+  let disabled = enabled == false;
+
+  return (
+    <div>
+      <label
+        htmlFor={id}
+        className={`pl-6 font-iregular text-${fgColor} mt-5 block text-sm`}
+      >
+        {text}
+      </label>
+      <div
+        className={`text-iregular relative mt-2 flex ${textColor} ${backColor} block w-full appearance-none rounded-full border border-gray-300 py-2 placeholder-gray-400 shadow-sm focus:outline-none sm:text-sm`}
+      >
+        <select
+          id={id}
+          disabled={disabled}
+          className={`text-iregular ${
+            disabled ? "text-gray-500" : textColor
+          } ${backColor} block w-full appearance-none rounded-full px-3 pl-6 placeholder-gray-400 opacity-100 focus:outline-none sm:text-sm`}
+          {...rest}
+        >
+          {options.map((option) => (
+            <option key={option}>{option}</option>
+          ))}
+        </select>
+        <ChevronDownIcon
+          className={`${
+            !disabled ? "block" : "hidden"
+          } pointer-events-none absolute top-0 bottom-0 right-3 m-auto h-7 text-${fgColor}`}
+          aria-hidden="true"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/data/courses.json b/data/courses.json
@@ -0,0 +1,61 @@
+[
+  "Administração Pública",
+  "Arqueologia",
+  "Artes Visuais",
+  "Biologia Aplicada",
+  "Biologia e Geologia",
+  "Bioquímica",
+  "Ciência de Dados",
+  "Ciências da Educação",
+  "Ciência Política",
+  "Ciências da Computação",
+  "Ciências da Comunicação",
+  "Ciências do Ambiente",
+  "Contabilidade",
+  "Criminologia e Justiça Criminal",
+  "Design de Produto",
+  "Design e Marketing de Moda",
+  "Direito",
+  "Economia",
+  "Educação",
+  "Educação Básica",
+  "Enfermagem",
+  "Engenharia Aeroespacial",
+  "Engenharia Biomédica",
+  "Engenharia Civil",
+  "Engenharia de Materiais",
+  "Engenharia de Polímeros",
+  "Engenharia de Telecomunicações e Informática",
+  "Engenharia e Gestão de Sistemas de Informação",
+  "Engenharia e Gestão Industrial",
+  "Engenharia Eletrónica Industrial e Computadores",
+  "Engenharia Física",
+  "Engenharia Informática",
+  "Engenharia Mecânica",
+  "Engenharia Química e Biológica",
+  "Engenharia Têxtil",
+  "Estatística Aplicada",
+  "Estudos Culturais",
+  "Estudos Orientais: Estudos Chineses e Japoneses",
+  "Estudos Portugueses",
+  "Filosofia",
+  "Física",
+  "Geografia e Planeamento",
+  "Geologia",
+  "Gestão",
+  "História",
+  "Línguas Aplicadas",
+  "Línguas e Literaturas Europeias",
+  "Medicina",
+  "Marketing",
+  "Matemática",
+  "Música",
+  "Negócios Internacionais",
+  "Optometria e Ciências da Visão",
+  "Proteção Civil e Gestão do Território",
+  "Psicologia",
+  "Química",
+  "Relações Internacionais",
+  "Sociologia",
+  "Teatro"
+]
diff --git a/layout/Attendee/Profile/Profile.tsx b/layout/Attendee/Profile/Profile.tsx
@@ -4,20 +4,26 @@ import { withAuth, useAuth } from "@context/Auth";
 
 import Form from "@components/Form";
 import Input from "@components/Input";
+import Select from "@components/Select";
 
 import Layout from "@components/Layout";
 import Heading from "@components/Heading";
 
+import courses from "@data/courses.json";
+
 import { CheckpointTracker, CodeInput } from "./components";
 import CVInput from "./components/CVInput";
 import { resetPassword } from "@lib/api";
 import { getFirstName } from "@lib/naming";
 
+courses.push("None");
+
 function Profile() {
   const { user, editUser } = useAuth();
   const [avatar, setAvatar] = useState(null);
   const [editing, setEditing] = useState(false);
   const [username, setUsername] = useState(user.nickname || "");
+  const [course, setCourse] = useState(user.course || "");
 
   const [photoFileUrl, setPhotoFileUrl] = useState<string>(user.avatar);
 
@@ -60,6 +66,7 @@ function Profile() {
     e.preventDefault();
     const formData = new FormData();
     formData.append("attendee[nickname]", username);
+    formData.append("attendee[course]", course);
     formData.append("attendee[avatar]", avatar);
 
     if (editing) {
@@ -137,7 +144,7 @@ function Profile() {
               id="name"
               name="name"
               value={user.name || ""}
-              bgColor="white"
+              bgColor="primary"
               fgColor="white"
               enabled={false}
             />
@@ -146,11 +153,21 @@ function Profile() {
               id="username"
               name="username"
               value={username}
-              bgColor="white"
+              bgColor="primary"
               fgColor="white"
               enabled={editing}
               onChange={(e) => setUsername(e.currentTarget.value)}
             />
+            <Select
+              text="COURSE"
+              id="course"
+              bgColor="primary"
+              fgColor="white"
+              value={course}
+              options={courses}
+              enabled={editing}
+              onChange={(e) => setCourse(e.currentTarget.value)}
+            />
 
             <button
               className="inline-block h-auto pl-6 pb-5 text-quinary underline"

diff --git a/layout/SignUp/components/SignUpForm/index.tsx b/layout/SignUp/components/SignUpForm/index.tsx
@@ -5,15 +5,21 @@ import { useAuth } from "@context/Auth";
 import Button from "@components/Button";
 import Form from "@components/Form";
 import Input from "@components/Input";
+import Select from "@components/Select";
+
+import courses from "@data/courses.json";
 
 import BarebonesQRScanner from "@components/QRScanner/BarebonesQRScanner";
 
+courses.push("None");
+
 export default function SignUpForm() {
   const { sign_up, isLoading, errors } = useAuth();
 
   const [name, updateName] = useState("");
   const [email, updateEmail] = useState("");
   const [nickname, updateNickname] = useState("");
+  const [course, updateCourse] = useState("Engenharia Informática");
   const [password, updatePassword] = useState("");
   const [password_confirmation, updatePasswordConfirmation] = useState("");
   const [uuid, setUUID] = useState();
@@ -59,6 +65,7 @@ export default function SignUpForm() {
         password_confirmation,
         nickname,
         uuid,
+        course,
       });
     }
   };
@@ -92,6 +99,15 @@ export default function SignUpForm() {
           bgColor="primary"
           onChange={(e) => updateNickname(e.currentTarget.value)}
         />
+        <Select
+          text="COURSE"
+          id="course"
+          fgColor="white"
+          bgColor="primary"
+          defaultValue="Engenharia Informática"
+          options={courses}
+          onChange={(e) => updateCourse(e.currentTarget.value)}
+        />
         <Input
           text="PASSWORD"
           id="password"

diff --git a/lib/api.js b/lib/api.js
@@ -17,6 +17,7 @@ export async function sign_up({
   name,
   nickname,
   uuid,
+  course,
 }) {
   const response = await API.post("/api/auth/sign_up", {
     user: {
@@ -27,6 +28,7 @@ export async function sign_up({
         id: uuid,
         nickname: nickname,
         name: name,
+        course: course,
       },
     },
   });

diff --git a/pages/register/[uuid].js b/pages/register/[uuid].js
@@ -32,7 +32,7 @@ function Register() {
       password,
       password_confirmation,
       nickname,
-      uuid,
+      course,
     });
   };
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,7 +32,7 @@ function Register() { @@
           password,
           password_confirmation,
           nickname,
-          uuid,
+          course,
         });
       };
@@ Expand Down @@