도메인 설정 page 추가

This commit is contained in:
이담 정 2022-08-06 11:15:09 +00:00
parent 6fab831ef5
commit 8f57de6952
14 changed files with 641 additions and 0 deletions

View File

@ -354,6 +354,13 @@ export const appRoutes: Route[] = [
'app/modules/admin/settings/indexing/indexing.module'
).then((m: any) => m.IndexingModule),
},
{
path: 'domain',
loadChildren: () =>
import('app/modules/admin/settings/domain/domain.module').then(
(m: any) => m.DomainModule
),
},
],
},
{

View File

@ -0,0 +1,73 @@
import { Injectable } from '@angular/core';
import { assign, cloneDeep } from 'lodash-es';
import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
import { domainSetting as domainSettingData } from './data';
@Injectable({
providedIn: 'root',
})
export class DomainSettingMockApi {
private _domainSetting: any = domainSettingData;
/**
* Constructor
*/
constructor(private _fuseMockApiService: FuseMockApiService) {
// Register Mock API handlers
this.registerHandlers();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Register Mock API handlers
*/
registerHandlers(): void {
// -----------------------------------------------------------------------------------------------------
// @ BasicSetting - GET
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onGet('api/apps/settings/domain', 300)
.reply(({ request }) => {
// Clone the deposits
let domainSetting: any | null = cloneDeep(this._domainSetting);
// Return the response
return [
200,
{
domainSetting,
},
];
});
// -----------------------------------------------------------------------------------------------------
// @ BasicSetting - PATCH
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onPatch('api/apps/settings/domain')
.reply(({ request }) => {
// Get the id and deposit
const domainSetting = cloneDeep(request.body.domainSetting);
// Prepare the updated basicSetting
let updatedBasicSetting = null;
// Find the deposit and update it
// this._basicSetting.forEach((item, index, bs) => {
// if (item.id === id) {
// // Update the deposit
// basicSetting[index] = assign({}, basicSetting[index], deposit);
// // Store the updated deposit
// updatedDeposit = deposits[index];
// }
// });
// Return the response
return [200, domainSetting];
});
}
}

View File

@ -0,0 +1,52 @@
/* eslint-disable */
export const domainSetting = {
domain: [
{
idx: '4',
domain: 'nsky-8989.com',
designFolder: 'NEW-SKY',
siteName: '뉴스카이',
expiryDate: '2023-06-29',
periodOfUse: '328일',
memo: '',
},
{
idx: '3',
domain: 'nsky-3040',
designFolder: 'NEW-SKY',
siteName: '뉴스카이',
expiryDate: '2023-05-05',
periodOfUse: '273일',
memo: '미사용',
},
{
idx: '2',
domain: 'nsky-5858.com',
designFolder: 'NEW-SKY',
siteName: '뉴스카이',
expiryDate: '2023-05-05',
periodOfUse: '273일',
memo: '조치원라인',
},
{
idx: '1',
domain: 'nsky-9988.com',
designFolder: 'NEW-SKY',
siteName: '뉴스카이',
expiryDate: '2023-05-04',
periodOfUse: '272일',
memo: '',
},
],
bota: [
{
domain: '.',
designFolder: '.',
siteName: '.',
expiryDate: '.',
periodOfUse: '.',
memo: '.',
},
],
};

View File

@ -453,6 +453,13 @@ export const defaultNavigation: FuseNavigationItem[] = [
icon: 'heroicons_outline:cog',
link: '/settings/indexing',
},
{
id: 'settings.domain',
title: 'Domain-Setting',
type: 'basic',
icon: 'heroicons_outline:cog',
link: '/settings/domain',
},
],
},
];

View File

