-
Notifications
You must be signed in to change notification settings - Fork 139
Project Creation Documentation
This document is a walk through to creating a new project, it covers all the project types as well as creating new product types, subtypes, and questions. Please find the code snippets in the specification-sample file.
Browse to the main page
production: https://connect.topcoder.com/new-project development: https://connect.topcoder-dev.com/new-project
Steps to creating a new project
Then click on the create project button
New project types
To create new project types you must alter the projectWizard configuration.
/src/config/projectWizard/index.js
In the projects object create a new object property which is going to be our new product/type.
Properties
icon: An svg icon file name info: The project information question: The project question or a brief description id: Project ID subtypes: Project subtype object (subtypes are defined here.)
After clicking the new project button a new project wizard dialog is shown. This component iterates all the properties in the projectWizard configuration for project subtypes but does not render the project types details.
New project subtypes
The project subtypes are defined in the project types as properties of the subtypes property . The property key is the subtype name.
Properties
brief : brief description of the project subtype details: project subtype details(shown as the project subtype details) icon: svg file name id: project subtype details ID
Note that the key of the subtype object is what is displayed on the select project modal.
The projectWizard component which is nested in the createContainer component displays the different project subtypes only is the showModal property value is true.
SelectProduct component is nested inside the projectWizard component. It requires the projectWizard configuration and uses the data to render the different project subtypes.
The productCard component nested inside the SelectProduct component which renders a single subtype details for each of the other elements.
/src/projects/create/projectWizard.jsx /src/projects/create/components/ProductCards.js /src/projects/create/SelectProduct.jsx /src/projects/containers/CreateContainer.jsx
Note that the subtype id property is used to map a project subtype to its specification.
The typeToSpecification configuration defines the type of questions
Then you need to add a new subtype to the specification configuration file below.
/src/config/projectSpecification/typeToSpecification.json
A specification values is used to generate the project template field which contains questions and in depth project details.
Project type/subtype icons
Note that the icon file names for both the project type and subtype are supposed to be file names as stored on disk. The icons are of (50x50) pixels dimensions and in svg format. Add the icons in the directory below.
src/assets/images/
New project type label
On the listing page some changes have to be done in the ProjectsView component. Add a new project type as key and a css class value used to style the block to the object. Also add a new project type class key and a project type category value to the projectTypeMap object. Also change the css
In the listing page the label of a project and its type are displayed by the projectsView component which takes in projects as props and iterates all the projects rendering their details. The projects data comes from the backend where an API call is made before rendering.
The projectsView component contains an array of column components i.e. id, projects, status, updatedAt, customer, copilot and price
The projects column renders the project type and its label.
The span label text is determined by the project id given in the projectWizard configuration we discussed previously and also the label styles.
/src/components/Grid/Grid/GridView.scss /src/project/list/components/Projects/ProjectsView.jsx
New specification question
There are two ways to adding new questions to a project details form. One is adding questions to a pre-existing specification and two is creating a specification with new questions.
To creating a new specification
If you create a new specification make sure that you have changed the specification defined in the typeToSpecification.json file for your new subtype.
Create a new file in the directory below.
/src/config/projectQuestions/(specification-value).js
Properties Section object
Id: section ID Title: section title Required: whether the section questions are optional Description: section description Subsections: array of subsections
Subsection object
Id: subsection id Required: whether the subsection questions are optional validationError: validation error message fieldName: defines the component to be used during rendering . description: subtype description type: type of subtype questions: array of question objects
Questions object
Id: question ID required: whether the question is optional fieldTypes: defined the component to be used during rendering description: the question description title: the question title type: the name of element to be rendered
See the sample specification file for more details about the types of questions and how they are used to determine which type of child element to render.
Question types
See-attached-textbox
See-attached-textbox questions renders a textarea component from the TCFormFields.
Textinput
Textinput questions render a textinput from the TCFormFields.
Textbox
Textbox questions render a textarea from the TCFormFields.
Radio-group
Radio-group questions render a radioGroup component from the TCFormFields.
Tiled-radio-group
This type of questions render a tiledRadioGroup component from the TCFormFields.
See-attached-tiled-radio-group
See-attached-tiled-radio-group questions render a tiled-radio-group component.
Checkbox
Checkbox question types render a checkbox component from the TCFormFields.
See-attached-features
See-attached-features question type renders a seeattachedSpecFeatureQuestion component.
Colors
Colors question renders a colorpicker component.
To add new questions to the pre-existing specification add new objects to the questions array in any of the project subsections section similar to the one above.
After selecting a project subtype a new view inside the projectWizard component is shown with the Fillprojectdetails component nested which also has ProjectBasicDetailsForm component nested.
The projectBasicDetailForm component which renders the questions takes in array property sections which contains question subsections, it also has a SpecSection nested component which also takes a section property.
The project BasicDetailForm component iterates all the sections rendering them.
The SpecSection renders a subsection using the renderSubSection method.
When each subsection is rendered a renderchild method is called which is responsible for rendering the different question types. Question child types renders a SpecQuestions component which takes in questions property.
The SpecQuestion iterates all the questions and renders a nested component SpecQuestionList.Item component which takes a question properties e.g. title, icon, description, required, hideDescription.
This component renders the details of the question.
/src/projects/create/components/FillProjectDetails.js
/src/projects/details/components/SpecQuestions.jsx
/src/projects/details/components/SpecQuestionList/SpecQuestionList.jsx
/src/projects/detail/components/SpecSection.jsx
/src/projects /create/components/ProjectBasicDetailsForm.js
Please change the getProjectCreationTemplateField method in the projectWizard file such that we are not loading the basicSections.