From b432f8f5176f5364ac6435c588b1b3e4a2c0691c Mon Sep 17 00:00:00 2001
From: HMS17 <84345306+HMS17@users.noreply.github.com>
Date: Tue, 21 Jun 2022 14:42:48 -0400
Subject: [PATCH 1/7] [BI-1199] - Modal file selection, first pass

---
 src/assets/scss/main.scss                     |  5 +
 src/breeding-insight/model/FileType.ts        | 33 +++++++
 .../germplasm/GermplasmListsTable.vue         | 62 ++++++++++++-
 src/components/modals/SelectModal.vue         | 92 +++++++++++++++++++
 4 files changed, 187 insertions(+), 5 deletions(-)
 create mode 100644 src/breeding-insight/model/FileType.ts
 create mode 100644 src/components/modals/SelectModal.vue

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 611cc89fc..ca82e91e2 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -677,4 +677,9 @@ th.activesort.sortcolumn, th.sortcolumn:hover {
       padding-bottom: 0;
     }
   }
+}
+
+.modal-radio {
+  display:block;
+  vertical-align: middle;
 }
\ No newline at end of file
diff --git a/src/breeding-insight/model/FileType.ts b/src/breeding-insight/model/FileType.ts
new file mode 100644
index 000000000..830339a8a
--- /dev/null
+++ b/src/breeding-insight/model/FileType.ts
@@ -0,0 +1,33 @@
+/*
+ * 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 {
+    //todo check if all properties needed
+    static xls = new FileType("xls", ".xls", "application/vnd.ms-excel");
+    static xlsx = new FileType("xlsx", ".xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
+    static csv = new FileType("csv", ".csv", "text/csv");
+
+    name: string;
+    extension: string;
+    mimeType: string;
+
+    constructor(name: string, extension: string, mimeType: string) {
+        this.name = name;
+        this.extension = extension;
+        this.mimeType = mimeType;
+    }
+}
\ No newline at end of file
diff --git a/src/components/germplasm/GermplasmListsTable.vue b/src/components/germplasm/GermplasmListsTable.vue
index 37baa1fcc..db870fa73 100644
--- a/src/components/germplasm/GermplasmListsTable.vue
+++ b/src/components/germplasm/GermplasmListsTable.vue
@@ -17,6 +17,33 @@
 
 <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"
+    >
+      <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>
+    </SelectModal>
+
+
     <ExpandableTable
       v-bind:records.sync="germplasmLists"
       v-bind:loading="this.germplasmListsLoading"
@@ -38,7 +65,7 @@
         {{ formatDate(props.row.data.dateCreated) }}
       </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>
@@ -56,7 +83,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'
@@ -75,13 +101,15 @@ import {
 } from "@/store/mutation-types";
 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'
@@ -96,6 +124,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();
   }
@@ -131,12 +166,29 @@ 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/' + this.fileExtension, '_blank');
+      window.fileExtension = this.fileExtension; //todo see if this works, else use hash
     }
   }
 
+  activateExtensionSelect(listDbId: string){
+    this.modalActive = true;
+    this.selectedListDbId = listDbId;
+  }
+
+  cancelDownload(){
+    this.modalActive = false;
+    this.selectedList = "";
+    this.fileExtension = "";
+  }
+
+  setFileExtension(value){
+    this.fileExtension = value;
+  }
+
 }
 
 </script>
diff --git a/src/components/modals/SelectModal.vue b/src/components/modals/SelectModal.vue
new file mode 100644
index 000000000..f55fc3fd9
--- /dev/null
+++ b/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">
+            <label
+                v-bind:key="option.name"
+                class="radio modal-radio"
+            >
+              <input
+                  type="radio"
+                  v-bind:name="optionType"
+                  v-bind:value="option.name"
+                  v-model="checked"
+                  v-on:change="$emit('select-change', checked)"
+              >
+              {{option.name}}
+            </label>
+          </template>
+        </div>
+        <slot></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].name;
+    this.$emit('select-change', this.checked);
+  }
+
+  //TODO utilize id instead of name in places?
+}
+
+</script>
\ No newline at end of file

From e4d0527aea5943263d6dd0a890537b7c9b81da26 Mon Sep 17 00:00:00 2001
From: HMS17 <84345306+HMS17@users.noreply.github.com>
Date: Tue, 21 Jun 2022 14:56:28 -0400
Subject: [PATCH 2/7] [BI-1199] - Modal file selection fixes

---
 src/assets/scss/main.scss             |  5 -----
 src/components/modals/SelectModal.vue | 16 +++++++++-------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index ca82e91e2..611cc89fc 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -677,9 +677,4 @@ th.activesort.sortcolumn, th.sortcolumn:hover {
       padding-bottom: 0;
     }
   }
-}
-
-.modal-radio {
-  display:block;
-  vertical-align: middle;
 }
\ No newline at end of file
diff --git a/src/components/modals/SelectModal.vue b/src/components/modals/SelectModal.vue
index f55fc3fd9..5a7b7b81a 100644
--- a/src/components/modals/SelectModal.vue
+++ b/src/components/modals/SelectModal.vue
@@ -38,19 +38,21 @@
         </section>
         <div class="control">
           <template v-for="option in options">
-            <label
+            <div v-bind:key="option.name">
+              <label
                 v-bind:key="option.name"
-                class="radio modal-radio"
-            >
-              <input
+                class="radio"
+              >
+                <input
                   type="radio"
                   v-bind:name="optionType"
                   v-bind:value="option.name"
                   v-model="checked"
                   v-on:change="$emit('select-change', checked)"
-              >
-              {{option.name}}
-            </label>
+                >
+                {{option.name}}
+              </label>
+            </div>
           </template>
         </div>
         <slot></slot>

From 0b171937f8da4856d7ce6110aa8f53e8ef1b2067 Mon Sep 17 00:00:00 2001
From: HMS17 <84345306+HMS17@users.noreply.github.com>
Date: Wed, 22 Jun 2022 11:50:49 -0400
Subject: [PATCH 3/7] [BI-1199] - Enable csv and xls export

---
 src/breeding-insight/model/FileType.ts | 10 ++++++----
 src/components/modals/SelectModal.vue  | 10 ++++------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/breeding-insight/model/FileType.ts b/src/breeding-insight/model/FileType.ts
index 830339a8a..305194a44 100644
--- a/src/breeding-insight/model/FileType.ts
+++ b/src/breeding-insight/model/FileType.ts
@@ -17,17 +17,19 @@
 
 export class FileType {
     //todo check if all properties needed
-    static xls = new FileType("xls", ".xls", "application/vnd.ms-excel");
-    static xlsx = new FileType("xlsx", ".xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
-    static csv = new FileType("csv", ".csv", "text/csv");
+    static xls = new FileType("xls", ".xls", "application/vnd.ms-excel", "XLS");
+    static xlsx = new FileType("xlsx", ".xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "XLSX");
+    static csv = new FileType("csv", ".csv", "text/csv", "CSV");
 
     name: string;
     extension: string;
     mimeType: string;
+    id: string;
 
-    constructor(name: string, extension: string, mimeType: string) {
+    constructor(name: string, extension: string, mimeType: string, id: string) {
         this.name = name;
         this.extension = extension;
         this.mimeType = mimeType;
+        this.id = id;
     }
 }
\ No newline at end of file
diff --git a/src/components/modals/SelectModal.vue b/src/components/modals/SelectModal.vue
index 5a7b7b81a..07dacd269 100644
--- a/src/components/modals/SelectModal.vue
+++ b/src/components/modals/SelectModal.vue
@@ -38,15 +38,15 @@
         </section>
         <div class="control">
           <template v-for="option in options">
-            <div v-bind:key="option.name">
+            <div v-bind:key="option.id">
               <label
-                v-bind:key="option.name"
+                v-bind:key="option.id"
                 class="radio"
               >
                 <input
                   type="radio"
                   v-bind:name="optionType"
-                  v-bind:value="option.name"
+                  v-bind:value="option.id"
                   v-model="checked"
                   v-on:change="$emit('select-change', checked)"
                 >
@@ -84,11 +84,9 @@ export default class SelectModal extends Vue {
   private modalHeaderClass: string = "modal-header";
 
   mounted(){
-    this.checked = this.options[0].name;
+    this.checked = this.options[0].id;
     this.$emit('select-change', this.checked);
   }
-
-  //TODO utilize id instead of name in places?
 }
 
 </script>
\ No newline at end of file

From dfcfce6041c9e1666fb34415df671f96830b60ef Mon Sep 17 00:00:00 2001
From: HMS17 <84345306+HMS17@users.noreply.github.com>
Date: Wed, 22 Jun 2022 17:02:37 -0400
Subject: [PATCH 4/7] [BI-1199] - Small cleanup

---
 src/breeding-insight/model/FileType.ts | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/breeding-insight/model/FileType.ts b/src/breeding-insight/model/FileType.ts
index 305194a44..d24529c68 100644
--- a/src/breeding-insight/model/FileType.ts
+++ b/src/breeding-insight/model/FileType.ts
@@ -16,20 +16,15 @@
  */
 
 export class FileType {
-    //todo check if all properties needed
-    static xls = new FileType("xls", ".xls", "application/vnd.ms-excel", "XLS");
-    static xlsx = new FileType("xlsx", ".xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "XLSX");
-    static csv = new FileType("csv", ".csv", "text/csv", "CSV");
+    static xls = new FileType(".xls", "XLS");
+    static xlsx = new FileType(".xlsx", "XLSX");
+    static csv = new FileType(".csv", "CSV");
 
     name: string;
-    extension: string;
-    mimeType: string;
     id: string;
 
-    constructor(name: string, extension: string, mimeType: string, id: string) {
+    constructor(name: string, id: string) {
         this.name = name;
-        this.extension = extension;
-        this.mimeType = mimeType;
         this.id = id;
     }
 }
\ No newline at end of file

From 52bb498b0c8434630eb81e4dffae534b951abf62 Mon Sep 17 00:00:00 2001
From: HMS17 <84345306+HMS17@users.noreply.github.com>
Date: Wed, 22 Jun 2022 17:20:46 -0400
Subject: [PATCH 5/7] [BI-1199] - remove todo

---
 src/components/germplasm/GermplasmListsTable.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/germplasm/GermplasmListsTable.vue b/src/components/germplasm/GermplasmListsTable.vue
index db870fa73..752fd3530 100644
--- a/src/components/germplasm/GermplasmListsTable.vue
+++ b/src/components/germplasm/GermplasmListsTable.vue
@@ -170,7 +170,6 @@ export default class GermplasmListsTable extends Vue {
     this.modalActive = false;
     if (this.activeProgram) {
       window.open(process.env.VUE_APP_BI_API_ROOT + '/v1/programs/' + this.activeProgram.id + '/germplasm/lists/' + this.selectedListDbId + '/export/' + this.fileExtension, '_blank');
-      window.fileExtension = this.fileExtension; //todo see if this works, else use hash
     }
   }
 

From 5204a39edd4f7ebe0eb3f6a342f79554975c2600 Mon Sep 17 00:00:00 2001
From: HMS17 <84345306+HMS17@users.noreply.github.com>
Date: Fri, 24 Jun 2022 18:21:35 -0400
Subject: [PATCH 6/7] [BI-1199] - Code review fixes 1

---
 src/components/germplasm/GermplasmListsTable.vue | 2 ++
 src/components/modals/SelectModal.vue            | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/germplasm/GermplasmListsTable.vue b/src/components/germplasm/GermplasmListsTable.vue
index 752fd3530..1c50fb7b2 100644
--- a/src/components/germplasm/GermplasmListsTable.vue
+++ b/src/components/germplasm/GermplasmListsTable.vue
@@ -25,6 +25,7 @@
         v-on:deactivate="modalActive = false"
         @select-change="setFileExtension"
     >
+      <template #buttons>
       <div class="columns">
         <div class="column is-whole has-text-centered buttons">
           <button
@@ -41,6 +42,7 @@
           </button>
         </div>
       </div>
+      </template>
     </SelectModal>
 
 
diff --git a/src/components/modals/SelectModal.vue b/src/components/modals/SelectModal.vue
index 07dacd269..c00a028d4 100644
--- a/src/components/modals/SelectModal.vue
+++ b/src/components/modals/SelectModal.vue
@@ -55,7 +55,7 @@
             </div>
           </template>
         </div>
-        <slot></slot>
+        <slot name="buttons"></slot>
       </div>
     </div>
   </BaseModal>
@@ -74,7 +74,7 @@ export default class SelectModal extends Vue {
   @Prop()
   title! : string;
   @Prop()
-  subtitle!: string;
+  subtitle: string;
   @Prop()
   options:string;
 

From 8a9f5f5763a9696a703a71e0269b67f9b22a4e83 Mon Sep 17 00:00:00 2001
From: HMS17 <84345306+HMS17@users.noreply.github.com>
Date: Mon, 27 Jun 2022 11:00:35 -0400
Subject: [PATCH 7/7] [BI-1199] - Path to Query param

---
 src/components/germplasm/GermplasmListsTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/germplasm/GermplasmListsTable.vue b/src/components/germplasm/GermplasmListsTable.vue
index 1c50fb7b2..dbb9df7a3 100644
--- a/src/components/germplasm/GermplasmListsTable.vue
+++ b/src/components/germplasm/GermplasmListsTable.vue
@@ -171,7 +171,7 @@ export default class GermplasmListsTable extends Vue {
   downloadList() {
     this.modalActive = false;
     if (this.activeProgram) {
-      window.open(process.env.VUE_APP_BI_API_ROOT + '/v1/programs/' + this.activeProgram.id + '/germplasm/lists/' + this.selectedListDbId + '/export/' + this.fileExtension, '_blank');
+      window.open(process.env.VUE_APP_BI_API_ROOT + '/v1/programs/' + this.activeProgram.id + '/germplasm/lists/' + this.selectedListDbId + '/export?fileExtension=' + this.fileExtension, '_blank');
     }
   }