package-lock.json

@@ -10325,6 +10325,12 @@
         "@types/leaflet": "*"
       }
     },
+    "@types/luxon": {
+      "version": "1.25.0",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-1.25.0.tgz",
+      "integrity": "sha512-iIJp2CP6C32gVqI08HIYnzqj55tlLnodIBMCcMf28q9ckqMfMzocCmIzd9JWI/ALLPMUiTkCu1JGv3FFtu6t3g==",
+      "dev": true
+    },
     "@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -12288,7 +12294,7 @@
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
       "dev": true
     },
     "cacache": {
@@ -12819,7 +12825,7 @@
     "commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
       "dev": true
     },
     "compare-func": {
@@ -12868,7 +12874,7 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true
         }
       }
@@ -12929,7 +12935,7 @@
     "console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
       "dev": true
     },
     "content-disposition": {
@@ -13265,7 +13271,7 @@
     "cookie-signature": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
       "dev": true
     },
     "copy-anything": {
@@ -13659,7 +13665,7 @@
     "custom-event": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
-      "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==",
+      "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=",
       "dev": true
     },
     "d": {
@@ -13773,7 +13779,7 @@
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==",
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
       "dev": true
     },
     "dedent": {
@@ -13820,7 +13826,7 @@
     "defaults": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
-      "integrity": "sha512-s82itHOnYrN0Ib8r+z7laQz3sdE+4FP3d9Q7VLO7U+KRT+CR0GsWuyHxzdAY82I7cXv0G/twrqomTJLOssO5HA==",
+      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
       "dev": true,
       "requires": {
         "clone": "^1.0.2"
@@ -13850,7 +13856,7 @@
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
       "dev": true
     },
     "depd": {
@@ -13898,7 +13904,7 @@
     "di": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
-      "integrity": "sha512-uJaamHkagcZtHPqCIHZxnFrXlunQXgBOsZSUOWwFw31QJCAbyTBoHMW75YOTur5ZNx8pIeAKgf6GWIgaqqiLhA==",
+      "integrity": "sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=",
       "dev": true
     },
     "diff": {
@@ -13925,7 +13931,7 @@
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
-      "integrity": "sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==",
+      "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0=",
       "dev": true
     },
     "dns-packet": {
@@ -13949,7 +13955,7 @@
     "dom-serialize": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
-      "integrity": "sha512-Yra4DbvoW7/Z6LBN560ZwXMjoNOSAN2wRsKFGc4iBeso+mpIA6qj1vfdf9HpMaKAqG6wXTy+1SYEzmNpKXOSsQ==",
+      "integrity": "sha1-ViromZ9Evl6jB29UGdzVnrQ6yVs=",
       "dev": true,
       "requires": {
         "custom-event": "~1.0.0",
@@ -14215,7 +14221,7 @@
     "ent": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz",
-      "integrity": "sha512-GHrMyVZQWvTIdDtpiEXdHZnFQKzeO09apj8Cbl4pKWy4i0Oprcq17usfDt5aO63swf0JOeMWjWQE/LzgSRuWpA==",
+      "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0=",
       "dev": true
     },
     "entities": {
@@ -16044,7 +16050,7 @@
     "has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
       "dev": true
     },
     "hat": {
@@ -16096,7 +16102,7 @@
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
-      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
+      "integrity": "sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=",
       "dev": true,
       "requires": {
         "inherits": "^2.0.1",
@@ -16195,7 +16201,7 @@
     "http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
-      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==",
+      "integrity": "sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=",
       "dev": true
     },
     "http-errors": {
@@ -16398,7 +16404,7 @@
     "humanize-ms": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
-      "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
+      "integrity": "sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=",
       "dev": true,
       "requires": {
         "ms": "^2.0.0"
@@ -16472,7 +16478,7 @@
     "image-size": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
-      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
       "dev": true,
       "optional": true
     },
@@ -16779,7 +16785,7 @@
     "is-lambda": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
-      "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==",
+      "integrity": "sha1-PZh3iZ5qU+/AFgUEzeFfgubwYdU=",
       "dev": true
     },
     "is-module": {
@@ -16908,7 +16914,7 @@
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
       "dev": true
     },
     "isstream": {
@@ -19844,7 +19850,7 @@
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
       "dev": true
     },
     "merge-stream": {
@@ -19862,7 +19868,7 @@
     "methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
       "dev": true
     },
     "micromatch": {
@@ -20496,7 +20502,7 @@
     "normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
       "dev": true
     },
     "npm-bundled": {
@@ -21302,7 +21308,7 @@
     "path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
       "dev": true
     },
     "path-type": {
@@ -21963,7 +21969,7 @@
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
-      "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
+      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
     "promise-retry": {
@@ -22372,7 +22378,7 @@
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
       "dev": true,
       "optional": true
     },
@@ -22483,7 +22489,7 @@
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
       "dev": true,
       "requires": {
         "pify": "^2.3.0"
@@ -22492,7 +22498,7 @@
         "pify": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
           "dev": true
         }
       }
@@ -22708,6 +22714,17 @@
         "safe-buffer": "~5.1.1",
         "string_decoder": "~1.1.1",
         "util-deprecate": "~1.0.1"
+      },
+      "dependencies": {
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
       }
     },
     "readdirp": {
@@ -23142,7 +23159,7 @@
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
-      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
+      "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=",
       "dev": true
     },
     "selenium-webdriver": {
@@ -24194,12 +24211,20 @@
       }
     },
     "string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
       "dev": true,
       "requires": {
-        "safe-buffer": "~5.1.0"
+        "safe-buffer": "~5.2.0"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+          "dev": true
+        }
       }
     },
     "stringify-package": {
@@ -25028,7 +25053,7 @@
     "void-elements": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
-      "integrity": "sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung==",
+      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
       "dev": true
     },
     "w3c-hr-time": {
@@ -25080,7 +25105,7 @@
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
-      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
       "dev": true,
       "requires": {
         "defaults": "^1.0.3"

package.json

@@ -58,6 +58,7 @@
     "@types/jasminewd2": "~2.0.3",
     "@types/leaflet": "^1.5.17",
     "@types/leaflet.locatecontrol": "^0.60.7",
+    "@types/luxon": "^1.25.0",
     "@types/node": "^16.0.0",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",

src/app/annuaire/annuaire.component.html

+<div class="content-container" [ngClass]="{ logged: userIsLoggedIn() }">
+  <div *ngIf="userIsLoggedIn()">
+    <app-search-bar
+      class="hide-on-print"
+      (searchEvent)="getUsers($event)"
+      [shouldResetFilters]="resetFilters"
+      [shouldShowMore]="nextPage"
+    ></app-search-bar>
+    <app-result-list
+      [userList]="userList"
+      [totalUserResult]="totalUserResult"
+      [isLogged]="true"
+      (resetEvent)="shouldResetFilters()"
+      (showMoreEvent)="showMore($event)"
+    ></app-result-list>
+  </div>
+
+  <app-result-list
+    *ngIf="!userIsLoggedIn()"
+    [userList]="[]"
+    [isLogged]="false"
+    [totalUserResult]="totalUserResult"
+  ></app-result-list>
+</div>

src/app/annuaire/annuaire.component.scss

+@import '../../assets/scss/layout';
+
+.content-container {
+  box-sizing: border-box;
+  height: calc(100% - $footer-height);
+  padding-top: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  &.logged {
+    justify-content: flex-start;
+  }
+}

src/app/annuaire/annuaire.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnnuaireComponent } from './annuaire.component';
+
+describe('AnnuaireComponent', () => {
+  let component: AnnuaireComponent;
+  let fixture: ComponentFixture<AnnuaireComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AnnuaireComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnnuaireComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/annuaire/annuaire.component.ts

+import { Component, OnInit } from '@angular/core';
+import { UserAnnuary } from '../models/user.model';
+import { AuthService } from '../services/auth.service';
+import { SearchService } from '../structure-list/services/search.service';
+import { SearchQuery, SearchResults } from './models/searchQuery.model';
+
+@Component({
+  selector: 'app-annuaire',
+  templateUrl: './annuaire.component.html',
+  styleUrls: ['./annuaire.component.scss'],
+})
+export class AnnuaireComponent implements OnInit {
+  constructor(private searchService: SearchService, private authService: AuthService) {}
+  public userList: UserAnnuary[] = [];
+  public searchedValue: string;
+  public totalUserResult: number;
+  public resetFilters: number = 0;
+  public nextPage: number = 1;
+
+  ngOnInit(): void {
+    this.getUsers({ queryParam: '', page: 1, jobFilters: [], employerFilter: [] });
+  }
+  public getUsers(params: SearchQuery): void {
+    if (this.userIsLoggedIn()) {
+      this.searchService
+        .searchUserRegistry(params.queryParam, params.page, params.jobFilters, params.employerFilter)
+        .subscribe((res: SearchResults) => {
+          this.userList = res.docs;
+          this.totalUserResult = res.count;
+        });
+    } else {
+      this.searchService.getUserRegistryCount().subscribe((nb: number) => {
+        this.totalUserResult = nb;
+      });
+    }
+  }
+  public userIsLoggedIn(): boolean {
+    return this.authService.isLoggedIn();
+  }
+  public shouldResetFilters(): void {
+    this.resetFilters++;
+  }
+  public showMore(): void {
+    this.nextPage++;
+  }
+}

src/app/annuaire/enums/TypeModal.enum.ts

+export enum TypeModal {
+  employers = 1,
+  jobs = 2,
+}

src/app/annuaire/filter-modal/filter-modal.component.html

+<div *ngIf="modalType" fxLayout="column" fxLayoutAlign="center center" [ngClass]="['modal', 'modal' + getModalType()]">
+  <div class="body-wrap" fxLayout="column" fxLayoutAlign="space-between">
+    <div class="titleFilter" fxLayout="row" fxLayoutAlign="space-between">
+      <span>Filtres</span>
+      <div (click)="closeModal()" class="ico-close-details"></div>
+    </div>
+    <div class="contentModal maxModal max-height" fxLayout="row wrap" fxLayoutAlign="flex-start">
+      <ul class="blockLigne">
+        <div class="blockFiltre" *ngFor="let filter of filtersTypes">
+          <li class="checkbox">
+            <div class="checkboxItem categoryCheckBox">
+              <div fxLayout="row" fxLayoutAlign="start center" (click)="toggleCheckbox(filter)">
+                <label>
+                  <input
+                    type="checkbox"
+                    class="multiCheck"
+                    [checked]="isFilterChecked(filter)"
+                    (change)="toggleCheckbox(filter)"
+                  />
+                  <span class="customCheck customCheckPrimary"></span>
+                </label>
+                <div fxLayout="row" fxLayoutAlign="space-between center" class="w-100 clickable">
+                  <div class="label">{{ filter }}</div>
+                </div>
+              </div>
+            </div>
+          </li>
+        </div>
+      </ul>
+    </div>
+    <div class="footer" fxLayout="row" fxLayoutAlign="center center">
+      <div class="half-width">
+        <app-button
+          [style]="buttonTypeEnum.modalSecondary"
+          [text]="'Effacer'"
+          (click)="clearFilters()"
+          tabindex="0"
+        ></app-button>
+      </div>
+      <div class="half-width">
+        <app-button [style]="buttonTypeEnum.modalPrimary" [text]="'Appliquer'" (click)="onSubmitFilters()"></app-button>
+      </div>
+    </div>
+  </div>
+</div>

src/app/annuaire/filter-modal/filter-modal.component.scss

+@import '../../../assets/scss/icons';
+@import '../../../assets/scss/color';
+@import '../../../assets/scss/typography';
+@import '../../../assets/scss/breakpoint';
+@import '../../../assets/scss/shapes';
+@import '../../../assets/scss/hyperlink';
+@import '../../../assets/scss/z-index';
+
+.modalemployers {
+  left: 212px;
+
+  @media #{$large-desktop} {
+    left: 273px;
+  }
+}
+.modaljobs {
+  left: 331px;
+  @media #{$large-desktop} {
+    left: 417px;
+  }
+}
+
+.maxModal .blockLigne {
+  box-sizing: border-box;
+  width: 360px;
+  .smallList {
+    display: block;
+    box-sizing: border-box;
+    background: $grey-8;
+    max-width: 300px;
+    padding: 0.5rem !important;
+    margin-top: 1rem !important;
+  }
+}
+.modal {
+  max-width: 360px;
+  width: auto;
+  z-index: $modal-z-index !important;
+  position: fixed;
+  box-shadow: $box-shadow-simple;
+  border-radius: 8px;
+  margin-top: 25px;
+  @media #{$large-phone} {
+    height: 100%;
+    max-height: auto;
+    max-width: auto;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    border: none;
+    padding: 0;
+  }
+  background: $white;
+  .body-wrap {
+    @media #{$large-phone} {
+      height: 100vh;
+      height: -webkit-fill-available;
+    }
+    .titleFilter {
+      display: none !important;
+      margin: 27px 25px 0px 25px;
+      @include lato-bold-26;
+      @media #{$large-phone} {
+        display: flex !important;
+      }
+    }
+  }
+  .contentModal {
+    overflow-y: auto;
+    max-width: 1100px;
+    border-bottom: 1px solid $grey;
+    @media #{$large-phone} {
+      max-height: none;
+      height: 100%;
+    }
+    .blockFiltre {
+      width: auto;
+      margin: 25px 20px;
+      margin-bottom: calc(25px - 1rem);
+      min-width: 200px;
+
+      @media #{$large-phone} {
+        margin: 0 18px;
+        padding: 25px 0;
+        min-width: 0;
+      }
+    }
+    .blockLigne {
+      padding-left: 0;
+      margin: 0px;
+      li {
+        margin-bottom: 1rem;
+      }
+    }
+    label {
+      @include lato-regular-16;
+      color: $grey-1;
+    }
+
+    .arrow {
+      cursor: pointer;
+      margin-left: auto;
+      background-color: transparent;
+      border-bottom: 1px solid $black;
+      border-right: 1px solid $black;
+      transform: translateY(-25%) rotate(45deg);
+      height: 7px;
+      width: 7px;
+      transition: all 300ms ease;
+      margin-top: -5px;
+    }
+    .toggled {
+      transform: translateY(25%) rotate(-135deg);
+    }
+    &.max-height {
+      max-height: 50vh;
+      overflow-y: overlay;
+    }
+  }
+  .footer {
+    box-sizing: border-box;
+    padding: 0.5rem;
+    .reset {
+      width: 45%;
+      text-align: center;
+      color: $grey-4;
+    }
+    .half-width {
+      width: 50%;
+      padding: 0 4px;
+    }
+  }
+}
+
+a {
+  @include hyperlink;
+}

