From 04c5230b6dda1a8e817f12419b48192c32705c2e Mon Sep 17 00:00:00 2001
From: Jimmy Pellier <pellier.1706@gmail.com>
Date: Wed, 17 Jun 2020 09:34:26 +0200
Subject: [PATCH] Gestion des images

---
 .env.development                        |   2 +-
 css/global.css                          |  34 +++
 css/styles.css                          | 296 ++++++++++++++++++++++++
 package-lock.json                       |   5 +
 package.json                            |   1 +
 src/components/Capture/CapturePhoto.vue |   2 +-
 src/components/Menu.vue                 |   2 +-
 src/components/User/CardUser.vue        | 174 ++++++++++++++
 src/components/User/ListeUser.vue       |  81 +------
 src/components/User/User.vue            |   5 +-
 10 files changed, 527 insertions(+), 75 deletions(-)
 create mode 100644 css/global.css
 create mode 100644 css/styles.css
 create mode 100644 src/components/User/CardUser.vue

diff --git a/.env.development b/.env.development
index 083109b..14bfd21 100644
--- a/.env.development
+++ b/.env.development
@@ -1,6 +1,6 @@
 VUE_APP_BACK_URL=http://localhost:5000
 VUE_APP_BACK_USER=http://localhost/user
-VUE_APP_IMAGE_STORE=
+VUE_APP_IMAGE_STORE=http://localhost/apache/public/uploads/
 VUE_APP_TEMPERATURE_HUB=http://localhost:5000/batchExecutionHub
 VUE_APP_TIMEOUT_TEMPERATURE_HUB=5000
 VUE_APP_MSG_TEMPERATURE_HUB=temperature
