improve admin, user management, confirmation, dialog

components/Home.vue

@@ -61,7 +61,4 @@ export default {
   justify-content: center;
 }
 
-.v-dialog {
-  width: unset !important;
-}
 </style>

components/admin/Events.vue

@@ -0,0 +1,58 @@
+<template lang='pug'>
+  v-container
+    v-card-title {{$t('common.events')}}
+    v-card-subtitle {{$t('admin.event_confirm_description')}}
+    v-card-text
+      v-data-table(
+        :items='unconfirmedEvents'
+        :headers='headers')
+        template(v-slot:item.actions='{ item }')
+          v-btn(text small @click.stop='toggle(item)'
+            :color='item.visible?"warning":"success"') {{item.visible?$t('common.deactivate'):$t('common.activate')}}
+          v-btn(text small @click='edit(item)') {{$t('common.edit')}}
+          v-btn(text small @click='remove(item)'
+            color='error') {{$t('common.delete')}}
+
+</template>
+<script>
+import cloneDeep from 'lodash/cloneDeep'
+
+export default {
+  props: {
+    unconfirmedEvents: { type: Array, default: () => [] }
+  },
+  data () {
+    return {
+      valid: false,
+      dialog: false,
+      editing: false,
+      headers: [
+        { value: 'title', text: 'Title' },
+        { value: 'actions', text: 'Actions', align: 'right' }
+      ]
+    }
+  },
+  methods: {
+    edit (event) {
+      this.$router.push(`/add/${event.id}`)
+    },
+    async toggle (event) {
+      try {
+        event.is_visible = !event.is_visible
+        await this.$axios.$put(`/event/${event.id}`, event)
+        this.events = this.events.map(a => a.id === event.id ? event : a)
+        this.setevents(cloneDeep(this.events.filter(a => a.visible)))
+      } catch (e) {}
+    },
+    async remove (event) {
+      const ret = await this.$root.$confirm(this.$t('common.confirm'),
+        this.$t('event.remove_confirmation'))
+      if (!ret) { return }
+      await this.$axios.delete(`/event/${event.id}`)
+      this.$root.$message({
+        message: this.$t('admin.event_remove_ok')
+      })
+    }
+  }
+}
+</script>

components/admin/Users.vue

@@ -6,24 +6,24 @@
         append-icon='mdi-magnify'
         label='Search',
         single-line hide-details)
-      v-btn(text color='primary' small @click='newUserDialog = true') <v-icon>mdi-plus-user</v-icon> {{$t('common.new_user')}}
+      v-btn(color='primary' small @click='newUserDialog = true') <v-icon>mdi-plus</v-icon> {{$t('common.new_user')}}
 
     //- ADD NEW USER
-    v-dialog(v-model='newUserDialog' width='500')
+    v-dialog(v-model='newUserDialog' :fullscreen="$vuetify.breakpoint.xsOnly")
 
       v-card
         v-card-title {{$t('common.new_user')}}
         v-card-text
-          v-form
+          v-form(v-model='valid')
             v-text-field(v-model='new_user.email'
               :label="$t('common.email')"
-              :rules="[$validators.required('email')]")
+              :rules="$validators.email")
             v-switch(v-model='new_user.is_admin' :label="$t('common.admin')" inset)
           v-alert(type='info' :closable='false') {{$t('admin.user_add_help')}}
           v-card-actions
             v-spacer
             v-btn(@click='newUserDialog=false' color='error') {{$t('common.cancel')}}
-            v-btn(@click='createUser' color='primary') {{$t('common.send')}}
+            v-btn(@click='createUser' :disabled='!valid' color='primary') {{$t('common.send')}}
 
     v-card-text
       //- USERS LIST
