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({
|
||||
selector: 'app-check-notice',
|
||||
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 {
|
||||
constructor() {}
|
||||
export class CheckNoticeComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||
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 { MatTableModule } from '@angular/material/table';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user