Melhorias na lógica de ativação de badges e atualização de responsabilidades

This commit is contained in:
andersonid
2025-04-04 20:37:22 -03:00
committed by LS
parent 97711d30c7
commit b47c9efc21
5 changed files with 890 additions and 302 deletions

View File

@@ -58,20 +58,20 @@
</div>
<div class="col-md-6 mb-3">
<label for="edit_data_nascimento" class="form-label">Data de Nascimento</label>
<input type="date" class="form-control" id="edit_data_nascimento" name="data_nascimento"
placeholder="dd/mm/aaaa">
<input type="text" class="form-control date-mask" id="edit_data_nascimento" name="data_nascimento"
placeholder="DD/MM/AAAA" maxlength="10">
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="edit_data_entrada" class="form-label">Data de Entrada OCI</label>
<input type="date" class="form-control" id="edit_data_entrada" name="data_entrada_oci"
placeholder="dd/mm/aaaa">
<input type="text" class="form-control date-mask" id="edit_data_entrada" name="data_entrada_oci"
placeholder="DD/MM/AAAA" maxlength="10">
</div>
<div class="col-md-6 mb-3">
<label for="edit_data_efetivacao" class="form-label">Data de Efetivação</label>
<input type="date" class="form-control" id="edit_data_efetivacao" name="data_efetivacao_oci"
placeholder="dd/mm/aaaa">
<input type="text" class="form-control date-mask" id="edit_data_efetivacao" name="data_efetivacao_oci"
placeholder="DD/MM/AAAA" maxlength="10">
</div>
</div>
</div>
@@ -232,26 +232,31 @@
</div>
</div>
<!-- Responsabilidades -->
<div class="mb-3">
<label class="form-label d-block">Responsabilidades</label>
<div class="row g-3">
<div class="col-md-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="edit_resp_1" name="responsabilidades" value="256">
<label class="form-check-label" for="edit_resp_1">Finanças</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="edit_resp_2" name="responsabilidades" value="512">
<label class="form-check-label" for="edit_resp_2">Imprensa</label>
</div>
</div>
<div class="col-md-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="edit_resp_4" name="responsabilidades" value="64">
<label class="form-check-label" for="edit_resp_4">Quadro-Orientador</label>
</div>
<div class="row">
<div class="col-12">
<label class="form-label">Responsabilidades</label>
<div class="responsabilidades-container">
<input type="hidden" name="responsabilidades" id="responsabilidades_values" value="0">
<span class="badge badge-clickable" data-value="{{ Militante.SECRETARIO }}" data-original-class="bg-secondary" data-bs-toggle="tooltip" title="Clique para alternar">Secretário</span>
<span class="badge badge-clickable" data-value="{{ Militante.RESPONSAVEL_IMPRENSA }}" data-original-class="bg-info" data-bs-toggle="tooltip" title="Clique para alternar">Responsável de Imprensa</span>
<span class="badge badge-clickable" data-value="{{ Militante.IMPRENSA }}" data-original-class="bg-warning" data-bs-toggle="tooltip" title="Clique para alternar">Imprensa</span>
<span class="badge badge-clickable" data-value="{{ Militante.MPS }}" data-original-class="bg-warning" data-bs-toggle="tooltip" title="Clique para alternar">MPS</span>
<span class="badge badge-clickable" data-value="{{ Militante.QUADRO_ORIENTADOR }}" data-original-class="bg-success" data-bs-toggle="tooltip" title="Clique para alternar">Quadro-Orientador</span>
<span class="badge badge-clickable" data-value="{{ Militante.RESPONSAVEL_FINANCAS }}" data-original-class="bg-primary" data-bs-toggle="tooltip" title="Clique para alternar">Responsável de Finanças</span>
<span class="badge badge-clickable" data-value="{{ Militante.TESOUREIRO }}" data-original-class="bg-dark" data-bs-toggle="tooltip" title="Clique para alternar">Tesoureiro</span>
<span class="badge badge-clickable" data-value="{{ Militante.MNS }}" data-original-class="bg-info" data-bs-toggle="tooltip" title="Clique para alternar">MNS</span>
<span class="badge badge-clickable" data-value="{{ Militante.JUVENTUDE }}" data-original-class="bg-danger" data-bs-toggle="tooltip" title="Clique para alternar">Juventude</span>
<span class="badge badge-clickable" data-value="{{ Militante.ASPIRANTE }}" data-original-class="bg-light text-dark border" data-bs-toggle="tooltip" title="Clique para alternar">Aspirante</span>
</div>
</div>
</div>
@@ -267,4 +272,52 @@
</form>
</div>
</div>
</div>
</div>
<style>
.badge-clickable {
font-size: 0.9rem;
padding: 0.5rem 1rem;
margin: 0.3rem;
cursor: pointer;
transition: all 0.2s ease;
opacity: 0.7;
user-select: none;
background-color: #e9ecef !important;
color: #6c757d !important;
border: 1px solid #dee2e6;
}
.badge-clickable:hover {
opacity: 0.9;
}
.badge-clickable.active {
opacity: 1;
color: white !important;
}
.responsabilidades-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 1rem;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
background-color: #f8f9fa;
}
/* Cores personalizadas para badges */
.bg-purple { background-color: #6f42c1 !important; color: white !important; }
.bg-teal { background-color: #20c997 !important; color: white !important; }
.bg-orange { background-color: #fd7e14 !important; color: white !important; }
.bg-indigo { background-color: #6610f2 !important; color: white !important; }
.bg-pink { background-color: #d63384 !important; color: white !important; }
/* Cores do Bootstrap que vamos usar */
.active.bg-primary { background-color: #0d6efd !important; color: white !important; }
.active.bg-success { background-color: #198754 !important; color: white !important; }
.active.bg-info { background-color: #0dcaf0 !important; color: white !important; }
.active.bg-danger { background-color: #dc3545 !important; color: white !important; }
.active.bg-dark { background-color: #212529 !important; color: white !important; }
</style>