diff --git a/css/global.css b/css/global.css
new file mode 100644
index 0000000..183e605
--- /dev/null
+++ b/css/global.css
@@ -0,0 +1,34 @@
+.corps {
+    height: 80vh;
+    display: block;
+    position: relative;
+
+}
+
+.bg-passageOk
+{
+    background-color: seagreen;
+}
+
+.corps::after {
+    content: "";
+    background-repeat:no-repeat;
+    background-position:center center;
+    background-attachment:fixed;
+    background-size: 50vh auto;
+    background-image: url("../src/assets/logo.png");
+    opacity: 0.5;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    position: absolute;
+    z-index: -1;
+}
+
+.fade-enter-active{
+    transition: opacity .5s;
+}
+.fade-enter /* .fade-leave-active below version 2.1.8 */ {
+    opacity: 0;
+}
\ No newline at end of file
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..7ed00a1
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,296 @@
+@charset "UTF-8";
+@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
+
+
+
+body {
+  background-color: #FFF;
+  margin: 0px;
+  font-family: Ubuntu, sans-serif;
+  color: #1e1e1e;
+  font-weight: normal;
+  padding-top: 0;
+}
+
+h1, h2, h3, h4 {
+  font-family: "Cabin Condensed", sans-serif;
+}
+
+header {
+  padding: 1em;
+}
+
+header .headline {
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+header .headline h1 {
+  font-size: 3em;
+  margin-bottom: 0;
+}
+
+header .headline h2 {
+  margin-top: 0.2em;
+}
+
+footer {
+  padding: 1em 2em 2em;
+}
+
+#container {
+  width: 640px;
+  margin: 20px auto;
+  padding: 10px;
+}
+
+#interactive.viewport {
+  width: 640px;
+  height: 480px;
+}
+
+
+#interactive.viewport canvas, video {
+  float: left;
+  width: 640px;
+  height: 480px;
+}
+
+#interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
+  margin-left: -640px;
+}
+
+.controls fieldset {
+  border: none;
+  margin: 0;
+  padding: 5px;
+}
+
+.controls .input-group {
+  float: left;
+}
+
+.controls .input-group input, .controls .input-group button {
+  display: block;
+}
+
+.controls .reader-config-group {
+  float: right;
+}
+
+.controls .reader-config-group label {
+  display: block;
+}
+
+.controls .reader-config-group label span {
+  width: 9rem;
+  display: inline-block;
+  text-align: right;
+}
+
+.controls:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+
+#result_strip {
+  margin: 10px 0;
+  border-top: 1px solid #EEE;
+  border-bottom: 1px solid #EEE;
+  padding: 10px 0;
+}
+
+#result_strip > ul {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+  width: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+}
+
+#result_strip > ul > li {
+  display: inline-block;
+  vertical-align: middle;
+  width: 160px;
+}
+
+#result_strip > ul > li .thumbnail {
+  padding: 5px;
+  margin: 4px;
+  border: 1px dashed #CCC;
+}
+
+#result_strip > ul > li .thumbnail img {
+  max-width: 140px;
+}
+
+#result_strip > ul > li .thumbnail .caption {
+  white-space: normal;
+}
+
+#result_strip > ul > li .thumbnail .caption h4 {
+  text-align: center;
+  word-wrap: break-word;
+  height: 40px;
+  margin: 0px;
+}
+
+#result_strip > ul:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+
+.scanner-overlay {
+  display: none;
+  width: 640px;
+  height: 510px;
+  position: absolute;
+  padding: 20px;
+  top: 50%;
+  margin-top: -275px;
+  left: 50%;
+  margin-left: -340px;
+  background-color: #FFF;
+  -moz-box-shadow: #333333 0px 4px 10px;
+  -webkit-box-shadow: #333333 0px 4px 10px;
+  box-shadow: #333333 0px 4px 10px;
+}
+
+.scanner-overlay > .header {
+  position: relative;
+  margin-bottom: 14px;
+}
+
+.scanner-overlay > .header h4, .scanner-overlay > .header .close {
+  line-height: 16px;
+}
+
+.scanner-overlay > .header h4 {
+  margin: 0px;
+  padding: 0px;
+}
+
+.scanner-overlay > .header .close {
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  height: 16px;
+  width: 16px;
+  text-align: center;
+  font-weight: bold;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+
+i.icon-24-scan {
+  width: 24px;
+  height: 24px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzFFMjMzNTBFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzFFMjMzNTFFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMUUyMzM0RUU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMUUyMzM0RkU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtQr90wAAAUuSURBVHjanFVLbFRVGP7ua97T9DGPthbamAYYBNSMVbBpjCliWWGIEBMWsnDJxkh8RDeEDW5MDGticMmGBWnSlRSCwgLFNkqmmrRIqzjTznTazkxn5s7c6/efzm0G0Jhwkj/nP+d/nv91tIWFBTQaDQWapkGW67p4ltUub5qmAi0UCqF/a/U2m81tpmddotwwDGSz2dzi4uKSaOucnJycGhsbe1XXdQiIIcdxEAgEtgXq9brySHCht79UXi/8QheawN27d385fPjwuEl6XyKR6LdtW7t06RLK5TKOHj2K/fv3Q87Dw8OYn5/HiRMnMDs7i5mZGQwODiqlPp8PuVwO6XRaOXb16lXl1OnTp5FMJvtosF8M+MWLarWqGJaWlpBKpRRcu3YN4+PjmJ6exsTEhDJw5coVjI6OKgPhcBiZTAbxeBx+vx+XL19Gd3c3Tp48Ka9zqDYgBlTQxYNgMIhIJKLCILkQb+TZsgvdsiyFi+feWRR7oRNZyanQtvW2V4DEUUBiK2eJpeDirSyhCe7F2QPh8fiEp72i9PbsC5G52DbiKZA771yr1dTuGfJ4PQNPFoAyQNR1aNEmsS5eyB3PgjeooMZd2AWvNmzYci/Gea7TeFOcI93jV/K67noGmi4vdRI9gPSDeMLSdKUBZZczlWm1rTtHjLZ24d+WER2tc8N1m+Y+ID74wx0zGYvhg9UNrJdtHJyZRdQfwPsrq9g99xsGlgsYmr6BNzO/IVwsYfjBQ6XYz6JI/72MV366B5/lw0elOkJWGUM3bmKtWjXSLuLaBWhnPnnp0FfoiFi4+TMfVAb2poBkDLjO845uYLEAjL4ALGWBP5YAOsP4AJYBFDaB1HOSVWD2PuV95H2RdV93Lv74/cf6p6Zxq/h6OofeOPJBC39JtONdwOAAViOs4p4OFGTf0Uc8iiyrr9YdQrUnDLsngrVOC0jQib44HlF2RafRZBz1Qy+vfhgK3NJZBlrm+LEm9qWwzFgLU7Ozg0JxZP06jQSRpQ7EerAWDSt6PuhHPmChEAog56fCLvJT5hHTm3OZkz3DyLx7XNWTGEA1GkV14gjWgwbW0ESVjYRwCOuai03L5E7OUBAV4kXSS4auoGIaKOma4m8EA5R1sMEGLh95C+XuLph0WJWpxepYYLtfT0RRgY1KgNODY6BoaChRuEhDCIZQYseuki5KN6hcQHiq7OZNv4/Zq2O6P4Lfkwn46vZjjaYZrIpvWbpzjLErrc4xUGE4avRedpYJalRcIl5hQius/SrPm9xrNOQYJhao6BvNUeWqtY8KaWuNjHOFAr7mM9f4NA4UbKysoUJ8PV9UzVOx6wxDDWUOxnK1pmCD07fOMAvtIsM3l89Dl3HRGhVma9AZMqjOnz2LQqWCxs6dqr3T7x1DTzKJaG8SekcHhg4cgI/56uKdlKnBV/WndqN3YAB/7tyBd3oT6GBIOzs7kc/nDfFdDFT5bS73cp06dQoaPa/Rw/rtO/resTHxxE2m9rCrbSR27UJCcMf1BpiA5rAAGgdfc868fUR1sMwj0cm9Iu9IctweisViB3hhKTHDcHc5jv/LspbyaZrR1OD82/fIlOkuB9LnEWRmDX2TsddUPg3D5gvuc0je0rZaD5EW6G3yjS+A3eeBEWq3XW/Abw1HhUspXADufQb86oW7tZytkYCN//3hHwBvDALPi8EnSOYK8DAOfCc2h4aGcO7cuafkzampqf9UripH12/DtOZbx8ciVGzYy5OO40o25ascGRl5Ssc/AgwAjW3JwqIUjSYAAAAASUVORK5CYII=");
+  display: inline-block;
+  background-repeat: no-repeat;
+  line-height: 24px;
+  margin-top: 1px;
+  vertical-align: text-top;
+}
+
+@media (max-width: 603px) {
+
+  #container {
+    width: 300px;
+    margin: 10px auto;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+
+  #container form.voucher-form input.voucher-code {
+    width: 180px;
+  }
+}
+@media (max-width: 603px) {
+
+  .reader-config-group {
+    width: 100%;
+  }
+
+  .reader-config-group label > span {
+      width: 50%;
+  }
+
+  .reader-config-group label > select, .reader-config-group label > input {
+      max-width: calc(50% - 2px);
+  }
+
+  #interactive.viewport {
+    width: 300px;
+    height: 300px;
+    overflow: hidden;
+  }
+
+
+  #interactive.viewport canvas, video {
+    margin-top: -50px;
+    width: 300px;
+    height: 400px;
+  }
+
+  #interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
+    margin-left: -300px;
+  }
+
+
+  #result_strip {
+    margin-top: 5px;
+    padding-top: 5px;
+  }
+
+  #result_strip ul.thumbnails > li {
+    width: 150px;
+  }
+
+  #result_strip ul.thumbnails > li .thumbnail .imgWrapper {
+    width: 130px;
+    height: 130px;
+    overflow: hidden;
+  }
+
+  #result_strip ul.thumbnails > li .thumbnail .imgWrapper img {
+    margin-top: -25px;
+    width: 130px;
+    height: 180px;
+  }
+}
+@media (max-width: 603px) {
+
+  .overlay.scanner {
+    width: 640px;
+    height: 510px;
+    padding: 20px;
+    margin-top: -275px;
+    margin-left: -340px;
+    background-color: #FFF;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+
+  .overlay.scanner > .header {
+    margin-bottom: 14px;
+  }
+
+  .overlay.scanner > .header h4, .overlay.scanner > .header .close {
+    line-height: 16px;
+  }
+
+  .overlay.scanner > .header .close {
+    height: 16px;
+    width: 16px;
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index 0a5e8a2..5001fb5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3755,6 +3755,11 @@
       "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
       "dev": true
     },
+    "debounce": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
+      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg=="
+    },
     "debug": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
diff --git a/package.json b/package.json
index 4684b72..1475fd1 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "chart.js": "^2.9.3",
     "commander": "^4.0.1",
     "core-js": "^3.4.3",
+    "debounce": "^1.2.0",
     "es6-promise": "^4.2.8",
     "jquery": "^1.9.1",
     "keycloak-js": "^10.0.2",
diff --git a/src/components/Capture/CapturePhoto.vue b/src/components/Capture/CapturePhoto.vue
index a511b9e..0ef010c 100644
--- a/src/components/Capture/CapturePhoto.vue
+++ b/src/components/Capture/CapturePhoto.vue
@@ -19,7 +19,7 @@
                     <canvas ref="canvas" id="canvas" width="640" height="480"></canvas>
                     <ul>
                         <li v-for="c in captures" v-bind:key="c.id">
-                            <img v-bind:src="c.photo" height="50"  />
+                            <img v-bind:src="c.photo" alt="Photo" height="50"  />
                         </li>
                     </ul>
                 </div>
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index adabc16..750a873 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -51,7 +51,7 @@
                 img()
                 {
                     return this.$store.state.user != null && this.$store.state.user.image != null ?
-                        'http://localhost/image/' + this.$store.state.user.image :
+                        process.env.VUE_APP_IMAGE_STORE + this.$store.state.user.image :
                         '';
                 },
                 isAdmin() {
diff --git a/src/components/User/CardUser.vue b/src/components/User/CardUser.vue
new file mode 100644
index 0000000..2d8420b
--- /dev/null
+++ b/src/components/User/CardUser.vue
@@ -0,0 +1,174 @@
+<template>
+    <div>
+        <b-card v-if="user.isNew == undefined" no-body class="overflow-hidden cardUser"
+    >
+        <b-row no-gutters  style="height: 200px" >
+            <b-col md="8" cols="7"  class="border-right" style=";background-color: #EEEEEE">
+                <b-row align-h="center" v-if="user.image !== null">
+                    <router-link
+                            :to="{name: 'User', params: {id: user.id } }"
+                            v-slot="{ href, route, navigate}"
+                            v-if="user.image !== '' && user.image !== null"
+                    >
+                        <div class="mb-2 imageUser">
+                            <b-avatar :href="href" @click="navigate"
+                                      :title="user.nom + ' ' + user.prenom"
+                                      variant="light"
+                                      v-bind:src="img" size="6rem"
+                            >
+                            </b-avatar>
+                        </div>
+                    </router-link>
+                </b-row>
+                <b-row align-h="center">
+                    <b-col>
+                        <h4> {{user.prenom}}  {{user.nom}}</h4>
+                    </b-col>
+                </b-row>
+                <b-row v-for="role in user.roles" v-bind:key="role.id">
+                    <b-col class="d-flex justify-content-center align-items-center">
+                        <h5> {{role.libelle}}</h5>
+                    </b-col>
+                </b-row>
+            </b-col>
+            <b-col md="4" cols="5" class="d-flex flex-column justify-content-between">
+
+                <b-row >
+                    <b-col style="padding-bottom: 15px; padding-top: 15px">
+                        <router-link
+                                :to="{name: 'User', params: {id: user.id } }"
+                                v-slot="{ href, route, navigate}"
+                        >
+
+                            <b-button :href="href" @click="navigate" class="actionButton" >
+                                <font-awesome-icon icon="edit" />
+                                {{$t('edit')}}</b-button>
+                        </router-link>
+                    </b-col>
+                </b-row>
+                <b-row>
+                    <b-col style="padding-bottom: 15px; padding-top: 15px">
+                        <b-button @click="deleteUser(user)" class="actionButton" >
+                            <font-awesome-icon icon="trash" />
+                            {{$t('delete')}}
+                        </b-button>
+                    </b-col>
+                </b-row>
+            </b-col>
+        </b-row>
+    </b-card>
+
+        <b-card v-if="user.isNew" no-body
+                class="overflow-hidden rounded Desktopbutton cardUser">
+            <router-link
+                    :to="{name: 'User', params: {id: 0 } }"
+                    v-slot="{ href, route, navigate}">
+                <b-button :href="href" @click="navigate"
+                          style="width:100%; height: 100%"
+                          class="d-flex justify-content-center align-items-center">
+                    <font-awesome-icon icon="plus-circle" style="width: 64px; height:64px" />
+                </b-button>
+            </router-link>
+        </b-card>
+    </div>
+</template>
+
+<script>
+    import axios from "axios";
+
+    export default {
+        name: "CardUser",
+        props: ['user'],
+        computed :
+            {
+                img()
+                {
+                    return this.user != null && this.user.image!= null ?
+                        process.env.VUE_APP_IMAGE_STORE + this.user.image :
+                        '';
+                },
+            },
+        methods:
+            {
+                deleteUser : function(user)
+                {
+                    let that = this;
+
+                    let axiosConfig = {
+                        withCredentials: true,
+                        headers:{'Authorization': 'Bearer ' + sessionStorage.getItem("react-token"),
+                        }
+                    };
+                    this.$bvModal.msgBoxConfirm('Vous allez supprimer l\'utilisateur \'' + user.nom + '\'. Voulez-vous continuer ?',
+                        {
+                            title: 'Suppression Utilisateur',
+                            size: 'sm',
+                            buttonSize: 'sm',
+                            okVariant: 'success',
+                            okTitle: 'Oui',
+                            cancelVariant: 'danger',
+                            cancelTitle: 'Non',
+                            footerClass: 'p-2',
+                            hideHeaderClose: false,
+                            centered: true
+                        })
+                        .then(value => {
+                            if(value) {
+                                axios.delete(process.env.VUE_APP_BACK_USER+ "/api/users/" + user.id,
+                                    axiosConfig
+                                ).then(() => {
+                                    that.display();
+                                });
+                            }
+                        })
+                        .catch(err => {
+                            window.console.error(err.messages);
+                        })
+
+                }
+            }
+    }
+</script>
+
+<style scoped>
+    .card-body
+    {
+        padding-right: 0px;
+        padding-left: 0px;
+        padding-top: 0px;
+    }
+    .cardUser {
+        max-width: 540px;
+        height: 175px
+    }
+    .actionButton{
+        width:125px
+    }
+
+    .imageUser {
+        width:96px;
+        height:96px
+    }
+
+    .headerUser {
+        position:fixed; /* fixing the position takes it out of html flow - knows
+                   nothing about where to locate itself except by browser
+                   coordinates */
+        left:0;           /* top left corner should start at leftmost spot */
+        /*top:0;            /* top left corner should start at topmost spot */
+        width:100vw;      /* take up the full browser width */
+        z-index:50;  /* high z index so other content scrolls underneath */
+        height: 100px;
+        background-color: white;
+    }
+    @media (min-width: 50em) {
+        .Desktopbutton { display: block; }
+        .Mobilebutton { display: none; }
+    }
+
+    @media (max-width: 50em) {
+        .Desktopbutton { display: none; }
+        .Mobilebutton { display: block; }
+        .MobileEntete {margin-top: 35px;}
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/User/ListeUser.vue b/src/components/User/ListeUser.vue
index 2efa5fc..3376188 100644
--- a/src/components/User/ListeUser.vue
+++ b/src/components/User/ListeUser.vue
@@ -9,7 +9,9 @@
 
                 <b-row align-v="center">
                     <b-col  cols="8" lg="3" >
-                        <b-form-input v-model="search" v-bind:placeholder="$t('search')" style="max-width: 400px"></b-form-input>
+                        <b-form-input v-model="search"
+                                      @input="debounceInput"
+                                      v-bind:placeholder="$t('search')" style="max-width: 400px"></b-form-input>
                     </b-col>
                     <b-col cols="1" lg="1">
                         <b-button @click="display">
@@ -40,75 +42,7 @@
                     <b-col cols="12" md="4" lg="3" v-for="user in users" v-bind:key="user.id"
                             style="padding-right: 5px; padding-left: 5px; padding-top: 5px; padding-bottom: 5px">
                         <div>
-                        <b-card v-if="user.isNew == undefined" no-body class="overflow-hidden cardUser"
-                        >
-                            <b-row no-gutters  style="height: 200px" >
-                                <b-col md="8" cols="7"  class="border-right" style=";background-color: #EEEEEE">
-                                    <b-row align-h="center" v-if="user.image !== null">
-                                        <router-link
-                                                :to="{name: 'User', params: {id: user.id } }"
-                                                v-slot="{ href, route, navigate}"
-                                                v-if="user.image !== '' && user.image !== null"
-                                        >
-                                            <div class="mb-2 imageUser">
-                                            <b-avatar :href="href" @click="navigate"
-                                                    :title="user.nom + user.prenom"
-                                                      variant="light"
-                                                    v-bind:src=" 'http://localhost/image/' + user.image" size="6rem"
-                                                    >
-                                            </b-avatar>
-                                            </div>
-                                        </router-link>
-                                    </b-row>
-                                    <b-row align-h="center">
-                                        <b-col>
-                                            <h4> {{user.prenom}}  {{user.nom}}</h4>
-                                        </b-col>
-                                    </b-row>
-                                    <b-row v-for="role in user.roles" v-bind:key="role.id">
-                                        <b-col class="d-flex justify-content-center align-items-center">
-                                            <h5> {{role.libelle}}</h5>
-                                        </b-col>
-                                    </b-row>
-                                </b-col>
-                                <b-col md="4" cols="5" class="d-flex flex-column justify-content-between">
-
-                                    <b-row >
-                                        <b-col style="padding-bottom: 15px; padding-top: 15px">
-                                            <router-link
-                                                    :to="{name: 'User', params: {id: user.id } }"
-                                                    v-slot="{ href, route, navigate}"
-                                            >
-
-                                                <b-button :href="href" @click="navigate" class="actionButton" >
-                                                    <font-awesome-icon icon="edit" />
-                                                    {{$t('edit')}}</b-button>
-                                            </router-link>
-                                        </b-col>
-                                    </b-row>
-                                    <b-row>
-                                        <b-col style="padding-bottom: 15px; padding-top: 15px">
-                                            <b-button @click="deleteUser(user)" class="actionButton" >
-                                                <font-awesome-icon icon="trash" />
-                                                {{$t('delete')}}
-                                            </b-button>
-                                        </b-col>
-                                    </b-row>
-                                </b-col>
-                            </b-row>
-                        </b-card>
-                        <b-card v-if="user.isNew" no-body
-                                class="overflow-hidden rounded Desktopbutton cardUser">
-                            <router-link
-                                    :to="{name: 'User', params: {id: 0 } }"
-                                    v-slot="{ href, route, navigate}">
-                                <b-button :href="href" @click="navigate"
-                                          style="width:100%; height: 100%"
-                                          class="d-flex justify-content-center align-items-center">
-                                    <font-awesome-icon icon="plus-circle" style="width: 64px; height:64px" />
-                                </b-button>
-                            </router-link>
-                        </b-card>
+                        <card-user :user="user"/>
                     </div>
                     </b-col>
 
@@ -129,13 +63,17 @@
 <script>
     import axios from 'axios';
     import InfiniteLoading from 'vue-infinite-loading';
+    import CardUser from "./CardUser";
+    import { debounce } from "debounce";
 
     export default {
         name: "ListeUser",
         props:['value'],
         components: {
+            CardUser,
             InfiniteLoading,
         },
+
         data:function(){
             return {
                 page: 1,
@@ -149,6 +87,9 @@
         },
         methods :
             {
+                debounceInput: debounce(function () {
+                    this.display();
+                }, 500,false),
                 infiniteHandler : function($state)
                 {
                     let that = this;
diff --git a/src/components/User/User.vue b/src/components/User/User.vue
index c54be4a..6495d4e 100644
--- a/src/components/User/User.vue
+++ b/src/components/User/User.vue
@@ -13,7 +13,7 @@
                 <b-col cols="3"  md="2">
                     <b-row align-v="center">
                         <b-col >
-                        <img v-if="hasImage" loading="lazy" v-bind:src="img" style="width:128px;height:128px"/>
+                        <img v-if="hasImage" loading="lazy" alt="protrait" v-bind:src="img" style="width:128px;height:128px"/>
                         </b-col>
                     </b-row>
                     <b-row align-v="center">
@@ -125,6 +125,7 @@
     import  photo  from '../Capture/CapturePhoto';
     import Vue from "vue";
 
+
     Vue.use(photo);
 
     const base64Encode = data =>
@@ -266,7 +267,7 @@
                     axiosConfig
                 ).then(result => {
                     this.user = result.data;
-                    this.img = 'http://localhost/image/' + this.user.image;
+                    this.img = process.env.VUE_APP_IMAGE_STORE + this.user.image;
 
                     axios.get(process.env.VUE_APP_BACK_USER + "/api/roles/bykeycloakid?keycloakid=" + this.user.keycloakId,
                         axiosConfig