Skip to content
Snippets Groups Projects
Commit 09399c30 authored by Guilhem CARRON's avatar Guilhem CARRON
Browse files

feat(annuaire): Add user registry page and search feature

parent 9489eaaa
No related branches found
No related tags found
4 merge requests!418V2.1.0,!400V2.0,!316feat(annuaire): Add user registry page and feature,!230V2.0
Showing
with 1208 additions and 39 deletions
......@@ -8488,7 +8488,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
}
}
......@@ -8511,7 +8511,7 @@
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
"dev": true
},
"open": {
......@@ -12288,7 +12288,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 +12819,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 +12868,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 +12929,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 +13265,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 +13659,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 +13773,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 +13820,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 +13850,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 +13898,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 +13925,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 +13949,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 +14215,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": {
......@@ -14991,7 +14991,7 @@
"etag": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
"dev": true
},
"event-emitter": {
......@@ -15531,7 +15531,7 @@
"fresh": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
"integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
"dev": true
},
"from": {
......@@ -16044,7 +16044,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 +16096,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 +16195,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 +16398,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 +16472,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 +16779,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 +16908,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": {
......@@ -19687,7 +19687,7 @@
"media-typer": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
"dev": true
},
"memfs": {
......@@ -19844,7 +19844,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 +19862,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 +20496,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 +21302,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 +21963,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 +22372,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 +22483,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 +22492,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
}
}
......@@ -23142,7 +23142,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": {
......@@ -24485,7 +24485,7 @@
"text-table": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
"integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
"dev": true
},
"throat": {
......@@ -25011,7 +25011,7 @@
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
"dev": true
},
"verror": {
......@@ -25028,7 +25028,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 +25080,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"
<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>
@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;
}
}
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();
});
});
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++;
}
}
export enum TypeModal {
employers = 1,
jobs = 2,
}
<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>
@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;
}
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();
});
});
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);
}
}
import { UserAnnuary } from '../../models/user.model';
export interface SearchQuery {
queryParam: string;
page: number;
jobFilters?: string[];
employerFilter?: string[];
}
export interface SearchResults {
count: number;
docs: UserAnnuary[];
}
<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>
@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;
}
}
}
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();
});
});
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();
}
}
<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>
@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;
}
}
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();
});
});
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,
});
}
}
import { NgModule } from '@angular/core';
import { Route, RouterModule, Routes } from '@angular/router';
import { AnnuaireComponent } from './annuaire/annuaire.component';
import { CartoComponent } from './carto/carto.component';
import { ContactComponent } from './contact/contact.component';
import { FooterComponent } from './footer/footer.component';
......@@ -215,7 +216,16 @@ const routes: Routes = [
footerOutletRoute,
],
},
{
path: 'annuaire',
children: [
{
path: '',
component: AnnuaireComponent,
},
footerOutletRoute,
],
},
{
path: 'news',
children: [
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment