diff --git a/src/app/pages/infos/info/component/event-regist.component.html b/src/app/pages/infos/info/component/event-regist.component.html index 7a3a3f3..50542eb 100644 --- a/src/app/pages/infos/info/component/event-regist.component.html +++ b/src/app/pages/infos/info/component/event-regist.component.html @@ -1 +1,376 @@ -

event-regist works!

+
+ +
+
+
+ home + chevron_right + 메인 이벤트 등록 +
+
메인 이벤트 등록하기
+
+
+ + + +
+
+ +
+ +
+
+
+
1
+
+ +
+ + 열림 + 닫음 + +
+
+ + + + +
+
+
dddddddddddddddd.jpg
+ +
+
+ +
+ +
+
+
+ +
+ + + +
+ +
+
+
+
2
+
+ +
+ + 열림 + 닫음 + +
+
+ + + + +
+
+
dddddddddddddddd.jpg
+ +
+ +
+ +
+ +
+
+
+ +
+ + + +
+ +
+
+
+
3
+
+ +
+ + 열림 + 닫음 + +
+ +
+ +
+ +
+
dddddddddddddddd.jpg
+ +
+
+ +
+ +
+
+
+ +
+ + +
+ +
+
+
+
4
+
+ +
+ + 열림 + 닫음 + +
+ +
+ +
+ +
+
dddddddddddddddd.jpg
+ +
+
+ +
+ +
+
+
+ +
+ + + +
+ +
+
+
+
5
+
+ +
+ + 열림 + 닫음 + +
+ +
+ +
+ +
+
dddddddddddddddd.jpg
+ +
+ +
+ +
+ +
+
+
+ +
+ + + +
+ +
+
+
+
6
+
+ +
+ + 열림 + 닫음 + +
+ +
+ +
+ +
+
dddddddddddddddd.jpg
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+
+ +
diff --git a/src/app/pages/infos/info/component/event-regist.component.scss b/src/app/pages/infos/info/component/event-regist.component.scss index e69de29..45f1393 100644 --- a/src/app/pages/infos/info/component/event-regist.component.scss +++ b/src/app/pages/infos/info/component/event-regist.component.scss @@ -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%; + } + } + } + } +} diff --git a/src/app/pages/infos/info/component/event-regist.component.ts b/src/app/pages/infos/info/component/event-regist.component.ts index f18aefe..880260f 100644 --- a/src/app/pages/infos/info/component/event-regist.component.ts +++ b/src/app/pages/infos/info/component/event-regist.component.ts @@ -1,9 +1,12 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { fuseAnimations } from 'src/@fuse/animations'; @Component({ selector: 'app-event-regist', 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 { constructor() {} diff --git a/src/app/pages/infos/info/component/free-board.component.html b/src/app/pages/infos/info/component/free-board.component.html index b467682..e48d551 100644 --- a/src/app/pages/infos/info/component/free-board.component.html +++ b/src/app/pages/infos/info/component/free-board.component.html @@ -1 +1,167 @@ -

free-board works!

+
+ +
+ + + +
+ +
+ + + + + + + + +
+ + + + +
+ + + 번호 + +

{{ i }}

+ + + + + + 제목 + +

{{ serviceCenter.title }}

+ + + + + + 내용 + + +

010-3004-2001

+ + + + + + 작성자 + +

+ + 1,000,000 +

+ + + + + + 작성일 + +

+ + 5000 +

+ + + + + + 문의상태 + + +

+ + 브론즈 +

+ + + + + + 삭제버튼 + +

+ +

+ + + + + + + + + + + +
+ +
+ +
diff --git a/src/app/pages/infos/info/component/free-board.component.scss b/src/app/pages/infos/info/component/free-board.component.scss index e69de29..e65611c 100644 --- a/src/app/pages/infos/info/component/free-board.component.scss +++ b/src/app/pages/infos/info/component/free-board.component.scss @@ -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%; + } + } +} diff --git a/src/app/pages/infos/info/component/free-board.component.ts b/src/app/pages/infos/info/component/free-board.component.ts index f3bee95..c7cf029 100644 --- a/src/app/pages/infos/info/component/free-board.component.ts +++ b/src/app/pages/infos/info/component/free-board.component.ts @@ -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({ selector: 'app-free-board', 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 { - constructor() {} +export class FreeBoardComponent implements OnInit, OnDestroy, AfterViewInit { + dataSource: ServiceCenterDataSource | null; - ngOnInit() {} + displayedColumns = [ + 'idx', + 'title', + 'contents', + 'register', + 'createdAt', + 'contactStatus' + ]; + private unsubscribeAll: Subject; + + @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 {} } diff --git a/src/app/pages/infos/info/component/notice-board.component.html b/src/app/pages/infos/info/component/notice-board.component.html index 2f009c8..2a686ad 100644 --- a/src/app/pages/infos/info/component/notice-board.component.html +++ b/src/app/pages/infos/info/component/notice-board.component.html @@ -1 +1,117 @@ -

notice-board works!

+
+ +
+ + + +
+ +
+ +
+
+
+ 공지 관리 +
+
+
+ +
+ + + +
+ +
+ +
+
+
+ access_time +
공지사항 또는 이벤트 작성하기
+
+
+
+ + 제목 + + + +
+ + 공지사항 + 이벤트 + +
+
+ + + 내용 + + + + + + + +
+
+
+ +
+ +
+ +
+ +
diff --git a/src/app/pages/infos/info/component/notice-board.component.scss b/src/app/pages/infos/info/component/notice-board.component.scss index e69de29..090de00 100644 --- a/src/app/pages/infos/info/component/notice-board.component.scss +++ b/src/app/pages/infos/info/component/notice-board.component.scss @@ -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; + } + } + } + +} diff --git a/src/app/pages/infos/info/component/notice-board.component.ts b/src/app/pages/infos/info/component/notice-board.component.ts index a96f246..14a5b8f 100644 --- a/src/app/pages/infos/info/component/notice-board.component.ts +++ b/src/app/pages/infos/info/component/notice-board.component.ts @@ -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({ selector: 'app-notice-board', 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 { - constructor() {} +export class NoticeBoardComponent implements OnInit, OnDestroy { + private unsubscribeAll: Subject; - 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(); + } } diff --git a/src/app/pages/infos/info/info.module.ts b/src/app/pages/infos/info/info.module.ts index 1b8306a..e900d89 100644 --- a/src/app/pages/infos/info/info.module.ts +++ b/src/app/pages/infos/info/info.module.ts @@ -12,6 +12,8 @@ import { MatSortModule } from '@angular/material/sort'; import { MatTableModule } from '@angular/material/table'; import { MatTabsModule } from '@angular/material/tabs'; 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 { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module'; @@ -35,6 +37,8 @@ import { RESOLVERS } from './resolver'; MatTableModule, MatTabsModule, MatCheckboxModule, + MatDividerModule, + MatButtonToggleModule, FuseSharedModule, FuseWidgetModule,