Merge pull request #588 from kvpt/service

Fix service handling in announcements page

frontend/src/components/Dashboard/DashboardMessages.vue

@@ -13,11 +13,10 @@
             </tr>
           </thead>
           <tbody>
-
-            <tr v-for="(message, index) in $store.getters.messages" v-bind:key="index">
+            <tr v-for="message in $store.getters.messages" v-bind:key="message.id">
               <td>{{message.title}}</td>
               <td class="d-none d-md-table-cell">
-                    <router-link :to="serviceLink(message.service)">{{service(message.service)}}</router-link>
+                <router-link :to="serviceLink(service(message.service))">{{serviceName(service(message.service))}}</router-link>
               </td>
               <td class="d-none d-md-table-cell">{{niceDate(message.start_on)}}</td>
               <td class="text-right">
@@ -27,12 +26,10 @@
                 </div>
               </td>
             </tr>
-
           </tbody>
         </table>
       </div>
     </div>
-
     <FormMessage v-if="$store.state.admin" :edit="editChange" :in_message="message"/>
   </div>
 </template>
@@ -60,8 +57,10 @@
       this.edit = !mode
     },
     service (id) {
-      const s = this.$store.getters.serviceById(id) || {}
-      return s.name || "Global Message"
+      return this.$store.getters.serviceById(id) || {}
+    },
+    serviceName (service) {
+      return service.name || "Global Message"
     },
     async deleteMessage(m) {
       let c = confirm(`Are you sure you want to delete message '${m.title}'?`)

frontend/src/forms/Message.vue

@@ -1,8 +1,7 @@
 <template>
-<div>
+  <div>
     <div class="card contain-card text-black-50 bg-white mb-5">
       <div class="card-header">{{message.id ? `Update ${message.title}` : "Create Announcement"}}
-
         <transition name="slide-fade">
           <button @click="removeEdit" v-if="message.id" class="btn btn-sm float-right btn-danger btn-sm">Close</button>
         </transition>
@@ -26,9 +25,9 @@
           <div class="form-group row">
             <label class="col-sm-4 col-form-label">Service</label>
             <div class="col-sm-8">
-                <select v-model="message.service_id" name="service_id" class="form-control">
+              <select v-model="message.service" name="service_id" class="form-control">
                 <option :value="0">Global Announcement</option>
-                    <option v-for="(service, i) in $store.getters.services" :value="service.id" >{{service.name}}</option>
+                <option v-for="service in $store.getters.services" :value="service.id" v-bind:key="service.id" >{{service.name}}</option>
               </select>
             </div>
           </div>
@@ -46,9 +45,9 @@
           <div v-show="this.service === null" class="form-group row">
             <label for="service_id" class="col-sm-4 col-form-label">Service</label>
             <div class="col-sm-8">
-                <select v-model="message.service_id" class="form-control" name="service" id="service_id">
+              <select v-model="message.service" class="form-control" name="service" id="service_id">
                 <option :value="0">Global Message</option>
-                    <option v-for="(service, index) in $store.getters.services" :value="service.id" v-bind:key="index" >{{service.name}}</option>
+                <option v-for="service in $store.getters.services" :value="service.id" v-bind:key="service.id">{{service.name}}</option>
               </select>
             </div>
           </div>
@@ -97,7 +96,7 @@
         </form>
       </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>

frontend/src/mixin.js

@@ -92,12 +92,15 @@ export default Vue.mixin({
       if (service.permalink) {
         service = this.$store.getters.serviceByPermalink(service.permalink)
       }
-      if (service===undefined) {
+      if (service===undefined || this.isEmptyObject(service)) {
         return `/service/0`
       }
       let link = service.permalink ? service.permalink : service.id
       return `/service/${link}`
     },
+    isEmptyObject(obj) {
+      return Object.keys(obj).length === 0 && obj.constructor === Object
+    },
     isInt(n) {
       return n % 1 === 0;
     },