Skip to main content

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..."
/>