Add pagination for show timeslots

src/components/emissions/ModalEdit.vue

@@ -50,21 +50,34 @@
         <div v-else>
           <p>This is a recurring event: <b>{{ rruleRender(schedule.rrule) }}</b>, until: {{ prettyDate(schedule.until) }}</p>
           <p>All timeslots of this schedule:</p>
-          <ul v-if="loaded.scheduleTimeslots">
-            <li
-              v-for="slot in scheduleTimeslots"
-              :key="slot.id"
-            >
-              from
-              <b-badge :variant="timeslot.id === slot.id ? 'info' : 'light'">
-                {{ prettyDateTime(slot.start) }}
-              </b-badge>
-              to
-              <b-badge :variant="timeslot.id === slot.id ? 'info' : 'light'">
-                {{ prettyDateTime(slot.end) }}
-              </b-badge>
-            </li>
-          </ul>
+
+          <b-table
+            id="emission-table"
+            striped
+            :per-page="perPage"
+            :current-page="currentPage"
+            :fields="['start', 'end']"
+            :items="scheduleTimeslots"
+            :busy="!loaded.scheduleTimeslots"
+            :tbody-tr-class="trClass"
+          >
+            <template v-slot:cell(start)="data">
+              {{ prettyDateTime(data.item.start) }}
+            </template>
+
+            <template v-slot:cell(end)="data">
+              {{ prettyDateTime(data.item.end) }}
+            </template>
+          </b-table>
+
+          <div class="tw-w-full tw-flex tw-justify-end">
+            <b-pagination
+              v-model="currentPage"
+              :total-rows="scheduleTimeslots.length"
+              :per-page="perPage"
+              aria-controls="emission-table"
+            />
+          </div>
         </div>
       </div>
       <div v-else>
@@ -213,6 +226,8 @@ export default {
 
   data () {
     return {
+      currentPage: 1,
+      perPage: 5,
       timeslot: null,
       deletion: {
         amount: 0,
@@ -248,6 +263,16 @@ export default {
   },
 
   methods: {
+    trClass(item, type) {
+      if (!item || type !== 'row') {
+        return '';
+      }
+      
+      return item.id === this.timeslot.id
+              ? 'table-info'
+              : ''
+    },
+
     createRepetitionSchedule() {
       const { onlyBusinessDays, addNoOfDays } = this.getRepetitionParameters();
       const { dstart, tstart, tend, rrule, until, fallback_id, automation_id, byweekday } = this.schedule;