Vue admin application#410
Conversation
| // install router | ||
| Vue.use(VueRouter); | ||
|
|
||
| const router = new VueRouter({ |
There was a problem hiding this comment.
The linter will complain about the const, only available in ES6
|
|
||
| const app = new Vue({ | ||
| router | ||
| }).$mount('#app'); |
There was a problem hiding this comment.
If I understand correctly, it's equivalent to set the "el" attribute like this:
const app = new Vue({
el: "#app",
router: router
})| }); | ||
|
|
||
| const app = new Vue({ | ||
| router |
There was a problem hiding this comment.
Only available in ES6, should be router: router
| mounted: function() { | ||
| resources.Stats.retrieve() | ||
| .done((function(rep) { | ||
| this.$data.realm = rep.realm; |
There was a problem hiding this comment.
this.realm also works, idem for all data attributes
| this.$emit('closed'); | ||
| }, | ||
| createNewUser: function() { | ||
| var user_name = $.trim(this.name); |
There was a problem hiding this comment.
I don't understand why JQuery implements the trim function... It's equivalent to the Javascript method this.name.trim(), am I right ? So we should use the built in method instead of depending on a library for that.
| name: items[id].name | ||
| }); | ||
| }); | ||
| this.$data.users = users; |
| close: function () { | ||
| this.$emit('closed'); | ||
| }, | ||
| fieldClassName: function (field) { |
There was a problem hiding this comment.
should be in the template directly, it will reduce your code:
:class="{ 'has-error': formstate.name && (formstate.name.$touched || formstate.name.$submitted) && formstate.name.$invalid }"It's one long line vs 11 lines
| }); | ||
| this.containers = containers; | ||
| }).bind(this)) | ||
| .fail(function () { |
| }); | ||
| this.users = users; | ||
| }).bind(this)) | ||
| .fail(function () { |
| `, | ||
| props: ['accToRemove'], | ||
| methods: { | ||
| close: function () { |
There was a problem hiding this comment.
No need for a close method, you can put this in the template directly to save some lines of code
| <div class="modal-body">Do you want to remove accounting {{ accToRemove.id }}?</div> | ||
|
|
||
| <div class="modal-footer text-right"> | ||
| <button type="button" class="btn btn-default" @click="close">Cancel</button> |
Codecov Report
@@ Coverage Diff @@
## master #410 +/- ##
==========================================
+ Coverage 95.3% 95.33% +0.03%
==========================================
Files 92 88 -4
Lines 4090 4077 -13
Branches 257 259 +2
==========================================
- Hits 3898 3887 -11
+ Misses 141 138 -3
- Partials 51 52 +1
Continue to review full report at Codecov.
|
| @@ -21,4 +21,4 @@ def get(self): | |||
| num_images=len(app.db.list_applications()), | |||
| num_running_containers=len(containers) | |||
There was a problem hiding this comment.
all these entries in the context must go away.
| ] | ||
| }); | ||
|
|
||
| Vue.component("modal", |
There was a problem hiding this comment.
modal-component
Replace the full administrative interface with a Vue based implementation.