Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
anis
anis-client
Commits
30e6a238
Commit
30e6a238
authored
Sep 04, 2019
by
François Agneray
Browse files
Select all checkbox => done
parent
929b2521
Changes
5
Hide whitespace changes
Inline
Side-by-side
src/app/search/components/output/output-by-category.component.html
View file @
30e6a238
<p
class=
"mb-3"
><em>
{{ category }}
</em></p>
<p
class=
"mb-3"
><em>
{{ category
Label
}}
</em></p>
<div
class=
"selectbox py-1"
>
<button
(click)=
"toggleSelectAll()"
class=
"btn btn-block text-left py-0 m-0"
>
<div
*ngIf=
"isAllSelected; then selected else unselected"
></div>
...
...
@@ -6,7 +6,7 @@
<span
*ngIf=
"isAllSelected"
>
Unselect All
</span>
</button>
<hr
class=
"my-1"
>
<button
*ngFor=
"let attribute of attribute
s
"
class=
"btn btn-block text-left py-0 m-0"
<button
*ngFor=
"let attribute of attribute
List
"
class=
"btn btn-block text-left py-0 m-0"
(click)=
"toggleSelection(attribute.id)"
>
<div
*ngIf=
"isSelected(attribute.id); then selected else unselected"
></div>
{{ attribute.form_label }}
...
...
src/app/search/components/output/output-by-category.component.ts
View file @
30e6a238
import
{
Component
,
Input
,
Output
,
EventEmitter
,
ChangeDetectionStrategy
}
from
'
@angular/core
'
;
import
{
Family
,
Category
,
Attribute
}
from
'
../../../metamodel/model
'
;
import
{
Attribute
}
from
'
../../../metamodel/model
'
;
@
Component
({
selector
:
'
app-output-by-category
'
,
...
...
@@ -9,11 +9,11 @@ import { Family, Category, Attribute } from '../../../metamodel/model';
changeDetection
:
ChangeDetectionStrategy
.
OnPush
})
export
class
OutputByCategoryComponent
{
@
Input
()
category
:
string
;
@
Input
()
attribute
s
:
Attribute
[];
@
Input
()
category
Label
:
string
;
@
Input
()
attribute
List
:
Attribute
[];
@
Input
()
outputList
:
number
[];
@
Input
()
isAllSelected
:
boolean
;
@
Output
()
change
:
EventEmitter
<
number
[]
>
=
new
EventEmitter
();
isAllSelected
=
false
;
isSelected
(
id
:
number
)
{
return
this
.
outputList
.
filter
(
i
=>
i
===
id
).
length
>
0
;
...
...
@@ -31,6 +31,18 @@ export class OutputByCategoryComponent {
}
toggleSelectAll
():
void
{
this
.
isAllSelected
=
!
this
.
isAllSelected
;
const
clonedOutputList
=
[...
this
.
outputList
];
const
attributeListId
=
this
.
attributeList
.
map
(
a
=>
a
.
id
);
if
(
this
.
isAllSelected
)
{
attributeListId
.
forEach
(
id
=>
{
const
index
=
clonedOutputList
.
indexOf
(
id
);
clonedOutputList
.
splice
(
index
,
1
);
});
}
else
{
attributeListId
.
filter
(
id
=>
clonedOutputList
.
indexOf
(
id
)
===
-
1
).
forEach
(
id
=>
{
clonedOutputList
.
push
(
id
);
});
}
this
.
change
.
emit
(
clonedOutputList
);
}
}
src/app/search/components/output/output-by-family.component.css
View file @
30e6a238
.selectbox
{
height
:
200px
;
overflow-y
:
auto
;
border
:
1px
solid
#ced4da
;
border-radius
:
.25rem
;
}
.anis-color
{
color
:
#7AC29A
;
}
button
:hover
{
background-color
:
#F8F9FA
;
}
button
:focus
{
box-shadow
:
none
;
}
\ No newline at end of file
src/app/search/components/output/output-by-family.component.html
View file @
30e6a238
<div
class=
"row"
>
<div
*ngFor=
"let category of getCategoryByFamily(outputFamily.id)"
class=
"col-12 col-md-6 my-3 text-center"
>
<app-output-by-category
[category]=
"category.label"
[attribute
s
]=
"getAttributeByCategory(category.id)"
[category
Label
]=
"category.label"
[attribute
List
]=
"getAttributeByCategory(category.id)"
[outputList]=
"outputList"
[isAllSelected]=
"getIsAllSelected(category.id)"
(change)=
"change($event)"
>
</app-output-by-category>
<!-- <p class="mb-3"><em>{{ category.label }}</em></p>
<div class="selectbox py-1">
<button (click)="toggleSelectAll()" class="btn btn-block text-left py-0 m-0">
<div *ngIf="isAllSelected; then selected else unselected"></div>
<span *ngIf="!isAllSelected">Select All</span>
<span *ngIf="isAllSelected">Unselect All</span>
</button>
<hr class="my-1">
<button *ngFor="let attribute of getAttributeByCategory(category.id)"
class="btn btn-block text-left py-0 m-0" (click)="toggleSelection(attribute.id)">
<div *ngIf="isSelected(attribute.id); then selected else unselected"></div>
{{ attribute.form_label }}
</button>
</div> -->
</div>
</div>
\ No newline at end of file
src/app/search/components/output/output-by-family.component.ts
View file @
30e6a238
...
...
@@ -16,18 +16,24 @@ export class OutputByFamilyComponent {
@
Output
()
changed
:
EventEmitter
<
number
[]
>
=
new
EventEmitter
();
isAllSelected
=
false
;
getCategoryByFamily
(
idFamily
:
number
)
{
getCategoryByFamily
(
idFamily
:
number
)
:
Category
[]
{
return
this
.
categoryList
.
filter
(
category
=>
category
.
id_output_family
===
idFamily
)
.
sort
((
a
,
b
)
=>
a
.
display
-
b
.
display
);
}
getAttributeByCategory
(
idCategory
:
number
)
{
getAttributeByCategory
(
idCategory
:
number
)
:
Attribute
[]
{
return
this
.
datasetAttributeList
.
filter
(
attribute
=>
attribute
.
id_output_category
===
idCategory
)
.
sort
((
a
,
b
)
=>
a
.
output_display
-
b
.
output_display
);
}
getIsAllSelected
(
idCategory
:
number
):
boolean
{
const
attributeListId
=
this
.
getAttributeByCategory
(
idCategory
).
map
(
a
=>
a
.
id
)
const
filteredOutputList
=
this
.
outputList
.
filter
(
id
=>
attributeListId
.
indexOf
(
id
)
>
-
1
);
return
attributeListId
.
length
===
filteredOutputList
.
length
;
}
change
(
clonedOutputList
:
number
[]):
void
{
this
.
changed
.
emit
(
clonedOutputList
);
}
...
...
Write
Preview
Supports
Markdown
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