Add reload button for concept lists (#513, #425)

gbv · Nov 8, 2019 · 720b184 · 720b184
1 parent 50839d5
commit 720b184
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 40 deletions.
diff --git a/src/components/ConceptListWrapper.vue b/src/components/ConceptListWrapper.vue
@@ -85,6 +85,15 @@
         </div>
       </div>
     </b-popover>
+    <!-- Reload button for lists -->
+    <div
+      v-if="currentChoice.reloadButton"
+      class="dataModalButton fontSize-small conceptListWrapper-reloadButton"
+      @click="reloadList">
+      <font-awesome-icon icon="sync-alt" />
+    </div>
+    <!-- Full screen loading indicator -->
+    <loading-indicator-full v-if="loading" />
   </div>
 </template>
 
@@ -94,6 +103,7 @@ import ConceptList from "./ConceptList"
 import _ from "lodash"
 import ComponentSettings from "./ComponentSettings"
 import DataModalButton from "./DataModalButton"
+import LoadingIndicatorFull from "./LoadingIndicatorFull"
 
 import computed from "../mixins/computed"
 import objects from "../mixins/objects"
@@ -102,7 +112,7 @@ import hoverHandler from "../mixins/hover-handler"
 
 export default {
   name: "ConceptListWrapper",
-  components: { Minimizer, ConceptList, ComponentSettings,  DataModalButton },
+  components: { Minimizer, ConceptList, ComponentSettings,  DataModalButton, LoadingIndicatorFull },
   mixins: [computed, objects, dragandrop, hoverHandler],
   props: {
     /**
@@ -116,6 +126,7 @@ export default {
   data() {
     return {
       listSelectionPopoverShow: false,
+      loading: 0,
     }
   },
   computed: {
@@ -176,9 +187,10 @@ export default {
           concepts: list.concepts.map(concept => this.getObject(concept, { type: "concept" })),
           showChildren: false,
           showScheme: true,
-          url: list.url,
+          url: list.url || list.conceptsUrl,
           available: list.concepts.length > 0,
         }
+        choice.reloadButton = choice.url != null
         choices.push(choice)
         index += 1
       }
@@ -327,6 +339,16 @@ export default {
         },
       ]
     },
+    async reloadList() {
+      this.loading += 1
+      let conceptLists = await this.$store.dispatch("loadConceptLists")
+      this.$store.commit({
+        type: "setConfig",
+        option: "conceptLists",
+        value: conceptLists,
+      })
+      this.loading -= 1
+    },
   },
 }
 </script>
@@ -341,6 +363,10 @@ export default {
   right: 3px;
   bottom: 7px;
 }
+.conceptListWrapper-reloadButton {
+  right: 42px !important;
+  bottom: 6px !important;
+}
 
 .conceptListWrapper-listSelectionButton {
   position: absolute;

diff --git a/src/main.js b/src/main.js
@@ -27,7 +27,7 @@ Vue.component("tab", Tab)
 
 // Add fontawesome
 import { library } from "@fortawesome/fontawesome-svg-core"
-import { faStar, faPlusCircle, faExchangeAlt, faThumbsUp, faThumbsDown, faAngleDown, faAngleRight, faAngleLeft, faLevelUpAlt, faLevelDownAlt, faEllipsisV, faEllipsisH, faSortUp, faTimesCircle, faLink, faIdCard, faUser, faSearch, faFilter, faCode, faCog, faDownload, faCaretDown, faInfoCircle, faComment, faEdit, faSave, faTrashAlt, faBan, faWindowMinimize, faPlusSquare, faCheck, faCheckSquare, faLock, faLockOpen, faExternalLinkSquareAlt, faLongArrowAltDown, faLongArrowAltUp, faExternalLinkAlt, faPuzzlePiece, faExclamation, faShareAltSquare, faRecycle, faCaretSquareLeft, faCaretSquareRight, faClipboard, faAngleDoubleRight, faClone, faExclamationCircle, faQuestionCircle, faChevronUp, faChevronDown, faPencilAlt, faArrowRight, faArrowLeft } from "@fortawesome/free-solid-svg-icons"
+import { faStar, faPlusCircle, faExchangeAlt, faThumbsUp, faThumbsDown, faAngleDown, faAngleRight, faAngleLeft, faLevelUpAlt, faLevelDownAlt, faEllipsisV, faEllipsisH, faSortUp, faTimesCircle, faLink, faIdCard, faUser, faSearch, faFilter, faCode, faCog, faDownload, faCaretDown, faInfoCircle, faComment, faEdit, faSave, faTrashAlt, faBan, faWindowMinimize, faPlusSquare, faCheck, faCheckSquare, faLock, faLockOpen, faExternalLinkSquareAlt, faLongArrowAltDown, faLongArrowAltUp, faExternalLinkAlt, faPuzzlePiece, faExclamation, faShareAltSquare, faRecycle, faCaretSquareLeft, faCaretSquareRight, faClipboard, faAngleDoubleRight, faClone, faExclamationCircle, faQuestionCircle, faChevronUp, faChevronDown, faPencilAlt, faArrowRight, faArrowLeft, faSyncAlt } from "@fortawesome/free-solid-svg-icons"
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
 library.add(faStar)
@@ -86,6 +86,7 @@ library.add(faChevronDown)
 library.add(faPencilAlt)
 library.add(faArrowRight)
 library.add(faArrowLeft)
+library.add(faSyncAlt)
 Vue.component("font-awesome-icon", FontAwesomeIcon)
 
 // Add objects mixin

diff --git a/src/store/actions.js b/src/store/actions.js
@@ -13,7 +13,7 @@ try {
 }
 
 export default {
-  async loadConfig({ commit }, configFile) {
+  async loadConfig({ commit, dispatch }, configFile) {
     if (!configFile) {
       configFile = "./cocoda.json"
     }
@@ -199,42 +199,7 @@ export default {
       }
     }
 
-    // Load lists for "conceptLists"
-    let conceptLists = []
-    for (let list of config.conceptLists || []) {
-      if (_.isString(list)) {
-        // Load list from URL
-        try {
-          let url = list
-          list = (await axios.get(url)).data
-          list.url = url
-        } catch (error) {
-          console.warn("Could not load list from URL:", list)
-          list = null
-        }
-        if (list) {
-          conceptLists.push(list)
-        }
-      } else {
-        conceptLists.push(list)
-      }
-    }
-    config.conceptLists = conceptLists
-
-    // Load concepts for concept lists if necessary
-    for (let list of config.conceptLists) {
-      if (_.isString(list.concepts)) {
-        let url = list.concepts
-        try {
-          let concepts = (await axios.get(url)).data
-          list.concepts = concepts
-        } catch (error) {
-          console.warn("Could not load concepts for list with URL:", url)
-          list.concepts = []
-        }
-        list.conceptsUrl = url
-      }
-    }
+    config.conceptLists = await dispatch("loadConceptLists", config.conceptLists)
 
     // Save config
     commit({
@@ -287,4 +252,48 @@ export default {
     })
   },
 
+  async loadConceptLists({ state }, _conceptLists) {
+    // Load lists for "conceptLists"
+    let conceptLists = []
+    for (let list of _conceptLists || (state.config && state.config.conceptLists) || []) {
+      if (_.isString(list)) {
+        list = { url: list }
+      }
+      if (list.url) {
+        // Load list from URL
+        try {
+          let url = list.url
+          list = (await axios.get(url)).data
+          list.url = url
+        } catch (error) {
+          console.warn("Could not load list from URL:", list)
+        }
+        if (list) {
+          conceptLists.push(list)
+        }
+      } else {
+        conceptLists.push(list)
+      }
+    }
+
+    // Load concepts for concept lists if necessary
+    for (let list of conceptLists) {
+      if (_.isString(list.concepts)) {
+        list.conceptsUrl = list.concepts
+      }
+      if (list.conceptsUrl) {
+        let url = list.conceptsUrl
+        try {
+          let concepts = (await axios.get(url)).data
+          list.concepts = concepts
+        } catch (error) {
+          console.warn("Could not load concepts for list with URL:", url)
+          list.concepts = []
+        }
+        list.conceptsUrl = url
+      }
+    }
+    return conceptLists
+  },
+
 }