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:
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user