Add "State and actions" column to submissions table

getodk · Feb 26, 2021 · 43ceaa0 · 43ceaa0
1 parent 7f369d0
commit 43ceaa0
Show file tree

Hide file tree

Showing 36 changed files with 1,459 additions and 881 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -69,6 +69,7 @@ module.exports = {
  math: 'always'
  }],
  'vue/max-attributes-per-line': 'off',
+ 'vue/require-default-prop': 'off',
  'vue/singleline-html-element-content-newline': 'off'
  }
 };
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
@@ -45,24 +45,7 @@ pre {
 ////////////////////////////////////////////////////////////////////////////////
 // ICONS
 
-.btn, a {
- .caret { margin-left: 6px; }
-}
-
-[class^="icon-"], [class*=" icon-"] {
- vertical-align: -1px;
-
- .btn > &:first-child, a > &:first-child {
- margin-right: $margin-right-icon;
- + .caret { margin-left: 0; }
- }
-
- a > &:first-child {
- // Using inline-block so that the icon is not underlined even when the link
- // has `text-decoration: underline`.
- display: inline-block;
- }
-}
+[class^="icon-"], [class*=" icon-"] { vertical-align: -1px; }
 
 /* Bootstrap has an .icon-bar class that is unrelated to IcoMoon, but our
 IcoMoon styles end up applying to it, because our IcoMoon selectors select on
@@ -91,6 +74,26 @@ class. */
 ////////////////////////////////////////////////////////////////////////////////
 // LINKS AND BUTTONS
 
+.btn, a {
+ .caret { margin-left: 6px; }
+
+
+ > [class^="icon-"], > [class*=" icon-"] {
+ &:first-child {
+ // There should not be white space between an icon and text content that
+ // follows it. For a link in particular, the underlining will be off if
+ // there is white space.
+ margin-right: $margin-right-icon;
+
+ + .caret { margin-left: 0; }
+ }
+ }
+}
+
+.btn, .btn-group.open .dropdown-toggle {
+ &:focus { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18); }
+}
+
 .btn {
  border: none;
  border-radius: 2px;
@@ -101,45 +104,38 @@ class. */
  overflow: hidden;
  position: relative;
 
- &:focus { outline: none; }
-}
-
-.btn-group.open .dropdown-toggle { box-shadow: none; }
-.btn, .btn-group.open .dropdown-toggle {
- &:focus { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18); }
+ &:focus, &:active:focus { outline: none; }
 }
 
 .btn-primary {
  background-color: $color-action-background;
+ &[disabled] { background-color: $color-action-background-disabled; }
 
- &:hover, &:focus {
+ &:hover, &:focus, &:active:focus {
  background-color: $color-action-background-hover;
- }
-
- &[disabled] {
- &, &:hover, &:focus {
- background-color: $color-action-background-disabled;
- }
+ &[disabled] { background-color: $color-action-background-disabled; }
  }
 }
 
-.btn-secondary {
- @extend .btn-primary;
+.btn-default {
+ background-color: #ddd;
 
- &, &:hover, &:focus {
- color: #fff;
+ &:hover, &:focus, &:active:focus {
+ background-color: #ccc;
+ &[disabled] { background-color: #ddd; }
+ }
+
+ > [class^="icon-"], > [class*=" icon-"] {
+ &:first-child { color: $color-action-background; }
  }
 }
 
 .btn-danger {
  background-color: $color-danger;
 
- &:hover, &:focus {
+ &:hover, &:focus, &:active:focus {
  background-color: $color-danger-dark;
-
- &[disabled] {
- background-color: $color-danger;
- }
+ &[disabled] { background-color: $color-danger; }
  }
 }
 
@@ -178,6 +174,14 @@ a {
  &.btn { color: #fff; }
  }
 
+ > [class^="icon-"], > [class*=" icon-"] {
+ &:first-child {
+ // Using inline-block so that the icon is not underlined even when the
+ // link has `text-decoration: underline`.
+ display: inline-block;
+ }
+ }
+
  > .icon-angle-right:last-child { color: $color-accent-primary; }
 }
 
@@ -188,12 +192,13 @@ a {
  background-clip: content-box;
  box-shadow: none;
  }
-
- &:active:focus {
- outline: none;
- }
 }
 
+.btn-group.open .dropdown-toggle { box-shadow: none; }
+
+.btn-group > .btn:focus { box-shadow: none; }
+.btn-group .btn + .btn { margin-left: 0; }
+
 
 
 ////////////////////////////////////////////////////////////////////////////////

diff --git a/src/components/form-draft/testing.vue b/src/components/form-draft/testing.vue
@@ -42,8 +42,8 @@ except according to the terms contained in the LICENSE file.
  </div>
 
  <loading :state="$store.getters.initiallyLoading(['keys'])"/>
- <submission-list v-show="keys != null" :base-url="baseUrl"
- :form-version="formDraft"/>
+ <submission-list v-show="keys != null" :project-id="projectId"
+ :xml-form-id="xmlFormId" draft/>
  </div>
 </template>
 
@@ -111,7 +111,7 @@ export default {
  this.$store.dispatch('get', [{
  // We do not reconcile `keys` and formDraft.keyId.
  key: 'keys',
- url: apiPaths.formDraftSubmissionKeys(this.projectId, this.xmlFormId)
+ url: apiPaths.submissionKeys(this.projectId, this.xmlFormId, true)
  }]).catch(noop);
  },
  reconcileSubmissionCount() {

diff --git a/src/components/form-version/def-dropdown.vue b/src/components/form-version/def-dropdown.vue
@@ -23,13 +23,13 @@ except according to the terms contained in the LICENSE file.
  </li>
  <li>
  <!-- '(.xml)' may be an issue for an RTL locale. -->
- <a :href="defPath('xml')" :download="`${version.xmlFormId}.xml`">
+ <a :href="defPath('.xml')" :download="`${version.xmlFormId}.xml`">
  {{ $t('action.downloadXForm') }} (.xml)
  </a>
  </li>
  <li v-if="version.excelContentType != null">
  <a :href="defPath(excelExtension)">
- {{ $t('action.downloadXlsForm') }} (.{{ excelExtension }})
+ {{ $t('action.downloadXlsForm') }} ({{ excelExtension }})
  </a>
  </li>
  </ul>
@@ -55,8 +55,8 @@ export default {
  },
  excelExtension() {
  return this.version.excelContentType === 'application/vnd.ms-excel'
- ? 'xls'
- : 'xlsx';
+ ? '.xls'
+ : '.xlsx';
  }
  },
  methods: {
@@ -69,7 +69,7 @@ export default {
  viewXml() {
  this.$store.dispatch('get', [{
  key: 'formVersionXml',
- url: this.defPath('xml')
+ url: this.defPath('.xml')
  }]).catch(noop);
  this.$emit('view-xml');
  }

diff --git a/src/components/form/submissions.vue b/src/components/form/submissions.vue
@@ -22,12 +22,10 @@ except according to the terms contained in the LICENSE file.
  @analyze="showModal('analyze')"/>
  </template>
  <template #body>
- <submission-list :base-url="baseUrl" :form-version="form"
- filterable shows-submitter/>
+ <submission-list :project-id="projectId" :xml-form-id="xmlFormId"/>
  </template>
  </page-section>
- <submission-analyze :state="analyze.state" :base-url="baseUrl"
- @hide="hideModal('analyze')"/>
+ <submission-analyze v-bind="analyze" @hide="hideModal('analyze')"/>
  </div>
 </template>
 
@@ -80,9 +78,6 @@ export default {
  rendersEnketoFill() {
  return this.project != null &&
  this.project.permits('submission.create') && this.form != null;
- },
- baseUrl() {
- return apiPaths.form(this.projectId, this.xmlFormId);
  }
  },
  created() {

diff --git a/src/components/project/enable-encryption.vue b/src/components/project/enable-encryption.vue
@@ -10,8 +10,9 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
- <modal id="project-enable-encryption" :state="state" backdrop
- :hideable="!awaitingResponse" @hide="$emit(success ? 'success' : 'hide')">
+ <modal id="project-enable-encryption" :state="state"
+ :hideable="!awaitingResponse" backdrop
+ @hide="$emit(success ? 'success' : 'hide')">
  <template #title>{{ $t('title') }}</template>
  <template #body>
  <template v-if="step === 0">
@@ -47,6 +48,10 @@ except according to the terms contained in the LICENSE file.
  <span class="icon-close"></span>
  <p>{{ $t('steps[0].introduction[0][5]') }}</p>
  </div>
+ <div class="info-item">
+ <span class="icon-close"></span>
+ <p>{{ $t('steps[0].introduction[0][6]') }}</p>
+ </div>
  </div>
  <div class="info-block">
  <p>{{ $t('steps[0].introduction[1][0]') }}</p>
@@ -259,7 +264,8 @@ export default {
  "To use the automatic Central encryption process on these Forms, remove the {base64RsaPublicKey} configuration."
  ],
  "You will no longer be able to preview Submission data online.",
- "You will no longer be able to connect to data over OData."
+ "You will no longer be able to connect to data over OData.",
+ "You will no longer be able to edit Submissions in your web browser."
  ],
  [
  "In addition, the following are true in this version of ODK Central:",

diff --git a/src/components/spinner.vue b/src/components/spinner.vue
@@ -73,7 +73,7 @@ $spinner-width: 3px;
  height: $spinner-size;
  width: $spinner-size;
 
- .btn-primary &, .btn-secondary &, .btn-danger & {
+ .btn-primary &, .btn-danger & {
  border-color: #fff;
  }
 
@@ -82,11 +82,6 @@ $spinner-width: 3px;
  0 0 6px 3px $color-action-background-disabled inset;
  }
 
- .btn-secondary & {
- box-shadow: 0 0 20px 10px $color-action-background-disabled,
- 0 0 6px 3px $color-action-background-disabled inset;
- }
-
  .btn-danger & {
  box-shadow: 0 0 20px 10px $color-danger,
  0 0 6px 3px $color-danger inset;
@@ -112,11 +107,6 @@ $spinner-width: 3px;
  border-top-color: $color-action-background-disabled;
  }
 
- .btn-secondary & {
- border-right-color: $color-action-background-disabled;
- border-top-color: $color-action-background-disabled;
- }
-
  .btn-danger & {
  border-right-color: $color-danger;
  border-top-color: $color-danger;

diff --git a/src/components/submission/analyze.vue b/src/components/submission/analyze.vue
@@ -40,7 +40,7 @@ except according to the terms contained in the LICENSE file.
  </ul>
  </div>
  <div id="submission-analyze-odata-url" class="modal-introduction">
- <selectable>{{ oDataUrl }}</selectable>
+ <selectable>{{ odataUrl }}</selectable>
  </div>
  <div id="submission-analyze-tool-help" class="modal-introduction">
  <i18n v-if="tool === 'microsoft'" tag="p" path="help.microsoft.full">
@@ -93,27 +93,26 @@ except according to the terms contained in the LICENSE file.
 import Modal from '../modal.vue';
 import Selectable from '../selectable.vue';
 
+import { apiPaths } from '../../util/request';
+import { requestData } from '../../store/modules/request';
+
 export default {
  name: 'SubmissionAnalyze',
  components: { Modal, Selectable },
  props: {
- baseUrl: {
- type: String,
- required: true
- },
- state: {
- type: Boolean,
- default: false
- }
+ state: Boolean
  },
  data() {
  return {
  tool: 'microsoft'
  };
  },
  computed: {
- oDataUrl() {
- return `${window.location.origin}${this.baseUrl}.svc`;
+ ...requestData(['form']),
+ odataUrl() {
+ if (this.form == null) return '';
+ const path = apiPaths.odataSvc(this.form.projectId, this.form.xmlFormId);
+ return `${window.location.origin}${path}`;
  }
  },
  watch: {