getodk · sadiqkhoja · Jan 24, 2025 · Feb 6, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "@vue/cli-service": "^5.0.8",
     "@vue/compiler-sfc": "~3",
     "@vue/eslint-config-airbnb": "^7.0.0",
-    "@vue/test-utils": "^2.4.1",
+    "@vue/test-utils": "^2.4.6",
     "chai": "^5.1.1",
     "chai-as-promised": "^8.0.0",
     "comment-json": "~4",

diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
@@ -336,7 +336,17 @@ a {
   > .btn-default + .btn-default { border-left: 1px solid #ccc; }
 }
 
+.btn-outlined {
+  background-color: #fff;
+  color: $color-action-background;
+  border: 1px solid $color-action-background;
 
+  &:hover, &:focus, &:active:focus {
+    color: #fff;
+    background-color: $color-action-background;
+    &[aria-disabled="true"], &.disabled, fieldset[disabled] & { background-color: #ddd; }
+  }
+}
 
 ////////////////////////////////////////////////////////////////////////////////
 // DROPDOWN MENUS
@@ -535,6 +545,7 @@ select {
   .icon-filter {
     color: #999;
     margin-right: $margin-right-icon;
+    font-size: 20px;
   }
 }
 
@@ -911,7 +922,7 @@ becomes more complicated.
 // markRowsChanged(), markRowsDeleted()
 
 [data-mark-rows-changed="true"] { background-color: $color-highlight; }
-[data-mark-rows-changed="false"] { transition: background-color 0.6s 6s; }
+[data-mark-rows-changed="false"] { transition: background-color 0.6s; }
 
 [data-mark-rows-deleted="true"] {
   opacity: 0;
@@ -927,4 +938,30 @@ becomes more complicated.
 
 .odk-form :not(svg|*) {
   all: revert;
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// The action bar shown above the data table 
+
+.table-actions-bar {
+  background-color: $color-subpanel-background;
+  padding: 10px 20px;
+
+  .form-inline {
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+
+  .form-label {
+    height: auto;
+    cursor: pointer;
+  }
+
+  .form-group .form-control {
+    border-bottom: none;
+  }
+
+  .form-group + .form-group {
+    margin-left: 30px;
+  }
 }
diff --git a/src/components/audit/filters.vue b/src/components/audit/filters.vue
@@ -12,12 +12,12 @@ except according to the terms contained in the LICENSE file.
 <template>
   <form class="form-inline" @submit.prevent>
     <div class="form-group">
-      <span class="icon-filter"></span><span>{{ $t('common.filter') }}</span>
+      <span class="icon-filter"></span>
     </div>
     <audit-filters-action :model-value="action"
       @update:model-value="$emit('update:action', $event)"/>
     <date-range-picker :model-value="dateRange"
-      :placeholder="$t('field.dateRange')" required
+      :label="$t('field.dateRange')" required
       @update:model-value="$emit('update:dateRange', $event)"/>
   </form>
 </template>

diff --git a/src/components/audit/filters/action.vue b/src/components/audit/filters/action.vue
@@ -10,8 +10,8 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <label id="audit-filters-action" class="form-group">
-    <select class="form-control" :value="modelValue"
+  <label id="audit-filters-action" for="audit-actions" class="form-group">
+    <select id="audit-actions" ref="auditActions" class="form-control" :value="modelValue"
       @change="$emit('update:modelValue', $event.target.value)">
       <option v-for="option of options" :key="option.value"
         :class="option.htmlClass" :value="option.value">

diff --git a/src/components/audit/list.vue b/src/components/audit/list.vue
@@ -12,7 +12,9 @@ except according to the terms contained in the LICENSE file.
 <template>
   <div>
     <p class="page-body-heading">{{ $t('heading[0]') }}</p>
-    <audit-filters v-model:action="action" v-model:dateRange="dateRange"/>
+    <div class="table-actions-bar">
+      <audit-filters v-model:action="action" v-model:dateRange="dateRange"/>
+    </div>
     <audit-table/>
     <loading :state="audits.initiallyLoading"/>
     <p v-show="audits.dataExists && audits.length === 0"

diff --git a/src/components/dataset/entities.vue b/src/components/dataset/entities.vue
@@ -13,23 +13,27 @@ except according to the terms contained in the LICENSE file.
   <div id="dataset-entities">
     <page-section>
       <template #heading>
-        <span>{{ $t('resource.entities') }}</span>
-        <button v-if="project.dataExists && project.permits('entity.create')"
-          id="dataset-entities-upload-button" type="button"
-          class="btn btn-primary" @click="upload.show()">
-          <span class="icon-upload"></span>{{ $t('action.upload') }}
-        </button>
-        <template v-if="deletedEntityCount.dataExists">
-          <button v-if="canDelete && (deletedEntityCount.value > 0 || deleted)" type="button"
-            class="btn toggle-deleted-entities" :class="{ 'btn-danger': deleted, 'btn-link': !deleted }"
-            @click="toggleDeleted">
-            <span class="icon-trash"></span>{{ $tcn('action.toggleDeletedEntities', deletedEntityCount.value) }}
-            <span v-show="deleted" class="icon-close"></span>
+        <div class="dataset-entities-heading-row">
+          <button v-if="project.dataExists && project.permits('entity.create')"
+            id="dataset-entities-upload-button" type="button"
+            class="btn btn-primary" @click="upload.show()">
+            <span class="icon-upload"></span>{{ $t('upload') }}
           </button>
-        </template>
-        <odata-data-access :analyze-disabled="deleted"
-          :analyze-disabled-message="$t('analyzeDisabledDeletedData')"
-          @analyze="analyze.show()"/>
+          <template v-if="deletedEntityCount.dataExists">
+            <button v-if="canDelete && (deletedEntityCount.value > 0 || deleted)" type="button"
+              class="btn toggle-deleted-entities" :class="{ 'btn-danger': deleted, 'btn-link': !deleted }"
+              @click="toggleDeleted">
+              <span class="icon-trash"></span>{{ $tcn('action.toggleDeletedEntities', deletedEntityCount.value) }}
+              <span v-show="deleted" class="icon-close"></span>
+            </button>
+          </template>
+          <odata-data-access :analyze-disabled="deleted"
+            :analyze-disabled-message="$t('analyzeDisabledDeletedData')"
+            @analyze="analyze.show()"/>
+          <entity-download-button
+            :aria-disabled="deleted"
+            v-tooltip.aria-describedby="deleted ? $t('downloadDisabled') : null"/>
+        </div>
       </template>
       <template #body>
         <entity-list ref="list" :project-id="projectId"
@@ -54,6 +58,7 @@ import OdataDataAccess from '../odata/data-access.vue';
 import PageSection from '../page/section.vue';
 import useEntities from '../../request-data/entities';
 import useQueryRef from '../../composables/query-ref';
+import EntityDownloadButton from '../entity/download-button.vue';
 
 import { apiPaths } from '../../util/request';
 import { loadAsync } from '../../util/load-async';
@@ -68,9 +73,13 @@ export default {
     OdataDataAccess,
     EntityList,
     EntityUpload: defineAsyncComponent(loadAsync('EntityUpload')),
+    EntityDownloadButton,
     PageSection
   },
   inject: ['alert'],
+  provide() {
+    return { projectId: this.projectId, datasetName: this.datasetName };
+  },
   props: {
     projectId: {
       type: String,
@@ -155,8 +164,6 @@ export default {
 <style lang="scss">
 @import '../../assets/scss/variables';
 
-#odata-data-access { float: right; }
-
 #dataset-entities {
   .toggle-deleted-entities {
     margin-left: 8px;
@@ -175,12 +182,24 @@ export default {
     left: 12px;
     font-size: 14px;
   }
+
+  .dataset-entities-heading-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  #odata-data-access {
+    margin-left: auto;
+    font-size: initial;
+  }
 }
 </style>
 
 <i18n lang="json5">
 {
   "en": {
+    "upload": "Upload Entities",
     "alert": {
       "upload": "Success! Your Entities have been uploaded."
     },

diff --git a/src/components/date-range-picker.vue b/src/components/date-range-picker.vue
@@ -10,14 +10,15 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <label class="form-group"><!-- eslint-disable-line vuejs-accessibility/label-has-for -->
+  <label id="date-range-picker-container" for="datepicker" class="form-group">
     <!-- We use a class to indicate whether the input is required, because
     flatpickr does not support the `required` attribute:
     https://github.com/ankurk91/vue-flatpickr-component/issues/47 -->
-    <flatpickr ref="flatpickr" v-model="flatpickrValue" :config="config"
-      class="form-control" :class="{ required }"
+    <flatpickr id="datepicker" ref="flatpickr" v-model="flatpickrValue" :config="config"
+      class="form-control"
+      :class="{ required, 'flatpickr-input': true, 'has-value': modelValue.length === 2, none: modelValue.length === 0 }"
       :aria-disabled="disabled" v-tooltip.aria-describedby="disabledMessage"
-      :placeholder="requiredLabel(placeholder, required)" autocomplete="off"
+      :placeholder="$t('common.none')" autocomplete="off"
       @keydown="stopPropagationIfDisabled"
       @on-close="close"/>
     <template v-if="!required">
@@ -26,7 +27,9 @@ except according to the terms contained in the LICENSE file.
         <span aria-hidden="true">&times;</span>
       </button>
     </template>
-    <span class="form-label">{{ requiredLabel(placeholder, required) }}</span>
+    <span v-show="!disabled && (required || modelValue.length < 2)" aria-hidden="true" class="icon-angle-down">
+    </span>
+    <span class="form-label">{{ requiredLabel(label, required) }}</span>
   </label>
 </template>
 
@@ -70,7 +73,7 @@ export default {
       type: Boolean,
       default: false
     },
-    placeholder: {
+    label: {
       type: String,
       required: true
     },
@@ -187,13 +190,34 @@ export default {
 }
 
 .form-inline .flatpickr-input {
-  // Leave space for the .close button.
-  width: 205px;
-  &.required { width: 193px };
+  width: 87px;
 
-  &:lang(ja) {
+  &.has-value {
+    // Leave space for the .close button.
+    width: 207px;
+    &.required { width: 193px };
+  }
+
+  &.has-value:lang(ja) {
     width: 252px;
     &.required { width: 240px; }
   }
+
+  &.none {
+    font-style: italic;
+  }
+}
+
+#date-range-picker-container {
+  .icon-angle-down {
+    font-size: 16px;
+    color: #555555;
+    font-weight: bold;
+    vertical-align: -4px;
+  }
+
+  .form-label {
+    transform: translateY(2px);
+  }
 }
 </style>