@ -49,6 +49,7 @@ import { EvoSettingMockApi } from './apps/settings/evo/api';
import { GameSettingMockApi } from './apps/settings/game/api';
import { LadderSettingMockApi } from './apps/settings/ladder/api';
import { IndexingSettingMockApi } from './apps/settings/indexing/api';
import { DomainSettingMockApi } from './apps/settings/domain/api';
import { ReportDailyMockApi } from './apps/report/daily/api';
import { ReportMonthlyMockApi } from './apps/report/monthly/api';
import { ReportDailyPartnerMockApi } from './apps/report/daily-partner/api';
@ -122,6 +123,7 @@ export const mockApiServices = [
GameSettingMockApi,
LadderSettingMockApi,
IndexingSettingMockApi,
DomainSettingMockApi,
ReportDailyMockApi,
ReportMonthlyMockApi,
ReportDailyPartnerMockApi,

View File

@ -0,0 +1,3 @@
import { ListComponent } from './list.component';
export const COMPONENTS = [ListComponent];

View File

@ -0,0 +1,169 @@
<div class="flex flex-col flex-auto min-w-0">
<div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
<div class="w-full max-w-screen-xl mx-auto">
<div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
<!-- Budget distribution -->
<div
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>
<div class="flex flex-col flex-auto mt-2 overflow-x-auto">
<table
class="min-w-240 overflow-y-visible"
mat-table
[dataSource]="domainSettingDataSource"
>
<!-- Index -->
<ng-container matColumnDef="idx">
<th mat-header-cell *matHeaderCellDef>번호</th>
<td mat-cell *matCellDef="let info">
<span class="font-medium text-right">
{{ info.idx }}
</span>
</td>
</ng-container>
<!-- Domain -->
<ng-container matColumnDef="domain">
<th mat-header-cell *matHeaderCellDef>도메인</th>
<td mat-cell *matCellDef="let info">
<span class="font-medium text-right">
{{ info.domain }}
</span>
</td>
</ng-container>
<!-- Design folder -->
<ng-container matColumnDef="designFolder">
<th mat-header-cell *matHeaderCellDef>디자인 폴더</th>
<td mat-cell *matCellDef="let info">
<span class="font-medium text-right">
{{ info.designFolder }}
</span>
</td>
</ng-container>
<!-- Site name -->
<ng-container matColumnDef="siteName">
<th mat-header-cell *matHeaderCellDef>사이트명</th>
<td mat-cell *matCellDef="let info">
<span class="font-medium text-right">
{{ info.siteName }}
</span>
</td>
</ng-container>
<!-- Expiry date -->
<ng-container matColumnDef="expiryDate">
<th mat-header-cell *matHeaderCellDef>만료일</th>
<td mat-cell *matCellDef="let info">
<span class="font-medium text-right">
{{ info.expiryDate }}
</span>
</td>
</ng-container>
<!-- Period of use -->
<ng-container matColumnDef="periodOfUse">
<th mat-header-cell *matHeaderCellDef>남은 기간</th>
<td mat-cell *matCellDef="let info">
<span class="font-medium text-right">
{{ info.periodOfUse }}
</span>
</td>
</ng-container>
<!-- Memo -->
<ng-container matColumnDef="memo">
<th mat-header-cell *matHeaderCellDef>메모</th>
<td mat-cell *matCellDef="let info">
<mat-form-field class="">
<input id="memo" matInput value="{{ info.memo }}" />
</mat-form-field>
<button mat-flat-button [color]="'primary'">수정</button>
</td>
</ng-container>
<!-- Delete button -->
<ng-container matColumnDef="deleteBtn">
<th mat-header-cell *matHeaderCellDef>도메인 삭제</th>
<td mat-cell *matCellDef="let basicSetting">
<div class="hidden sm:block truncate">
<button mat-flat-button [color]="'primary'">
도메인삭제
</button>
</div>
</td>
</ng-container>
<tr
mat-header-row
*matHeaderRowDef="domainSettingTableColumns"
></tr>
<tr
mat-row
*matRowDef="let row; columns: domainSettingTableColumns"
></tr>
</table>
</div>
</div>
<!-- Budget details -->
<div
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>
<div>
<table class="min-w-240 overflow-y-visible">
<tr>
<th>도메인(필수)</th>
<th>디자인 폴더(옵션)</th>
<th>사이트명(옵션)</th>
<th>만료일(옵션)</th>
<th>메모(옵션)</th>
<th>도메인 등록</th>
</tr>
<tr>
<td>
<mat-form-field>
<input id="domain" matInput
/></mat-form-field>
</td>
<td>
<mat-form-field>
<input id="designFolder" matInput
/></mat-form-field>
</td>
<td>
<mat-form-field>
<input id="siteName" matInput />
</mat-form-field>
</td>
<td>
<mat-form-field>
<input id="expiryDate" matInput />
</mat-form-field>
</td>
<td>
<mat-form-field>
<input id="memo" matInput />
</mat-form-field>
</td>
<td>
<div class="hidden sm:block truncate">
<button mat-flat-button [color]="'primary'">
도메인등록
</button>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,164 @@
import {
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
OnDestroy,
OnInit,
ViewChild,
ViewEncapsulation,
} from '@angular/core';
import {
FormBuilder,
FormControl,
FormGroup,
Validators,
} from '@angular/forms';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import {
debounceTime,
map,
merge,
Observable,
Subject,
switchMap,
takeUntil,
} from 'rxjs';
import { fuseAnimations } from '@fuse/animations';
import { FuseConfirmationService } from '@fuse/services/confirmation';
import { DomainService } from '../services/domain.service';
import { MatSelectChange } from '@angular/material/select';
@Component({
selector: 'settings-domain-list',
templateUrl: './list.component.html',
styles: [
/* language=SCSS */
`
.settings-domain-grid {
grid-template-columns: 60px auto 40px;
@screen sm {
grid-template-columns: 60px auto 60px 72px;
}
@screen md {
grid-template-columns: 60px 60px auto 112px 72px;
}
@screen lg {
grid-template-columns: 60px 60px auto 112px 96px 96px 72px;
}
}
`,
],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
animations: fuseAnimations,
})
export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild(MatPaginator) private _paginator!: MatPaginator;
@ViewChild(MatSort) private _sort!: MatSort;
domainSettingTableColumns: string[] = [
'idx',
'domain',
'designFolder',
'siteName',
'expiryDate',
'periodOfUse',
'memo',
'deleteBtn',
];
domainRegistrationTableColumns: string[] = [
'domain',
'designFolder',
'siteName',
'expiryDate',
'memo',
'updateBtn',
];
domainSettingDataSource: MatTableDataSource<any> = new MatTableDataSource();
domainRegistrationDataSource: MatTableDataSource<any> =
new MatTableDataSource();
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseConfirmationService: FuseConfirmationService,
private _formBuilder: FormBuilder,
private _domainService: DomainService
) {}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void {
// Get the products
this._domainService.domainSetting$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((domainSetting: any | undefined) => {
this.domainSettingDataSource = domainSetting.domain;
this.domainRegistrationDataSource = domainSetting.bota;
// Mark for check
this._changeDetectorRef.markForCheck();
});
}
/**
* After view init
*/
ngAfterViewInit(): void {}
/**
* On destroy
*/
ngOnDestroy(): void {
// Unsubscribe from all subscriptions
this._unsubscribeAll.next(null);
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
// -----------------------------------------------------------------------------------------------------
// @ Private methods
// -----------------------------------------------------------------------------------------------------
/**
* Create product
*/
__createProduct(): void {}
/**
* Toggle product details
*
* @param productId
*/
__toggleDetails(productId: string): void {}
/**
* Track by function for ngFor loops
*
* @param index
* @param item
*/
__trackByFn(index: number, item: any): any {
return item.id || index;
}
}

