feat: Filter Storage Mode Responses by Submission Id

src/app/controllers/encrypt-submissions.server.controller.js

@@ -202,15 +202,25 @@ exports.saveResponseToDb = function (req, res, next) {
  */
 exports.getMetadata = function (req, res) {
   let pageSize = 10
-  let { page } = req.query || {}
+  let { page, filterBySubmissionRefId } = req.query || {}
   let numToSkip = parseInt(page - 1 || 0) * pageSize
 
+  let matchClause = {
+    form: req.form._id,
+    submissionType: 'encryptSubmission',
+  }
+
+  if (filterBySubmissionRefId) {
+    if (mongoose.Types.ObjectId.isValid(filterBySubmissionRefId)) {
+      matchClause._id = mongoose.Types.ObjectId(filterBySubmissionRefId)
+    } else {
+      return res.status(HttpStatus.OK).send({ metadata: [], count: 0 })
+    }
+  }
+
   Submission.aggregate([
     {
-      $match: {
-        form: req.form._id,
-        submissionType: 'encryptSubmission',
-      },
+      $match: matchClause,
     },
     {
       $sort: { created: -1 },

src/public/modules/forms/admin/controllers/view-responses.client.controller.js

@@ -38,6 +38,8 @@ function ViewResponsesController(
   vm.isEncryptResponseMode = vm.myform.responseMode === responseModeEnum.ENCRYPT
   vm.encryptionKey = null // will be set to an instance of EncryptionKey when form is unlocked successfully
   vm.csvDownloading = false // whether CSV export is in progress
+  vm.filterBySubmissionRefId = '' // whether to filter submissions by a specific ID
+  vm.filterBySubmissionRefIdTextbox = ''
 
   // Three views:
   // 1 - Unlock view for verifying form password
@@ -236,12 +238,15 @@ function ViewResponsesController(
     }
   })
 
+  vm.filterBySubmissionChanged = function () {
+    vm.filterBySubmissionRefId = vm.filterBySubmissionRefIdTextbox
+    vm.tableParams.reload()
+  }
+
   // Called by child directive unlockResponsesForm after key is verified to get responses
-  vm.loadResponses = function (formPassword) {
-    vm.formPassword = formPassword
+  vm.loadResponses = function () {
     vm.currentView = 2
     vm.loading = true
-
     vm.tableParams = new NgTableParams(
       {
         page: 1, // show first page
@@ -252,6 +257,7 @@ function ViewResponsesController(
           let { page } = params.url()
           return Submissions.getMetadata({
             formId: vm.myform._id,
+            filterBySubmissionRefId: vm.filterBySubmissionRefId,
             page,
           })
             .then((data) => {

src/public/modules/forms/admin/views/view-responses.client.view.html

@@ -31,7 +31,9 @@
 
   <!-- Storage Mode -->
   <div ng-if="!vm.loading && vm.isEncryptResponseMode">
-    <div ng-if="vm.responsesCount === 0">
+    <div
+      ng-if="vm.currentView === 1 && vm.responsesCount === 0 && vm.filterBySubmissionRefId === ''"
+    >
       <div class="flex-column">
         <img
           id="no-responses"
@@ -64,17 +66,28 @@
       >
       </verify-secret-key-directive>
     </div>
-    <div ng-if="vm.responsesCount > 0 && vm.currentView === 2">
+    <div ng-if="vm.currentView === 2">
       <div class="flex-row">
-        <div class="response-stats">
+        <div class="col-md-12 response-stats">
           <span class="stats-text">
             <span
               ><span class="stats">{{vm.responsesCount}}</span> response(s) to
               date</span
             >
           </span>
         </div>
-        <div class="datepicker-export-container">
+      </div>
+      <div class="flex-row">
+        <div class="col-md-6">
+          <input
+            class="input-custom input-medium"
+            ng-model="vm.filterBySubmissionRefIdTextbox"
+            ng-change="vm.filterBySubmissionChanged()"
+            ng-model-options="{ debounce: 200 }"
+            placeholder="Filter by Submission Ref No."
+          />
+        </div>
+        <div class="datepicker-export-container col-md-6">
           <date-range-picker-directive
             class="datepicker-container"
             ng-model="vm.datePicker.date"
@@ -87,7 +100,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-md-12">
+        <div ng-if="vm.responsesCount > 0" class="col-md-12">
           <table class="table" ng-table="vm.tableParams" show-filter="false">
             <tr ng-repeat="row in $data" ng-click="vm.rowOnClick($index)">
               <td
@@ -110,6 +123,21 @@
             </tr>
           </table>
         </div>
+        <div
+          ng-if="vm.responsesCount === 0 && vm.filterBySubmissionRefId !== ''"
+        >
+          <div class="flex-column">
+            <img
+              ng-src="/public/modules/core/img/error-illustration.svg"
+              id="no-responses"
+            />
+            <div class="title">No results found</div>
+            <div class="subtitle">
+              Did you enter the right reference number? We can't seem to find
+              the response.
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div

src/public/modules/forms/services/submissions.client.factory.js

@@ -143,10 +143,14 @@ function SubmissionsFactory(
     },
     getMetadata: function (params) {
       const deferred = $q.defer()
-      const resUrl = `${fixParamsToUrl(params, submitAdminUrl)}/metadata?page=${
+      let resUrl = `${fixParamsToUrl(params, submitAdminUrl)}/metadata?page=${
         params.page
       }`
 
+      if (params.filterBySubmissionRefId) {
+        resUrl += `&filterBySubmissionRefId=${params.filterBySubmissionRefId}`
+      }
+
       $http.get(resUrl).then(
         function (response) {
           deferred.resolve(response.data)