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 modelhandleClose
- The function to run when the close button is clickedframeStyles
- (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 modelinputs
- An array of input fields to be displayed in the formhideForm
- The function to run when the close button is clickedinputChangeHandler
- The function to handle input changesformAction
- The function to run when the form is submittedpostSubmitAction
- The function to run after the form is submittedsubmitButtonText
- The text to display on the submit buttonsubmitPendingText
- 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 typelabel
- The input labelname
- The input nameplaceholder
- The input placeholderonChangeHandler
- The function to handle input changes.options
- (Optional) The select input optionsdefaultValue
- (Optional) The default value for the inputrequired
- (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 clickedbuttonText
- (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..."
/>