View File

@ -0,0 +1,44 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatRippleModule } from '@angular/material/core';
import { MatSortModule } from '@angular/material/sort';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTableModule } from '@angular/material/table';
import { TranslocoModule } from '@ngneat/transloco';
import { SharedModule } from 'app/shared/shared.module';
import { COMPONENTS } from './components';
import { domainRoutes } from './domain.routing';
@NgModule({
declarations: [COMPONENTS],
imports: [
TranslocoModule,
SharedModule,
RouterModule.forChild(domainRoutes),
MatButtonModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatPaginatorModule,
MatProgressBarModule,
MatRippleModule,
MatSortModule,
MatSelectModule,
MatTooltipModule,
MatTableModule,
],
})
export class DomainModule {}

View File

@ -0,0 +1,15 @@
import { Route } from '@angular/router';
import { ListComponent } from './components/list.component';
import { DomainResolver } from './resolvers/domain.resolver';
export const domainRoutes: Route[] = [
{
path: '',
component: ListComponent,
resolve: {
domain: DomainResolver,
},
},
];

View File

@ -0,0 +1,39 @@
import { Injectable } from '@angular/core';
import {
ActivatedRouteSnapshot,
Resolve,
Router,
RouterStateSnapshot,
} from '@angular/router';
import { catchError, Observable, throwError } from 'rxjs';
import { DomainService } from '../services/domain.service';
@Injectable({
providedIn: 'root',
})
export class DomainResolver implements Resolve<any> {
/**
* Constructor
*/
constructor(private _domainService: DomainService) {}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Resolver
*
* @param route
* @param state
*/
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<{
domainSetting: any;
}> {
return this._domainService.getDomainSetting();
}
}

View File

@ -0,0 +1,58 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {
BehaviorSubject,
filter,
map,
Observable,
of,
switchMap,
take,
tap,
throwError,
} from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class DomainService {
// Private
private __domainSetting = new BehaviorSubject<any | undefined>(undefined);
/**
* Constructor
*/
constructor(private _httpClient: HttpClient) {}
// -----------------------------------------------------------------------------------------------------
// @ Accessors
// -----------------------------------------------------------------------------------------------------
/**
* Getter for game
*/
get domainSetting$(): Observable<any | undefined> {
return this.__domainSetting.asObservable();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Get powerballs
*
*
*/
getDomainSetting(): Observable<{
domainSetting: any;
}> {
return this._httpClient
.get<{ domainSetting: any }>('api/apps/settings/domain')
.pipe(
tap((response) => {
this.__domainSetting.next(response.domainSetting);
})
);
}
}

View File

@ -28,6 +28,13 @@
"Evolution": "Evolution",
"Slot": "Slot",
"Current User": "Current User",
"Basic-Setting": "Basic-Setting",
"Ladder-Setting": "Ladder-Setting",
"Game-Setting": "Game-Setting",
"Evo-Setting": "Evo-Setting",
"Branch-Setting": "Branch-Setting",
"Indexing-Setting": "Indexing-Setting",
"Domain-Setting": "Domain-Setting",
"Daily": "Daily",
"Monthly": "Monthly",
"Daily Partner": "Daily Partner",

View File

@ -34,6 +34,7 @@
"Evo-Setting": "에볼류션/보타 금액설정",
"Branch-Setting": "대본벌 계좌 설정",
"Indexing-Setting": "서버 인덱싱",
"Domain-Setting": "도메인 설정",
"Daily": "일일현황",
"Monthly": "월 현황",
"report-management": "보고서관리",