RES-1892 Add ability to edit network data for groups.

app/Http/Resources/Group.php

@@ -279,7 +279,7 @@ public function toArray($request)
             'tags' => new TagCollection($this->group_tags),
             'timezone' => $this->timezone,
             'approved' => $this->approved ? true : false,
-            'network_data' => $this->network_data,
+            'network_data' => gettype($this->network_data) == 'string' ? json_decode($this->network_data, true) : $this->network_data,
             'full' => true
         ];
 

lang/en/networks.php

@@ -35,5 +35,8 @@
   'edit' => [
     'label_logo' => 'Network logo',
     'button_save' => 'Save changes',
+    'add_new_field' => 'Add new field',
+    'new_field_name' => 'New field name',
+    'add_field' => 'Add field',
   ],
 ];

lang/fr-BE/networks.php

@@ -4,6 +4,9 @@
   'edit' => [
     'button_save' => 'Sauver les changements',
     'label_logo' => 'Logo du réseau',
+    'add_new_field' => 'Ajouter un nouveau champ',
+    'new_field_name' => 'Nouveau nom de champ',
+    'add_field' => 'Ajouter le champ',
   ],
   'general' => [
     'network' => 'Réseau',

lang/fr/networks.php

@@ -4,6 +4,9 @@
   'edit' => [
     'button_save' => 'Sauver les changements',
     'label_logo' => 'Logo du réseau',
+    'add_new_field' => 'Ajouter un nouveau champ',
+    'new_field_name' => 'Nouveau nom de champ',
+    'add_field' => 'Ajouter le champ',
   ],
   'general' => [
     'network' => 'Réseau',

resources/js/components/GroupAddEdit.vue

@@ -85,7 +85,7 @@
         <b-card-body>
           <div v-if="canNetwork">
             <label for="networks">
-              {{ __('networks.networks') }}
+              {{ __('networks.networks') }}:
             </label>
             <multiselect
                 id="networks"
@@ -104,7 +104,7 @@
           </div>
           <div class="mt-2" v-if="canNetwork">
             <label for="tags">
-              {{ __('groups.group_tags') }}
+              {{ __('groups.group_tags') }}:
             </label>
             <multiselect
                 id="tags"
@@ -138,6 +138,7 @@
               </b-select>
             </b-form-group>
           </div>
+          <NetworkData :network-data.sync="networkData" />
         </b-card-body>
       </b-card>
 
@@ -178,13 +179,15 @@ import GroupLocationMap from './GroupLocationMap'
 import GroupTimeZone from './GroupTimeZone'
 import GroupPhone from './GroupPhone'
 import GroupImage from './GroupImage'
+import NetworkData from './NetworkData'
 
 function geocodeableValidation () {
   return this.lat !== null && this.lng !== null
 }
 
 export default {
   components: {
+    NetworkData,
     GroupTimeZone,
     RichTextEditor,
     GroupName,
@@ -232,7 +235,8 @@ export default {
       approved: false,
       edited: false,
       networkList: null,
-      tagList: null
+      tagList: null,
+      networkData: {}
     }
   },
   validations: {
@@ -332,6 +336,7 @@ export default {
       this.approved = group.approved
       this.networkList = group.networks
       this.tagList = group.tags
+      this.networkData = group.network_data
     }
 
     if (this.canNetwork) {
@@ -396,7 +401,8 @@ export default {
                 image: this.image,
                 moderate: this.moderate,
                 networks: JSON.stringify(this.networkList.map(n => n.id)),
-                tags: JSON.stringify(this.tagList.map(n => n.id))
+                tags: JSON.stringify(this.tagList.map(n => n.id)),
+                network_data: JSON.stringify(this.networkData)
               })
 
               if (id) {

resources/js/components/NetworkData.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <NetworkDataField v-for="key in Object.keys(currentNetworkData)" :key="'networkdata-' + key" :label="key" :value="currentNetworkData[key] ? currentNetworkData[key] : null" @update:value="update(key, $event)" class="mt-1" />
+    <b-btn v-if="!showAddNew" variant="link" @click="showAddNew = true" class="small pl-0">{{ __('networks.edit.add_new_field') }}</b-btn>
+    <div v-if="showAddNew" class="mt-1">
+      <label>{{ __('networks.edit.new_field_name') }}:</label>
+      <b-form-input v-model="newLabel" />
+      <b-btn variant="primary" @click="addNew" class="mt-2">
+        {{ __('networks.edit.add_field') }}
+      </b-btn>
+    </div>
+  </div>
+</template>
+<script>
+import Vue from 'vue'
+import NetworkDataField from "./NetworkDataField"
+
+export default {
+  props: {
+    networkData: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    NetworkDataField,
+  },
+  data() {
+    return {
+      currentNetworkData: null,
+      showAddNew: false,
+      newLabel: null,
+    }
+  },
+  created() {
+    this.currentNetworkData = this.networkData
+  },
+  watch: {
+    currentNetworkData: {
+      handler: function (newValue) {
+        if (newValue) {
+          this.$emit('update:networkData', newValue)
+        }
+      },
+      immediate: true,
+    },
+    networkData: {
+      handler: function (newValue) {
+        this.currentNetworkData = newValue
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    update(key, value) {
+      if (key) {
+        if (!this.currentNetworkData) {
+          this.currentNetworkData = {}
+        }
+
+        Vue.set(this.currentNetworkData, key, value)
+      }
+    },
+    addNew() {
+      if (!this.currentNetworkData) {
+        this.currentNetworkData = {}
+      }
+
+      Vue.set(this.currentNetworkData, this.newLabel, null)
+      this.showAddNew = false
+    }
+  }
+}
+</script>

resources/js/components/NetworkDataField.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <label>{{ label }}</label>:
+    <b-form-input v-model="currentValue" />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      required: false,
+      default: null
+    },
+  },
+  data () {
+    return {
+      currentValue: null,
+    }
+  },
+  watch: {
+    value: {
+      handler: function (newValue) {
+        this.currentValue = newValue;
+      },
+      immediate: true,
+    },
+    currentValue: {
+      handler: function (newValue) {
+        this.$emit('update:value', newValue)
+      },
+      immediate: true,
+    }
+  }
+}
+</script>

resources/views/partials/log-accordion.blade.php

@@ -17,7 +17,11 @@
                           <tr>
                             {{-- Some updated data is an array. --}}
                             @php($modified['new'] = is_array($modified['new']) ? json_encode($modified['new']) : $modified['new'])
+                            @if(gettype($modified) == 'string')
                             <td>@lang($type.'.'.$audit->event.'.modified.'.$attribute, $modified)</td>
+                            @else
+                            <td><?php echo $type.'.'.$audit->event.'.modified.'.$attribute . " " . json_encode($modified) ?></td>
+                            @endif
                           </tr>
                       @endforeach
                     </tbody>