merge: #688 from ginger/download-validation

ckanext/nhm/theme/assets/scripts/apps/search/src/App.vue

@@ -33,7 +33,7 @@
  </div>
  <div class="text-right nowrap" style="margin-left: 10px">
  <a
- href="#"
+ href="javascript:void(0);"
  @click="showAdvanced = !showAdvanced"
  class="collapse-to-icon"
  >
@@ -45,7 +45,11 @@
  </a>
  </div>
  <div class="text-right nowrap" style="margin-left: 10px">
- <a href="#" @click="toggleQuery" class="collapse-to-icon">
+ <a
+ href="javascript:void(0);"
+ @click="toggleQuery"
+ class="collapse-to-icon"
+ >
  Query
  <i
  class="inline-icon-right fas"
@@ -56,13 +60,17 @@
  </a>
  </div>
  <div class="text-right nowrap" style="margin-left: 10px">
- <a href="#" @click="reset" class="collapse-to-icon">
+ <a
+ href="javascript:void(0);"
+ @click="reset"
+ class="collapse-to-icon"
+ >
  Reset <i class="inline-icon-right fas fa-trash"></i>
  </a>
  </div>
  <div class="text-right nowrap" style="margin-left: 10px">
  <a
- href="#"
+ href="javascript:void(0);"
  @click="showResources = !showResources"
  id="btnResources"
  class="collapse-to-icon"

ckanext/nhm/theme/assets/scripts/apps/search/src/components/FilterGroup.vue

@@ -8,7 +8,7 @@
  >
  <a
  class="group-type"
- href="#"
+ href="javascript:void(0);"
  @click.self="changeGroupType"
  v-if="nestLevel > 0"
  >

ckanext/nhm/theme/assets/scripts/apps/search/src/components/ResourceList.vue

@@ -13,7 +13,7 @@
  </div>
  <span v-for="(pkg, index) in packageList" v-bind:key="pkg.id">
  <a
- href="#"
+ href="javascript:void(0);"
  :id="pkg.id"
  :value="pkg.id"
  title="alt+click to select only this dataset"

ckanext/nhm/theme/assets/scripts/apps/search/src/components/Results.vue

@@ -5,9 +5,11 @@
  <h3>Something went wrong!</h3>
  <p>
  Please
- <a href="#" @click="$emit('show-query')">check your query</a>
+ <a href="javascript:void(0);" @click="$emit('show-query')"
+ >check your query</a
+ >
  ,
- <a href="#" @click="$emit('reset')">try resetting</a>
+ <a href="javascript:void(0);" @click="$emit('reset')">try resetting</a>
  , and
  <a href="/contact">contact us</a>
  if you think you've found a problem.
@@ -48,7 +50,7 @@
  </ul>
  <div class="text-right">
  <a
- href="#"
+ href="javascript:void(0);"
  @click="showFields = !showFields"
  :id="'show-fields-' + _uid"
  v-if="view === 'Table'"
@@ -91,7 +93,7 @@
  <ul class="pagination">
  <li v-if="page > 0">
  <a
- href="#"
+ href="javascript:void(0);"
  aria-label="Show first results page"
  @click="runSearch(0)"
  >
@@ -100,21 +102,24 @@
  </li>
  <li v-if="page > 0">
  <a
- href="#"
+ href="javascript:void(0);"
  aria-label="Show previous results page"
  @click="runSearch(page - 1)"
  >
  {{ page }}
  </a>
  </li>
  <li class="active">
- <a href="#" aria-label="Go to the top of this results page">
+ <a
+ href="javascript:void(0);"
+ aria-label="Go to the top of this results page"
+ >
  {{ page + 1 }}
  </a>
  </li>
  <li v-if="_after.length > page">
  <a
- href="#"
+ href="javascript:void(0);"
  aria-label="Show next results page"
  @click="runSearch(page + 1)"
  >

ckanext/nhm/theme/assets/scripts/apps/search/src/components/popups/Cite.vue

@@ -39,7 +39,7 @@
  </div>
  <div class="text-right">
  <a
- href="#"
+ href="javascript:void(0);"
  @click="getDOI(doiForm)"
  class="btn btn-primary"
  v-if="doi === null"

ckanext/nhm/theme/assets/scripts/apps/search/src/components/popups/Download.vue

@@ -23,14 +23,20 @@
  ><i class="fas fa-hourglass-half"></i>
  Download status
  </a>
- <a href="#" class="btn btn-primary text-right" @click="resetPopup"
+ <a
+ href="javascript:void(0);"
+ class="btn btn-primary text-right"
+ @click="resetPopup"
  ><i class="fas fa-undo-alt"></i>
  New download
  </a>
  </div>
  </div>
- <p class="alert-error" v-if="status.download.failed">
- The download request failed. Please try again later.
+ <p
+ class="alert-error"
+ v-if="status.download.failed || formErrors.length > 0"
+ >
+ {{ errorMessage }}
  </p>
  <div v-if="download === null">
  <div class="form-group">
@@ -250,7 +256,10 @@
  </p>
  </div>
  <div class="text-right" v-if="download === null">
- <a href="#" class="btn btn-primary text-right" @click="submitForm"
+ <a
+ href="javascript:void(0);"
+ class="btn btn-primary text-right"
+ @click="submitForm"
  ><i
  class="fas"
  :class="
@@ -275,6 +284,7 @@ export default {
  extends: BasePopup,
  data: function () {
  return {
+ formErrors: [],
  downloadForm: {
  file: {
  format: 'csv',
@@ -332,6 +342,13 @@ export default {
  return `/status/download/${this.downloadId}`;
  }
  },
+ errorMessage() {
+ if (this.formErrors.length === 0) {
+ return 'The download request failed. Please try again later.';
+ } else {
+ return this.formErrors.join('; ');
+ }
+ },
  },
  methods: {
  ...mapActions('results', ['getDownload', 'resetDownload']),
@@ -381,7 +398,34 @@ export default {
 
  this.$set(this.downloadForm.notifier, 'type_args', typeArgs);
  },
+ validateForm() {
+ this.formErrors = [];
+ if (this.downloadForm.notifier.type === 'email') {
+ if (
+ !this.downloadForm.notifier.type_args ||
+ !this.downloadForm.notifier.type_args.emails
+ ) {
+ this.formErrors.push('Email address must be provided');
+ } else {
+ let emails = this.downloadForm.notifier.type_args.emails
+ .split(',')
+ .map(trim);
+ let emailRegex =
+ /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+ emails.forEach((e) => {
+ if (!emailRegex.test(e)) {
+ this.formErrors.push(`${e} is not a valid email address`);
+ }
+ });
+ }
+ }
+ return this.formErrors.length === 0;
+ },
  submitForm() {
+ if (!this.validateForm()) {
+ return;
+ }
+
  // any pre-submission processing goes here
  if (this.downloadForm.file.format === 'dwc') {
  if (this.downloadForm.file.format_args.core_extension_name === 'none') {

ckanext/nhm/theme/assets/scripts/apps/search/src/components/popups/Popup.vue

@@ -10,7 +10,12 @@
  <slot v-on:close-popup="endPopup" v-on:open-popup="startPopup"></slot>
  </div>
  </transition>
- <a href="#" @click="togglePopup" :class="{ btn: isButton }" :id="popupId">
+ <a
+ href="javascript:void(0);"
+ @click="togglePopup"
+ :class="{ btn: isButton }"
+ :id="popupId"
+ >
  <i class="fas" :class="icon"></i>{{ label }}
  </a>
  </div>