Issue 198 repair attempt full screen modal

src/components/Button/index.tsx

@@ -10,6 +10,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   textSize?: string;
   hover?: string;
   position?: string;
+  textWeight?: string;
 }
 
 export default function Button({
@@ -22,13 +23,14 @@ export default function Button({
   textSize = "text-lg",
   hover = "hover:bg-primary-800",
   position = "mx-auto",
+  textWeight = "font-normal",
   children,
   ...props
 }: ButtonProps) {
   return (
     <button
       {...props}
-      className={`${color} ${border} ${radius} ${height} ${width} ${textColor} ${textSize} ${hover} ${position}`}
+      className={`${color} ${border} ${radius} ${height} ${width} ${textColor} ${textSize} ${hover} ${position} ${textWeight}`}
     >
       {children}
     </button>

src/components/EventBox/request-view.tsx

@@ -1,17 +1,20 @@
+import { useCallback, useEffect, useState } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
 import { FaChevronDown } from "react-icons/fa6";
 
-import { User } from "@/types";
+import RepairAttemptForm from "@/components/Forms/repair-attempt-form";
+import Modal from "@/components/Modal";
+import { RepairRequestResponse, User } from "@/types";
 
 // Contains type of info stored in our event box.
-type RequestProps = {
+export type RequestProps = {
   repairRequestId: number;
   createdBy: User;
   requestDate: string;
   itemType: string;
   itemBrand: string;
   description: string;
-  handleClick?: () => void;
+  repairAttemptProps: RepairRequestResponse;
 };
 
 const RequestView = ({
@@ -20,8 +23,54 @@
   requestDate,
   itemType,
   itemBrand,
-  description
+  description,
+  repairAttemptProps
 }: RequestProps) => {
+  const [showRepairRequestModal, setShowRepairRequestModal] = useState(false);
+  // function manageModal() {
+  //   setShowRepairRequestModal(true);
+  // }
+
+  const useWindowDimensions = () => {
+    const hasWindow = typeof window !== "undefined";
+
+    const getWindowDimensions = useCallback(() => {
+      const width = hasWindow ? window.innerWidth : null;
+      const height = hasWindow ? window.innerHeight : null;
+      return {
+        width,
+        height
+      };
+    }, [hasWindow]);
+
+    const [windowDimensions, setWindowDimensions] = useState(
+      getWindowDimensions()
+    );
+
+    useEffect(() => {
+      if (hasWindow) {
+        const handleResize = () => {
+          setWindowDimensions(getWindowDimensions());
+        };
+
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+      }
+    }, [hasWindow, getWindowDimensions]);
+
+    return windowDimensions;
+  };
+
+  const { height, width } = useWindowDimensions();
+
+  function handleRepairClick() {
+    if (width) {
+      width > 640
+        ? setShowRepairRequestModal(true)
+        : setShowRepairRequestModal(false);
+      // this is for if we want to optionally render a seperate page on mobile view
+    }
+  }
   return (
     <div className="mx-5 mt-4 rounded-lg bg-slate-200 shadow-lg">
       <Disclosure>
@@ -34,7 +83,7 @@
             >
               <div className=" flex flex-col text-left py-2">
                 <span className="font-bold">
-                  {repairRequestId}- {createdBy.id}
+                  {repairRequestId}- {createdBy.firstName} {createdBy.lastName}
                 </span>
               </div>
               <FaChevronDown
@@ -75,14 +124,26 @@
                 <div className="flex justify-center mt-1">
                   <button
                     className="bg-primary-700 px-4 py-1 rounded-lg text-white text-md hover:bg-primary-600"
-                    // onClick={() =>
-                    // For future use when linking to issue 198
-                    // router.push("")
-                    // }
+                    onClick={handleRepairClick}
+                    // onKeyDown={handleRepairClick}
                   >
                     Repair
                   </button>
                 </div>
+                <Modal
+                  showModal={showRepairRequestModal}
+                  setShowPopup={setShowRepairRequestModal}
+                  height="h-full overflow-auto"
+                  title="Repair Attempt"
+                  width="w-full sm:w-full md:w-2/3 lg:w-1/2"
+                  crossWidthAndHeight="w-10 h-10"
+                >
+                  <div className="text-center">
+                    <div>
+                      <RepairAttemptForm props={repairAttemptProps} />
+                    </div>
+                  </div>
+                </Modal>
               </Disclosure.Panel>
             </Transition>
           </>

src/components/FormFields/box-label.tsx

@@ -3,6 +3,7 @@ import { FieldValues, UseControllerProps } from "react-hook-form";
 export interface FormProps<T extends FieldValues = FieldValues>
   extends UseControllerProps<T> {
   label?: string;
+  yPosition?: string;
 }
 
 /*
@@ -12,10 +13,13 @@ Output:
 */
 export default function Label<T extends FieldValues = FieldValues>({
   label,
+  yPosition = "-top-3",
   ...props
 }: FormProps<T>) {
   return (
-    <label className="absolute -top-2 left-2 flex flex-row items-center gap-0.5 rounded-full bg-white px-1 text-sm font-semibold text-black">
+    <label
+      className={`absolute ${yPosition} left-2 flex flex-row items-center gap-0.5 rounded-full bg-white px-1 text-s font-semibold text-black`}
+    >
       {label}
       {props.rules?.required ? (
         <span className="text-sm font-semibold text-red-500"> *</span>

src/components/FormFields/field-input.tsx

@@ -18,6 +18,7 @@ export interface FormProps<T extends FieldValues = FieldValues>
   icon?: string | ReactElement;
   type?: string;
   width?: string;
+  height?: string;
 }
 
 /*
@@ -38,11 +39,11 @@ export default function FieldInput<T extends FieldValues = FieldValues>({
   icon,
   type,
   width = "w-full",
+  height = "min-h-10",
   ...props
 }: FormProps<T>) {
   const { field, fieldState } = useController(props);
-
-  const baseStyle = `relative mb-2 flex h-12 ${width} flex-row items-center justify-between rounded-lg border px-3 shadow hover:shadow-grey-300`;
+  const baseStyle = `relative flex ${width} ${height} mb-2 justify-between rounded-lg bg-white px-3 py-2.5 text-sm font-medium text-gray-900 border shadow-sm hover:shadow-grey-300`;
   const errorBorderStyle = `border-red-500`;
   const normalBorderStyle = `border-grey-300`;
   const inputStyle = `mr-1 w-full h-full text-base placeholder:text-gray-500 focus:outline-none focus:ring-0`;

src/components/FormFields/field-radio.tsx

@@ -13,6 +13,9 @@ export interface FormProps<T extends FieldValues = FieldValues>
   id?: string;
   label?: string;
   width?: string;
+  height?: string;
+  axis?: string;
+  labelYPosition?: string;
 }
 
 /*
@@ -28,22 +31,28 @@ export default function FieldRadio<T extends FieldValues = FieldValues>({
   id,
   label,
   width = "w-full",
+  height = "min-h-10",
+  axis = "flex-row",
+  labelYPosition = "-top-3",
   ...props
 }: FormProps<T>) {
   const { field, fieldState } = useController(props);
-
-  const baseStyle = `relative mb-2 flex h-10 ${width} flex-row items-center justify-between rounded-lg border px-3 shadow hover:shadow-grey-300`;
+  const baseStyle = `relative flex ${width} ${height} mb-2 items-center justify-between rounded-lg bg-white px-3 py-2.5 text-sm font-medium text-gray-900 border shadow-sm hover:shadow-grey-300`;
   const errorBorderStyle = `border-red-500`;
   const normalBorderStyle = `border-grey-300`;
-  const radioStyle = `my-auto flex flex-row items-start gap-4 text-xs`;
+  const radioStyle = `m-auto flex ${axis} items-start gap-4 text-xs justify-center`;
 
   return (
     <div
       className={`${baseStyle} ${
         fieldState.invalid ? `${errorBorderStyle}` : `${normalBorderStyle}`
       }`}
     >
-      <Label label={!label ? props.name : label} {...props} />
+      <Label
+        label={!label ? props.name : label}
+        yPosition={`${labelYPosition}`}
+        {...props}
+      />
       <div className={radioStyle}>
         <label htmlFor={`${props.name}-y`} className="flex gap-1">
           <input

src/components/FormFields/field-text-area.tsx

@@ -35,7 +35,7 @@ export default function FieldTextArea<T extends FieldValues = FieldValues>({
 }: FormProps<T>) {
   const { field, fieldState } = useController(props);
 
-  const baseStyle = `relative mb-2 flex ${height} ${width} flex-row items-center justify-between rounded-lg border border-grey-300 px-3 shadow hover:shadow-grey-300`;
+  const baseStyle = `relative flex ${height} ${width} justify-between rounded-lg bg-white px-3 py-2.5 text-base font-medium text-gray-900 shadow-sm border border-grey-300 hover:shadow-grey-300`;
   const errorBorderStyle = `border-red-500`;
   const normalBorderStyle = `border-grey-300`;
   const textAreaStyle = `overflow-wrap:break-word pt-3 h-full w-full resize-none overflow-y-auto text-base placeholder:text-gray-500 placeholder:font-normal focus:outline-none focus:ring-0`;

src/components/Forms/create-repair-request.tsx

@@ -70,14 +70,14 @@ export default function RepairRequestForm({ eventId }: { eventId?: string }) {
       <FieldInput
         name="itemBrand"
         control={control}
-        placeholder="Select a brand"
+        placeholder="Select a brand..."
         label="Brand"
         rules={{ required: true }}
       />
       <SingleSelect
         name="itemType"
         control={control}
-        placeholder="Select an item type"
+        placeholder="Select an item type..."
         label="Item Type"
         rules={{ required: true }}
         options={
@@ -92,17 +92,19 @@ export default function RepairRequestForm({ eventId }: { eventId?: string }) {
       <FieldTextArea
         name="description"
         label="Description"
-        placeholder="Enter a description"
+        placeholder="Enter a description..."
         control={control}
         rules={{ required: true }}
       />
+
       <FieldImageUpload multiple name="images" control={control} />
+      <p className="text-center">(psst you can upload multiple images)</p>
       {/* Input field for Event */}
       {!eventId && (
         <SingleSelect
           name="eventId"
           control={control}
-          placeholder="Select an event"
+          placeholder="Select an event..."
           label="Event"
           options={
             eventOptions
@@ -116,12 +118,18 @@ export default function RepairRequestForm({ eventId }: { eventId?: string }) {
       <FieldTextArea
         name="comment"
         label="Additional Comment"
-        placeholder="Enter additional comments"
+        placeholder="Anything else we should know?"
         control={control}
         rules={{ required: false }}
       />
       <TermsAndConditions setValue={setValue} control={control} />
-      <Button type="submit" height="h-9" width="w-full" textSize="text-base">
+      <Button
+        type="submit"
+        height="h-12"
+        width="w-full"
+        textSize="text-lg"
+        textWeight="font-semibold"
+      >
         Submit
       </Button>
     </form>