From b13f01066daef67119c76e3ec064fa8f2e1abee3 Mon Sep 17 00:00:00 2001
From: Julien DAUPHANT <jdauphant@users.noreply.github.com>
Date: Mon, 30 Dec 2019 13:14:51 +0100
Subject: [PATCH] =?UTF-8?q?[291/327/319]=20Am=C3=A9lioration=20administrat?=
 =?UTF-8?q?ion=20-=20A=20review=20(#389)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [291] La qualité peut être vide à l'édition d'un utilisateur

* [327] Correction fil d'ariane groupe

* Rename view Allusers

* [319] Nouvelle vue utilisateurs

* Improve UI
---
 app/controllers/JavascriptController.scala    |   4 +-
 app/controllers/UserController.scala          |  10 +-
 ....scala.html => allUsersByGroup.scala.html} |   3 +-
 app/views/allUsersNew.scala.html              | 185 ++++++++++++++++++
 app/views/editGroup.scala.html                |   2 +-
 5 files changed, 199 insertions(+), 5 deletions(-)
 rename app/views/{allUsers.scala.html => allUsersByGroup.scala.html} (96%)
 create mode 100644 app/views/allUsersNew.scala.html

diff --git a/app/controllers/JavascriptController.scala b/app/controllers/JavascriptController.scala
index 6310b89f4..28fe389f1 100644
--- a/app/controllers/JavascriptController.scala
+++ b/app/controllers/JavascriptController.scala
@@ -14,7 +14,9 @@ class JavascriptController() extends InjectedController{
       JavaScriptReverseRouter("jsRoutes")(
         routes.javascript.GroupController.deleteUnusedGroupById,
         routes.javascript.ApplicationController.all,
-        routes.javascript.UserController.all)
+        routes.javascript.UserController.all,
+        routes.javascript.UserController.editUser
+      )
     ).as(MimeTypes.JAVASCRIPT)
   }
 }
diff --git a/app/controllers/UserController.scala b/app/controllers/UserController.scala
index ec68ae75c..f6fe19818 100644
--- a/app/controllers/UserController.scala
+++ b/app/controllers/UserController.scala
@@ -52,7 +52,13 @@ case class UserController @Inject()(loginAction: LoginAction,
           List()
       }
       eventService.info("ALL_USER_SHOWED", "Visualise la vue des utilisateurs")
-      Ok(views.html.allUsers(request.currentUser)(groups, users, applications, selectedArea, configuration.underlying.getString("geoplus.host")))
+      val result = request.getQueryString("vue").getOrElse("classique") match {
+        case "nouvelle" =>
+          views.html.allUsersNew(request.currentUser)(groups, users, applications, selectedArea, configuration.underlying.getString("geoplus.host"))
+        case _ =>
+          views.html.allUsersByGroup(request.currentUser)(groups, users, applications, selectedArea, configuration.underlying.getString("geoplus.host"))
+      }
+      Ok(result)
     }
   }
 
@@ -309,7 +315,7 @@ case class UserController @Inject()(loginAction: LoginAction,
     }),
     "key" -> ignored("key"),
     "name" -> nonEmptyText.verifying(maxLength(100)),
-    "qualite" -> nonEmptyText.verifying(maxLength(100)),
+    "qualite" -> text.verifying(maxLength(100)),
     "email" -> email.verifying(maxLength(200), nonEmpty),
     "helper" -> boolean,
     "instructor" -> boolean,
