Feat: Disable click redirect, setup checkbox counts

This commit is contained in:
gold-dev
2026-05-13 22:15:28 +03:00
parent d148c0d6b9
commit 7bd880497f
2 changed files with 30 additions and 15 deletions
@@ -103,12 +103,12 @@ const toggleReports = () => {
:key="department_id"
:data-testid="`admin-overview-list-department-${department_id}`"
>
<!-- @click="$router.push('/admin/' + department_id)"-->
<WhiteBoxCard
:has-hover-effect="true"
class="is-clickable mb-4"
:has-selected-style="false"
:has-selection-style="true"
@click="$router.push('/admin/' + department_id)"
>
<template #header>
<div class="card-header-title" style="width: 100%">
@@ -1,5 +1,5 @@
<script setup>
import { ref, watch } from "vue";
import {computed, ref, watch} from "vue";
import { BLoading } from "buefy";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
@@ -58,6 +58,16 @@ getDepartment().then(() => getTransactions());
watch([selected_date, selected_date_to], () => {
getTransactions();
});
const DEPARTMENTS_TOGGLERS_COUNTER = {
2: 3,
1: 2,
3: 2,
7: 2
};
const TOGGLERS_COUNT = computed(() => {
return DEPARTMENTS_TOGGLERS_COUNTER[props.department_id] || 1;
})
</script>
<template>
@@ -68,22 +78,26 @@ watch([selected_date, selected_date_to], () => {
</div>
<div class="column is-2 has-text-centered">
<div class="checkbox-wrapper">
<input type="checkbox" id="id-1">
<div class="checkbox-top">
<label for="id-1" class="custom-checkbox">
<span class="switch"></span>
<template v-for="i in TOGGLERS_COUNT" :key="`${props.department_id}-${i}`">
<div class="checkbox-container">
<input type="checkbox" :id="`id-${props.department_id}-${i}`">
<div class="checkbox-top">
<label :for="`id-${props.department_id}-${i}`" class="custom-checkbox">
<span class="switch"></span>
</label>
<div class="info-wrapper">
<button type="button" class="info-btn">i</button>
<div class="tooltip">
<p><strong>Bane:</strong> T1</p>
<p><strong>Dato:</strong> 24/04/2026</p>
<p><strong>Klokkeslæt:</strong> 13.45</p>
<p><strong>Hvem:</strong> Hussein</p>
</div>
<button type="button" class="info-btn">i</button>
<div class="tooltip">
<p><strong>Bane:</strong> T1</p>
<p><strong>Dato:</strong> 24/04/2026</p>
<p><strong>Klokkeslæt:</strong> 13.45</p>
<p><strong>Hvem:</strong> Hussein</p>
</div>
</div>
</div>
</div>
<span class="label-text">Maskinstatus</span>
</template>
<span class="label-text">Maskinstatus</span>
</div>
</div>
<div class="column is-2 has-text-centered">
@@ -116,6 +130,7 @@ watch([selected_date, selected_date_to], () => {
align-items: center;
position: relative;
font-family: Arial, sans-serif;
gap: 2px;
}
.checkbox-top {
@@ -137,7 +152,7 @@ watch([selected_date, selected_date_to], () => {
.switch {
width: 38px;
height: 22px;
background: #d9d9d9;
background: #EE4B2B;
border-radius: 999px;
position: relative;
transition: background .25s ease;