Skip to main content

Create/Edit Project

Overview

Create and Edit Project use similar view which is a modal.

This ui modal is called using the hook: useProjectFormModal.

The logic of this modal is from the hook: useProjectForm

The following documentation will explain a bit more on the project form ui/ux aspect. The form consists of the following sub-components:

Components​

Project Cover required​

This component initially contains 9 images in grid layout that can be chosen by the user. The first image will be chosen as the default project cover. The type of this variable is string for default images, otherwise it's { url: string, filename: string } for custom images

The UI of this component will change from a grid layout to a single image layout if the value of defaultImage is false, meaning the user has uploaded a custom photo.

Below the component, there are two buttons: Upload Custom Photo and Reset Project Cover

Upload Custom Photo​

This button is used to upload photo from the local computer. In addition to setting the value of the image, it will also set the defaultImage value to false.

Reset Photo Cover​

This button is used to reset the current photo cover choice. Additionally, it will also set the defaultImage value to true.

Name Field required​

This component functions as a TextInput to capture user input.

Description Field​

This component functions as a TextArea to capture user input.

Hooks​