달력, 팝업창
This commit is contained in:
byung eun park
parent
03e923fed5
commit
9d7a244d5d
5
package-lock.json
generated
5
package-lock.json
generated
|
|
@ -7477,6 +7477,11 @@
|
||||||
"deep-freeze-strict": "^1.1.1"
|
"deep-freeze-strict": "^1.1.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"ngx-color-picker": {
|
||||||
|
"version": "7.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-7.5.0.tgz",
|
||||||
|
"integrity": "sha512-bTW16A3IitWUNGc3kZtE+N1r3FpmUj7uJTG80eym2nQLvsROkMntalKJDo1SQVQhh9Nh4N9C88UezdMg8fjR5Q=="
|
||||||
|
},
|
||||||
"ngx-cookie-service": {
|
"ngx-cookie-service": {
|
||||||
"version": "2.2.0",
|
"version": "2.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-2.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-2.2.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -39,6 +39,7 @@
|
||||||
"hammerjs": "^2.0.8",
|
"hammerjs": "^2.0.8",
|
||||||
"lodash": "^4.17.15",
|
"lodash": "^4.17.15",
|
||||||
"moment": "^2.24.0",
|
"moment": "^2.24.0",
|
||||||
|
"ngx-color-picker": "7.5.0",
|
||||||
"ngx-cookie-service": "^2.2.0",
|
"ngx-cookie-service": "^2.2.0",
|
||||||
"perfect-scrollbar": "^1.4.0",
|
"perfect-scrollbar": "^1.4.0",
|
||||||
"prismjs": "^1.17.1",
|
"prismjs": "^1.17.1",
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,7 @@ import { UserModule } from 'src/modules/user/user.module';
|
||||||
import { GameModule } from 'src/modules/game/game.module';
|
import { GameModule } from 'src/modules/game/game.module';
|
||||||
import { SitesModule } from 'src/modules/sites/sites.module';
|
import { SitesModule } from 'src/modules/sites/sites.module';
|
||||||
import { SpecialModule } from 'src/modules/special/special.module';
|
import { SpecialModule } from 'src/modules/special/special.module';
|
||||||
|
import { InfosModule } from 'src/modules/infos/infos.module';
|
||||||
import { from } from 'rxjs';
|
import { from } from 'rxjs';
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
|
@ -62,7 +63,8 @@ import { from } from 'rxjs';
|
||||||
UserModule.forRoot(),
|
UserModule.forRoot(),
|
||||||
GameModule.forRoot(),
|
GameModule.forRoot(),
|
||||||
SitesModule.forRoot(),
|
SitesModule.forRoot(),
|
||||||
SpecialModule.forRoot()
|
SpecialModule.forRoot(),
|
||||||
|
InfosModule.forRoot()
|
||||||
],
|
],
|
||||||
declarations: [AppComponent],
|
declarations: [AppComponent],
|
||||||
providers: [],
|
providers: [],
|
||||||
|
|
|
||||||
|
|
@ -85,6 +85,7 @@ $typography: mat-typography-config(
|
||||||
@import 'src/app/pages/accounts/component/authentication/authentication.theme';
|
@import 'src/app/pages/accounts/component/authentication/authentication.theme';
|
||||||
|
|
||||||
@import 'src/app/pages/specials/special/component/alert-config.theme';
|
@import 'src/app/pages/specials/special/component/alert-config.theme';
|
||||||
|
@import 'src/app/pages/statics/calendar.theme';
|
||||||
|
|
||||||
// Define a mixin for easier access
|
// Define a mixin for easier access
|
||||||
@mixin components-theme($theme) {
|
@mixin components-theme($theme) {
|
||||||
|
|
@ -95,6 +96,7 @@ $typography: mat-typography-config(
|
||||||
|
|
||||||
// UI
|
// UI
|
||||||
@include ui-cards-theme($theme);
|
@include ui-cards-theme($theme);
|
||||||
|
@include calendar-theme($theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,244 @@
|
||||||
|
<div id="popup-set-detail" 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 -->
|
||||||
|
</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"
|
||||||
|
>account_circle</mat-icon
|
||||||
|
>
|
||||||
|
<div class="h2 secondary-text">Customer</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="customer mb-32">
|
||||||
|
<table class="simple">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Email</th>
|
||||||
|
<th>Phone</th>
|
||||||
|
<th>Company</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<span class="name text-truncate"> </span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="email text-truncate">11</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="phone text-truncate">22</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="company text-truncate">33 </span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<mat-accordion class="addresses">
|
||||||
|
<mat-expansion-panel>
|
||||||
|
<mat-expansion-panel-header>
|
||||||
|
<mat-panel-title>Shipping Address</mat-panel-title>
|
||||||
|
</mat-expansion-panel-header>
|
||||||
|
|
||||||
|
<div fxFlex fxLayout="column">
|
||||||
|
<div class="address h4 py-24">44</div>
|
||||||
|
</div>
|
||||||
|
</mat-expansion-panel>
|
||||||
|
|
||||||
|
<mat-expansion-panel>
|
||||||
|
<mat-expansion-panel-header>
|
||||||
|
<mat-panel-title>Invoice Address</mat-panel-title>
|
||||||
|
</mat-expansion-panel-header>
|
||||||
|
|
||||||
|
<div fxFlex fxLayout="column">
|
||||||
|
<div class="address h4 py-24">55</div>
|
||||||
|
</div>
|
||||||
|
</mat-expansion-panel>
|
||||||
|
</mat-accordion>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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">Order Status</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="simple">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Updated On</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<span class="status h6 p-4">
|
||||||
|
66
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span>
|
||||||
|
77
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<form
|
||||||
|
class="update-status p-24"
|
||||||
|
(ngSubmit)="updateStatus()"
|
||||||
|
[formGroup]="statusForm"
|
||||||
|
fxLayout="row"
|
||||||
|
fxLayoutAlign="start center"
|
||||||
|
>
|
||||||
|
<mat-form-field appearance="outline" class="mr-16" fxFlex>
|
||||||
|
<mat-label>Status</mat-label>
|
||||||
|
<mat-select formControlName="newStatus" required>
|
||||||
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<button mat-raised-button class="mat-accent">
|
||||||
|
Update Status
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section pb-48">
|
||||||
|
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<mat-icon class="m-0 mr-16 secondary-text"
|
||||||
|
>attach_money</mat-icon
|
||||||
|
>
|
||||||
|
<div class="h2 secondary-text">Payment</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="simple">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>TransactionID</th>
|
||||||
|
<th>Payment Method</th>
|
||||||
|
<th>Amount</th>
|
||||||
|
<th>Date</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<span class="text-truncate">
|
||||||
|
ddd
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-truncate">
|
||||||
|
ddd
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-truncate">
|
||||||
|
dd
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text-truncate">
|
||||||
|
ddd
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section pb-48">
|
||||||
|
<div class="pb-16" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<mat-icon class="m-0 mr-16 secondary-text"
|
||||||
|
>local_shipping</mat-icon
|
||||||
|
>
|
||||||
|
<div class="h2 secondary-text">Shipping</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="simple">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Tracking Code</th>
|
||||||
|
<th>Carrier</th>
|
||||||
|
<th>Weight</th>
|
||||||
|
<th>Fee</th>
|
||||||
|
<th>Date</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="tracking-code">
|
||||||
|
ddd
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
ffff
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
fff
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
fff
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
ffff
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</mat-tab>
|
||||||
|
</mat-tab-group>
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT -->
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT CARD -->
|
||||||
|
</div>
|
||||||
|
<!-- / CENTER -->
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,397 @@
|
||||||
|
@import "src/@fuse/scss/fuse";
|
||||||
|
|
||||||
|
#popup-set-detail {
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
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-popup-set-detail',
|
||||||
|
templateUrl: './popup-set-detail.component.html',
|
||||||
|
styleUrls: ['./popup-set-detail.component.scss'],
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
animations: fuseAnimations
|
||||||
|
})
|
||||||
|
export class PopupSetDetailComponent implements OnInit, OnDestroy {
|
||||||
|
private unsubscribeAll: Subject<any>;
|
||||||
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1 +1,164 @@
|
||||||
<p>popup-set works!</p>
|
<div id="popup-set" 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="popup-set-table"
|
||||||
|
#table
|
||||||
|
[dataSource]="dataSource"
|
||||||
|
matSort
|
||||||
|
[@animateStagger]="{ value: '50' }"
|
||||||
|
fusePerfectScrollbar
|
||||||
|
>
|
||||||
|
<!-- ID Column -->
|
||||||
|
<ng-container matColumnDef="id">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>ID</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let order">
|
||||||
|
<p class="text-truncate">1</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Reference Column -->
|
||||||
|
<ng-container matColumnDef="reference">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
||||||
|
>Reference</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||||
|
<p class="text-truncate">{{ order.reference }}</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Name Column -->
|
||||||
|
<ng-container matColumnDef="customer">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>Customer</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let order">
|
||||||
|
<p class="text-truncate">
|
||||||
|
2
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Total Price Column -->
|
||||||
|
<ng-container matColumnDef="total">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md
|
||||||
|
>Total</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
|
||||||
|
<p class="total-price text-truncate">
|
||||||
|
1
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Payment Column -->
|
||||||
|
<ng-container matColumnDef="payment">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
||||||
|
>Payment</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||||
|
<p class="text-truncate">
|
||||||
|
3
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Status Column -->
|
||||||
|
<ng-container matColumnDef="status">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header
|
||||||
|
>Status</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let order">
|
||||||
|
<p
|
||||||
|
class="status text-truncate h6 p-4"
|
||||||
|
[ngClass]="order.status[0].color"
|
||||||
|
>
|
||||||
|
4
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Date Column -->
|
||||||
|
<ng-container matColumnDef="date">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
|
||||||
|
>Date</mat-header-cell
|
||||||
|
>
|
||||||
|
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
||||||
|
<p class="text-truncate">
|
||||||
|
6
|
||||||
|
</p>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<mat-header-row
|
||||||
|
*matHeaderRowDef="displayedColumns; sticky: true"
|
||||||
|
></mat-header-row>
|
||||||
|
|
||||||
|
<mat-row
|
||||||
|
*matRowDef="let order; columns: displayedColumns"
|
||||||
|
class="popup-set"
|
||||||
|
matRipple
|
||||||
|
>
|
||||||
|
</mat-row>
|
||||||
|
</mat-table>
|
||||||
|
|
||||||
|
<mat-paginator
|
||||||
|
#paginator
|
||||||
|
[length]="10"
|
||||||
|
[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-popup-set {
|
||||||
|
#popup-set {
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-set-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-set {
|
||||||
|
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,73 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import {
|
||||||
|
Component,
|
||||||
|
OnDestroy,
|
||||||
|
OnInit,
|
||||||
|
ViewEncapsulation,
|
||||||
|
ViewChild,
|
||||||
|
ElementRef
|
||||||
|
} from '@angular/core';
|
||||||
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
|
import { MatSort } from '@angular/material/sort';
|
||||||
|
import { DataSource } from '@angular/cdk/collections';
|
||||||
|
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-popup-set',
|
selector: 'app-popup-set',
|
||||||
templateUrl: './popup-set.component.html',
|
templateUrl: './popup-set.component.html',
|
||||||
styleUrls: ['./popup-set.component.scss']
|
styleUrls: ['./popup-set.component.scss'],
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
animations: fuseAnimations
|
||||||
})
|
})
|
||||||
export class PopupSetComponent implements OnInit {
|
export class PopupSetComponent implements OnInit, OnDestroy {
|
||||||
constructor() {}
|
dataSource: null;
|
||||||
|
displayedColumns = [
|
||||||
|
'id',
|
||||||
|
'reference',
|
||||||
|
'customer',
|
||||||
|
'total',
|
||||||
|
'payment',
|
||||||
|
'status',
|
||||||
|
'date'
|
||||||
|
];
|
||||||
|
|
||||||
ngOnInit() {}
|
@ViewChild(MatPaginator, { static: true })
|
||||||
|
paginator: MatPaginator;
|
||||||
|
|
||||||
|
@ViewChild('filter', { static: true })
|
||||||
|
filter: ElementRef;
|
||||||
|
|
||||||
|
@ViewChild(MatSort, { static: true })
|
||||||
|
sort: MatSort;
|
||||||
|
|
||||||
|
// Private
|
||||||
|
private unsubscribeAll: Subject<any>;
|
||||||
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,10 @@ const routes: Routes = [
|
||||||
{
|
{
|
||||||
path: 'specials',
|
path: 'specials',
|
||||||
loadChildren: './specials/specials.module#SpecialsModule'
|
loadChildren: './specials/specials.module#SpecialsModule'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'statics',
|
||||||
|
loadChildren: './statics/statics.module#StaticsModule'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
173
src/app/pages/statics/calendar.component.html
Normal file
173
src/app/pages/statics/calendar.component.html
Normal file
|
|
@ -0,0 +1,173 @@
|
||||||
|
<div id="calendar" class="page-layout simple fullwidth">
|
||||||
|
<!-- HEADER -->
|
||||||
|
<div class="header p-16 p-sm-24" [ngClass]="viewDate | date: 'MMM'">
|
||||||
|
<div class="header-content" fxLayout="column" fxLayoutAlign="space-between">
|
||||||
|
<div
|
||||||
|
class="header-top"
|
||||||
|
fxLayout="row"
|
||||||
|
fxLayoutAlign="space-between center"
|
||||||
|
fxLayout.xs="column"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="logo mb-16 mb-sm-0"
|
||||||
|
fxLayout="row"
|
||||||
|
fxLayoutAlign="start center"
|
||||||
|
>
|
||||||
|
<mat-icon
|
||||||
|
class="logo-icon"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
|
||||||
|
>
|
||||||
|
today
|
||||||
|
</mat-icon>
|
||||||
|
<span
|
||||||
|
class="logo-text"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
|
||||||
|
>
|
||||||
|
Calendar
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TOOLBAR -->
|
||||||
|
<div class="toolbar" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<button mat-icon-button aria-label="Search" matTooltip="Search">
|
||||||
|
<mat-icon>search</mat-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
mwlCalendarToday
|
||||||
|
[(viewDate)]="viewDate"
|
||||||
|
(viewDateChange)="selectedDay = { date: $event }"
|
||||||
|
aria-label="Today"
|
||||||
|
matTooltip="Today"
|
||||||
|
>
|
||||||
|
<mat-icon>today</mat-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
(click)="view = 'day'"
|
||||||
|
aria-label="Day"
|
||||||
|
matTooltip="Day"
|
||||||
|
>
|
||||||
|
<mat-icon>view_day</mat-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
(click)="view = 'week'"
|
||||||
|
aria-label="Week"
|
||||||
|
matTooltip="Week"
|
||||||
|
>
|
||||||
|
<mat-icon>view_week</mat-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
(click)="view = 'month'"
|
||||||
|
aria-label="Month"
|
||||||
|
matTooltip="Month"
|
||||||
|
>
|
||||||
|
<mat-icon>view_module</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / TOOLBAR -->
|
||||||
|
|
||||||
|
<!-- HEADER BOTTOM -->
|
||||||
|
<div
|
||||||
|
class="header-bottom"
|
||||||
|
fxLayout="row"
|
||||||
|
fxLayoutAlign="center center"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '150ms' } }"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
class="arrow"
|
||||||
|
mwlCalendarPreviousView
|
||||||
|
[view]="view"
|
||||||
|
[(viewDate)]="viewDate"
|
||||||
|
(viewDateChange)="selectedDay = { date: $event }"
|
||||||
|
aria-label="Previous"
|
||||||
|
>
|
||||||
|
<mat-icon>chevron_left</mat-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
{{ viewDate | calendarDate: view + 'ViewTitle':'en' }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
class="arrow"
|
||||||
|
mwlCalendarNextView
|
||||||
|
[view]="view"
|
||||||
|
[(viewDate)]="viewDate"
|
||||||
|
(viewDateChange)="selectedDay = { date: $event }"
|
||||||
|
aria-label="Next"
|
||||||
|
>
|
||||||
|
<mat-icon>chevron_right</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- / HEADER BOTTOM -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ADD EVENT BUTTON -->
|
||||||
|
<button
|
||||||
|
mat-fab
|
||||||
|
class="add-event-button mat-accent"
|
||||||
|
(click)="addEvent()"
|
||||||
|
aria-label="Add event"
|
||||||
|
[@animate]="{ value: '*', params: { delay: '300ms', scale: '0.2' } }"
|
||||||
|
>
|
||||||
|
<mat-icon>add</mat-icon>
|
||||||
|
</button>
|
||||||
|
<!-- / ADD EVENT BUTTON -->
|
||||||
|
</div>
|
||||||
|
<!-- / HEADER -->
|
||||||
|
|
||||||
|
<!-- CONTENT -->
|
||||||
|
<div
|
||||||
|
class="content"
|
||||||
|
fusePerfectScrollbar
|
||||||
|
[@animate]="{ value: '*', params: { delay: '200ms', y: '50px' } }"
|
||||||
|
>
|
||||||
|
<div [ngSwitch]="view">
|
||||||
|
<mwl-calendar-month-view
|
||||||
|
*ngSwitchCase="'month'"
|
||||||
|
[viewDate]="viewDate"
|
||||||
|
[events]="events"
|
||||||
|
[refresh]="refresh"
|
||||||
|
[activeDayIsOpen]="activeDayIsOpen"
|
||||||
|
(dayClicked)="dayClicked($event.day)"
|
||||||
|
(eventClicked)="editEvent('edit', $event.event)"
|
||||||
|
(eventTimesChanged)="eventTimesChanged($event)"
|
||||||
|
(beforeViewRender)="beforeMonthViewRender($event)"
|
||||||
|
>
|
||||||
|
</mwl-calendar-month-view>
|
||||||
|
<mwl-calendar-week-view
|
||||||
|
*ngSwitchCase="'week'"
|
||||||
|
[viewDate]="viewDate"
|
||||||
|
(viewDateChange)="selectedDay = { date: $event }"
|
||||||
|
[events]="events"
|
||||||
|
[refresh]="refresh"
|
||||||
|
(dayClicked)="dayClicked($event.day)"
|
||||||
|
(eventClicked)="editEvent('edit', $event.event)"
|
||||||
|
(eventTimesChanged)="eventTimesChanged($event)"
|
||||||
|
>
|
||||||
|
</mwl-calendar-week-view>
|
||||||
|
<mwl-calendar-day-view
|
||||||
|
*ngSwitchCase="'day'"
|
||||||
|
[viewDate]="viewDate"
|
||||||
|
(viewDateChange)="selectedDay = { date: $event }"
|
||||||
|
[events]="events"
|
||||||
|
[refresh]="refresh"
|
||||||
|
(dayClicked)="dayClicked($event.day)"
|
||||||
|
(eventClicked)="editEvent('edit', $event.event)"
|
||||||
|
(eventTimesChanged)="eventTimesChanged($event)"
|
||||||
|
>
|
||||||
|
</mwl-calendar-day-view>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT -->
|
||||||
|
</div>
|
||||||
310
src/app/pages/statics/calendar.component.scss
Normal file
310
src/app/pages/statics/calendar.component.scss
Normal file
|
|
@ -0,0 +1,310 @@
|
||||||
|
@import "src/@fuse/scss/fuse";
|
||||||
|
@import "node_modules/angular-calendar/scss/angular-calendar";
|
||||||
|
|
||||||
|
.cal-month-view {
|
||||||
|
|
||||||
|
.cal-header {
|
||||||
|
|
||||||
|
.cal-cell {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-day-cell {
|
||||||
|
|
||||||
|
@include media-breakpoint(lg) {
|
||||||
|
min-height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint(gt-lg) {
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.cal-selected {
|
||||||
|
border: none;
|
||||||
|
@include mat-elevation(9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-open-day-events {
|
||||||
|
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.54);
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
padding: 0 16px;
|
||||||
|
margin: 8px 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
@include mat-elevation(1);
|
||||||
|
transition: box-shadow 300ms ease;
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@include mat-elevation(3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-event {
|
||||||
|
top: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
mwl-calendar-event-title {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.cal-event-title {
|
||||||
|
display: block;
|
||||||
|
padding: 21px 24px;
|
||||||
|
line-height: 1;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mwl-calendar-event-actions {
|
||||||
|
|
||||||
|
.cal-event-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.cal-event-action {
|
||||||
|
display: block;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-week-view {
|
||||||
|
|
||||||
|
.cal-header > b {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-event {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
mwl-calendar-event-title {
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex: 1;
|
||||||
|
order: 0;
|
||||||
|
|
||||||
|
.cal-event-title {
|
||||||
|
display: block;
|
||||||
|
line-height: 1;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mwl-calendar-event-actions {
|
||||||
|
order: 1;
|
||||||
|
|
||||||
|
.cal-event-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.cal-event-action {
|
||||||
|
display: block;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-day-view {
|
||||||
|
|
||||||
|
.cal-time {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-event {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
mwl-calendar-event-title {
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex: 1;
|
||||||
|
order: 0;
|
||||||
|
|
||||||
|
.cal-event-title {
|
||||||
|
display: block;
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mwl-calendar-event-actions {
|
||||||
|
order: 1;
|
||||||
|
|
||||||
|
.cal-event-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.cal-event-action {
|
||||||
|
display: block;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-hour-segment {
|
||||||
|
|
||||||
|
&:after,
|
||||||
|
&::after {
|
||||||
|
content: '' !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#calendar {
|
||||||
|
|
||||||
|
.header {
|
||||||
|
height: 200px;
|
||||||
|
min-height: 200px;
|
||||||
|
max-height: 200px;
|
||||||
|
position: relative;
|
||||||
|
background-size: 100% auto;
|
||||||
|
background-position: 0 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-color: #FAFAFA;
|
||||||
|
color: #FFFFFF;
|
||||||
|
|
||||||
|
@include media-breakpoint(xs) {
|
||||||
|
height: 164px;
|
||||||
|
min-height: 164px;
|
||||||
|
max-height: 164px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
background: rgba(0, 0, 0, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.Jan {
|
||||||
|
background-image: url('/assets/images/calendar/winter.jpg');
|
||||||
|
background-position: 0 85%;
|
||||||
|
}
|
||||||
|
&.Feb {
|
||||||
|
background-image: url('/assets/images/calendar/winter.jpg');
|
||||||
|
background-position: 0 85%;
|
||||||
|
}
|
||||||
|
&.Mar {
|
||||||
|
background-image: url('/assets/images/calendar/spring.jpg');
|
||||||
|
background-position: 0 40%;
|
||||||
|
}
|
||||||
|
&.Apr {
|
||||||
|
background-image: url('/assets/images/calendar/spring.jpg');
|
||||||
|
background-position: 0 40%;
|
||||||
|
}
|
||||||
|
&.May {
|
||||||
|
background-image: url('/assets/images/calendar/spring.jpg');
|
||||||
|
background-position: 0 40%;
|
||||||
|
}
|
||||||
|
&.Jun {
|
||||||
|
background-image: url('/assets/images/calendar/summer.jpg');
|
||||||
|
background-position: 0 80%;
|
||||||
|
}
|
||||||
|
&.Jul {
|
||||||
|
background-image: url('/assets/images/calendar/summer.jpg');
|
||||||
|
background-position: 0 80%;
|
||||||
|
}
|
||||||
|
&.Aug {
|
||||||
|
background-image: url('/assets/images/calendar/summer.jpg');
|
||||||
|
background-position: 0 80%;
|
||||||
|
}
|
||||||
|
&.Sep {
|
||||||
|
background-image: url('/assets/images/calendar/autumn.jpg');
|
||||||
|
background-position: 0 40%;
|
||||||
|
}
|
||||||
|
&.Oct {
|
||||||
|
background-image: url('/assets/images/calendar/autumn.jpg');
|
||||||
|
background-position: 0 40%;
|
||||||
|
}
|
||||||
|
&.Nov {
|
||||||
|
background-image: url('/assets/images/calendar/autumn.jpg');
|
||||||
|
background-position: 0 40%;
|
||||||
|
}
|
||||||
|
&.Dec {
|
||||||
|
background-image: url('/assets/images/calendar/winter.jpg');
|
||||||
|
background-position: 0 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.header-top {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
|
||||||
|
.logo-icon {
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-text {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-bottom {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 20px;
|
||||||
|
min-width: 160px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-event-button {
|
||||||
|
position: absolute;
|
||||||
|
right: 18px;
|
||||||
|
bottom: -26px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
262
src/app/pages/statics/calendar.component.ts
Normal file
262
src/app/pages/statics/calendar.component.ts
Normal file
|
|
@ -0,0 +1,262 @@
|
||||||
|
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { FormGroup } from '@angular/forms';
|
||||||
|
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
|
||||||
|
import { Subject } from 'rxjs';
|
||||||
|
import { startOfDay, isSameDay, isSameMonth } from 'date-fns';
|
||||||
|
import {
|
||||||
|
CalendarEvent,
|
||||||
|
CalendarEventAction,
|
||||||
|
CalendarEventTimesChangedEvent,
|
||||||
|
CalendarMonthViewDay
|
||||||
|
} from 'angular-calendar';
|
||||||
|
|
||||||
|
import { FuseConfirmDialogComponent } from 'src/@fuse/components/confirm-dialog/confirm-dialog.component';
|
||||||
|
import { fuseAnimations } from 'src/@fuse/animations';
|
||||||
|
|
||||||
|
import { CalendarService } from './calendar.service';
|
||||||
|
import { CalendarEventModel } from './event.model';
|
||||||
|
import { CalendarEventFormDialogComponent } from './event-form/event-form.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'calendar',
|
||||||
|
templateUrl: './calendar.component.html',
|
||||||
|
styleUrls: ['./calendar.component.scss'],
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
animations: fuseAnimations
|
||||||
|
})
|
||||||
|
export class CalendarComponent implements OnInit {
|
||||||
|
actions: CalendarEventAction[];
|
||||||
|
activeDayIsOpen: boolean;
|
||||||
|
confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
|
||||||
|
dialogRef: any;
|
||||||
|
events: CalendarEvent[];
|
||||||
|
refresh: Subject<any> = new Subject();
|
||||||
|
selectedDay: any;
|
||||||
|
view: string;
|
||||||
|
viewDate: Date;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private _matDialog: MatDialog,
|
||||||
|
private _calendarService: CalendarService
|
||||||
|
) {
|
||||||
|
// Set the defaults
|
||||||
|
this.view = 'month';
|
||||||
|
this.viewDate = new Date();
|
||||||
|
this.activeDayIsOpen = true;
|
||||||
|
this.selectedDay = { date: startOfDay(new Date()) };
|
||||||
|
|
||||||
|
this.actions = [
|
||||||
|
{
|
||||||
|
label: '<i class="material-icons s-16">edit</i>',
|
||||||
|
onClick: ({ event }: { event: CalendarEvent }): void => {
|
||||||
|
this.editEvent('edit', event);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '<i class="material-icons s-16">delete</i>',
|
||||||
|
onClick: ({ event }: { event: CalendarEvent }): void => {
|
||||||
|
this.deleteEvent(event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get events from service/server
|
||||||
|
*/
|
||||||
|
this.setEvents();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Lifecycle hooks
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On init
|
||||||
|
*/
|
||||||
|
ngOnInit(): void {
|
||||||
|
/**
|
||||||
|
* Watch re-render-refresh for updating db
|
||||||
|
*/
|
||||||
|
this.refresh.subscribe(updateDB => {
|
||||||
|
if (updateDB) {
|
||||||
|
this._calendarService.updateEvents(this.events);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this._calendarService.onEventsUpdated.subscribe(events => {
|
||||||
|
this.setEvents();
|
||||||
|
this.refresh.next();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Public methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set events
|
||||||
|
*/
|
||||||
|
setEvents(): void {
|
||||||
|
// this.events = this._calendarService.events.map(item => {
|
||||||
|
// item.actions = this.actions;
|
||||||
|
// return new CalendarEventModel(item);
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Before View Renderer
|
||||||
|
*
|
||||||
|
* @param {any} header
|
||||||
|
* @param {any} body
|
||||||
|
*/
|
||||||
|
beforeMonthViewRender({ header, body }): void {
|
||||||
|
/**
|
||||||
|
* Get the selected day
|
||||||
|
*/
|
||||||
|
const _selectedDay = body.find(_day => {
|
||||||
|
return _day.date.getTime() === this.selectedDay.date.getTime();
|
||||||
|
});
|
||||||
|
|
||||||
|
if (_selectedDay) {
|
||||||
|
/**
|
||||||
|
* Set selected day style
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
|
_selectedDay.cssClass = 'cal-selected';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Day clicked
|
||||||
|
*
|
||||||
|
* @param {MonthViewDay} day
|
||||||
|
*/
|
||||||
|
dayClicked(day: CalendarMonthViewDay): void {
|
||||||
|
const date: Date = day.date;
|
||||||
|
const events: CalendarEvent[] = day.events;
|
||||||
|
|
||||||
|
if (isSameMonth(date, this.viewDate)) {
|
||||||
|
if (
|
||||||
|
(isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
|
||||||
|
events.length === 0
|
||||||
|
) {
|
||||||
|
this.activeDayIsOpen = false;
|
||||||
|
} else {
|
||||||
|
this.activeDayIsOpen = true;
|
||||||
|
this.viewDate = date;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.selectedDay = day;
|
||||||
|
this.refresh.next();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Event times changed
|
||||||
|
* Event dropped or resized
|
||||||
|
*
|
||||||
|
* @param {CalendarEvent} event
|
||||||
|
* @param {Date} newStart
|
||||||
|
* @param {Date} newEnd
|
||||||
|
*/
|
||||||
|
eventTimesChanged({
|
||||||
|
event,
|
||||||
|
newStart,
|
||||||
|
newEnd
|
||||||
|
}: CalendarEventTimesChangedEvent): void {
|
||||||
|
event.start = newStart;
|
||||||
|
event.end = newEnd;
|
||||||
|
// console.warn('Dropped or resized', event);
|
||||||
|
this.refresh.next(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete Event
|
||||||
|
*
|
||||||
|
* @param event
|
||||||
|
*/
|
||||||
|
deleteEvent(event): void {
|
||||||
|
this.confirmDialogRef = this._matDialog.open(FuseConfirmDialogComponent, {
|
||||||
|
disableClose: false
|
||||||
|
});
|
||||||
|
|
||||||
|
this.confirmDialogRef.componentInstance.confirmMessage =
|
||||||
|
'Are you sure you want to delete?';
|
||||||
|
|
||||||
|
this.confirmDialogRef.afterClosed().subscribe(result => {
|
||||||
|
if (result) {
|
||||||
|
const eventIndex = this.events.indexOf(event);
|
||||||
|
this.events.splice(eventIndex, 1);
|
||||||
|
this.refresh.next(true);
|
||||||
|
}
|
||||||
|
this.confirmDialogRef = null;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Edit Event
|
||||||
|
*
|
||||||
|
* @param {string} action
|
||||||
|
* @param {CalendarEvent} event
|
||||||
|
*/
|
||||||
|
editEvent(action: string, event: CalendarEvent): void {
|
||||||
|
const eventIndex = this.events.indexOf(event);
|
||||||
|
|
||||||
|
this.dialogRef = this._matDialog.open(CalendarEventFormDialogComponent, {
|
||||||
|
panelClass: 'event-form-dialog',
|
||||||
|
data: {
|
||||||
|
event: event,
|
||||||
|
action: action
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.dialogRef.afterClosed().subscribe(response => {
|
||||||
|
if (!response) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const actionType: string = response[0];
|
||||||
|
const formData: FormGroup = response[1];
|
||||||
|
switch (actionType) {
|
||||||
|
/**
|
||||||
|
* Save
|
||||||
|
*/
|
||||||
|
case 'save':
|
||||||
|
this.events[eventIndex] = Object.assign(
|
||||||
|
this.events[eventIndex],
|
||||||
|
formData.getRawValue()
|
||||||
|
);
|
||||||
|
this.refresh.next(true);
|
||||||
|
|
||||||
|
break;
|
||||||
|
/**
|
||||||
|
* Delete
|
||||||
|
*/
|
||||||
|
case 'delete':
|
||||||
|
this.deleteEvent(event);
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add Event
|
||||||
|
*/
|
||||||
|
addEvent(): void {
|
||||||
|
this.dialogRef = this._matDialog.open(CalendarEventFormDialogComponent, {
|
||||||
|
panelClass: 'event-form-dialog',
|
||||||
|
data: {
|
||||||
|
action: 'new',
|
||||||
|
date: this.selectedDay.date
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.dialogRef.afterClosed().subscribe((response: FormGroup) => {
|
||||||
|
if (!response) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const newEvent = response.getRawValue();
|
||||||
|
newEvent.actions = this.actions;
|
||||||
|
this.events.push(newEvent);
|
||||||
|
this.refresh.next(true);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
83
src/app/pages/statics/calendar.service.ts
Normal file
83
src/app/pages/statics/calendar.service.ts
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { HttpClient } from '@angular/common/http';
|
||||||
|
import {
|
||||||
|
ActivatedRouteSnapshot,
|
||||||
|
Resolve,
|
||||||
|
RouterStateSnapshot
|
||||||
|
} from '@angular/router';
|
||||||
|
import { Observable, Subject } from 'rxjs';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class CalendarService implements Resolve<any> {
|
||||||
|
events: any;
|
||||||
|
onEventsUpdated: Subject<any>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*
|
||||||
|
* @param {HttpClient} _httpClient
|
||||||
|
*/
|
||||||
|
constructor(private _httpClient: HttpClient) {
|
||||||
|
// Set the defaults
|
||||||
|
this.onEventsUpdated = new Subject();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Public methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resolver
|
||||||
|
*
|
||||||
|
* @param {ActivatedRouteSnapshot} route
|
||||||
|
* @param {RouterStateSnapshot} state
|
||||||
|
* @returns {Observable<any> | Promise<any> | any}
|
||||||
|
*/
|
||||||
|
resolve(
|
||||||
|
route: ActivatedRouteSnapshot,
|
||||||
|
state: RouterStateSnapshot
|
||||||
|
): Observable<any> | Promise<any> | any {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
Promise.all([this.getEvents()]).then(([events]: [any]) => {
|
||||||
|
resolve();
|
||||||
|
}, reject);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get events
|
||||||
|
*
|
||||||
|
* @returns {Promise<any>}
|
||||||
|
*/
|
||||||
|
getEvents(): Promise<any> {
|
||||||
|
// return new Promise((resolve, reject) => {
|
||||||
|
|
||||||
|
// this._httpClient.get('api/calendar/events')
|
||||||
|
// .subscribe((response: any) => {
|
||||||
|
// this.events = response.data;
|
||||||
|
// this.onEventsUpdated.next(this.events);
|
||||||
|
// resolve(this.events);
|
||||||
|
// }, reject);
|
||||||
|
// });
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update events
|
||||||
|
*
|
||||||
|
* @param events
|
||||||
|
* @returns {Promise<any>}
|
||||||
|
*/
|
||||||
|
updateEvents(events): Promise<any> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this._httpClient
|
||||||
|
.post('api/calendar/events', {
|
||||||
|
id: 'events',
|
||||||
|
data: [...events]
|
||||||
|
})
|
||||||
|
.subscribe((response: any) => {
|
||||||
|
this.getEvents();
|
||||||
|
}, reject);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
192
src/app/pages/statics/calendar.theme.scss
Normal file
192
src/app/pages/statics/calendar.theme.scss
Normal file
|
|
@ -0,0 +1,192 @@
|
||||||
|
@mixin calendar-theme($theme) {
|
||||||
|
|
||||||
|
$background: map-get($theme, background);
|
||||||
|
$foreground: map-get($theme, foreground);
|
||||||
|
$accent: map-get($theme, accent);
|
||||||
|
$is-dark: map-get($theme, is-dark);
|
||||||
|
|
||||||
|
// Month view
|
||||||
|
.cal-month-view {
|
||||||
|
|
||||||
|
.cal-day-badge {
|
||||||
|
background: map-get($accent, default);
|
||||||
|
color: map-get($accent, default-contrast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-cell-row {
|
||||||
|
|
||||||
|
&.cal-header {
|
||||||
|
background: none !important;
|
||||||
|
|
||||||
|
.cal-cell {
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-days {
|
||||||
|
border-color: map-get($foreground, divider);
|
||||||
|
|
||||||
|
.cal-cell-row {
|
||||||
|
border-color: map-get($foreground, divider);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: map-get($background, hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-day-cell {
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
border-color: map-get($foreground, divider);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.cal-has-events {
|
||||||
|
|
||||||
|
&.cal-open {
|
||||||
|
background: map-get($background, hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.cal-weekend {
|
||||||
|
|
||||||
|
.cal-day-number {
|
||||||
|
color: map-get($accent, default);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: map-get($background, hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-open-day-events {
|
||||||
|
@if ($is-dark) {
|
||||||
|
background: map-get($background, app-bar);
|
||||||
|
} @else {
|
||||||
|
background: map-get($accent, default);
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
background: map-get($background, card);
|
||||||
|
|
||||||
|
.cal-event-title {
|
||||||
|
color: map-get($foreground, text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Week view
|
||||||
|
.cal-week-view {
|
||||||
|
|
||||||
|
.cal-event {
|
||||||
|
|
||||||
|
mwl-calendar-event-actions {
|
||||||
|
|
||||||
|
.cal-event-actions {
|
||||||
|
|
||||||
|
.cal-event-action {
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-day-headers {
|
||||||
|
border-color: map-get($foreground, divider);
|
||||||
|
|
||||||
|
.cal-drag-over {
|
||||||
|
background: map-get($background, hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-header {
|
||||||
|
|
||||||
|
&.cal-weekend {
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: map-get($accent, default);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.cal-today {
|
||||||
|
background: map-get($background, hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: map-get($background, hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
border-color: map-get($foreground, divider);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Day view
|
||||||
|
.cal-day-view {
|
||||||
|
|
||||||
|
.cal-hour-rows {
|
||||||
|
border-color: map-get($foreground, divider);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-drag-over {
|
||||||
|
|
||||||
|
.cal-hour-segment {
|
||||||
|
background: map-get($background, hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-event {
|
||||||
|
|
||||||
|
mwl-calendar-event-actions {
|
||||||
|
|
||||||
|
.cal-event-actions {
|
||||||
|
|
||||||
|
.cal-event-action {
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cal-hour {
|
||||||
|
|
||||||
|
.cal-hour-segment {
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: map-get($background, hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(odd) {
|
||||||
|
background: map-get($background, hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
|
||||||
|
.cal-hour-segment {
|
||||||
|
border-color: map-get($foreground, divider);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
|
||||||
|
:not(:last-child) {
|
||||||
|
|
||||||
|
.cal-hour-segment {
|
||||||
|
border-color: map-get($foreground, divider);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
143
src/app/pages/statics/event-form/event-form.component.html
Normal file
143
src/app/pages/statics/event-form/event-form.component.html
Normal file
|
|
@ -0,0 +1,143 @@
|
||||||
|
<div class="dialog-content-wrapper">
|
||||||
|
<mat-toolbar class="mat-accent m-0">
|
||||||
|
<mat-toolbar-row fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
|
<span class="title dialog-title">{{dialogTitle}}</span>
|
||||||
|
<button mat-icon-button (click)="matDialogRef.close()" aria-label="Close dialog">
|
||||||
|
<mat-icon>close</mat-icon>
|
||||||
|
</button>
|
||||||
|
</mat-toolbar-row>
|
||||||
|
</mat-toolbar>
|
||||||
|
|
||||||
|
<div mat-dialog-content class="p-16 pb-0 m-0" fusePerfectScrollbar>
|
||||||
|
|
||||||
|
<form name="eventForm" [formGroup]="eventForm" class="event-form w-100-p" fxLayout="column" fxFlex>
|
||||||
|
|
||||||
|
<mat-form-field appearance="outline" class="w-100-p">
|
||||||
|
<mat-label>Title</mat-label>
|
||||||
|
<input matInput
|
||||||
|
name="title"
|
||||||
|
formControlName="title"
|
||||||
|
required>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row" formGroupName="color">
|
||||||
|
|
||||||
|
<mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
|
||||||
|
<mat-label>Primary color</mat-label>
|
||||||
|
<input matInput
|
||||||
|
class="primary-color-input border-radius-4"
|
||||||
|
name="primary color"
|
||||||
|
formControlName="primary"
|
||||||
|
[(colorPicker)]="event.color.primary"
|
||||||
|
cpWidth="290px"
|
||||||
|
[cpPresetColors]="presetColors"
|
||||||
|
[style.background]="event.color.primary"
|
||||||
|
(colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field appearance="outline" class="pl-sm-8" fxFlex="50">
|
||||||
|
<mat-label>Secondary color</mat-label>
|
||||||
|
<input matInput
|
||||||
|
class="secondary-color-input border-radius-4"
|
||||||
|
name="secondary color"
|
||||||
|
formControlName="secondary"
|
||||||
|
[(colorPicker)]="event.color.secondary"
|
||||||
|
cpWidth="290px"
|
||||||
|
[cpPresetColors]="presetColors"
|
||||||
|
[style.background]="event.color.secondary"
|
||||||
|
(colorPickerChange)="event.color.secondary = $event; eventForm.patchValue({color:{secondary:$event}})"/>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pb-32" fxFlex="1 0 auto" fxLayout="row">
|
||||||
|
|
||||||
|
<mat-slide-toggle name="allDay" formControlName="allDay" class="mr-24" aria-label="All day">
|
||||||
|
All Day
|
||||||
|
</mat-slide-toggle>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">
|
||||||
|
|
||||||
|
<mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
|
||||||
|
<mat-label>Start date</mat-label>
|
||||||
|
<input matInput [matDatepicker]="startDatePicker" name="start" formControlName="start">
|
||||||
|
<mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
|
||||||
|
<mat-datepicker #startDatePicker></mat-datepicker>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field appearance="outline" class="pl-sm-8 no-errors-spacer" fxFlex="50">
|
||||||
|
<mat-label>Start time</mat-label>
|
||||||
|
<input matInput type="time">
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">
|
||||||
|
|
||||||
|
<mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
|
||||||
|
<mat-label>End date</mat-label>
|
||||||
|
<input matInput [matDatepicker]="endDatePicker" name="end" formControlName="end">
|
||||||
|
<mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
|
||||||
|
<mat-datepicker #endDatePicker></mat-datepicker>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field appearance="outline" class="pl-sm-8 no-errors-spacer" fxFlex="50">
|
||||||
|
<mat-label>End time</mat-label>
|
||||||
|
<input matInput type="time">
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<mat-form-field appearance="outline" formGroupName="meta" class="w-100-p">
|
||||||
|
<mat-label>Location</mat-label>
|
||||||
|
<input matInput
|
||||||
|
name="location"
|
||||||
|
formControlName="location">
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field appearance="outline" formGroupName="meta" class="w-100-p">
|
||||||
|
<mat-label>Notes</mat-label>
|
||||||
|
<textarea matInput
|
||||||
|
formControlName="notes"
|
||||||
|
mat-maxlength="250"
|
||||||
|
max-rows="4">
|
||||||
|
</textarea>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="end center">
|
||||||
|
|
||||||
|
<button *ngIf="action ==='edit'"
|
||||||
|
mat-button color="primary"
|
||||||
|
class="mr-8"
|
||||||
|
(click)="matDialogRef.close(['delete',eventForm])"
|
||||||
|
aria-label="Delete"
|
||||||
|
matTooltip="Delete">
|
||||||
|
DELETE
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button *ngIf="action !== 'edit'"
|
||||||
|
mat-button color="primary"
|
||||||
|
class="save-button"
|
||||||
|
(click)="matDialogRef.close(eventForm)"
|
||||||
|
[disabled]="eventForm.invalid"
|
||||||
|
aria-label="ADD">
|
||||||
|
ADD
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button *ngIf="action === 'edit'"
|
||||||
|
mat-button color="primary"
|
||||||
|
class="save-button"
|
||||||
|
(click)="matDialogRef.close(['save', eventForm])"
|
||||||
|
[disabled]="eventForm.invalid"
|
||||||
|
aria-label="SAVE">
|
||||||
|
SAVE
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
27
src/app/pages/statics/event-form/event-form.component.scss
Normal file
27
src/app/pages/statics/event-form/event-form.component.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
@import "src/@fuse/scss/fuse";
|
||||||
|
|
||||||
|
.event-form-dialog {
|
||||||
|
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint('gt-xs') {
|
||||||
|
width: 480px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-dialog-container {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-content-wrapper {
|
||||||
|
max-height: 85vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-color-input,
|
||||||
|
.secondary-color-input {
|
||||||
|
padding: 6px 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
76
src/app/pages/statics/event-form/event-form.component.ts
Normal file
76
src/app/pages/statics/event-form/event-form.component.ts
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
import { Component, Inject, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
|
||||||
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||||
|
import { CalendarEvent } from 'angular-calendar';
|
||||||
|
|
||||||
|
import { MatColors } from 'src/@fuse/mat-colors';
|
||||||
|
|
||||||
|
import { CalendarEventModel } from '../event.model';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'calendar-event-form-dialog',
|
||||||
|
templateUrl: './event-form.component.html',
|
||||||
|
styleUrls: ['./event-form.component.scss'],
|
||||||
|
encapsulation: ViewEncapsulation.None
|
||||||
|
})
|
||||||
|
export class CalendarEventFormDialogComponent {
|
||||||
|
action: string;
|
||||||
|
event: CalendarEvent;
|
||||||
|
eventForm: FormGroup;
|
||||||
|
dialogTitle: string;
|
||||||
|
presetColors = MatColors.presets;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*
|
||||||
|
* @param {MatDialogRef<CalendarEventFormDialogComponent>} matDialogRef
|
||||||
|
* @param _data
|
||||||
|
* @param {FormBuilder} _formBuilder
|
||||||
|
*/
|
||||||
|
constructor(
|
||||||
|
public matDialogRef: MatDialogRef<CalendarEventFormDialogComponent>,
|
||||||
|
@Inject(MAT_DIALOG_DATA) private _data: any,
|
||||||
|
private _formBuilder: FormBuilder
|
||||||
|
) {
|
||||||
|
this.event = _data.event;
|
||||||
|
this.action = _data.action;
|
||||||
|
|
||||||
|
if (this.action === 'edit') {
|
||||||
|
this.dialogTitle = this.event.title;
|
||||||
|
} else {
|
||||||
|
this.dialogTitle = 'New Event';
|
||||||
|
this.event = new CalendarEventModel({
|
||||||
|
start: _data.date,
|
||||||
|
end: _data.date
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.eventForm = this.createEventForm();
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
// @ Public methods
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create the event form
|
||||||
|
*
|
||||||
|
* @returns {FormGroup}
|
||||||
|
*/
|
||||||
|
createEventForm(): FormGroup {
|
||||||
|
return new FormGroup({
|
||||||
|
title: new FormControl(this.event.title),
|
||||||
|
start: new FormControl(this.event.start),
|
||||||
|
end: new FormControl(this.event.end),
|
||||||
|
allDay: new FormControl(this.event.allDay),
|
||||||
|
color: this._formBuilder.group({
|
||||||
|
primary: new FormControl(this.event.color.primary),
|
||||||
|
secondary: new FormControl(this.event.color.secondary)
|
||||||
|
}),
|
||||||
|
meta: this._formBuilder.group({
|
||||||
|
location: new FormControl(this.event.meta.location),
|
||||||
|
notes: new FormControl(this.event.meta.notes)
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
54
src/app/pages/statics/event.model.ts
Normal file
54
src/app/pages/statics/event.model.ts
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
import { CalendarEventAction } from 'angular-calendar';
|
||||||
|
import { startOfDay, endOfDay } from 'date-fns';
|
||||||
|
|
||||||
|
export class CalendarEventModel
|
||||||
|
{
|
||||||
|
start: Date;
|
||||||
|
end?: Date;
|
||||||
|
title: string;
|
||||||
|
color: {
|
||||||
|
primary: string;
|
||||||
|
secondary: string;
|
||||||
|
};
|
||||||
|
actions?: CalendarEventAction[];
|
||||||
|
allDay?: boolean;
|
||||||
|
cssClass?: string;
|
||||||
|
resizable?: {
|
||||||
|
beforeStart?: boolean;
|
||||||
|
afterEnd?: boolean;
|
||||||
|
};
|
||||||
|
draggable?: boolean;
|
||||||
|
meta?: {
|
||||||
|
location: string,
|
||||||
|
notes: string
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
constructor(data?)
|
||||||
|
{
|
||||||
|
data = data || {};
|
||||||
|
this.start = new Date(data.start) || startOfDay(new Date());
|
||||||
|
this.end = new Date(data.end) || endOfDay(new Date());
|
||||||
|
this.title = data.title || '';
|
||||||
|
this.color = {
|
||||||
|
primary : data.color && data.color.primary || '#1e90ff',
|
||||||
|
secondary: data.color && data.color.secondary || '#D1E8FF'
|
||||||
|
};
|
||||||
|
this.draggable = data.draggable;
|
||||||
|
this.resizable = {
|
||||||
|
beforeStart: data.resizable && data.resizable.beforeStart || true,
|
||||||
|
afterEnd : data.resizable && data.resizable.afterEnd || true
|
||||||
|
};
|
||||||
|
this.actions = data.actions || [];
|
||||||
|
this.allDay = data.allDay || false;
|
||||||
|
this.cssClass = data.cssClass || '';
|
||||||
|
this.meta = {
|
||||||
|
location: data.meta && data.meta.location || '',
|
||||||
|
notes : data.meta && data.meta.notes || ''
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
21
src/app/pages/statics/statics-routing.module.ts
Normal file
21
src/app/pages/statics/statics-routing.module.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
|
import { CalendarComponent } from './calendar.component';
|
||||||
|
import { CalendarService } from './calendar.service';
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
component: CalendarComponent,
|
||||||
|
children: [],
|
||||||
|
resolve: {
|
||||||
|
chat: CalendarService
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [RouterModule.forChild(routes)],
|
||||||
|
exports: [RouterModule]
|
||||||
|
})
|
||||||
|
export class StaticsRoutingModule {}
|
||||||
54
src/app/pages/statics/statics.module.ts
Normal file
54
src/app/pages/statics/statics.module.ts
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||||
|
import { MatDialogModule } from '@angular/material/dialog';
|
||||||
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||||
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
|
import { MatInputModule } from '@angular/material/input';
|
||||||
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||||
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||||
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||||
|
import { ColorPickerModule } from 'ngx-color-picker';
|
||||||
|
import {
|
||||||
|
CalendarModule as AngularCalendarModule,
|
||||||
|
DateAdapter
|
||||||
|
} from 'angular-calendar';
|
||||||
|
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
|
||||||
|
|
||||||
|
import { FuseSharedModule } from 'src/@fuse/shared.module';
|
||||||
|
import { FuseConfirmDialogModule } from 'src/@fuse/components';
|
||||||
|
|
||||||
|
import { CalendarComponent } from './calendar.component';
|
||||||
|
|
||||||
|
import { CalendarEventFormDialogComponent } from './event-form/event-form.component';
|
||||||
|
|
||||||
|
import { StaticsRoutingModule } from './statics-routing.module';
|
||||||
|
import { CalendarService } from './calendar.service';
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
StaticsRoutingModule,
|
||||||
|
|
||||||
|
MatButtonModule,
|
||||||
|
MatDatepickerModule,
|
||||||
|
MatDialogModule,
|
||||||
|
MatFormFieldModule,
|
||||||
|
MatIconModule,
|
||||||
|
MatInputModule,
|
||||||
|
MatSlideToggleModule,
|
||||||
|
MatToolbarModule,
|
||||||
|
MatTooltipModule,
|
||||||
|
|
||||||
|
AngularCalendarModule.forRoot({
|
||||||
|
provide: DateAdapter,
|
||||||
|
useFactory: adapterFactory
|
||||||
|
}),
|
||||||
|
ColorPickerModule,
|
||||||
|
|
||||||
|
FuseSharedModule,
|
||||||
|
FuseConfirmDialogModule
|
||||||
|
],
|
||||||
|
providers: [CalendarService],
|
||||||
|
declarations: [CalendarComponent, CalendarEventFormDialogComponent]
|
||||||
|
})
|
||||||
|
export class StaticsModule {}
|
||||||
23
src/modules/infos/infos.module.ts
Normal file
23
src/modules/infos/infos.module.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { NgModule, ModuleWithProviders } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { POPUP_SET_SERVICES } from './popup-set/service';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [],
|
||||||
|
exports: []
|
||||||
|
})
|
||||||
|
export class InfosRootModule {}
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [],
|
||||||
|
imports: [CommonModule],
|
||||||
|
exports: []
|
||||||
|
})
|
||||||
|
export class InfosModule {
|
||||||
|
public static forRoot(): ModuleWithProviders<InfosRootModule> {
|
||||||
|
return {
|
||||||
|
ngModule: InfosRootModule,
|
||||||
|
providers: [POPUP_SET_SERVICES]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
9
src/modules/infos/popup-set/model/popup-set.model.ts
Normal file
9
src/modules/infos/popup-set/model/popup-set.model.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { DateAudit } from 'src/modules/common/data/model/audit';
|
||||||
|
|
||||||
|
export interface PopupSet extends DateAudit {
|
||||||
|
id?: number;
|
||||||
|
name?: string;
|
||||||
|
number?: string;
|
||||||
|
holder?: string;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
3
src/modules/infos/popup-set/service/index.ts
Normal file
3
src/modules/infos/popup-set/service/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { PopupSetService } from './popup-set.service';
|
||||||
|
|
||||||
|
export const POPUP_SET_SERVICES = [PopupSetService];
|
||||||
26
src/modules/infos/popup-set/service/popup-set.service.ts
Normal file
26
src/modules/infos/popup-set/service/popup-set.service.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { Injectable, Inject } from '@angular/core';
|
||||||
|
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||||||
|
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import { map, takeUntil } from 'rxjs/operators';
|
||||||
|
import { PopupSet } from '../model/popup-set.model';
|
||||||
|
import { API_BASE_URL } from 'src/modules/common/type/injection-token.type';
|
||||||
|
import { Page } from 'src/modules/common/data/model/page';
|
||||||
|
import { FormArray } from '@angular/forms';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class PopupSetService {
|
||||||
|
constructor(
|
||||||
|
@Inject(API_BASE_URL) private apiBaseUrl: string,
|
||||||
|
private httpClient: HttpClient
|
||||||
|
) {}
|
||||||
|
|
||||||
|
// public getBankInfos(): Observable<Page<BankInfo>> {
|
||||||
|
// return this.httpClient.get<Page<BankInfo>>(
|
||||||
|
// `${this.apiBaseUrl}/bank_info`,
|
||||||
|
// {}
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user