@@ -51,6 +51,7 @@ export default {
   data () {
     return {
       newUserDialog: false,
+      valid: false,
       new_user: {
         email: '',
         is_admin: false
@@ -66,9 +67,7 @@ export default {
   computed: mapState(['settings']),
   methods: {
     async deleteUser (user) {
-      const ret = await this.$root.$confirm(this.$t('common.confirm'),
-        this.$t('admin.delete_user_confirm'),
-        { type: 'error' })
+      const ret = await this.$root.$confirm(this.$t('common.confirm'), this.$t('admin.delete_user_confirm'))
       if (!ret) { return }
       await this.$axios.delete(`/user/${user.id}`)
       this.$root.$message({ message: this.$t('admin.user_remove_ok') })

layouts/default.vue

@@ -30,3 +30,9 @@ export default {
   }
 }
 </script>
+<style lang="less">
+.v-dialog {
+  width: unset !important;
+  max-width: 600px;
+}
+</style>

pages/Admin.vue

@@ -15,7 +15,7 @@
 
         //- USERS
         v-tab
-          v-badge(:value='unconfirmedUsers.length' :content='unconfirmedUsers.length') {{$t('common.users')}}
+          v-badge(:value='!!unconfirmedUsers.length' :content='unconfirmedUsers.length') {{$t('common.users')}}
         v-tab-item
           Users(:users='users')
 
@@ -26,15 +26,9 @@
 
         //- EVENTS
         v-tab
-          v-badge(:value='events.length') {{$t('common.events')}}
+          v-badge(:value='!!unconfirmedEvents.length' :content='unconfirmedEvents.length') {{$t('common.events')}}
         v-tab-item
-          v-container
-            v-card-title {{$t('common.events')}}
-            v-card-subtitle {{$t('admin.event_confirm_description')}}
-            v-card-text
-              v-data-table(
-                :items='events'
-                :headers='eventHeaders')
+          Events(:unconfirmedEvents='unconfirmedEvents')
 
         //- ANNOUNCEMENTS
         v-tab {{$t('common.announcements')}}
@@ -55,6 +49,7 @@
 <script>
 import { mapState } from 'vuex'
 import Users from '../components/admin/Users'
+import Events from '../components/admin/Events'
 import Places from '../components/admin/Places'
 import Settings from '../components/admin/Settings'
 import Federation from '../components/admin/Federation'
@@ -64,25 +59,22 @@ import Theme from '../components/admin/Theme'
 
 export default {
   name: 'Admin',
-  components: { Users, Places, Settings, Federation, Moderation, Announcement, Theme },
+  components: { Users, Events, Places, Settings, Federation, Moderation, Announcement, Theme },
   middleware: ['auth'],
   async asyncData ({ $axios, params, store }) {
     try {
       const users = await $axios.$get('/users')
-      const events = await $axios.$get('/event/unconfirmed')
-      return { users, events }
+      const unconfirmedEvents = await $axios.$get('/event/unconfirmed')
+      return { users, unconfirmedEvents }
     } catch (e) {
       console.error(e)
-      return { users: [], events: [] }
+      return { users: [], unconfirmedEvents: [] }
     }
   },
   data () {
     return {
       description: '',
-      events: [],
-      eventHeaders: [
-        { value: 'title', text: 'Title' }
-      ]
+      unconfirmedEvents: []
     }
   },
   computed: {
@@ -104,7 +96,7 @@ export default {
           message: this.$t('event.confirmed'),
           type: 'success'
         })
-        this.events = this.events.filter(e => e.id !== id)
+        this.unconfirmedEvents = this.unconfirmedEvents.filter(e => e.id !== id)
       } catch (e) {
       }
     }

pages/event/_id.vue

@@ -243,14 +243,16 @@ export default {
     },
     async blockUser (resource) {
       try {
-        await this.$root.$confirm(this.$t('admin.user_block_confirm'))
+        const ret = await this.$root.$confirm(this.$t('common.confirm'), this.$t('admin.user_block_confirm', { user: resource.ap_user.ap_id }))
+        if (!ret) { return }
         await this.$axios.post('/instances/toggle_user_block', { ap_id: resource.ap_user.ap_id })
         this.$root.$message({ message: this.$t('admin.user_blocked', { user: resource.ap_user.ap_id }), type: 'success' })
       } catch (e) { }
     },
     async deleteResource (resource) {
       try {
-        await this.$root.$confirm(this.$t('admin.delete_resource_confirm'))
+        const ret = await this.$root.$confirm(this.$t('common.confirm'), this.$t('admin.delete_resource_confirm'))
+        if (!ret) { return }
         await this.$axios.delete(`/resources/${resource.id}`)
         this.event.resources = this.event.resources.filter(r => r.id !== resource.id)
       } catch (e) { }