[Feature] Basic Case Management/Dynamic Data Attachments

jsapp/js/actions.es6

@@ -19,6 +19,7 @@ import libraryActions from './actions/library';
 import submissionsActions from './actions/submissions';
 import formMediaActions from './actions/mediaActions';
 import exportsActions from './actions/exportsActions';
+import dataShareActions from './actions/datashare';
 import {
   notify,
   replaceSupportEmail,
@@ -34,6 +35,7 @@ export const actions = {
   submissions: submissionsActions,
   media: formMediaActions,
   exports: exportsActions,
+  dataShare: dataShareActions,
 };
 
 actions.navigation = Reflux.createActions([

jsapp/js/actions/datashare.es6

@@ -0,0 +1,110 @@
+/**
+ * Dynamic data attachment related actions
+ */
+
+import Reflux from 'reflux';
+import alertify from 'alertifyjs';
+import {dataInterface} from 'js/dataInterface';
+import {MAX_DISPLAYED_STRING_LENGTH} from '../constants';
+import {
+  getAssetUIDFromUrl,
+  truncateFile,
+  truncateString,
+} from '../utils';
+
+const dataShareActions = Reflux.createActions({
+  attachToSource: {children: ['completed', 'failed']},
+  detachSource: {children: ['completed', 'failed']},
+  patchSource: {children: ['completed', 'failed']},
+  getAttachedSources: {children: ['completed', 'failed']},
+  getSharingEnabledAssets: {children: ['completed', 'failed']},
+  toggleDataSharing: {children: ['completed', 'failed']},
+  updateColumnFilters: {children: ['completed', 'failed']},
+});
+
+dataShareActions.attachToSource.listen((assetUid, data) => {
+  dataInterface.attachToSource(assetUid, data)
+    .done(dataShareActions.attachToSource.completed)
+    .fail(dataShareActions.attachToSource.failed);
+});
+dataShareActions.attachToSource.failed.listen((response) => {
+  alertify.error(response?.responseJSON || t('Failed to attach to source'));
+});
+
+dataShareActions.detachSource.listen((attachmentUrl) => {
+  dataInterface.detachSource(attachmentUrl)
+    .done(dataShareActions.detachSource.completed)
+    .fail(dataShareActions.detachSource.failed);
+});
+dataShareActions.detachSource.failed.listen((response) => {
+  alertify.error(response?.responseJSON || t('Failed to detach from source'));
+});
+
+dataShareActions.patchSource.listen((attachmentUrl, data) => {
+  dataInterface.patchSource(attachmentUrl, data)
+    .done(dataShareActions.patchSource.completed)
+    .fail(dataShareActions.patchSource.failed)
+});
+dataShareActions.patchSource.failed.listen((response) => {
+  alertify(response?.responseJSON || t('Failed to patch source'));
+});
+
+dataShareActions.getAttachedSources.listen((assetUid) => {
+  dataInterface.getAttachedSources(assetUid)
+    .done((response) => {
+      let allSources = [];
+      response.results.forEach((source) => {
+        let sourceUid = getAssetUIDFromUrl(source.source);
+        allSources.push({
+          sourceName: truncateString(
+            source.source__name,
+            MAX_DISPLAYED_STRING_LENGTH.connect_projects,
+          ),
+          // Source's asset url
+          sourceUrl: source.source,
+          sourceUid: sourceUid,
+          // Fields that the connecting project has selected to import
+          linkedFields: source.fields,
+          filename: truncateFile(
+            source.filename,
+            MAX_DISPLAYED_STRING_LENGTH.connect_projects,
+          ),
+          // Source project attachment endpoint
+          attachmentUrl: source.url,
+        });
+      });
+      dataShareActions.getAttachedSources.completed(allSources);
+    })
+    .fail(dataShareActions.getAttachedSources.failed);
+});
+
+dataShareActions.getSharingEnabledAssets.listen(() => {
+  dataInterface.getSharingEnabledAssets()
+    .done(dataShareActions.getSharingEnabledAssets.completed)
+    .fail(dataShareActions.getSharingEnabledAssets.failed);
+});
+dataShareActions.getSharingEnabledAssets.failed.listen(() => {
+  alertify.error(t('Failed to retrieve sharing enabled assets'));
+});
+
+// The next two actions have the same endpoint but must be handled very
+// differently so we leave them as seperate actions
+dataShareActions.toggleDataSharing.listen((uid, data) => {
+  dataInterface.patchDataSharing(uid, data)
+    .done(dataShareActions.toggleDataSharing.completed)
+    .fail(dataShareActions.toggleDataSharing.failed);
+});
+dataShareActions.toggleDataSharing.failed.listen((response) => {
+  alertify.error(response?.responseJSON?.detail || t('Failed to toggle sharing'))
+});
+
+dataShareActions.updateColumnFilters.listen((uid, data) => {
+  dataInterface.patchDataSharing(uid, data)
+    .done(dataShareActions.updateColumnFilters.completed)
+    .fail(dataShareActions.updateColumnFilters.failed);
+});
+dataShareActions.updateColumnFilters.failed.listen((response) => {
+  alertify.error(response?.responseJSON || t('Failed to update column filters'));
+});
+
+export default dataShareActions;

jsapp/js/app.es6

@@ -298,6 +298,7 @@ export var routes = (
           <IndexRoute component={FormSubScreens} />
           <Route path={ROUTES.FORM_MEDIA} component={FormSubScreens} />
           <Route path={ROUTES.FORM_SHARING} component={FormSubScreens} />
+          <Route path={ROUTES.FORM_RECORDS} component={FormSubScreens} />
           <Route path={ROUTES.FORM_REST} component={FormSubScreens} />
           <Route path={ROUTES.FORM_REST_HOOK} component={FormSubScreens} />
           <Route path={ROUTES.FORM_KOBOCAT} component={FormSubScreens} />

jsapp/js/components/formSubScreens.es6

@@ -10,6 +10,7 @@ import mixins from '../mixins';
 import DocumentTitle from 'react-document-title';
 import SharingForm from './permissions/sharingForm';
 import ProjectSettings from './modalForms/projectSettings';
+import ConnectProjects from './modalForms/connectProjects';
 import FormMedia from './modalForms/formMedia';
 import DataTable from 'js/components/submissions/table';
 import ProjectExportsCreator from 'js/components/projectDownloads/projectExportsCreator';
@@ -18,6 +19,7 @@ import {PROJECT_SETTINGS_CONTEXTS} from '../constants';
 import FormMap from './map';
 import RESTServices from './RESTServices';
 import ui from '../ui';
+import {ROUTES} from '../constants.es6';
 
 export class FormSubScreens extends React.Component {
   constructor(props){
@@ -58,31 +60,37 @@ export class FormSubScreens extends React.Component {
         report__base = deployment__identifier.replace('/forms/', '/reports/');
       }
       switch(this.props.location.pathname) {
-        case `/forms/${this.state.uid}/data/table`:
+        case ROUTES.FORM_TABLE.replace(':uid', this.state.uid):
           return <DataTable asset={this.state} />;
-        case `/forms/${this.state.uid}/data/gallery`:
+        case ROUTES.FORM_GALLERY.replace(':uid', this.state.uid):
           iframeUrl = deployment__identifier+'/photos';
           break;
-        case `/forms/${this.state.uid}/data/map`:
+        case ROUTES.FORM_MAP.replace(':uid', this.state.uid):
           return <FormMap asset={this.state} />;
-        case `/forms/${this.state.uid}/data/map/${this.props.params.viewby}`:
+        case ROUTES.FORM_MAP_BY
+            .replace(':uid', this.state.uid)
+            .replace(':viewby', this.props.params.viewby):
           return <FormMap asset={this.state} viewby={this.props.params.viewby}/>;
-        case `/forms/${this.state.uid}/data/downloads`:
+        case ROUTES.FORM_DOWNLOADS.replace(':uid', this.state.uid):
           return this.renderProjectDownloads();
-        case `/forms/${this.state.uid}/settings`:
+        case ROUTES.FORM_SETTINGS.replace(':uid', this.state.uid):
           return this.renderSettingsEditor();
-        case `/forms/${this.state.uid}/settings/media`:
+        case ROUTES.FORM_MEDIA.replace(':uid', this.state.uid):
           return this.renderUpload();
-        case `/forms/${this.state.uid}/settings/sharing`:
+        case ROUTES.FORM_SHARING.replace(':uid', this.state.uid):
           return this.renderSharing();
-        case `/forms/${this.state.uid}/settings/rest`:
+        case ROUTES.FORM_RECORDS.replace(':uid', this.state.uid):
+          return this.renderRecords();
+        case ROUTES.FORM_REST.replace(':uid', this.state.uid):
           return <RESTServices asset={this.state} />;
-        case `/forms/${this.state.uid}/settings/rest/${this.props.params.hookUid}`:
+        case ROUTES.FORM_REST_HOOK
+            .replace(':uid', this.state.uid)
+            .replace(':hook', this.props.params.hookUid):
           return <RESTServices asset={this.state} hookUid={this.props.params.hookUid}/>;
-        case `/forms/${this.state.uid}/settings/kobocat`:
+        case ROUTES.FORM_KOBOCAT.replace(':uid', this.state.uid):
           iframeUrl = deployment__identifier+'/form_settings';
           break;
-        case `/forms/${this.state.uid}/reset`:
+        case ROUTES.FORM_RESET.replace(':uid', this.state.uid):
           return this.renderReset();
       }
     }
@@ -138,6 +146,13 @@ export class FormSubScreens extends React.Component {
       </bem.FormView>
     );
   }
+  renderRecords() {
+    return (
+      <bem.FormView className='connect-projects'>
+        <ConnectProjects asset={this.state}/>
+      </bem.FormView>
+    );
+  }
   renderReset() {
     return (<ui.LoadingSpinner/>);
   }

jsapp/js/components/formViewTabs.es6

@@ -157,21 +157,21 @@ class FormViewTabs extends Reflux.Component {
     if (
       this.state.asset &&
       this.state.asset.has_deployment &&
-      this.isActiveRoute(`/forms/${this.state.assetid}/data`)
+      this.isActiveRoute(ROUTES.FORM_DATA.replace(':uid', this.state.assetid))
     ) {
       sideTabs = getFormDataTabs(this.state.assetid, stores.session.isLoggedIn);
     }
 
     if (
       this.state.asset &&
-      this.isActiveRoute(`/forms/${this.state.assetid}/settings`)
+      this.isActiveRoute(ROUTES.FORM_SETTINGS.replace(':uid', this.state.assetid))
     ) {
       sideTabs = [];
 
       sideTabs.push({
         label: t('General'),
         icon: 'k-icon k-icon-settings',
-        path: `/forms/${this.state.assetid}/settings`,
+        path: ROUTES.FORM_SETTINGS.replace(':uid', this.state.assetid),
       });
 
       if (
@@ -183,14 +183,20 @@ class FormViewTabs extends Reflux.Component {
         sideTabs.push({
           label: t('Media'),
           icon: 'k-icon k-icon-photo-gallery',
-          path: `/forms/${this.state.assetid}/settings/media`,
+          path: ROUTES.FORM_MEDIA.replace(':uid', this.state.assetid),
         });
       }
 
       sideTabs.push({
         label: t('Sharing'),
         icon: 'k-icon k-icon-user-share',
-        path: `/forms/${this.state.assetid}/settings/sharing`,
+        path: ROUTES.FORM_SHARING.replace(':uid', this.state.assetid),
+      });
+
+      sideTabs.push({
+        label: t('Connect Projects'),
+        icon: 'k-icon k-icon-attach',
+        path: ROUTES.FORM_RECORDS.replace(':uid', this.state.assetid),
       });
 
       if (
@@ -211,7 +217,7 @@ class FormViewTabs extends Reflux.Component {
         sideTabs.push({
           label: t('REST Services'),
           icon: 'k-icon k-icon-data-sync',
-          path: `/forms/${this.state.assetid}/settings/rest`,
+          path: ROUTES.FORM_REST.replace(':uid', this.state.assetid),
         });
       }
     }

jsapp/js/components/modal.es6

@@ -37,6 +37,7 @@ import LibraryNewItemForm from './modalForms/libraryNewItemForm';
 import LibraryUploadForm from './modalForms/libraryUploadForm';
 import EncryptForm from './modalForms/encryptForm.es6';
 import BulkEditSubmissionsForm from './modalForms/bulkEditSubmissionsForm.es6';
+import DataAttachmentColumnsForm from './modalForms/dataAttachmentColumnsForm.es6';
 import ProjectSettings from './modalForms/projectSettings';
 import RESTServicesForm from './RESTServices/RESTServicesForm';
 import SharingForm from './permissions/sharingForm';
@@ -178,6 +179,10 @@ class Modal extends React.Component {
         });
         break;
 
+      case MODAL_TYPES.DATA_ATTACHMENT_COLUMNS:
+        // title is set by DataAttachmentColumnsForm
+        break;
+
       default:
         console.error(`Unknown modal type: "${type}"!`);
     }
@@ -381,6 +386,13 @@ class Modal extends React.Component {
                 {...this.props.params}
               />
             }
+            { this.props.params.type === MODAL_TYPES.DATA_ATTACHMENT_COLUMNS &&
+              <DataAttachmentColumnsForm
+                onSetModalTitle={this.setModalTitle}
+                onModalClose={this.onModalClose}
+                {...this.props.params}
+              />
+            }
         </ui.Modal.Body>
       </ui.Modal>
     );