bet/beteran-backend-app-browser
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

팝업 등록, 수정, 상세 페이지 추가

Browse Source
This commit is contained in:
Park Byung Eun 2022-07-29 02:17:59 +00:00
parent 571d6cea3a
commit 7fd616df0c
11 changed files with 530 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/mock-api/apps/board/popup/api.ts
View File

@ -42,19 +42,19 @@ export class BoardPopupMockApi {
let popups: any[] | null = cloneDeep(this._popups); let popups: any[] | null = cloneDeep(this._popups);
// Sort the popups // Sort the popups
if (sort === 'sku' || sort === 'name' || sort === 'active') { // if (sort === 'sku' || sort === 'name' || sort === 'active') {
popups.sort((a, b) => { // popups.sort((a, b) => {
const fieldA = a[sort].toString().toUpperCase(); // const fieldA = a[sort].toString().toUpperCase();
const fieldB = b[sort].toString().toUpperCase(); // const fieldB = b[sort].toString().toUpperCase();
return order === 'asc' // return order === 'asc'
? fieldA.localeCompare(fieldB) // ? fieldA.localeCompare(fieldB)
: fieldB.localeCompare(fieldA); // : fieldB.localeCompare(fieldA);
}); // });
} else { // } else {
popups.sort((a, b) => // popups.sort((a, b) =>
order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort] // order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort]
); // );
} // }
// If search exists... // If search exists...
if (search) { if (search) {

62
src/app/mock-api/apps/board/popup/data.ts
View File

@ -2,6 +2,7 @@
export const popups = [ export const popups = [
{ {
id: '1',
index: 10, index: 10,
title: '악성배팅 제제 안내', title: '악성배팅 제제 안내',
widthSize: 500, widthSize: 500,
@ -10,5 +11,66 @@ export const popups = [
leftMargin: 100, leftMargin: 100,
site: 'all', site: 'all',
useOrNot: 'N', useOrNot: 'N',
content: 'test',
},
{
id: '2',
index: 10,
title: '악성배팅 제제 안내2',
widthSize: 500,
heightSize: 830,
topMargin: 100,
leftMargin: 100,
site: 'all',
useOrNot: 'N',
content: 'test',
},
{
id: '3',
index: 10,
title: '악성배팅 제제 안내3',
widthSize: 500,
heightSize: 830,
topMargin: 100,
leftMargin: 100,
site: 'all',
useOrNot: 'N',
content: 'test',
},
{
id: '4',
index: 10,
title: '악성배팅 제제 안내4',
widthSize: 500,
heightSize: 830,
topMargin: 100,
leftMargin: 100,
site: 'all',
useOrNot: 'N',
content: 'test',
},
{
id: '5',
index: 10,
title: '악성배팅 제제 안내5',
widthSize: 500,
heightSize: 830,
topMargin: 100,
leftMargin: 100,
site: 'all',
useOrNot: 'N',
content: 'test',
},
{
id: '6',
index: 10,
title: '악성배팅 제제 안내6',
widthSize: 500,
heightSize: 830,
topMargin: 100,
leftMargin: 100,
site: 'all',
useOrNot: 'N',
content: 'test',
}, },
]; ];

3
src/app/modules/admin/board/popup/components/index.ts
View File

@ -1,4 +1,5 @@
import { ListComponent } from './list.component'; import { ListComponent } from './list.component';
import { ViewComponent } from './view.component';
import { ReditComponent } from './redit.component'; import { ReditComponent } from './redit.component';
export const COMPONENTS = [ListComponent, ReditComponent]; export const COMPONENTS = [ListComponent, ViewComponent, ReditComponent];

18
src/app/modules/admin/board/popup/components/list.component.html
View File

@ -28,7 +28,12 @@
<!-- Title --> <!-- Title -->
<ng-container matColumnDef="title"> <ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef>제목</th> <th mat-header-cell *matHeaderCellDef>제목</th>
<td mat-cell *matCellDef="let info"> <td
mat-cell
*matCellDef="let info"
style="cursor: pointer"
(click)="__viewPopupDetail(info.id)"
>
<span class="font-medium text-right"> <span class="font-medium text-right">
{{ info.title }} {{ info.title }}
</span> </span>
@ -98,7 +103,12 @@
<th mat-header-cell *matHeaderCellDef>비고</th> <th mat-header-cell *matHeaderCellDef>비고</th>
<td mat-cell *matCellDef="let info"> <td mat-cell *matCellDef="let info">
<div class="flex items-center mt-2 py-3 space-x-4"> <div class="flex items-center mt-2 py-3 space-x-4">
<button class="flex-auto" type="button" mat-stroked-button> <button
class="flex-auto"
type="button"
mat-stroked-button
(click)="__modifyPopup(info.id)"
>
수정 수정
</button> </button>
<button class="flex-auto" type="button" mat-stroked-button> <button class="flex-auto" type="button" mat-stroked-button>
@ -117,7 +127,9 @@
colspan="9" colspan="9"
> >
<div lass="flex items-center mt-2 py-3 space-x-4"> <div lass="flex items-center mt-2 py-3 space-x-4">
<button mat-stroked-button>팝업창 만들기</button> <button mat-stroked-button (click)="__createPopup()">
팝업창 만들기
</button>
</div> </div>
</td> </td>
</ng-container> </ng-container>

18
src/app/modules/admin/board/popup/components/list.component.ts
View File

@ -179,14 +179,24 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
// @ Public methods // @ Public methods
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
viewUserDetail(id: string): void {
let url: string = 'member/user/' + id;
this.router.navigateByUrl(url);
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Private methods // @ Private methods
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
__viewPopupDetail(id: string): void {
let url: string = 'board/popup/view/' + id;
this.router.navigateByUrl(url);
}
__createPopup(): void {
let url: string = 'board/popup/redit/';
this.router.navigateByUrl(url);
}
__modifyPopup(id: string): void {
let url: string = 'board/popup/redit/' + id;
this.router.navigateByUrl(url);
}
/** /**
* Create product * Create product
*/ */

371
src/app/modules/admin/board/popup/components/redit.component.html
View File

@ -1,260 +1,127 @@
<div class="flex flex-col flex-auto min-w-0"> <div class="flex flex-col flex-auto min-w-0">
<!-- View mode -->
<ng-container *ngIf="!editMode">
<!-- Header -->
<div
class="relative w-full h-40 sm:h-16 mt-10 x-8 sm:px-12 bg-accent-100 dark:bg-accent-700"
>
<!-- Background -->
<!-- Close button -->
<div
class="flex items-center justify-end w-full max-w-3xl mx-auto pt-6"
></div>
</div>
<!-- Contact -->
<div
class="relative flex flex-col flex-auto items-center p-6 pt-0 sm:p-12 sm:pt-0"
>
<div class="w-full max-w-3xl">
<!-- Avatar and actions -->
<div class="flex flex-auto items-end -mt-16">
<!-- Actions -->
<div class="flex items-center ml-auto mb-1">
<button mat-stroked-button (click)="toggleEditMode(true)">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:pencil-alt'"
></mat-icon>
<span class="ml-2">수정</span>
</button>
<button mat-stroked-button (click)="toggleEditMode(true)">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:pencil-alt'"
></mat-icon>
<span class="ml-2">삭제</span>
</button>
</div>
</div>
<div class="flex flex-col mt-4 pt-6 border-t space-y-8">
<!-- Title -->
<ng-container *ngIf="contact.title">
<div class="flex sm:items-center">
<!-- <mat-icon [svgIcon]="'heroicons_outline:briefcase'"></mat-icon> -->
<div class="ml-6 leading-6">사이트선택</div>
<div class="ml-6 leading-6">{{ contact.title }}</div>
</div>
</ng-container>
<!-- 팝업사이즈 -->
<ng-container *ngIf="contact.emails.length">
<div class="flex">
<!-- <mat-icon [svgIcon]="'heroicons_outline:mail'"></mat-icon> -->
<div class="ml-6 leading-6">팝업사이즈</div>
<div class="min-w-0 ml-6 space-y-1">
<ng-container
*ngFor="let email of contact.emails; trackBy: __trackByFn"
>
<div class="flex items-center leading-6">
<div class="text-md truncate text-secondary">
<span class="mx-2">&bull;</span>
<span class="font-medium">{{ email.label }}</span>
</div>
<div class="text-md truncate text-secondary">
<span class="mx-2">&bull;</span>
<span class="font-medium">180</span>
</div>
</div>
</ng-container>
</div>
</div>
</ng-container>
<!-- 팝업좌표 -->
<ng-container *ngIf="contact.phoneNumbers.length">
<div class="flex">
<!-- <mat-icon [svgIcon]="'heroicons_outline:phone'"></mat-icon> -->
<div class="ml-6 leading-6">팝업좌표</div>
<div class="min-w-0 ml-6 space-y-1">
<ng-container
*ngFor="
let phoneNumber of contact.phoneNumbers;
trackBy: __trackByFn
"
>
<div class="flex items-center leading-6">
<div class="text-md truncate text-secondary">
<span class="mx-2">&bull;</span>
<span class="font-medium">{{
phoneNumber.phoneNumber
}}</span>
</div>
<div class="text-md truncate text-secondary">
<span class="mx-2">&bull;</span>
<span class="font-medium">180</span>
</div>
</div>
</ng-container>
</div>
</div>
</ng-container>
<!-- Address -->
<ng-container *ngIf="contact.address">
<div class="flex sm:items-center">
<div class="ml-6 leading-6">팝업제목</div>
<div class="ml-6 leading-6">{{ contact.address }}</div>
</div>
</ng-container>
<!-- Notes -->
<ng-container *ngIf="contact.notes">
<div class="ml-6 leading-6">팝업내용</div>
<div class="flex">
<!-- <mat-icon [svgIcon]="'heroicons_outline:menu-alt-2'"></mat-icon> -->
<div
class="max-w-none ml-6 prose prose-sm"
[innerHTML]="contact.notes"
></div>
</div>
</ng-container>
<!-- Birthday -->
<ng-container *ngIf="contact.birthday">
<div class="flex sm:items-center">
<!-- <mat-icon [svgIcon]="'heroicons_outline:cake'"></mat-icon> -->
<div class="ml-6 leading-6">사용여부</div>
<div class="ml-6 leading-6">
{{ contact.birthday | date: "longDate" }}
</div>
</div>
</ng-container>
</div>
</div>
</div>
</ng-container>
<!-- Edit mode --> <!-- Edit mode -->
<ng-container *ngIf="editMode"> <!-- Contact form -->
<!-- Contact form --> <div class="relative flex flex-col flex-auto items-center px-6 sm:px-12">
<div class="relative flex flex-col flex-auto items-center px-6 sm:px-12"> <div class="w-full max-w-3xl">
<div class="w-full max-w-3xl"> <form [formGroup]="popupForm">
<form [formGroup]="contactForm"> <!-- Name -->
<!-- Name --> <div class="mt-8">
<div class="mt-8"> <mat-form-field class="fuse-mat-no-subscript w-full">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-label>사이트</mat-label>
<mat-label>사이트</mat-label> <mat-select>
<mat-select> <ng-container *ngFor="let category of categories">
<ng-container *ngFor="let category of categories"> <mat-option [value]="category.id">
<mat-option [value]="category.id"> {{ category.name }}
{{ category.name }} </mat-option>
</mat-option> </ng-container>
</ng-container> </mat-select>
</mat-select> </mat-form-field>
</mat-form-field> </div>
</div>
<!-- 팝업 사이즈 --> <!-- 팝업 사이즈 -->
<div class="flex"> <div class="flex">
<mat-form-field class="w-1/2 pr-2 mt-4"> <mat-form-field class="w-1/2 pr-2 mt-4">
<mat-label>팝업 가로 사이즈</mat-label> <mat-label>팝업 가로 사이즈</mat-label>
<input type="number" matInput /> <input type="number" matInput [formControlName]="'widthSize'" />
</mat-form-field> </mat-form-field>
<mat-form-field class="w-1/2 pl-2 mt-4"> <mat-form-field class="w-1/2 pl-2 mt-4">
<mat-label>팝업 세로 사이즈</mat-label> <mat-label>팝업 세로 사이즈</mat-label>
<input type="number" matInput /> <input type="number" matInput [formControlName]="'heightSize'" />
</mat-form-field> </mat-form-field>
</div> </div>
<!-- 팝업 좌표 --> <!-- 팝업 좌표 -->
<div class="flex"> <div class="flex">
<mat-form-field class="w-1/2 pr-2 mt-4"> <mat-form-field class="w-1/2 pr-2 mt-4">
<mat-label>팝업 좌표 TOP</mat-label> <mat-label>팝업 좌표 TOP</mat-label>
<input type="number" matInput /> <input type="number" matInput [formControlName]="'topMargin'" />
</mat-form-field> </mat-form-field>
<mat-form-field class="w-1/2 pl-2 mt-4"> <mat-form-field class="w-1/2 pl-2 mt-4">
<mat-label>팝업 좌표 LEFT</mat-label> <mat-label>팝업 좌표 LEFT</mat-label>
<input type="number" matInput /> <input type="number" matInput [formControlName]="'leftMargin'" />
</mat-form-field> </mat-form-field>
</div> </div>
<!-- 팝업제목 --> <!-- 팝업제목 -->
<div class="mt-8"> <div class="mt-8">
<mat-form-field class="fuse-mat-no-subscript w-full"> <mat-form-field class="fuse-mat-no-subscript w-full">
<mat-label>팝업제목</mat-label> <mat-label>팝업제목</mat-label>
<mat-icon <mat-icon
matPrefix matPrefix
class="hidden sm:flex icon-size-5" class="hidden sm:flex icon-size-5"
[svgIcon]="'heroicons_solid:briefcase'" [svgIcon]="'heroicons_solid:briefcase'"
></mat-icon> ></mat-icon>
<input matInput [placeholder]="'Job title'" /> <input
</mat-form-field> matInput
</div> [placeholder]="'Job title'"
[formControlName]="'title'"
/>
</mat-form-field>
</div>
<!-- Notes --> <!-- Notes -->
<div class="mt-8"> <div class="mt-8">
<mat-form-field <mat-form-field
class="fuse-mat-textarea fuse-mat-no-subscript w-full" class="fuse-mat-textarea fuse-mat-no-subscript w-full"
>
<mat-label>팝업내용</mat-label>
<mat-icon
matPrefix
class="hidden sm:flex icon-size-5"
[svgIcon]="'heroicons_solid:menu-alt-2'"
></mat-icon>
<textarea
matInput
[placeholder]="'Notes'"
[rows]="5"
[spellcheck]="false"
matTextareaAutosize
></textarea>
</mat-form-field>
</div>
<div class="mt-8">
<mat-form-field class="fuse-mat-no-subscript w-full">
<mat-label>표시여부</mat-label>
<mat-select>
<ng-container *ngFor="let category of categories">
<mat-option [value]="category.id">
{{ category.name }}
</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
</div>
<!-- Actions -->
<div
class="flex items-center mt-10 -mx-6 sm:-mx-12 py-4 pr-4 pl-1 sm:pr-12 sm:pl-7 border-t bg-gray-50 dark:bg-transparent"
> >
<!-- Delete --> <mat-label>팝업내용</mat-label>
<button mat-button [color]="'warn'" [matTooltip]="'Delete'"> <mat-icon
Delete matPrefix
</button> class="hidden sm:flex icon-size-5"
<!-- Cancel --> [svgIcon]="'heroicons_solid:menu-alt-2'"
<button ></mat-icon>
class="ml-auto" <textarea
mat-button matInput
[matTooltip]="'Cancel'" [placeholder]="'Notes'"
(click)="toggleEditMode(false)" [rows]="5"
> [spellcheck]="false"
Cancel matTextareaAutosize
</button> [formControlName]="'content'"
<!-- Save --> ></textarea>
<button </mat-form-field>
class="ml-2" </div>
mat-flat-button
[color]="'primary'" <div class="mt-8">
[disabled]="contactForm.invalid" <mat-form-field class="fuse-mat-no-subscript w-full">
[matTooltip]="'Save'" <mat-label>표시여부</mat-label>
> <mat-select>
Save <ng-container *ngFor="let category of categories">
</button> <mat-option [value]="category.id">
</div> {{ category.name }}
</form> </mat-option>
</div> </ng-container>
</mat-select>
</mat-form-field>
</div>
<!-- Actions -->
<div
class="flex items-center mt-10 -mx-6 sm:-mx-12 py-4 pr-4 pl-1 sm:pr-12 sm:pl-7 border-t bg-gray-50 dark:bg-transparent"
>
<!-- Delete -->
<button mat-button [color]="'warn'" [matTooltip]="'Delete'">
Delete
</button>
<!-- Cancel -->
<button
class="ml-auto"
mat-button
[matTooltip]="'Cancel'"
(click)="toggleEditMode(false)"
>
Cancel
</button>
<!-- Save -->
<button
class="ml-2"
mat-flat-button
[color]="'primary'"
[disabled]="popupForm.invalid"
[matTooltip]="'Save'"
>
Save
</button>
</div>
</form>
</div> </div>
</ng-container> </div>
</div> </div>

43
src/app/modules/admin/board/popup/components/redit.component.ts
View File

@ -8,6 +8,8 @@ import {
ViewChild, ViewChild,
ViewEncapsulation, ViewEncapsulation,
} from '@angular/core'; } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { MatPaginator } from '@angular/material/paginator'; import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort'; import { MatSort } from '@angular/material/sort';
@ -15,7 +17,8 @@ import { Subject, takeUntil } from 'rxjs';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { FuseConfirmationService } from '@fuse/services/confirmation'; import { FuseConfirmationService } from '@fuse/services/confirmation';
import { ActivatedRoute, Router } from '@angular/router'; import { Popup } from '../models/popup';
import { PopupService } from '../services/popup.service';
@Component({ @Component({
selector: 'popup-redit', selector: 'popup-redit',
@ -50,10 +53,11 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
isLoading = false; isLoading = false;
searchInputControl = new FormControl(); searchInputControl = new FormControl();
contactForm!: FormGroup; popupForm!: FormGroup;
editMode: boolean = false; editMode: boolean = false;
contact = contacts[0]; contact = contacts[0];
categories = categories; categories = categories;
popup: Popup | undefined;
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -65,7 +69,8 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
private _fuseConfirmationService: FuseConfirmationService, private _fuseConfirmationService: FuseConfirmationService,
private _formBuilder: FormBuilder, private _formBuilder: FormBuilder,
private _route: ActivatedRoute, private _route: ActivatedRoute,
private _router: Router private _router: Router,
private _popupService: PopupService
) {} ) {}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -77,18 +82,32 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
*/ */
ngOnInit(): void { ngOnInit(): void {
// Create the contact form // Create the contact form
this.contactForm = this._formBuilder.group({ this.popupForm = this._formBuilder.group({
id: [''], id: [''],
name: [''], index: [''],
emails: this._formBuilder.array([]),
phoneNumbers: this._formBuilder.array([]),
title: [''], title: [''],
company: [''], widthSize: [''],
birthday: [null], heightSize: [''],
address: [null], topMargin: [''],
notes: [null], leftMargin: [''],
tags: [[]], site: [''],
useOrNot: [''],
content: [''],
}); });
this._popupService.popup$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((popup: Popup | undefined) => {
if (!popup) {
return;
}
this.popup = popup;
this.popupForm.patchValue(popup);
// Mark for check
this._changeDetectorRef.markForCheck();
});
} }
/** /**

143
src/app/modules/admin/board/popup/components/view.component.html Normal file
View File

@ -0,0 +1,143 @@
<div class="flex flex-col flex-auto min-w-0">
<!-- View mode -->
<!-- Header -->
<div
class="relative w-full h-40 sm:h-16 mt-10 x-8 sm:px-12 bg-accent-100 dark:bg-accent-700"
>
<!-- Background -->
<!-- Close button -->
<div
class="flex items-center justify-end w-full max-w-3xl mx-auto pt-6"
></div>
</div>
<!-- Contact -->
<div
class="relative flex flex-col flex-auto items-center p-6 pt-0 sm:p-12 sm:pt-0"
>
<div class="w-full max-w-3xl">
<!-- Avatar and actions -->
<div class="flex flex-auto items-end -mt-16">
<!-- Actions -->
<div class="flex items-center ml-auto mb-1">
<button mat-stroked-button (click)="toggleEditMode()">
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:pencil-alt'"
></mat-icon>
<span class="ml-2">수정</span>
</button>
<button mat-stroked-button>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:pencil-alt'"
></mat-icon>
<span class="ml-2">삭제</span>
</button>
</div>
</div>
<div class="flex flex-col mt-4 pt-6 border-t space-y-8">
<!-- Title -->
<ng-container *ngIf="popup?.site">
<div class="flex sm:items-center">
<!-- <mat-icon [svgIcon]="'heroicons_outline:briefcase'"></mat-icon> -->
<div class="ml-6 leading-6">사이트선택</div>
<div class="ml-6 leading-6">{{ popup?.site }}</div>
</div>
</ng-container>
<!-- 팝업사이즈 -->
<ng-container *ngIf="popup?.widthSize">
<div class="flex">
<!-- <mat-icon [svgIcon]="'heroicons_outline:mail'"></mat-icon> -->
<div class="ml-6 leading-6">팝업사이즈</div>
<div class="min-w-0 ml-6 space-y-1">
<div class="flex items-center leading-6">
<div class="text-md truncate text-secondary">
<span class="mx-2">&bull;</span>
<span class="font-medium">가로</span>
</div>
<div class="text-md truncate text-secondary">
<span class="mx-2">&bull;</span>
<span class="font-medium">{{ popup?.widthSize }}</span>
</div>
</div>
<div class="flex items-center leading-6">
<div class="text-md truncate text-secondary">
<span class="mx-2">&bull;</span>
<span class="font-medium">세로</span>
</div>
<div class="text-md truncate text-secondary">
<span class="mx-2">&bull;</span>
<span class="font-medium">{{ popup?.heightSize }}</span>
</div>
</div>
</div>
</div>
</ng-container>
<!-- 팝업좌표 -->
<ng-container *ngIf="popup?.topMargin">
<div class="flex">
<!-- <mat-icon [svgIcon]="'heroicons_outline:mail'"></mat-icon> -->
<div class="ml-6 leading-6">팝업좌표</div>
<div class="min-w-0 ml-6 space-y-1">
<div class="flex items-center leading-6">
<div class="text-md truncate text-secondary">
<span class="mx-2">&bull;</span>
<span class="font-medium">TOP</span>
</div>
<div class="text-md truncate text-secondary">
<span class="mx-2">&bull;</span>
<span class="font-medium">{{ popup?.topMargin }}</span>
</div>
</div>
<div class="flex items-center leading-6">
<div class="text-md truncate text-secondary">
<span class="mx-2">&bull;</span>
<span class="font-medium">LEFT</span>
</div>
<div class="text-md truncate text-secondary">
<span class="mx-2">&bull;</span>
<span class="font-medium">{{ popup?.leftMargin }}</span>
</div>
</div>
</div>
</div>
</ng-container>
<!-- Address -->
<ng-container *ngIf="popup?.title">
<div class="flex sm:items-center">
<div class="ml-6 leading-6">팝업제목</div>
<div class="ml-6 leading-6">{{ popup?.title }}</div>
</div>
</ng-container>
<!-- Notes -->
<ng-container *ngIf="popup?.content">
<div class="ml-6 leading-6">팝업내용</div>
<div class="flex">
<!-- <mat-icon [svgIcon]="'heroicons_outline:menu-alt-2'"></mat-icon> -->
<div
class="max-w-none ml-6 prose prose-sm"
[innerHTML]="popup?.content"
></div>
</div>
</ng-container>
<!-- UseOrNot -->
<ng-container *ngIf="popup?.useOrNot">
<div class="flex sm:items-center">
<!-- <mat-icon [svgIcon]="'heroicons_outline:cake'"></mat-icon> -->
<div class="ml-6 leading-6">사용여부</div>
<div class="ml-6 leading-6">
{{ popup?.useOrNot }}
</div>
</div>
</ng-container>
</div>
</div>
</div>
</div>

113
src/app/modules/admin/board/popup/components/view.component.ts Normal file
View File

@ -0,0 +1,113 @@
import {
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
OnDestroy,
OnInit,
ViewEncapsulation,
} from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { Subject, takeUntil } from 'rxjs';
import { fuseAnimations } from '@fuse/animations';
import { FuseConfirmationService } from '@fuse/services/confirmation';
import { Popup } from '../models/popup';
import { PopupService } from '../services/popup.service';
import { Router } from '@angular/router';
@Component({
selector: 'popup-view',
templateUrl: './view.component.html',
styles: [
/* language=SCSS */
`
.inventory-grid {
grid-template-columns: 60px auto 40px;
@screen sm {
grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
}
@screen md {
grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
}
@screen lg {
grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
}
}
`,
],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
animations: fuseAnimations,
})
export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
isLoading = false;
private _unsubscribeAll: Subject<any> = new Subject<any>();
popup: Popup | undefined;
/**
* Constructor
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseConfirmationService: FuseConfirmationService,
private _formBuilder: FormBuilder,
private _popupService: PopupService,
private router: Router
) {}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void {
this._popupService.popup$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((popup: Popup | undefined) => {
if (!popup) {
return;
}
this.popup = popup;
// 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
// -----------------------------------------------------------------------------------------------------
/**
* Toggle edit mode
*
* @param editMode
*/
toggleEditMode(): void {}
}

1
src/app/modules/admin/board/popup/models/popup.ts
View File

@ -2,6 +2,7 @@ export interface Popup {
id?: string; id?: string;
index?: number; index?: number;
title?: string; title?: string;
content?: string;
widthSize?: number; widthSize?: number;
heightSize?: number; heightSize?: number;
topMargin?: number; topMargin?: number;

19
src/app/modules/admin/board/popup/popup.routing.ts
View File

@ -2,9 +2,9 @@ import { Route } from '@angular/router';
import { ListComponent } from './components/list.component'; import { ListComponent } from './components/list.component';
import { PopupsResolver } from './resolvers/popup.resolver'; import { PopupsResolver, PopupResolver } from './resolvers/popup.resolver';
import { UserResolver } from '../../member/user/resolvers/user.resolver';
import { ReditComponent } from './components/redit.component'; import { ReditComponent } from './components/redit.component';
import { ViewComponent } from './components/view.component';
export const popupRoutes: Route[] = [ export const popupRoutes: Route[] = [
{ {
@ -24,6 +24,21 @@ export const popupRoutes: Route[] = [
path: 'redit', path: 'redit',
component: ReditComponent, component: ReditComponent,
}, },
{
path: 'redit/:id',
component: ReditComponent,
resolve: {
popup: PopupResolver,
},
},
{
path: 'view/:id',
component: ViewComponent,
resolve: {
popup: PopupResolver,
},
},
// { // {
// path: 'redit', // path: 'redit',