Manage dropdown states in the store

js/store/display.js

@@ -34,7 +34,12 @@ export const initialState = () => ({
   navigationPageSize: null,
   // Last created metadata name and type, to be reused when the modal re-opens
   lastMetadataName: null,
-  lastMetadataType: null
+  lastMetadataType: null,
+  /**
+   * Opened or closed state of all the DropdownContents by ID.
+   * @type {{[string]: boolean}}
+   */
+  dropdowns: {}
 })
 
 const setScreenSize = state => {
@@ -72,6 +77,19 @@ export const mutations = {
     if (layout) state.elementsTableLayout = layout === 'table'
     else state.elementsTableLayout = !state.elementsTableLayout
   },
+  toggleDropdown (state, { id, value = null }) {
+    if (typeof value === 'boolean') {
+      state.dropdowns = {
+        ...state.dropdowns,
+        [id]: value
+      }
+    } else {
+      state.dropdowns = {
+        ...state.dropdowns,
+        [id]: !state.dropdowns[id]
+      }
+    }
+  },
   setPageSize (state, size) {
     if (!Number.isInteger(size) || size <= 0) throw new TypeError('Page size must be a positive integer')
     state.navigationPageSize = size

test/store/display.js

@@ -94,6 +94,24 @@ describe('display', () => {
       })
     })
 
+    describe('toggleDropdown', () => {
+      it('toggles without a value', () => {
+        const state = initialState()
+        assert.deepStrictEqual(state.dropdowns, {})
+        mutations.toggleDropdown(state, { id: 'something' })
+        assert.deepStrictEqual(state.dropdowns, { something: true })
+        mutations.toggleDropdown(state, { id: 'something' })
+        assert.deepStrictEqual(state.dropdowns, { something: false })
+      })
+
+      it('sets directly with a boolean value', () => {
+        const state = initialState()
+        assert.deepStrictEqual(state.dropdowns, {})
+        mutations.toggleDropdown(state, { id: 'something', value: false })
+        assert.deepStrictEqual(state.dropdowns, { something: false })
+      })
+    })
+
     describe('setPageSize', () => {
       it('updates the navigation page size', () => {
         const state = initialState()
@@ -153,7 +171,10 @@ describe('display', () => {
       imageShow: true,
       navigationPageSize: 42,
       lastMetadataName: 'blah',
-      lastMetadataType: 'numeric'
+      lastMetadataType: 'numeric',
+      dropdowns: {
+        blah: 'bleh'
+      }
     }
     mutations.reset(state)
 

vue/DropdownContent.vue

@@ -23,11 +23,17 @@
 </template>
 
 <script>
+import { mapState, mapMutations } from 'vuex'
+
 export default {
   props: {
-    value: {
-      type: Boolean,
-      default: null
+    /**
+     * An identifier that must be unique across the whole frontend.
+     * Used to store the dropdown's opened/closed state in the store.
+     */
+    id: {
+      type: String,
+      required: true
     },
     title: {
       type: String,
@@ -38,22 +44,16 @@ export default {
       default: false
     }
   },
-  data: () => ({
-    toggled_: true
-  }),
   computed: {
+    ...mapState('display', ['dropdowns']),
     toggled () {
-      if (this.value === null) return this.toggled_
-      return this.value
+      return this.dropdowns[this.id] ?? true
     }
   },
   methods: {
+    ...mapMutations('display', ['toggleDropdown']),
     toggle () {
-      if (this.value === null) {
-        this.toggled_ = !this.toggled_
-      } else {
-        this.$emit('input', !this.disabled && !this.value)
-      }
+      this.toggleDropdown({ id: this.id, value: !this.toggled })
     }
   }
 }

vue/Element/AnnotationPanel.vue

@@ -2,10 +2,10 @@
   <div>
     <div v-if="!element" class="loading-content loader"></div>
     <template v-else-if="canWrite(corpus)">
-      <DropdownContent title="Tools">
+      <DropdownContent id="annotation-tools" title="Tools">
         <Tools :corpus-id="element.corpus.id" />
       </DropdownContent>
-      <DropdownContent title="Batch annotation">
+      <DropdownContent id="batch-annotation" title="Batch annotation">
         <input
           id="switchBatchCreation"
           type="checkbox"

vue/Element/DetailsPanel.vue

@@ -8,7 +8,7 @@
       </template>
 
       <template v-if="(canWriteElement(elementId) && hasMlClasses[corpusId]) || classifications.length">
-        <DropdownContent title="Classifications">
+        <DropdownContent id="classifications" title="Classifications">
           <Classifications v-if="element.classifications" :element="element" />
           <form v-on:submit.prevent="createClassification">
             <div v-if="canWriteElement(elementId) && hasMlClasses" class="field has-addons">
@@ -42,7 +42,7 @@
       </template>
 
       <template v-if="elementType.folder === false">
-        <DropdownContent title="Transcriptions">
+        <DropdownContent id="transcriptions" title="Transcriptions">
           <GroupedTranscriptions
             v-for="transcriptionGroup in elementTranscriptions"
             :key="transcriptionGroup[0]"
@@ -66,15 +66,15 @@
           </template>
         </DropdownContent>
         <hr />
-        <DropdownContent title="New transcription" v-if="canWriteElement(elementId)">
+        <DropdownContent id="new-transcription" title="New transcription" v-if="canWriteElement(elementId)">
           <TranscriptionCreationForm :element="element" />
         </DropdownContent>
         <hr />
       </template>
 
       <template v-if="metadata.length || canWriteElement(elementId)">
-        <DropdownContent title="Metadata" v-model="toggleMetas">
-          <ElementMetadata :corpus-id="element.corpus.id" :element-id="element.id" :opened="toggleMetas" />
+        <DropdownContent id="metadata" title="Metadata">
+          <ElementMetadata :corpus-id="element.corpus.id" :element-id="element.id" />
         </DropdownContent>
         <hr />
       </template>
@@ -125,7 +125,6 @@ export default {
     }
   },
   data: () => ({
-    toggleMetas: true,
     selectedNewClassification: '',
     validClassification: null,
     isSavingNewClassification: false,

vue/Element/OrientationPanel.vue

 <template>
-  <DropdownContent title="Orientation">
+  <DropdownContent id="orientation" title="Orientation">
     <div class="field is-horizontal">
       <div class="field-label is-normal is-flex-grow-0">
         <div class="label">

vue/Entity/Links.vue

 <template>
   <div v-if="allLinks && allLinks.length">
-    <DropdownContent title="roles">
+    <DropdownContent id="entity-roles" title="Roles">
       <nav class="panel">
         <p class="panel-heading">
           {{ allLinks.length }} role{{ allLinks.length > 1 ? 's' : '' }}