Model add improvements

src/components/LayersEditor.vue

@@ -6,7 +6,7 @@
       <b-button class="addButton" icon-left="plus-box" type="is-info" @click="addLayer" expanded> Add custom layer </b-button>
     </b-field>
 
-    <b-field v-for="(layer, index) in layers" v-bind:key="layer.name" grouped position="is-centered">
+    <b-field v-for="(layer, index) in layers" v-bind:key="index" grouped position="is-centered">
 
       <p class="control">
         <b-button icon-left="close-circle" type="is-danger" outlined @click="deleteLayer(layer)"/>
@@ -15,13 +15,14 @@
       <b-input :placeholder="'Layer ' + index + ' name'" v-model="layer.name"/>
 
       <p class="control">
-        <b-upload v-model="layer.file" accept=".py">
+        <span class="file-name" v-if="layer.file">{{ layer.file.name }}</span>
+
+        <b-upload v-else v-model="layer.file">
           <a class="button is-primary">
             <b-icon icon="upload"></b-icon>
             <span>Upload layer file</span>
           </a>
         </b-upload>
-        <span class="file-name" v-if="layer.file">{{ layer.file.name }}</span>
       </p>
 
     </b-field>
@@ -45,12 +46,17 @@ export default {
         id: this.layers.length,
         name: null
       })
+      this.syncToParent()
     },
     deleteLayer (layer) {
       const index = this.layers.indexOf(layer)
       if (index > -1) {
         this.layers.splice(index, 1)
       }
+      this.syncToParent()
+    },
+    syncToParent () {
+      this.$emit('update-layers', this.layers)
     }
   }
 }

src/components/MarkdownEditor.vue

@@ -25,6 +25,7 @@ export default {
   },
   computed: {
     compiledMarkdown: function () {
+      this.$emit('update-description', this.input)
       return marked(this.input)
     }
   }

src/components/ModelUpload.vue

 <template>
   <div class="modal-card">
     <b-progress :value="progress" size="is-large" show-value :type="status">
-      {{message}}
+      {{statusMessage}}
     </b-progress>
+    <b-progress v-if="subProgress" size="is-medium">
+      {{subMessage}}
+    </b-progress>
+    <b-button
+     v-if="progress === 100"
+     type="is-success"
+     tag="router-link"
+     :to="{ name: 'Model', query: { id: modelId } }"
+    >
+    Go to model page
+    </b-button>
   </div>
 </template>
 
@@ -19,10 +30,11 @@ export default {
   },
   data () {
     return {
-      message: '',
       progress: 0,
       status: 'is-primary',
-      stausMessage: '',
+      statusMessage: '',
+      subProgress: false,
+      subMessage: '',
       modelId: null
     }
   },
@@ -33,28 +45,31 @@ export default {
     setProgress (step) {
       switch (step) {
         case 0:
-          this.message = 'Sending description'
+          this.statusMessage = 'Sending description'
           this.progress = 25
           break
         case 1:
-          this.message = 'Sending model file'
+          this.statusMessage = 'Sending model file'
           this.progress = 50
           break
         case 2:
-          this.message = 'Sending custom layers model'
+          this.statusMessage = 'Sending custom layers model'
           this.progress = 75
           break
         case 3:
-          this.message = 'Upload completed !'
+          this.statusMessage = 'Upload completed !'
           this.progress = 100
           this.status = 'is-success'
           break
       }
     },
     setError (message) {
-      this.message = message
+      this.statusMessage = message
       this.status = 'is-danger'
     },
+    setSubMessage (message) {
+      this.subMessage = message
+    },
     async saveModel () {
       this.setProgress(0)
       var response = await this.uploadModel()
@@ -125,18 +140,22 @@ export default {
           },
           body: data
         })
-        return response !== 200
+        if (response.status !== 200) return false
+        return true
       } catch (error) {
-        return null
+        return false
       }
     },
     async uploadLayers () {
+      this.subProgress = true
       const token = await localStorage.getItem('token')
       for (var i = 0; i < this.model.customLayers.length; i++) {
         const layer = this.model.customLayers[i]
         const data = new FormData()
         const url = this.$serverurl + 'models?id=' + this.modelId + '/layer?id=' + i
 
+        this.subMessage = 'Uploading ' + layer.name
+
         console.log('Upload layers ' + i + ' | ' + layer.file)
         if (layer.file === undefined) continue
 
@@ -150,11 +169,12 @@ export default {
             },
             body: data
           })
-          if (response !== 200) return false
+          if (response.status !== 200) return false
         } catch (error) {
           return false
         }
       }
+      this.subProgress = false
       return true
     }
   }

src/components/ModelValidator.vue

+<template>
+  <div class="modelValidator">
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ModelValidator',
+  props: {
+    model: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      errorMessage: ''
+    }
+  },
+  methods: {
+    validate () {
+      if (this.model.name === undefined || this.model.name === null || this.model.name === '') {
+        this.errorMessage = 'The model name is empty'
+        return false
+      }
+
+      return true
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/components/TagEditor.vue

@@ -57,11 +57,9 @@ export default {
   computed: {
     filteredTags () {
       if (this.selectedCategory === null) return []
-      console.log('SELECT ' + this.selectedCategory)
       var category = this.tagList.filter((tag) => {
         return tag.name === this.selectedCategory
       })
-      console.log('SELECT ' + category)
       return category[0].types.filter((type) => {
         return type
           .toString()
@@ -127,12 +125,17 @@ export default {
         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)
     }
   }
 }

src/views/Model.vue

 <template>
   <div class="model container">
     <div v-if="isError" class="error">
-      <h1 class="title is-1">Erreur</h1>
-      <h2 class="subtitle">Modèle introuvable</h2>
+      <h1 class="title is-1">Error</h1>
+      <h2 class="subtitle">Cant find model</h2>
     </div>
     <div v-else>
       <div class="columns box">

src/views/ModelAdd.vue

@@ -11,12 +11,12 @@
         </b-field>
 
         <b-field label="Long description">
-          <markdownEditor v-bind:input="model.longDescription"/>
+          <markdownEditor v-bind:input="model.longDescription" v-on:update-description="model.longDescription = $event"/>
         </b-field>
       </b-step-item>
 
       <b-step-item step="2" label="Tags" clickable>
-        <tagEditor v-bind:tags="model.tags"/>
+        <tagEditor v-bind:tags="model.tags" v-on:update-tags="model.tags = $event"/>
       </b-step-item>
 
       <b-step-item step="3" label="Files" clickable>
@@ -31,11 +31,12 @@
               </div>
             </section>
           </b-upload>
+          <span v-if="model.file" class="file-name">{{ model.file.name }}</span>
         </b-field>
       </b-step-item>
 
       <b-step-item step="4" label="Custom layers" clickable>
-        <layersEditor v-bind:layers="model.customLayers"/>
+        <layersEditor v-bind:layers="model.customLayers" v-on:update-layers="model.customLayers = $event"/>
       </b-step-item>
 
       <b-step-item step="5" label="Finish" clickable>