Added store and additional actions.

frontend/src/components/DomainForm.vue

@@ -2,10 +2,12 @@
   <div>
     <h1 class="title">Add domain</h1>
     <form>
-      <b-field label="Name">
+      <b-field label="Name" :type="formErrors && formErrors.name ? 'is-danger' : ''"
+               :message="formErrors && formErrors.name ? formErrors.name[0] : ''">
         <b-input v-model="domain.name"></b-input>
       </b-field>
-      <b-field label="Quota">
+      <b-field label="Quota" :type="formErrors && formErrors.quota ? 'is-danger' : ''"
+               :message="formErrors && formErrors.quota ? formErrors.quota[0] : ''">
         <b-input v-model="domain.quota"></b-input>
       </b-field>
       <b-field>
@@ -16,18 +18,50 @@
 </template>
 
 <script>
-import * as api from '@/api'
-
 export default {
     data () {
         return {
+            formErrors: {},
             domain: {}
         }
     },
+    mounted () {
+        var domainPk = this.$route.params.domainPk
+        if (domainPk) {
+            if (!this.$store.state.domainsLoaded) {
+                this.$store.dispatch('getDomains').then(response => {
+                    this.loadDomain(domainPk)
+                })
+            } else {
+                this.loadDomain(domainPk)
+            }
+        }
+    },
     methods: {
+        loadDomain (pk) {
+            this.domain = JSON.parse(JSON.stringify(this.$store.getters.getDomainByPk(pk)))
+        },
+        onSaveError (response) {
+            this.formErrors = response.data
+        },
         saveDomain () {
-            api.createDomain(this.domain).then(response => {
-            })
+            var action
+            var msg
+            if (this.domain.pk) {
+                action = 'updateDomain'
+                msg = 'Domain updated.'
+            } else {
+                action = 'createDomain'
+                msg = 'Domain created.'
+            }
+            this.$store.dispatch(action, this.domain).then(response => {
+                this.$router.push({ name: 'DomainList' })
+                this.$toast.open({
+                    message: msg,
+                    type: 'is-success',
+                    position: 'is-bottom'
+                })
+            }, this.onSaveError)
         }
     }
 }

frontend/src/components/DomainList.vue

@@ -5,11 +5,16 @@
         <h1 class="title">Domains</h1>
       </div>
       <div class="column">
-        <router-link :to="{ name: 'DomainAdd' }">Add</router-link>
+        <router-link :to="{ name: 'DomainAdd' }" class="button is-primary">Add</router-link>
       </div>
     </div>
     <b-table :data="domains" checkable>
       <template slot-scope="props">
+        <b-table-column>
+          <router-link :to="{ name: 'DomainEdit', params: { domainPk: props.row.pk }}">
+            <b-icon icon="pencil"></b-icon>
+          </router-link>
+        </b-table-column>
         <b-table-column field="name" label="Name">
           {{ props.row.name }}
         </b-table-column>
@@ -22,13 +27,16 @@
 </template>
 
 <script>
-import * as api from '@/api'
+import { mapGetters } from 'vuex'
 
 export default {
+    computed: mapGetters([
+        'domains'
+    ]),
     data () {
         return {
-            domains: [],
             columns: [
+                {},
                 {
                     field: 'name',
                     label: 'Name'
@@ -41,9 +49,7 @@ export default {
         }
     },
     created () {
-        api.getDomains().then(response => {
-            this.domains = response.data
-        })
+        this.$store.dispatch('getDomains')
     }
 }
 </script>