icons ...

components/admin/Announcement.vue

@@ -21,7 +21,7 @@
     v-card-text
       v-data-table(
           v-if='announcements.length'
-          :hide-default-footer='announcements.length<10'
+          :footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }'
           :headers='headers'
           :items='announcements')
         template(v-slot:item.actions='{ item }')
@@ -36,13 +36,13 @@ import { mapActions } from 'vuex'
 import cloneDeep from 'lodash/cloneDeep'
 import Editor from '../Editor'
 import Announcement from '../Announcement'
-import { mdiPlus } from '@mdi/js'
+import { mdiPlus, mdiChevronRight, mdiChevronLeft } from '@mdi/js'
 
 export default {
   components: { Editor, Announcement },
   data () {
     return {
-      mdiPlus,
+      mdiPlus, mdiChevronRight, mdiChevronLeft,
       valid: false,
       dialog: false,
       editing: false,

components/admin/Events.vue

@@ -5,6 +5,7 @@
     v-card-text
       v-data-table(
         :hide-default-footer='unconfirmedEvents.length<10'
+        :footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }'
         :items='unconfirmedEvents'
         :headers='headers')
         template(v-slot:item.actions='{ item }')
@@ -16,6 +17,7 @@
 
 </template>
 <script>
+import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
 
 export default {
   props: {
@@ -23,6 +25,7 @@ export default {
   },
   data () {
     return {
+      mdiChevronLeft, mdiChevronRight,
       valid: false,
       dialog: false,
       editing: false,

components/admin/Federation.vue

@@ -60,6 +60,7 @@
         v-data-table(
           v-if='settings.trusted_instances.length'
           :hide-default-footer='settings.trusted_instances.length<10'
+          :footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }'
           :headers='headers'
           :items='settings.trusted_instances')
           template(v-slot:item.actions="{item}")
@@ -70,13 +71,13 @@
 <script>
 import { mapActions, mapState } from 'vuex'
 import axios from 'axios'
-import { mdiDeleteForever, mdiPlus } from '@mdi/js'
+import { mdiDeleteForever, mdiPlus, mdiChevronLeft, mdiChevronRight } from '@mdi/js'
 
 export default {
   name: 'Federation',
   data ({ $store, $options }) {
     return {
-      mdiDeleteForever, mdiPlus,
+      mdiDeleteForever, mdiPlus, mdiChevronLeft, mdiChevronRight,
       instance_url: '',
       instance_name: $store.state.settings.instance_name,
       instance_place: $store.state.settings.instance_place,

components/admin/Places.vue

@@ -1,6 +1,11 @@
 <template lang='pug'>
   v-container
     v-card-title {{$t('common.places')}}
+      v-spacer
+      v-text-field(v-model='search'
+        :append-icon='mdiMagnify' outlined rounded
+        label='Search'
+        single-line hide-details)
     v-card-subtitle(v-html="$t('admin.place_description')")
 
     v-dialog(v-model='dialog' width='600' :fullscreen='$vuetify.breakpoint.xsOnly')
@@ -29,22 +34,26 @@
     v-card-text
       v-data-table(
         :headers='headers'
-        :items='places')
+        :items='places'
+        :hide-default-footer='places.length<5'
+        :footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }'
+        :search='search')
         template(v-slot:item.actions='{item}')
           v-btn(@click='editPlace(item)' color='primary' icon)
             v-icon(v-text='mdiPencil')
 </template>
 <script>
 import { mapState, mapActions } from 'vuex'
-import { mdiPencil } from '@mdi/js'
+import { mdiPencil, mdiChevronLeft, mdiChevronRight } from '@mdi/js'
 
 export default {
   data () {
     return {
-      mdiPencil,
+      mdiPencil, mdiChevronRight, mdiChevronLeft,
       loading: false,
       dialog: false,
       valid: false,
+      search: '',
       place: { name: '', address: '', id: null },
       headers: [
         { value: 'name', text: 'Name' },

components/admin/Users.vue

@@ -32,6 +32,7 @@
         :headers='headers'
         :items='users'
         :hide-default-footer='users.length<5'
+        :footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }'
         :search='search')
         template(v-slot:item.is_active='{item}')
           v-icon(v-if='item.is_active' color='success' v-text='mdiCheck')
@@ -49,7 +50,7 @@
 <script>
 import { mapState } from 'vuex'
 import get from 'lodash/get'
-import { mdiClose, mdiMagnify, mdiCheck, mdiPlus, mdiInformation } from '@mdi/js'
+import { mdiClose, mdiMagnify, mdiCheck, mdiPlus, mdiInformation, mdiChevronLeft, mdiChevronRight } from '@mdi/js'
 
 export default {
   name: 'Users',
@@ -58,7 +59,7 @@ export default {
   },
   data () {
     return {
-      mdiClose, mdiMagnify, mdiCheck, mdiPlus, mdiInformation,
+      mdiClose, mdiMagnify, mdiCheck, mdiPlus, mdiInformation, mdiChevronLeft, mdiChevronRight,
       newUserDialog: false,
       valid: false,
       new_user: {