check-notice
This commit is contained in:
byung eun park
parent
b4713392b1
commit
658d5eb3d6
|
|
@ -1 +1,100 @@
|
||||||
<p>check-notice works!</p>
|
<div id="check-notice" 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 class="subtitle secondary-text">
|
||||||
|
<span>점검공지 메세지 설정</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / APP TITLE -->
|
||||||
|
<button
|
||||||
|
mat-raised-button
|
||||||
|
class="save-product-button"
|
||||||
|
(click)="saveCheckNotice()"
|
||||||
|
>
|
||||||
|
<span>SAVE</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- / HEADER -->
|
||||||
|
|
||||||
|
<!-- CONTENT CARD -->
|
||||||
|
<div class="content-card">
|
||||||
|
<!-- CONTENT -->
|
||||||
|
<div class="content">
|
||||||
|
<form
|
||||||
|
name="noticeCheckForm"
|
||||||
|
[formGroup]="noticeCheckForm"
|
||||||
|
class="check-notice w-100-p"
|
||||||
|
fxLayout="column"
|
||||||
|
fxFlex
|
||||||
|
>
|
||||||
|
<mat-tab-group #tabGroup (selectedTabChange)="tabChanged($event)">
|
||||||
|
<mat-tab label="오픈 메세지 설정">
|
||||||
|
<div class="tab-content p-24" fusePerfectScrollbar>
|
||||||
|
<mat-form-field
|
||||||
|
appearance="outline"
|
||||||
|
floatLabel="always"
|
||||||
|
class="w-100-p"
|
||||||
|
>
|
||||||
|
<mat-label>오픈 메세지 입력</mat-label>
|
||||||
|
<textarea
|
||||||
|
matInput
|
||||||
|
placeholder="check-notice Description"
|
||||||
|
name="description"
|
||||||
|
formControlName="description"
|
||||||
|
rows="25"
|
||||||
|
>
|
||||||
|
</textarea>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</mat-tab>
|
||||||
|
|
||||||
|
<mat-tab label="점검 메세지 설정">
|
||||||
|
<div class="tab-content p-24" fusePerfectScrollbar>
|
||||||
|
<mat-form-field
|
||||||
|
appearance="outline"
|
||||||
|
floatLabel="always"
|
||||||
|
class="w-100-p"
|
||||||
|
>
|
||||||
|
<mat-label>점검 메세지 입력</mat-label>
|
||||||
|
<textarea
|
||||||
|
matInput
|
||||||
|
placeholder="check-notice Description"
|
||||||
|
name="description"
|
||||||
|
formControlName="description"
|
||||||
|
rows="25"
|
||||||
|
>
|
||||||
|
</textarea>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</mat-tab>
|
||||||
|
</mat-tab-group>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT -->
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT CARD -->
|
||||||
|
</div>
|
||||||
|
<!-- / CENTER -->
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
#app-check-notice {
|
||||||
|
.header {
|
||||||
|
.check-notice-image {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 56px;
|
||||||
|
min-width: 56px;
|
||||||
|
max-width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
min-height: 56px;
|
||||||
|
max-height: 56px;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
width: auto;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
margin: 6px 0 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
.mat-tab-group,
|
||||||
|
.mat-tab-body-wrapper,
|
||||||
|
.tab-content {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-tab-body-content {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-tab-label {
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-notice-image {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
margin-right: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
width: auto;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Temporary prefix alignment fix
|
||||||
|
.mat-form-field-appearance-outline .mat-form-field-prefix,
|
||||||
|
.mat-form-field-appearance-outline .mat-form-field-suffix {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,12 +1,70 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import {
|
||||||
|
Component,
|
||||||
|
OnInit,
|
||||||
|
OnDestroy,
|
||||||
|
ViewEncapsulation,
|
||||||
|
AfterViewInit,
|
||||||
|
ViewChild,
|
||||||
|
ElementRef
|
||||||
|
} from '@angular/core';
|
||||||
|
import { MatTabChangeEvent } from '@angular/material';
|
||||||
|
import { fuseAnimations } from 'src/@fuse/animations';
|
||||||
|
|
||||||
|
import { Subject } from 'rxjs';
|
||||||
|
import { FormGroup, FormBuilder } from '@angular/forms';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-check-notice',
|
selector: 'app-check-notice',
|
||||||
templateUrl: './check-notice.component.html',
|
templateUrl: './check-notice.component.html',
|
||||||
styleUrls: ['./check-notice.component.scss']
|
styleUrls: ['./check-notice.component.scss'],
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
animations: fuseAnimations
|
||||||
})
|
})
|
||||||
export class CheckNoticeComponent implements OnInit {
|
export class CheckNoticeComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||||
constructor() {}
|
noticeCheckForm: FormGroup;
|
||||||
|
idx: number;
|
||||||
|
|
||||||
ngOnInit() {}
|
@ViewChild('tabGroup', { static: true }) tabGroup;
|
||||||
|
|
||||||
|
// Private
|
||||||
|
private unSubScribeAll: Subject<any>;
|
||||||
|
|
||||||
|
constructor(private fb: FormBuilder) {
|
||||||
|
// Set the private defaults
|
||||||
|
this.unSubScribeAll = new Subject();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.noticeCheckForm = this.fb.group({
|
||||||
|
description: ''
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On destroy
|
||||||
|
*/
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
// Unsubscribe from all subscriptions
|
||||||
|
this.unSubScribeAll.next();
|
||||||
|
this.unSubScribeAll.complete();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
console.log(this.tabGroup.selectedIndex);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Save product
|
||||||
|
*/
|
||||||
|
saveCheckNotice(): void {
|
||||||
|
const data = this.noticeCheckForm.getRawValue();
|
||||||
|
// console.log(this.selectedIndex);
|
||||||
|
console.log(data);
|
||||||
|
console.log(this.idx);
|
||||||
|
}
|
||||||
|
|
||||||
|
tabChanged(tabChangeEvent: MatTabChangeEvent): void {
|
||||||
|
console.log('tabChangeEvent => ', tabChangeEvent);
|
||||||
|
console.log('index => ', tabChangeEvent.index);
|
||||||
|
this.idx = tabChangeEvent.index;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ import { MatSelectModule } from '@angular/material/select';
|
||||||
import { MatSortModule } from '@angular/material/sort';
|
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 { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user