Skip to content

Commit afc5ee6

Browse files
cengiquecengique
authored
Merge pull request #128 from soft-eng-practicum/feat/searchbar
feat: Allow NavBar to control search queries in Explore page
2 parents f891dc9 + 377434c commit afc5ee6

10 files changed

Lines changed: 726 additions & 287 deletions

File tree

‎src/Analysim.Web/ClientApp/src/app/explore/explore.component.html‎

Lines changed: 194 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,200 @@
11
<!-- Container Start -->
2-
<div class="container-fluid my-5 mx-auto">
3-
<!-- Row Start -->
4-
<div class="row justify-content-center mb-3">
5-
<!-- Column Start -->
6-
<div class="col-md-10">
7-
<!-- Nav Search Bar Start-->
8-
<div class="card">
9-
<div class="card-body">
10-
<form class="form-control p-0 explore-search" [formGroup]="searchForm" (ngSubmit)="onSubmit()">
11-
<div class="input-group search-group">
12-
<!-- Search Category -->
13-
<div class="input-group-prepend">
14-
<select class="custom-select explore-select" formControlName="searchCategory">
15-
<option value="project">Project</option>
16-
<option value="profile">Profile</option>
17-
</select>
18-
</div>
19-
<!-- Search Icon -->
20-
<input type="text" class="form-control" placeholder="Search..." name="searchTerm" formControlName="searchTerm">
21-
<!-- Search Button -->
22-
<div class="input-group-append">
23-
<button class="btn search-btn">
24-
<i class="fa fa-search"></i>
25-
</button>
26-
</div>
27-
</div>
28-
</form>
2+
<div class="container-fluid my-4 mx-auto">
3+
<!-- Row Start -->
4+
<div class="row justify-content-center mb-3">
5+
<!-- Column Start -->
6+
<div class="col-md-10">
7+
<!-- Filter Section Start-->
8+
<div class="card explore-header-card">
9+
<div class="card-body explore-header-body">
10+
<div class="explore-toolbar">
11+
<div class="explore-toolbar__summary">
12+
<h5 class="explore-title">Search Results</h5>
13+
<p class="explore-subtitle">
14+
Showing results for
15+
<span class="explore-query">
16+
"{{
17+
termParam && termParam.length
18+
? termParam.join(" ")
19+
: "all content"
20+
}}"
21+
</span>
22+
</p>
23+
</div>
24+
25+
<div class="explore-toolbar__controls">
26+
<div class="explore-control">
27+
<label class="explore-control__label">Category</label>
28+
29+
<div class="explore-dropdown" [class.is-open]="isCategoryOpen">
30+
<button
31+
type="button"
32+
class="btn btn-outline-primary explore-dropdown-toggle"
33+
(click)="$event.stopPropagation(); toggleCategoryDropdown()"
34+
>
35+
<span>{{
36+
categoryParam === "project" ? "Projects" : "Profiles"
37+
}}</span>
38+
<span class="explore-dropdown-caret">▾</span>
39+
</button>
40+
41+
<div
42+
class="explore-dropdown-menu"
43+
*ngIf="isCategoryOpen"
44+
(click)="$event.stopPropagation()"
45+
>
46+
<button
47+
type="button"
48+
class="dropdown-item"
49+
(click)="selectCategory('project')"
50+
>
51+
Projects
52+
</button>
53+
54+
<button
55+
type="button"
56+
class="dropdown-item"
57+
(click)="selectCategory('profile')"
58+
>
59+
Profiles
60+
</button>
61+
</div>
2962
</div>
30-
</div> <!-- Nav Search Bar End -->
31-
</div> <!-- Column End -->
32-
</div> <!-- Row End -->
33-
<!-- Row Start -->
34-
<div class="row justify-content-center">
35-
<!-- Column Start -->
36-
<div class="col-md-10">
37-
<!-- Card Start -->
38-
<div class="card">
39-
<div class="card-body">
40-
<!-- Project List-->
41-
<ul class="list-group list-group-flush list-unstyled" *ngIf="searchForm.value.searchCategory == 'project'">
42-
<li *ngIf="exploreService.projects == null" class="d-flex justify-content-center">
43-
<div class="spinner-border">
44-
<span class="sr-only"></span>
45-
</div>
46-
</li>
47-
<li *ngIf="exploreService.projects != null && exploreService.projects.length == 0" class="d-flex justify-content-center">
48-
<p class="mb-0">No Result Found</p>
49-
</li>
50-
<li class="list-group-item border-0 p-0" *ngFor="let project of exploreService.projects; let lastItem = last" [class.mb-4]="!lastItem">
51-
<app-project-card [project]=project></app-project-card>
52-
</li>
53-
</ul>
54-
<!-- User List -->
55-
<ul class="list-group list-group-flush" *ngIf="searchForm.value.searchCategory == 'profile'">
56-
<li *ngIf="users != null && users.length == 0" class="d-flex justify-content-center">
57-
<p class="mb-0">No Result Found</p>
58-
</li>
59-
<li *ngIf="users == null" class="d-flex justify-content-center">
60-
<div class="spinner-border">
61-
<span class="sr-only"></span>
62-
</div>
63-
</li>
64-
<li class="list-group-item border-0 p-0" *ngFor="let user of users; let lastItem = last" [class.mb-4]="!lastItem">
63+
</div>
64+
65+
<div class="explore-control">
66+
<label class="explore-control__label">Sort</label>
6567

