Merge branch 'dev' into feature/US-51

src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.html

@@ -138,5 +138,47 @@
         </div>
       </div>
     </div>
+    <div class="row">
+      <div class="col-lg-3 col-sm-6">
+        <div class="card card-circle-chart" data-background-color="blue" style="background-color: #88c5d6eb">
+          <div class="card-header text-center">
+            <h5 class="card-title ds-subtitle" style="color: #082463">Encuestas En Borrador</h5>
+          </div>
+          <div class="card-content">
+            <div id="surveyDraft" class="chart-circle">{{ encuestasBorrador }}<canvas height="160" width="160"></canvas></div>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-3 col-sm-6">
+        <div class="card card-circle-chart" data-background-color="green" style="background-color: #67ceb6">
+          <div class="card-header text-center">
+            <h5 class="card-title ds-subtitle" style="color: #0a2922">Encuestas Publicadas</h5>
+          </div>
+          <div class="card-content">
+            <div id="surveyActive" class="chart-circle">{{ encuestasPublicadas }}<canvas height="160" width="160"></canvas></div>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-3 col-sm-6">
+        <div class="card card-circle-chart" style="background-color: #de8e78">
+          <div class="card-header text-center">
+            <h5 class="card-title ds-subtitle" style="color: #671a04">Encuestas Finalizadas</h5>
+          </div>
+          <div class="card-content">
+            <div id="surveyFinished" class="chart-circle">{{ encuestasFinalizadas }}<canvas height="160" width="160"></canvas></div>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-3 col-sm-6">
+        <div class="card card-circle-chart" data-background-color="brown" style="background-color: #d6c1ab">
+          <div class="card-header text-center">
+            <h5 class="card-title ds-subtitle" style="color: #252422">Encuestas Completadas por Usuarios</h5>
+          </div>
+          <div class="card-content">
+            <div id="surveyCountCompletede" class="chart-circle">{{ encuestasCompletadas }}<canvas height="160" width="160"></canvas></div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>

src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.scss

@@ -1,10 +1,10 @@
 .ct-chart {
-  width: 600px;
+  width: 100%;
   height: 400px;
   overflow-x: scroll;
 }
 .grafico-encuestas-fecha .card {
-  width: 600px;
+  width: 100%;
 }
 
 .card .icon-big {
@@ -26,7 +26,6 @@
 .encuestas-por-categoria .table-responsive {
   height: 300px;
   max-height: 300px;
-  overflow-x: none;
 }
 
 .por-categoria {

src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.ts

@@ -36,6 +36,13 @@ export class DashboardAdminComponent implements OnInit {
   faWallet = faWallet;
   faUsers = faUsers;
   faUsersSlash = faUsersSlash;
+  encuestasPublicadas: number = 0;
+  encuestasFinalizadas: number = 0;
+  encuestasBorrador: number = 0;
+  encuestasCompletadas: number = 0;
+
+  reportsGeneral = true;
+  reportForUsers = false;
 
   chartFechas = [];
 
@@ -88,7 +95,20 @@ export class DashboardAdminComponent implements OnInit {
       .pipe(finalize(() => this.cargarCategorias()))
       .subscribe(res => {
         const tmpEncuestas = res.body;
-        this.encuestas = tmpEncuestas?.filter(e => e.estado === 'ACTIVE' || e.estado === 'FINISHED');
+        this.encuestas = tmpEncuestas?.filter(e => e.estado === 'ACTIVE' || e.estado === 'FINISHED' || e.estado === 'DRAFT');
+        if (tmpEncuestas) {
+          this.encuestasPublicadas = tmpEncuestas.filter(e => e.estado === 'ACTIVE').length;
+          this.encuestasFinalizadas = tmpEncuestas.filter(e => e.estado === 'FINISHED').length;
+          this.encuestasBorrador = tmpEncuestas.filter(e => e.estado === 'DRAFT').length;
+          let cantidadCompletadas: number = 0;
+          tmpEncuestas
+            .filter(e => e.estado === 'ACTIVE')
+            .forEach(e => {
+              const _contadorCompletadas = e.calificacion;
+              cantidadCompletadas = cantidadCompletadas + (Number(_contadorCompletadas?.toString().split('.')[1]) - 1);
+            });
+          this.encuestasCompletadas = cantidadCompletadas;
+        }
       });
   }
 

src/main/webapp/content/scss/paper-dashboard/cards/_card-chart.scss

@@ -46,3 +46,40 @@
     }
   }
 }
+
+.card-circle-chart {
+  .card-header {
+    &:first-child {
+      border-radius: 12px;
+    }
+  }
+
+  .card-title {
+    font-size: 1.2em;
+    font-weight: 700;
+    margin-top: 10px;
+  }
+  .card-content {
+    color: #fff;
+    padding: 10px 15px 10px;
+    text-align: center;
+  }
+  .chart-circle {
+    display: inline-block;
+    font-size: 2em;
+    height: 160px;
+    line-height: 160px;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    position: relative;
+    text-align: center;
+    width: 160px;
+    canvas {
+      position: absolute;
+      top: 0;
+      left: -4px;
+      border: 4px solid #ffffffc4;
+      border-radius: 100%;
+    }
+  }
+}