feat(ui): Implement delete user

src/components/UpdateUser.vue

@@ -6,16 +6,23 @@
         <UserSelector v-model="user" />
       </div>
     </q-card-section>
-    <MainUserSettings :user="user" @update:user="updateUser" />
+    <MainUserSettings
+      :user="user"
+      :removeable="canDelete && !isCurrentUser"
+      @update:user="updateUser"
+      @remove="remove"
+    />
   </q-card>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted } from 'vue';
+import { computed, defineComponent, ref, onMounted } from 'vue';
+import { hasPermission, useMainStore, useUserStore } from '@flaschengeist/api';
+import { Notify } from 'quasar';
+import { PERMISSIONS } from '../permissions';
+
 import MainUserSettings from './settings/MainUserSettings.vue';
 import UserSelector from './UserSelector.vue';
-import { useMainStore, useUserStore } from '@flaschengeist/api';
-import { Notify } from 'quasar';
 
 export default defineComponent({
   name: 'UpdateUser',
@@ -23,7 +30,10 @@ export default defineComponent({
   setup() {
     const mainStore = useMainStore();
     const userStore = useUserStore();
+
     const user = ref(mainStore.currentUser);
+    const canDelete = computed(() => hasPermission(PERMISSIONS.DELETE));
+    const isCurrentUser = computed(() => user.value.userid === mainStore.currentUser.userid);
 
     onMounted(() => {
       void userStore.getUsers(true);
@@ -42,7 +52,15 @@ export default defineComponent({
       });
     }
 
+    async function remove() {
+      await userStore.deleteUser(user.value);
+      user.value = mainStore.currentUser;
+    }
+
     return {
+      canDelete,
+      isCurrentUser,
+      remove,
       user,
       updateUser,
     };

src/components/settings/MainUserSettings.vue

@@ -125,9 +125,12 @@
         class="col-xs-12 col-sm-6 q-pa-sm"
       />
     </q-card-section>
-    <q-card-actions align="right">
+    <q-card-actions :align="removeable ? 'between' : 'right'">
-      <q-btn label="Reset" type="reset" />
+      <q-btn v-if="removeable" label="Löschen" color="negative" @click="remove" />
-      <q-btn color="primary" type="submit" label="Speichern" />
+      <div>
+        <q-btn label="Reset" type="reset" style="margin-right: 0.5em" />
+        <q-btn label="Speichern" type="submit" color="primary" />
+      </div>
     </q-card-actions>
   </q-form>
 </template>
@@ -151,6 +154,10 @@ export default defineComponent({
   name: 'MainUserSettings',
   components: { IsoDateInput, PasswordInput },
   props: {
+    removeable: {
+      type: Boolean,
+      default: false,
+    },
     user: {
       required: true,
       type: Object as PropType<FG.User>,
@@ -159,6 +166,7 @@ export default defineComponent({
   },
   emits: {
     'update:user': (payload: FG.User) => !!payload,
+    remove: () => true,
   },
   setup(props, { emit }) {
     const userStore = useUserStore();
@@ -285,6 +293,7 @@ export default defineComponent({
       onAvatarRejected,
       password,
       preview,
+      remove: () => emit('remove'),
       reset,
       save,
       userModel,