src/app/annuaire/filter-modal/filter-modal.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterModalComponent } from './filter-modal.component';
+
+describe('FilterModalComponent', () => {
+  let component: FilterModalComponent;
+  let fixture: ComponentFixture<FilterModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FilterModalComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/annuaire/filter-modal/filter-modal.component.ts

+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { ButtonType } from '../../shared/components/button/buttonType.enum';
+import { TypeModal } from '../enums/TypeModal.enum';
+
+@Component({
+  selector: 'app-filter-modal',
+  templateUrl: './filter-modal.component.html',
+  styleUrls: ['./filter-modal.component.scss'],
+})
+export class FilterModalComponent implements OnInit, OnChanges {
+  @Input() public modalType: TypeModal;
+  @Input() public filtersTypes: string[];
+  @Input() public checkedFilters: string[];
+  @Output() searchEvent = new EventEmitter();
+  @Output() closeEvent = new EventEmitter();
+  public buttonTypeEnum = ButtonType;
+  public toggledCategories: string[] = [];
+  public currentCheckedFilters: string[] = [];
+
+  ngOnInit(): void {
+    this.currentCheckedFilters = [...this.checkedFilters];
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.modalType) this.currentCheckedFilters = [];
+  }
+
+  public isFilterChecked(filter: string): boolean {
+    return this.currentCheckedFilters.findIndex((_filter) => _filter === filter) > -1;
+  }
+
+  public toggleCheckbox(filter: string): void {
+    const filterExists = this.currentCheckedFilters.findIndex((_filterChecked) => _filterChecked === filter) !== -1;
+
+    if (!filterExists) {
+      const index = this.filtersTypes.findIndex((_filter) => _filter === filter);
+      this.currentCheckedFilters.push(this.filtersTypes[index]);
+    } else {
+      const filterToRemove = this.currentCheckedFilters.findIndex((_filterChecked) => _filterChecked === filter);
+      this.currentCheckedFilters.splice(filterToRemove);
+    }
+  }
+
+  // Clear only filters in the current modal
+  public clearFilters(): void {
+    this.checkedFilters = [];
+    this.currentCheckedFilters = [];
+    this.emitModules(this.checkedFilters);
+  }
+
+  // Sends an array containing all modules
+  public emitModules(filters: string[]): void {
+    this.searchEvent.emit(filters);
+  }
+
+  public getModalType(): string {
+    switch (this.modalType) {
+      case TypeModal.employers:
+        return 'employers';
+      case TypeModal.jobs:
+        return 'jobs';
+      default:
+        return '';
+    }
+  }
+
+  public closeModal(): void {
+    this.closeEvent.emit();
+  }
+
+  public onSubmitFilters(): void {
+    this.checkedFilters = this.currentCheckedFilters;
+    this.emitModules(this.currentCheckedFilters);
+  }
+}

src/app/annuaire/models/searchQuery.model.ts

+import { UserAnnuary } from '../../models/user.model';
+
+export interface SearchQuery {
+  queryParam: string;
+  page: number;
+  jobFilters?: string[];
+  employerFilter?: string[];
+}
+export interface SearchResults {
+  count: number;
+  docs: UserAnnuary[];
+}

src/app/annuaire/result-list/result-list.component.html

+<div class="results notEmpty" *ngIf="isLogged && userList.length">
+  <div class="userNumber">
+    {{ userList.length }} <span *ngIf="showPagination"> sur {{ totalUserResult }} </span> utilisateurs trouvés
+  </div>
+  <div class="singleUser" *ngFor="let user of userList; let index = index" (click)="goToUser(user._id)">
+    <div class="avatar-container">
+      <app-svg-icon class="avatar" [type]="'avatar'" [icon]="'defaultAvatar'" [iconClass]="'icon-40'"></app-svg-icon>
+    </div>
+    <div class="identity">
+      <p class="name">{{ user.name }} {{ user.surname }}</p>
+      <p class="job" *ngIf="user.job">{{ user.job.name }}</p>
+    </div>
+    <div class="employer" *ngIf="user.employer">{{ user.employer.name }}</div>
+  </div>
+  <div class="pagination" *ngIf="showPagination">
+    <div class="text">{{ userList.length }} utilisateurs affichés sur {{ totalUserResult }} utilisateurs trouvés.</div>
+    <app-button
+      [style]="buttonTypeEnum.modalSecondary"
+      [type]="'form'"
+      [icon]="'validate'"
+      [text]="'Voir plus'"
+      (click)="showMore()"
+      tabindex="0"
+    ></app-button>
+  </div>
+</div>
+
+<div class="results empty" *ngIf="isLogged && userList.length === 0">
+  <div class="userNumber">0 utilisateur</div>
+  <div class="noUser">Aucun résultat ne correspond à vos filtres</div>
+  <app-button
+    [style]="buttonTypeEnum.modalPrimary"
+    [type]="'form'"
+    [icon]="'validate'"
+    [text]="'Réinitialiser les filtres'"
+    (click)="resetFilters()"
+    tabindex="0"
+  ></app-button>
+</div>
+
+<div class="results unlogged" *ngIf="!isLogged">
+  <img src="../../assets/ico/annuaire-unlogged.svg" alt="Illustration annuaire" />
+  <div class="users">{{ totalUserResult }} utilisateurs sont présents dans l'annuaire Rés'in</div>
+  <div class="access">
+    Pour accéder à l’annuaire de Rés’in et contacter les utilisateurs,<br />
+    veuillez vous connecter ou vous créer un compte.
+  </div>
+  <div class="buttons">
+    <app-button
+      [type]="'button'"
+      (action)="goRegister()"
+      [text]="'Se créer un compte'"
+      [style]="buttonTypeEnum.Secondary"
+      [extraClass]="'fullWidth'"
+    >
+    </app-button>
+    <app-button
+      [type]="'button'"
+      (action)="goLogin()"
+      [text]="'Se connecter'"
+      [style]="buttonTypeEnum.Primary"
+      [extraClass]="'fullWidth'"
+    >
+    </app-button>
+  </div>
+</div>

src/app/annuaire/result-list/result-list.component.scss

+@import '../../../assets/scss/color';
+@import '../../../assets/scss/layout';
+@import '../../../assets/scss/breakpoint';
+
+.results {
+  max-width: 980px;
+  width: 100%;
+  padding: 1rem 2.5rem;
+  background: $white;
+  border-radius: 8px;
+  margin: 1rem auto 0 auto;
+  overflow-y: scroll;
+  box-sizing: border-box;
+  border: 1px solid $grey-6;
+  @media #{$large-phone} {
+    padding: 0.5rem 0 0.5rem 0.5rem;
+    margin: 0;
+  }
+  .userNumber {
+    font-size: 0.875rem;
+    color: $grey-3;
+    margin: 1rem 0.75rem;
+  }
+  &.empty {
+    padding-bottom: 2rem;
+    & > div {
+      margin: 1.5rem 0.5rem;
+      color: $grey-3;
+    }
+
+    ::ng-deep button {
+      max-width: 200px;
+    }
+  }
+  &.notEmpty {
+    //make sure it fits the correct height no matter the content lengtj and screen height
+    max-height: calc(100vh - $footer-height - $header-height - $header-height - 2rem);
+    @media #{$large-phone} {
+      height: 100%;
+    }
+    .pagination {
+      max-width: 380px;
+      width: 100%;
+      margin: 1rem auto;
+      @media #{$large-phone} {
+        max-width: 280px;
+      }
+      .text {
+        font-weight: bold;
+        font-size: 0.875rem;
+        color: $grey-1;
+        text-align: center;
+        margin-bottom: 1rem;
+      }
+    }
+  }
+  &.unlogged {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin: auto;
+    padding: 70px 40px;
+    border: 1px solid $grey-6;
+    @media #{$tablet} {
+      padding: 30px;
+    }
+    .users {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: $grey-1;
+      margin: 1.5rem 0;
+    }
+    .access {
+      color: $grey-3;
+    }
+    .buttons {
+      display: flex;
+      max-width: 330px;
+      gap: 1rem;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+      margin: 2rem auto;
+    }
+  }
+  .singleUser {
+    display: flex;
+    align-items: center;
+    height: 65px;
+    padding: 0.75rem;
+    border-bottom: solid 1px $grey-8;
+    box-sizing: border-box;
+    cursor: pointer;
+    transition: all 300ms ease;
+    border-radius: 8px;
+    @media #{$large-phone} {
+      height: 75px;
+    }
+    &:hover {
+      background: $grey-8;
+    }
+    .avatar-container {
+      width: 40px;
+      height: 44px;
+      border-radius: 4px;
+      background: $grey-8;
+    }
+    .identity {
+      margin: 0 0.5rem;
+      max-width: 330px;
+      p {
+        margin: 0;
+      }
+      .name {
+        font-weight: bold;
+      }
+      .job {
+        color: $grey-3;
+      }
+    }
+    .employer {
+      margin-left: auto;
+      color: $grey-3;
+    }
+  }
+}

