Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
formation-angular
Project
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Emile TAVERNE
formation-angular
Commits
fc65ea77
Commit
fc65ea77
authored
7 years ago
by
Emile TAVERNE
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Ajout fonction recherche
parent
7ec76fdf
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
46 additions
and
3 deletions
+46
-3
app.component.css
trombinoscope/src/app/app.component.css
+19
-0
app.component.html
trombinoscope/src/app/app.component.html
+4
-1
app.component.ts
trombinoscope/src/app/app.component.ts
+1
-0
app.module.ts
trombinoscope/src/app/app.module.ts
+5
-2
index.ts
trombinoscope/src/app/pipes/index.ts
+1
-0
search.pipe.ts
trombinoscope/src/app/pipes/search.pipe.ts
+16
-0
No files found.
trombinoscope/src/app/app.component.css
View file @
fc65ea77
...
...
@@ -8,3 +8,22 @@ header h1 {
font-weight
:
400
;
letter-spacing
:
0.6px
;
}
input
[
type
=
text
]
{
color
:
#333
;
border
:
none
;
border-radius
:
100px
;
background-color
:
#e0e0e0
;
padding
:
5px
16px
;
margin-left
:
8px
;
width
:
180px
;
max-width
:
300px
;
transition
:
width
.7s
ease-in-out
;
line-height
:
30px
;
letter-spacing
:
0.4px
;
}
input
[
type
=
text
]
:focus
{
width
:
100%
;
outline-width
:
0
;
}
This diff is collapsed.
Click to expand it.
trombinoscope/src/app/app.component.html
View file @
fc65ea77
...
...
@@ -5,7 +5,10 @@
</h1>
</header>
<div
class=
"w80 center ptm"
>
<div
class=
"mod"
>
<input
type=
"text"
class=
"fr"
placeholder=
"Rechercher..."
[(
ngModel
)]="
searchField
"
>
</div>
<div
class=
"grid-4 has-gutter"
>
<app-card
*
ngFor=
"let person of persons | orderByFullName"
[
person
]="
person
"
></app-card>
<app-card
*
ngFor=
"let person of persons |
search:searchField |
orderByFullName"
[
person
]="
person
"
></app-card>
</div>
</div>
This diff is collapsed.
Click to expand it.
trombinoscope/src/app/app.component.ts
View file @
fc65ea77
...
...
@@ -9,6 +9,7 @@ import {DataService} from "./services/data.service";
})
export
class
AppComponent
implements
OnInit
{
private
persons
:
PersonModel
[]
=
[];
private
searchField
:
string
;
constructor
(
private
dataService
:
DataService
)
{
...
...
This diff is collapsed.
Click to expand it.
trombinoscope/src/app/app.module.ts
View file @
fc65ea77
import
{
BrowserModule
}
from
'@angular/platform-browser'
;
import
{
NgModule
}
from
'@angular/core'
;
import
{
HttpClientModule
}
from
'@angular/common/http'
;
import
{
FormsModule
}
from
'@angular/forms'
;
import
{
AppComponent
}
from
'./app.component'
;
import
*
as
Components
from
'./components'
;
...
...
@@ -12,11 +13,13 @@ import * as Pipes from './pipes';
AppComponent
,
Components
.
CardComponent
,
Pipes
.
CapitalizePipe
,
Pipes
.
OrderByFullNamePipe
Pipes
.
OrderByFullNamePipe
,
Pipes
.
SearchPipe
],
imports
:
[
BrowserModule
,
HttpClientModule
HttpClientModule
,
FormsModule
],
providers
:
[
Services
.
DataService
],
bootstrap
:
[
AppComponent
]
...
...
This diff is collapsed.
Click to expand it.
trombinoscope/src/app/pipes/index.ts
View file @
fc65ea77
export
*
from
'./capitalize.pipe'
;
export
*
from
'./order-by-full-name.pipe'
;
export
*
from
'./search.pipe'
;
This diff is collapsed.
Click to expand it.
trombinoscope/src/app/pipes/search.pipe.ts
0 → 100644
View file @
fc65ea77
import
{
Pipe
,
PipeTransform
}
from
'@angular/core'
;
import
{
PersonModel
}
from
"../../models"
;
@
Pipe
({
name
:
'search'
})
export
class
SearchPipe
implements
PipeTransform
{
transform
(
value
:
PersonModel
[],
search
:
string
):
PersonModel
[]
{
if
(
!
search
||
search
.
length
===
0
)
{
return
value
;
}
return
value
.
filter
((
item
:
PersonModel
):
boolean
=>
{
const
fullName
=
`
${
item
.
firstname
}
${
item
.
lastname
}
`
;
return
fullName
.
toLowerCase
().
includes
(
search
.
toLowerCase
());
});
}
}
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment