refactor: Deactivate punishment styling and update event fixes

backend/logic/actions/punishments.js

@@ -361,7 +361,7 @@ export default {
 			[
 				next => {
 					PunishmentsModule.runJob("DEACTIVATE_PUNISHMENT", { punishmentId }, this)
-						.then(punishment => next(null, punishment))
+						.then(punishment => next(null, punishment._doc))
 						.catch(next);
 				}
 			],
@@ -379,7 +379,14 @@ export default {
 
 				WSModule.runJob("EMIT_TO_ROOM", {
 					room: `admin.punishments`,
-					args: ["event:admin.punishment.updated", { data: { punishment } }]
+					args: [
+						"event:admin.punishment.updated",
+						{
+							data: {
+								punishment: { ...punishment, status: "Inactive" }
+							}
+						}
+					]
 				});
 
 				return cb({ status: "success" });

backend/logic/punishments.js

@@ -6,6 +6,7 @@ let PunishmentsModule;
 let CacheModule;
 let DBModule;
 let UtilsModule;
+let WSModule;
 
 class _PunishmentsModule extends CoreClass {
 	// eslint-disable-next-line require-jsdoc
@@ -26,6 +27,7 @@ class _PunishmentsModule extends CoreClass {
 		CacheModule = this.moduleManager.modules.cache;
 		DBModule = this.moduleManager.modules.db;
 		UtilsModule = this.moduleManager.modules.utils;
+		WSModule = this.moduleManager.modules.ws;
 
 		this.punishmentModel = this.PunishmentModel = await DBModule.runJob("GET_MODEL", { modelName: "punishment" });
 		this.punishmentSchemaCache = await CacheModule.runJob("GET_SCHEMA", { schemaName: "punishment" });
@@ -144,7 +146,19 @@ class _PunishmentsModule extends CoreClass {
 										key: punishment.punishmentId
 									},
 									this
-								).finally(() => next2());
+								).finally(() => {
+									WSModule.runJob(
+										"EMIT_TO_ROOM",
+										{
+											room: `admin.punishments`,
+											args: [
+												"event:admin.punishment.updated",
+												{ data: { punishment: { ...punishment, status: "Inactive" } } }
+											]
+										},
+										this
+									).finally(() => next2());
+								});
 							},
 							() => {
 								next(null, punishments);

frontend/src/App.vue

@@ -1149,10 +1149,6 @@ img {
 					background-color: var(--light-grey-3);
 					transition: 0.2s;
 					border-radius: 34px;
-
-					&.disabled {
-						cursor: not-allowed;
-					}
 				}
 
 				.slider:before {
@@ -2006,6 +2002,10 @@ h4.section-title {
 		background-color: var(--light-grey-3);
 		transition: 0.2s;
 		border-radius: 34px;
+
+		&.disabled {
+			cursor: not-allowed;
+		}
 	}
 
 	.slider:before {

frontend/src/components/PunishmentItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { computed } from "vue";
 import { format, formatDistance, parseISO } from "date-fns";
 
 const props = defineProps({
@@ -19,7 +19,7 @@ const active = computed(
 	<div class="universal-item punishment-item">
 		<div class="item-icon">
 			<p class="is-expanded checkbox-control">
-				<label class="switch">
+				<label class="switch" :class="{ disabled: !active }">
 					<input
 						type="checkbox"
 						:checked="active"
@@ -29,7 +29,10 @@ const active = computed(
 								: $event.preventDefault()
 						"
 					/>
-					<span class="slider round"></span>
+					<span
+						class="slider round"
+						:class="{ disabled: !active }"
+					></span>
 				</label>
 			</p>
 			<p>
@@ -119,10 +122,6 @@ const active = computed(
 		justify-content: space-evenly;
 		border: 1px solid var(--light-grey-3);
 		border-radius: @border-radius;
-
-		.checkbox-control .slider {
-			cursor: default;
-		}
 	}
 
 	.item-title {

frontend/src/pages/Admin/Users/Punishments.vue

@@ -26,7 +26,7 @@ const columns = ref([
 	{
 		name: "options",
 		displayName: "Options",
-		properties: ["_id", "status"],
+		properties: ["_id", "active", "status"],
 		sortable: false,
 		hidable: false,
 		resizable: false,
@@ -221,18 +221,28 @@ const deactivatePunishment = punishmentId => {
 					>
 						open_in_full
 					</button>
-					<button
-						class="button is-primary icon-with-button material-icons"
-						@click="deactivatePunishment(slotProps.item._id)"
+					<quick-confirm
+						@confirm="deactivatePunishment(slotProps.item._id)"
 						:disabled="
-							slotProps.item.removed ||
-							slotProps.item.status === 'Inactive'
+							!slotProps.item.active || slotProps.item.removed
 						"
-						content="Deactivate Punishment"
-						v-tippy
 					>
-						gavel
-					</button>
+						<button
+							class="button is-danger icon-with-button material-icons"
+							:class="{
+								disabled:
+									!slotProps.item.active ||
+									slotProps.item.removed
+							}"
+							:disabled="
+								!slotProps.item.active || slotProps.item.removed
+							"
+							content="Deactivate Punishment"
+							v-tippy
+						>
+							gavel
+						</button>
+					</quick-confirm>
 				</div>
 			</template>
 			<template #column-status="slotProps">