src/app/annuaire/result-list/result-list.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResultListComponent } from './result-list.component';
+
+describe('ResultListComponent', () => {
+  let component: ResultListComponent;
+  let fixture: ComponentFixture<ResultListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ResultListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResultListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/annuaire/result-list/result-list.component.ts

+import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Router } from '@angular/router';
+import { UserAnnuary } from '../../models/user.model';
+import { ButtonType } from '../../shared/components/button/buttonType.enum';
+
+@Component({
+  selector: 'app-result-list',
+  templateUrl: './result-list.component.html',
+  styleUrls: ['./result-list.component.scss'],
+})
+export class ResultListComponent implements OnInit, OnChanges {
+  constructor(private router: Router) {}
+  @Input() userList: UserAnnuary[];
+  @Input() totalUserResult: number;
+  @Input() isLogged: boolean;
+  @Output() resetEvent = new EventEmitter<any>();
+  @Output() showMoreEvent = new EventEmitter<any>();
+  public maxPerPage: number = 20;
+  public buttonTypeEnum = ButtonType;
+  public showPagination: boolean = false;
+
+  ngOnInit(): void {
+    if (this.totalUserResult > this.maxPerPage) {
+      this.showPagination = true;
+    }
+  }
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.totalUserResult && changes.totalUserResult.currentValue > this.maxPerPage) {
+      this.showPagination = true;
+    }
+    if (this.userList.length >= this.totalUserResult) this.showPagination = false;
+  }
+  public goToUser(userId: string): void {
+    this.router.navigateByUrl(`/profile/${userId}`);
+  }
+  public goLogin(): void {
+    this.router.navigate(['/login'], { queryParams: { returnUrl: '/annuaire' } });
+  }
+  public goRegister(): void {
+    this.router.navigateByUrl('/form/account');
+  }
+  public resetFilters(): void {
+    this.resetEvent.emit();
+  }
+  public showMore(): void {
+    if (this.userList.length < this.totalUserResult) this.showMoreEvent.emit();
+  }
+}

