Add delete feature for super admins

fsr5-fhaachen · Oct 29, 2023 · ea8f5a3 · ea8f5a3
1 parent 64c84d7
commit ea8f5a3
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 17 deletions.
diff --git a/app/Http/Controllers/DashboardAdminController.php b/app/Http/Controllers/DashboardAdminController.php
@@ -134,6 +134,36 @@ public function editUser(IlluminateRequest $request): RedirectResponse
         return Redirect::back();
     }
 
+    /**
+     * Submit delete a user
+     */
+    public function deleteUser(IlluminateRequest $request): RedirectResponse
+    {
+        $user = User::find($request->user);
+
+        if (! $user) {
+            Session::flash('error', 'Der angegebene User existiert nicht');
+
+            return Redirect::back();
+        }
+
+        // check if user has super admin role
+        if ($user->hasRole('super admin')) {
+
+            Session::flash('error', 'Der User kann nicht zu Super Admin gemacht werden');
+        }
+
+        // copy user to temp user variable
+        $userTemp = $user;
+
+        // delete the user
+        $user->delete();
+
+        Session::flash('success', 'Der Account <strong>'.$userTemp->email.'</strong> wurde erfolgreich gelöscht. Die Tabelle aktualisiert sich in wenigen Sekunden automatisch.');
+
+        return Redirect::back();
+    }
+
     /**
      * Display the dashboard admin registrations page
      */

diff --git a/database/seeders/RoleSeeder.php b/database/seeders/RoleSeeder.php
@@ -21,6 +21,7 @@ public function run(): void
             'manage events',
             'manage users',
             'manage random generator',
+            'delete users',
         ] as $permission) {
             if (! Permission::where('name', $permission)->exists()) {
                 Permission::create(['name' => $permission]);
@@ -70,6 +71,7 @@ public function run(): void
         $superAdminRole->givePermissionTo($permissions['manage events']);
         $superAdminRole->givePermissionTo($permissions['manage random generator']);
         $superAdminRole->givePermissionTo($permissions['manage users']);
+        $superAdminRole->givePermissionTo($permissions['delete users']);
 
         // create special role if it doesn't exist
         if (! Role::where('name', 'special')->exists()) {

diff --git a/resources/js/components/user/DeleteModal.vue b/resources/js/components/user/DeleteModal.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <TransitionRoot as="template" :show="true">
+      <Dialog as="div" class="relative z-10" @close="close">
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div
+            class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+          >
+            <TransitionChild
+              as="template"
+              enter="ease-out duration-300"
+              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enter-to="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leave-from="opacity-100 translate-y-0 sm:scale-100"
+              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <DialogPanel
+                class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all dark:bg-gray-900 sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
+              >
+                <FormKit
+                  type="form"
+                  id="delete"
+                  @submit="deleteSubmitHandler"
+                  :actions="false"
+                  v-model="deleteForm"
+                >
+                  <FormContainer>
+                    <FormRow>
+                      <UiH2>User löschen</UiH2>
+                    </FormRow>
+
+                    <FormRow>
+                      <UiMessage
+                        type="warning"
+                        :message="`Sie sind dabei den User ${user.firstname} ${user.lastname} zu löschen. Sind Sie sicher?`"
+                      />
+                    </FormRow>
+                    <FormRow>
+                      <FormKit type="submit" label="Löschen" />
+                    </FormRow>
+                  </FormContainer>
+                </FormKit>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogPanel,
+  TransitionChild,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { PropType, ref } from "vue";
+import { Inertia } from "@inertiajs/inertia";
+
+const { user } = defineProps({
+  user: {
+    type: Object as PropType<Models.User>,
+    default: null,
+  },
+});
+
+const emits = defineEmits<{
+  close: [];
+  submit: [];
+}>();
+
+const deleteForm = ref({});
+
+const close = () => {
+  emits("close");
+};
+const deleteSubmitHandler = async () => {
+  Inertia.delete(`/dashboard/admin/user/${user.id}`, deleteForm.value);
+  emits("submit");
+};
+</script>
diff --git a/resources/js/components/user/Table.vue b/resources/js/components/user/Table.vue
@@ -52,16 +52,16 @@
                 </tr>
               </thead>
               <tbody v-if="users" class="bg-white dark:bg-gray-800">
-                <template v-for="(user, index) in users" :key="user.id">
+                <template v-for="(userData, index) in users" :key="userData.id">
                   <tr
-                    v-if="user"
+                    v-if="userData"
                     :class="{
                       'bg-yellow-100 dark:bg-yellow-900':
-                        user.roles.length &&
-                        user.roles
+                        userData.roles.length &&
+                        userData.roles
                           .map((role) => role.name)
                           .includes('super admin'),
-                      'bg-red-100 dark:bg-red-900': user.is_disabled,
+                      'bg-red-100 dark:bg-red-900': userData.is_disabled,
                     }"
                   >
                     <td
@@ -72,7 +72,7 @@
                         'whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6 lg:pl-8',
                       ]"
                     >
-                      {{ user.firstname }}
+                      {{ userData.firstname }}
                     </td>
                     <td
                       :class="[
@@ -82,7 +82,7 @@
                         'whitespace-nowrap px-3 py-4 text-sm font-medium text-gray-900 dark:text-gray-100',
                       ]"
                     >
-                      {{ user.lastname }}
+                      {{ userData.lastname }}
                     </td>
                     <td
                       :class="[
@@ -92,7 +92,7 @@
                         'whitespace-nowrap px-3 py-4 text-sm font-medium text-gray-900 dark:text-gray-100',
                       ]"
                     >
