Fixes for new backend & new tag editor

src/components/Filters.vue

@@ -16,12 +16,12 @@
           <b-slider-tick :value="3">10000</b-slider-tick>
         </b-slider>
       </b-menu-list>
-      <b-menu-list v-for="tag in tags" v-bind:key="tag.name" :label="tag.name">
-        <div v-for="type in tag.types" v-bind:key="type" class="field">
+      <b-menu-list v-for="category in tags" v-bind:key="category.name" :label="category.name">
+        <div v-for="tag in category.tags" v-bind:key="tag" class="field">
           <b-checkbox
-          :native-value="type"
+          :native-value="tag.name"
           v-model="checkboxGroup"
-          @input="changeTag">{{type}}</b-checkbox>
+          @input="changeTag">{{tag.name}}</b-checkbox>
         </div>
       </b-menu-list>
     </div>

src/components/LoginForm.vue

@@ -7,8 +7,8 @@
       <section class="modal-card-body">
         <h2 class="subtitle has-text-danger">{{errorMessage}}</h2>
 
-        <b-field label="Email">
-          <b-input type="email" v-model="email" placeholder="email" required/>
+        <b-field label="Username">
+          <b-input v-model="username" placeholder="username" required/>
         </b-field>
 
         <b-field label="Password">
@@ -30,24 +30,26 @@ export default {
   name: 'LoginForm',
   data () {
     return {
-      email: '',
+      username: '',
       password: '',
       errorMessage: null
     }
   },
   methods: {
     async onLogin () {
-      var response = await this.login(this.email, this.password)
-      if (response.token !== null) {
-        await localStorage.setItem('token', response.token)
+      var response = await this.login(this.username, this.password)
+      console.log('LOGIN RESPONSE ' + response)
+      if (response !== null) {
+        console.log('LOGIN TOKEN OK')
+        await localStorage.setItem('token', response.message)
         this.$parent.close()
         this.$router.go()
       } else {
-        this.errorMessage = 'Email or password incorect'
+        this.errorMessage = 'Username or password incorect'
       }
     },
-    async login (email, password) {
-      const url = this.$serverurl + 'auth'
+    async login (username, password) {
+      const url = this.$serverurl + 'login'
       try {
         const response = await fetch(
           url, {
@@ -57,7 +59,7 @@ export default {
               'Content-Type': 'application/json'
             },
             body: JSON.stringify({
-              email: email,
+              username: username,
               password: password
             })
           }

src/components/ModelCard.vue

@@ -8,13 +8,12 @@
         <p>
           <strong>{{model.name}}</strong>
           <br>
-          <small>{{model.author}}</small> - <small>{{new Date(model.modificationDate).toLocaleDateString()}}</small>
+          <small>{{model.author.username}}</small> - <small>{{new Date(model.modificationDate).toLocaleDateString()}}</small>
           <br>
           {{model.shortDescription}}
         </p>
         <b-taglist>
-          <b-tag v-for="tag in model.tags" v-bind:key="tag.type" type="is-info">{{tag.type}}</b-tag>
-          <b-tag type="is-info">{{model.performance}}%</b-tag>
+          <b-tag v-for="tag in model.tags" v-bind:key="tag.name" type="is-info">{{tag.name}}</b-tag>
         </b-taglist>
       </div>
     </div>

src/components/ModelUpload.vue

@@ -77,7 +77,7 @@ export default {
         this.setError(response.message)
         return
       } else {
-        this.modelId = response.id
+        this.modelId = response.message
       }
 
       if (this.model.file !== undefined) {

src/components/RegisterForm.vue

@@ -52,13 +52,13 @@ export default {
       if (response.error) {
         this.errorMessage = response.message
       } else {
-        await localStorage.setItem('token', response.token)
+        await localStorage.setItem('token', response.message)
         this.$parent.close()
         this.$router.go()
       }
     },
     async register (username, email, password) {
-      const url = this.$serverurl + 'user'
+      const url = this.$serverurl + 'user/signup'
       try {
         const response = await fetch(
           url, {

src/components/TagEditor.vue

 <template>
   <div class="tagEditor">
-    <b-field position="is-centered" has-addons>
-      <b-autocomplete
-        v-model="tagName"
-        :open-on-focus="true"
-        :data="filteredTags"
-        icon-right="close-circle"
-        icon-right-clickable>
-        <template slot="header">
-          <a @click="addNewTagDialog">
-            <span> Add new... </span>
-          </a>
-        </template>
-      </b-autocomplete>
-      <p class="control">
-        <b-select placeholder="Select a category" v-model="selectedCategory">
-          <option v-for="tag in tagList" v-bind:key="tag.type" :value="tag.name">{{tag.name}}</option>
-        </b-select>
-      </p>
-      <p class="control">
-        <b-button class="control is-primary" @click="addTagToModel">Add</b-button>
-      </p>
-    </b-field>
-
     <b-taglist>
       <b-tag
-        v-for="tag in tags"
-        v-bind:key="tag.type"
+        v-for="tag in modelTags"
+        v-bind:key="tag"
         type="is-info"
         @close="removeTagFromModel(tag)"
         closable>
-      {{tag.type}}
+
+        {{tag}}
       </b-tag>
     </b-taglist>
+
+    <b-collapse
+      class="card"
+      animation="slide"
+      v-for="(category, index) of aviablesTags"
+      :key="index"
+      :open="isOpen == index"
+      @open="isOpen = index">
+
+      <div
+        slot="trigger"
+        slot-scope="props"
+        class="card-header"
+        role="button">
+
+        <p class="card-header-title">
+          {{category.name}}
+        </p>
+        <a class="card-header-icon">
+          <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"/>
+        </a>
+      </div>
+
+      <div class="card-content">
+        <div class="buttons">
+          <b-button
+            v-for="tag in category.tags"
+            v-bind:key="tag.name"
+            @click="addTagToModel(tag.name)"
+            type="is-info"
+            rounded>
+
+            {{tag.name}}
+          </b-button>
+
+          <b-button
+            @click="addNewTagDialog(category.id)"
+            type="is-warning"
+            icon-right="plus"
+            rounded/>
+        </div>
+      </div>
+    </b-collapse>
   </div>
 </template>
 
@@ -40,7 +61,7 @@
 export default {
   name: 'TagEditor',
   props: {
-    tags: {
+    modelTags: {
       type: Array,
       default: function () {
         return []
@@ -49,27 +70,12 @@ export default {
   },
   data () {
     return {
-      tagName: '',
-      selectedCategory: null,
-      tagList: []
-    }
-  },
-  computed: {
-    filteredTags () {
-      if (this.selectedCategory === null) return []
-      var category = this.tagList.filter((tag) => {
-        return tag.name === this.selectedCategory
-      })
-      return category[0].types.filter((type) => {
-        return type
-          .toString()
-          .toLowerCase()
-          .indexOf(this.tagName.toLowerCase()) >= 0
-      })
+      aviablesTags: [],
+      isOpen: 0
     }
   },
   async mounted () {
-    this.tagList = await this.getTags()
+    this.aviablesTags = await this.getTags()
   },
   methods: {
     async getTags () {
@@ -81,36 +87,34 @@ export default {
         return null
       }
     },
-    addNewTagDialog () {
+    addNewTagDialog (categoryId) {
       this.$buefy.dialog.prompt({
         message: 'Tag',
         inputAttrs: {
-          maxlength: 20,
-          value: this.name
+          maxlength: 20
         },
         confirmText: 'Add',
-        onConfirm: (value) => {
-          this.addNewTag(value)
-          var category = this.tagList.filter((tag) => {
-            return tag.name === this.selectedCategory
-          })
-          category[0].types.push(value)
+        onConfirm: async (value) => {
+          await this.addNewTag(value, categoryId)
+          this.aviablesTags = await this.getTags()
         }
       })
     },
-    async addNewTag (tag) {
+    async addNewTag (tag, categoryId) {
       const url = this.$serverurl + 'models/tags'
+      const token = await localStorage.getItem('token')
       try {
         const response = await fetch(
           url, {
             method: 'POST',
             headers: {
               Accept: 'application/json',
-              'Content-Type': 'application/json'
+              'Content-Type': 'application/json',
+              Authorization: 'Bearer ' + token
             },
             body: JSON.stringify({
-              name: this.selectedCategory,
-              type: tag
+              name: tag,
+              categoryId: categoryId
             })
           }
         )
@@ -119,23 +123,19 @@ export default {
         return null
       }
     },
-    addTagToModel () {
-      this.tags.push({
-        name: this.selectedCategory,
-        type: this.tagName
-      })
-      this.tagName = ''
+    addTagToModel (tag) {
+      this.modelTags.push(tag)
       this.syncToParent()
     },
     removeTagFromModel (tag) {
-      const index = this.tags.indexOf(tag)
+      const index = this.modelTags.indexOf(tag)
       if (index > -1) {
-        this.tags.splice(index, 1)
+        this.modelTags.splice(index, 1)
       }
       this.syncToParent()
     },
     syncToParent () {
-      this.$emit('update-tags', this.tags)
+      this.$emit('update-tags', this.modelTags)
     }
   }
 }

src/components/TagEditorOLD.vue

+<template>
+  <div class="tagEditor">
+    <b-field position="is-centered" has-addons>
+      <b-autocomplete
+        v-model="tagName"
+        :open-on-focus="true"
+        :data="filteredTags"
+        icon-right="close-circle"
+        icon-right-clickable>
+        <template slot="header">
+          <a @click="addNewTagDialog">
+            <span> Add new... </span>
+          </a>
+        </template>
+      </b-autocomplete>
+      <p class="control">
+        <b-select placeholder="Select a category" v-model="selectedCategory">
+          <option v-for="category in tagList" v-bind:key="category.name" :value="category.name">{{category.name}}</option>
+        </b-select>
+      </p>
+      <p class="control">
+        <b-button class="control is-primary" @click="addTagToModel">Add</b-button>
+      </p>
+    </b-field>
+
+    <b-taglist>
+      <b-tag
+        v-for="tag in tags"
+        v-bind:key="tag.name"
+        type="is-info"
+        @close="removeTagFromModel(tag)"
+        closable>
+      {{tag.name}}
+      </b-tag>
+    </b-taglist>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TagEditor',
+  props: {
+    tags: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      tagName: '',
+      selectedCategory: null,
+      tagList: []
+    }
+  },
+  computed: {
+    filteredTags () {
+      if (this.selectedCategory === null) return []
+      var category = this.tagList.filter((tag) => {
+        return tag.name === this.selectedCategory
+      })
+      return category[0].tags.filter((tag) => {
+        return tag
+          .toString()
+          .toLowerCase()
+          .indexOf(this.tagName.toLowerCase()) >= 0
+      })
+    }
+  },
+  async mounted () {
+    this.tagList = await this.getTags()
+  },
+  methods: {
+    async getTags () {
+      const url = this.$serverurl + 'models/tags'
+      const response = await fetch(url)
+      try {
+        return await response.json()
+      } catch (error) {
+        return null
+      }
+    },
+    addNewTagDialog () {
+      this.$buefy.dialog.prompt({
+        message: 'Tag',
+        inputAttrs: {
+          maxlength: 20,
+          value: this.name
+        },
+        confirmText: 'Add',
+        onConfirm: (value) => {
+          this.addNewTag(value)
+          var category = this.tagList.filter((tag) => {
+            return tag.name === this.selectedCategory
+          })
+          category[0].types.push(value)
+        }
+      })
+    },
+    async addNewTag (tag) {
+      const url = this.$serverurl + 'models/tags'
+      try {
+        const response = await fetch(
+          url, {
+            method: 'POST',
+            headers: {
+              Accept: 'application/json',
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              name: this.selectedCategory,
+              type: tag
+            })
+          }
+        )
+        return await response.json()
+      } catch (error) {
+        return null
+      }
+    },
+    addTagToModel () {
+      this.tags.push({
+        name: this.selectedCategory,
+        type: this.tagName
+      })
+      this.tagName = ''
+      this.syncToParent()
+    },
+    removeTagFromModel (tag) {
+      const index = this.tags.indexOf(tag)
+      if (index > -1) {
+        this.tags.splice(index, 1)
+      }
+      this.syncToParent()
+    },
+    syncToParent () {
+      this.$emit('update-tags', this.tags)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/main.js

@@ -9,7 +9,7 @@ Vue.use(Buefy)
 Vue.config.productionTip = false
 
 // Vue.prototype.$serverurl = process.env.VUE_APP_SERVER_URL
-Vue.prototype.$serverurl = 'http://localhost:8181/v1/'
+Vue.prototype.$serverurl = 'http://localhost:8181/'
 
 new Vue({
   router,

src/views/Model.vue

@@ -10,30 +10,28 @@
           <h1 class="title is-1">{{model.name}}</h1>
           <h2 class="subtitle">{{model.shortDescription}}</h2>
           <b-taglist>
-            <b-tag v-for="tag in model.tags" v-bind:key="tag.type" type="is-info">{{tag.type}}</b-tag>
-            <b-tag type="is-info">{{model.performance}}%</b-tag>
+            <b-tag v-for="tag in model.tags" v-bind:key="tag.name" type="is-info">{{tag.name}}</b-tag>
           </b-taglist>
         </div>
         <div class="column infoColumn">
           <h1 class="title is-4">{{model.vote}} votes <b-button size="is-small" icon-left="heart-outline" style="top:-2px"/></h1>
-          <small>Author: </small><strong>{{model.author}}</strong>
+          <small>Author: </small><strong>{{model.author.username}}</strong>
           <br>
           <small>Added: </small><strong>{{new Date(model.addedDate).toLocaleDateString()}}</strong>
           <br>
           <small>Last modification: </small><strong>{{new Date(model.modificationDate).toLocaleDateString()}}</strong>
           <br>
           <br>
-          <b-button type="is-primary" size="is-medium" icon-left="download">
+          <b-button type="is-primary" size="is-medium" icon-left="download" @click="downloadModel(model.id)">
             Download model
           </b-button>
           <hr>
           <strong>{{model.customLayers.length}} customs layers</strong>
           <br>
           <template v-for="layer in model.customLayers">
-            <b-button class="customLayer" type="is-primary" icon-left="download" v-bind:key="layer.name">
+              <b-button class="customLayer" type="is-primary" icon-left="download" v-bind:key="layer.name" @click="downloadLayer(layer.id)">
               Download {{layer.name}}
               </b-button>
-            <br v-bind:key="layer.name">
           </template>
         </div>
       </div>
@@ -91,6 +89,10 @@ export default {
       } catch (error) {
         return null
       }
+    },
+    downloadModel (id) {
+    },
+    downloadLayer (id) {
     }
   }
 }

src/views/Search.vue

@@ -20,7 +20,7 @@
             <option value="date">Most recent</option>
           </b-select>
         </b-field>
-        <h1 class="title is-6">{{result.total}} result - page {{result.page}}</h1>
+        <h1 class="title is-6">{{result.total}} results - page {{result.page}}</h1>
         <div v-for="model in result.models" v-bind:key="model.name">
           <ModelCard v-bind:model="model"/>
         </div>
@@ -94,9 +94,9 @@ export default {
       const url = new URL(this.$serverurl + 'search')
       const params = new URLSearchParams()
 
-      if (this.paramSearch != null) params.append('q', this.paramSearch)
+      if (this.paramSearch != null) params.append('name', this.paramSearch)
       if (this.paramTags != null) params.append('tag', this.paramTags)
-      if (this.paramPerf != null) params.append('perf', this.paramPerf)
+      if (this.paramPerf != null) params.append('param', this.paramPerf)
       if (this.paramOrder != null) params.append('order', this.paramOrder)
 
       params.append('size', this.resultSize)