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

@@ -57,20 +57,20 @@
</div>
<div class="col-md-6 mb-3">
<label for="data_nascimento" class="form-label">Data de Nascimento</label>
<input type="date" class="form-control" id="data_nascimento" name="data_nascimento"
placeholder="dd/mm/aaaa">
<input type="text" class="form-control date-mask" id="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="data_entrada" class="form-label">Data de Entrada OCI</label>
<input type="date" class="form-control" id="data_entrada" name="data_entrada_oci"
placeholder="dd/mm/aaaa">
<input type="text" class="form-control date-mask" id="data_entrada" name="data_entrada_oci"
placeholder="DD/MM/AAAA" maxlength="10">
</div>
<div class="col-md-6 mb-3">
<label for="data_efetivacao" class="form-label">Data de Efetivação</label>
<input type="date" class="form-control" id="data_efetivacao" name="data_efetivacao_oci"
placeholder="dd/mm/aaaa">
<input type="text" class="form-control date-mask" id="data_efetivacao" name="data_efetivacao_oci"
placeholder="DD/MM/AAAA" maxlength="10">
</div>
</div>
</div>
@@ -230,18 +230,32 @@
</select>
</div>
</div>
<div class="mb-3">
<label class="form-label d-block">Responsabilidades</label>
<div class="row g-3">
{% for valor, nome in Militante.get_responsabilidades_list() %}
<div class="col-md-6">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="resp_{{ valor }}"
name="responsabilidades" value="{{ valor }}">
<label class="form-check-label" for="resp_{{ valor }}">{{ nome }}</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="novo_responsabilidades_values" value="0">
<span class="badge badge-clickable bg-secondary" data-value="{{ Militante.SECRETARIO }}" data-bs-toggle="tooltip" title="Clique para alternar">Secretário</span>
<span class="badge badge-clickable bg-info" data-value="{{ Militante.RESPONSAVEL_IMPRENSA }}" data-bs-toggle="tooltip" title="Clique para alternar">Responsável de Imprensa</span>
<span class="badge badge-clickable bg-warning text-dark" data-value="{{ Militante.IMPRENSA }}" data-bs-toggle="tooltip" title="Clique para alternar">Imprensa</span>
<span class="badge badge-clickable bg-warning text-dark" data-value="{{ Militante.MPS }}" data-bs-toggle="tooltip" title="Clique para alternar">MPS</span>
<span class="badge badge-clickable bg-success" data-value="{{ Militante.QUADRO_ORIENTADOR }}" data-bs-toggle="tooltip" title="Clique para alternar">Quadro-Orientador</span>
<span class="badge badge-clickable bg-primary" data-value="{{ Militante.RESPONSAVEL_FINANCAS }}" data-bs-toggle="tooltip" title="Clique para alternar">Responsável de Finanças</span>
<span class="badge badge-clickable bg-dark" data-value="{{ Militante.TESOUREIRO }}" data-bs-toggle="tooltip" title="Clique para alternar">Tesoureiro</span>
<span class="badge badge-clickable bg-info" data-value="{{ Militante.MNS }}" data-bs-toggle="tooltip" title="Clique para alternar">MNS</span>
<span class="badge badge-clickable bg-danger" data-value="{{ Militante.JUVENTUDE }}" data-bs-toggle="tooltip" title="Clique para alternar">Juventude</span>
<span class="badge badge-clickable bg-light text-dark border" data-value="{{ Militante.ASPIRANTE }}" data-bs-toggle="tooltip" title="Clique para alternar">Aspirante</span>
</div>
{% endfor %}
</div>
</div>
</div>
@@ -256,4 +270,34 @@
</div>
</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.5;
user-select: none;
}
.badge-clickable:hover {
opacity: 0.8;
}
.badge-clickable.active {
opacity: 1;
}
.responsabilidades-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 1rem;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
background-color: #f8f9fa;
}
</style>