Feat: Disable click redirect, setup checkbox counts
This commit is contained in:
+1
-1
@@ -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%">
|
||||
|
||||
+29
-14
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user