added show buttons #337

SpeciesFileGroup · Jan 15, 2019 · 962d32a · 962d32a
1 parent 3f6b298
commit 962d32a
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 14 deletions.
diff --git a/app/assets/images/w_hide.svg b/app/assets/images/w_hide.svg
diff --git a/app/assets/images/w_show.svg b/app/assets/images/w_show.svg
diff --git a/app/assets/stylesheets/base/buttons.scss b/app/assets/stylesheets/base/buttons.scss
@@ -171,6 +171,16 @@
   background-image: image-url("w_locked.svg");
 }
 
+.btn-show {
+  background-size: 12px;
+  background-image: image-url("w_show.svg");
+}
+
+.btn-hide {
+  background-size: 12px;
+  background-image: image-url("w_hide.svg");
+}
+
 .btn-unlocked {
   background-size: 12px;
   background-image: image-url("w_unlocked.svg");

diff --git a/app/javascript/vue/components/btnShow.vue b/app/javascript/vue/components/btnShow.vue
@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="button-circle button-data"
+    :class="{ 
+      'btn-hide': value,
+      'btn-show': !value 
+    }"
+    @click="switchValue"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    switchValue() {
+      this.$emit('input', !this.value)
+    }
+  }
+}
+</script>
diff --git a/app/javascript/vue/tasks/digitize/components/collectionEvent/components/map/map.vue b/app/javascript/vue/tasks/digitize/components/collectionEvent/components/map/map.vue
@@ -3,15 +3,15 @@
     <div style="height: 10%; overflow: auto;">
       Map verification
     </div>
-    <l-map style="height: 300px; width:360px" :zoom="zoom" :center="center">
+    <l-map style="height: 300px; width:310px" :zoom="zoom" :center="center">
       <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
       <l-marker :lat-lng="marker"></l-marker>
     </l-map>
   </div>
   <div
     v-else
     class="panel aligner"
-    style="height: 300px; align-items: center; width:360px">
+    style="height: 300px; align-items: center; width:310px">
     <h3>Fill lat/long to display the map</h3>
   </div>
 </template>

diff --git a/app/javascript/vue/tasks/digitize/components/collectionObject/main.vue b/app/javascript/vue/tasks/digitize/components/collectionObject/main.vue
@@ -25,16 +25,43 @@
             <preparation-type/>
           </div>
         </div>
-        <buffered-component class="separate-top"/>
-        <depictions-component
-          class="separate-top"
-          :object-value="collectionObject"
-          :get-depictions="GetCollectionObjectDepictions"
-          object-type="CollectionObject"
-          @create="createDepictionForAll"
-          @delete="removeAllDepictionsByImageId"
-          default-message="Drop images here to add collection object figures"
-          action-save="SaveCollectionObject"/>
+        <div class="horizontal-left-content middle">
+          <buffered-component
+            v-if="showBuffered"
+            class="separate-top separate-right"/>
+          <div class="middle">
+            <btn-show
+              class="separate-right"
+              :value="showBuffered"
+              @input="showBuffered = $event; updatePreferences('tasks::digitize::collectionObjects::showBuffered', showBuffered)"/>
+            <span
+              v-if="!showBuffered"
+              class="separate-left">Show buffered fields
+            </span>
+          </div>
+        </div>
+        <div class="horizontal-left-content separate-top">
+          <depictions-component
+            v-if="showDepictions"
+            class="separate-top"
+            :object-value="collectionObject"
+            :get-depictions="GetCollectionObjectDepictions"
+            object-type="CollectionObject"
+            @create="createDepictionForAll"
+            @delete="removeAllDepictionsByImageId"
+            default-message="Drop images here to add collection object figures"
+            action-save="SaveCollectionObject"/>
+          <div class="middle">
+            <btn-show
+              class="separate-right"
+              :value="showDepictions"
+              @input="showDepictions = $event; updatePreferences('tasks::digitize::collectionObjects::showDepictions', showDepictions)"/>
+            <span
+              v-if="!showDepictions"
+              class="separate-left">Show depictions
+            </span>
+          </div>
+        </div>
         <container-items/>
       </div>
     </block-layout>
@@ -57,7 +84,8 @@
   import BlockLayout from '../../../../components/blockLayout.vue'
   import RadialAnnotator from '../../../../components/annotator/annotator.vue'
   import LockComponent from 'components/lock.vue'
-  import { GetCollectionObjectDepictions, CreateDepiction } from '../../request/resources.js'
+  import btnShow from 'components/btnShow.vue'
+  import { GetCollectionObjectDepictions, CreateDepiction, UpdateUserPreferences } from '../../request/resources.js'
 
   export default {
     components: {
@@ -71,9 +99,18 @@
       DepictionsComponent,
       RepositoryComponent,
       BlockLayout,
-      RadialAnnotator
+      RadialAnnotator,
+      btnShow
     },
     computed: {
+      preferences: {
+        get() {
+          return this.$store.getters[GetterNames.GetPreferences]
+        },
+        set(value) {
+          this.$store.commit(MutationNames.SetPreferences, value)
+        }
+      },
       collectionObject () {
         return this.$store.getters[GetterNames.GetCollectionObject]
       },
@@ -102,6 +139,8 @@
         types: [],
         labelRepository: undefined,
         labelEvent: undefined,
+        showDepictions: true,
+        showBuffered: true,
         GetCollectionObjectDepictions
       }
     },
@@ -110,9 +149,28 @@
         if(newVal.id) {
           this.cloneDepictions(newVal)
         }
+      },
+      preferences: {
+        handler(newVal) {
+          if(newVal) {
+            let layout = newVal['layout']
+            if(layout) {
+              let sDepictions = layout['tasks::digitize::collectionObjects::showDepictions']
+              let sBuffered = layout['tasks::digitize::collectionObjects::showBuffered']
+              this.showDepictions = (sDepictions != undefined ? sDepictions : true)
+              this.showBuffered = (sBuffered != undefined ? sBuffered : true)
+            }
+          }
+        },
+        deep: true
       }
     },
     methods: {
+      updatePreferences(key, value) {
+        UpdateUserPreferences(this.preferences.id, { [key]: value }).then(response => {
+          this.preferences.layout = response.preferences.layout
+        })
+      },
       getMacKey: function () {
         return (navigator.platform.indexOf('Mac') > -1 ? 'ctrl' : 'alt')
       },