Feat: Reorganizar tabs y permitir selección múltiple de categorías en notas
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m1s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m1s
- **Nuevas tabs reorganizadas:** - Organoléptica: Selectores de familia de fragancia-aroma y sabor - Descriptiva/Afectiva: Todos los sliders de intensidad (incluye impresión global) - Defectos: Tazas no uniformes, defectuosas y tipo de defecto - Impresión Global: Vista completa con todos los componentes - **Selector de categorías mejorado:** - Permitir selección múltiple de categorías padre - Las subcategorías son la unión de las subcategorías de los padres seleccionados - Permitir selección múltiple de subcategorías - Actualizar resumen visual de selección - **Tipos actualizados:** - NotaSeleccionada ahora usa arrays para categorias y subcategorias - TabCatacion actualizado con las nuevas tabs - Funciones de actualización modificadas para trabajar con arrays - **Correcciones TypeScript:** - Usar JSON.parse(JSON.stringify()) para crear copias mutables de arrays readonly - Resolver incompatibilidades de tipos entre readonly y mutable arrays
This commit is contained in:
@@ -1,9 +1,36 @@
|
||||
<template>
|
||||
<div class="formulario-muestra p-4 space-y-6">
|
||||
<!-- Tab 1: Fragancia y Aroma -->
|
||||
<div v-if="tabActiva === 'fragancia-aroma'" class="tab-content cata-fade-in">
|
||||
<!-- Tab 1: Organoléptica (solo selectores de familia) -->
|
||||
<div v-if="tabActiva === 'organoleptica'" class="tab-content cata-fade-in">
|
||||
<h4 class="tab-section-title cata-text mb-4">
|
||||
Fragancia y Aroma
|
||||
Características Organolépticas
|
||||
</h4>
|
||||
|
||||
<!-- Selector de Familia de Fragancia/Aroma -->
|
||||
<div class="form-section">
|
||||
<CataSelectorFamilia
|
||||
tipo="fragancia-aroma"
|
||||
label="Familia de Fragancia y Aroma"
|
||||
:model-value="muestra.fraganciaAromaNotas"
|
||||
@update:model-value="actualizarFraganciaAroma"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Selector de Familia de Sabor -->
|
||||
<div class="form-section">
|
||||
<CataSelectorFamilia
|
||||
tipo="sabor"
|
||||
label="Familia de Sabor"
|
||||
:model-value="muestra.saborNotas"
|
||||
@update:model-value="actualizarSabor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 2: Descriptiva/Afectiva (todos los sliders incluyendo impresión global) -->
|
||||
<div v-if="tabActiva === 'descriptiva-afectiva'" class="tab-content cata-fade-in">
|
||||
<h4 class="tab-section-title cata-text mb-4">
|
||||
Intensidades Descriptivas y Afectivas
|
||||
</h4>
|
||||
|
||||
<!-- Sliders de Fragancia -->
|
||||
@@ -44,23 +71,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Selector de Familia de Fragancia/Aroma -->
|
||||
<div class="form-section">
|
||||
<CataSelectorFamilia
|
||||
tipo="fragancia-aroma"
|
||||
label="Familia de Fragancia y Aroma"
|
||||
:model-value="muestra.fraganciaAromaNotas"
|
||||
@update:model-value="actualizarFraganciaAroma"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 2: Sabor -->
|
||||
<div v-if="tabActiva === 'sabor'" class="tab-content cata-fade-in">
|
||||
<h4 class="tab-section-title cata-text mb-4">
|
||||
Sabor y Características
|
||||
</h4>
|
||||
|
||||
<!-- Sliders de Sabor -->
|
||||
<div class="form-section">
|
||||
<h5 class="form-section-title cata-text">Sabor</h5>
|
||||
@@ -156,23 +166,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Selector de Familia de Sabor -->
|
||||
<div class="form-section">
|
||||
<CataSelectorFamilia
|
||||
tipo="sabor"
|
||||
label="Familia de Sabor"
|
||||
:model-value="muestra.saborNotas"
|
||||
@update:model-value="actualizarSabor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 3: Impresión Global -->
|
||||
<div v-if="tabActiva === 'impresion-global'" class="tab-content cata-fade-in">
|
||||
<h4 class="tab-section-title cata-text mb-4">
|
||||
Impresión Global y Detalles Finales
|
||||
</h4>
|
||||
|
||||
<!-- Sliders de Impresión Global -->
|
||||
<div class="form-section">
|
||||
<h5 class="form-section-title cata-text">Impresión Global</h5>
|
||||
@@ -191,6 +184,13 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 3: Defectos (tazas y defectos) -->
|
||||
<div v-if="tabActiva === 'defectos'" class="tab-content cata-fade-in">
|
||||
<h4 class="tab-section-title cata-text mb-4">
|
||||
Defectos y Uniformidad
|
||||
</h4>
|
||||
|
||||
<!-- Tazas No Uniformes -->
|
||||
<div class="form-section">
|
||||
@@ -232,66 +232,306 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sensaciones en Boca (selección múltiple) -->
|
||||
<div class="form-section">
|
||||
<label class="block text-sm font-medium mb-2 cata-text">
|
||||
Sensaciones en la Boca (múltiples)
|
||||
</label>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
||||
<button
|
||||
v-for="sensacion in sensacionesBoca"
|
||||
:key="sensacion"
|
||||
type="button"
|
||||
:class="[
|
||||
'cata-checkbox',
|
||||
{ 'cata-checkbox-checked': muestra.sensacionEnBoca.includes(sensacion) },
|
||||
]"
|
||||
@click="toggleSensacionBoca(sensacion)"
|
||||
>
|
||||
<span class="cata-text text-sm">{{ sensacion }}</span>
|
||||
</button>
|
||||
<!-- Tab 4: Impresión Global (muestra TODOS los componentes) -->
|
||||
<div v-if="tabActiva === 'impresion-global'" class="tab-content cata-fade-in">
|
||||
<h4 class="tab-section-title cata-text mb-4">
|
||||
Visión Global Completa
|
||||
</h4>
|
||||
|
||||
<!-- Sección: Organoléptica -->
|
||||
<div class="global-section mb-6 p-4 cata-outline-box rounded-lg">
|
||||
<h5 class="global-section-title cata-text mb-4">Características Organolépticas</h5>
|
||||
|
||||
<!-- Selector de Familia de Fragancia/Aroma -->
|
||||
<div class="form-section mb-4">
|
||||
<CataSelectorFamilia
|
||||
tipo="fragancia-aroma"
|
||||
label="Familia de Fragancia y Aroma"
|
||||
:model-value="muestra.fraganciaAromaNotas"
|
||||
@update:model-value="actualizarFraganciaAroma"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Selector de Familia de Sabor -->
|
||||
<div class="form-section">
|
||||
<CataSelectorFamilia
|
||||
tipo="sabor"
|
||||
label="Familia de Sabor"
|
||||
:model-value="muestra.saborNotas"
|
||||
@update:model-value="actualizarSabor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gustos Predominantes (máx 2) -->
|
||||
<div class="form-section">
|
||||
<label class="block text-sm font-medium mb-2 cata-text">
|
||||
Gustos Predominantes (mín 1, máx 2)
|
||||
</label>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-5 gap-2">
|
||||
<button
|
||||
v-for="gusto in gustosPredominantes"
|
||||
:key="gusto"
|
||||
type="button"
|
||||
:class="[
|
||||
'cata-checkbox',
|
||||
{ 'cata-checkbox-checked': muestra.gustosPredominantes.includes(gusto) },
|
||||
]"
|
||||
:disabled="!muestra.gustosPredominantes.includes(gusto) && muestra.gustosPredominantes.length >= 2"
|
||||
@click="toggleGustoPredominante(gusto)"
|
||||
>
|
||||
<span class="cata-text">{{ gusto }}</span>
|
||||
</button>
|
||||
<!-- Sección: Intensidades -->
|
||||
<div class="global-section mb-6 p-4 cata-outline-box rounded-lg">
|
||||
<h5 class="global-section-title cata-text mb-4">Intensidades Descriptivas y Afectivas</h5>
|
||||
|
||||
<!-- Fragancia -->
|
||||
<div class="form-section mb-4">
|
||||
<h6 class="form-subsection-title cata-text">Fragancia</h6>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<CataSliderIntensidad
|
||||
tipo="descriptiva"
|
||||
label="Descriptiva"
|
||||
:model-value="muestra.intensidades.fragancia.descriptiva"
|
||||
@update:model-value="(v) => actualizarIntensidad('fragancia', 'descriptiva', v)"
|
||||
/>
|
||||
<CataSliderIntensidad
|
||||
tipo="afectiva"
|
||||
label="Afectiva"
|
||||
:model-value="muestra.intensidades.fragancia.afectiva"
|
||||
@update:model-value="(v) => actualizarIntensidad('fragancia', 'afectiva', v)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aroma -->
|
||||
<div class="form-section mb-4">
|
||||
<h6 class="form-subsection-title cata-text">Aroma</h6>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<CataSliderIntensidad
|
||||
tipo="descriptiva"
|
||||
label="Descriptiva"
|
||||
:model-value="muestra.intensidades.aroma.descriptiva"
|
||||
@update:model-value="(v) => actualizarIntensidad('aroma', 'descriptiva', v)"
|
||||
/>
|
||||
<CataSliderIntensidad
|
||||
tipo="afectiva"
|
||||
label="Afectiva"
|
||||
:model-value="muestra.intensidades.aroma.afectiva"
|
||||
@update:model-value="(v) => actualizarIntensidad('aroma', 'afectiva', v)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sabor -->
|
||||
<div class="form-section mb-4">
|
||||
<h6 class="form-subsection-title cata-text">Sabor</h6>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<CataSliderIntensidad
|
||||
tipo="descriptiva"
|
||||
label="Descriptiva"
|
||||
:model-value="muestra.intensidades.sabor.descriptiva"
|
||||
@update:model-value="(v) => actualizarIntensidad('sabor', 'descriptiva', v)"
|
||||
/>
|
||||
<CataSliderIntensidad
|
||||
tipo="afectiva"
|
||||
label="Afectiva"
|
||||
:model-value="muestra.intensidades.sabor.afectiva"
|
||||
@update:model-value="(v) => actualizarIntensidad('sabor', 'afectiva', v)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sabor Residual -->
|
||||
<div class="form-section mb-4">
|
||||
<h6 class="form-subsection-title cata-text">Sabor Residual</h6>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<CataSliderIntensidad
|
||||
tipo="descriptiva"
|
||||
label="Descriptiva"
|
||||
:model-value="muestra.intensidades.saborResidual.descriptiva"
|
||||
@update:model-value="(v) => actualizarIntensidad('saborResidual', 'descriptiva', v)"
|
||||
/>
|
||||
<CataSliderIntensidad
|
||||
tipo="afectiva"
|
||||
label="Afectiva"
|
||||
:model-value="muestra.intensidades.saborResidual.afectiva"
|
||||
@update:model-value="(v) => actualizarIntensidad('saborResidual', 'afectiva', v)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Acidez -->
|
||||
<div class="form-section mb-4">
|
||||
<h6 class="form-subsection-title cata-text">Acidez</h6>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<CataSliderIntensidad
|
||||
tipo="descriptiva"
|
||||
label="Descriptiva"
|
||||
:model-value="muestra.intensidades.acidez.descriptiva"
|
||||
@update:model-value="(v) => actualizarIntensidad('acidez', 'descriptiva', v)"
|
||||
/>
|
||||
<CataSliderIntensidad
|
||||
tipo="afectiva"
|
||||
label="Afectiva"
|
||||
:model-value="muestra.intensidades.acidez.afectiva"
|
||||
@update:model-value="(v) => actualizarIntensidad('acidez', 'afectiva', v)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dulzor -->
|
||||
<div class="form-section mb-4">
|
||||
<h6 class="form-subsection-title cata-text">Dulzor</h6>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<CataSliderIntensidad
|
||||
tipo="descriptiva"
|
||||
label="Descriptiva"
|
||||
:model-value="muestra.intensidades.dulzor.descriptiva"
|
||||
@update:model-value="(v) => actualizarIntensidad('dulzor', 'descriptiva', v)"
|
||||
/>
|
||||
<CataSliderIntensidad
|
||||
tipo="afectiva"
|
||||
label="Afectiva"
|
||||
:model-value="muestra.intensidades.dulzor.afectiva"
|
||||
@update:model-value="(v) => actualizarIntensidad('dulzor', 'afectiva', v)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sensación en Boca -->
|
||||
<div class="form-section mb-4">
|
||||
<h6 class="form-subsection-title cata-text">Sensación en la Boca</h6>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<CataSliderIntensidad
|
||||
tipo="descriptiva"
|
||||
label="Descriptiva"
|
||||
:model-value="muestra.intensidades.sensacionBoca.descriptiva"
|
||||
@update:model-value="(v) => actualizarIntensidad('sensacionBoca', 'descriptiva', v)"
|
||||
/>
|
||||
<CataSliderIntensidad
|
||||
tipo="afectiva"
|
||||
label="Afectiva"
|
||||
:model-value="muestra.intensidades.sensacionBoca.afectiva"
|
||||
@update:model-value="(v) => actualizarIntensidad('sensacionBoca', 'afectiva', v)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Impresión Global -->
|
||||
<div class="form-section">
|
||||
<h6 class="form-subsection-title cata-text">Impresión Global</h6>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<CataSliderIntensidad
|
||||
tipo="descriptiva"
|
||||
label="Descriptiva"
|
||||
:model-value="muestra.intensidades.impresionGlobal.descriptiva"
|
||||
@update:model-value="(v) => actualizarIntensidad('impresionGlobal', 'descriptiva', v)"
|
||||
/>
|
||||
<CataSliderIntensidad
|
||||
tipo="afectiva"
|
||||
label="Afectiva"
|
||||
:model-value="muestra.intensidades.impresionGlobal.afectiva"
|
||||
@update:model-value="(v) => actualizarIntensidad('impresionGlobal', 'afectiva', v)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Otras Notas -->
|
||||
<div class="form-section">
|
||||
<label class="block text-sm font-medium mb-2 cata-text">
|
||||
Otras Notas
|
||||
</label>
|
||||
<textarea
|
||||
v-model="otrasNotasLocal"
|
||||
class="cata-input w-full min-h-[100px] resize-y"
|
||||
placeholder="Notas adicionales sobre el café, cuerpo, balance, etc..."
|
||||
@blur="actualizarOtrasNotas"
|
||||
/>
|
||||
<!-- Sección: Defectos -->
|
||||
<div class="global-section mb-6 p-4 cata-outline-box rounded-lg">
|
||||
<h5 class="global-section-title cata-text mb-4">Defectos y Uniformidad</h5>
|
||||
|
||||
<!-- Tazas No Uniformes -->
|
||||
<div class="form-section mb-4">
|
||||
<CataSelectorTazas
|
||||
tipo="uniformes"
|
||||
label="Tazas NO Uniformes"
|
||||
:model-value="muestra.tazasNoUniformes"
|
||||
@update:model-value="actualizarTazasNoUniformes"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Tazas Defectuosas -->
|
||||
<div class="form-section mb-4">
|
||||
<CataSelectorTazas
|
||||
tipo="defectuosas"
|
||||
label="Tazas Defectuosas"
|
||||
:model-value="muestra.tazasDefectuosas"
|
||||
@update:model-value="actualizarTazasDefectuosas"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Tipo de Defecto -->
|
||||
<div v-if="muestra.tazasDefectuosas.length > 0" class="form-section">
|
||||
<label class="block text-sm font-medium mb-2 cata-text">
|
||||
Tipo de Defecto
|
||||
</label>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
|
||||
<button
|
||||
v-for="tipo in tiposDefectos"
|
||||
:key="tipo || 'ninguno'"
|
||||
type="button"
|
||||
:class="[
|
||||
'cata-checkbox',
|
||||
{ 'cata-checkbox-checked': muestra.defecto === tipo },
|
||||
]"
|
||||
@click="actualizarDefecto(tipo)"
|
||||
>
|
||||
<span class="cata-text">{{ tipo || 'Ninguno' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sección: Detalles Adicionales -->
|
||||
<div class="global-section mb-6 p-4 cata-outline-box rounded-lg">
|
||||
<h5 class="global-section-title cata-text mb-4">Detalles Adicionales</h5>
|
||||
|
||||
<!-- Sensaciones en Boca (selección múltiple) -->
|
||||
<div class="form-section mb-4">
|
||||
<label class="block text-sm font-medium mb-2 cata-text">
|
||||
Sensaciones en la Boca (múltiples)
|
||||
</label>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
||||
<button
|
||||
v-for="sensacion in sensacionesBoca"
|
||||
:key="sensacion"
|
||||
type="button"
|
||||
:class="[
|
||||
'cata-checkbox',
|
||||
{ 'cata-checkbox-checked': muestra.sensacionEnBoca.includes(sensacion) },
|
||||
]"
|
||||
@click="toggleSensacionBoca(sensacion)"
|
||||
>
|
||||
<span class="cata-text text-sm">{{ sensacion }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gustos Predominantes (máx 2) -->
|
||||
<div class="form-section mb-4">
|
||||
<label class="block text-sm font-medium mb-2 cata-text">
|
||||
Gustos Predominantes (mín 1, máx 2)
|
||||
</label>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-5 gap-2">
|
||||
<button
|
||||
v-for="gusto in gustosPredominantes"
|
||||
:key="gusto"
|
||||
type="button"
|
||||
:class="[
|
||||
'cata-checkbox',
|
||||
{ 'cata-checkbox-checked': muestra.gustosPredominantes.includes(gusto) },
|
||||
]"
|
||||
:disabled="!muestra.gustosPredominantes.includes(gusto) && muestra.gustosPredominantes.length >= 2"
|
||||
@click="toggleGustoPredominante(gusto)"
|
||||
>
|
||||
<span class="cata-text">{{ gusto }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Otras Notas -->
|
||||
<div class="form-section">
|
||||
<label class="block text-sm font-medium mb-2 cata-text">
|
||||
Otras Notas
|
||||
</label>
|
||||
<textarea
|
||||
v-model="otrasNotasLocal"
|
||||
class="cata-input w-full min-h-[100px] resize-y"
|
||||
placeholder="Notas adicionales sobre el café, cuerpo, balance, etc..."
|
||||
@blur="actualizarOtrasNotas"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Puntaje Final (solo lectura) -->
|
||||
<div class="form-section">
|
||||
<div class="puntaje-final cata-outline-box p-4 rounded-md">
|
||||
<div class="global-section p-4 cata-outline-box rounded-lg">
|
||||
<div class="puntaje-final">
|
||||
<div class="flex items-baseline justify-between">
|
||||
<span class="text-sm cata-text opacity-75">Puntaje Final:</span>
|
||||
<span class="text-3xl font-bold cata-text">{{ muestra.puntajeFinal }}</span>
|
||||
@@ -343,8 +583,8 @@ const { actualizarFraganciaAroma: actualizarFraganciaAromaCatacion } = useCataci
|
||||
const actualizarFraganciaAroma = async (nota: NotaSeleccionada) => {
|
||||
await actualizarFraganciaAromaCatacion(
|
||||
props.muestra.muestraId,
|
||||
nota.categoria,
|
||||
nota.subcategoria,
|
||||
nota.categorias,
|
||||
nota.subcategorias,
|
||||
nota.notaEspecifica
|
||||
)
|
||||
}
|
||||
@@ -354,8 +594,8 @@ const { actualizarSabor: actualizarSaborCatacion } = useCatacion()
|
||||
const actualizarSabor = async (nota: NotaSeleccionada) => {
|
||||
await actualizarSaborCatacion(
|
||||
props.muestra.muestraId,
|
||||
nota.categoria,
|
||||
nota.subcategoria,
|
||||
nota.categorias,
|
||||
nota.subcategorias,
|
||||
nota.notaEspecifica
|
||||
)
|
||||
}
|
||||
@@ -437,6 +677,14 @@ watch(() => props.muestra.otrasNotas, (newVal) => {
|
||||
border-color: color-mix(in srgb, var(--cata-primary) 30%, transparent);
|
||||
}
|
||||
|
||||
.global-section-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -451,6 +699,13 @@ watch(() => props.muestra.otrasNotas, (newVal) => {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.form-subsection-title {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
opacity: 0.7;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.puntaje-final {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -467,5 +722,9 @@ watch(() => props.muestra.otrasNotas, (newVal) => {
|
||||
.tab-section-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.global-section-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user