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

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> </div>
<!-- Title --> <!-- Title -->
<div class="text-4xl font-extrabold tracking-tight">장기 미접속 회원</div> <div class="text-4xl font-extrabold tracking-tight">장기 미접속 회원</div>
<!-- Actions --> <!-- Actions -->
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<!-- button --> <!-- Search -->
<button mat-flat-button [color]="'primary'">15일</button> <!-- <div>
<button mat-flat-button [color]="'primary'">30일</button> <span>총회원수:<span style="color: red">38</span></span>&nbsp;&nbsp;
<button mat-flat-button [color]="'primary'">60일</button> <span>진행중금액:<span style="color: red">0</span></span>&nbsp;&nbsp;
<button mat-flat-button [color]="'primary'">90일</button> <span>총 보유머니:<span style="color: red">21,437,873</span></span
<button mat-flat-button [color]="'primary'">120일</button> >&nbsp;&nbsp;
<button mat-flat-button [color]="'primary'">가입후미접속</button> <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>
</div> </div>
@ -36,29 +157,42 @@
<!-- Header --> <!-- Header -->
<div <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" 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>
<div class="hidden sm:block">등급</div> <mat-checkbox></mat-checkbox>
<div class="hidden sm:block">아이디</div> </div>
<div class="hidden sm:block">닉네임</div> <div>
<div class="hidden sm:block">예금주</div> 아이디
<div class="hidden sm:block">레벨</div> <hr style="margin: 7px 0px" />
<div class="hidden sm:block">정산종류</div> 닉네임
<div class="hidden sm:block">연락처</div> <hr style="margin: 7px 0px" />
<div class="hidden sm:block">캐쉬</div> 상태
<div class="hidden sm:block">콤프</div> </div>
<div class="hidden sm:block">충전금</div> <div>
<div class="hidden sm:block">환전금</div> <!-- 상위
<div class="hidden sm:block">수익금</div> <hr style="margin: 7px 0px" /> -->
<div class="hidden sm:block">가입날짜</div> 등급
<div class="hidden sm:block">최근접속일</div> <hr style="margin: 7px 0px" />
<div class="hidden sm:block">상태</div> 레벨
<div class="hidden sm:block">쪽지</div> </div>
<div class="hidden sm:block">최상부</div> <div class="hidden sm:block">
<div class="hidden sm:block">직속</div> 예금주
<div class="hidden sm:block">회원수</div> <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> </div>
<!-- Rows --> <!-- Rows -->
<ng-container *ngIf="unconnecteds$ | async as unconnecteds"> <ng-container *ngIf="unconnecteds$ | async as unconnecteds">
@ -68,100 +202,67 @@
<div <div
class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b" class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
> >
<!-- rank --> <div>
<div class="hidden sm:block truncate"> <mat-checkbox></mat-checkbox>
{{ unconnected.rank }}
</div> </div>
<!-- id --> <div>
{{ unconnected.signinId }}
<div <hr style="margin: 7px 0px" />
class="hidden sm:block truncate"
(click)="viewUserDetail(unconnected.id)"
>
{{ unconnected.id }}
</div>
<!-- nickname -->
<div class="hidden sm:block truncate">
{{ unconnected.nickname }} {{ unconnected.nickname }}
</div> <hr style="margin: 7px 0px" />
<!-- 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">
{{ unconnected.state }} {{ unconnected.state }}
</div> </div>
<div>
<!-- message --> <!-- {{ unconnected.highRank }}
<div class="hidden sm:block truncate"> <hr style="margin: 7px 0px" /> -->
<button mat-flat-button [color]="'primary'"> {{ unconnected.rank }}
<mat-icon svgIcon="heroicons_outline:mail"></mat-icon> <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> </button>
</div> </div>
<div class="hidden lg:block">
<!-- highest --> 최상부{{ unconnected.highstRank }}
<div class="hidden sm:block truncate"> <hr style="margin: 7px 0px" />
{{ unconnected.highest }} 상부{{ unconnected.highRank }}
</div> </div>
<div class="hidden lg:block">
<!-- highRank -->
<div class="hidden sm:block truncate">
{{ unconnected.highRank }}
</div>
<!-- members -->
<div class="hidden sm:block truncate">
{{ unconnected.members }} {{ unconnected.members }}
</div> </div>
<!-- management -->
</div> </div>
</ng-container> </ng-container>
</ng-container> </ng-container>
@ -183,7 +284,7 @@
<div <div
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center" 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> </div>
</ng-template> </ng-template>
</div> </div>

View File

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

View File

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

View File

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