src/app/annuaire/search-bar/search-bar.component.html

+<div class="block">
+  <div class="content">
+    <form
+      class="inputSearch"
+      [formGroup]="searchForm"
+      fxLayout="row"
+      fxLayoutGap="4px"
+      fxLayoutAlign=" center"
+      (ngSubmit)="applyFilter(searchForm.value.searchTerm)"
+    >
+      <div fxLayout="row" fxLayoutAlign="space-between center" class="container">
+        <input type="text" formControlName="searchTerm" placeholder="Rechercher un utilisateur..." />
+        <button
+          *ngIf="this.searchForm.get('searchTerm').value?.length > 0"
+          (click)="clearInput()"
+          class="icon close"
+          type="button"
+        >
+          <div class="ico-close-search"></div>
+        </button>
+        <span *ngIf="this.searchForm.get('searchTerm').value?.length > 0" class="separation"></span>
+        <app-button [style]="buttonTypeEnum.searchIcon" [iconBtn]="'search'" [type]="'submit'"></app-button>
+      </div>
+    </form>
+    <div (clickOutside)="closeModal()" class="btn-container">
+      <div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="4px">
+        <button
+          class="btn-filter isntPhoneContent"
+          type="button"
+          fxLayout="row"
+          [ngClass]="{
+            selected: modalTypeOpened === TypeModal.employers,
+            containCheckedFilters: numberEmployersChecked
+          }"
+          fxLayoutAlign="space-between center"
+          (click)="openModal(TypeModal.employers)"
+        >
+          <span>Employeur</span>
+          <div class="arrow"></div>
+        </button>
+        <button
+          class="btn-filter isntPhoneContent"
+          type="button"
+          fxLayout="row"
+          [ngClass]="{
+            selected: modalTypeOpened === TypeModal.jobs,
+            containCheckedFilters: numberJobChecked
+          }"
+          fxLayoutAlign="space-between center"
+          (click)="openModal(TypeModal.jobs)"
+        >
+          <span>Fonction</span>
+          <div class="arrow"></div>
+        </button>
+
+        <div *ngIf="modalTypeOpened">
+          <app-filter-modal
+            [modalType]="modalTypeOpened"
+            [checkedFilters]="checkedFilterList"
+            [filtersTypes]="getModalCategory()"
+            (searchEvent)="fetchResults($event)"
+            (closeEvent)="closeModal()"
+          ></app-filter-modal>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div *ngIf="checkedFilterList.length" fxLayout="row wrap" fxLayoutGap="4px" class="filterTags isntPhoneContent">
+    <div class="title">Filtres :</div>
+    <app-button
+      *ngFor="let filter of checkedFilterList"
+      [style]="buttonTypeEnum.TagCloudButton"
+      [text]="filter"
+      (action)="removeFilter(filter)"
+    ></app-button>
+    <div class="reset-icon" (click)="resetFilters()">
+      <app-svg-icon [type]="'ico'" [icon]="'tagReset'" [iconColor]="'black'"></app-svg-icon>
+    </div>
+  </div>
+</div>

