Merge pull request #833 from LibCrowds/dev

Dev
LibCrowds · Jul 20, 2018 · c495b30 · c495b30
2 parents 331e4c0 + edd4940
commit c495b30
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 81 deletions.
diff --git a/components/cards/Base.vue b/components/cards/Base.vue
@@ -5,7 +5,7 @@
     :bg-variant="darkMode ? 'dark' : null"
     :text-variant="darkMode ? 'white' : null">
 
-    <template slot="header">
+    <template slot="header" v-if="!noHeader">
       <b-row
         class="mb-0 d-flex align-items-center">
         <b-col>
@@ -62,6 +62,10 @@ export default {
     docs: {
       type: String,
       default: ''
+    },
+    noHeader: {
+      type: Boolean,
+      default: false
     }
   },
 

diff --git a/components/data/SearchTags.vue b/components/data/SearchTags.vue
@@ -2,6 +2,7 @@
   <multiselect
     v-model="selectedTags"
     track-by="id"
+    ref="multi"
     placeholder="Type to search"
     open-direction="bottom"
     :options="foundTags"
@@ -120,13 +121,26 @@ export default {
       this.$emit('change', tagsClone)
     },
 
+    /**
+     * Select a tag programatically.
+     * @param {Object} tag
+     *   The tag.
+     */
+    externalSelectTag (tag) {
+      this.$refs.multi.value.push(tag)
+      this.selectTag(tag)
+    },
+
     /**
      * Select a tag.
      * @param {Object} tag
      *   The tag.
      */
     removeTag (tag) {
-      this.$emit('change', this.selectedTags)
+      let tClone = JSON.parse(JSON.stringify(this.selectedTags)).filter(t => {
+        return t.id !== tag.id
+      })
+      this.$emit('change', tClone)
     }
   },
 

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -159,7 +159,10 @@ const config = {
     browserBaseURL: localConfig.pybossaHost,
     credentials: true,
     retry: true,
-    proxy: true
+    proxy: true,
+    https: localConfig.hasOwnProperty('https')
+      ? localConfig.https
+      : false
   },
   proxy: {
     '/api/': localConfig.pybossaHost,

diff --git a/pages/admin/collection/_short_name/presenter.vue b/pages/admin/collection/_short_name/presenter.vue
@@ -40,6 +40,19 @@
           The text to be used for the reject modal, above the options input.
         </div>
       </div>
+      <div class="form-group" slot="bottom">
+        <label class="ml-0">
+          Tags text
+        </label>
+        <markdown-editor
+          v-model="currentCollection.info.presenter_options.tags_text"
+          data-size="sm"
+          :configs="markdownConfig">
+        </markdown-editor>
+        <div class="hint">
+          The text to be used for the tags modal.
+        </div>
+      </div>
     </pybossa-form>
 
   </card-base>

diff --git a/pages/admin/collection/_short_name/volumes/_id.vue b/pages/admin/collection/_short_name/volumes/_id.vue
@@ -191,7 +191,13 @@ export default {
             hint: 'A IIIF manifest URI',
             disabled: this.hasProjects,
             required: true,
-            validator: VueFormGenerator.validators.string
+            validator: (value) => {
+              if (!value || !value.length) {
+                return 'This field is required!'
+              } if (localConfig.https && !value.startsWith('https://')) {
+                return 'The HTTPS scheme must be used'
+              }
+            }
           }
         ],
         flickr: [

diff --git a/pages/collection/_short_name/browse.vue b/pages/collection/_short_name/browse.vue
@@ -6,38 +6,64 @@
       <hr class="mx-0">
     </span>
 
-    <div v-if="hasTagAnnotations">
-      <search-tags
-        :container-iri="currentCollection.info.annotations.tags"
-        @change="updateFilters"
-        class="mb-2">
-      </search-tags>
-
-      <div class="img-grid">
-        <no-ssr>
-          <isotope
-            ref="grid"
-            v-images-loaded:on.progress="setGridLayout"
-            :options="imageGridOptions"
-            :list="uniqueImageData">
-            <img
-              v-for="(item, index) in uniqueImageData"
-              :key="index"
-              :src="item.thumbnail"
-              class="img-grid-item img-fluid my-1"
-              @click="showPreview(item)">
-          </isotope>
-        </no-ssr>
-      </div>
-
-      <infinite-load-annotations
-        ref="infiniteload"
-        v-model="tagAnnotations"
-        :container-iri="currentCollection.info.annotations.tags"
-        no-results="It looks like nothing has been tagged yet!"
-        no-more-results="">
-      </infinite-load-annotations>
-    </div>
+    <search-tags
+      :container-iri="currentCollection.info.annotations.tags"
+      ref="searchtags"
+      slot="controls"
+      @change="updateFilters"
+      class="mb-3">
+    </search-tags>
+
+    <card-base no-header>
+      <b-tabs card v-model="currentTab" @input="onTabsChange">
+        <b-tab title="Tags" no-body active>
+          <b-table
+            responsive
+            striped
+            hover
+            show-empty
+            :dark="darkMode"
+            :items="uniqueTags"
+            :fields="tagTableFields">
+            <template slot="action" slot-scope="row">
+              <b-btn
+                variant="success"
+                size="sm"
+                @click="selectTag(row.item)">
+                View Images
+              </b-btn>
+            </template>
+          </b-table>
+        </b-tab>
+        <b-tab title="Images" no-body>
+          <div class="img-grid">
+            <no-ssr>
+              <isotope
+                ref="grid"
+                v-images-loaded:on.progress="setGridLayout"
+                :options="imageGridOptions"
+                :list="uniqueImageData">
+                <img
+                  v-for="(item, index) in uniqueImageData"
+                  :key="index"
+                  :src="item.thumbnail"
+                  class="img-grid-item img-fluid my-1"
+                  @click="showPreview(item)">
+              </isotope>
+            </no-ssr>
+          </div>
+        </b-tab>
+      </b-tabs>
+    </card-base>
+
+    <infinite-load-annotations
+      ref="infiniteload"
+      v-if="hasTagAnnotations"
+      v-model="tagAnnotations"
+      :container-iri="currentCollection.info.annotations.tags"
+      no-results="It looks like nothing has been tagged yet!"
+      no-more-results="">
+    </infinite-load-annotations>
 
     <p class="lead text-center" v-else>
       Sorry, user tags haven't been configured for this collection yet.
@@ -120,6 +146,7 @@
 </template>
 
 <script>
+import uniqBy from 'lodash/uniqBy'
 import marked from 'marked'
 import 'vue-awesome/icons/times'
 import 'vue-awesome/icons/arrow-right'
@@ -128,6 +155,7 @@ import { fetchCollectionByName } from '@/mixins/fetchCollectionByName'
 import InfiniteLoadAnnotations from '@/components/infiniteload/Annotations'
 import ItemTagsList from '@/components/lists/ItemTags'
 import SearchTags from '@/components/data/SearchTags'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'collection-tabs',
@@ -139,14 +167,25 @@ export default {
       title: 'Browse Tags',
       tagAnnotations: [],
       selectedTags: [],
-      selectedItem: {}
+      selectedItem: {},
+      tagTableFields: {
+        'body.value': {
+          label: 'Name'
+        },
+        action: {
+          label: 'Action',
+          class: 'text-center'
+        }
+      },
+      currentTab: 0
     }
   },
 
   components: {
     InfiniteLoadAnnotations,
     ItemTagsList,
-    SearchTags
+    SearchTags,
+    CardBase
   },
 
   computed: {
@@ -166,6 +205,10 @@ export default {
       return this.currentCollection.info.annotations.hasOwnProperty('tags')
     },
 
+    uniqueTags () {
+      return uniqBy(this.tagAnnotations, 'body.value')
+    },
+
     uniqueImageData () {
       const data = {}
       for (let anno of this.tagAnnotations) {
@@ -263,7 +306,9 @@ export default {
             ? data.related
             : [data.related]
           : []
-      }).finally(() => {
+        this.selectedItem = item
+        this.$refs.previewModal.show()
+      }).catch(() => {
         this.selectedItem = item
         this.$refs.previewModal.show()
       })
@@ -275,9 +320,23 @@ export default {
      *   The selected tags.
      */
     updateFilters (tags) {
+      this.currentTab = 1
       this.selectedTags = tags
       this.$refs.grid.filter('filterByTag')
       this.$refs.infiniteload.load()
+    },
+
+    /**
+     * Add a tag to the search box.
+     * @param {Object} tag
+     *   The tag.
+     */
+    selectTag (tag) {
+      this.$refs.searchtags.externalSelectTag(tag)
+    },
+
+    onTabsChange () {
+      this.setGridLayout()
     }
   },
 
@@ -290,8 +349,11 @@ export default {
 
 <style lang="scss">
 .img-grid {
+  overflow: auto;
+
   .img-grid-item {
     cursor: pointer;
+    padding: 5px;
     width: 100%;
 
     @include media-breakpoint-up(md) {

diff --git a/pages/collection/_short_name/index.vue b/pages/collection/_short_name/index.vue
@@ -395,6 +395,7 @@ export default {
         this.forumDiscussions = response.data.filter(discussion => {
           return !discussion.attributes.isSticky
         }).slice(0, 5)
+        this.loadingForumDiscussions = false
       }).catch(err => {
         // This is most likely a CORS issue with the forum endpoint
         if (process.env.NODE_ENV !== 'development') {
@@ -403,11 +404,8 @@ export default {
             message: `Error loading latest forum discussions: ${err.message}`
           })
         }
-        return {
-          forumDiscussions: []
-        }
-      }).finally(() => {
         this.loadingForumDiscussions = false
+        this.forumDiscussions = []
       })
     },
 
@@ -424,19 +422,19 @@ export default {
           item.updated = new Date(item.updated * 1000)
           return item
         }).filter(item => {
+          this.loadingActivityFeed = false
           return (
             item.action_updated === 'UserContribution' &&
             item.category_id === this.collection.id
           )
         }).slice(0, 5)
       }).catch(err => {
+        this.loadingActivityFeed = false
         this.$notifications.flash({
           status: 'error',
           message: 'Failed to load recent activity'
         })
         console.error(err)
-      }).finally(() => {
-        this.loadingActivityFeed = false
       })
     },