66-
<app-profile-card [profile]=user></app-profile-card>
67-
</li>
68-
</ul>
68+
<div class="explore-dropdown" [class.is-open]="isSortOpen">
69+
<button
70+
type="button"
71+
class="btn btn-outline-primary explore-dropdown-toggle"
72+
(click)="$event.stopPropagation(); toggleSortDropdown()"
73+
>
74+
<span>{{
75+
sortOrder === "newest" ? "Newest" : "Oldest"
76+
}}</span>
77+
<span class="explore-dropdown-caret">▾</span>
78+
</button>
79+
80+
<div
81+
class="explore-dropdown-menu"
82+
*ngIf="isSortOpen"
83+
(click)="$event.stopPropagation()"
84+
>
85+
<button
86+
type="button"
87+
class="dropdown-item"
88+
(click)="selectSortOrder('newest')"
89+
>
90+
Newest
91+
</button>
92+
93+
<button
94+
type="button"
95+
class="dropdown-item"
96+
(click)="selectSortOrder('oldest')"
97+
>
98+
Oldest
99+
</button>
100+
</div>
69101
</div>
70-
</div> <!-- Card End -->
71-
</div> <!-- Column End -->
72-
</div> <!-- Row End -->
73-
</div> <!-- Container End -->
102+
</div>
103+
104+
<button
105+
type="button"
106+
class="btn btn-outline-primary"
107+
(click)="clearSearch()"
108+
>
109+
Clear Search
110+
</button>
111+
</div>
112+
</div>
113+
</div>
114+
</div>
115+
116+
<!-- Filter Section End -->
117+
</div>
118+
<!-- Column End -->
119+
</div>
120+
<!-- Row End -->
121+
<!-- Row Start -->
122+
<div class="row justify-content-center">
123+
<!-- Column Start -->
124+
<div class="col-md-10">
125+
<!-- Card Start -->
126+
<div class="card explore-results-card">
127+
<div class="card-body">
128+
<div class="explore-results-meta">
129+
<p class="explore-results-count" *ngIf="categoryParam == 'project'">
130+
Showing <strong>{{ sortedProjects.length }}</strong> project
131+
results
132+
</p>
133+
134+
<p class="explore-results-count" *ngIf="categoryParam == 'profile'">
135+
Showing <strong>{{ sortedUsers.length }}</strong> profile results
136+
</p>
137+
</div>
138+
<!-- Project List-->
139+
<ul
140+
class="list-group list-group-flush list-unstyled"
141+
*ngIf="categoryParam == 'project'"
142+
>
143+
<li
144+
*ngIf="exploreService.projects == null"
145+
class="d-flex justify-content-center"
146+
>
147+
<div class="spinner-border">
148+
<span class="sr-only"></span>
149+
</div>
150+
</li>
151+
<li
152+
*ngIf="
153+
exploreService.projects != null &&
154+
exploreService.projects.length == 0
155+
"
156+
class="d-flex justify-content-center"
157+
>
158+
<p class="mb-0">No Result Found</p>
159+
</li>
160+
<li
161+
class="list-group-item border-0 p-0"
162+
*ngFor="let project of sortedProjects; let lastItem = last"
163+
[class.mb-4]="!lastItem"
164+
>
165+
<app-project-card [project]="project"></app-project-card>
166+
</li>
167+
</ul>
168+
<!-- User List -->
169+
<div *ngIf="categoryParam == 'profile'">
170+
<div *ngIf="users == null" class="d-flex justify-content-center">
171+
<div class="spinner-border">
172+
<span class="sr-only"></span>
173+
</div>
174+
</div>
74175

176+
<div
177+
*ngIf="users != null && users.length == 0"
178+
class="d-flex justify-content-center"
179+
>
180+
<p class="mb-0">No Result Found</p>
181+
</div>
75182

183+
<div class="row" *ngIf="users != null && users.length > 0">
184+
<div
185+
class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4"
186+
*ngFor="let user of sortedUsers"
187+
>
188+
<app-profile-card [profile]="user"></app-profile-card>
189+
</div>
190+
</div>
191+
</div>
192+
</div>
193+
</div>
194+
<!-- Card End -->
195+
</div>
196+
<!-- Column End -->
197+
</div>
198+
<!-- Row End -->
199+
</div>
200+
<!-- Container End -->

0 commit comments

Comments
 (0)