more on slugify

components/List.vue

@@ -5,7 +5,7 @@ div#list
       h3(v-if='title') {{title}}
     v-list-item(
       target='_blank'
-      :to='`/event/${event.id}`'
+      :to='`/event/${event.slug || event.id}`'
       v-for='event in computedEvents'
       :key='`${event.id}_${event.start_datetime}`' small)
       v-list-item-content

pages/embed/_event_id.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  nuxt-link.embed_event(:to='`/event/${id}`' target='_blank' :class='{ withImg: event.image_path }')
+  nuxt-link.embed_event(:to='`/event/${event.slug || event.id}`' target='_blank' :class='{ withImg: event.image_path }')
 
     //- image
     img.float-left(:src='`/media/thumb/${event.image_path || "logo.png"}`')
@@ -18,7 +18,7 @@ export default {
   async asyncData ({ $axios, params, error, store }) {
     try {
       const event = await $axios.$get(`/event/${params.event_id}`)
-      return { event, id: Number(params.event_id) }
+      return { event }
     } catch (e) {
       error({ statusCode: 404, message: 'Event not found' })
     }

pages/event/_id.vue

@@ -54,7 +54,7 @@ v-container
                 template(v-slot:activator="{on, attrs} ")
                   v-btn.ml-2(large icon v-on='on' color='primary'
                     v-clipboard:success='copyLink'
-                    v-clipboard:copy='`${settings.baseurl}/event/${event.id}`')
+                    v-clipboard:copy='`${settings.baseurl}/event/${event.slug || event.id}`')
                     v-icon mdi-content-copy
               v-tooltip(bottom) {{$t('common.embed')}}
                 template(v-slot:activator="{on, attrs} ")
@@ -63,7 +63,7 @@ v-container
               v-tooltip(bottom) {{$t('common.add_to_calendar')}}
                 template(v-slot:activator="{on, attrs} ")
                   v-btn.ml-2(large icon v-on='on' color='primary'
-                    :href='`/api/event/${event.id}.ics`')
+                    :href='`/api/event/${event.slug || event.id}.ics`')
                     v-icon mdi-calendar-export
 
       .p-description.text-body-1(v-if='event.image_path' v-html='event.description')
@@ -191,7 +191,7 @@ export default {
         {
           hid: 'og-url',
           property: 'og:url',
-          content: `${this.settings.baseurl}/event/${this.event.id}`
+          content: `${this.settings.baseurl}/event/${this.event.slug || this.event.id}`
         },
         { property: 'og:type', content: 'event' },
         {

pages/event/embedEvent.vue

@@ -6,7 +6,7 @@ v-card
       v-col.col-12
         v-alert.mb-1.mt-1(type='info' show-icon) {{$t('common.embed_help')}}
         v-text-field(v-model='code')
-          v-btn(slot='prepend' plain text color='primary'
+          v-btn(slot='prepend' text color='primary'
             v-clipboard:copy='code'
             v-clipboard:success='copyLink') {{$t("common.copy")}}
             v-icon.ml-1 mdi-content-copy
@@ -23,13 +23,13 @@ import { mapState } from 'vuex'
 export default {
   name: 'EmbedEvent',
   props: {
-    event: { type: Object, default: () => ({})}
+    event: { type: Object, default: () => ({}) }
   },
   computed: {
     ...mapState(['settings']),
     code () {
       const style = "style='border: 0; width: 100%; height: 215px;'"
-      const src = `${this.settings.baseurl}/embed/${this.event.id}`
+      const src = `${this.settings.baseurl}/embed/${this.event.slug || this.event.id}`
       const code = `<iframe ${style} src="${src}"></iframe>`
       return code
     }

server/api/controller/event.js

@@ -90,7 +90,6 @@ const eventController = {
     const is_admin = req.user && req.user.is_admin
     const slug = req.params.event_id
     const id = Number(req.params.event_id) || -1
-    console.error(slug)
     let event
 
     try {
@@ -127,7 +126,6 @@ const eventController = {
       return res.sendStatus(400)
     }
 
-    console.error('diocane')
     // get prev and next event
     const next = await Event.findOne({
       attributes: ['id'],

server/api/controller/export.js

@@ -72,7 +72,7 @@ const exportController = {
         title: `[${req.settings.title}] ${e.title}`,
         description: e.description,
         location: `${e.place.name} - ${e.place.address}`,
-        url: `${req.settings.baseurl}/event/${e.id}`,
+        url: `${req.settings.baseurl}/event/${e.slug || e.id}`,
         alarms
       }
     })

server/api/models/event.js

@@ -1,6 +1,6 @@
 const config = require('config')
 const moment = require('dayjs')
-const htmlToText = require('html-to-text')
+const { htmlToText } = require('html-to-text')
 
 const { Model, DataTypes } = require('sequelize')
 const SequelizeSlugify = require('sequelize-slugify')
@@ -72,7 +72,7 @@ SequelizeSlugify.slugifyModel(Event, { source: ['title'] })
 
 Event.prototype.toAPNote = function (username, locale, to = []) {
   const tags = this.tags && this.tags.map(t => t.tag.replace(/[ #]/g, '_'))
-  const plainDescription = htmlToText.fromString(this.description && this.description.replace('\n', '').slice(0, 1000))
+  const plainDescription = htmlToText(this.description && this.description.replace('\n', '').slice(0, 1000))
   const content = `
   ${this.title}<br/><br/>
     📍 ${this.place && this.place.name}<br/>
@@ -80,7 +80,7 @@ Event.prototype.toAPNote = function (username, locale, to = []) {
 
     ${plainDescription}<br/><br/>
 
-    <a href='${config.baseurl}/event/${this.id}'>${config.baseurl}/event/${this.id}</a><br/>
+    <a href='${config.baseurl}/event/${this.slug || this.id}'>${config.baseurl}/event/${this.slug || this.id}</a><br/>
 
     ${tags && tags.map(t => `#${t}`)}
   `

server/migrations/20210413152837-slugify.js

@@ -0,0 +1,18 @@
+module.exports = {
+  up: (queryInterface, Sequelize) => {
+    return queryInterface.changeColumn('events', 'slug', {
+      type: Sequelize.STRING,
+      index: true,
+      unique: true
+    })
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    /**
+     * Add reverting commands here.
+     *
+     * Example:
+     * await queryInterface.dropTable('users');
+     */
+  }
+};