이벤트 등록. 자유게시판 관리, 공지사항 관리 화면
This commit is contained in:
byung eun park
parent
34aeeb162f
commit
97b21e9aea
|
|
@ -1 +1,376 @@
|
||||||
<p>event-regist works!</p>
|
<div id="cards" class="page-layout simple fullwidth">
|
||||||
|
<!-- HEADER -->
|
||||||
|
<div
|
||||||
|
class="header accent p-24 h-160"
|
||||||
|
fxLayout="row"
|
||||||
|
fxLayoutAlign="space-between center"
|
||||||
|
>
|
||||||
|
<div fxLayout="column" fxLayoutAlign="center start">
|
||||||
|
<div fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<mat-icon class="secondary-text s-18">home</mat-icon>
|
||||||
|
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
|
||||||
|
<span class="secondary-text">메인 이벤트 등록</span>
|
||||||
|
</div>
|
||||||
|
<div class="h2 mt-16">메인 이벤트 등록하기</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / HEADER -->
|
||||||
|
|
||||||
|
<!-- CONTENT -->
|
||||||
|
<div class="content" [ngClass]="this.view">
|
||||||
|
<div class="cards">
|
||||||
|
<!-- CARD 17 -->
|
||||||
|
<div class="card">
|
||||||
|
<!-- PREVIEW -->
|
||||||
|
<div class="card-preview">
|
||||||
|
<div class="fuse-card">
|
||||||
|
<div class="p-16">
|
||||||
|
<div class="h1">1</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-16 line-height-1.75">
|
||||||
|
<mat-button-toggle-group
|
||||||
|
name="fontStyle"
|
||||||
|
aria-label="Font Style"
|
||||||
|
class="tap-group-width"
|
||||||
|
>
|
||||||
|
<mat-button-toggle
|
||||||
|
color="accent"
|
||||||
|
value="on"
|
||||||
|
class="tap-button-width"
|
||||||
|
>열림</mat-button-toggle
|
||||||
|
>
|
||||||
|
<mat-button-toggle value="off" class="tap-button-width"
|
||||||
|
>닫음</mat-button-toggle
|
||||||
|
>
|
||||||
|
</mat-button-toggle-group>
|
||||||
|
</div>
|
||||||
|
<div class="px-16 pt-12 line-height-1.75">
|
||||||
|
<img
|
||||||
|
class="ng-tns-c104-509"
|
||||||
|
src="assets/images/cards/card1.jpg"
|
||||||
|
/>
|
||||||
|
<!-- <mat-form-field appearance="outline" fxFlex="200">
|
||||||
|
<mat-label>이미지</mat-label>
|
||||||
|
<input matInput formControlName="firstName" required /> -->
|
||||||
|
|
||||||
|
<!-- <mat-error>First Name is required!</mat-error>
|
||||||
|
</mat-form-field>-->
|
||||||
|
</div>
|
||||||
|
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<div class="pl-8" fxFlex="100">dddddddddddddddd.jpg</div>
|
||||||
|
<button mat-button color="accent" aria-label="파일첨부">
|
||||||
|
<mat-icon>attach_file</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="card-divider"></div>
|
||||||
|
|
||||||
|
<div class="p-8 pt-0" fxLayout="row">
|
||||||
|
<button
|
||||||
|
class="submit-button mat-raised-button mat-accent"
|
||||||
|
color="accent"
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
저장
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / PREVIEW -->
|
||||||
|
</div>
|
||||||
|
<!-- / CARD 17 -->
|
||||||
|
|
||||||
|
<!-- CARD 17 -->
|
||||||
|
<div class="card">
|
||||||
|
<!-- PREVIEW -->
|
||||||
|
<div class="card-preview">
|
||||||
|
<div class="fuse-card">
|
||||||
|
<div class="p-16">
|
||||||
|
<div class="h1">2</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-16 line-height-1.75">
|
||||||
|
<mat-button-toggle-group
|
||||||
|
name="fontStyle"
|
||||||
|
aria-label="Font Style"
|
||||||
|
class="tap-group-width"
|
||||||
|
>
|
||||||
|
<mat-button-toggle
|
||||||
|
color="accent"
|
||||||
|
value="on"
|
||||||
|
class="tap-button-width"
|
||||||
|
>열림</mat-button-toggle
|
||||||
|
>
|
||||||
|
<mat-button-toggle value="off" class="tap-button-width"
|
||||||
|
>닫음</mat-button-toggle
|
||||||
|
>
|
||||||
|
</mat-button-toggle-group>
|
||||||
|
</div>
|
||||||
|
<div class="px-16 pt-12 line-height-1.75">
|
||||||
|
<img
|
||||||
|
class="ng-tns-c104-509"
|
||||||
|
src="assets/images/cards/card1.jpg"
|
||||||
|
/>
|
||||||
|
<!-- <mat-form-field appearance="outline" fxFlex="200">
|
||||||
|
<mat-label>이미지</mat-label>
|
||||||
|
<input matInput formControlName="firstName" required /> -->
|
||||||
|
|
||||||
|
<!-- <mat-error>First Name is required!</mat-error>
|
||||||
|
</mat-form-field>-->
|
||||||
|
</div>
|
||||||
|
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<div class="pl-8" fxFlex="100">dddddddddddddddd.jpg</div>
|
||||||
|
<button mat-button color="accent" aria-label="파일첨부">
|
||||||
|
<mat-icon>attach_file</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-divider"></div>
|
||||||
|
|
||||||
|
<div class="p-8 pt-0" fxLayout="row">
|
||||||
|
<button
|
||||||
|
class="submit-button mat-raised-button mat-accent"
|
||||||
|
color="accent"
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
저장
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / PREVIEW -->
|
||||||
|
</div>
|
||||||
|
<!-- / CARD 17 -->
|
||||||
|
|
||||||
|
<!-- CARD 17 -->
|
||||||
|
<div class="card">
|
||||||
|
<!-- PREVIEW -->
|
||||||
|
<div class="card-preview">
|
||||||
|
<div class="fuse-card">
|
||||||
|
<div class="p-16">
|
||||||
|
<div class="h1">3</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-16 line-height-1.75">
|
||||||
|
<mat-button-toggle-group
|
||||||
|
name="fontStyle"
|
||||||
|
aria-label="Font Style"
|
||||||
|
class="tap-group-width"
|
||||||
|
>
|
||||||
|
<mat-button-toggle
|
||||||
|
color="accent"
|
||||||
|
value="on"
|
||||||
|
class="tap-button-width"
|
||||||
|
>열림</mat-button-toggle
|
||||||
|
>
|
||||||
|
<mat-button-toggle value="off" class="tap-button-width"
|
||||||
|
>닫음</mat-button-toggle
|
||||||
|
>
|
||||||
|
</mat-button-toggle-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-16 pt-12 line-height-1.75">
|
||||||
|
<img
|
||||||
|
class="ng-tns-c104-509"
|
||||||
|
src="assets/images/cards/card1.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<div class="pl-8" fxFlex="100">dddddddddddddddd.jpg</div>
|
||||||
|
<button mat-button color="accent" aria-label="파일첨부">
|
||||||
|
<mat-icon>attach_file</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="card-divider"></div>
|
||||||
|
|
||||||
|
<div class="p-8 pt-0" fxLayout="row">
|
||||||
|
<button
|
||||||
|
class="submit-button mat-raised-button mat-accent"
|
||||||
|
color="accent"
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
저장
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / PREVIEW -->
|
||||||
|
</div>
|
||||||
|
<!-- / CARD 17 -->
|
||||||
|
<!-- CARD 17 -->
|
||||||
|
<div class="card">
|
||||||
|
<!-- PREVIEW -->
|
||||||
|
<div class="card-preview">
|
||||||
|
<div class="fuse-card">
|
||||||
|
<div class="p-16">
|
||||||
|
<div class="h1">4</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-16 line-height-1.75">
|
||||||
|
<mat-button-toggle-group
|
||||||
|
name="fontStyle"
|
||||||
|
aria-label="Font Style"
|
||||||
|
class="tap-group-width"
|
||||||
|
>
|
||||||
|
<mat-button-toggle
|
||||||
|
color="accent"
|
||||||
|
value="on"
|
||||||
|
class="tap-button-width"
|
||||||
|
>열림</mat-button-toggle
|
||||||
|
>
|
||||||
|
<mat-button-toggle value="off" class="tap-button-width"
|
||||||
|
>닫음</mat-button-toggle
|
||||||
|
>
|
||||||
|
</mat-button-toggle-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-16 pt-12 line-height-1.75">
|
||||||
|
<img
|
||||||
|
class="ng-tns-c104-509"
|
||||||
|
src="assets/images/cards/card1.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<div class="pl-8" fxFlex="100">dddddddddddddddd.jpg</div>
|
||||||
|
<button mat-button color="accent" aria-label="파일첨부">
|
||||||
|
<mat-icon>attach_file</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="card-divider"></div>
|
||||||
|
|
||||||
|
<div class="p-8 pt-0" fxLayout="row">
|
||||||
|
<button
|
||||||
|
class="submit-button mat-raised-button mat-accent"
|
||||||
|
color="accent"
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
저장
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / PREVIEW -->
|
||||||
|
</div>
|
||||||
|
<!-- / CARD 17 -->
|
||||||
|
|
||||||
|
<!-- CARD 17 -->
|
||||||
|
<div class="card">
|
||||||
|
<!-- PREVIEW -->
|
||||||
|
<div class="card-preview">
|
||||||
|
<div class="fuse-card">
|
||||||
|
<div class="p-16">
|
||||||
|
<div class="h1">5</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-16 line-height-1.75">
|
||||||
|
<mat-button-toggle-group
|
||||||
|
name="fontStyle"
|
||||||
|
aria-label="Font Style"
|
||||||
|
class="tap-group-width"
|
||||||
|
>
|
||||||
|
<mat-button-toggle
|
||||||
|
color="accent"
|
||||||
|
value="on"
|
||||||
|
class="tap-button-width"
|
||||||
|
>열림</mat-button-toggle
|
||||||
|
>
|
||||||
|
<mat-button-toggle value="off" class="tap-button-width"
|
||||||
|
>닫음</mat-button-toggle
|
||||||
|
>
|
||||||
|
</mat-button-toggle-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-16 pt-12 line-height-1.75">
|
||||||
|
<img
|
||||||
|
class="ng-tns-c104-509"
|
||||||
|
src="assets/images/cards/card1.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<div class="pl-8" fxFlex="100">dddddddddddddddd.jpg</div>
|
||||||
|
<button mat-button color="accent" aria-label="파일첨부">
|
||||||
|
<mat-icon>attach_file</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-divider"></div>
|
||||||
|
|
||||||
|
<div class="p-8 pt-0" fxLayout="row">
|
||||||
|
<button
|
||||||
|
class="submit-button mat-raised-button mat-accent"
|
||||||
|
color="accent"
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
저장
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / PREVIEW -->
|
||||||
|
</div>
|
||||||
|
<!-- / CARD 17 -->
|
||||||
|
|
||||||
|
<!-- CARD 17 -->
|
||||||
|
<div class="card">
|
||||||
|
<!-- PREVIEW -->
|
||||||
|
<div class="card-preview">
|
||||||
|
<div class="fuse-card">
|
||||||
|
<div class="p-16">
|
||||||
|
<div class="h1">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-16 line-height-1.75">
|
||||||
|
<mat-button-toggle-group
|
||||||
|
name="fontStyle"
|
||||||
|
aria-label="Font Style"
|
||||||
|
class="tap-group-width"
|
||||||
|
>
|
||||||
|
<mat-button-toggle
|
||||||
|
color="accent"
|
||||||
|
value="on"
|
||||||
|
class="tap-button-width"
|
||||||
|
>열림</mat-button-toggle
|
||||||
|
>
|
||||||
|
<mat-button-toggle value="off" class="tap-button-width"
|
||||||
|
>닫음</mat-button-toggle
|
||||||
|
>
|
||||||
|
</mat-button-toggle-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-16 pt-12 line-height-1.75">
|
||||||
|
<img
|
||||||
|
class="ng-tns-c104-509"
|
||||||
|
src="assets/images/cards/card1.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<div class="pl-8" fxFlex="100">dddddddddddddddd.jpg</div>
|
||||||
|
<button mat-button color="accent" aria-label="파일첨부">
|
||||||
|
<mat-icon>attach_file</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-divider"></div>
|
||||||
|
|
||||||
|
<div class="p-8 pt-0" fxLayout="row">
|
||||||
|
<button
|
||||||
|
class="submit-button mat-raised-button mat-accent"
|
||||||
|
color="accent"
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
저장
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / PREVIEW -->
|
||||||
|
</div>
|
||||||
|
<!-- / CARD 17 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT -->
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
@import 'src/@fuse/scss/fuse';
|
||||||
|
|
||||||
|
app-event-regist {
|
||||||
|
.content {
|
||||||
|
.cards {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 50px 112px 0px 100px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
|
||||||
|
.card-preview {
|
||||||
|
display: flex;
|
||||||
|
min-width: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-source {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tap-group-width {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.tap-button-width {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,9 +1,12 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { fuseAnimations } from 'src/@fuse/animations';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-event-regist',
|
selector: 'app-event-regist',
|
||||||
templateUrl: './event-regist.component.html',
|
templateUrl: './event-regist.component.html',
|
||||||
styleUrls: ['./event-regist.component.scss']
|
styleUrls: ['./event-regist.component.scss'],
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
animations: fuseAnimations
|
||||||
})
|
})
|
||||||
export class EventRegistComponent implements OnInit {
|
export class EventRegistComponent implements OnInit {
|
||||||
constructor() {}
|
constructor() {}
|
||||||
|
|
|
||||||
|
|
@ -1 +1,167 @@
|
||||||
<p>free-board works!</p>
|
<div id="service-center" class="page-layout carded fullwidth inner-scroll">
|
||||||
|
<!-- TOP BACKGROUND -->
|
||||||
|
<div class="top-bg accent"></div>
|
||||||
|
<!-- / TOP BACKGROUND -->
|
||||||
|
|
||||||
|
<!-- CENTER -->
|
||||||
|
<div class="center">
|
||||||
|
<!-- HEADER -->
|
||||||
|
<div
|
||||||
|
class="header accent"
|
||||||
|
fxLayout="column"
|
||||||
|
fxLayoutAlign="center center"
|
||||||
|
fxLayout.gt-xs="row"
|
||||||
|
fxLayoutAlign.gt-xs="space-between center"
|
||||||
|
>
|
||||||
|
<!-- APP TITLE -->
|
||||||
|
<div
|
||||||
|
class="logo mb-24 mb-sm-0"
|
||||||
|
fxLayout="row"
|
||||||
|
fxLayoutAlign="start center"
|
||||||
|
>
|
||||||
|
<mat-icon
|
||||||
|
class="logo-icon s-32 mr-16"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
|
||||||
|
>
|
||||||
|
shopping_basket
|
||||||
|
</mat-icon>
|
||||||
|
<span
|
||||||
|
class="logo-text h1"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
|
||||||
|
>고객센터 관리</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<!-- / APP TITLE -->
|
||||||
|
|
||||||
|
<!-- SEARCH -->
|
||||||
|
|
||||||
|
<!-- <div class="search-wrapper ml-sm-32">
|
||||||
|
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<mat-icon>search</mat-icon>
|
||||||
|
<input #filter placeholder="Search for an order" />
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<!-- / SEARCH -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- / HEADER -->
|
||||||
|
|
||||||
|
<!-- CONTENT CARD -->
|
||||||
|
<div class="content-card">
|
||||||
|
<mat-table
|
||||||
|
class="service-center"
|
||||||
|
#table
|
||||||
|
[dataSource]="dataSource"
|
||||||
|
matSort
|
||||||
|
[@animateStagger]="{ value: '50' }"
|
||||||
|
fusePerfectScrollbar
|
||||||
|
>
|
||||||
|
<ng-container matColumnDef="idx">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>번호</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter; let i = index">
|
||||||
|
<p class="text-truncate">{{ i }}</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- ID/Nickname Column -->
|
||||||
|
<ng-container matColumnDef="title">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>제목</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter">
|
||||||
|
<p class="text-truncate">{{ serviceCenter.title }}</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Phone Column -->
|
||||||
|
<ng-container matColumnDef="contents">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
||||||
|
>내용</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
|
||||||
|
<!-- <p class="text-truncate">{{ serviceCenter.contents }}</p> -->
|
||||||
|
<p class="text-truncate">010-3004-2001</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Total Price Column -->
|
||||||
|
<ng-container matColumnDef="register">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md
|
||||||
|
>작성자</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-md>
|
||||||
|
<p class="total-price text-truncate">
|
||||||
|
<!-- {{ user.totalprice | currency: 'USD':'symbol' }} -->
|
||||||
|
1,000,000
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Point Column -->
|
||||||
|
<ng-container matColumnDef="createdAt">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
||||||
|
>작성일</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
|
||||||
|
<p class="text-truncate">
|
||||||
|
<!-- {{ user.point }} -->
|
||||||
|
5000
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Level Column -->
|
||||||
|
<ng-container matColumnDef="contactStatus">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>문의상태</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let serviceCenter">
|
||||||
|
<!-- <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color"> -->
|
||||||
|
<p class="text-truncate">
|
||||||
|
<!-- {{ user.level }} -->
|
||||||
|
브론즈
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Charge Money Column -->
|
||||||
|
<ng-container matColumnDef="removeBtn">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>삭제버튼</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let user">
|
||||||
|
<p class="text-truncate ">
|
||||||
|
<button mat-raised-button class="mat-accent">
|
||||||
|
삭제
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<mat-header-row
|
||||||
|
*matHeaderRowDef="displayedColumns; sticky: true"
|
||||||
|
></mat-header-row>
|
||||||
|
|
||||||
|
<mat-row
|
||||||
|
*matRowDef="let user; columns: displayedColumns"
|
||||||
|
class="user"
|
||||||
|
matRipple
|
||||||
|
[routerLink]="'/pages/users/management/list/' + user.id"
|
||||||
|
>
|
||||||
|
</mat-row>
|
||||||
|
</mat-table>
|
||||||
|
|
||||||
|
<mat-paginator
|
||||||
|
#paginator
|
||||||
|
[pageIndex]="0"
|
||||||
|
[pageSize]="10"
|
||||||
|
[pageSizeOptions]="[5, 10, 25, 100]"
|
||||||
|
>
|
||||||
|
</mat-paginator>
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT CARD -->
|
||||||
|
</div>
|
||||||
|
<!-- / CENTER -->
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
@import 'src/@fuse/scss/fuse';
|
||||||
|
|
||||||
|
app-service-center {
|
||||||
|
#service-center {
|
||||||
|
.top-bg {
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
height: 224px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .center {
|
||||||
|
> .header {
|
||||||
|
.search-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 480px;
|
||||||
|
border-radius: 28px;
|
||||||
|
overflow: hidden;
|
||||||
|
@include mat-elevation(1);
|
||||||
|
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
padding: 0 18px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
min-height: 48px;
|
||||||
|
max-height: 48px;
|
||||||
|
padding: 0 16px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
padding: 8px 0;
|
||||||
|
height: 160px !important;
|
||||||
|
min-height: 160px !important;
|
||||||
|
max-height: 160px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-tab-group,
|
||||||
|
.mat-tab-body-wrapper,
|
||||||
|
.tab-content {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-center-table {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
overflow: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
.mat-header-row {
|
||||||
|
min-height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-cell {
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-id {
|
||||||
|
flex: 0 1 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-image {
|
||||||
|
flex: 0 1 84px;
|
||||||
|
|
||||||
|
.product-image {
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-buttons {
|
||||||
|
flex: 0 1 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-indicator {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: 8px;
|
||||||
|
|
||||||
|
& + span {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-icon {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,12 +1,84 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import {
|
||||||
|
Component,
|
||||||
|
ElementRef,
|
||||||
|
OnDestroy,
|
||||||
|
OnInit,
|
||||||
|
ViewChild,
|
||||||
|
ViewEncapsulation,
|
||||||
|
AfterViewInit
|
||||||
|
} from '@angular/core';
|
||||||
|
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||||
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
|
import { MatSort } from '@angular/material/sort';
|
||||||
|
|
||||||
|
import { Subject } from 'rxjs';
|
||||||
|
import { takeUntil } from 'rxjs/operators';
|
||||||
|
|
||||||
|
import { fuseAnimations } from 'src/@fuse/animations';
|
||||||
|
|
||||||
|
import { ServiceCenterService } from 'src/modules/infos/service-center/service/service-center.service';
|
||||||
|
import { ServiceCenterDataSource } from './service-center.data-source';
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-free-board',
|
selector: 'app-free-board',
|
||||||
templateUrl: './free-board.component.html',
|
templateUrl: './free-board.component.html',
|
||||||
styleUrls: ['./free-board.component.scss']
|
styleUrls: ['./free-board.component.scss'],
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
animations: fuseAnimations
|
||||||
})
|
})
|
||||||
export class FreeBoardComponent implements OnInit {
|
export class FreeBoardComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||||
constructor() {}
|
dataSource: ServiceCenterDataSource | null;
|
||||||
|
|
||||||
ngOnInit() {}
|
displayedColumns = [
|
||||||
|
'idx',
|
||||||
|
'title',
|
||||||
|
'contents',
|
||||||
|
'register',
|
||||||
|
'createdAt',
|
||||||
|
'contactStatus'
|
||||||
|
];
|
||||||
|
private unsubscribeAll: Subject<any>;
|
||||||
|
|
||||||
|
@ViewChild(MatPaginator, { static: true })
|
||||||
|
paginator: MatPaginator;
|
||||||
|
|
||||||
|
@ViewChild('filter', { static: true })
|
||||||
|
filter: ElementRef;
|
||||||
|
|
||||||
|
@ViewChild(MatSort, { static: true })
|
||||||
|
sort: MatSort;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private fb: FormBuilder,
|
||||||
|
private serviceCenterService: ServiceCenterService
|
||||||
|
) {
|
||||||
|
// Set the private defaults
|
||||||
|
this.unsubscribeAll = new Subject();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Lifecycle hooks
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On init
|
||||||
|
*/
|
||||||
|
ngOnInit(): void {
|
||||||
|
// Subscribe to update order on changes
|
||||||
|
this.dataSource = new ServiceCenterDataSource(
|
||||||
|
this.serviceCenterService,
|
||||||
|
this.paginator,
|
||||||
|
this.sort
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On destroy
|
||||||
|
*/
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
// Unsubscribe from all subscriptions
|
||||||
|
this.unsubscribeAll.next();
|
||||||
|
this.unsubscribeAll.complete();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1 +1,117 @@
|
||||||
<p>notice-board works!</p>
|
<div id="notice-board" class="page-layout carded fullwidth inner-scroll">
|
||||||
|
<!-- TOP BACKGROUND -->
|
||||||
|
<div class="top-bg accent"></div>
|
||||||
|
<!-- / TOP BACKGROUND -->
|
||||||
|
|
||||||
|
<!-- CENTER -->
|
||||||
|
<div class="center">
|
||||||
|
<!-- HEADER -->
|
||||||
|
<div
|
||||||
|
class="header accent"
|
||||||
|
fxLayout="row"
|
||||||
|
fxLayoutAlign="space-between center"
|
||||||
|
>
|
||||||
|
<!-- APP TITLE -->
|
||||||
|
<div fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<div
|
||||||
|
fxLayout="column"
|
||||||
|
fxLayoutAlign="start start"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
|
||||||
|
>
|
||||||
|
<div class="h2">
|
||||||
|
공지 관리
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / APP TITLE -->
|
||||||
|
</div>
|
||||||
|
<!-- / HEADER -->
|
||||||
|
|
||||||
|
<!-- CONTENT CARD -->
|
||||||
|
<div class="content-card">
|
||||||
|
<!-- CONTENT -->
|
||||||
|
<div class="content">
|
||||||
|
<!-- <mat-tab-group fxLayout="column" fxFlex>
|
||||||
|
<mat-tab label="Order Details"> -->
|
||||||
|
<div class="order-details tab-content p-24" fusePerfectScrollbar>
|
||||||
|
<div class="section pb-48">
|
||||||
|
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<mat-icon class="m-0 mr-16 secondary-text">access_time</mat-icon>
|
||||||
|
<div class="h2 secondary-text">공지사항 또는 이벤트 작성하기</div>
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
class="update-status p-24"
|
||||||
|
(ngSubmit)="updateStatus()"
|
||||||
|
[formGroup]="statusForm"
|
||||||
|
fxLayout="column"
|
||||||
|
fxLayoutAlign="start center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="dates"
|
||||||
|
fxFlexFill
|
||||||
|
fxLayout="column"
|
||||||
|
fxLayout.gt-xs="row"
|
||||||
|
>
|
||||||
|
<mat-form-field
|
||||||
|
appearance="outline"
|
||||||
|
floatLabel="always"
|
||||||
|
class="mr-sm-12"
|
||||||
|
fxFlex
|
||||||
|
>
|
||||||
|
<mat-label>제목</mat-label>
|
||||||
|
<input
|
||||||
|
matInput
|
||||||
|
placeholder="제목을 입력하세요."
|
||||||
|
name="title"
|
||||||
|
formControlName="title"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-divider cdkFocusRegionEnd></mat-divider>
|
||||||
|
<div>
|
||||||
|
<mat-button-toggle-group
|
||||||
|
name="fontStyle"
|
||||||
|
aria-label="Font Style"
|
||||||
|
fxFlex
|
||||||
|
>
|
||||||
|
<mat-button-toggle value="notice"
|
||||||
|
>공지사항</mat-button-toggle
|
||||||
|
>
|
||||||
|
<mat-button-toggle value="event">이벤트</mat-button-toggle>
|
||||||
|
</mat-button-toggle-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<mat-form-field
|
||||||
|
appearance="outline"
|
||||||
|
floatLabel="always"
|
||||||
|
class="w-100-p"
|
||||||
|
>
|
||||||
|
<mat-label>내용</mat-label>
|
||||||
|
<textarea
|
||||||
|
matInput
|
||||||
|
placeholder="내용을 입력하세요."
|
||||||
|
name="contents"
|
||||||
|
formControlName="contents"
|
||||||
|
rows="30"
|
||||||
|
></textarea>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-divider cdkFocusRegionEnd></mat-divider>
|
||||||
|
|
||||||
|
<mat-divider cdkFocusRegionEnd></mat-divider>
|
||||||
|
|
||||||
|
<button mat-raised-button class="mat-accent w-25-p p-12">
|
||||||
|
저장
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- </mat-tab>
|
||||||
|
</mat-tab-group> -->
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT -->
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT CARD -->
|
||||||
|
</div>
|
||||||
|
<!-- / CENTER -->
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,403 @@
|
||||||
|
@import "src/@fuse/scss/fuse";
|
||||||
|
|
||||||
|
#notice-board {
|
||||||
|
|
||||||
|
.header {
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
margin: 6px 0 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
.mat-tab-group,
|
||||||
|
.mat-tab-body-wrapper,
|
||||||
|
.tab-content {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
|
||||||
|
&.products {
|
||||||
|
|
||||||
|
.product-row {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.invoice {
|
||||||
|
|
||||||
|
#invoice {
|
||||||
|
|
||||||
|
&.compact {
|
||||||
|
padding: 0;
|
||||||
|
overflow: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
.invoice-container {
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 1020px;
|
||||||
|
min-width: 1020px;
|
||||||
|
max-width: 1020px;
|
||||||
|
padding: 64px 88px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #FFFFFF;
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
@include mat-elevation(7);
|
||||||
|
|
||||||
|
.header {
|
||||||
|
|
||||||
|
.invoice-date {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client {
|
||||||
|
|
||||||
|
.invoice-number {
|
||||||
|
font-size: 18px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
|
||||||
|
.number {
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.due-date {
|
||||||
|
font-size: 18px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.issuer {
|
||||||
|
margin-right: -88px;
|
||||||
|
padding-right: 66px;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 96px;
|
||||||
|
padding: 0 8px;
|
||||||
|
border-right: 1px solid rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
.invoice-table {
|
||||||
|
margin-top: 64px;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
thead {
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
th {
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-color: rgba(0, 0, 0, 0.12);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
max-width: 360px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-table-footer {
|
||||||
|
margin: 32px 0 72px 0;
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
td {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
border-bottom: none;
|
||||||
|
padding: 4px 8px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.discount {
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding-bottom: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.total {
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 24px 8px;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
font-size: 35px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: rgba(0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
|
||||||
|
.note {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// IE10 fix
|
||||||
|
.logo, .small-note {
|
||||||
|
-ms-flex: 0 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 32px;
|
||||||
|
min-width: 32px;
|
||||||
|
margin-right: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-note {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* PRINT STYLES */
|
||||||
|
@media print {
|
||||||
|
|
||||||
|
/* Invoice Specific Styles */
|
||||||
|
#invoice {
|
||||||
|
|
||||||
|
&.compact {
|
||||||
|
|
||||||
|
.invoice-container {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
|
||||||
|
.invoice-date {
|
||||||
|
margin-bottom: 16pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.issuer {
|
||||||
|
padding-right: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
.invoice-table {
|
||||||
|
margin-top: 16pt;
|
||||||
|
|
||||||
|
thead {
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-size: 10pt;
|
||||||
|
max-width: 60pt;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
td {
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail {
|
||||||
|
margin-top: 4pt;
|
||||||
|
font-size: 9pt;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-table-footer {
|
||||||
|
margin: 16pt 0;
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
td {
|
||||||
|
font-size: 13pt;
|
||||||
|
padding: 4pt 4pt;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.discount {
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding-bottom: 16pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.total {
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 16pt 4pt 0 4pt;
|
||||||
|
font-size: 16pt;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
|
||||||
|
.note {
|
||||||
|
font-size: 10pt;
|
||||||
|
margin-bottom: 8pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
margin-right: 8pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-note {
|
||||||
|
font-size: 8pt;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-tab-body-content {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-tab-label {
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
.dates {
|
||||||
|
|
||||||
|
.mat-form-field {
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,12 +1,42 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||||
|
import { Subject } from 'rxjs';
|
||||||
|
import { takeUntil } from 'rxjs/operators';
|
||||||
|
|
||||||
|
import { fuseAnimations } from 'src/@fuse/animations';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-notice-board',
|
selector: 'app-notice-board',
|
||||||
templateUrl: './notice-board.component.html',
|
templateUrl: './notice-board.component.html',
|
||||||
styleUrls: ['./notice-board.component.scss']
|
styleUrls: ['./notice-board.component.scss'],
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
animations: fuseAnimations
|
||||||
})
|
})
|
||||||
export class NoticeBoardComponent implements OnInit {
|
export class NoticeBoardComponent implements OnInit, OnDestroy {
|
||||||
constructor() {}
|
private unsubscribeAll: Subject<any>;
|
||||||
|
|
||||||
ngOnInit() {}
|
constructor(private fb: FormBuilder) {
|
||||||
|
// Set the private defaults
|
||||||
|
this.unsubscribeAll = new Subject();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Lifecycle hooks
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On init
|
||||||
|
*/
|
||||||
|
ngOnInit(): void {
|
||||||
|
// Subscribe to update order on changes
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On destroy
|
||||||
|
*/
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
// Unsubscribe from all subscriptions
|
||||||
|
this.unsubscribeAll.next();
|
||||||
|
this.unsubscribeAll.complete();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,8 @@ import { MatSortModule } from '@angular/material/sort';
|
||||||
import { MatTableModule } from '@angular/material/table';
|
import { MatTableModule } from '@angular/material/table';
|
||||||
import { MatTabsModule } from '@angular/material/tabs';
|
import { MatTabsModule } from '@angular/material/tabs';
|
||||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||||
|
import { MatDividerModule } from '@angular/material/divider';
|
||||||
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
||||||
|
|
||||||
import { FuseSharedModule } from 'src/@fuse/shared.module';
|
import { FuseSharedModule } from 'src/@fuse/shared.module';
|
||||||
import { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module';
|
import { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module';
|
||||||
|
|
@ -35,6 +37,8 @@ import { RESOLVERS } from './resolver';
|
||||||
MatTableModule,
|
MatTableModule,
|
||||||
MatTabsModule,
|
MatTabsModule,
|
||||||
MatCheckboxModule,
|
MatCheckboxModule,
|
||||||
|
MatDividerModule,
|
||||||
|
MatButtonToggleModule,
|
||||||
|
|
||||||
FuseSharedModule,
|
FuseSharedModule,
|
||||||
FuseWidgetModule,
|
FuseWidgetModule,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user