Layout changes #468

SpeciesFileGroup · Sep 18, 2018 · 058dd66 · 058dd66
1 parent 2053a3f
commit 058dd66
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 20 deletions.
diff --git a/app/javascript/vue/tasks/nomenclature/by_source/app.vue b/app/javascript/vue/tasks/nomenclature/by_source/app.vue
@@ -1,21 +1,17 @@
 <template>
-  <div>
-    <div class="flexbox">
-      <h1 class="task_header"> Nomenclature by source </h1>
-      <spinner
-        v-if="isLoading"
-        :full-screen="true"
-        legend="Loading..."
-        :logo-size="{ width: '100px', height: '100px'}"/>
+  <div id="nomenclature-by-source-task">
+    <spinner
+      v-if="isLoading"
+      :full-screen="true"
+      legend="Loading..."
+      :logo-size="{ width: '100px', height: '100px'}"/>
+    <div>
+      <h1 class="task_header">Source</h1>
       <nomen-source @sourceID="sourceID = $event"/>
     </div>
     <div class="flexbox">
       <div class="flexbox">
         <div class="first-column">
-          <otus-by-match
-            :sourceID="sourceID"
-            @otu_names_cites="otu_names_cites=$event"
-          />
           <cite-taxon-name
             :sourceID="sourceID"
             @foundTaxon="newTaxonNameCitation=$event"
@@ -41,6 +37,10 @@
             :sourceID="sourceID"
             @distribution_cites="distribution_cites=$event"
           />
+          <otus-by-match
+            :sourceID="sourceID"
+            @otu_names_cites="otu_names_cites=$event"
+          />
         </div>
         <div class="second-column">
           <otus-match-proxy

diff --git a/app/javascript/vue/tasks/nomenclature/by_source/components/nomen_source.vue b/app/javascript/vue/tasks/nomenclature/by_source/components/nomen_source.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-      style="width:400px; height:200px;">
-    <h2>Source: </h2>
+  <div class="nomen-source">
     <pre>{{ sourceText }}</pre>
     <autocomplete
       url="/sources/autocomplete"
@@ -62,4 +60,15 @@
     if (this.sourceID.length && Number.isInteger(Number(this.sourceID))) this.getSource();
   }
 }
-</script>
+</script>
+<style lang="scss">
+  #nomenclature-by-source-task {
+    .nomen-source {
+      height:100px;
+
+      .vue-autocomplete-input {
+        width: 400px !important;
+      }
+    }
+  }
+</style>
diff --git a/app/javascript/vue/tasks/nomenclature/by_source/components/otus_match_proxy.vue b/app/javascript/vue/tasks/nomenclature/by_source/components/otus_match_proxy.vue
@@ -1,5 +1,10 @@
 <template>
   <div>
+    <spinner
+      v-if="isLoading"
+      :full-screen="true"
+      legend="Loading..."
+      :logo-size="{ width: '100px', height: '100px'}"/>
     <h2>OTUs by match or proxy</h2>
     <otu-table-component :list="otu_name_list"/>
   </div>
@@ -10,12 +15,14 @@
   import RadialAnnotator from '../../../../components/annotator/annotator.vue'
   import OtuRadial from '../../../../components/otu/otu.vue'
   import OtuTableComponent from './tables/otu_table.vue'
+  import Spinner from '../../../../components/spinner.vue'
 
   export default {
     components: {
       OtuTableComponent,
       RadialAnnotator,
-      OtuRadial
+      OtuRadial,
+      Spinner
     },
     props: {
       sourceID: {
@@ -55,7 +62,8 @@
       return {
         otu_name_list: [],
         otu_id_list: [],
-        processingList: false
+        processingList: false,
+        isLoading: false
       }
     },
     watch: {
@@ -85,6 +93,7 @@
       getSourceOtus() {
         let promises = [];
         this.otu_name_list = [];
+        this.isLoading = true
 
         promises.push(this.processType(this.getIdsList(this.otu_names_cites), 'otu_ids'));
         promises.push(this.processType(this.getIdsList(this.taxon_names_cites), 'taxon_name_ids'));
@@ -95,6 +104,7 @@
 
         Promise.all(promises).then(lists => {
           this.otu_id_list = [].concat.apply([], lists)
+          this.isLoading = false
         })
       },
       addOtu(otu) {

diff --git a/app/javascript/vue/tasks/nomenclature/by_source/components/tables/row_components.vue b/app/javascript/vue/tasks/nomenclature/by_source/components/tables/row_components.vue
@@ -71,6 +71,6 @@ export default {
 </script>
 <style lang="scss" module>
   .pages {
-    width: 70px;
+    width: 140px;
   }
 </style>
diff --git a/app/javascript/vue/tasks/nomenclature/by_source/components/tables/table.vue b/app/javascript/vue/tasks/nomenclature/by_source/components/tables/table.vue
@@ -1,7 +1,7 @@
 <template>
   <table>
     <tr>
-      <th>Pages</th>
+      <th @click="sortByPages">Pages</th>
       <th>Object</th>
       <th>Radial</th>
       <th>Otu</th>
@@ -34,6 +34,17 @@ export default {
       if(index > -1) {
         this.list.splice(index, 1)
       }
+    },
+    sortByPages() {
+      function compare(a,b) {
+        if (a.pages < b.pages)
+          return -1;
+        if (a.pages > b.pages)
+          return 1;
+        return 0;
+      }
+
+      this.list.sort(compare);      
     }
   }
 }