추천코드등록 화면 수정
This commit is contained in:
Park Byung Eun
parent
6d6f38c777
commit
fb36414fa0
@ -1,323 +1,290 @@
|
|||||||
<div
|
<div class="flex flex-col flex-auto min-w-0">
|
||||||
class="sm:absolute sm:inset-0 flex flex-col flex-auto min-w-0 sm:overflow-hidden bg-card dark:bg-transparent"
|
<div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
|
||||||
>
|
<div class="w-full max-w-screen-xl mx-auto">
|
||||||
<!-- Header -->
|
<div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
|
||||||
<div
|
<!-- Budget distribution -->
|
||||||
class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b"
|
|
||||||
>
|
|
||||||
<!-- Loader -->
|
|
||||||
<div class="absolute inset-x-0 bottom-0" *ngIf="isLoading">
|
|
||||||
<mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
|
|
||||||
</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 mat-icon-button (click)="__onClickSearch1()">
|
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Search -->
|
|
||||||
<div
|
|
||||||
*ngIf="__isSearchOpened1"
|
|
||||||
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="">검색어</mat-option>
|
|
||||||
<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
|
|
||||||
fxFlex
|
|
||||||
mat-flat-button
|
|
||||||
style="position: fixed; margin-top: 4px"
|
|
||||||
[color]="'primary'"
|
|
||||||
(click)="__createProduct()"
|
|
||||||
>
|
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
|
|
||||||
<span class="ml-2 mr-1">Search</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Main -->
|
|
||||||
<div class="flex flex-auto overflow-hidden">
|
|
||||||
<!-- Products list -->
|
|
||||||
<div
|
|
||||||
class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
|
|
||||||
>
|
|
||||||
<ng-container
|
|
||||||
*ngIf="partnerRecommendations$ | async as partnerRecommendations"
|
|
||||||
>
|
|
||||||
<ng-container
|
|
||||||
*ngIf="
|
|
||||||
partnerRecommendations.length > 0;
|
|
||||||
else noPartnerRecommendation
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="grid">
|
|
||||||
<!-- Header -->
|
|
||||||
<div
|
|
||||||
class="partner-recommendation-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>
|
|
||||||
<div>상부</div>
|
|
||||||
<div>
|
|
||||||
아이디
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
닉네임
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
상태
|
|
||||||
</div>
|
|
||||||
<div>등급</div>
|
|
||||||
<div class="hidden md:block">계좌정보</div>
|
|
||||||
<div class="hidden sm:block">
|
|
||||||
머니
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
콤프
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:block">사이트</div>
|
|
||||||
</div>
|
|
||||||
<!-- Rows -->
|
|
||||||
<ng-container
|
|
||||||
*ngIf="partnerRecommendations$ | async as partnerRecommendations"
|
|
||||||
>
|
|
||||||
<ng-container
|
|
||||||
*ngFor="
|
|
||||||
let partnerRecommendation of partnerRecommendations;
|
|
||||||
trackBy: __trackByFn
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="partner-recommendation-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<mat-checkbox></mat-checkbox>
|
|
||||||
</div>
|
|
||||||
<div>{{ partnerRecommendation.highRank }}</div>
|
|
||||||
<div>
|
|
||||||
{{ partnerRecommendation.signinId }}
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
{{ partnerRecommendation.nickname }}
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
{{ partnerRecommendation.state }}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{{ partnerRecommendation.rank }}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{{ partnerRecommendation.bankName }}
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
{{ partnerRecommendation.accountHolder }}
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
{{ partnerRecommendation.accountNumber }}
|
|
||||||
</div>
|
|
||||||
<div class="hidden sm:block">
|
|
||||||
{{ partnerRecommendation.holdingMoney }}
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
{{ partnerRecommendation.ownComp }}
|
|
||||||
</div>
|
|
||||||
<div class="hidden lg:block">
|
|
||||||
{{ partnerRecommendation.siteAddress }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
|
||||||
</ng-container>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
|
|
||||||
추천인으로 추가
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<mat-paginator
|
|
||||||
class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
|
|
||||||
[ngClass]="{ 'pointer-events-none': isLoading }"
|
|
||||||
[length]="pagination?.length"
|
|
||||||
[pageIndex]="pagination?.page"
|
|
||||||
[pageSize]="pagination?.size"
|
|
||||||
[pageSizeOptions]="[5, 10, 25, 100]"
|
|
||||||
[showFirstLastButtons]="true"
|
|
||||||
></mat-paginator>
|
|
||||||
</ng-container>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-template #noPartnerRecommendation>
|
|
||||||
<div
|
<div
|
||||||
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
|
class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
|
||||||
>
|
>
|
||||||
There are no data!
|
<div class="text-lg font-medium tracking-tight leading-6 truncate">
|
||||||
</div>
|
추천코드등록
|
||||||
</ng-template>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Actions -->
|
|
||||||
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
|
|
||||||
<button mat-icon-button (click)="__onClickSearch2()">
|
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Search -->
|
|
||||||
<div
|
|
||||||
*ngIf="__isSearchOpened2"
|
|
||||||
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="">매장아이디</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
|
|
||||||
fxFlex
|
|
||||||
mat-flat-button
|
|
||||||
style="position: fixed; margin-top: 4px"
|
|
||||||
[color]="'primary'"
|
|
||||||
(click)="__createProduct()"
|
|
||||||
>
|
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
|
|
||||||
<span class="ml-2 mr-1">Search</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Products list -->
|
|
||||||
<div
|
|
||||||
class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
|
|
||||||
>
|
|
||||||
<ng-container
|
|
||||||
*ngIf="partnerRecommendations$ | async as partnerRecommendations"
|
|
||||||
>
|
|
||||||
<ng-container
|
|
||||||
*ngIf="partnerRecommendations.length > 0; else noPartnerRecommendation"
|
|
||||||
>
|
|
||||||
<div class="grid">
|
|
||||||
<!-- Header -->
|
|
||||||
<div
|
|
||||||
class="partner-recommendation-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>
|
|
||||||
<div>상부</div>
|
|
||||||
<div>
|
|
||||||
아이디
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
닉네임
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
등급
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
상태
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:block">사용여부</div>
|
|
||||||
<div class="hidden sm:block">회원수</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- Rows -->
|
|
||||||
<ng-container
|
<ng-container
|
||||||
*ngIf="partnerRecommendations$ | async as partnerRecommendations"
|
*ngIf="
|
||||||
|
registPartnerStoreDataSource.data.length > 0;
|
||||||
|
else noRegistPartnerRecommendation
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<ng-container
|
<div class="flex flex-col flex-auto mt-2 overflow-x-auto">
|
||||||
*ngFor="
|
<table
|
||||||
let partnerRecommendation of partnerRecommendations;
|
class="min-w-240 overflow-y-visible"
|
||||||
trackBy: __trackByFn
|
mat-table
|
||||||
"
|
[dataSource]="registPartnerStoreDataSource"
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="partner-recommendation-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
|
|
||||||
>
|
>
|
||||||
<div>
|
<!-- Checkbox Column -->
|
||||||
<mat-checkbox></mat-checkbox>
|
<ng-container matColumnDef="select">
|
||||||
</div>
|
<th mat-header-cell *matHeaderCellDef>
|
||||||
<div>{{ partnerRecommendation.highRank }}</div>
|
<mat-checkbox
|
||||||
<div>
|
(change)="$event ? __toggleAllRows() : null"
|
||||||
{{ partnerRecommendation.signinId }}
|
[checked]="selection.hasValue() && __isAllSelected()"
|
||||||
<hr style="margin: 7px 0px" />
|
[indeterminate]="
|
||||||
{{ partnerRecommendation.nickname }}
|
selection.hasValue() && !__isAllSelected()
|
||||||
</div>
|
"
|
||||||
<div>
|
[aria-label]="__checkboxLabel()"
|
||||||
{{ partnerRecommendation.rank }}
|
>
|
||||||
<hr style="margin: 7px 0px" />
|
</mat-checkbox>
|
||||||
{{ partnerRecommendation.state }}
|
</th>
|
||||||
</div>
|
<td mat-cell *matCellDef="let row">
|
||||||
<div>{{ partnerRecommendation.useOrNot }}</div>
|
<mat-checkbox
|
||||||
<div class="hidden sm:block">
|
(click)="$event.stopPropagation()"
|
||||||
{{ partnerRecommendation.memberCount }}
|
(change)="$event ? selection.toggle(row) : null"
|
||||||
</div>
|
[checked]="selection.isSelected(row)"
|
||||||
<div class="hidden lg:block">
|
[aria-label]="__checkboxLabel(row)"
|
||||||
{{ partnerRecommendation.siteAddress }}
|
>
|
||||||
</div>
|
</mat-checkbox>
|
||||||
</div>
|
</td>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Total -->
|
||||||
|
<ng-container matColumnDef="referrerMember">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>상위</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
<span class="font-medium text-right">
|
||||||
|
{{ __getRefererMember(info) }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Expenses amount -->
|
||||||
|
<ng-container matColumnDef="memberClass">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>등급</th>
|
||||||
|
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{ info.getMemberClass()?.getName() }}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="username">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>아이디</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{ info.getUsername() }}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Expenses amount -->
|
||||||
|
<ng-container matColumnDef="nickname">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>닉네임</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{ info.getNickname() }}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Expenses amount -->
|
||||||
|
<ng-container matColumnDef="amountMoney">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>머니</th>
|
||||||
|
<td mat-cell *matCellDef="let info">1000원</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="comp">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>콤프</th>
|
||||||
|
<td mat-cell *matCellDef="let info">0P</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="bankInfo">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>계좌정보</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
<span>{{ info.getBankAccount() }}</span>
|
||||||
|
<span>{{ info.getBankAccount() }}</span>
|
||||||
|
<span>{{ info.getBankAccount() }}</span>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="state">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>상태</th>
|
||||||
|
<td mat-cell *matCellDef="let info">정상</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="site">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>사이트</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{ info.getSite().getUrl() }}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container matColumnDef="stroeTableFooter">
|
||||||
|
<td
|
||||||
|
class="py-6 px-0 border-0"
|
||||||
|
mat-footer-cell
|
||||||
|
*matFooterCellDef
|
||||||
|
colspan="10"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<button mat-stroked-button>추천인으로 추가</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr
|
||||||
|
mat-header-row
|
||||||
|
*matHeaderRowDef="registPartnerStoreTableColumns"
|
||||||
|
></tr>
|
||||||
|
<tr
|
||||||
|
mat-row
|
||||||
|
*matRowDef="let row; columns: registPartnerStoreTableColumns"
|
||||||
|
></tr>
|
||||||
|
<tr
|
||||||
|
class="h-16 border-0"
|
||||||
|
mat-footer-row
|
||||||
|
*matFooterRowDef="['stroeTableFooter']"
|
||||||
|
></tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<mat-paginator
|
||||||
|
[pageSizeOptions]="[5, 10, 25, 100]"
|
||||||
|
aria-label="Select page of users"
|
||||||
|
></mat-paginator>
|
||||||
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
|
|
||||||
추천인 삭제
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<mat-paginator
|
<ng-template #noRegistPartnerRecommendation>
|
||||||
class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
|
<div
|
||||||
[ngClass]="{ 'pointer-events-none': isLoading }"
|
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
|
||||||
[length]="pagination?.length"
|
>
|
||||||
[pageIndex]="pagination?.page"
|
There are no data!
|
||||||
[pageSize]="pagination?.size"
|
</div>
|
||||||
[pageSizeOptions]="[5, 10, 25, 100]"
|
</ng-template>
|
||||||
[showFirstLastButtons]="true"
|
</div>
|
||||||
></mat-paginator>
|
<!-- Budget details -->
|
||||||
</ng-container>
|
<div
|
||||||
</ng-container>
|
class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
|
||||||
|
>
|
||||||
|
<div class="text-lg font-medium tracking-tight leading-6 truncate">
|
||||||
|
추천코드삭제
|
||||||
|
</div>
|
||||||
|
<ng-container
|
||||||
|
*ngIf="
|
||||||
|
removePartnerStoreDataSource.data.length > 0;
|
||||||
|
else noRemovePartnerRecommendation
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col flex-auto">
|
||||||
|
<table
|
||||||
|
class="min-w-240 overflow-y-visible"
|
||||||
|
mat-table
|
||||||
|
[dataSource]="removePartnerStoreDataSource"
|
||||||
|
>
|
||||||
|
<!-- Checkbox Column -->
|
||||||
|
<ng-container matColumnDef="select">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>
|
||||||
|
<mat-checkbox
|
||||||
|
(change)="$event ? __toggleAllRows() : null"
|
||||||
|
[checked]="selection.hasValue() && __isAllSelected()"
|
||||||
|
[indeterminate]="
|
||||||
|
selection.hasValue() && !__isAllSelected()
|
||||||
|
"
|
||||||
|
[aria-label]="__checkboxLabel()"
|
||||||
|
>
|
||||||
|
</mat-checkbox>
|
||||||
|
</th>
|
||||||
|
<td mat-cell *matCellDef="let row">
|
||||||
|
<mat-checkbox
|
||||||
|
(click)="$event.stopPropagation()"
|
||||||
|
(change)="$event ? selection.toggle(row) : null"
|
||||||
|
[checked]="selection.isSelected(row)"
|
||||||
|
[aria-label]="__checkboxLabel(row)"
|
||||||
|
>
|
||||||
|
</mat-checkbox>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
<!-- Total -->
|
||||||
|
<ng-container matColumnDef="referrerMember">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>상위</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
<span class="font-medium text-right">
|
||||||
|
{{ __getRefererMember(info) }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
<ng-template #noPartnerRecommendation>
|
<!-- Expenses amount -->
|
||||||
<div
|
<ng-container matColumnDef="memberClass">
|
||||||
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
|
<th mat-header-cell *matHeaderCellDef>등급</th>
|
||||||
>
|
|
||||||
There are no data!
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{ info.getMemberClass()?.getName() }}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="username">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>아이디</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{ info.getUsername() }}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Expenses amount -->
|
||||||
|
<ng-container matColumnDef="nickname">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>닉네임</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{ info.getNickname() }}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Expenses amount -->
|
||||||
|
<ng-container matColumnDef="isUse">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>사용여부</th>
|
||||||
|
<td mat-cell *matCellDef="let info">Y</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Expenses amount -->
|
||||||
|
<ng-container matColumnDef="memberCount">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>회원수</th>
|
||||||
|
<td mat-cell *matCellDef="let info">1</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="stroeTableFooter">
|
||||||
|
<td
|
||||||
|
class="py-6 px-0 border-0"
|
||||||
|
mat-footer-cell
|
||||||
|
*matFooterCellDef
|
||||||
|
colspan="10"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<button mat-stroked-button>추천인삭제</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr
|
||||||
|
mat-header-row
|
||||||
|
*matHeaderRowDef="removePartnerStoreTableColumns"
|
||||||
|
></tr>
|
||||||
|
<tr
|
||||||
|
mat-row
|
||||||
|
*matRowDef="let row; columns: removePartnerStoreTableColumns"
|
||||||
|
></tr>
|
||||||
|
|
||||||
|
<tr
|
||||||
|
class="h-16 border-0"
|
||||||
|
mat-footer-row
|
||||||
|
*matFooterRowDef="['stroeTableFooter']"
|
||||||
|
></tr>
|
||||||
|
</table>
|
||||||
|
<mat-paginator
|
||||||
|
[pageSizeOptions]="[5, 10, 25, 100]"
|
||||||
|
aria-label="Select page of users"
|
||||||
|
></mat-paginator>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-template #noRemovePartnerRecommendation>
|
||||||
|
<div
|
||||||
|
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
|
||||||
|
>
|
||||||
|
There are no data!
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ng-template>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -33,10 +33,14 @@ import { PartnerRecommendation as PartnerRecommendation } from '../models/partne
|
|||||||
import { PartnerRecommendationPagination as PartnerRecommendationPagination } from '../models/partner-recommendation-pagination';
|
import { PartnerRecommendationPagination as PartnerRecommendationPagination } from '../models/partner-recommendation-pagination';
|
||||||
import { PartnerRecommendationService as PartnerRecommendationService } from '../services/partner-recommendation.service';
|
import { PartnerRecommendationService as PartnerRecommendationService } from '../services/partner-recommendation.service';
|
||||||
|
|
||||||
import { Router } from '@angular/router';
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
|
|
||||||
import { MatDialog } from '@angular/material/dialog';
|
import { MatDialog } from '@angular/material/dialog';
|
||||||
import { RegistComposeComponent } from '../compose/regist-compose.component';
|
import { RegistComposeComponent } from '../compose/regist-compose.component';
|
||||||
|
import { MatTableDataSource } from '@angular/material/table';
|
||||||
|
import { MemberModel } from 'app/modules/proto/models/member_pb';
|
||||||
|
import { ListMembersResponse } from 'app/modules/proto/c2se/member_pb';
|
||||||
|
import { SelectionModel } from '@angular/cdk/collections';
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'partner-recommendation-list',
|
selector: 'partner-recommendation-list',
|
||||||
templateUrl: './list.component.html',
|
templateUrl: './list.component.html',
|
||||||
@ -72,15 +76,45 @@ 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;
|
||||||
|
|
||||||
partnerRecommendations$!: Observable<PartnerRecommendation[] | undefined>;
|
registPartnerStoreDataSource: MatTableDataSource<MemberModel> =
|
||||||
|
new MatTableDataSource();
|
||||||
|
removePartnerStoreDataSource: MatTableDataSource<MemberModel> =
|
||||||
|
new MatTableDataSource();
|
||||||
|
|
||||||
|
registPartnerStoreTableColumns: string[] = [
|
||||||
|
'select',
|
||||||
|
'referrerMember',
|
||||||
|
'memberClass',
|
||||||
|
'username',
|
||||||
|
'nickname',
|
||||||
|
'amountMoney',
|
||||||
|
'comp',
|
||||||
|
'bankInfo',
|
||||||
|
'state',
|
||||||
|
'site',
|
||||||
|
];
|
||||||
|
|
||||||
|
removePartnerStoreTableColumns: string[] = [
|
||||||
|
'select',
|
||||||
|
'referrerMember',
|
||||||
|
'memberClass',
|
||||||
|
'username',
|
||||||
|
'nickname',
|
||||||
|
'isUse',
|
||||||
|
'memberCount',
|
||||||
|
];
|
||||||
|
|
||||||
__isSearchOpened1 = false;
|
__isSearchOpened1 = false;
|
||||||
__isSearchOpened2 = false;
|
__isSearchOpened2 = false;
|
||||||
|
listMembers!: MemberModel[];
|
||||||
|
|
||||||
isLoading = false;
|
isLoading = false;
|
||||||
searchInputControl = new FormControl();
|
searchInputControl = new FormControl();
|
||||||
selectedPartnerRecommendation?: PartnerRecommendation;
|
selectedPartnerRecommendation?: PartnerRecommendation;
|
||||||
pagination?: PartnerRecommendationPagination;
|
pagination?: PartnerRecommendationPagination;
|
||||||
|
|
||||||
|
selection = new SelectionModel<MemberModel>(true, []);
|
||||||
|
|
||||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -88,6 +122,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
private _changeDetectorRef: ChangeDetectorRef,
|
private _changeDetectorRef: ChangeDetectorRef,
|
||||||
|
private _activatedRoute: ActivatedRoute,
|
||||||
private _fuseConfirmationService: FuseConfirmationService,
|
private _fuseConfirmationService: FuseConfirmationService,
|
||||||
private _formBuilder: FormBuilder,
|
private _formBuilder: FormBuilder,
|
||||||
private _partnerRecommendationService: PartnerRecommendationService,
|
private _partnerRecommendationService: PartnerRecommendationService,
|
||||||
@ -103,27 +138,40 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||||||
* On init
|
* On init
|
||||||
*/
|
*/
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
// Get the pagination
|
|
||||||
this._partnerRecommendationService.pagination$
|
|
||||||
.pipe(takeUntil(this._unsubscribeAll))
|
|
||||||
.subscribe((pagination: PartnerRecommendationPagination | undefined) => {
|
|
||||||
// Update the pagination
|
|
||||||
this.pagination = pagination;
|
|
||||||
|
|
||||||
// Mark for check
|
|
||||||
this._changeDetectorRef.markForCheck();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Get the products
|
// Get the products
|
||||||
this.partnerRecommendations$ =
|
this._activatedRoute.data.subscribe((data) => {
|
||||||
this._partnerRecommendationService.partnerRecommendations$;
|
let listMemberResult: ListMembersResponse.Result =
|
||||||
|
data['listPartnerStore'];
|
||||||
|
|
||||||
|
this.listMembers = listMemberResult.getMembersList();
|
||||||
|
|
||||||
|
this.registPartnerStoreDataSource.data = listMemberResult
|
||||||
|
.getMembersList()
|
||||||
|
.filter(
|
||||||
|
(v: MemberModel) =>
|
||||||
|
v.getMemberClass()?.getId() ===
|
||||||
|
'e11cac11-3825-4f4e-9cd5-39367f23f973'
|
||||||
|
);
|
||||||
|
this.removePartnerStoreDataSource.data = listMemberResult
|
||||||
|
.getMembersList()
|
||||||
|
.filter(
|
||||||
|
(v: MemberModel) =>
|
||||||
|
v.getMemberClass()?.getId() ===
|
||||||
|
'e11cac11-3825-4f4e-9cd5-39367f23f973'
|
||||||
|
);
|
||||||
|
|
||||||
|
/* console.log('dddd', listMemberResult.getMembersList()); */
|
||||||
|
|
||||||
|
// Mark for check
|
||||||
|
this._changeDetectorRef.markForCheck();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* After view init
|
* After view init
|
||||||
*/
|
*/
|
||||||
ngAfterViewInit(): void {
|
ngAfterViewInit(): void {
|
||||||
if (this._sort && this._paginator) {
|
/* if (this._sort && this._paginator) {
|
||||||
// Set the initial sort
|
// Set the initial sort
|
||||||
this._sort.sort({
|
this._sort.sort({
|
||||||
id: 'signinId',
|
id: 'signinId',
|
||||||
@ -159,7 +207,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||||||
})
|
})
|
||||||
)
|
)
|
||||||
.subscribe();
|
.subscribe();
|
||||||
}
|
} */
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -183,6 +231,31 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||||||
// @ Private methods
|
// @ Private methods
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/** Selects all rows if they are not all selected; otherwise clear selection. */
|
||||||
|
__toggleAllRows() {
|
||||||
|
if (this.__isAllSelected()) {
|
||||||
|
this.selection.clear();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.selection.select(...this.registPartnerStoreDataSource.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
__isAllSelected() {
|
||||||
|
const numSelected = this.selection.selected.length;
|
||||||
|
const numRows = this.registPartnerStoreDataSource.data.length;
|
||||||
|
return numSelected === numRows;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** The label for the checkbox on the passed row */
|
||||||
|
__checkboxLabel(row?: MemberModel): string {
|
||||||
|
if (!row) {
|
||||||
|
return `${this.__isAllSelected() ? 'deselect' : 'select'} all`;
|
||||||
|
}
|
||||||
|
return `${
|
||||||
|
this.selection.isSelected(row) ? 'deselect' : 'select'
|
||||||
|
} row ${row.getUsername()}`;
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* Create product
|
* Create product
|
||||||
*/
|
*/
|
||||||
@ -223,4 +296,14 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||||||
console.log('Compose dialog was closed!');
|
console.log('Compose dialog was closed!');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
__getRefererMember(member: MemberModel): string {
|
||||||
|
console.log(member.getReferrerMember()?.getUsername());
|
||||||
|
|
||||||
|
const name = member.getReferrerMember()?.getUsername();
|
||||||
|
return name ? name : '없음';
|
||||||
|
/* const findMember = this.listMembers.find((m) => m.getId() === id); */
|
||||||
|
|
||||||
|
/* return !!findMember ? findMember : undefined; */
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,6 +15,7 @@ import { MatGridListModule } from '@angular/material/grid-list';
|
|||||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||||
import { MatRadioModule } from '@angular/material/radio';
|
import { MatRadioModule } from '@angular/material/radio';
|
||||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||||
|
import { MatTableModule } from '@angular/material/table';
|
||||||
|
|
||||||
import { TranslocoModule } from '@ngneat/transloco';
|
import { TranslocoModule } from '@ngneat/transloco';
|
||||||
|
|
||||||
@ -46,6 +47,7 @@ import { partnerRecommendationRoutes } from './partner-recommendation.routing';
|
|||||||
MatSlideToggleModule,
|
MatSlideToggleModule,
|
||||||
MatRadioModule,
|
MatRadioModule,
|
||||||
MatCheckboxModule,
|
MatCheckboxModule,
|
||||||
|
MatTableModule,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class PartnerRecommendationModule {}
|
export class PartnerRecommendationModule {}
|
||||||
|
|||||||
@ -2,7 +2,10 @@ import { Route } from '@angular/router';
|
|||||||
|
|
||||||
import { ListComponent } from './components/list.component';
|
import { ListComponent } from './components/list.component';
|
||||||
|
|
||||||
import { PartnerRecommendationsResolver } from './resolvers/partner-recommendation.resolver';
|
import {
|
||||||
|
ListPartnerStoreResolver,
|
||||||
|
PartnerRecommendationsResolver,
|
||||||
|
} from './resolvers/partner-recommendation.resolver';
|
||||||
|
|
||||||
export const partnerRecommendationRoutes: Route[] = [
|
export const partnerRecommendationRoutes: Route[] = [
|
||||||
// {
|
// {
|
||||||
@ -14,7 +17,7 @@ export const partnerRecommendationRoutes: Route[] = [
|
|||||||
path: '',
|
path: '',
|
||||||
component: ListComponent,
|
component: ListComponent,
|
||||||
resolve: {
|
resolve: {
|
||||||
PartnerRecommendations: PartnerRecommendationsResolver,
|
listPartnerStore: ListPartnerStoreResolver,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
@ -5,6 +5,11 @@ import {
|
|||||||
Router,
|
Router,
|
||||||
RouterStateSnapshot,
|
RouterStateSnapshot,
|
||||||
} from '@angular/router';
|
} from '@angular/router';
|
||||||
|
import { MemberService } from 'app/modules/polyglot/member/services/member.service';
|
||||||
|
import {
|
||||||
|
ListMembersRequest,
|
||||||
|
ListMembersResponse,
|
||||||
|
} from 'app/modules/proto/c2se/member_pb';
|
||||||
import { catchError, Observable, throwError } from 'rxjs';
|
import { catchError, Observable, throwError } from 'rxjs';
|
||||||
|
|
||||||
import { PartnerRecommendation } from '../models/partner-recommendation';
|
import { PartnerRecommendation } from '../models/partner-recommendation';
|
||||||
@ -89,3 +94,35 @@ export class PartnerRecommendationsResolver implements Resolve<any> {
|
|||||||
return this._partnerRecommendationService.getPartnerRecommendations();
|
return this._partnerRecommendationService.getPartnerRecommendations();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root',
|
||||||
|
})
|
||||||
|
export class ListPartnerStoreResolver implements Resolve<any> {
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*/
|
||||||
|
constructor(private _memberService: MemberService) {}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Public methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resolver
|
||||||
|
*
|
||||||
|
* @param route
|
||||||
|
* @param state
|
||||||
|
*/
|
||||||
|
resolve(
|
||||||
|
route: ActivatedRouteSnapshot,
|
||||||
|
state: RouterStateSnapshot
|
||||||
|
):
|
||||||
|
| Observable<ListMembersResponse.Result>
|
||||||
|
| Promise<ListMembersResponse.Result>
|
||||||
|
| ListMembersResponse.Result {
|
||||||
|
let req = new ListMembersRequest();
|
||||||
|
|
||||||
|
return this._memberService.listMembers(req);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user