Is your feature request related to a problem? Please describe.
As part of the farmer activity tool there are some activities where the farmer is encouraged to complete a task using pen and paper (outside of the app). It would be a nice feature if the farmer can then take that photo and upload it into the app, to be stored alongside the specific activity
Describe the solution you'd like
Initial work should focus on the camera api integration (will create follow-up issue to manage file storage and association with farmer activities).
Ideally a custom photo-input component should be created, with a simple ui showing possibly a camera icon, a '+' icon and text for 'add photo'. Clicking the button should prompt the user to either take a photo using their camera, or upload a file
The code should use the Capacitor Plugin to provide access to native getPhoto() method which can either take a photo or upload a file on native.
On web I think probably better to handle as standard file input (no need to request access to user webcam or similar).
Once selected the UI should show the uploaded image, and give the option to remove.
Additional context
Documentation for capacitor camera plugin: https://capacitorjs.com/docs/apis/camera
Note - when adding to the project also make sure to include it in the list of plugins named in the apps\picsa-apps\extension-app-native\capacitor.config.ts file
It would be good if this could also be designed as an input component, so that it can be interoperable with things like ngModel data bindings and angular forms. It can be created in the libs\forms\components folder and named photo-input. See example form documentation in libs\forms\components\base\README.md for an overview of how custom shared form components are designed to work.
Example of farmer activity can be seen at https://picsa.app/farmer-activity/ram-activity.
There is a second tab for activity (currently empty). Ideally it is in that space where the add photo button should
Is your feature request related to a problem? Please describe. As part of the farmer activity tool there are some activities where the farmer is encouraged to complete a task using pen and paper (outside of the app). It would be a nice feature if the farmer can then take that photo and upload it into the app, to be stored alongside the specific activity
Describe the solution you'd like Initial work should focus on the camera api integration (will create follow-up issue to manage file storage and association with farmer activities).
Ideally a custom photo-input component should be created, with a simple ui showing possibly a camera icon, a '+' icon and text for 'add photo'. Clicking the button should prompt the user to either take a photo using their camera, or upload a file
The code should use the Capacitor Plugin to provide access to native
getPhoto()method which can either take a photo or upload a file on native.On web I think probably better to handle as standard file input (no need to request access to user webcam or similar).
Once selected the UI should show the uploaded image, and give the option to remove.
Additional context Documentation for capacitor camera plugin: https://capacitorjs.com/docs/apis/camera Note - when adding to the project also make sure to include it in the list of plugins named in the
apps\picsa-apps\extension-app-native\capacitor.config.tsfileIt would be good if this could also be designed as an input component, so that it can be interoperable with things like ngModel data bindings and angular forms. It can be created in the
libs\forms\componentsfolder and namedphoto-input. See example form documentation inlibs\forms\components\base\README.mdfor an overview of how custom shared form components are designed to work.Example of farmer activity can be seen at https://picsa.app/farmer-activity/ram-activity. There is a second tab for activity (currently empty). Ideally it is in that space where the add photo button should