Merge pull request #132 from e-picsa/feat/data-tool-save

Feat(monitoring) - Form save, edit, delete

apps/picsa-apps/extension-app-native/android/app/build.gradle

@@ -6,8 +6,8 @@ android {
         applicationId "io.picsa.extension"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 3028000
-        versionName "3.28.0"
+        versionCode 3029000
+        versionName "3.29.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.config.json

@@ -13,13 +13,19 @@
 		"cordova-plugin-codeplay-share-own-apk",
 		"@capacitor/app",
 		"@capacitor/browser",
+		"@capacitor/core",
 		"@capacitor/device",
 		"@capacitor/filesystem",
 		"capacitor-blob-writer",
 		"@capacitor-community/firebase-analytics",
 		"@capacitor-community/firebase-crashlytics",
 		"@capacitor-firebase/performance"
 	],
+	"plugins": {
+		"CapacitorHttp": {
+			"enabled": true
+		}
+	},
 	"server": {
 		"cleartext": true
 	}

apps/picsa-apps/extension-app-native/capacitor.config.ts

@@ -20,13 +20,21 @@ const config: CapacitorConfig = {
     // capacitor
     '@capacitor/app',
     '@capacitor/browser',
+    '@capacitor/core',
     '@capacitor/device',
     '@capacitor/filesystem',
     'capacitor-blob-writer',
     '@capacitor-community/firebase-analytics',
     '@capacitor-community/firebase-crashlytics',
     '@capacitor-firebase/performance',
   ],
