Add basics filters on show display, add more projects on homepage (#16)…

… (#17) Co-authored-by: Klee-scoisne <[email protected]>
klelostec · Oct 4, 2023 · 0d8c08e · 0d8c08e
1 parent 31f44fa
commit 0d8c08e
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 18 deletions.
diff --git a/assets/styles/components/project/project.scss b/assets/styles/components/project/project.scss
@@ -6,38 +6,73 @@
 }
 
 .project-success {
-  background-color: #d1e7dd;
+  background-color: $green-200;
 }
 .project-warning {
-  background-color: #fff3cd;
+  background-color: $yellow-200;
 }
 .project-danger {
-  background-color: #f8d7da;
+  background-color: $red-200;
 }
 .project-other {
-  background-color: #e2e3e5;
+  background-color: $gray-200;
+}
+.icon-toggle {
+  & > span {
+    font-family: var(--bs-body-font-family);
+    text-transform:capitalize;
+    color: var(--bs-body-color);
+  }
+  &:before {padding-right: 0.4rem;}
+  &.icon-state-danger { color: $red-200; }
+  &.icon-state-warning { color: $yellow-200; }
+  &.icon-state-success { color: $green-200; }
+  &.icon-state-other { color: $gray-200; }
+}
+.btn-toggle-up-to-date-grey {
+  & > .icon-toggle {
+    & > span,
+    &.icon-state-danger,
+    &.icon-state-warning,
+    &.icon-state-success,
+    &.icon-state-other {
+      color: $gray-600;
+    }
+  }
 }
 
 .project-item {
   position: relative;
+  h2 {
+    margin-bottom: 1rem;
+  }
+  p {
+    font-size:0.8em;
+    margin-bottom:0;
+  }
 }
 
 .project-action-btn {
-  display: none;
+  opacity: 0;
+  transition: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 250ms;
   position: absolute;
-  right: 0.5rem;
+  bottom:0.2rem;
   padding: 0;
   &.edit {
-    top: 0.5rem;
+    left:0.4rem;
   }
   &.delete {
-    bottom: 0.5rem;
-    right: 0.75rem;
+    right: 0.45rem;
   }
 }
 
 .project-item:hover .project-action-btn {
-  display: block;
+  opacity:1;
+  transition: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 250ms;
 }
 
 .project-launcher {

diff --git a/src/Controller/ProjectController.php b/src/Controller/ProjectController.php
@@ -38,7 +38,7 @@ public function index(Request $request, ProjectRepository $projectRepository): R
     {
         $page = $request->query->get('page', 0);
         $nbItems = $projectRepository->countByAllowedUser($this->getUser());
-        $limit = 12;
+        $limit = 24;
         return $this->render('project/index.html.twig', [
             'currentPage' => $page,
             'nbPages' => ceil($nbItems/$limit),

diff --git a/templates/project/index.html.twig b/templates/project/index.html.twig
@@ -8,13 +8,14 @@
 
     <div class="p-3 container-fluid">
         {% if projects is not empty %}
-            <div class="row display-flex row-cols-1 row-cols-md-2 row-cols-sd-1 row-cols-lg-4">
+            <div class="row display-flex row-cols-1 row-cols-md-2 row-cols-sd-1 row-cols-lg-6">
                 {% for project in projects %}
+                    {%  set state = project.lastAnalyse ? project.lastAnalyse.stateClass : 'other' %}
                     <div class="p-3 col align-self-stretch">
-                        <div class="border h-100 project-item project-{{ project.lastAnalyse ? project.lastAnalyse.stateClass : 'other' }}" style="position:relative;">
-                            <a class="btn h-100 w-100 align-middle" href="{{ path('project_show', {'id': project.id}) }}">
-                                <h2>{{ project.name }}</h2>
-                                <p>{{ project.lastAnalyse ? project.lastAnalyse.date|date('d/m/Y H:i:s') : 'No analyse available' }}</p>
+                        <div class="border h-100 project-item project-{{ state }} border-{{ state }} position-relative rounded-3">
+                            <a class="btn h-100 w-100 align-middle d-flex flex-column" href="{{ path('project_show', {'id': project.id}) }}">
+                                <h2 class="flex-grow-1">{{ project.name }}</h2>
+                                <p>{{ project.lastAnalyse ? project.lastAnalyse.date|date('d M Y - H:i') : 'No analyse available' }}</p>
                             </a>
                             {% if is_granted('PROJECT_EDIT', project) %}
                                 <a class="btn project-action-btn edit" href="{{ path('project_edit', {'id': project.id}) }}"><i class="fas fa-edit"></i></a>

diff --git a/templates/project/show.html.twig b/templates/project/show.html.twig
@@ -47,7 +47,13 @@
             </div>
         </div>
     {% endif %}
-    <h2>Detail</h2>
+    <div class="inline-flex flex-row align-self-start">
+        <h2 class="d-inline-block">Detail</h2>
+        <a class="btn btn-toggle-up-to-date" title="Toggle up-to-date extensions display Danger"><i class="fas fa-check-square icon-toggle icon-state-danger"><span>critique</span></i></a>
+        <a class="btn btn-toggle-up-to-date" title="Toggle up-to-date extensions display Warning"><i class="fas fa-check-square icon-toggle icon-state-warning"><span>alerte</span></i></a>
+        <a class="btn btn-toggle-up-to-date" title="Toggle up-to-date extensions display Success"><i class="fas fa-check-square icon-toggle icon-state-success"><span>valide</span></i></a>
+        <a class="btn btn-toggle-up-to-date" title="Toggle up-to-date extensions display Other"><i class="fas fa-check-square icon-toggle icon-state-other"><span>ignoré</span></i></a>
+    </div>
     <table class="table">
         <thead>
             <tr>
@@ -104,7 +110,7 @@
             </thead>
             <tbody>
                 {% for item in analyse.ignoredAnalyseItems %}
-                    <tr class="table-secondary">
+                    <tr class="table-other">
                         <td>{{ item.type }}</td>
                         <td>
                             {% if item.state < 0 %}
@@ -192,4 +198,22 @@
             });
         </script>
     {% endif %}
+    <script>
+        $(document).ready(function() {
+            // Toggle Up-to-date extension display to improve table readability
+            // @todo : Do better in V2
+            $(document).on('click', 'a.btn-toggle-up-to-date', function(e) {
+                e.preventDefault();
+                $(this).children('i')[0].classList.forEach(function(value, key, listObj) {
+                    if(value.match(/icon-state-/)) {
+                        var state = value.substr(11);
+                        if (state == 'other') {state = 'secondary';}
+                        $('tr.table-'+state).toggleClass('d-none');
+                    }
+                });
+                $(this).children('i').toggleClass('fa-check-square fa-square');
+                $(this).toggleClass('btn-toggle-up-to-date-grey');
+            });
+        });
+    </script>
 {% endblock %}