This commit is contained in:
Park Byung Eun 2022-09-01 00:35:22 +00:00
parent 909f18b2ca
commit 628a663037
2 changed files with 38 additions and 4 deletions

View File

@ -35,6 +35,7 @@
</div> </div>
</div> </div>
<div <div
*ngIf="__checkedUsers.length > 0"
class="relative flex flex-col sm:flex-row flex-0 sm:items-center py-4 px-6 md:px-8 border-b" class="relative flex flex-col sm:flex-row flex-0 sm:items-center py-4 px-6 md:px-8 border-b"
> >
<div> <div>
@ -61,7 +62,9 @@
class="unconnected-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5" class="unconnected-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
> >
<div> <div>
<mat-checkbox></mat-checkbox> <mat-checkbox
(change)="__onChangeChkUsersAll($event)"
></mat-checkbox>
</div> </div>
<div>상부</div> <div>상부</div>
<div class="hidden lg:block">회원수</div> <div class="hidden lg:block">회원수</div>
@ -100,8 +103,12 @@
<div <div
class="unconnected-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b" class="unconnected-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
> >
<div> <div style="text-align: center">
<mat-checkbox></mat-checkbox> <mat-checkbox
#chkUsers
[value]="unconnected.id"
(change)="__onChangeChkUsers($event)"
></mat-checkbox>
</div> </div>
<div> <div>
최상부{{ unconnected.highstRank }} 최상부{{ unconnected.highstRank }}

View File

@ -5,7 +5,9 @@ import {
Component, Component,
OnDestroy, OnDestroy,
OnInit, OnInit,
QueryList,
ViewChild, ViewChild,
ViewChildren,
ViewEncapsulation, ViewEncapsulation,
} from '@angular/core'; } from '@angular/core';
import { import {
@ -14,7 +16,7 @@ import {
FormGroup, FormGroup,
Validators, Validators,
} from '@angular/forms'; } from '@angular/forms';
import { MatCheckboxChange } from '@angular/material/checkbox'; import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
import { MatPaginator } from '@angular/material/paginator'; import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort'; import { MatSort } from '@angular/material/sort';
import { import {
@ -71,6 +73,8 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild(MatPaginator) private _paginator!: MatPaginator; @ViewChild(MatPaginator) private _paginator!: MatPaginator;
@ViewChild(MatSort) private _sort!: MatSort; @ViewChild(MatSort) private _sort!: MatSort;
@ViewChildren('chkUsers') chkUsers!: QueryList<MatCheckbox>;
unconnecteds$!: Observable<Unconnected[] | undefined>; unconnecteds$!: Observable<Unconnected[] | undefined>;
__isSearchOpened = false; __isSearchOpened = false;
@ -79,6 +83,8 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
selectedUnconnected?: Unconnected; selectedUnconnected?: Unconnected;
pagination?: UnconnectedPagination; pagination?: UnconnectedPagination;
__checkedUsers: string[] = [];
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
/** /**
@ -180,6 +186,27 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
// @ Private methods // @ Private methods
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
__onChangeChkUsersAll(event: MatCheckboxChange): void {
let checked = event.checked;
this.chkUsers.forEach((c, i) => {
c.checked = checked;
});
this.__updateCheckedUsers();
}
__onChangeChkUsers(event: MatCheckboxChange): void {
this.__updateCheckedUsers();
}
__updateCheckedUsers(): void {
this.__checkedUsers = [];
this.chkUsers.forEach((c, i) => {
if (c.checked) {
this.__checkedUsers.push(c.value);
}
});
}
/** /**
* Create product * Create product
*/ */