+  // Enable app to use native http for requests (bypass cors)
+  // https://capacitorjs.com/docs/apis/http
+  plugins: {
+    CapacitorHttp: {
+      enabled: true,
+    },
+  },
   server: {
     /** Uncomment and replace with local ip to serve live-reload */
 

apps/picsa-tools/monitoring-tool/.eslintrc.json

@@ -6,6 +6,7 @@
       "files": ["*.ts"],
       "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
       "rules": {
+        "no-useless-escape": "off",
         "@angular-eslint/directive-selector": [
           "error",
           {

apps/picsa-tools/monitoring-tool/data/forms/ew-monitoring.form.ts

@@ -0,0 +1,15 @@
+import { IEnketoFormDefinition } from '../../src/app/schema';
+
+const form: IEnketoFormDefinition = {
+  form: '<form autocomplete="off" novalidate="novalidate" class="or clearfix theme-grid no-text-transform" dir="ltr" data-form-id="aQCDPoHBUkgJRWQgswksoo">\n<!--This form was created by transforming an ODK/OpenRosa-flavored (X)Form using an XSL stylesheet created by Enketo LLC.--><section class="form-logo"></section><h3 dir="auto" id="form-title">PICSA Apps - Extension Worker Monitoring</h3>\n  \n  \n    <label class="question non-select "><span lang="" class="question-label active">Date</span><input type="date" name="/aQCDPoHBUkgJRWQgswksoo/date" data-type-xml="date"></label>\n    <fieldset class="question simple-select "><fieldset><legend><span lang="" class="question-label active">District</span>\n                    </legend><div class="option-wrapper"><label class=""><input type="radio" name="/aQCDPoHBUkgJRWQgswksoo/district" data-name="/aQCDPoHBUkgJRWQgswksoo/district" value="chipata" data-type-xml="string"><span lang="" class="option-label active">Chipata</span></label><label class=""><input type="radio" name="/aQCDPoHBUkgJRWQgswksoo/district" data-name="/aQCDPoHBUkgJRWQgswksoo/district" value="petauke" data-type-xml="string"><span lang="" class="option-label active">Petauke</span></label><label class=""><input type="radio" name="/aQCDPoHBUkgJRWQgswksoo/district" data-name="/aQCDPoHBUkgJRWQgswksoo/district" value="kasungu" data-type-xml="string"><span lang="" class="option-label active">Kasungu</span></label><label class=""><input type="radio" name="/aQCDPoHBUkgJRWQgswksoo/district" data-name="/aQCDPoHBUkgJRWQgswksoo/district" value="nkhotakota" data-type-xml="string"><span lang="" class="option-label active">Nkhotakota</span></label></div></fieldset></fieldset>\n    <label class="question non-select "><span lang="" class="question-label active">Location</span><input type="text" name="/aQCDPoHBUkgJRWQgswksoo/location" data-type-xml="string"></label>\n    <label class="question non-select "><span lang="" class="question-label active">Your Name</span><input type="text" name="/aQCDPoHBUkgJRWQgswksoo/name" data-type-xml="string"></label>\n    <section class="or-group-data or-appearance-w3 " name="/aQCDPoHBUkgJRWQgswksoo/farmers_present_header"><label class="question non-select or-appearance-w1 "><span lang="" class="question-label active"><strong>Farmers Present</strong></span><input type="text" name="/aQCDPoHBUkgJRWQgswksoo/farmers_present_header/farmers_present_header_note" data-type-xml="string" readonly></label><label class="question non-select or-appearance-w1 "><span lang="" class="question-label active"><h4>Female</h4></span><input type="text" name="/aQCDPoHBUkgJRWQgswksoo/farmers_present_header/farmers_present_header_u35" data-type-xml="string" readonly></label><label class="question non-select or-appearance-w1 "><span lang="" class="question-label active"><h4>Male</h4></span><input type="text" name="/aQCDPoHBUkgJRWQgswksoo/farmers_present_header/farmers_present_header_o36" data-type-xml="string" readonly></label>\n            </section><!--end of group -->\n    <section class="or-group-data or-appearance-w3 " name="/aQCDPoHBUkgJRWQgswksoo/farmers_present_35"><label class="question non-select or-appearance-w1 "><span lang="" class="question-label active"><h5>Age 35 or under</h5></span><input type="text" name="/aQCDPoHBUkgJRWQgswksoo/farmers_present_35/farmers_present_f_1_note" data-type-xml="string" readonly></label><label class="question non-select or-appearance-w1 or-appearance-no-label "><span lang="" class="question-label active"><span style="display:none">f-Age 35 or under</span></span><input type="number" name="/aQCDPoHBUkgJRWQgswksoo/farmers_present_35/farmers_female_35orunder" data-type-xml="int"></label><label class="question non-select or-appearance-w1 or-appearance-no-label "><span lang="" class="question-label active"><span style="display:none">m-Age 35 or under</span></span><input type="number" name="/aQCDPoHBUkgJRWQgswksoo/farmers_present_35/farmers_male_35orunder" data-type-xml="int"></label>\n            </section><!--end of group -->\n    <section class="or-group-data or-appearance-w3 " name="/aQCDPoHBUkgJRWQgswksoo/farmers_present_36"><label class="question non-select or-appearance-w1 "><span lang="" class="question-label active"><h5>Age 36 or over</h5></span><input type="text" name="/aQCDPoHBUkgJRWQgswksoo/farmers_present_36/farmers_present_m_1_note" data-type-xml="string" readonly></label><label class="question non-select or-appearance-w1 or-appearance-no-label "><span lang="" class="question-label active"><span style="display:none">f-Age 36 or over</span></span><input type="number" name="/aQCDPoHBUkgJRWQgswksoo/farmers_present_36/farmers_female_36orover" data-type-xml="int"></label><label class="question non-select or-appearance-w1 or-appearance-no-label "><span lang="" class="question-label active"><span style="display:none">m-Age 36 or over</span></span><input type="number" name="/aQCDPoHBUkgJRWQgswksoo/farmers_present_36/farmers_male_36orover" data-type-xml="int"></label>\n            </section><!--end of group -->\n    <label class="question non-select "><span lang="" class="question-label active">Total Farmers: <span class="or-output" data-value=" /aQCDPoHBUkgJRWQgswksoo/total_farmers "> </span></span><input type="text" name="/aQCDPoHBUkgJRWQgswksoo/Total_Farmers_total_farmers" data-type-xml="string" readonly></label>\n    <label class="question non-select "><span lang="" class="question-label active">Describe what training and activities you conducted with the farmers today(Please give details)</span><input type="text" name="/aQCDPoHBUkgJRWQgswksoo/activities" data-type-xml="string"></label>\n    <label class="question non-select "><span lang="" class="question-label active">Any comments or observations(e.g exercises/activities farmers found useful? Anything you observed that you think is interesting?</span><input type="text" name="/aQCDPoHBUkgJRWQgswksoo/observations" data-type-xml="string"></label>\n    <label class="question non-select "><span lang="" class="question-label active">Did you (or anyone else) in addition to the training, share information from PICSA with others in the community(e.g extension app, using notice boards, other meetings)? if yes please give details including date, how many farmers you think may have benefited from this)</span><input type="text" name="/aQCDPoHBUkgJRWQgswksoo/share_community" data-type-xml="string"></label>\n  \n<fieldset id="or-preload-items" style="display:none;"><label class="calculation non-select "><input type="hidden" name="/aQCDPoHBUkgJRWQgswksoo/start" data-preload="timestamp" data-preload-params="start" data-type-xml="dateTime"></label><label class="calculation non-select "><input type="hidden" name="/aQCDPoHBUkgJRWQgswksoo/end" data-preload="timestamp" data-preload-params="end" data-type-xml="dateTime"></label><label class="calculation non-select "><input type="hidden" name="/aQCDPoHBUkgJRWQgswksoo/meta/instanceID" data-preload="uid" data-preload-params="" data-type-xml="string"></label></fieldset><fieldset id="or-calculated-items" style="display:none;"><label class="calculation non-select "><input type="hidden" name="/aQCDPoHBUkgJRWQgswksoo/total_farmers" data-calculate=" /aQCDPoHBUkgJRWQgswksoo/farmers_present_35/farmers_female_35orunder + /aQCDPoHBUkgJRWQgswksoo/farmers_present_35/farmers_male_35orunder + /aQCDPoHBUkgJRWQgswksoo/farmers_present_36/farmers_female_36orover + /aQCDPoHBUkgJRWQgswksoo/farmers_present_36/farmers_male_36orover " data-type-xml="string"></label><label class="calculation non-select "><input type="hidden" name="/aQCDPoHBUkgJRWQgswksoo/__version__" data-calculate="\'v6evZtYBCbVVMTbao7Wed8\'" data-type-xml="string"></label><label class="calculation non-select "><input type="hidden" name="/aQCDPoHBUkgJRWQgswksoo/formhub/uuid" data-calculate="\'6047e7f1180a493eb78272460fd38317\'" data-type-xml="string"></label></fieldset></form>',
+  media: {},
+  model:
+    '<model xmlns:odk="http://www.opendatakit.org/xforms" odk:xforms-version="1.0.0"><instance>\n        <aQCDPoHBUkgJRWQgswksoo xmlns:jr="http://openrosa.org/javarosa" xmlns:orx="http://openrosa.org/xforms" id="aQCDPoHBUkgJRWQgswksoo" version="10 (2023-07-15 20:26:29)">\n          <formhub>\n            <uuid/>\n          </formhub>\n          <start/>\n          <end/>\n          <date/>\n          <district/>\n          <location/>\n          <name/>\n          <farmers_present_header>\n            <farmers_present_header_note/>\n            <farmers_present_header_u35/>\n            <farmers_present_header_o36/>\n          </farmers_present_header>\n          <farmers_present_35>\n            <farmers_present_f_1_note/>\n            <farmers_female_35orunder/>\n            <farmers_male_35orunder/>\n          </farmers_present_35>\n          <farmers_present_36>\n            <farmers_present_m_1_note/>\n            <farmers_female_36orover/>\n            <farmers_male_36orover/>\n          </farmers_present_36>\n          <total_farmers/>\n          <Total_Farmers_total_farmers/>\n          <activities/>\n          <observations/>\n          <share_community/>\n          <__version__/>\n          <meta>\n            <instanceID/>\n          </meta>\n        </aQCDPoHBUkgJRWQgswksoo>\n      </instance></model>',
+  theme: 'grid',
+  hash: 'md5:3df1198edf03fd9417bee87faf933310--d97bac4e49bda9c52dee96737583f620---1',
+  languageMap: {},
+  enketoId: 'PGpldp9m',
+  externalData: [],
+  maxSize: 10000000,
+};
+export default form;

apps/picsa-tools/monitoring-tool/data/forms/index.ts

@@ -0,0 +1,28 @@
+import { IMonitoringForm } from '../../src/app/schema/forms';
+
+import ewMonitoringForm from './ew-monitoring.form';
+import demoKitchenForm from './demo-kitchen.form';
+
+export const HARDCODED_FORMS: IMonitoringForm[] = [
+  {
+    _id: 'ew_monitoring',
+    title: 'Extension Worker Monitoring',
+    description: '',
+    enketoDefinition: ewMonitoringForm,
+    summaryFields: [
+      { field: 'date', label: 'Date' },
+      { field: 'district', label: 'District' },
+      { field: 'location', label: 'Location' },
+      { field: 'total_farmers', label: 'Total Farmers' },
+    ],
+  },
+
+  {
+    _id: 'demo_kitchen',
+    title: 'Complex Demo Form',
+    description: '',
+    appCountries: ['global'],
+    enketoDefinition: demoKitchenForm,
+    summaryFields: [{ field: '_id', label: 'ID' }],
+  },
+];

apps/picsa-tools/monitoring-tool/src/app/app-routing.module.ts

@@ -10,7 +10,7 @@ export const ROUTES_COMMON: Routes = [
 
   {
     path: 'view',
-    loadChildren: () => import('./pages/form-view/form-view.module').then((m) => m.FormViewModule),
+    loadChildren: () => import('./pages/form/form.module').then((m) => m.FormModule),
     title: 'Monitoring',
   },
 ];

apps/picsa-tools/monitoring-tool/src/app/app.module.ts

@@ -4,20 +4,26 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 // import { MonitoringMaterialModule } from './material.module';
 import { PicsaCommonComponentsModule } from '@picsa/components';
-import { PicsaDbModule, PicsaTranslateModule, PicsaTranslateService } from '@picsa/shared/modules';
+import { PicsaDb_V2_Module, PicsaTranslateModule, PicsaTranslateService } from '@picsa/shared/modules';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 
 /** Core imports only required when running standalone */
-const StandaloneImports = [AppRoutingModule, BrowserModule, BrowserAnimationsModule, PicsaTranslateModule.forRoot()];
+const StandaloneImports = [
+  AppRoutingModule,
+  BrowserModule,
+  BrowserAnimationsModule,
+  PicsaTranslateModule.forRoot(),
+  PicsaDb_V2_Module.forRoot(),
+];
 
 /** Common imports used in both standalone and embedded formats */
 export const APP_COMMON_IMPORTS = [
   FormsModule,
   PicsaTranslateModule,
   // MonitoringMaterialModule,
-  PicsaDbModule.forRoot(),
+  PicsaDb_V2_Module,
   PicsaCommonComponentsModule,
 ];
 

apps/picsa-tools/monitoring-tool/src/app/components/form-item/form-item.component.html

@@ -1,4 +1,4 @@
-<mat-card appearance="raised" class="link" [routerLink]="['view', form.enketoId]">
+<mat-card appearance="raised" class="link" [routerLink]="['view', form._id]">
   <!-- Header -->
   <mat-card-header>
     <mat-card-title style="margin-top: 12px">

apps/picsa-tools/monitoring-tool/src/app/components/form-item/form-item.component.ts

@@ -1,12 +1,11 @@
 import { Component, Input } from '@angular/core';
-
-import { IPicsaForm } from '../../models';
+import { IMonitoringForm } from '../../schema/forms';
 
 @Component({
   selector: 'monitoring-form-item',
   templateUrl: './form-item.component.html',
   styleUrls: ['./form-item.component.scss'],
 })
 export class FormItemComponent {
-  @Input() form: IPicsaForm;
+  @Input() form: IMonitoringForm;
 }

apps/picsa-tools/monitoring-tool/src/app/components/material.module.ts

@@ -1,8 +1,10 @@
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTableModule } from '@angular/material/table';
 
-const Modules = [MatButtonModule, MatCardModule];
+const Modules = [MatButtonModule, MatCardModule, MatIconModule, MatTableModule];
 @NgModule({
   imports: Modules,
   exports: Modules,

apps/picsa-tools/monitoring-tool/src/app/pages/form/form-view/form-view.component.html

@@ -0,0 +1,19 @@
+<div class="page-content">
+  <ng-container *ngIf="formInitial">
+    <enketo-webform
+      [form]="formInitial.form"
+      [model]="formInitial.model"
+      (dataUpdated)="handleAutosave($event)"
+      (formSaved)="handleSave($event)"
+      [showButtons]="false"
+    ></enketo-webform>
+    <div style="display: flex">
+      <button mat-button style="margin-right: 1rem" (click)="promptDelete()">
+        <mat-icon>delete</mat-icon>{{ 'Delete' | translate }}
+      </button>
+      <button mat-raised-button color="primary" style="flex: 1" [disabled]="!formEntry" (click)="handleCustomSave()">
+        {{ 'Submit' | translate }}
+      </button>
+    </div>
+  </ng-container>
+</div>