장기미접속회원리스트 수정

This commit is contained in:
이담 정 2022-07-21 09:34:20 +00:00
parent 72c585b590
commit 1d8c974f63
5 changed files with 604 additions and 779 deletions

File diff suppressed because it is too large Load Diff

View File

@ -11,16 +11,137 @@
</div>
<!-- Title -->
<div class="text-4xl font-extrabold tracking-tight">장기 미접속 회원</div>
<!-- Actions -->
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<!-- button -->
<button mat-flat-button [color]="'primary'">15일</button>
<button mat-flat-button [color]="'primary'">30일</button>
<button mat-flat-button [color]="'primary'">60일</button>
<button mat-flat-button [color]="'primary'">90일</button>
<button mat-flat-button [color]="'primary'">120일</button>
<button mat-flat-button [color]="'primary'">가입후미접속</button>
<!-- Search -->
<!-- <div>
<span>총회원수:<span style="color: red">38</span></span>&nbsp;&nbsp;
<span>진행중금액:<span style="color: red">0</span></span>&nbsp;&nbsp;
<span>총 보유머니:<span style="color: red">21,437,873</span></span
>&nbsp;&nbsp;
<span>총 콤프:<span style="color: red">394,860</span></span
>&nbsp;&nbsp;
<span>총 합계:<span style="color: blue">21,832,733</span></span>
</div> -->
<button mat-icon-button (click)="__onClickSearch()">
<mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
</button>
</div>
</div>
<!-- Memo -->
<!-- <div
class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
>
<mat-form-field
class="bet-mat-form-field-wrapper-mb-0 mr-2"
style="width: 100%"
>
<textarea matInput cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
</mat-form-field>
<button mat-flat-button [color]="'primary'">메모저장</button>
</div> -->
<!-- Search -->
<div
*ngIf="__isSearchOpened"
class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
>
<!-- Actions -->
<div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
<!-- SelectBox -->
<mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
<mat-select placeholder="리스트수">
<mat-option value="40">40</mat-option>
<mat-option value="60">60</mat-option>
<mat-option value="80">80</mat-option>
<mat-option value="100">100</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
<mat-select placeholder="레벨">
<mat-option value="level1">LV.1</mat-option>
<mat-option value="level2">LV.2</mat-option>
<mat-option value="level3">LV.3</mat-option>
<mat-option value="level4">LV.4</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
<mat-select placeholder="상태">
<mat-option value="">정상</mat-option>
<mat-option value="">대기</mat-option>
<mat-option value="">탈퇴</mat-option>
<mat-option value="">휴면</mat-option>
<mat-option value="">블랙</mat-option>
<mat-option value="">정지</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
<mat-select placeholder="제한">
<mat-option value="">카지노제한</mat-option>
<mat-option value="">슬롯제한</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
<mat-select placeholder="입금">
<mat-option value="">계좌입금</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
<mat-select placeholder="아이디">
<mat-option value="">아이디</mat-option>
<mat-option value="">닉네임</mat-option>
<mat-option value="">이름</mat-option>
<mat-option value="">사이트</mat-option>
<mat-option value="">파트너수동지급</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
<mat-select placeholder="가입일 정렬">
<mat-option value="">가입일 정렬</mat-option>
<mat-option value="">아이디 정렬</mat-option>
<mat-option value="">닉네임 정렬</mat-option>
<mat-option value="">캐쉬 정렬</mat-option>
<mat-option value="">콤프 정렬</mat-option>
<mat-option value="">쿠폰 정렬</mat-option>
<mat-option value="">입금 정렬</mat-option>
<mat-option value="">출금 정렬</mat-option>
<mat-option value="">차익 정렬</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
<mat-select placeholder="내림차순">
<mat-option value="">내림차순</mat-option>
<mat-option value="">오름차순</mat-option>
</mat-select>
</mat-form-field>
<!-- Search -->
<mat-form-field
fxFlex
class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
>
<mat-icon
class="icon-size-5"
matPrefix
[svgIcon]="'heroicons_solid:search'"
></mat-icon>
<input
matInput
[formControl]="searchInputControl"
[autocomplete]="'off'"
[placeholder]="'Search user'"
/>
</mat-form-field>
<!-- Add user button -->
<button
mat-flat-button
[color]="'primary'"
fxFlex
(click)="__createProduct()"
>
<mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
<span class="ml-2 mr-1">Search</span>
</button>
</div>
</div>
@ -36,29 +157,42 @@
<!-- Header -->
<div
class="inventory-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"
matSort
matSortDisableClear
>
<div></div>
<div class="hidden sm:block">등급</div>
<div class="hidden sm:block">아이디</div>
<div class="hidden sm:block">닉네임</div>
<div class="hidden sm:block">예금주</div>
<div class="hidden sm:block">레벨</div>
<div class="hidden sm:block">정산종류</div>
<div class="hidden sm:block">연락처</div>
<div class="hidden sm:block">캐쉬</div>
<div class="hidden sm:block">콤프</div>
<div class="hidden sm:block">충전금</div>
<div class="hidden sm:block">환전금</div>
<div class="hidden sm:block">수익금</div>
<div class="hidden sm:block">가입날짜</div>
<div class="hidden sm:block">최근접속일</div>
<div class="hidden sm:block">상태</div>
<div class="hidden sm:block">쪽지</div>
<div class="hidden sm:block">최상부</div>
<div class="hidden sm:block">직속</div>
<div class="hidden sm:block">회원수</div>
<div>
<mat-checkbox></mat-checkbox>
</div>
<div>
아이디
<hr style="margin: 7px 0px" />
닉네임
<hr style="margin: 7px 0px" />
상태
</div>
<div>
<!-- 상위
<hr style="margin: 7px 0px" /> -->
등급
<hr style="margin: 7px 0px" />
레벨
</div>
<div class="hidden sm:block">
예금주
<hr style="margin: 7px 0px" />
연락처
</div>
<div class="hidden md:block">정산종류</div>
<div class="hidden md:block">보유금</div>
<div class="hidden md:block">
충전금
<hr style="margin: 7px 0px" />
환전금
<hr style="margin: 7px 0px" />
수익금
</div>
<div class="hidden lg:block">로그</div>
<div class="hidden md:block">쪽지</div>
<div class="hidden lg:block">상부</div>
<div class="hidden lg:block">회원수</div>
</div>
<!-- Rows -->
<ng-container *ngIf="unconnecteds$ | async as unconnecteds">
@ -68,100 +202,67 @@
<div
class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
>
<!-- rank -->
<div class="hidden sm:block truncate">
{{ unconnected.rank }}
<div>
<mat-checkbox></mat-checkbox>
</div>
<!-- id -->
<div
class="hidden sm:block truncate"
(click)="viewUserDetail(unconnected.id)"
>
{{ unconnected.id }}
</div>
<!-- nickname -->
<div class="hidden sm:block truncate">
<div>
{{ unconnected.signinId }}
<hr style="margin: 7px 0px" />
{{ unconnected.nickname }}
</div>
<!-- accountHolder -->
<div class="hidden sm:block truncate">
{{ unconnected.accountHolder }}
</div>
<!-- level -->
<div class="hidden sm:block truncate">
LV.{{ unconnected.level }}
</div>
<!-- calculateType -->
<div class="hidden sm:block truncate">
{{ unconnected.calculateType }}
</div>
<!-- contact -->
<div class="hidden sm:block truncate">
{{ unconnected.contact }}
</div>
<!-- cash -->
<div class="hidden sm:block truncate">
캐쉬{{ unconnected.cash }}
</div>
<!-- comp -->
<div class="hidden sm:block truncate">
comp{{ unconnected.comp }}
</div>
<!-- charge -->
<div class="hidden sm:block truncate">
{{ unconnected.charge }}
</div>
<!-- exchange -->
<div class="hidden sm:block truncate">
{{ unconnected.exchange }}
</div>
<!-- revenue -->
<div class="hidden sm:block truncate">
{{ unconnected.revenue }}
</div>
<!-- accession -->
<div class="hidden sm:block truncate">
{{ unconnected.accession }}
</div>
<!-- final -->
<div class="hidden sm:block truncate">
{{ unconnected.final }}
</div>
<!-- state -->
<div class="hidden sm:block truncate">
<hr style="margin: 7px 0px" />
{{ unconnected.state }}
</div>
<!-- message -->
<div class="hidden sm:block truncate">
<button mat-flat-button [color]="'primary'">
<mat-icon svgIcon="heroicons_outline:mail"></mat-icon>
<div>
<!-- {{ unconnected.highRank }}
<hr style="margin: 7px 0px" /> -->
{{ unconnected.rank }}
<hr style="margin: 7px 0px" />
LV{{ unconnected.level }}
</div>
<div class="hidden sm:block">
{{ unconnected.accountHolder }}
<hr style="margin: 7px 0px" />
{{ unconnected.phoneNumber }}
</div>
<div class="hidden md:block">
{{ unconnected.calculateType }}
</div>
<div class="hidden md:block">
캐쉬{{ unconnected.ownCash }}
<hr style="margin: 7px 0px" />
콤프{{ unconnected.ownComp }}P
</div>
<div class="hidden md:block">
충전금{{ unconnected.ownCharge }}
<hr style="margin: 7px 0px" />
환전금{{ unconnected.ownExchange }}
<hr style="margin: 7px 0px" />
수익금{{ unconnected.balance }}
</div>
<div class="hidden lg:block">
가입{{ unconnected.registDate }}
<hr style="margin: 7px 0px" />
최종{{ unconnected.finalSigninDate }}
<hr style="margin: 7px 0px" />
</div>
<div class="hidden md:block">
<button
mat-flat-button
class="bet-mat-small-8"
[color]="'primary'"
>
쪽지
</button>
</div>
<!-- highest -->
<div class="hidden sm:block truncate">
{{ unconnected.highest }}
<div class="hidden lg:block">
최상부{{ unconnected.highstRank }}
<hr style="margin: 7px 0px" />
상부{{ unconnected.highRank }}
</div>
<!-- highRank -->
<div class="hidden sm:block truncate">
{{ unconnected.highRank }}
</div>
<!-- members -->
<div class="hidden sm:block truncate">
<div class="hidden lg:block">
{{ unconnected.members }}
</div>
<!-- management -->
</div>
</ng-container>
</ng-container>
@ -183,7 +284,7 @@
<div
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
>
There are no unconnected!
There are no unconnected user!
</div>
</ng-template>
</div>

