90 lines
2.5 KiB
HTML
Raw Normal View History

2019-10-29 19:06:25 +09:00
<mat-card class="confirm-card mat-elevation-z">
<mat-card-header>
<mat-card-title>{{ data.title }}</mat-card-title>
</mat-card-header>
<mat-card-content>
2019-10-29 19:06:25 +09:00
<div class="add-row">
<button
mat-button
*ngIf="!isShowAddGroupField"
(click)="isShowAddGroupField = !isShowAddGroupField"
2019-10-29 19:06:25 +09:00
class="mat-mini-fab mat-button-base mat-accent mat-elevation-z"
>
2019-10-29 19:06:25 +09:00
<mat-icon>add</mat-icon>
<span class="mat-fab__label">새 그룹 추가</span>
</button>
2019-10-29 19:06:25 +09:00
<div *ngIf="isShowAddGroupField" class="input-groupname-box">
<mat-form-field hintLabel="특수문자는 '-,_'만 사용할 수 있습니다.">
<input
matInput
#inputGroupName
type="text"
maxlength="20"
placeholder="그룹이름"
value=""
/>
2019-10-29 19:06:25 +09:00
<button
mat-button
matSuffix
mat-icon-button
aria-label="Clear"
(click)="inputGroupName.value = ''"
>
<mat-icon>close</mat-icon>
</button>
2019-10-29 19:06:25 +09:00
<mat-hint align="end"
>{{ inputGroupName.value?.length || 0 }}/20</mat-hint
>
</mat-form-field>
2019-10-29 19:06:25 +09:00
<div class="btn-box">
<button mat-stroked-button (click)="onClickAddGroupCancel()">
닫기
</button>
<button
mat-stroked-button
color="accent"
(click)="onClickAddGroup(inputGroupName.value)"
class="mat-accent"
>
그룹명 추가
2019-10-29 19:06:25 +09:00
</button>
</div>
</div>
</div>
<mat-selection-list #groups>
<mat-list-option
*ngFor="let groupBuddy of groupBuddyList$ | async"
[value]="groupBuddy.group"
>
<span class="title-name ellipsis"> {{ groupBuddy.group.name }} </span>
<span class="text-accent-color number"
>({{ groupBuddy.buddyList.length }}명)</span
>
</mat-list-option>
</mat-selection-list>
<!-- <div>
<ucap-group-expansion-panel
#groupExpansionPanel
[groupBuddyList]="groupBuddyList$ | async"
[checkable]="true"
>
</ucap-group-expansion-panel>
</div> -->
</mat-card-content>
<mat-card-actions class="button-farm flex-row">
<button
mat-stroked-button
(click)="onClickChoice(false)"
class="mat-primary"
>
No
</button>
<button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
Yes
</button>
</mat-card-actions>
</mat-card>