att
This commit is contained in:
Andrey Cunha
@@ -1,34 +1,35 @@
|
||||
<div id="filtroDash_${instanceId}"
|
||||
<div id="filtroDash_${instanceId}"
|
||||
class="super-widget wcm-widget-class fluig-style-guide"
|
||||
data-params="FiltroDash.instance()">
|
||||
<div class="fdash-wrap">
|
||||
<div class="fdash-title">AUDITORIAS DE LOJA - IAF 2026</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-3">
|
||||
<label>Data início</label>
|
||||
<input type="date" class="form-control" id="dtInicio_${instanceId}">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label>Data fim</label>
|
||||
<input type="date" class="form-control" id="dtFim_${instanceId}">
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<label>Filial</label>
|
||||
<input class="form-control" id="filial_${instanceId}" list="filial_list_${instanceId}" placeholder="Todas">
|
||||
<datalist id="filial_list_${instanceId}">
|
||||
<option value="Todas"></option>
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<label> </label>
|
||||
<button type="button" class="btn btn-primary btn-block" data-filtrar>
|
||||
Filtrar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="fdash-filters-row">
|
||||
<div class="fdash-filter-card">
|
||||
<div class="fdash-filter-label">CICLO</div>
|
||||
<div id="chips_ciclo_${instanceId}" class="fdash-chips"></div>
|
||||
</div>
|
||||
<div class="fdash-filter-card">
|
||||
<div class="fdash-filter-label">REGIONAL</div>
|
||||
<div id="chips_regional_${instanceId}" class="fdash-chips"></div>
|
||||
</div>
|
||||
<div class="fdash-filter-card">
|
||||
<div class="fdash-filter-label">GESTOR</div>
|
||||
<div id="chips_supervisao_${instanceId}" class="fdash-chips"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fdash-actions">
|
||||
<div class="fdash-date">
|
||||
<label for="dtInicio_${instanceId}">Data inicio</label>
|
||||
<input type="date" class="form-control" id="dtInicio_${instanceId}">
|
||||
</div>
|
||||
<div class="fdash-date">
|
||||
<label for="dtFim_${instanceId}">Data fim</label>
|
||||
<input type="date" class="form-control" id="dtFim_${instanceId}">
|
||||
</div>
|
||||
<button type="button" id="limpar_${instanceId}" class="btn btn-default">Limpar</button>
|
||||
<button type="button" id="filtrar_${instanceId}" class="btn btn-primary">Aplicar filtros</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+128
-4
@@ -1,7 +1,131 @@
|
||||
div[id^="filtroDash_"] input[list] {
|
||||
padding-right: 30px;
|
||||
div[id^="filtroDash_"] .fdash-wrap {
|
||||
background: #9d9d9f;
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .btn[data-filtrar] {
|
||||
font-weight: 600;
|
||||
div[id^="filtroDash_"] .fdash-title {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
line-height: 1.12;
|
||||
font-weight: 800;
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-filters-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-filter-card {
|
||||
background: #ececed;
|
||||
border-radius: 12px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-filter-label {
|
||||
color: #004a6a;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-chip {
|
||||
border: 1px solid #0a4f70;
|
||||
background: #0a5d82;
|
||||
color: #ffffff;
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-chip.is-off {
|
||||
background: #f0f3f5;
|
||||
color: #1c4a62;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-actions {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-date {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-date label {
|
||||
margin: 0 0 2px 0;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-date input {
|
||||
border-radius: 8px;
|
||||
height: 34px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-actions .btn {
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
min-height: 34px;
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-actions button[id^="limpar_"] {
|
||||
background: #e6ebef;
|
||||
border-color: #c7d2da;
|
||||
color: #1c4a62;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-actions button[id^="filtrar_"] {
|
||||
background: #0a5d82;
|
||||
border-color: #0a4f70;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-actions button[id^="filtrar_"]:hover,
|
||||
div[id^="filtroDash_"] .fdash-actions button[id^="filtrar_"]:focus {
|
||||
background: #084d6c;
|
||||
border-color: #083f58;
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
div[id^="filtroDash_"] .fdash-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-filters-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-filter-label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-chip {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
div[id^="filtroDash_"] .fdash-actions {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
+109
-81
@@ -1,111 +1,139 @@
|
||||
var FiltroDash = SuperWidget.extend({
|
||||
|
||||
lojasCarregadas:[],
|
||||
|
||||
init: function(){
|
||||
|
||||
console.log("FiltroDash carregado");
|
||||
|
||||
this.carregarLojas();
|
||||
|
||||
dadosBase: [],
|
||||
selecionados: {
|
||||
ciclo: {},
|
||||
regional: {},
|
||||
supervisao: {}
|
||||
},
|
||||
|
||||
bindings: {
|
||||
local:{
|
||||
'filtrar': ['click_filtrar']
|
||||
}
|
||||
},
|
||||
|
||||
carregarLojas: function(){
|
||||
|
||||
init: function () {
|
||||
var self = this;
|
||||
|
||||
this.carregarBase(function () {
|
||||
self.renderFiltros();
|
||||
self.aplicar();
|
||||
});
|
||||
|
||||
$("#filtrar_" + this.instanceId).on("click", function () {
|
||||
self.aplicar();
|
||||
});
|
||||
|
||||
$("#limpar_" + this.instanceId).on("click", function () {
|
||||
self.limpar();
|
||||
});
|
||||
},
|
||||
|
||||
carregarBase: function (done) {
|
||||
var self = this;
|
||||
var dataList = $("#filial_list_"+this.instanceId);
|
||||
|
||||
$.ajax({
|
||||
|
||||
url: "/api/public/ecm/dataset/search",
|
||||
type: "POST",
|
||||
contentType: "application/json",
|
||||
|
||||
data: JSON.stringify({
|
||||
datasetId: "ds_lojas_api",
|
||||
constraints: [],
|
||||
fields: [],
|
||||
order: []
|
||||
datasetId: "ds_dashboard_checklist"
|
||||
}),
|
||||
|
||||
success: function(response){
|
||||
|
||||
var dados = response.content || [];
|
||||
self.lojasCarregadas = dados.map(function(loja){
|
||||
return String(loja.LOJA || "").trim();
|
||||
}).filter(function(v){ return !!v; });
|
||||
|
||||
self.lojasCarregadas.sort(function(a,b){
|
||||
return a.localeCompare(b);
|
||||
success: function (response) {
|
||||
self.dadosBase = (response.content || []).filter(function (item) {
|
||||
var st = normalizaTexto(item.saidaAnalise || item.status || "");
|
||||
return st === "CONFORME" || st === "NAO_CONFORME";
|
||||
});
|
||||
|
||||
self.lojasCarregadas.forEach(function(loja){
|
||||
|
||||
dataList.append(
|
||||
'<option value="'+loja+'"></option>'
|
||||
);
|
||||
|
||||
});
|
||||
|
||||
done();
|
||||
},
|
||||
error: function () {
|
||||
self.dadosBase = [];
|
||||
done();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
filtrar:function(){
|
||||
renderFiltros: function () {
|
||||
var ciclos = this.valoresUnicos(function (x) { return x.ciclo; });
|
||||
var regionais = this.valoresUnicos(function (x) { return x.regional; });
|
||||
var supervisoes = this.valoresUnicos(function (x) { return x.responsavelLoja; });
|
||||
|
||||
console.log("Filtrar clicado");
|
||||
this.renderChips("ciclo", ciclos, "#chips_ciclo_" + this.instanceId);
|
||||
this.renderChips("regional", regionais, "#chips_regional_" + this.instanceId);
|
||||
this.renderChips("supervisao", supervisoes, "#chips_supervisao_" + this.instanceId);
|
||||
},
|
||||
|
||||
var lojaDigitada = String($("#filial_"+this.instanceId).val() || "").trim();
|
||||
valoresUnicos: function (getter) {
|
||||
var mapa = {};
|
||||
this.dadosBase.forEach(function (item) {
|
||||
var v = String(getter(item) || "").trim();
|
||||
if (!v) {
|
||||
return;
|
||||
}
|
||||
mapa[v] = true;
|
||||
});
|
||||
return Object.keys(mapa).sort(function (a, b) {
|
||||
return a.localeCompare(b);
|
||||
});
|
||||
},
|
||||
|
||||
var filtros = {
|
||||
renderChips: function (tipo, valores, alvoSelector) {
|
||||
var self = this;
|
||||
var alvo = $(alvoSelector);
|
||||
alvo.empty();
|
||||
|
||||
dataInicio: $("#dtInicio_"+this.instanceId).val(),
|
||||
dataFim: $("#dtFim_"+this.instanceId).val(),
|
||||
loja: this.resolverLoja(lojaDigitada)
|
||||
if (!valores.length) {
|
||||
alvo.append('<span class="text-muted">Sem dados</span>');
|
||||
return;
|
||||
}
|
||||
|
||||
valores.forEach(function (valor) {
|
||||
var chip = $("<button>")
|
||||
.attr("type", "button")
|
||||
.addClass("fdash-chip")
|
||||
.addClass("is-off")
|
||||
.attr("data-tipo", tipo)
|
||||
.attr("data-valor", valor)
|
||||
.text(valor);
|
||||
|
||||
chip.on("click", function () {
|
||||
var bucket = self.selecionados[tipo];
|
||||
if (bucket[valor]) {
|
||||
delete bucket[valor];
|
||||
chip.addClass("is-off");
|
||||
} else {
|
||||
bucket[valor] = true;
|
||||
chip.removeClass("is-off");
|
||||
}
|
||||
self.aplicar();
|
||||
});
|
||||
|
||||
alvo.append(chip);
|
||||
});
|
||||
},
|
||||
|
||||
limpar: function () {
|
||||
this.selecionados = {
|
||||
ciclo: {},
|
||||
regional: {},
|
||||
supervisao: {}
|
||||
};
|
||||
|
||||
console.log("Filtros enviados:", filtros);
|
||||
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("dashboardFiltro",{detail:filtros})
|
||||
);
|
||||
|
||||
$("#dtInicio_" + this.instanceId).val("");
|
||||
$("#dtFim_" + this.instanceId).val("");
|
||||
$("#filtroDash_" + this.instanceId + " .fdash-chip").addClass("is-off");
|
||||
this.aplicar();
|
||||
},
|
||||
|
||||
resolverLoja:function(lojaDigitada){
|
||||
if(!lojaDigitada){
|
||||
return "";
|
||||
}
|
||||
|
||||
var buscado = lojaDigitada.toUpperCase();
|
||||
if(buscado === "TODAS" || buscado === "TODOS"){
|
||||
return "";
|
||||
}
|
||||
var lojas = this.lojasCarregadas || [];
|
||||
|
||||
for(var i=0;i<lojas.length;i++){
|
||||
if(lojas[i].toUpperCase() === buscado){
|
||||
return lojas[i];
|
||||
}
|
||||
}
|
||||
|
||||
for(var j=0;j<lojas.length;j++){
|
||||
if(lojas[j].toUpperCase().indexOf(buscado) >= 0){
|
||||
return lojas[j];
|
||||
}
|
||||
}
|
||||
|
||||
return lojaDigitada;
|
||||
aplicar: function () {
|
||||
var filtros = {
|
||||
dataInicio: $("#dtInicio_" + this.instanceId).val(),
|
||||
dataFim: $("#dtFim_" + this.instanceId).val(),
|
||||
ciclo: Object.keys(this.selecionados.ciclo),
|
||||
regional: Object.keys(this.selecionados.regional),
|
||||
supervisao: Object.keys(this.selecionados.supervisao)
|
||||
};
|
||||
|
||||
window.dispatchEvent(new CustomEvent("dashboardFiltro", { detail: filtros }));
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function normalizaTexto(valor) {
|
||||
return String(valor || "").trim().toUpperCase();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user