skip an occurrence of recurring event

assets/style.less

@@ -29,6 +29,10 @@ html, body {
   padding: 0 !important;
 }
 
+p {
+  margin-bottom: 0.5rem;
+}
+
 #__nuxt, #__layout {
   min-height: 100vh;
   display: flex;
@@ -118,6 +122,8 @@ html, body {
 }
 
 .el-menu-item {
+  height: 40px;
+  line-height: 40px;
   a {
     color: #303133;
     display: block;

components/Event.vue

@@ -8,11 +8,15 @@
       .p-name.p-summary.title {{event.title}}
 
     .card-body
+      //-  when
       div
         i.el-icon-date
         time.dt-start(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')  {{event|when}}
+
+      //- place
       el-button.p-location.mt-1.bg-dark.text-warning.float-right(plain size='mini' round type='text' icon='el-icon-location-outline' @click='addPlace') {{event.place.name}}
-      //- date / place
+
+      //- description
       .description.p-description.mt-3(v-if='!event.image_path || !event.tags.length' v-html='description')
 
     .card-footer(v-if='event.tags.length')

locales/it.json

@@ -75,7 +75,8 @@
     "event": "Evento",
     "pause": "Pausa",
     "start": "Avvia",
-    "fediverse": "Fediverso"
+    "fediverse": "Fediverso",
+    "skip": "Salta"
   },
   "login": {
     "description": "Entrando puoi pubblicare nuovi eventi.",

pages/event/eventAdmin.vue

@@ -1,14 +1,19 @@
 <template lang='pug'>
 div
   el-divider {{$t('common.admin')}}
+
   el-menu.menu
     el-menu-item
-      div(v-if='event.is_visible' @click='toggle(false)') <i class='el-icon-open'/> {{$t('common.hide')}}
+      div(v-if='event.is_visible' @click='toggle(false)') <i class='el-icon-open'/> {{$t(`common.${event.parentId?'skip':'hide'}`)}}
       div(v-else @click='toggle(false)') <i class='el-icon-turn-off'/> {{$t('common.confirm')}}
     el-menu-item(@click='$router.replace(`/add/${event.id}`)') <i class='el-icon-edit'/> {{$t('common.edit')}}
-    el-menu-item(@click='remove(false)') <i class='el-icon-delete'/> {{$t('common.remove')}}
+    el-menu-item(v-if='!event.parentId' @click='remove(false)') <i class='el-icon-delete'/> {{$t('common.remove')}}
-    div(v-if='event.parentId')
+
-      el-divider  {{$t('event.recurrent')}}
+    template(v-if='event.parentId')
+      el-divider {{$t('event.recurrent')}}
+      p.text-secondary
+        i.el-icon-refresh
+        small  {{event|recurrentDetail}}<br/>
       el-menu-item(v-if='event.parent.is_visible' @click='toggle(true)') <i class='el-icon-video-pause'/> {{$t('common.pause')}}
       el-menu-item(v-else @click='toggle(true)') <i class='el-icon-video-play'/> {{$t('common.start')}}
       el-menu-item(@click='$router.replace(`/add/${event.parentId}`)') <i class='el-icon-edit'/> {{$t('common.edit')}}

plugins/filters.js

@@ -22,6 +22,18 @@ export default ({ app, store }) => {
   Vue.filter('to', timestamp => moment.unix(timestamp).to())
   // format event start/end datetime based on page
 
+  Vue.filter('recurrentDetail', event => {
+    const { frequency, days, type } = event.parent.recurrent
+    let recurrent
+    if (frequency === '1w' || frequency === '2w') {
+      recurrent = app.i18n.tc(`event.recurrent_${frequency}_days`, days.length, { days: days.map(d => moment().day(d - 1).format('dddd')) })
+    } else if (frequency === '1m' || frequency === '2m') {
+      const d = type === 'ordinal' ? days : days.map(d => moment().day(d - 1).format('dddd'))
+      recurrent = app.i18n.tc(`event.recurrent_${frequency}_${type}`, days.length, { days: d })
+    }
+    return recurrent
+
+  })
   Vue.filter('when', (event) => {
     const start = moment.unix(event.start_datetime)
     const end = moment.unix(event.end_datetime)