src/app/annuaire/search-bar/search-bar.component.scss

+@import '../../../assets/scss/color';
+@import '../../../assets/scss/color';
+@import '../../../assets/scss/typography';
+@import '../../../assets/scss/inputs';
+@import '../../../assets/scss/hyperlink';
+@import '../../../assets/scss/breakpoint';
+@import '../../../assets/scss/buttons';
+
+.block {
+  padding: 0.5rem 0.5rem 0 0.5rem;
+  border-bottom: solid 1px $grey-6;
+  background: $white;
+  @media #{$large-tablet} {
+    padding: 0 10px;
+  }
+}
+.content {
+  display: flex;
+  align-items: center;
+  max-width: 980px;
+  margin: 0 auto 0.5rem auto;
+  input {
+    @include lato-regular-13;
+    @include input-search;
+    margin-top: unset;
+  }
+  .inputSearch {
+    padding: 6px 10px 6px 6px;
+    max-width: 400px;
+    width: 100%;
+    min-width: 200px;
+    background-color: $grey-8;
+    color: $grey-3;
+    height: 36px;
+    border-radius: 50px;
+    margin-right: 0.25rem;
+    @media #{$large-desktop} {
+      min-width: 250px;
+    }
+    @media #{$large-tablet} {
+      width: 100%;
+      margin-bottom: 0.5rem;
+      margin-right: 0;
+    }
+    .container {
+      width: 100%;
+      height: 40px;
+      .separation {
+        border-right: solid 1px $grey-4;
+        width: 5px;
+        height: 23px;
+        margin-right: 5px;
+      }
+    }
+  }
+  @media #{$large-tablet} {
+    flex-direction: column !important;
+    padding-top: 1rem;
+  }
+}
+.btn-container {
+  width: 100%;
+  display: flex;
+}
+.btnSection {
+  width: 100%;
+  justify-content: flex-start !important;
+  @media #{$large-tablet} {
+    display: contents !important;
+  }
+  button {
+    background: $white;
+    height: 36px;
+    border: 1px solid $grey-4;
+    padding: 10px 12px;
+    outline: none;
+    border-radius: 50px;
+    cursor: pointer;
+    text-align: left;
+    transition: all 300ms ease;
+    line-height: 110%;
+    @include btn-normal;
+    @include lato-regular-13;
+    &:hover:not(.selected) {
+      background: $grey-7;
+    }
+    .arrow {
+      background-color: transparent;
+      border-bottom: 1px solid $black;
+      border-right: 1px solid $black;
+      transform: translateY(-25%) rotate(45deg);
+      margin: 0 5px 0 10px;
+      height: 7px;
+      width: 7px;
+      transition: all 300ms ease;
+    }
+    &:focus {
+      border-color: $focus-color;
+    }
+  }
+  .selected {
+    background-color: $primary-color;
+    border-color: $primary-color !important;
+    color: $white;
+    .arrow {
+      background-color: transparent;
+      border-bottom: 1px solid $white;
+      border-right: 1px solid $white;
+      transform: translateY(25%) rotate(-135deg);
+      margin: 0 5px 0 10px;
+      height: 7px;
+      width: 7px;
+    }
+  }
+  .btn-filter {
+    height: 40px;
+    span {
+      line-height: 110%;
+    }
+  }
+  .containCheckedFilters {
+    border-color: $primary-color;
+  }
+}
+::ng-deep .btn-regular.tertiary {
+  height: 40px !important;
+  div {
+    line-height: normal;
+  }
+}
+.footerSearchSection {
+  margin: 8px 0px 8px 0px;
+  height: 40px;
+}
+
+.icon {
+  background-color: transparent;
+  border: 1px solid transparent;
+  outline: none;
+  cursor: pointer;
+  &.pin {
+    padding: 4px 6px 8px 6px;
+    &:hover {
+      .ico-pin-search {
+        background-color: $primary-color;
+      }
+    }
+    &:focus {
+      border-color: $primary-color;
+      .ico-pin-search {
+        background-color: $primary-color;
+      }
+    }
+    &:active {
+      border-color: transparent;
+      .ico-pin-search {
+        background-color: $blue-light;
+      }
+    }
+  }
+  &.close {
+    &:focus {
+      border-color: $primary-color;
+    }
+    &:active {
+      border-color: transparent;
+    }
+  }
+}
+a {
+  @include hyperlink;
+  text-align: right;
+}
+
+.phoneSection {
+  margin: 9px 0px 18px 0px;
+  display: none;
+  .btnSection {
+    padding: 0;
+  }
+}
+@media #{$large-tablet} {
+  .isntPhoneContent {
+    display: none !important;
+  }
+  .phoneSection {
+    display: block;
+  }
+}
+.filterTags {
+  margin: 0.5rem 0 0 0;
+  .title {
+    margin-top: 5px;
+    color: $grey-3;
+  }
+  .reset-icon {
+    padding-top: 0.2rem;
+    cursor: pointer;
+  }
+}

