improve announcement management

components/Announcement.vue

@@ -10,11 +10,6 @@ export default {
   props: {
     announcement: { type: Object, default: () => ({}) }
   },
-  computed: {
+  computed: mapState(['announcements'])
-    ...mapState(['announcements']),
-    description () {
-      return this.announcement.announcement.replace(/(<br>)+/g, '<br>')
-    }
-  }
 }
 </script>

components/admin/Announcement.vue

@@ -6,14 +6,16 @@
       v-card
         v-card-title {{$t('admin.new_announcement')}}
         v-card-text.px-0
-          v-form(v-model='valid' ref='announcement' @submit.prevent='save')
+          v-form(v-model='valid' ref='announcement' @submit.prevent='save' lazy-validation)
-            v-text-field.col-12(v-model='announcement.title' :label='$t("common.title")')
+            v-text-field.col-12(v-model='announcement.title'
+              :rules="[$validators.required('common.title')]"
+              :label='$t("common.title")')
             Editor.col-12(v-model='announcement.announcement'
               border no-save max-height='400px' :placeholder="$t('common.description')")
         v-card-actions
           v-spacer
           v-btn(@click='dialog=false' color='error') {{$t('common.cancel')}}
-          v-btn(@click='save' color='primary' :disabled='loading' :loading='loading') {{$t(`common.${editing?'save':'send'}`)}}
+          v-btn(@click='save' color='primary' :disabled='!valid || loading' :loading='loading') {{$t(`common.${editing?'save':'send'}`)}}
 
     v-btn(@click='openDialog' text color='primary') <v-icon>mdi-plus</v-icon> {{$t('common.add')}}
     v-card-text
@@ -86,6 +88,7 @@ export default {
         })
     },
     async save () {
+      if (!this.$refs.announcement.validate()) { return }
       this.loading = true
       try {
         let announcement = null

components/admin/Federation.vue

@@ -55,7 +55,7 @@
               v-btn(color='error' @click='dialogAddInstance=false') {{$t('common.cancel')}}
               v-btn(color='primary' :disabled='!valid' @click='createTrustedInstance') {{$t('common.ok')}}
 
-        v-btn.mt-4(@click='dialogAddInstance = true' color='primary' text) <v-icon>mdi-plus</v-icon> Add instance
+        v-btn.mt-4(@click='dialogAddInstance = true' color='primary' text) <v-icon>mdi-plus</v-icon> {{$t('admin.add_instance')}}
         v-data-table(
           v-if='settings.trusted_instances.length'
           :hide-default-footer='settings.trusted_instances.length<10'

locales/en.json

@@ -172,6 +172,7 @@
         "federation": "Federation / ActivityPub",
         "enable_federation": "Turn on federation",
         "enable_federation_help": "It will be possible to follow this instance from the fediverse",
+        "add_instance": "Add instance",
         "select_instance_timezone": "Time zone",
         "enable_resources": "Turn on resources",
         "enable_resources_help": "Allows adding resources to the event from the fediverse",

locales/it.json

@@ -176,6 +176,7 @@
         "federation": "Federazione / ActivityPub",
         "enable_federation": "Abilita la federazione",
         "enable_federation_help": "Sarà possibile seguire questa istanza dal fediverso",
+        "add_instance": "Aggiungi istanza",
         "select_instance_timezone": "Fuso orario",
         "instance_timezone_description": "Gancio è pensato per raccogliere gli eventi di un luogo specifico come ad esempio una città. Scrivendo e selezionando il fuso orario di questo luogo, tutti gli orari saranno mostrati e inseriti secondo quanto scelto.",
         "enable_resources": "Abilita risorse",

pages/announcement/_id.vue

@@ -14,6 +14,9 @@ export default {
     try {
       const id = Number(params.id)
       const announcement = store.state.announcements.find(a => a.id === id)
+      if (!announcement) {
+        error({ statusCode: 404, message: 'Announcement not found' })
+      }
       return { announcement }
     } catch (e) {
       error({ statusCode: 404, message: 'Announcement not found' })
@@ -22,50 +25,14 @@ export default {
   data () {
     return { announcement: { title: '' } }
   },
-  computed: mapState(['announcements']),
+  head () {
-  methods: {
+    if (!this.announcement) {
-    showResource (resource) {
+      return {}
-      this.showResources = true
-      this.selectedResource = resource
-      document.getElementById('resourceDialog').focus()
     }
-  }
+    return {
+      title: `${this.settings.title} - ${this.announcement.title}`
+    }
+  },
+  computed: mapState(['announcements', 'settings'])
 }
 </script>
-<style lang='less'>
-// .announcement-page {
-
-//   .el-header {
-//     height: auto !important;
-//     padding-top: 1em;
-//     border-bottom: 1px solid lightgray;
-//   }
-
-//   .title {
-//     max-width: 80%;
-//     max-height: 0.1rem;
-//     overflow: hidden;
-//     font-size: 1.6rem;
-//     line-height: 1;
-//     padding-right: 40px;
-//   }
-
-//   pre {
-//     white-space: pre-line;
-//     word-break: break-word;
-//     color: #aaa;
-//     font-size: 1.2em;
-//     font-family: inherit;
-//   }
-
-// }
-
-// @media only screen and (max-width: 768px) {
-//   #eventDetail {
-//     .title {
-//       font-size: 1em;
-//       font-weight: bold;
-//     }
-//   }
-// }
-</style>

pages/index.vue

@@ -2,7 +2,7 @@
   v-container#home(fluid)
 
     //- Announcements
-    #announcements.mr-1
+    #announcements.mx-1.mt-1(v-if='announcements.length')
       Announcement(v-for='announcement in announcements' :key='`a_${announcement.id}`' :announcement='announcement')
 
     //- Calendar and search bar

server/migrations/20210530211850-announcement_description.js

@@ -0,0 +1,14 @@
+
+module.exports = {
+  up: (queryInterface, Sequelize) => {
+    return queryInterface.changeColumn('announcements', 'announcement', {
+      type: Sequelize.TEXT
+    })
+  },
+
+  down: (queryInterface, Sequelize) => {
+    return queryInterface.changeColumn('announcements', 'announcement', {
+      type: Sequelize.STRING
+    })
+  }
+}