Merge pull request #716 from LibCrowds/new-projects

New projects

components/data/FilterProjects.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="filter-projects-data">
     <div
-      v-for="(tag, key) in collection.info.tags"
-      :key="key"
+      v-for="(tag, index) in collection.info.tags"
+      :key="index"
       class="mb-2">
-      <label v-if="!hideLabel">{{ key }}</label>
+      <label v-if="!hideLabel">{{ tag.name }}</label>
       <multiselect
-        :id="key"
-        v-model="model[key]"
-        :placeholder="`Filter by ${key.toLowerCase()}`"
+        :id="tag.name"
+        v-model="model[tag.name]"
+        :placeholder="`Filter by ${tag.name.toLowerCase()}`"
         :show-labels="false"
-        :options="tag.options"
+        :options="options[tag.name] || []"
         @input="onInput"
         @select="onSelect">
       </multiselect>
@@ -25,7 +25,8 @@ import identity from 'lodash/identity'
 export default {
   data () {
     return {
-      model: this.value
+      model: this.value,
+      options: {}
     }
   },
 
@@ -47,29 +48,39 @@ export default {
   methods: {
     /**
      * Handle a tag being selected or removed.
+     * @param {String} value
+     *   The tag value.
      * @param {String} name
-     *   The tag name.
-     * @param {String} type
-     *   The tag type (which comes from the multiselect component ID).
+     *   The tag name (which comes from the multiselect component ID).
      */
-    onInput (name, type) {
-      this.model[type] = name
+    onInput (value, name) {
+      this.model[name] = value
       // Emit with null values removed
       this.$emit('input', pickBy(this.model, identity))
     },
 
     /**
      * Handle a tag being selected.
-     * @param {String} name
+     * @param {String} value
      *   The tag name.
-     * @param {String} type
-     *   The tag type (which comes from the multiselect component ID).
+     * @param {String} name
+     *   The tag name (which comes from the multiselect component ID).
      */
-    onSelect (name, type) {
-      this.$emit('select', name, type)
+    onSelect (value, typnamee) {
+      this.$emit('select', value, name)
     }
   },
 
+  mounted () {
+    // Get all current tags for the collection.
+    const endpoint = `/lc/categories/${this.collection.short_name}/tags`
+    return this.$axios.$get(endpoint).then(data => {
+      this.options = data.tags
+    }).catch(err => {
+      this.$nuxt.error(err)
+    })
+  },
+
   watch: {
     value (val) {
       this.model = val

components/forms/Base.vue

@@ -21,6 +21,7 @@
           {{ cancelText }}
         </b-btn>
         <b-btn
+          v-if="showSubmit"
           :variant="darkMode ? 'dark': 'success'"
           :disabled="processing"
           @click="$emit('submit')">
@@ -49,6 +50,10 @@ export default {
       type: Boolean,
       default: false
     },
+    showSubmit: {
+      type: Boolean,
+      default: true
+    },
     showFooter: {
       type: Boolean,
       default: true

components/forms/PybossaForm.vue

@@ -4,6 +4,7 @@
     :show-footer="showFooter"
     :no-body="noBody"
     :show-cancel="showCancel"
+    :show-submit="showSubmit"
     :cancel-text="cancelText"
     :processing="processing"
     :submit-text="submitText"
@@ -80,6 +81,10 @@ export default {
       type: Boolean,
       default: false
     },
+    showSubmit: {
+      type: Boolean,
+      default: true
+    },
     showFooter: {
       type: Boolean,
       default: true

components/lists/ProjectTags.vue

@@ -1,18 +1,16 @@
 <template>
   <div class="project-tags-list">
     <b-badge
-      v-for="(value, type) in tags"
-      :key="type"
-      :style="getTagStyle(type)"
-      @click.prevent="handleClick(type, value)">
-      {{ type }}: {{ value }}
+      v-for="(value, name) in tags"
+      :key="name"
+      :style="getTagStyle(name)"
+      @click.prevent="handleClick(name, value)">
+      {{ name }}: {{ value }}
     </b-badge>
   </div>
 </template>
 
 <script>
-import isEmpty from 'lodash/isEmpty'
-
 export default {
   props: {
     tags: {
@@ -31,19 +29,19 @@ export default {
 
   methods: {
     /**
-     * Return the colour of the tag, if it still exists.
-     * @param {String} type
-     *   The tag type
+     * Return the colour of a tag.
+     * @param {String} name
+     *   The tag name.
      */
-    getTagStyle (type) {
-      let color = this.darkMode ? '#868e96' : '#909090'
-      if (
-        !this.darkMode &&
-        !isEmpty(this.collection) &&
-        this.collection.info.tags[type]
-      ) {
-        color = this.collection.info.tags[type].color
-      }
+    getTagStyle (name) {
+      const tag = this.collection.info.tags.filter(t => {
+        return t.name === name
+      })[0] || null
+
+      let color = this.darkMode || !tag || !tag.color
+        ? '#868e96'
+        : tag.color
+
       return {
         backgroundColor: color,
         cursor: this.disabled ? 'default' : 'pointer'
@@ -52,14 +50,14 @@ export default {
 
     /**
      * Handle click.
-     * @param {String} type
-     *   The tag type.
      * @param {String} name
      *   The tag name.
+     * @param {String} value
+     *   The tag value.
      */
-    handleClick (type, name) {
+    handleClick (name, value) {
       if (!this.disabled) {
-        this.$emit('tag-click', type, name)
+        this.$emit('tag-click', name, value)
       }
     }
   }