feat: Use dynamic background colors for forms

This commit updates the form components to use the dynamic background colors specified in your UI settings.

The following forms were modified:
- AsistenciaForm.vue
- EmpleadoForm.vue
- PlanillaForm.vue
- TareaForm.vue

Each form now imports the `useUi` store and binds the style of its main container to the corresponding `tableBgColor[Module]` property. This ensures that the form background color matches the table background color you selected in the settings.
This commit is contained in:
google-labs-jules[bot]
2025-05-31 08:26:53 +00:00
parent 436c1ec65a
commit 40497940f3
4 changed files with 16 additions and 7 deletions

View File

@@ -1,5 +1,5 @@
<template>
<div class="asistencia-form-container">
<div class="asistencia-form-container" :style="{ backgroundColor: uiStore.tableBgColorAsistencias }">
<h2>{{ formTitle }}</h2>
<form @submit.prevent="handleSubmit">
<div class="form-group">
@@ -48,6 +48,7 @@
<script setup>
import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue';
import { useAsistenciasStore } from '../../stores/useAsistencias';
import { useUiStore } from '../../stores/useUiStore'; // Import UI store
import { useRouter, useRoute } from 'vue-router';
const props = defineProps({
@@ -57,6 +58,7 @@ const props = defineProps({
const router = useRouter();
const route = useRoute();
const asistenciasStore = useAsistenciasStore();
const uiStore = useUiStore(); // Instantiate UI store
const formatDateTimeForInput = (dateString) => {
const date = dateString ? new Date(dateString) : new Date();
@@ -207,7 +209,7 @@ const handleCancel = () => {
max-width: 600px;
margin: 20px auto;
padding: 25px;
background-color: #f9f9f9;
/* background-color: #f9f9f9; */ /* Removed to use dynamic background */
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}