-                      {{ user.email }}
+                      {{ userData.email }}
                     </td>
                     <td
                       :class="[
@@ -103,13 +103,13 @@
                       ]"
                     >
                       <span
-                        v-if="user.course?.id"
+                        v-if="userData.course?.id"
                         :class="[
-                          user.course.classes,
+                          userData.course.classes,
                           'rounded-md p-1 text-xs text-white',
                         ]"
                       >
-                        {{ user.course.abbreviation }}
+                        {{ userData.course.abbreviation }}
                       </span>
                     </td>
                     <td
@@ -120,8 +120,11 @@
                         'whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-300',
                       ]"
                     >
-                      <div v-if="user.roles.length" class="flex flex-col gap-2">
-                        <div v-for="role in user.roles" :key="role.id">
+                      <div
+                        v-if="userData.roles.length"
+                        class="flex flex-col gap-2"
+                      >
+                        <div v-for="role in userData.roles" :key="role.id">
                           <span
                             class="rounded-md bg-slate-900 p-1 text-xs text-white"
                           >
@@ -138,7 +141,7 @@
                         'whitespace-nowrap px-3 py-4 text-sm font-medium text-gray-900 dark:text-gray-100',
                       ]"
                     >
-                      {{ user.avatarUrl ? "Ja" : "Nein" }}
+                      {{ userData.avatarUrl ? "Ja" : "Nein" }}
                     </td>
                     <td
                       :class="[
@@ -152,15 +155,35 @@
                         <div>
                           <AppButton
                             theme="warning"
-                            @click="selectUserToEdit(user)"
+                            @click="selectUserToEdit(userData)"
                           >
                             <span class="sr-only">
-                              {{ user.firstname }}
-                              {{ user.lastname }}
+                              {{ userData.firstname }}
+                              {{ userData.lastname }}
                             </span>
                             bearbeiten
                           </AppButton>
                         </div>
+                        <div
+                          v-if="
+                            user.permissionsArray.includes('delete users') &&
+                            user.id !== userData.id &&
+                            !userData.roles
+                              .map((role) => role.name)
+                              .includes('super admin')
+                          "
+                        >
+                          <AppButton
+                            theme="danger"
+                            @click="selectUserToDelete(userData)"
+                          >
+                            <span class="sr-only">
+                              {{ userData.firstname }}
+                              {{ userData.lastname }}
+                            </span>
+                            löschen
+                          </AppButton>
+                        </div>
                       </div>
                     </td>
                   </tr>
@@ -180,6 +203,13 @@
       @close="clearUserToEdit"
       @submit="submitUserEdit"
     />
+
+    <UserDeleteModal
+      v-if="userToDelete"
+      :user="userToDelete"
+      @close="clearUserToDelete"
+      @submit="submitUserDelete"
+    />
   </div>
 </template>
 
@@ -206,6 +236,7 @@ const props = defineProps({
 });
 
 const userToEdit = ref<Models.User | null>(null);
+const userToDelete = ref<Models.User | null>(null);
 
 const clearUserToEdit = () => {
   userToEdit.value = null;
@@ -216,4 +247,14 @@ const selectUserToEdit = async (user: Models.User) => {
 const submitUserEdit = async () => {
   clearUserToEdit();
 };
+
+const clearUserToDelete = () => {
+  userToDelete.value = null;
+};
+const selectUserToDelete = async (user: Models.User) => {
+  userToDelete.value = user;
+};
+const submitUserDelete = async () => {
+  clearUserToDelete();
+};
 </script>
diff --git a/resources/js/types/components.d.ts b/resources/js/types/components.d.ts
@@ -16,6 +16,7 @@ declare module "vue" {
     CardContainer: typeof import("./../components/card/Container.vue")["default"];
     CardLayout: typeof import("./../layouts/CardLayout.vue")["default"];
     ColorModeButton: typeof import("./../components/color/mode/Button.vue")["default"];
+    copy: typeof import("./../components/user/EditModal copy.vue")["default"];
     CourseBox: typeof import("./../components/course/Box.vue")["default"];
     DashboardCardLayout: typeof import("./../layouts/DashboardCardLayout.vue")["default"];
     DashboardLayout: typeof import("./../layouts/DashboardLayout.vue")["default"];
@@ -41,6 +42,7 @@ declare module "vue" {
     UiMessage: typeof import("./../components/ui/Message.vue")["default"];
     UiTimeString: typeof import("./../components/ui/TimeString.vue")["default"];
     UserBox: typeof import("./../components/user/Box.vue")["default"];
+    UserDeleteModal: typeof import("./../components/user/DeleteModal.vue")["default"];
     UserEditModal: typeof import("./../components/user/EditModal.vue")["default"];
     UserTable: typeof import("./../components/user/Table.vue")["default"];
   }

diff --git a/routes/web.php b/routes/web.php
@@ -67,6 +67,10 @@
             Route::get('/users', [DashboardAdminController::class, 'users'])->name('dashboard.admin.users');
             Route::post('/user/{user}', [DashboardAdminController::class, 'editUser'])->name('dashboard.admin.editUser');
 
+            Route::group(['middleware' => ['can:delete users']], function () {
+                Route::delete('/user/{user}', [DashboardAdminController::class, 'deleteUser'])->name('dashboard.admin.deleteUser');
+            });
+
             Route::get('/register', [DashboardAdminController::class, 'register'])->name('dashboard.admin.register');
             Route::post('/register', [DashboardAdminController::class, 'registerUser'])->name('dashboard.admin.registerUser');
             Route::post('/assign', [DashboardAdminController::class, 'assignUser'])->name('dashboard.admin.assignUser');