att
This commit is contained in:
Andrey Cunha
@@ -0,0 +1,19 @@
|
||||
application.type=widget
|
||||
application.code=wddesligamento
|
||||
application.title=wddesligamento
|
||||
application.description=wddesligamento
|
||||
application.fluig.version=null
|
||||
application.category=Desligamento
|
||||
application.renderer=freemarker
|
||||
developer.code=Andrey
|
||||
developer.name=Andrey
|
||||
developer.url=http://www.fluig.com
|
||||
application.uiwidget=true
|
||||
application.mobileapp=false
|
||||
application.version=${build.version}-${build.revision}
|
||||
view.file=view.ftl
|
||||
edit.file=edit.ftl
|
||||
locale.file.base.name=wddesligamento
|
||||
application.resource.js.1=/resources/js/wddesligamento.js
|
||||
application.resource.css.2=/resources/css/wddesligamento.css
|
||||
hash=4a16315e9e66fa7d797b3f6b1fb365b69f9a4ce2
|
||||
@@ -0,0 +1,4 @@
|
||||
<div id="MyWidget_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="MyWidget.instance()">
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,115 @@
|
||||
<script src="/webdesk/vcXMLRPC.js"></script>
|
||||
|
||||
<div id="MyWidget_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide wd-dashboard" data-params="MyWidget.instance({ instanceId: '${instanceId}' })">
|
||||
<div class="wd-dashboard__shell">
|
||||
|
||||
<div class="wd-dashboard__header">
|
||||
<div class="wd-dashboard__title-group">
|
||||
<p class="wd-dashboard__eyebrow">Gestão do Desligamento</p>
|
||||
<h2 class="wd-dashboard__title">Solicitações de Desligamento</h2>
|
||||
</div>
|
||||
<div class="wd-dashboard__actions">
|
||||
<div class="wd-view-toggle" role="group" aria-label="Tipo de visualização">
|
||||
<button type="button" class="wd-view-btn wd-view-btn--active" data-view="list" title="Lista">
|
||||
<svg width="13" height="13" viewBox="0 0 13 13" fill="currentColor" aria-hidden="true"><rect y="0" width="13" height="2" rx="1"/><rect y="4" width="13" height="2" rx="1"/><rect y="8" width="13" height="2" rx="1"/><rect y="11" width="9" height="2" rx="1"/></svg>
|
||||
Lista
|
||||
</button>
|
||||
<button type="button" class="wd-view-btn" data-view="kanban" title="Kanban">
|
||||
<svg width="13" height="13" viewBox="0 0 13 13" fill="currentColor" aria-hidden="true"><rect x="0" y="0" width="3" height="13" rx="1"/><rect x="5" y="0" width="3" height="9" rx="1"/><rect x="10" y="0" width="3" height="11" rx="1"/></svg>
|
||||
Kanban
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-default wd-dashboard__button" data-refresh-dashboard>
|
||||
<span class="fluigicon fluigicon-refresh icon-sm" aria-hidden="true"></span> Atualizar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wd-dashboard__metrics">
|
||||
<div class="wd-metric" data-filter-status="all" title="Ver todos">
|
||||
<div class="wd-metric__icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="4" y="2" width="12" height="16" rx="2"/><line x1="7" y1="7" x2="13" y2="7"/><line x1="7" y1="10" x2="13" y2="10"/><line x1="7" y1="13" x2="11" y2="13"/></svg>
|
||||
</div>
|
||||
<div class="wd-metric__body">
|
||||
<span class="wd-metric__label">Total</span>
|
||||
<strong class="wd-metric__value" data-metric-total>—</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wd-metric wd-metric--progress" data-filter-status="progress" title="Filtrar: Em andamento">
|
||||
<div class="wd-metric__icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="10" cy="10" r="7"/><polyline points="10,6 10,10 13,12"/></svg>
|
||||
</div>
|
||||
<div class="wd-metric__body">
|
||||
<span class="wd-metric__label">Em andamento</span>
|
||||
<strong class="wd-metric__value" data-metric-progress>—</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wd-metric wd-metric--attention" data-filter-status="attention" title="Filtrar: Atenção">
|
||||
<div class="wd-metric__icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M10 3L2 17h16L10 3z"/><line x1="10" y1="9" x2="10" y2="13"/><circle cx="10" cy="15.5" r="0.6" fill="currentColor"/></svg>
|
||||
</div>
|
||||
<div class="wd-metric__body">
|
||||
<span class="wd-metric__label">Atenção</span>
|
||||
<strong class="wd-metric__value" data-metric-attention>—</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wd-metric wd-metric--done" data-filter-status="done" title="Filtrar: Finalizadas">
|
||||
<div class="wd-metric__icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="10" cy="10" r="7"/><polyline points="7,10 9,12 13,8"/></svg>
|
||||
</div>
|
||||
<div class="wd-metric__body">
|
||||
<span class="wd-metric__label">Finalizadas</span>
|
||||
<strong class="wd-metric__value" data-metric-done>—</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wd-op-indicators" data-op-indicators style="display:none"></div>
|
||||
|
||||
<div class="wd-dashboard__filters">
|
||||
<div class="wd-search">
|
||||
<span class="fluigicon fluigicon-search icon-sm" aria-hidden="true"></span>
|
||||
<input type="text" class="form-control" placeholder="Buscar por colaborador, gestor, nº da solicitação, etapa…" data-dashboard-search>
|
||||
</div>
|
||||
<select class="form-control wd-filter" data-dashboard-status>
|
||||
<option value="all">Todos os status</option>
|
||||
<option value="progress">Em andamento</option>
|
||||
<option value="attention">Atenção</option>
|
||||
<option value="done">Finalizadas</option>
|
||||
<option value="canceled">Canceladas</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="wd-dashboard__state wd-dashboard__state--loading" data-dashboard-loading>
|
||||
<span class="wd-spinner" aria-hidden="true"></span>
|
||||
Carregando solicitações…
|
||||
</div>
|
||||
<div class="wd-dashboard__state wd-dashboard__state--empty" data-dashboard-empty style="display:none">
|
||||
Nenhuma solicitação encontrada para os filtros atuais.
|
||||
</div>
|
||||
<div class="wd-dashboard__state wd-dashboard__state--error" data-dashboard-error style="display:none"></div>
|
||||
|
||||
<div class="wd-dashboard__list" data-dashboard-list></div>
|
||||
<div class="wd-pagination" data-dashboard-pagination></div>
|
||||
<div class="wd-kanban" data-dashboard-kanban style="display:none"></div>
|
||||
<div class="wd-pagination" data-dashboard-kanban-pagination style="display:none"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="WdDrawer_${instanceId}" class="wd-drawer" data-drawer>
|
||||
<div class="wd-drawer__overlay" data-drawer-close></div>
|
||||
<div class="wd-drawer__panel">
|
||||
<div class="wd-drawer__header">
|
||||
<div>
|
||||
<span class="wd-drawer__num" data-drawer-num></span>
|
||||
<h3 class="wd-drawer__name" data-drawer-name></h3>
|
||||
<p class="wd-drawer__sub" data-drawer-role></p>
|
||||
</div>
|
||||
<button type="button" class="wd-drawer__close" data-drawer-close aria-label="Fechar painel">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M4.293 4.293a1 1 0 011.414 0L8 6.586l2.293-2.293a1 1 0 111.414 1.414L9.414 8l2.293 2.293a1 1 0 01-1.414 1.414L8 9.414l-2.293 2.293a1 1 0 01-1.414-1.414L6.586 8 4.293 5.707a1 1 0 010-1.414z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="wd-drawer__body" data-drawer-content></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,2 @@
|
||||
|
||||
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
|
||||
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<jboss-web>
|
||||
<context-root>/wddesligamento</context-root>
|
||||
<disable-cross-context>false</disable-cross-context>
|
||||
</jboss-web>
|
||||
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
|
||||
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
|
||||
version="3.0">
|
||||
<session-config>
|
||||
<session-timeout>
|
||||
30
|
||||
</session-timeout>
|
||||
</session-config>
|
||||
</web-app>
|
||||
+1039
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
+1182
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,17 @@
|
||||
application.type=widget
|
||||
application.code=wddesligamentokpis
|
||||
application.title=wddesligamentokpis
|
||||
application.description=wddesligamentokpis
|
||||
application.fluig.version=null
|
||||
application.category=Desligamento
|
||||
application.renderer=freemarker
|
||||
developer.code=Andrey
|
||||
developer.name=Andrey
|
||||
developer.url=http://www.fluig.com
|
||||
application.uiwidget=true
|
||||
application.mobileapp=false
|
||||
application.version=${build.version}-${build.revision}
|
||||
view.file=view.ftl
|
||||
locale.file.base.name=wddesligamentokpis
|
||||
application.resource.js.1=/resources/js/wddesligamentokpis.js
|
||||
application.resource.css.2=/resources/css/wddesligamentokpis.css
|
||||
@@ -0,0 +1,117 @@
|
||||
<script src="/webdesk/vcXMLRPC.js"></script>
|
||||
|
||||
<div id="WdKpis_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide wdk-widget" data-params="WdKpisWidget.instance({ instanceId: '${instanceId}' })">
|
||||
<div class="wdk-shell">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="wdk-header">
|
||||
<div>
|
||||
<p class="wdk-eyebrow">Análise de Desligamentos</p>
|
||||
<h2 class="wdk-title">KPIs por Tipo e Departamento</h2>
|
||||
</div>
|
||||
<div class="wdk-actions">
|
||||
<div class="wdk-period-toggle" role="group">
|
||||
<button type="button" class="wdk-period-btn wdk-period-btn--active" data-period="all">Todos</button>
|
||||
<button type="button" class="wdk-period-btn" data-period="year">Este ano</button>
|
||||
<button type="button" class="wdk-period-btn" data-period="month">Este mês</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-default wdk-refresh-btn" data-refresh>
|
||||
<span class="fluigicon fluigicon-refresh icon-sm" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary KPIs -->
|
||||
<div class="wdk-summary" data-summary>
|
||||
<div class="wdk-summary__card">
|
||||
<span class="wdk-summary__label">Total</span>
|
||||
<strong class="wdk-summary__value" data-kpi-total>—</strong>
|
||||
</div>
|
||||
<div class="wdk-summary__card wdk-summary__card--blue">
|
||||
<span class="wdk-summary__label">Exp. probatória</span>
|
||||
<strong class="wdk-summary__value" data-kpi-tipo-experiencia>—</strong>
|
||||
<span class="wdk-summary__pct" data-kpi-tipo-experiencia-pct></span>
|
||||
</div>
|
||||
<div class="wdk-summary__card wdk-summary__card--amber">
|
||||
<span class="wdk-summary__label">Baixo desempenho</span>
|
||||
<strong class="wdk-summary__value" data-kpi-tipo-desempenho>—</strong>
|
||||
<span class="wdk-summary__pct" data-kpi-tipo-desempenho-pct></span>
|
||||
</div>
|
||||
<div class="wdk-summary__card wdk-summary__card--purple">
|
||||
<span class="wdk-summary__label">Substituição</span>
|
||||
<strong class="wdk-summary__value" data-kpi-tipo-substituicao>—</strong>
|
||||
<span class="wdk-summary__pct" data-kpi-tipo-substituicao-pct></span>
|
||||
</div>
|
||||
<div class="wdk-summary__card wdk-summary__card--gray">
|
||||
<span class="wdk-summary__label">Outros tipos</span>
|
||||
<strong class="wdk-summary__value" data-kpi-tipo-outros>—</strong>
|
||||
<span class="wdk-summary__pct" data-kpi-tipo-outros-pct></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- States -->
|
||||
<div class="wdk-state wdk-state--loading" data-loading>
|
||||
<span class="wdk-spinner" aria-hidden="true"></span>
|
||||
Carregando dados…
|
||||
</div>
|
||||
<div class="wdk-state wdk-state--empty" data-empty style="display:none">
|
||||
Nenhum dado encontrado para o período selecionado.
|
||||
</div>
|
||||
<div class="wdk-state wdk-state--error" data-error style="display:none"></div>
|
||||
|
||||
<!-- Breakdowns -->
|
||||
<div class="wdk-breakdowns" data-breakdowns style="display:none">
|
||||
<div class="wdk-panel">
|
||||
<div class="wdk-panel__header">
|
||||
<span class="wdk-panel__title">Por Tipo de Desligamento</span>
|
||||
<span class="wdk-panel__badge" data-tipo-total></span>
|
||||
</div>
|
||||
<div class="wdk-bars" data-tipo-bars></div>
|
||||
</div>
|
||||
<div class="wdk-panel">
|
||||
<div class="wdk-panel__header">
|
||||
<span class="wdk-panel__title">Por Departamento</span>
|
||||
<span class="wdk-panel__badge" data-dept-total></span>
|
||||
</div>
|
||||
<div class="wdk-bars" data-dept-bars></div>
|
||||
</div>
|
||||
<div class="wdk-panel wdk-panel--full">
|
||||
<div class="wdk-panel__header">
|
||||
<span class="wdk-panel__title">Por Função do Colaborador</span>
|
||||
<span class="wdk-panel__badge" data-cargo-total></span>
|
||||
</div>
|
||||
<div class="wdk-bars wdk-bars--grid" data-cargo-bars></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Drill-down panel -->
|
||||
<div class="wdk-drilldown" data-drilldown style="display:none">
|
||||
<div class="wdk-drilldown__header">
|
||||
<button type="button" class="wdk-drilldown__back" data-drill-back>← Voltar</button>
|
||||
<div class="wdk-drilldown__meta">
|
||||
<span class="wdk-drilldown__title" data-drill-title></span>
|
||||
<span class="wdk-panel__badge" data-drill-count></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wdk-drill-list" data-drill-list></div>
|
||||
</div>
|
||||
|
||||
<!-- Detail card modal -->
|
||||
<div class="wdk-detail-overlay" data-detail-modal style="display:none">
|
||||
<div class="wdk-detail-card">
|
||||
<div class="wdk-detail-card__header">
|
||||
<strong data-detail-num></strong>
|
||||
<button type="button" class="wdk-detail-card__close" data-detail-close>✕</button>
|
||||
</div>
|
||||
<dl class="wdk-detail-dl">
|
||||
<dt>Colaborador</dt> <dd data-detail-employee></dd>
|
||||
<dt>Departamento</dt> <dd data-detail-dept></dd>
|
||||
<dt>Tipo</dt> <dd data-detail-tipo></dd>
|
||||
<dt>Abertura</dt> <dd data-detail-date></dd>
|
||||
<dt>Gestor</dt> <dd data-detail-requester></dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
+1
@@ -0,0 +1 @@
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<jboss-web>
|
||||
<context-root>/wddesligamentokpis</context-root>
|
||||
<disable-cross-context>false</disable-cross-context>
|
||||
</jboss-web>
|
||||
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
|
||||
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
|
||||
version="3.0">
|
||||
<session-config>
|
||||
<session-timeout>
|
||||
30
|
||||
</session-timeout>
|
||||
</session-config>
|
||||
</web-app>
|
||||
+494
@@ -0,0 +1,494 @@
|
||||
/* ================================================================
|
||||
wddesligamentokpis.css — KPIs por Tipo e Departamento
|
||||
================================================================ */
|
||||
|
||||
.wdk-widget {
|
||||
color: #0f172a;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.wdk-widget * { box-sizing: border-box; }
|
||||
|
||||
.wdk-shell {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* ── Header ───────────────────────────────────────────────────── */
|
||||
.wdk-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wdk-eyebrow {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
margin: 0 0 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wdk-title {
|
||||
color: #0f172a;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wdk-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.wdk-refresh-btn {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
/* ── Period toggle ────────────────────────────────────────────── */
|
||||
.wdk-period-toggle {
|
||||
background: #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
gap: 2px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.wdk-period-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.wdk-period-btn--active {
|
||||
background: #ffffff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
/* ── Summary KPI cards ────────────────────────────────────────── */
|
||||
.wdk-summary {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wdk-summary__card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
border-top: 3px solid #e2e8f0;
|
||||
padding: 12px 14px;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.wdk-summary__card--blue { border-top-color: #3b82f6; }
|
||||
.wdk-summary__card--amber { border-top-color: #f59e0b; }
|
||||
.wdk-summary__card--purple { border-top-color: #8b5cf6; }
|
||||
.wdk-summary__card--gray { border-top-color: #94a3b8; }
|
||||
|
||||
.wdk-summary__label {
|
||||
color: #64748b;
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 4px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.wdk-summary__value {
|
||||
color: #0f172a;
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.wdk-summary__card--blue .wdk-summary__value { color: #2563eb; }
|
||||
.wdk-summary__card--amber .wdk-summary__value { color: #d97706; }
|
||||
.wdk-summary__card--purple .wdk-summary__value { color: #7c3aed; }
|
||||
.wdk-summary__card--gray .wdk-summary__value { color: #64748b; }
|
||||
|
||||
.wdk-summary__pct {
|
||||
color: #64748b;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── States ───────────────────────────────────────────────────── */
|
||||
.wdk-state {
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
color: #64748b;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
margin-bottom: 0;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.wdk-state--error {
|
||||
background: #fff1f2;
|
||||
border-color: #fecdd3;
|
||||
color: #9f1239;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@keyframes wdk-spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.wdk-spinner {
|
||||
animation: wdk-spin 0.75s linear infinite;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 50%;
|
||||
border-top-color: #2563eb;
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
/* ── Two-column breakdowns ────────────────────────────────────── */
|
||||
.wdk-breakdowns {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.wdk-panel {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* cargo panel spans full width of the 2-column grid */
|
||||
.wdk-panel--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* cargo bars in 2-column grid inside the panel */
|
||||
.wdk-bars--grid {
|
||||
column-count: 2;
|
||||
column-gap: 0;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.wdk-bars--grid .wdk-bar-row {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.wdk-panel__header {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.wdk-panel__title {
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wdk-panel__badge {
|
||||
background: #f1f5f9;
|
||||
border-radius: 999px;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
/* ── Bar rows ─────────────────────────────────────────────────── */
|
||||
.wdk-bars {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.wdk-bar-row {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 7px 16px;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
|
||||
.wdk-bar-row:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.wdk-bar-row__label {
|
||||
color: #334155;
|
||||
flex: 0 0 auto;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.wdk-bar-row__track {
|
||||
background: #f1f5f9;
|
||||
border-radius: 999px;
|
||||
flex: 1 1 0;
|
||||
height: 8px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wdk-bar-row__fill {
|
||||
border-radius: 999px;
|
||||
height: 100%;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.wdk-bar-row__count {
|
||||
color: #0f172a;
|
||||
flex: 0 0 auto;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
min-width: 28px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.wdk-bar-row__pct {
|
||||
color: #94a3b8;
|
||||
flex: 0 0 auto;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
min-width: 34px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Tipo colors */
|
||||
.wdk-fill--0 { background: #3b82f6; }
|
||||
.wdk-fill--1 { background: #f59e0b; }
|
||||
.wdk-fill--2 { background: #8b5cf6; }
|
||||
.wdk-fill--3 { background: #22c55e; }
|
||||
.wdk-fill--4 { background: #ef4444; }
|
||||
.wdk-fill--5 { background: #06b6d4; }
|
||||
.wdk-fill--6 { background: #f97316; }
|
||||
.wdk-fill--other { background: #94a3b8; }
|
||||
|
||||
/* Dept colors — gradient blue */
|
||||
.wdk-fill-dept {
|
||||
background: linear-gradient(90deg, #2563eb, #06b6d4);
|
||||
}
|
||||
|
||||
/* ── Responsive ───────────────────────────────────────────────── */
|
||||
@media (max-width: 900px) {
|
||||
.wdk-summary { grid-template-columns: repeat(3, 1fr); }
|
||||
.wdk-breakdowns { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.wdk-summary { grid-template-columns: repeat(2, 1fr); }
|
||||
.wdk-bar-row__label { width: 110px; }
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.wdk-summary { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
|
||||
/* ── Clickable bar rows ───────────────────────────────────────── */
|
||||
.wdk-bar-row--drill { cursor: pointer; }
|
||||
.wdk-bar-row--drill:hover { background: #eff6ff; }
|
||||
.wdk-bar-row--drill .wdk-bar-row__label { color: #1d4ed8; }
|
||||
|
||||
/* ── Drilldown panel ──────────────────────────────────────────── */
|
||||
.wdk-drilldown { padding: 4px 0; }
|
||||
|
||||
.wdk-drilldown__header {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.wdk-drilldown__back {
|
||||
background: #ffffff;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 6px;
|
||||
color: #475569;
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 4px 12px;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.wdk-drilldown__back:hover { background: #f8fafc; }
|
||||
|
||||
.wdk-drilldown__meta { align-items: center; display: flex; gap: 8px; }
|
||||
|
||||
.wdk-drilldown__title {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wdk-drill-list {
|
||||
max-height: 340px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.wdk-drill-row {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.wdk-drill-row:hover { background: #f8fafc; }
|
||||
|
||||
.wdk-drill-row__num {
|
||||
color: #64748b;
|
||||
flex: 0 0 68px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wdk-drill-row__info {
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wdk-drill-row__employee {
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wdk-drill-row__dept {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wdk-drill-row__date {
|
||||
color: #94a3b8;
|
||||
flex: 0 0 60px;
|
||||
font-size: 11px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.wdk-drill-empty {
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Detail overlay + card ────────────────────────────────────── */
|
||||
.wdk-detail-overlay {
|
||||
align-items: center;
|
||||
background: rgba(15, 23, 42, 0.45);
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 9500;
|
||||
}
|
||||
|
||||
.wdk-detail-card {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
|
||||
max-width: 440px;
|
||||
padding: 24px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.wdk-detail-card__header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wdk-detail-card__header strong {
|
||||
color: #0f172a;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.wdk-detail-card__close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
transition: color 0.12s;
|
||||
}
|
||||
.wdk-detail-card__close:hover { color: #475569; }
|
||||
|
||||
.wdk-detail-dl {
|
||||
display: grid;
|
||||
gap: 0 16px;
|
||||
grid-template-columns: auto 1fr;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wdk-detail-dl dt {
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 7px 0;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wdk-detail-dl dd {
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
padding: 7px 0;
|
||||
}
|
||||
+518
@@ -0,0 +1,518 @@
|
||||
var WdKpisWidget = SuperWidget.extend({
|
||||
instanceId: null,
|
||||
|
||||
/* dataset names to try in order */
|
||||
datasetCandidates: [
|
||||
"desligamentoColaborador",
|
||||
"Desligamento",
|
||||
"desligamento"
|
||||
],
|
||||
|
||||
/* fields to request from dataset (null = all) */
|
||||
datasetFields: [
|
||||
"tipodesligamento",
|
||||
"departamento",
|
||||
"dataAbertura",
|
||||
"WKNumProces",
|
||||
"colabDesliga",
|
||||
"requesterName",
|
||||
"cargoColaborador"
|
||||
],
|
||||
|
||||
/* known tipo codes → display labels */
|
||||
tipoLabels: {
|
||||
"experiencia": "Exp. Probatória",
|
||||
"desempenho": "Baixo Desempenho",
|
||||
"substituicao": "Substituição",
|
||||
"voluntario": "Pedido do colaborador",
|
||||
"acordo": "Acordo",
|
||||
"outros": "Outros"
|
||||
},
|
||||
|
||||
/* summary card slot → tipo keys */
|
||||
summarySlots: {
|
||||
"experiencia": "[data-kpi-tipo-experiencia]",
|
||||
"desempenho": "[data-kpi-tipo-desempenho]",
|
||||
"substituicao": "[data-kpi-tipo-substituicao]"
|
||||
},
|
||||
|
||||
currentPeriod: "all",
|
||||
allRecords: [],
|
||||
drillFilter: null,
|
||||
|
||||
init: function() {
|
||||
this.$root = $("#WdKpis_" + this.instanceId);
|
||||
this.$loading = this.$root.find("[data-loading]");
|
||||
this.$empty = this.$root.find("[data-empty]");
|
||||
this.$error = this.$root.find("[data-error]");
|
||||
this.$breakdowns = this.$root.find("[data-breakdowns]");
|
||||
this.$tipoBars = this.$root.find("[data-tipo-bars]");
|
||||
this.$deptBars = this.$root.find("[data-dept-bars]");
|
||||
this.$cargoBars = this.$root.find("[data-cargo-bars]");
|
||||
this.$drilldown = this.$root.find("[data-drilldown]");
|
||||
this.$drillList = this.$root.find("[data-drill-list]");
|
||||
this.$detailModal = this.$root.find("[data-detail-modal]");
|
||||
|
||||
this.bindUi();
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
bindings: { local: {}, global: {} },
|
||||
|
||||
bindUi: function() {
|
||||
var self = this;
|
||||
|
||||
this.$root.find("[data-refresh]").on("click", function() {
|
||||
self.loadData();
|
||||
});
|
||||
|
||||
this.$root.on("click", "[data-period]", function() {
|
||||
self.currentPeriod = $(this).data("period");
|
||||
self.$root.find("[data-period]").removeClass("wdk-period-btn--active");
|
||||
$(this).addClass("wdk-period-btn--active");
|
||||
self.drillFilter = null;
|
||||
self.render();
|
||||
});
|
||||
|
||||
/* bar click → drill-down */
|
||||
this.$root.on("click", "[data-drill]", function() {
|
||||
var $el = $(this);
|
||||
self.drillFilter = { field: $el.data("drill-field"), value: $el.data("drill-value") };
|
||||
self.renderDrilldown();
|
||||
});
|
||||
|
||||
/* back button */
|
||||
this.$root.on("click", "[data-drill-back]", function() {
|
||||
self.drillFilter = null;
|
||||
self.render();
|
||||
});
|
||||
|
||||
/* drill-list row → detail card */
|
||||
this.$root.on("click", "[data-drill-row]", function() {
|
||||
var idx = parseInt($(this).data("drill-row"), 10);
|
||||
var recs = self.getDrillRecords();
|
||||
if (recs[idx]) { self.showDetail(recs[idx]); }
|
||||
});
|
||||
|
||||
/* close detail modal */
|
||||
this.$root.on("click", "[data-detail-close]", function() {
|
||||
self.$detailModal.hide();
|
||||
});
|
||||
|
||||
$(document).on("keydown.wdKpisDetail_" + this.instanceId, function(e) {
|
||||
if (e.which === 27) { self.$detailModal.hide(); }
|
||||
});
|
||||
},
|
||||
|
||||
/* ── Data loading ─────────────────────────────────────────── */
|
||||
|
||||
loadData: function() {
|
||||
var self = this;
|
||||
this.showLoading();
|
||||
|
||||
$.ajax({
|
||||
url: "/api/public/ecm/dataset/search",
|
||||
type: "POST",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify({
|
||||
datasetId: "desligamento",
|
||||
fields: self.datasetFields,
|
||||
constraints: [],
|
||||
order: [],
|
||||
size: 2000
|
||||
})
|
||||
})
|
||||
.done(function(res) {
|
||||
var rows = self.deduplicateByProcess(res.content || []);
|
||||
self.allRecords = rows.map(function(r) { return self.normalizeRecord(r); });
|
||||
self.render();
|
||||
})
|
||||
.fail(function() {
|
||||
/* fallback: process management API (sem campos do formulário) */
|
||||
self.fetchFromApi();
|
||||
});
|
||||
},
|
||||
|
||||
deduplicateByProcess: function(rows) {
|
||||
/* keep last row per WKNumProces — a versão mais recente tem os campos mais completos */
|
||||
var map = {};
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
var proc = String(rows[i]["WKNumProces"] || rows[i]["processInstanceId"] || ("__idx_" + i));
|
||||
map[proc] = rows[i]; /* sobrescreve: última linha ganha */
|
||||
}
|
||||
var deduped = [];
|
||||
for (var k in map) {
|
||||
if (map.hasOwnProperty(k)) { deduped.push(map[k]); }
|
||||
}
|
||||
return deduped;
|
||||
},
|
||||
|
||||
normalizeRecord: function(row) {
|
||||
var tipo = this.readField(row, ["tipodesligamento", "tipo", "tipoDemissao", "dismissalType"]);
|
||||
var dept = this.readField(row, ["departamento", "department", "area", "setor"]);
|
||||
var dateStr = this.readField(row, ["dataAbertura", "startDate", "createDate", "WKCreateDate"]);
|
||||
var processNum = this.readField(row, ["WKNumProces", "processInstanceId"]);
|
||||
var employee = this.readField(row, ["colabDesliga", "colaborador", "employeeName"]);
|
||||
var requester = this.readField(row, ["requesterName", "solicitante", "requester"]);
|
||||
var cargo = this.readField(row, ["cargoColaborador", "cargo", "role", "position"]);
|
||||
|
||||
return {
|
||||
tipo: this.normalizeTipo(tipo),
|
||||
tipoRaw: String(tipo || "").toLowerCase().trim(),
|
||||
dept: String(dept || "Não informado").trim() || "Não informado",
|
||||
date: this.parseDate(dateStr),
|
||||
processNum: processNum,
|
||||
employee: employee || "Não informado",
|
||||
requester: requester || "—",
|
||||
cargo: String(cargo || "Não informado").trim() || "Não informado"
|
||||
};
|
||||
},
|
||||
|
||||
normalizeTipo: function(value) {
|
||||
if (!value) { return "Não informado"; }
|
||||
var key = String(value).toLowerCase()
|
||||
.replace(/[áàâã]/g, "a").replace(/[éèê]/g, "e")
|
||||
.replace(/[íìî]/g, "i").replace(/[óòôõ]/g, "o")
|
||||
.replace(/[úùû]/g, "u").replace(/ç/g, "c")
|
||||
.trim();
|
||||
|
||||
return this.tipoLabels[key] || String(value).trim() || "Outros";
|
||||
},
|
||||
|
||||
readField: function(row, keys) {
|
||||
if (!row) { return ""; }
|
||||
for (var i = 0; i < keys.length; i++) {
|
||||
var v = row[keys[i]];
|
||||
if (v !== undefined && v !== null && String(v).trim() !== "") { return String(v).trim(); }
|
||||
}
|
||||
return "";
|
||||
},
|
||||
|
||||
parseDate: function(value) {
|
||||
if (!value) { return null; }
|
||||
var s = String(value);
|
||||
|
||||
/* DD/MM/YYYY */
|
||||
var m1 = s.match(/^(\d{2})\/(\d{2})\/(\d{4})/);
|
||||
if (m1) { return new Date(+m1[3], +m1[2] - 1, +m1[1]); }
|
||||
|
||||
/* YYYY-MM-DD or ISO */
|
||||
var m2 = s.match(/^(\d{4})-(\d{2})-(\d{2})/);
|
||||
if (m2) { return new Date(+m2[1], +m2[2] - 1, +m2[3]); }
|
||||
|
||||
var d = new Date(s);
|
||||
return isNaN(d.getTime()) ? null : d;
|
||||
},
|
||||
|
||||
fetchFromApi: function() {
|
||||
var self = this;
|
||||
|
||||
$.ajax({
|
||||
url: "/process-management/api/v2/processes/desligamentoColaborador/requests?page=1&pageSize=1000",
|
||||
method: "GET",
|
||||
dataType: "json",
|
||||
headers: { Accept: "application/json" }
|
||||
})
|
||||
.done(function(response) {
|
||||
var rows = [];
|
||||
var data = response;
|
||||
var keys = ["content", "items", "requests", "data", "values"];
|
||||
for (var k = 0; k < keys.length; k++) {
|
||||
if ($.isArray(data[keys[k]])) { rows = data[keys[k]]; break; }
|
||||
}
|
||||
if ($.isArray(data)) { rows = data; }
|
||||
|
||||
self.allRecords = rows.map(function(r) { return self.normalizeRecord(r); });
|
||||
self.render();
|
||||
})
|
||||
.fail(function() {
|
||||
self.showError("Não foi possível carregar os dados. Verifique se o dataset está publicado com um dos nomes: " + self.datasetCandidates.join(", ") + ".");
|
||||
});
|
||||
},
|
||||
|
||||
/* ── Period filter ────────────────────────────────────────── */
|
||||
|
||||
filterByPeriod: function(records) {
|
||||
if (this.currentPeriod === "all") { return records; }
|
||||
|
||||
var now = new Date();
|
||||
var year = now.getFullYear();
|
||||
var month = now.getMonth();
|
||||
var period = this.currentPeriod;
|
||||
|
||||
return records.filter(function(r) {
|
||||
if (!r.date) { return true; }
|
||||
if (period === "year") { return r.date.getFullYear() === year; }
|
||||
if (period === "month") { return r.date.getFullYear() === year && r.date.getMonth() === month; }
|
||||
return true;
|
||||
});
|
||||
},
|
||||
|
||||
/* ── Render ───────────────────────────────────────────────── */
|
||||
|
||||
render: function() {
|
||||
this.$loading.hide();
|
||||
this.$error.hide();
|
||||
this.$drilldown.hide();
|
||||
this.$detailModal.hide();
|
||||
|
||||
if (this.drillFilter) { this.renderDrilldown(); return; }
|
||||
|
||||
var records = this.filterByPeriod(this.allRecords);
|
||||
var total = records.length;
|
||||
|
||||
if (!total) {
|
||||
this.$breakdowns.hide();
|
||||
this.$empty.show();
|
||||
this.clearSummary();
|
||||
return;
|
||||
}
|
||||
|
||||
this.$empty.hide();
|
||||
this.$breakdowns.show();
|
||||
|
||||
var tipoMap = this.groupBy(records, "tipo");
|
||||
var deptMap = this.groupBy(records, "dept");
|
||||
var cargoMap = this.groupBy(records, "cargo");
|
||||
|
||||
this.renderSummary(total, tipoMap);
|
||||
this.renderTipoBars(tipoMap, total);
|
||||
this.renderDeptBars(deptMap, total);
|
||||
this.renderCargoBars(cargoMap, total);
|
||||
},
|
||||
|
||||
groupBy: function(records, field) {
|
||||
var map = {};
|
||||
for (var i = 0; i < records.length; i++) {
|
||||
var key = records[i][field] || "Não informado";
|
||||
map[key] = (map[key] || 0) + 1;
|
||||
}
|
||||
/* sort desc */
|
||||
var sorted = [];
|
||||
for (var k in map) {
|
||||
if (map.hasOwnProperty(k)) { sorted.push({ label: k, count: map[k] }); }
|
||||
}
|
||||
sorted.sort(function(a, b) { return b.count - a.count; });
|
||||
return sorted;
|
||||
},
|
||||
|
||||
/* ── Summary cards ────────────────────────────────────────── */
|
||||
|
||||
clearSummary: function() {
|
||||
this.$root.find("[data-kpi-total]").text("—");
|
||||
this.$root.find("[data-kpi-tipo-experiencia]").text("—");
|
||||
this.$root.find("[data-kpi-tipo-desempenho]").text("—");
|
||||
this.$root.find("[data-kpi-tipo-substituicao]").text("—");
|
||||
this.$root.find("[data-kpi-tipo-outros]").text("—");
|
||||
this.$root.find("[data-kpi-tipo-experiencia-pct], [data-kpi-tipo-desempenho-pct], [data-kpi-tipo-substituicao-pct], [data-kpi-tipo-outros-pct]").text("");
|
||||
},
|
||||
|
||||
renderSummary: function(total, tipoArr) {
|
||||
this.$root.find("[data-kpi-total]").text(total);
|
||||
|
||||
/* map label → count */
|
||||
var byLabel = {};
|
||||
for (var i = 0; i < tipoArr.length; i++) {
|
||||
byLabel[tipoArr[i].label] = tipoArr[i].count;
|
||||
}
|
||||
|
||||
var slots = {
|
||||
"Exp. Probatória": { val: "[data-kpi-tipo-experiencia]", pct: "[data-kpi-tipo-experiencia-pct]" },
|
||||
"Baixo Desempenho": { val: "[data-kpi-tipo-desempenho]", pct: "[data-kpi-tipo-desempenho-pct]" },
|
||||
"Substituição": { val: "[data-kpi-tipo-substituicao]", pct: "[data-kpi-tipo-substituicao-pct]" }
|
||||
};
|
||||
|
||||
var slotKeys = Object.keys ? Object.keys(slots) : (function() { var k = []; for (var x in slots) { if (slots.hasOwnProperty(x)) k.push(x); } return k; })();
|
||||
var knownKeys = slotKeys.slice();
|
||||
|
||||
var outros = 0;
|
||||
for (var k in byLabel) {
|
||||
if (byLabel.hasOwnProperty(k)) {
|
||||
var isKnown = false;
|
||||
for (var j = 0; j < knownKeys.length; j++) { if (knownKeys[j] === k) { isKnown = true; break; } }
|
||||
if (!isKnown) { outros += byLabel[k]; }
|
||||
}
|
||||
}
|
||||
|
||||
for (var label in slots) {
|
||||
if (!slots.hasOwnProperty(label)) { continue; }
|
||||
var count = byLabel[label] || 0;
|
||||
var pct = total > 0 ? Math.round(count / total * 100) : 0;
|
||||
this.$root.find(slots[label].val).text(count);
|
||||
this.$root.find(slots[label].pct).text(count ? pct + "%" : "");
|
||||
}
|
||||
|
||||
this.$root.find("[data-kpi-tipo-outros]").text(outros);
|
||||
this.$root.find("[data-kpi-tipo-outros-pct]").text(outros && total ? Math.round(outros / total * 100) + "%" : "");
|
||||
},
|
||||
|
||||
/* ── Tipo bar chart ───────────────────────────────────────── */
|
||||
|
||||
renderTipoBars: function(tipoArr, total) {
|
||||
this.$root.find("[data-tipo-total]").text(tipoArr.length + " tipos");
|
||||
|
||||
if (!tipoArr.length) { this.$tipoBars.html(""); return; }
|
||||
|
||||
var maxCount = tipoArr[0].count;
|
||||
var html = "";
|
||||
|
||||
for (var i = 0; i < tipoArr.length; i++) {
|
||||
var item = tipoArr[i];
|
||||
var barPct = Math.round(item.count / maxCount * 100);
|
||||
var pct = Math.round(item.count / total * 100);
|
||||
var colorClass = "wdk-fill--" + Math.min(i, 6);
|
||||
|
||||
html += '<div class="wdk-bar-row wdk-bar-row--drill" data-drill data-drill-field="tipo" data-drill-value="' + this.escapeHtml(item.label) + '">';
|
||||
html += '<span class="wdk-bar-row__label" title="' + this.escapeHtml(item.label) + '">' + this.escapeHtml(item.label) + '</span>';
|
||||
html += '<div class="wdk-bar-row__track"><div class="wdk-bar-row__fill ' + colorClass + '" style="width:' + barPct + '%"></div></div>';
|
||||
html += '<span class="wdk-bar-row__count">' + item.count + '</span>';
|
||||
html += '<span class="wdk-bar-row__pct">' + pct + '%</span>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
this.$tipoBars.html(html);
|
||||
},
|
||||
|
||||
/* ── Dept bar chart ───────────────────────────────────────── */
|
||||
|
||||
renderDeptBars: function(deptArr, total) {
|
||||
this.$root.find("[data-dept-total]").text(deptArr.length + " depto" + (deptArr.length !== 1 ? "s" : ""));
|
||||
|
||||
if (!deptArr.length) { this.$deptBars.html(""); return; }
|
||||
|
||||
var maxCount = deptArr[0].count;
|
||||
/* show top 12 departments */
|
||||
var visible = deptArr.slice(0, 12);
|
||||
var html = "";
|
||||
|
||||
for (var i = 0; i < visible.length; i++) {
|
||||
var item = visible[i];
|
||||
var barPct = Math.round(item.count / maxCount * 100);
|
||||
var pct = Math.round(item.count / total * 100);
|
||||
|
||||
html += '<div class="wdk-bar-row wdk-bar-row--drill" data-drill data-drill-field="dept" data-drill-value="' + this.escapeHtml(item.label) + '">';
|
||||
html += '<span class="wdk-bar-row__label" title="' + this.escapeHtml(item.label) + '">' + this.escapeHtml(item.label) + '</span>';
|
||||
html += '<div class="wdk-bar-row__track"><div class="wdk-bar-row__fill wdk-fill-dept" style="width:' + barPct + '%"></div></div>';
|
||||
html += '<span class="wdk-bar-row__count">' + item.count + '</span>';
|
||||
html += '<span class="wdk-bar-row__pct">' + pct + '%</span>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
if (deptArr.length > 12) {
|
||||
var remaining = deptArr.length - 12;
|
||||
html += '<div class="wdk-bar-row" style="opacity:0.6"><span class="wdk-bar-row__label">+ ' + remaining + ' outros</span></div>';
|
||||
}
|
||||
|
||||
this.$deptBars.html(html);
|
||||
},
|
||||
|
||||
/* ── Cargo bar chart ──────────────────────────────────────── */
|
||||
|
||||
renderCargoBars: function(cargoArr, total) {
|
||||
this.$root.find("[data-cargo-total]").text(cargoArr.length + (cargoArr.length !== 1 ? " funções" : " função"));
|
||||
|
||||
if (!cargoArr.length) { this.$cargoBars.html(""); return; }
|
||||
|
||||
var maxCount = cargoArr[0].count;
|
||||
/* show top 15 functions */
|
||||
var visible = cargoArr.slice(0, 15);
|
||||
var html = "";
|
||||
|
||||
for (var i = 0; i < visible.length; i++) {
|
||||
var item = visible[i];
|
||||
var barPct = Math.round(item.count / maxCount * 100);
|
||||
var pct = Math.round(item.count / total * 100);
|
||||
var colorClass = "wdk-fill--" + Math.min(i, 6);
|
||||
|
||||
html += '<div class="wdk-bar-row wdk-bar-row--drill" data-drill data-drill-field="cargo" data-drill-value="' + this.escapeHtml(item.label) + '">';
|
||||
html += '<span class="wdk-bar-row__label" title="' + this.escapeHtml(item.label) + '">' + this.escapeHtml(item.label) + '</span>';
|
||||
html += '<div class="wdk-bar-row__track"><div class="wdk-bar-row__fill ' + colorClass + '" style="width:' + barPct + '%"></div></div>';
|
||||
html += '<span class="wdk-bar-row__count">' + item.count + '</span>';
|
||||
html += '<span class="wdk-bar-row__pct">' + pct + '%</span>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
if (cargoArr.length > 15) {
|
||||
var remaining = cargoArr.length - 15;
|
||||
html += '<div class="wdk-bar-row" style="opacity:0.6"><span class="wdk-bar-row__label">+ ' + remaining + ' outras</span></div>';
|
||||
}
|
||||
|
||||
this.$cargoBars.html(html);
|
||||
},
|
||||
|
||||
/* ── Drill-down ──────────────────────────────────────────── */
|
||||
|
||||
getDrillRecords: function() {
|
||||
var records = this.filterByPeriod(this.allRecords);
|
||||
var f = this.drillFilter;
|
||||
if (!f) { return records; }
|
||||
return records.filter(function(r) {
|
||||
return r[f.field] === f.value;
|
||||
});
|
||||
},
|
||||
|
||||
renderDrilldown: function() {
|
||||
this.$breakdowns.hide();
|
||||
this.$empty.hide();
|
||||
this.$drilldown.show();
|
||||
|
||||
var records = this.getDrillRecords();
|
||||
this.$root.find("[data-drill-title]").text(this.drillFilter.value);
|
||||
this.$root.find("[data-drill-count]").text(records.length + " processo" + (records.length !== 1 ? "s" : ""));
|
||||
|
||||
var html = "";
|
||||
for (var i = 0; i < records.length; i++) {
|
||||
var r = records[i];
|
||||
html += '<div class="wdk-drill-row" data-drill-row="' + i + '">';
|
||||
html += '<span class="wdk-drill-row__num">' + this.escapeHtml(r.processNum ? "#" + r.processNum : "—") + '</span>';
|
||||
html += '<div class="wdk-drill-row__info">';
|
||||
html += '<span class="wdk-drill-row__employee">' + this.escapeHtml(r.employee) + '</span>';
|
||||
html += '<span class="wdk-drill-row__dept">' + this.escapeHtml(r.dept) + '</span>';
|
||||
html += '</div>';
|
||||
html += '<span class="wdk-drill-row__date">' + (r.date ? this.formatDate(r.date) : "—") + '</span>';
|
||||
html += '</div>';
|
||||
}
|
||||
if (!html) { html = '<div class="wdk-drill-empty">Nenhum registro.</div>'; }
|
||||
this.$drillList.html(html);
|
||||
},
|
||||
|
||||
showDetail: function(record) {
|
||||
var m = this.$detailModal;
|
||||
m.find("[data-detail-num]").text(record.processNum ? "#" + record.processNum : "—");
|
||||
m.find("[data-detail-employee]").text(record.employee);
|
||||
m.find("[data-detail-dept]").text(record.dept);
|
||||
m.find("[data-detail-tipo]").text(record.tipo);
|
||||
m.find("[data-detail-date]").text(record.date ? this.formatDate(record.date) : "—");
|
||||
m.find("[data-detail-requester]").text(record.requester);
|
||||
m.show();
|
||||
},
|
||||
|
||||
formatDate: function(d) {
|
||||
if (!d) { return "—"; }
|
||||
return ("0" + d.getDate()).slice(-2) + "/" + ("0" + (d.getMonth() + 1)).slice(-2) + "/" + d.getFullYear();
|
||||
},
|
||||
|
||||
/* ── State helpers ────────────────────────────────────────── */
|
||||
|
||||
showLoading: function() {
|
||||
this.$error.hide();
|
||||
this.$empty.hide();
|
||||
this.$breakdowns.hide();
|
||||
this.$loading.show();
|
||||
},
|
||||
|
||||
showError: function(msg) {
|
||||
this.$loading.hide();
|
||||
this.$empty.hide();
|
||||
this.$error.text(msg || "Erro ao carregar dados.").show();
|
||||
},
|
||||
|
||||
escapeHtml: function(value) {
|
||||
return String(value === undefined || value === null ? "" : value)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,17 @@
|
||||
application.type=widget
|
||||
application.code=wddesligamentoranking
|
||||
application.title=wddesligamentoranking
|
||||
application.description=wddesligamentoranking
|
||||
application.fluig.version=null
|
||||
application.category=Desligamento
|
||||
application.renderer=freemarker
|
||||
developer.code=Andrey
|
||||
developer.name=Andrey
|
||||
developer.url=http://www.fluig.com
|
||||
application.uiwidget=true
|
||||
application.mobileapp=false
|
||||
application.version=${build.version}-${build.revision}
|
||||
view.file=view.ftl
|
||||
locale.file.base.name=wddesligamentoranking
|
||||
application.resource.js.1=/resources/js/wddesligamentoranking.js
|
||||
application.resource.css.2=/resources/css/wddesligamentoranking.css
|
||||
@@ -0,0 +1,52 @@
|
||||
<script src="/webdesk/vcXMLRPC.js"></script>
|
||||
|
||||
<div id="WdRanking_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide wdr-widget" data-params="WdRankingWidget.instance({ instanceId: '${instanceId}' })">
|
||||
<div class="wdr-shell">
|
||||
|
||||
<div class="wdr-header">
|
||||
<div>
|
||||
<p class="wdr-eyebrow">Gestão do Desligamento</p>
|
||||
<h2 class="wdr-title">Ranking de Solicitações</h2>
|
||||
</div>
|
||||
<div class="wdr-actions">
|
||||
<div class="wdr-period-toggle" role="group">
|
||||
<button type="button" class="wdr-period-btn wdr-period-btn--active" data-period="all">Todos</button>
|
||||
<button type="button" class="wdr-period-btn" data-period="year">Este ano</button>
|
||||
<button type="button" class="wdr-period-btn" data-period="month">Este mês</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-default wdr-refresh-btn" data-refresh>
|
||||
<span class="fluigicon fluigicon-refresh icon-sm" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wdr-kpis" data-kpis>
|
||||
<div class="wdr-kpi">
|
||||
<span class="wdr-kpi__label">Solicitantes únicos</span>
|
||||
<strong class="wdr-kpi__value" data-kpi-requesters>—</strong>
|
||||
</div>
|
||||
<div class="wdr-kpi wdr-kpi--highlight">
|
||||
<span class="wdr-kpi__label">Maior volume</span>
|
||||
<strong class="wdr-kpi__value" data-kpi-top-name>—</strong>
|
||||
<span class="wdr-kpi__sub" data-kpi-top-count></span>
|
||||
</div>
|
||||
<div class="wdr-kpi">
|
||||
<span class="wdr-kpi__label">Total de processos</span>
|
||||
<strong class="wdr-kpi__value" data-kpi-total>—</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wdr-state wdr-state--loading" data-loading>
|
||||
<span class="wdr-spinner" aria-hidden="true"></span>
|
||||
Carregando dados…
|
||||
</div>
|
||||
<div class="wdr-state wdr-state--empty" data-empty style="display:none">
|
||||
Nenhum dado encontrado.
|
||||
</div>
|
||||
<div class="wdr-state wdr-state--error" data-error style="display:none"></div>
|
||||
|
||||
<div class="wdr-ranking" data-ranking></div>
|
||||
<div class="wdr-pagination" data-rank-pagination></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
+1
@@ -0,0 +1 @@
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<jboss-web>
|
||||
<context-root>/wddesligamentoranking</context-root>
|
||||
<disable-cross-context>false</disable-cross-context>
|
||||
</jboss-web>
|
||||
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
|
||||
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
|
||||
version="3.0">
|
||||
<session-config>
|
||||
<session-timeout>
|
||||
30
|
||||
</session-timeout>
|
||||
</session-config>
|
||||
</web-app>
|
||||
+362
@@ -0,0 +1,362 @@
|
||||
/* ================================================================
|
||||
wddesligamentoranking.css — Ranking de Solicitantes
|
||||
================================================================ */
|
||||
|
||||
.wdr-widget {
|
||||
color: #0f172a;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.wdr-widget * { box-sizing: border-box; }
|
||||
|
||||
.wdr-shell {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* ── Header ───────────────────────────────────────────────────── */
|
||||
.wdr-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wdr-eyebrow {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
margin: 0 0 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wdr-title {
|
||||
color: #0f172a;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wdr-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.wdr-refresh-btn {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
/* ── Period toggle ────────────────────────────────────────────── */
|
||||
.wdr-period-toggle {
|
||||
background: #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
gap: 2px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.wdr-period-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.wdr-period-btn--active {
|
||||
background: #ffffff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
/* ── KPIs ─────────────────────────────────────────────────────── */
|
||||
.wdr-kpis {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wdr-kpi {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.wdr-kpi--highlight {
|
||||
background: #eff6ff;
|
||||
border-color: #bfdbfe;
|
||||
}
|
||||
|
||||
.wdr-kpi__label {
|
||||
color: #64748b;
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wdr-kpi__value {
|
||||
color: #0f172a;
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wdr-kpi--highlight .wdr-kpi__value { color: #1d4ed8; font-size: 16px; }
|
||||
|
||||
.wdr-kpi__sub {
|
||||
color: #64748b;
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ── State ────────────────────────────────────────────────────── */
|
||||
.wdr-state {
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
color: #64748b;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.wdr-state--error {
|
||||
background: #fff1f2;
|
||||
border-color: #fecdd3;
|
||||
color: #9f1239;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@keyframes wdr-spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.wdr-spinner {
|
||||
animation: wdr-spin 0.75s linear infinite;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 50%;
|
||||
border-top-color: #2563eb;
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
/* ── Ranking list ─────────────────────────────────────────────── */
|
||||
.wdr-ranking {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.wdr-row {
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.wdr-row:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* podium styling for top 3 */
|
||||
.wdr-row:nth-child(1) { border-left: 4px solid #f59e0b; }
|
||||
.wdr-row:nth-child(2) { border-left: 4px solid #94a3b8; }
|
||||
.wdr-row:nth-child(3) { border-left: 4px solid #b45309; }
|
||||
|
||||
.wdr-rank {
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
color: #64748b;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.wdr-row:nth-child(1) .wdr-rank { color: #d97706; font-size: 16px; }
|
||||
.wdr-row:nth-child(2) .wdr-rank { color: #64748b; font-size: 15px; }
|
||||
.wdr-row:nth-child(3) .wdr-rank { color: #92400e; font-size: 14px; }
|
||||
|
||||
.wdr-avatar {
|
||||
align-items: center;
|
||||
background: #e2e8f0;
|
||||
border-radius: 50%;
|
||||
color: #475569;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
height: 34px;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wdr-row:nth-child(1) .wdr-avatar { background: #fef3c7; color: #b45309; }
|
||||
.wdr-row:nth-child(2) .wdr-avatar { background: #f1f5f9; color: #334155; }
|
||||
.wdr-row:nth-child(3) .wdr-avatar { background: #fef3c7; color: #78350f; }
|
||||
|
||||
.wdr-info {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wdr-name {
|
||||
color: #0f172a;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wdr-dept {
|
||||
color: #64748b;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wdr-bar-wrap {
|
||||
flex: 0 0 160px;
|
||||
}
|
||||
|
||||
.wdr-bar-track {
|
||||
background: #f1f5f9;
|
||||
border-radius: 999px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wdr-bar-fill {
|
||||
background: linear-gradient(90deg, #3b82f6, #06b6d4);
|
||||
border-radius: 999px;
|
||||
height: 100%;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.wdr-row:nth-child(1) .wdr-bar-fill { background: linear-gradient(90deg, #f59e0b, #ef4444); }
|
||||
|
||||
.wdr-count {
|
||||
color: #0f172a;
|
||||
flex: 0 0 auto;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
min-width: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.wdr-count small {
|
||||
color: #64748b;
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Breakdown badges */
|
||||
.wdr-breakdown {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.wdr-badge {
|
||||
border-radius: 5px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
padding: 2px 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wdr-badge--progress { background: #dbeafe; color: #1d4ed8; }
|
||||
.wdr-badge--attention { background: #fef3c7; color: #92400e; }
|
||||
.wdr-badge--done { background: #dcfce7; color: #15803d; }
|
||||
.wdr-badge--canceled { background: #fee2e2; color: #991b1b; }
|
||||
|
||||
/* ── Responsive ───────────────────────────────────────────────── */
|
||||
@media (max-width: 768px) {
|
||||
.wdr-kpis { grid-template-columns: repeat(2, 1fr); }
|
||||
.wdr-bar-wrap { display: none; }
|
||||
.wdr-breakdown { display: none; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.wdr-kpis { grid-template-columns: 1fr; }
|
||||
.wdr-header { flex-wrap: wrap; }
|
||||
}
|
||||
|
||||
/* ── Pagination ───────────────────────────────────────────────── */
|
||||
.wdr-pagination { margin-top: 4px; }
|
||||
|
||||
.wdr-pag {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
padding: 8px 0 2px;
|
||||
}
|
||||
|
||||
.wdr-pag__info {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wdr-pag__pages {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.wdr-pag__btn {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
color: #475569;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
padding: 0 6px;
|
||||
transition: background 0.12s, color 0.12s;
|
||||
}
|
||||
|
||||
.wdr-pag__btn:hover { background: #f8fafc; border-color: #94a3b8; }
|
||||
|
||||
.wdr-pag__btn--active {
|
||||
background: #2563eb;
|
||||
border-color: #2563eb;
|
||||
color: #ffffff;
|
||||
}
|
||||
+393
@@ -0,0 +1,393 @@
|
||||
var WdRankingWidget = SuperWidget.extend({
|
||||
instanceId: null,
|
||||
|
||||
processId: "desligamentoColaborador",
|
||||
requestPageSize: 1000,
|
||||
formDatasetCandidates: ["desligamentoColaborador", "Desligamento", "desligamento"],
|
||||
|
||||
currentPeriod: "all",
|
||||
pageSize: 5, currentPage: 1,
|
||||
allRequests: [],
|
||||
|
||||
init: function() {
|
||||
this.$root = $("#WdRanking_" + this.instanceId);
|
||||
this.$ranking = this.$root.find("[data-ranking]");
|
||||
this.$loading = this.$root.find("[data-loading]");
|
||||
this.$empty = this.$root.find("[data-empty]");
|
||||
this.$error = this.$root.find("[data-error]");
|
||||
this.$pagination = this.$root.find("[data-rank-pagination]");
|
||||
|
||||
this.bindUi();
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
bindings: { local: {}, global: {} },
|
||||
|
||||
bindUi: function() {
|
||||
var self = this;
|
||||
|
||||
this.$root.find("[data-refresh]").on("click", function() {
|
||||
self.loadData();
|
||||
});
|
||||
|
||||
this.$root.on("click", "[data-period]", function() {
|
||||
self.currentPeriod = $(this).data("period");
|
||||
self.$root.find("[data-period]").removeClass("wdr-period-btn--active");
|
||||
$(this).addClass("wdr-period-btn--active");
|
||||
self.render();
|
||||
});
|
||||
|
||||
this.$root.on("click", "[data-rank-page]", function() {
|
||||
self.currentPage = parseInt($(this).data("rank-page"), 10) || 1;
|
||||
self.render();
|
||||
});
|
||||
},
|
||||
|
||||
/* ── Data loading ─────────────────────────────────────────── */
|
||||
|
||||
loadData: function() {
|
||||
this.showLoading();
|
||||
this.loadFromProcessApi();
|
||||
},
|
||||
|
||||
loadFromProcessApi: function() {
|
||||
var self = this;
|
||||
|
||||
/* /requests/tasks returns one row per movement per process.
|
||||
Each row has requester (who opened) + assignee (who owns this step).
|
||||
We deduplicate by processInstanceId keeping the best representative task. */
|
||||
$.ajax({
|
||||
url: "/process-management/api/v2/processes/" + encodeURIComponent(this.processId) +
|
||||
"/requests/tasks?page=1&pageSize=2000",
|
||||
method: "GET",
|
||||
dataType: "json",
|
||||
headers: { Accept: "application/json" }
|
||||
})
|
||||
.done(function(response) {
|
||||
var tasks = self.extractRows(response);
|
||||
if (!tasks.length) { self.loadFromDatasets(); return; }
|
||||
|
||||
/* deduplicate: prefer NOT_COMPLETED task; within same status, prefer highest movementSequence */
|
||||
var byProcess = {};
|
||||
for (var i = 0; i < tasks.length; i++) {
|
||||
var t = tasks[i];
|
||||
var pid = String(t.processInstanceId || "");
|
||||
if (!pid) { continue; }
|
||||
|
||||
var existing = byProcess[pid];
|
||||
var tSeq = t.movementSequence || 0;
|
||||
var tPending = t.status === "NOT_COMPLETED";
|
||||
|
||||
if (!existing) {
|
||||
byProcess[pid] = t;
|
||||
} else {
|
||||
var eSeq = existing.movementSequence || 0;
|
||||
var ePending = existing.status === "NOT_COMPLETED";
|
||||
if (tPending && !ePending) { byProcess[pid] = t; }
|
||||
else if (!tPending && ePending) { /* keep existing */ }
|
||||
else if (tSeq > eSeq) { byProcess[pid] = t; }
|
||||
}
|
||||
}
|
||||
|
||||
var rows = [];
|
||||
for (var k in byProcess) {
|
||||
if (byProcess.hasOwnProperty(k)) { rows.push(byProcess[k]); }
|
||||
}
|
||||
|
||||
self.allRequests = rows.map(function(r) { return self.buildRequest(r); });
|
||||
self.render();
|
||||
})
|
||||
.fail(function() { self.loadFromDatasets(); });
|
||||
},
|
||||
|
||||
loadFromDatasets: function() {
|
||||
var self = this;
|
||||
this.ensureDatasetFactory(function() {
|
||||
try {
|
||||
var candidates = self.formDatasetCandidates;
|
||||
var rows = [];
|
||||
for (var i = 0; i < candidates.length; i++) {
|
||||
try {
|
||||
var ds = DatasetFactory.getDataset(candidates[i], null, null, null);
|
||||
if (ds && ds.values && ds.values.length) {
|
||||
rows = ds.values;
|
||||
break;
|
||||
}
|
||||
} catch (e) { /* try next */ }
|
||||
}
|
||||
|
||||
self.allRequests = rows.map(function(r) { return self.buildRequest(r); });
|
||||
self.render();
|
||||
} catch (e) {
|
||||
self.showError("Não foi possível carregar os dados. " + e.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
ensureDatasetFactory: function(callback) {
|
||||
if (window.DatasetFactory) { callback(); return; }
|
||||
$.getScript("/webdesk/vcXMLRPC.js")
|
||||
.done(callback)
|
||||
.fail(function() { /* DatasetFactory unavailable */ });
|
||||
},
|
||||
|
||||
extractRows: function(response) {
|
||||
if (!response) { return []; }
|
||||
if ($.isArray(response)) { return response; }
|
||||
var keys = ["content", "items", "requests", "data", "values", "records"];
|
||||
for (var i = 0; i < keys.length; i++) {
|
||||
var v = response[keys[i]];
|
||||
if ($.isArray(v)) { return v; }
|
||||
}
|
||||
return [];
|
||||
},
|
||||
|
||||
buildRequest: function(row) {
|
||||
/* /requests/tasks structure:
|
||||
row.requester = who OPENED the process (constant on every movement)
|
||||
row.assignee = who owns THIS task step (changes each movement)
|
||||
We always use requester for ranking attribution. */
|
||||
var name = "";
|
||||
|
||||
if (row.requester) {
|
||||
var rq = row.requester;
|
||||
if (typeof rq === "string") {
|
||||
name = rq;
|
||||
} else if (rq && typeof rq === "object") {
|
||||
name = rq.name || rq.colleagueName || rq.login || rq.code || "";
|
||||
}
|
||||
}
|
||||
|
||||
/* plain-field fallback (DatasetFactory / other API shapes) */
|
||||
if (!name) {
|
||||
name = this.readFirst(row, [
|
||||
"requesterName", "requesterId", "colleagueName", "solicitante", "WKCreatedBy"
|
||||
]);
|
||||
}
|
||||
|
||||
/* last resort: assignee, but skip pool/group entries */
|
||||
if (!name && row.assignee) {
|
||||
var ag = row.assignee;
|
||||
var agCode = String((ag && ag.code) || "");
|
||||
if (agCode.indexOf("Pool:") < 0 && agCode.indexOf("Group:") < 0) {
|
||||
name = (ag.name || ag.login || agCode) || "";
|
||||
}
|
||||
}
|
||||
|
||||
/* department: try form field, then requester.local */
|
||||
var dept = this.readFirst(row, ["departamento", "department", "area"]);
|
||||
if (!dept && row.requester && row.requester.local) { dept = row.requester.local; }
|
||||
|
||||
var status = this.resolveStatus(row);
|
||||
var startDateRaw = this.readFirst(row, ["startDate", "dataAbertura", "createDate", "createdAt"]);
|
||||
|
||||
return {
|
||||
requesterName: name || "Desconhecido",
|
||||
department: dept || "-",
|
||||
status: status,
|
||||
startDate: this.parseDate(startDateRaw)
|
||||
};
|
||||
},
|
||||
|
||||
resolveStatus: function(row) {
|
||||
/* /requests/tasks primary path */
|
||||
var taskStatus = String(row.status || "").toUpperCase();
|
||||
if (taskStatus === "NOT_COMPLETED") {
|
||||
var sla = String(row.slaStatus || "").toUpperCase();
|
||||
if (sla === "OVERDUE") { return "attention"; }
|
||||
return "progress";
|
||||
}
|
||||
if (taskStatus === "COMPLETED") { return "done"; }
|
||||
|
||||
/* form-field fallback (DatasetFactory / ECM dataset shape) */
|
||||
var approval = String(this.readFirst(row, ["DesligamentoAprov", "approval"]) || "").toLowerCase().trim();
|
||||
if (approval === "nao") { return "canceled"; }
|
||||
|
||||
var activeRaw = this.readFirst(row, ["active", "processActive"]);
|
||||
if (activeRaw === false || String(activeRaw === null ? "" : activeRaw).toLowerCase() === "false") {
|
||||
return "done";
|
||||
}
|
||||
|
||||
var hasImpediment = String(this.readFirst(row, ["impeditivosColab", "impediment"]) || "").toLowerCase();
|
||||
if (approval === "maisinformacoes" || hasImpediment === "sim") { return "attention"; }
|
||||
|
||||
return "progress";
|
||||
},
|
||||
|
||||
parseDate: function(value) {
|
||||
if (!value) { return null; }
|
||||
var s = String(value);
|
||||
var m1 = s.match(/^(\d{2})\/(\d{2})\/(\d{4})/);
|
||||
if (m1) { return new Date(+m1[3], +m1[2] - 1, +m1[1]); }
|
||||
var m2 = s.match(/^(\d{4})-(\d{2})-(\d{2})/);
|
||||
if (m2) { return new Date(+m2[1], +m2[2] - 1, +m2[3]); }
|
||||
var d = new Date(s);
|
||||
return isNaN(d.getTime()) ? null : d;
|
||||
},
|
||||
|
||||
readFirst: function(row, keys) {
|
||||
if (!row) { return ""; }
|
||||
for (var i = 0; i < keys.length; i++) {
|
||||
var v = row[keys[i]];
|
||||
if (v !== undefined && v !== null && v !== "") { return v; }
|
||||
}
|
||||
return "";
|
||||
},
|
||||
|
||||
/* ── Filtering by period ──────────────────────────────────── */
|
||||
|
||||
filterByPeriod: function(requests) {
|
||||
if (this.currentPeriod === "all") { return requests; }
|
||||
|
||||
var now = new Date();
|
||||
var year = now.getFullYear();
|
||||
var month = now.getMonth();
|
||||
|
||||
return requests.filter(function(r) {
|
||||
if (!r.startDate) { return true; }
|
||||
if (this.currentPeriod === "year") { return r.startDate.getFullYear() === year; }
|
||||
if (this.currentPeriod === "month") {
|
||||
return r.startDate.getFullYear() === year && r.startDate.getMonth() === month;
|
||||
}
|
||||
return true;
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
/* ── Render ───────────────────────────────────────────────── */
|
||||
|
||||
render: function() {
|
||||
this.$loading.hide();
|
||||
this.$error.hide();
|
||||
|
||||
var requests = this.filterByPeriod(this.allRequests);
|
||||
|
||||
if (!requests.length) {
|
||||
this.$ranking.empty();
|
||||
this.$empty.show();
|
||||
this.$pagination.html("");
|
||||
this.updateKpis([], []);
|
||||
return;
|
||||
}
|
||||
|
||||
this.$empty.hide();
|
||||
|
||||
/* group by requester */
|
||||
var map = {};
|
||||
for (var i = 0; i < requests.length; i++) {
|
||||
var req = requests[i];
|
||||
var name = req.requesterName;
|
||||
if (!map[name]) {
|
||||
map[name] = {
|
||||
name: name, department: req.department,
|
||||
total: 0, progress: 0, attention: 0, done: 0, canceled: 0
|
||||
};
|
||||
}
|
||||
map[name].total++;
|
||||
map[name][req.status] = (map[name][req.status] || 0) + 1;
|
||||
}
|
||||
|
||||
/* sort desc by total */
|
||||
var ranked = [];
|
||||
for (var k in map) {
|
||||
if (map.hasOwnProperty(k)) { ranked.push(map[k]); }
|
||||
}
|
||||
ranked.sort(function(a, b) { return b.total - a.total; });
|
||||
|
||||
this.updateKpis(ranked, requests);
|
||||
|
||||
/* paginate: show pageSize entries per page */
|
||||
var totalPages = Math.ceil(ranked.length / this.pageSize);
|
||||
if (this.currentPage > totalPages) { this.currentPage = 1; }
|
||||
var start = (this.currentPage - 1) * this.pageSize;
|
||||
var paginated = ranked.slice(start, start + this.pageSize);
|
||||
var maxCount = ranked[0] ? ranked[0].total : 1;
|
||||
|
||||
var html = "";
|
||||
for (var j = 0; j < paginated.length; j++) {
|
||||
html += this.renderRow(paginated[j], start + j + 1, maxCount);
|
||||
}
|
||||
this.$ranking.html(html);
|
||||
this.renderPagination(ranked.length, totalPages);
|
||||
},
|
||||
|
||||
renderPagination: function(total, totalPages) {
|
||||
if (totalPages <= 1) { this.$pagination.html(""); return; }
|
||||
|
||||
var cur = this.currentPage;
|
||||
var html = '<div class="wdr-pag">';
|
||||
html += '<span class="wdr-pag__info">' + total + ' solicitantes</span>';
|
||||
html += '<div class="wdr-pag__pages">';
|
||||
|
||||
for (var p = 1; p <= totalPages; p++) {
|
||||
var cls = p === cur ? " wdr-pag__btn--active" : "";
|
||||
html += '<button type="button" class="wdr-pag__btn' + cls + '" data-rank-page="' + p + '">' + p + '</button>';
|
||||
}
|
||||
html += '</div></div>';
|
||||
this.$pagination.html(html);
|
||||
},
|
||||
|
||||
updateKpis: function(ranked, requests) {
|
||||
this.$root.find("[data-kpi-requesters]").text(ranked.length || "—");
|
||||
this.$root.find("[data-kpi-total]").text(requests.length || "—");
|
||||
|
||||
if (ranked.length) {
|
||||
this.$root.find("[data-kpi-top-name]").text(ranked[0].name);
|
||||
this.$root.find("[data-kpi-top-count]").text(ranked[0].total + " solicitação(ões)");
|
||||
} else {
|
||||
this.$root.find("[data-kpi-top-name]").text("—");
|
||||
this.$root.find("[data-kpi-top-count]").text("");
|
||||
}
|
||||
},
|
||||
|
||||
renderRow: function(entry, position, maxCount) {
|
||||
var barPct = Math.round((entry.total / maxCount) * 100);
|
||||
var initials = entry.name.split(" ").slice(0, 2).map(function(w) { return w[0]; }).join("");
|
||||
var medal = position === 1 ? "🥇" : position === 2 ? "🥈" : position === 3 ? "🥉" : position;
|
||||
|
||||
var breakdown = "";
|
||||
if (entry.progress) { breakdown += '<span class="wdr-badge wdr-badge--progress">' + entry.progress + ' andamento</span>'; }
|
||||
if (entry.attention) { breakdown += '<span class="wdr-badge wdr-badge--attention">' + entry.attention + ' atenção</span>'; }
|
||||
if (entry.done) { breakdown += '<span class="wdr-badge wdr-badge--done">' + entry.done + ' concluído</span>'; }
|
||||
if (entry.canceled) { breakdown += '<span class="wdr-badge wdr-badge--canceled">' + entry.canceled + ' cancelado</span>'; }
|
||||
|
||||
return [
|
||||
'<div class="wdr-row">',
|
||||
'<span class="wdr-rank">' + medal + '</span>',
|
||||
'<div class="wdr-avatar">' + this.escapeHtml(initials) + '</div>',
|
||||
'<div class="wdr-info">',
|
||||
'<strong class="wdr-name">' + this.escapeHtml(entry.name) + '</strong>',
|
||||
'<span class="wdr-dept">' + this.escapeHtml(entry.department) + '</span>',
|
||||
'</div>',
|
||||
'<div class="wdr-breakdown">' + breakdown + '</div>',
|
||||
'<div class="wdr-bar-wrap">',
|
||||
'<div class="wdr-bar-track"><div class="wdr-bar-fill" style="width:' + barPct + '%"></div></div>',
|
||||
'</div>',
|
||||
'<div class="wdr-count">' + entry.total + '<small>solicit.</small></div>',
|
||||
'</div>'
|
||||
].join("");
|
||||
},
|
||||
|
||||
/* ── State helpers ────────────────────────────────────────── */
|
||||
|
||||
showLoading: function() {
|
||||
this.$error.hide();
|
||||
this.$empty.hide();
|
||||
this.$ranking.empty();
|
||||
this.$loading.show();
|
||||
},
|
||||
|
||||
showError: function(msg) {
|
||||
this.$loading.hide();
|
||||
this.$ranking.empty();
|
||||
this.$error.text(msg || "Erro ao carregar dados.").show();
|
||||
},
|
||||
|
||||
escapeHtml: function(value) {
|
||||
return String(value === undefined || value === null ? "" : value)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user