#2350: Generate survey files async

assets/css/_buttons.scss

@@ -50,7 +50,7 @@ i {
   @extend .grey-text;
   font-size: 17px;
   display: inline-block;
-  margin-left: 10px;
+  margin-left: 10px; // TODO: the spacing should always be placed in the container, not in the content
   cursor: pointer;
   span {
     vertical-align: middle;

assets/css/_card-modal.scss

@@ -74,49 +74,11 @@
       li.collection-item {
         border: none;
       }
-      li.collection-item.download {
-        min-height: 6rem;
-      }
-      a.download {
-        @extend .grey-text;
-        position: relative;
-        > div {
-          padding-left: 70px;
-          max-width: 85%;
-          &:first-child {
-            background-color: #999999;
-            text-align: center;
-            border-radius: 50%;
-            height: 45px;
-            width: 45px;
-            padding-left: 0;
-            max-width: initial;
-            position: absolute;
-            top: 4px;
-            left: 5px;
-            i.material-icons {
-              @extend .white-text;
-              font-size: 1.5rem;
-              line-height: 45px;
-            }
-          }
-          p {
-            font-size: 1.1rem;
-            margin: 0.2rem 0;
-          }
-        }
-        &:after {
-          content: "";
-          display: table;
-          clear: both;
-          zoom: 1;
-        }
-        .button {
-          background-color: color("grey", "darken-1");
-        }
-        .button[disabled] {
-          border: 1px rgba(0, 0, 0, 0.1) solid;
-          background-color: transparent;
+      li.collection-item .file-section {
+        padding-left: 70px;
+        p {
+          font-size: 1.1rem;
+          margin: 0.2rem 0;
         }
         .title {
           @extend .black-text;
@@ -132,19 +94,48 @@
           width: fit-content;
         }
       }
+      a.download {
+        display: block;
+        text-align: center;
+        height: 45px;
+        width: 45px;
+        padding-left: 0;
+        max-width: initial;
+        i.material-icons {
+          @extend .black-text;
+          font-size: 1.5rem;
+        }
+        position: absolute;
+        top: 4px;
+        left: 5px;
+        &:after {
+          content: "";
+          display: table;
+          clear: both;
+          zoom: 1;
+        }
+      }
       .access-link {
         padding: 0.5rem 0;
-        max-width: 85%;
+        display: flex;
+        align-items: center;
         .switch {
-          display: inline-block;
-          vertical-align: middle;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          label {
+            display: flex;
+            align-items: center;
+          }
           .lever {
             margin-left: 0;
           }
           .label {
             @extend .grey-text;
             font-size: 1rem;
             margin-right: 0.5rem;
+            display: flex;
+            white-space: nowrap;
           }
         }
         .link {
@@ -160,6 +151,7 @@
             vertical-align: middle;
             width: 98%;
             overflow: hidden;
+            text-overflow: ellipsis;
             display: inline-block;
           }
           .buttons {
@@ -179,6 +171,29 @@
           }
         }
       }
+      .file-download {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        .btn-icon-grey {
+          margin-left: initial;
+        }
+
+        .file-generation {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+
+        a {
+          display: inline-flex;
+        }
+
+        .material-icons {
+          display: inline-flex;
+        }
+      }
       div.link {
         @extend .grey-text;
         > div {

assets/js/actions/survey.js

@@ -44,6 +44,9 @@ export const REFRESH_LINK = "SURVEY_REFRESH_LINK"
 export const DELETE_LINK = "SURVEY_DELETE_LINK"
 export const RECEIVE_SURVEY_STATS = "RECEIVE_SURVEY_STATS"
 export const RECEIVE_SURVEY_RETRIES_HISTOGRAMS = "RECEIVE_SURVEY_RETRIES_HISTOGRAMS"
+export const GENERATING_FILE = "GENERATING_FILE"
+export const FETCHING_FILES_STATUS = "FETCHING_FILES_STATUS"
+export const RECEIVE_FILES_STATUS = "RECEIVE_FILES_STATUS"
 
 export const createSurvey =
   (projectId: number, folderId?: number) => (dispatch: Function, getState: () => Store) =>
@@ -366,6 +369,11 @@ export const deleteLink = (link: Link) => ({
   link,
 })
 
+export const generatingFile = (file: string) => ({
+  type: GENERATING_FILE,
+  file
+})
+
 export const createResultsLink = (projectId: number, surveyId: number) => (dispatch: Function) => {
   api.createResultsLink(projectId, surveyId).then((response) => {
     return dispatch(receiveLink(response))
@@ -448,3 +456,52 @@ export const deleteDispositionHistoryLink =
       return dispatch(deleteLink(link))
     })
   }
+
+export const fetchingRespondentFilesStatus = (surveyId: number) => ({
+  type: FETCHING_FILES_STATUS,
+  surveyId,
+})
+
+export const receiveRespondentsFilesStatus = (surveyId: number, surveyState: string, files: SurveyFiles) => ({
+  type: RECEIVE_FILES_STATUS,
+  surveyId,
+  surveyState,
+  files,
+})
+
+export const fetchRespondentsFilesStatus = (projectId: number, surveyId: number, filter?: string) => (dispatch: Function) => {
+  dispatch(fetchingRespondentFilesStatus(surveyId))
+  api.fetchRespondentsFilesStatus(projectId, surveyId, filter).then((response) => {
+    dispatch(receiveRespondentsFilesStatus(surveyId, response.survey_state, response.files))
+  })
+}
+
+export const generateResultsFile =
+  (projectId: number, surveyId: number, filter?: string) => (dispatch: Function) => {
+    api.generateResults(projectId, surveyId, filter).then((response) => {
+      return dispatch(generatingFile("respondent-results"))
+    })
+  }
+
+export const generateIncentivesFile =
+  (projectId: number, surveyId: number) => (dispatch: Function) => {
+    // TODO: better handle when incentives download are disabled (due to sample with IDs)
+    api.generateIncentives(projectId, surveyId).then((response) => {
+      return dispatch(generatingFile("incentives"))
+    })
+  }
+
+export const generateInteractionsFile =
+  (projectId: number, surveyId: number) => (dispatch: Function) => {
+    api.generateInteractions(projectId, surveyId).then((response) => {
+      return dispatch(generatingFile("interactions"))
+    })
+  }
+
+export const generateDispositionHistoryFile =
+  (projectId: number, surveyId: number) => (dispatch: Function) => {
+    api.generateDispositionHistory(projectId, surveyId).then((response) => {
+      return dispatch(generatingFile("disposition-history"))
+    })
+  }
+

assets/js/api.js

@@ -691,17 +691,29 @@ export const refreshDispositionHistoryLink = (projectId, surveyId) => {
   )
 }
 
-export const triggerRespondentsResultFile = (projectId, surveyId, q) => 
-  apiPostJSON(`projects/${projectId}/surveys/${surveyId}/respondents/results?${
-    (q && `&q=${encodeURIComponent(q)}`) || ""
-  }`, null, null)
-export const triggerRespondentsDispositionHistoryCSV = (projectId, surveyId) =>
+export const resultsFileUrl = (projectId, surveyId, q) =>
+  `/api/v1/projects/${projectId}/surveys/${surveyId}/respondents/results_csv${
+    (q && `?q=${encodeURIComponent(q)}`) || ""
+  }`
+export const dispositionHistoryFileUrl = (projectId, surveyId) =>
+  `/api/v1/projects/${projectId}/surveys/${surveyId}/respondents/disposition_history`
+export const incentivesFileUrl = (projectId, surveyId) =>
+  `/api/v1/projects/${projectId}/surveys/${surveyId}/respondents/incentives`
+export const interactionsFileUrl = (projectId, surveyId) =>
+  `/api/v1/projects/${projectId}/surveys/${surveyId}/respondents/interactions`
+
+export const generateResults = (projectId, surveyId, filter) =>
+  apiPostJSON(`projects/${projectId}/surveys/${surveyId}/respondents/results`, null, { q: filter })
+export const generateDispositionHistory = (projectId, surveyId) =>
   apiPostJSON(`projects/${projectId}/surveys/${surveyId}/respondents/disposition_history`, null, null)
-export const triggerRespondentsIncentivesCSV = (projectId, surveyId) =>
+export const generateIncentives = (projectId, surveyId) =>
   apiPostJSON(`projects/${projectId}/surveys/${surveyId}/respondents/incentives`, null, null)
-export const triggerRespondentsInteractionsCSV = (projectId, surveyId) =>
+export const generateInteractions = (projectId, surveyId) =>
   apiPostJSON(`projects/${projectId}/surveys/${surveyId}/respondents/interactions`, null, null)
 
+export const fetchRespondentsFilesStatus = (projectId, surveyId, filter) =>
+  apiFetch(`projects/${projectId}/surveys/${surveyId}/respondents/files?q=${filter}`).then((response) => response.json())
+
 export const startSimulation = (projectId, questionnaireId, mode) => {
   return apiPutOrPostJSONWithCallback(
     `projects/${projectId}/questionnaires/${questionnaireId}/simulation`,

assets/js/components/activity/ActivityDescription.jsx

@@ -115,6 +115,11 @@ class ActivityDescription extends Component {
               surveyName: surveyName,
               reportType: reportType,
             })
+          case "generate_file":
+            return t("Generated <i>{{surveyName}}</i> {{reportType}} file", {
+              surveyName: surveyName,
+              reportType: reportType,
+            })
           case "enable_public_link":
             return t("Enabled <i>{{surveyName}}</i> {{reportType}} link", {
               surveyName: surveyName,