diff --git a/app/views/allUsers.scala.html b/app/views/allUsersByGroup.scala.html
similarity index 96%
rename from app/views/allUsers.scala.html
rename to app/views/allUsersByGroup.scala.html
index ce2064e4a..c2a74c792 100644
--- a/app/views/allUsers.scala.html
+++ b/app/views/allUsersByGroup.scala.html
@@ -76,7 +76,8 @@
 }{
 
   @if(currentUser.admin) {
-    <a class="mdl-button mdl-js-button mdl-button--raised mdl-cell mdl-cell--8-offset mdl-cell--4-col mdl-cell--12-col-phone" href="@routes.CSVImportController.importUsersFromCSV()">Importer utilisateurs</a>
+    <a class="mdl-button mdl-js-button mdl-button--raised mdl-cell mdl-cell--4-offset mdl-cell--4-col mdl-cell--12-col-phone" href="@routes.UserController.all(selectedArea.id)?vue=nouvelle">Nouvelle vue utilisateurs</a>
+    <a class="mdl-button mdl-js-button mdl-button--raised mdl-cell mdl-cell--4-col mdl-cell--12-col-phone" href="@routes.CSVImportController.importUsersFromCSV()">Importer utilisateurs</a>
   }
   @if(currentUser.areas.length > 1) {
     <p class="mdl-cell mdl-cell--12-col">Territoire :
diff --git a/app/views/allUsersNew.scala.html b/app/views/allUsersNew.scala.html
new file mode 100644
index 000000000..39157d834
--- /dev/null
+++ b/app/views/allUsersNew.scala.html
@@ -0,0 +1,185 @@
+@import models._
+@(currentUser: User)(userGroups: List[UserGroup], allUsers: List[User], applications: List[Application], selectedArea: Area, geoplusHost: String)(implicit webJarsUtil: org.webjars.play.WebJarsUtil, flash: Flash, request: RequestHeader)
+
+
+@main(currentUser, maxWidth = false)(s"Gestion des groupes utilisateurs - ${selectedArea.name}") {
+    @webJarsUtil.locate("tabulator.min.css").css()
+    @webJarsUtil.locate("tabulator.min.js").script()
+    <style>
+            .row--disabled {
+                background-color: grey !important;
+                text-decoration: line-through;
+            }
+    </style>
+}{
+    @if(currentUser.admin) {
+        <a class="mdl-button mdl-js-button mdl-button--raised mdl-cell mdl-cell--4-offset mdl-cell--4-col mdl-cell--12-col-phone" href="@routes.UserController.all(selectedArea.id)?vue=classique">Vue utilisateurs classique</a>
+        <a class="mdl-button mdl-js-button mdl-button--raised mdl-cell mdl-cell--4-col mdl-cell--12-col-phone" href="@routes.CSVImportController.importUsersFromCSV()">Importer utilisateurs</a>
+    }
+    @if(currentUser.areas.length > 1) {
+        <p class="mdl-cell mdl-cell--12-col">Territoire :
+            <select id="area-selector" name="area-selector" onchange="changeAreaApps()">
+                <option value="@Area.allArea.id" @if(selectedArea.id == Area.allArea.id) { selected }>tous les territoires</option>
+                @for(area <- currentUser.areas.flatMap(Area.fromId)) {
+                    <option value="@area.id" @if(selectedArea.id == area.id) { selected }>@area</option>
+                }
+            </select>
+            <script>
+                    function changeAreaApps() {
+                        var areaSelected = document.getElementById("area-selector").value;
+                        if(areaSelected != "@selectedArea.id") {
+                            document.location = jsRoutes.controllers.UserController.all(areaSelected).url + "?vue=nouvelle";
+                        }
+                    }
+            </script>
+        </p>
+    }
+    <div id="users-table"></div>
+
+    <script>
+            var verticalHeader = false;
+            var tabledata = [
+                @for(user <- allUsers) {
+                    {
+                        id: "@user.id",
+                        name: "@user.name",
+                        email: "@user.email",
+                        qualite: "@user.qualite",
+                        helper: @user.helper,
+                        instructor: @user.instructor,
+                        areas: [
+                            @for(area <- user.areas.flatMap(Area.fromId).map(_.toString)){
+                                "@area",
+                            }
+                        ],
+                        groups: [
+                            @for(group <- user.groupIds.flatMap( groupId => userGroups.find( _.id == groupId ) ).map(_.name)){
+                                "@group",
+                            }
+                        ],
+                        groupAdmin: @user.groupAdmin,
+                        admin: @user.admin,
+                        expert: @user.expert,
+                        disabled: @user.disabled
+                    },
+                }
+            ];
+
+            var editIcon = function(cell, formatterParams) {
+                //plain text value
+                return "<i class='fas fa-user-edit'></i>";
+            };
+
+            var rawFormatter = function(row) {
+                var element = row.getElement(),
+                        data = row.getData();
+                if (data.disabled) {
+                    element.classList.add("row--disabled");
+                }
+            };
+
+            var table = new Tabulator("#users-table", {
+                height: "80vh", // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
+                data: tabledata, //assign data to table
+                rowFormatter: rawFormatter,
+                langs: {
+                    "fr-fr": {
+                        pagination: {
+                            page_size: "Taille de la page",
+                            first: "Premier",
+                            first_title: "Première Page",
+                            last: "Dernier",
+                            last_title: "Dernière Page",
+                            prev: "Précédent",
+                            prev_title: "Page Précédente",
+                            next: "Suivant",
+                            next_title: "Page Suivante"
+                        },
+                        headerFilters: {
+                            default: "filtrer..." //default header filter placeholder text
+                        }
+                    }
+                },
+                columns: [
+                    {
+                        formatter: editIcon,
+                        width: 40,
+                        align: "center",
+                        cellClick: function(e, cell) {
+                            var uuid = cell.getRow().getData().id;
+                            var url = jsRoutes.controllers.UserController.editUser(uuid).url;
+                            window.location = url;
+                        }
+                    },
+                    { title: "Nom et Prénom", field: "name", headerFilter: "input" },
+                    { title: "Email", field: "email", headerFilter: "input" },
+                    { title: "Qualité", field: "qualite", headerFilter: "input" },
+                    {
+                        title: "Droits",
+                        columns: [
+                            {
+                                title: "Aidant",
+                                field: "helper",
+                                formatter: "tickCross",
+                                headerFilter: "tickCross",
+                                headerFilterParams: { tristate: true },
+                                headerVertical: verticalHeader,
+                                bottomCalc: "count"
+                            },
+                            {
+                                title: "Instructeur",
+                                field: "instructor",
+                                formatter: "tickCross",
+                                headerFilter: "tickCross",
+                                headerFilterParams: { tristate: true },
+                                headerVertical: verticalHeader,
+                                bottomCalc: "count"
+                            },
+                            {
+                                title: "Responsable",
+                                field: "groupAdmin",
+                                formatter: "tickCross",
+                                headerFilter: "tickCross",
+                                headerFilterParams: { tristate: true },
+                                headerVertical: verticalHeader,
+                                bottomCalc: "count"
+                            },
+                            {
+                                title: "Expert",
+                                field: "expert",
+                                formatter: "tickCross",
+                                headerFilter: "tickCross",
+                                headerFilterParams: { tristate: true },
+                                headerVertical: verticalHeader,
+                                bottomCalc: "count"
+                            },
+                            {
+                                title: "Admin",
+                                field: "admin",
+                                formatter: "tickCross",
+                                headerFilter: "tickCross",
+                                headerFilterParams: { tristate: true },
+                                headerVertical: verticalHeader,
+                                bottomCalc: "count"
+                            },
+                            {
+                                title: "Désactivé",
+                                field: "disabled",
+                                formatter: "tickCross",
+                                headerFilter: "tickCross",
+                                headerFilterParams: { tristate: true },
+                                headerVertical: verticalHeader,
+                                bottomCalc: "count"
+                            }
+                        ]
+                    },
+                    { title: "Groupes", field: "groups", headerFilter: "input" },
+                    { title: "Départements", field: "areas", headerFilter: "input" },
+                ]
+            });
+            table.setLocale("fr-fr");
+            table.setSort("name", "asc");
+    </script>
+
+
+}
\ No newline at end of file
diff --git a/app/views/editGroup.scala.html b/app/views/editGroup.scala.html
index 7c1334ebe..6b9281753 100644
--- a/app/views/editGroup.scala.html
+++ b/app/views/editGroup.scala.html
@@ -11,7 +11,7 @@
     <script src='@routes.Assets.versioned("javascripts/group-autocomplete.js")'></script>
 }{
     <div class="mdl-cell mdl-cell--12-col mdl-grid--no-spacing">
-        <span class="mdl-cell mdl-cell--12-col ariane">Territoires : @userGroup.areaIds.foreach{  areaId =>
+        <span class="mdl-cell mdl-cell--12-col ariane">Territoires : @for(areaId <- userGroup.areaIds) {
             <a href="@routes.UserController.all(areaId)#group-@userGroup.id">@{Area.fromId(areaId).get.name}</a>
         } / Groupe :  @userGroup.name </span>
         @helper.form(routes.GroupController.editGroupPost(userGroup.id), 'method -> "post") {