added delete and update functions to ipnetwork

public/js/pages/IpNetwork/IpNetwork.js

@@ -17,7 +17,7 @@ Vue.component('IpNetwork', {
               <i class="fas fa-sync-alt"></i>Go Back
             </button>
 
-            <button type="button" class="btn btn-primary" @click="addModal = true">
+            <button type="button" class="btn btn-primary" @click="openModal(false)">
               <i class="fas fa-sync-alt"></i>Add new Network Space
             </button>
 
@@ -28,6 +28,13 @@ Vue.component('IpNetwork', {
                 <span style="white-space: pre;" v-if="row.description" v-text="row.description"></span>
                 <span v-else>No description</span>
             </template>
+          
+          <template v-slot:actions="{ row }">
+            <div style="display: flex; justify-content: space-around; align-items: center; min-width: 20px">
+              <a style="cursor: pointer;" @click.stop="openModal(row)"><i class="far fa-edit text-primary"
+                                                                         title="Editieren"></i></a>
+            </div>
+          </template>
 
         </tt-table>
 
@@ -47,11 +54,12 @@ Vue.component('IpNetwork', {
                   <div class="form-group">
                     <label for="network_address">Network Address</label>
                     <input type="text" class="form-control" id="network_address"
+                           :disabled="!!addModalData.id"
                            v-model="addModalData.network_address">
                   </div>
                   <div class="form-group">
                     <label for="cidr">CIDR</label>
-                    <input type="text" class="form-control" id="cidr" v-model="addModalData.cidr">
+                    <input type="text" class="form-control" id="cidr" :disabled="!!addModalData.id" v-model="addModalData.cidr">
                   </div>
                   <div class="form-group">
                     <label for="status">Status</label>
@@ -83,6 +91,7 @@ Vue.component('IpNetwork', {
               </div>
               <div class="modal-footer">
                 <button class="btn btn-primary" @click="addSubmit">Save</button>
+                <button class="btn btn-danger" @click="deleteSubmit" v-if="addModalData.id">Delete</button>
                 <button class="btn btn-secondary" @click="addModal = false">Close</button>
               </div>
             </div>
@@ -112,6 +121,7 @@ Vue.component('IpNetwork', {
                             {value: 'reserved', text: 'Reserved', icon: 'fas fa-lock text-warning'}]
                     },
                     {text: 'Children', key: 'children', filter: 'numberRange'},
+                    {text: 'Aktionen', key: 'actions', sortable: false},
                 ],
                 tableHeader: 'IPAM',
                 key: 'IpNetwork'
@@ -140,6 +150,34 @@ Vue.component('IpNetwork', {
 
     },
     methods: {
+        openModal(row = false) {
+            if (row) {
+                const data = JSON.parse(JSON.stringify(row));
+
+
+                this.addModalData = {
+                    id: data.id,
+                    network_address: data.network_address_str.split('/')[0],
+                    cidr: data.cidr,
+                    parent_network_id: this.currentNetworkData ? this.currentNetworkData.id : '',
+                    status: data.status,
+                    name: data.name,
+                    description: data.description,
+                    location: data.location,
+                }
+            } else {
+                this.addModalData = {
+                    network_address: '',
+                    cidr: '',
+                    parent_network_id: this.currentNetworkData ? this.currentNetworkData.id : '',
+                    status: 'active',
+                    name: '',
+                    description: '',
+                    location: '',
+                };
+            }
+            this.addModal = true;
+        },
         async switchCurrentNetwork(networkId = null) {
             if (!networkId) {
                 this.$refs.table.$set(this.$refs.table.filters, 'parent_network_id', undefined);
@@ -159,18 +197,30 @@ Vue.component('IpNetwork', {
             await this.$refs.table.fetchData();
         },
         async addSubmit() {
-            const response = await axios.post(`${this.apiUrl}?do=create`,
+            const response = await axios.post(`${this.apiUrl}?do=${this.addModalData.id ? 'update' : 'create'}`,
                 {
                     ...this.addModalData,
                     parent_network_id: this.currentNetworkData ? this.currentNetworkData.id : null
                 });
             if (response.data.status === 'success') {
                 this.addModal = false;
+                this.addModalData = {};
                 window.notify('success', 'Network space created successfully');
                 await this.$refs.table.fetchData();
             } else {
                 window.notify('error', response.data.message);
             }
         },
+        async deleteSubmit() {
+            const response = await axios.post(`${this.apiUrl}?do=delete`, {id: this.addModalData.id});
+            if (response.data.status === 'success') {
+                this.addModal = false;
+                this.addModalData = {};
+                window.notify('success', 'Network space deleted successfully');
+                await this.$refs.table.fetchData();
+            } else {
+                window.notify('error', response.data.message);
+            }
+        }
     },
 })