Content
Updated by Aleix Suau about 4 years ago
For work packages, fields can be configured as multiple selections for all projects or for individual projects. The same function is desired for user-defined fields of the type Project.
**Acceptance requirements**
* The administration of custom fields for projects gets a checkbox "Allow multi-select", just like the lists for work packages
* The project form is extended such that list custom fields can be multi-selected
* The project advanced settings is extended such that list custom fields can be multi-selected
* The project overview list/table is extended to show multi-select custom fields
* The project details widget on the project overview / dashboard displays custom lists with multiple selections.
* When copying projects, multi-selection custom fields are also copied
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/20761/content"></div></figure>
### Development Notes
* Admin > Custom fields > Wps > multiselect checkbox
* Project > Overview > Project details should allow multi-select custom fields
* Form Config:
* [https://docs.openproject.org/api/endpoints/projects/](https://docs.openproject.org/api/endpoints/projects/)
* [https://docs.openproject.org/api/endpoints/projects/#projects-projects-schema](https://docs.openproject.org/api/endpoints/projects/#projects-projects-schema)
* [https://docs.openproject.org/api/endpoints/projects/#projects-project-create-form](https://docs.openproject.org/api/endpoints/projects/#projects-project-create-form)
*
* Replace project setting's Information tab:
* exclude required disk storage
* Top left buttons (subproject, copy project...)
* 3 steps:
* Replace view with formly
* Enable the backend capable of multiselect fields project
* Enable multiselect fields project in the frontend
* How do we know when input is a typeahead? When it has allowedValues?
* How do we know it allows multiple values?
* Does the input config name have a translation? How is it managed?
* Do we have only 2 types of values?
* Resources: {title, href}
* Regular (direct value)
* Schema:
* What are \_dependencies for?
* Why Customfields are inside \_links but have an \[\] in the payload while the others have an object (title, href)?
* Do the AllowedValues share an interface?
* What options can we have in fieldSchema.options?
* Where is the lockversion changed?
* Id is writable false but lockVersion is true?
* Do all resources set their id as value (ngSelect) ?
* ng-select: Resource value come with a 'title' while resource options come with 'name', could we unify this?
* Default values: what happens if the user deletes it? Do we have to set it again before sending the form?
* We'd need a way of letting know that a writable fields should be hidden (lockVersion) and that a non writable field should be shown? Separate writability from visibility (derivedStartDate, createdOn, CreatedOn... is in the schema but should not be shown)
* Form inputs outside of the form (how do we deal with it?)
* Wp type
* Do we want to also change the HalResources + ChangeSet?
* Form state:
* Do we want to have two forms synchronized/editing the same model (reference)? (e.g. split-view table-side panel)
### Dev requirements
* Change Sources:
* Layout:
* Schema loading (FormConfig):
When the user changes the type.
* First load
* Schema change
* Model:
* Schema loading (Payload (Model + Default values)) :
When the user changes the type.
* First load
* Schema change
* User interaction
* Valid result (In this order) = Form config + Form Payload + User Changes (that applies to the active Type)
* Whenever the Type is changes, we have to reapply the entire previous sequence.
* Whenever the form is submitted, the User Changes have to be reset
* Form component:
* 2 ways of getting its config:
* New >>> POST to _api/v3/projects/\[projectId\]/work\_packages/form_ with payload _{\_links: {type: {href: "/api/v3/types/1"}}}_
* Existing >>> POST _api/v3/work\_packages/\[wp\_id\]/form_ with payload _{lockVersion: 2, \_links: {}}_
* _DynamicFormsHub Use cases:_
* _Keeps a reference of every active form_
* _Registers a form when it is created_
* _Removes a form when it is destroyed_
* _Keeps the unsaved changes_
* On route changes, o\_nly when they are not discarded (maximize side panel).\_
* _How do we know that the change has not been discarded (alert)_
* _New edit inputs:_
* _What is EditFieldHandler.htmlId for? (Return a unique ID for this edit field), do we need it on every input of the dynamic form?_
* _\[disabled\]_\="inFlight"?
* EditFieldHandler.handleUserKeydown:
"Handle users pressing enter inside an edit mode. Outside an edit mode, the regular save event is captured by handleUserSubmit (submit event). In an edit mode, we can't derive from a submit event wheteher the user pressed enter (and on what field he did that).
* Seems that it is only implemented in the ckEditor
* SelectEditFieldComponent:
* 3 flavours:
* CreateAutocompleterComponent
* VersionAutocompleterComponent (+ @Output create + createNewVersion + ngselect.addTag)
* WorkPackageAutocompleterComponent
* Why/how do we sort option this.halSorting.sort(availableValues)?
* What is addEmptyOption()?
* Open directly this.\_autocompleterComponent.openDirectly = true;?
* Optimization:
* Manage results with pagination
* Skip extra calls when all results are returned (no pagination)
* FormattableEditFieldComponent
* editorType
* HalResource >> constrained
* ProjectResource >> 'statusExplanation' || 'description' >> full, other constrained)
* _WorkPackageBaseResource: fieldName_ === 'description' ? 'full' : 'constrained';
* CustomTextEditFieldService >> full
* What is previewContext for?
* Implement _edit-field-controls_
* _Do we have DateTime input?_
* _Validation:_
* Frontend validation (required, minlength...)
* Do we hardcode the messages in the front?
* Backend validation:
* Can a single input have multiple errors?
* How to know which property is a resource/\_link? Do they always come inside the payload?
### TODO
* [ ] Next steps:
* [ ] Clean useless code and do a draft PR (wp specific case)
* [x] Op-form-field
* [ ] Differentiate between update/create form (/id or href)
* [ ] Create routes:
* [ ] Take the formId from the params?
* [ ] Custom fields (starting with \[\])
* [x] Print form
* [x] Fill model
* [x] Default values
* [x] Group fields
* [x] Layout
* [x] Validation
* [x] Sync
* [x] Async
* [x] Custom component
* [x] Send to endpoint
* [x] Postprocess the model
* [x] Set default values if the user has deleted the default value
* [ ] New Inputs:
* [x] TextEditFieldComponent
* [x] IntegerEditFieldComponent
* [x] SelectEditFieldComponent
* [ ] MultiSelectEditFieldComponent
* [x] FloatEditFieldComponent
* [x] BooleanEditFieldComponent
* [x] DateEditFieldComponent
* [x] FormattableEditFieldComponent
* [ ] Others
* [x] Translations
* [ ] Improve performance (CkEditor)
* [ ] Manage focus
* [ ] ng-select
* [ ] Between fields with tabs (inline edit)
* [ ] Tests
* [ ] Import only necessary fields from OpenprojectFieldsModule into DynamicFormsModule (EditFieldControlsComponent)
* [ ] Check touched, disabled, change, onsubmit... on every new input (datepicker)
* [ ] Two datepickers are displayed
* [ ] Accesibility
* [ ] Content projection
* [ ] Where do we place the submit button?
* [ ] Documentation
* [ ] Remove '\_links' from the model in the front, just add them in the formatToSubmit process.
* [ ] Dynamic V2
* [ ] Save
* [ ] Save the entire form when it is new
* [ ] Save on every field edit when it has model
* [ ] Remove values that don't belong to the schema (e.g. if the user has filled some custom fields and then changed the type )
* [ ] Manage:
* [ ] LockVersion
* [ ] Id (on new wps)
* [ ] New Inputs:
* [ ] ProjectStatusEditFieldComponent
* [ ] WorkPackageCommentFieldComponent
* [ ] CombinedDateEditFieldComponent
* [ ] PlainFormattableEditFieldComponent
* [ ] TimeEntryWorkPackageEditFieldComponent
* [ ] DurationEditFieldComponent
* [ ] WorkPackageEditFieldComponent
* [ ] Combo inputs (country > province)
* [ ] Click and edit
**Acceptance requirements**
* The administration of custom fields for projects gets a checkbox "Allow multi-select", just like the lists for work packages
* The project form is extended such that list custom fields can be multi-selected
* The project advanced settings is extended such that list custom fields can be multi-selected
* The project overview list/table is extended to show multi-select custom fields
* The project details widget on the project overview / dashboard displays custom lists with multiple selections.
* When copying projects, multi-selection custom fields are also copied
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/20761/content"></div></figure>
### Development Notes
* Admin > Custom fields > Wps > multiselect checkbox
* Project > Overview > Project details should allow multi-select custom fields
* Form Config:
* [https://docs.openproject.org/api/endpoints/projects/](https://docs.openproject.org/api/endpoints/projects/)
* [https://docs.openproject.org/api/endpoints/projects/#projects-projects-schema](https://docs.openproject.org/api/endpoints/projects/#projects-projects-schema)
* [https://docs.openproject.org/api/endpoints/projects/#projects-project-create-form](https://docs.openproject.org/api/endpoints/projects/#projects-project-create-form)
*
* Replace project setting's Information tab:
* exclude required disk storage
* Top left buttons (subproject, copy project...)
* 3 steps:
* Replace view with formly
* Enable the backend capable of multiselect fields project
* Enable multiselect fields project in the frontend
* How do we know when input is a typeahead? When it has allowedValues?
* How do we know it allows multiple values?
* Does the input config name have a translation? How is it managed?
* Do we have only 2 types of values?
* Resources: {title, href}
* Regular (direct value)
* Schema:
* What are \_dependencies for?
* Why Customfields are inside \_links but have an \[\] in the payload while the others have an object (title, href)?
* Do the AllowedValues share an interface?
* What options can we have in fieldSchema.options?
* Where is the lockversion changed?
* Id is writable false but lockVersion is true?
* Do all resources set their id as value (ngSelect) ?
* ng-select: Resource value come with a 'title' while resource options come with 'name', could we unify this?
* Default values: what happens if the user deletes it? Do we have to set it again before sending the form?
* We'd need a way of letting know that a writable fields should be hidden (lockVersion) and that a non writable field should be shown? Separate writability from visibility (derivedStartDate, createdOn, CreatedOn... is in the schema but should not be shown)
* Form inputs outside of the form (how do we deal with it?)
* Wp type
* Do we want to also change the HalResources + ChangeSet?
* Form state:
* Do we want to have two forms synchronized/editing the same model (reference)? (e.g. split-view table-side panel)
### Dev requirements
* Change Sources:
* Layout:
* Schema loading (FormConfig):
When the user changes the type.
* First load
* Schema change
* Model:
* Schema loading (Payload (Model + Default values)) :
When the user changes the type.
* First load
* Schema change
* User interaction
* Valid result (In this order) = Form config + Form Payload + User Changes (that applies to the active Type)
* Whenever the Type is changes, we have to reapply the entire previous sequence.
* Whenever the form is submitted, the User Changes have to be reset
* Form component:
* 2 ways of getting its config:
* New >>> POST to _api/v3/projects/\[projectId\]/work\_packages/form_ with payload _{\_links: {type: {href: "/api/v3/types/1"}}}_
* Existing >>> POST _api/v3/work\_packages/\[wp\_id\]/form_ with payload _{lockVersion: 2, \_links: {}}_
* _DynamicFormsHub Use cases:_
* _Keeps a reference of every active form_
* _Registers a form when it is created_
* _Removes a form when it is destroyed_
* _Keeps the unsaved changes_
* On route changes, o\_nly when they are not discarded (maximize side panel).\_
* _How do we know that the change has not been discarded (alert)_
* _New edit inputs:_
* _What is EditFieldHandler.htmlId for? (Return a unique ID for this edit field), do we need it on every input of the dynamic form?_
* _\[disabled\]_\="inFlight"?
* EditFieldHandler.handleUserKeydown:
"Handle users pressing enter inside an edit mode. Outside an edit mode, the regular save event is captured by handleUserSubmit (submit event). In an edit mode, we can't derive from a submit event wheteher the user pressed enter (and on what field he did that).
* Seems that it is only implemented in the ckEditor
* SelectEditFieldComponent:
* 3 flavours:
* CreateAutocompleterComponent
* VersionAutocompleterComponent (+ @Output create + createNewVersion + ngselect.addTag)
* WorkPackageAutocompleterComponent
* Why/how do we sort option this.halSorting.sort(availableValues)?
* What is addEmptyOption()?
* Open directly this.\_autocompleterComponent.openDirectly = true;?
* Optimization:
* Manage results with pagination
* Skip extra calls when all results are returned (no pagination)
* FormattableEditFieldComponent
* editorType
* HalResource >> constrained
* ProjectResource >> 'statusExplanation' || 'description' >> full, other constrained)
* _WorkPackageBaseResource: fieldName_ === 'description' ? 'full' : 'constrained';
* CustomTextEditFieldService >> full
* What is previewContext for?
* Implement _edit-field-controls_
* _Do we have DateTime input?_
* _Validation:_
* Frontend validation (required, minlength...)
* Do we hardcode the messages in the front?
* Backend validation:
* Can a single input have multiple errors?
* How to know which property is a resource/\_link? Do they always come inside the payload?
### TODO
* [ ] Next steps:
* [ ] Clean useless code and do a draft PR (wp specific case)
* [x] Op-form-field
* [ ] Differentiate between update/create form (/id or href)
* [ ] Create routes:
* [ ] Take the formId from the params?
* [ ] Custom fields (starting with \[\])
* [x] Print form
* [x] Fill model
* [x] Default values
* [x] Group fields
* [x] Layout
* [x] Validation
* [x] Sync
* [x] Async
* [x] Custom component
* [x] Send to endpoint
* [x] Postprocess the model
* [x] Set default values if the user has deleted the default value
* [ ] New Inputs:
* [x] TextEditFieldComponent
* [x] IntegerEditFieldComponent
* [x] SelectEditFieldComponent
* [ ] MultiSelectEditFieldComponent
* [x] FloatEditFieldComponent
* [x] BooleanEditFieldComponent
* [x] DateEditFieldComponent
* [x] FormattableEditFieldComponent
* [ ] Others
* [x] Translations
* [ ] Improve performance (CkEditor)
* [ ] Manage focus
* [ ] ng-select
* [ ] Between fields with tabs (inline edit)
* [ ] Tests
* [ ] Import only necessary fields from OpenprojectFieldsModule into DynamicFormsModule (EditFieldControlsComponent)
* [ ] Check touched, disabled, change, onsubmit... on every new input (datepicker)
* [ ] Two datepickers are displayed
* [ ] Accesibility
* [ ] Content projection
* [ ] Where do we place the submit button?
* [ ] Documentation
* [ ] Remove '\_links' from the model in the front, just add them in the formatToSubmit process.
* [ ] Dynamic V2
* [ ] Save
* [ ] Save the entire form when it is new
* [ ] Save on every field edit when it has model
* [ ] Remove values that don't belong to the schema (e.g. if the user has filled some custom fields and then changed the type )
* [ ] Manage:
* [ ] LockVersion
* [ ] Id (on new wps)
* [ ] New Inputs:
* [ ] ProjectStatusEditFieldComponent
* [ ] WorkPackageCommentFieldComponent
* [ ] CombinedDateEditFieldComponent
* [ ] PlainFormattableEditFieldComponent
* [ ] TimeEntryWorkPackageEditFieldComponent
* [ ] DurationEditFieldComponent
* [ ] WorkPackageEditFieldComponent
* [ ] Combo inputs (country > province)
* [ ] Click and edit