Models

Record Books uses overlay models when a user needs to interact with the application in a way that requires additional information or interactivity. The models are used to provide a consistent look and feel across the application. The models can be found in the src/app/components/models directory. In the following sections, we will discuss the various models used in the Record Books application.

Styles for the models are applied in the global stylesheet src/app/components/models/styles.module.css.

OverlayModel

The OverlayModel is a barebones model that applies a dark overlay over the entire screen and a frame in the center of the screen. The frame contains a title and a close button, and then displays any children components passed to it. The OverlayModel is defined in src/app/components/models/OverlayModel.js.

Parameters

• children - The child elements to be displayed in the model
• handleClose - The function to run when the close button is clicked
• frameStyles - (Optional) Extra styles for the model frame

Usage examples

import { OverlayModel } from '@/app/components/models/OverlayModel';

<OverlayModel title="Example Model" handleClose={handleClose}>
  <p>This is an example model</p>
</OverlayModel>

FormModel

The FormModel is a dynamically generated model that displays a HTML form. The form is generated based on the input fields passed to it. The FormModel is defined in src/app/components/models/DynamicFormModel.js. This component uses the OverlayModel, FormInput, and StatusButton components.

This model is used on all pages which require user input. The model is displayed when the user clicks on a button to add or edit a record. The model is used to collect the necessary information from the user and then submit the form to the server.

Parameters

• title - The title of the model
• inputs - An array of input fields to be displayed in the form
• hideForm - The function to run when the close button is clicked
• inputChangeHandler - The function to handle input changes
• formAction - The function to run when the form is submitted
• postSubmitAction - The function to run after the form is submitted
• submitButtonText - The text to display on the submit button
• submitPendingText - The text to display on the submit button when the submit action is pending

Usage examples

import { FormModel } from '@/app/components/models/FormModel';

# Example of adding a new record from the resume Section 4 page
<FormModel
  title="Example Form"
  hideForm={hideForm}
  inputChangeHandler={inputChangeHandler}
  formAction={formAction}
  postSubmitAction={postSubmitAction}
  submitButtonText="Submit"
  submitPendingText="Submitting..."
  inputs= {[
    { "type": "text", "label": "Year", "name": "year", "placeholder": "Ex. 2016-17" },
    { "type": "text", "label": "Kind of Activity", "name": "activityKind", "placeholder": "Ex. Soccer Team" },
    { "type": "text", "label": "What I did and Time Spent", "name": "scope", "placeholder": "Ex. 80 practices, 20 games, 300 hourse" },
    { "type": "select", "label": "Activity Level", "name": "level", "options": [
        { "label": "Local/Club", "value": "Local/Club" },
        { "label": "County", "value": "County" },
        { "label": "Regional", "value": "Regional" },
        { "label": "State", "value": "State" },
        { "label": "National", "value": "National" },
        { "label": "International", "value": "International" }
        ]
    }
  ]}
/>

import { FormModel } from '@/app/components/models/FormModel';

  # Example of editing a project with pre-filled data
  <FormModel title="Edit Project Info" hideForm={() => setShowEditInfoModal(false)} imputChangeHandler={handleChange} 
    formAction={formAction} postSubmitAction={handleFormSubmit} submitButtonText="Update Project Info" submitPendingText="Updating..."
    inputs={[
      {type: "hidden", name: "_id", defaultValue: projectData?._id},
      {type: "hidden", name: "type", defaultValue: projectData?.type},
      {type: "text", name: "year", label: "Year", placeholder: "Year", defaultValue: projectData?.year},
      {type: "text", name: "projectName", label: "Project Name", placeholder: "Project Name", defaultValue: projectData?.projectName},
      {type: "text", name: "description", label: "Description", placeholder: "Description", defaultValue: projectData?.description},
      {type: "date", name: "startDate", label: "Start Date", defaultValue: formatDate(projectData?.startDate)},
      {type: "date", name: "endDate", label: "End Date", defaultValue: formatDate(projectData?.endDate)},
    ]
  }/>

FormInput

The FormInput component is used to generate input fields for the FormModel component. The FormInput component is defined in src/app/components/models/DynamicFormModel.js.

Parameters

• type - The input type
• label - The input label
• name - The input name
• placeholder - The input placeholder
• onChangeHandler - The function to handle input changes.
• options - (Optional) The select input options
• defaultValue - (Optional) The default value for the input
• required - (Optional) The input required status. Default is true.
• step - (Optional) The step value for the input

Usage examples

# Example of a text input field
<FormInput
  type="text"
  label="Year"
  name="year"
  placeholder="Ex. 2016-17"
  onChangeHandler={inputChangeHandler}
/>

# Example of a select input field
<FormInput
  type="select"
  label="Activity Level"
  name="level"
  options={[
    { "label": "Local/Club", "value": "Local/Club" },
    { "label": "County", "value": "County" },
    { "label": "Regional", "value": "Regional" },
    { "label": "State", "value": "State" },
    { "label": "National", "value": "National" },
    { "label": "International", "value": "International" }
  ]}
  onChangeHandler={inputChangeHandler}
/>

# Example of a hidden input field
<FormInput
  type="hidden"
  name="id"
  defaultValue={record.id}
/>

StatusButton

The StatusButton component is used to generate a button for the FormModel component. The StatusButton component is defined in src/app/components/models/DynamicFormModel.js.

Parameters

• postAction - The function to run when the button is clicked
• buttonText - (Optional) The text to display on the button. Default is "Submit"
• pendingText - (Optional) The text to display on the button when the action is pending. Default is "Submitting..."

Usage examples

# Example of a submit button
<StatusButton
  postAction={postSubmitAction}
  buttonText="Submit"
  pendingText="Submitting..."
/>