View File

@ -42,18 +42,22 @@ import { Router } from '@angular/router';
/* language=SCSS */
`
.inventory-grid {
grid-template-columns: 60px auto 40px;
/* CB 아이디 등급 예금주 정산종류 */
grid-template-columns: 20px 140px 100px auto 100px;
@screen sm {
grid-template-columns: 60px auto 60px 72px;
/* CB 아이디 등급 예금주 정산종류 보유금 충전금 로그*/
grid-template-columns: 20px 140px 100px auto 100px 140px 140px 140px;
}
@screen md {
grid-template-columns: 60px 60px auto 112px 72px;
/* CB 아이디 등급 예금주 정산종류 보유금 충전금 로그 쪽지 */
grid-template-columns: 20px 140px 100px auto 100px 140px 140px 140px 100px;
}
@screen lg {
grid-template-columns: 60px 60px auto 112px 96px 96px 72px;
/* CB 아이디 등급 예금주 정산종류 보유금 충전금 로그 쪽지 상부 회원수 */
grid-template-columns: 20px 140px 100px auto 100px 140px 140px 140px 100px 100px 40px;
}
}
`,
@ -69,6 +73,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
unconnecteds$!: Observable<Unconnected[] | undefined>;
users$!: Observable<User[] | undefined>;
__isSearchOpened = false;
isLoading = false;
searchInputControl = new FormControl();
selectedUnconnected?: Unconnected;
@ -186,6 +191,14 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
*/
__toggleDetails(productId: string): void {}
/**
* toggle the search
* Used in 'bar'
*/
__onClickSearch(): void {
this.__isSearchOpened = !this.__isSearchOpened;
}
/**
* Track by function for ngFor loops
*

View File

@ -1,20 +1,21 @@
export interface Unconnected {
id: string;
signinId?: string;
nickname?: string;
highstRank?: string;
highRank?: string;
rank?: string;
level?: string;
calculateType: string;
calculateType?: string;
accountHolder?: string;
contact?: string;
cash?: number;
comp?: number;
accession?: string;
final?: string;
phoneNumber?: string;
ownCash?: number;
ownComp?: number;
registDate?: string;
finalSigninDate?: string;
state?: string;
charge?: number;
exchange?: number;
revenue?: number;
highest?: string;
ownCharge?: number;
ownExchange?: number;
balance?: number; // 차익, 수익
members?: number;
}

View File

@ -12,8 +12,7 @@ import { MatSortModule } from '@angular/material/sort';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatRadioModule } from '@angular/material/radio';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { TranslocoModule } from '@ngneat/transloco';
@ -41,8 +40,7 @@ import { unconnectedRoutes } from './unconnected.routing';
MatSelectModule,
MatTooltipModule,
MatGridListModule,
MatSlideToggleModule,
MatRadioModule,
MatCheckboxModule,
],
})
export class UnconnectedModule {}