src/app/annuaire/search-bar/search-bar.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchBarComponent } from './search-bar.component';
+
+describe('SearchBarComponent', () => {
+  let component: SearchBarComponent;
+  let fixture: ComponentFixture<SearchBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SearchBarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/annuaire/search-bar/search-bar.component.ts

+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ButtonType } from '../../shared/components/button/buttonType.enum';
+import { Filter } from '../../structure-list/models/filter.model';
+import { SearchService } from '../../structure-list/services/search.service';
+import { TypeModal } from '../enums/TypeModal.enum';
+
+@Component({
+  selector: 'app-search-bar',
+  templateUrl: './search-bar.component.html',
+  styleUrls: ['./search-bar.component.scss'],
+})
+export class SearchBarComponent implements OnInit, OnChanges {
+  @Input() shouldResetFilters: number = 0;
+  @Input() shouldShowMore: number = 0;
+  @Output() searchEvent = new EventEmitter();
+
+  public locate = false;
+  public addStructureFormModal = false;
+  public buttonTypeEnum = ButtonType;
+  public searchForm: FormGroup;
+  public modalTypeOpened: TypeModal;
+  public checkedFilterList: string[] = [];
+  public numberEmployersChecked = 0;
+  public numberJobChecked = 0;
+  public jobTypes: string[] = [];
+  public employerTypes: string[] = [];
+  public queryString: string;
+
+  public jobFilterChecked: string[] = [];
+  public employerFilterChecked: string[] = [];
+
+  constructor(
+    private fb: FormBuilder,
+    private activatedRoute: ActivatedRoute,
+    private route: ActivatedRoute,
+    private router: Router,
+    private searchService: SearchService
+  ) {
+    this.searchForm = this.fb.group({
+      searchTerm: this.activatedRoute.snapshot.queryParamMap.get('search')
+        ? this.activatedRoute.snapshot.queryParamMap.get('search')
+        : '',
+    });
+  }
+  ngOnInit(): void {
+    // Will store the different categories
+    this.getData();
+    this.queryString = this.activatedRoute.snapshot.queryParamMap.get('search');
+    if (this.queryString) {
+      const filters: Filter[] = [];
+      filters.push(new Filter('query', this.queryString));
+      this.searchEvent.emit(filters);
+    }
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.shouldResetFilters && changes.shouldResetFilters.currentValue !== 0) this.resetFilters();
+    if (changes.shouldShowMore && !changes.shouldShowMore.firstChange) {
+      this.searchEvent.emit({
+        queryParam: this.searchForm.get('searchTerm').value,
+        page: changes.shouldShowMore.currentValue,
+        jobFilters: this.jobFilterChecked,
+        employerFilter: this.employerFilterChecked,
+      });
+    }
+  }
+  // Get the categories for each modal type
+  private getData(): void {
+    this.searchService.getJobs().subscribe((res) => {
+      this.jobTypes = res;
+    });
+    this.searchService.getEmployers().subscribe((res) => {
+      this.employerTypes = res;
+    });
+  }
+
+  // Accessor to template angular.
+  public get TypeModal(): typeof TypeModal {
+    return TypeModal;
+  }
+
+  // Clear input search
+  public clearInput(): void {
+    this.searchForm.reset();
+    this.applyFilter('');
+  }
+
+  public splitFilters(checkedFilterList: string[]): void {
+    this.employerFilterChecked = checkedFilterList.filter((filter) => this.employerTypes.includes(filter));
+    this.jobFilterChecked = checkedFilterList.filter((filter) => this.jobTypes.includes(filter));
+  }
+  // Sends an array containing all filters
+  public applyFilter(term: string): void {
+    this.shouldResetFilters = 0;
+    // Add search input filter
+    if (term) {
+      this.router.navigate(['/annuaire'], {
+        relativeTo: this.route,
+        queryParams: {
+          search: term,
+        },
+        queryParamsHandling: 'merge',
+      });
+    } else if (!term) {
+      this.router.navigate(['/annuaire'], {
+        relativeTo: this.route,
+      });
+    }
+    this.splitFilters(this.checkedFilterList);
+    this.searchEvent.emit({
+      queryParam: term || '',
+      jobFilters: this.jobFilterChecked,
+      employerFilter: this.employerFilterChecked,
+    });
+  }
+
+  public fetchResults(checkedFilters: string[]): void {
+    this.checkedFilterList = checkedFilters;
+    const inputTerm = this.searchForm.get('searchTerm').value;
+    this.closeModal();
+    this.applyFilter(inputTerm);
+  }
+
+  // Check if some modules is checked on filter and store number of modules checked
+  public countCheckedFilters(): void {
+    this.numberJobChecked = this.checkedFilterList.filter((filter) => this.jobTypes.includes(filter)).length;
+    this.numberEmployersChecked = this.checkedFilterList.filter((filter) => this.employerTypes.includes(filter)).length;
+  }
+
+  public getModalCategory(): string[] | Error {
+    switch (this.modalTypeOpened) {
+      case TypeModal.jobs:
+        return this.jobTypes;
+      case TypeModal.employers:
+        return this.employerTypes;
+      default:
+        throw new Error('Modal type not handle');
+    }
+  }
+
+  // Open the modal and display the list according to the right filter button
+  public openModal(modalType: TypeModal): void {
+    // if modal already opened, reset type
+    if (this.modalTypeOpened === modalType) {
+      this.closeModal();
+    } else if (this.modalTypeOpened !== modalType) {
+      this.modalTypeOpened = modalType;
+    }
+  }
+
+  public closeModal(): void {
+    this.modalTypeOpened = undefined;
+    this.countCheckedFilters();
+  }
+
+  public resetFilters(): void {
+    this.checkedFilterList = [];
+    this.numberEmployersChecked = 0;
+    this.numberJobChecked = 0;
+    this.employerFilterChecked = [];
+    this.jobFilterChecked = [];
+    this.searchEvent.emit({ queryParam: '', jobFilters: [], employerFilter: [] });
+    this.router.navigate(['/annuaire']);
+    this.searchForm.reset();
+  }
+  public removeFilter(filter: string): void {
+    const index = this.checkedFilterList.findIndex((checkedFilter: string) => checkedFilter === filter);
+    this.checkedFilterList.splice(index, 1);
+    const inputTerm = this.searchForm.get('searchTerm').value;
+    this.splitFilters(this.checkedFilterList);
+    this.countCheckedFilters();
+    this.searchEvent.emit({
+      queryParam: inputTerm,
+      jobFilters: this.jobFilterChecked,
+      employerFilter: this.employerFilterChecked,
+    });
+  }
+}