[BI-1199] - Choose file format for germplasm export

src/breeding-insight/model/FileType.ts

@@ -0,0 +1,30 @@
+/*
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class FileType {
+    static xls = new FileType(".xls", "XLS");
+    static xlsx = new FileType(".xlsx", "XLSX");
+    static csv = new FileType(".csv", "CSV");
+
+    name: string;
+    id: string;
+
+    constructor(name: string, id: string) {
+        this.name = name;
+        this.id = id;
+    }
+}

src/components/germplasm/GermplasmListsTable.vue

@@ -17,6 +17,35 @@
 
 <template>
   <section id="germplasmListTableLabel">
+    <SelectModal
+        v-bind:active.sync="modalActive"
+        v-bind:title="germplasmListDownloadTitle"
+        v-bind:subtitle="germplasmListDownloadSubtitle"
+        v-bind:options="fileOptions"
+        v-on:deactivate="modalActive = false"
+        @select-change="setFileExtension"
+    >
+      <template #buttons>
+      <div class="columns">
+        <div class="column is-whole has-text-centered buttons">
+          <button
+              class="button is-primary has-text-weight-bold"
+              v-on:click="downloadList"
+          >
+            <strong>Download</strong>
+          </button>
+          <button
+              class="button"
+              v-on:click="cancelDownload"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+      </template>
+    </SelectModal>
+
+
     <ExpandableTable
       v-bind:records.sync="germplasmLists"
       v-bind:loading="this.germplasmListsLoading"
@@ -41,7 +70,7 @@
         {{ props.row.data.listOwnerName }}
       </b-table-column>
       <b-table-column  field="data.listDbId" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
-        <a href="#" v-on:click="downloadList(props.row.data.listDbId)">
+        <a href="#" v-on:click="activateExtensionSelect(props.row.data.listDbId)">
           Download
         </a>
       </b-table-column>
@@ -59,7 +88,6 @@
 
 <script lang="ts">
 import {Component, Vue, Watch} from 'vue-property-decorator'
-import WarningModal from '@/components/modals/WarningModal.vue'
 import {DownloadIcon} from 'vue-feather-icons'
 import {validationMixin} from 'vuelidate';
 import { mapGetters } from 'vuex'
@@ -74,13 +102,15 @@ import {GermplasmList} from "@/breeding-insight/model/GermplasmList";
 import {GermplasmService} from "@/breeding-insight/service/GermplasmService";
 import ExpandableTable from "@/components/tables/expandableTable/ExpandableTable.vue";
 import moment from "moment";
+import SelectModal from "@/components/modals/SelectModal.vue";
+import {FileType} from "@/breeding-insight/model/FileType";
 
 @Component({
   mixins: [validationMixin],
   components: {
     ExpandableTable,
     BaseTraitForm, BasicInputField, EmptyTableMessage, TableColumn,
-    WarningModal, DownloadIcon },
+    SelectModal, DownloadIcon },
   computed: {
     ...mapGetters([
       'activeProgram'
@@ -95,6 +125,13 @@ export default class GermplasmListsTable extends Vue {
   private germplasmLists: GermplasmList[] = [];
   private germplasmListsLoading = true;
 
+  private germplasmListDownloadTitle = 'Download Germplasm List';
+  private germplasmListDownloadSubtitle = 'File Format';
+  private modalActive: boolean = false;
+  private fileExtension: string; //todo might change to Filetype
+  private selectedListDbId: string;
+  private fileOptions = Object.values(FileType);
+
   mounted() {
     this.getGermplasmLists();
   }
@@ -124,12 +161,28 @@ export default class GermplasmListsTable extends Vue {
     this.paginationController.updatePageSize(Number(pageSize).valueOf());
   }
 
-  downloadList(listDbId: string) {
+  downloadList() {
+    this.modalActive = false;
     if (this.activeProgram) {
-      window.open(process.env.VUE_APP_BI_API_ROOT + '/v1/programs/' + this.activeProgram.id + '/germplasm/lists/' + listDbId + '/export', '_blank');
+      window.open(process.env.VUE_APP_BI_API_ROOT + '/v1/programs/' + this.activeProgram.id + '/germplasm/lists/' + this.selectedListDbId + '/export?fileExtension=' + this.fileExtension, '_blank');
     }
   }
 
+  activateExtensionSelect(listDbId: string){
+    this.modalActive = true;
+    this.selectedListDbId = listDbId;
+  }
+
+  cancelDownload(){
+    this.modalActive = false;
+    this.selectedList = "";
+    this.fileExtension = "";
+  }
+
+  setFileExtension(value){
+    this.fileExtension = value;
+  }
+
 }
 
 </script>

src/components/modals/SelectModal.vue

@@ -0,0 +1,92 @@
+<!--
+- See the NOTICE file distributed with this work for additional information
+        - regarding copyright ownership.
+-
+- Licensed under the Apache License, Version 2.0 (the "License");
+- you may not use this file except in compliance with the License.
+- You may obtain a copy of the License at
+-
+-     http://www.apache.org/licenses/LICENSE-2.0
+-
+- Unless required by applicable law or agreed to in writing, software
+- distributed under the License is distributed on an "AS IS" BASIS,
+- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+- See the License for the specific language governing permissions and
+        - limitations under the License.
+-->
+
+<template>
+  <BaseModal
+      v-bind:active.sync="active"
+      v-on:deactivate="$emit('deactivate')"
+  >
+    <div>
+      <div>
+        <article class="media">
+          <div class="media-content">
+            <div class="content">
+              <h3 class="is-5 title" :class="modalHeaderClass">
+                {{title}}
+              </h3>
+            </div>
+          </div>
+        </article>
+        <section>
+          <p class="has-text-dark has-text-weight-bold" :class="this.$modalTextClass">
+            {{ subtitle }}
+          </p>
+        </section>
+        <div class="control">
+          <template v-for="option in options">
+            <div v-bind:key="option.id">
+              <label
+                v-bind:key="option.id"
+                class="radio"
+              >
+                <input
+                  type="radio"
+                  v-bind:name="optionType"
+                  v-bind:value="option.id"
+                  v-model="checked"
+                  v-on:change="$emit('select-change', checked)"
+                >
+                {{option.name}}
+              </label>
+            </div>
+          </template>
+        </div>
+        <slot name="buttons"></slot>
+      </div>
+    </div>
+  </BaseModal>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import BaseModal from '@/components/modals/BaseModal.vue';
+
+@Component({
+  components: {BaseModal}
+})
+export default class SelectModal extends Vue {
+  @Prop()
+  active!: boolean;
+  @Prop()
+  title! : string;
+  @Prop()
+  subtitle: string;
+  @Prop()
+  options:string;
+
+  private checked: string = "";
+
+  private optionType = "optionType";
+  private modalHeaderClass: string = "modal-header";
+
+  mounted(){
+    this.checked = this.options[0].id;
+    this.$emit('select-change', this.checked);
+  }
+}
+
+</script>