upgraded Web UI template to 2.9.0
13621160019@163.com
parent
b2c18260a9
commit
c2edc9a805
|
|
@ -15,14 +15,16 @@ This project is scaffolded using Create React App.
|
||||||
|
|
||||||
* Install Node.js (https://nodejs.org/) if you do not already have it installed on your machine.
|
* Install Node.js (https://nodejs.org/) if you do not already have it installed on your machine.
|
||||||
* Open the “myems-web” directory with your cmd or terminal
|
* Open the “myems-web” directory with your cmd or terminal
|
||||||
* Run 'npm i'
|
* Run 'sudo npm i --unsafe-perm=true --allow-root'
|
||||||
This command will download all the necessary dependencies for falcon in the node_modules directory.
|
This command will download all the necessary dependencies for falcon in the node_modules directory.
|
||||||
* Run 'npm start'
|
* If you modified any scss files, then you need to compile SCSS
|
||||||
|
Run 'sudo npm run scss' command in your project directory to compile scss.
|
||||||
|
* Run 'sudo npm start'
|
||||||
A local web server will start at http://localhost:3000.
|
A local web server will start at http://localhost:3000.
|
||||||
We are using webpack and webpack-serve to automatically detect file changes. So, if you edit and save a file, your browser will automatically refresh and preview the change.
|
We are using webpack and webpack-serve to automatically detect file changes. So, if you edit and save a file, your browser will automatically refresh and preview the change.
|
||||||
|
|
||||||
## Creating a Production Build
|
## Creating a Production Build
|
||||||
* Run 'npm run build' command in your project directory to make the Production build.
|
* Run 'sudo npm run build' command in your project directory to make the Production build.
|
||||||
|
|
||||||
This will create an optimized production build by compililing, merging and minifying all the source files as necessary and put them in the build/ folder.
|
This will create an optimized production build by compililing, merging and minifying all the source files as necessary and put them in the build/ folder.
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -3,14 +3,22 @@
|
||||||
"version": "1.1.3",
|
"version": "1.1.3",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-free": "^5.15.1",
|
||||||
"@fortawesome/fontawesome-svg-core": "^1.2.30",
|
"@fortawesome/fontawesome-svg-core": "^1.2.30",
|
||||||
"@fortawesome/free-brands-svg-icons": "^5.14.0",
|
"@fortawesome/free-brands-svg-icons": "^5.14.0",
|
||||||
"@fortawesome/free-regular-svg-icons": "^5.14.0",
|
"@fortawesome/free-regular-svg-icons": "^5.14.0",
|
||||||
"@fortawesome/free-solid-svg-icons": "^5.14.0",
|
"@fortawesome/free-solid-svg-icons": "^5.15.1",
|
||||||
"@fortawesome/react-fontawesome": "^0.1.11",
|
"@fortawesome/react-fontawesome": "^0.1.11",
|
||||||
|
"@fullcalendar/bootstrap": "^5.3.1",
|
||||||
|
"@fullcalendar/core": "^5.3.1",
|
||||||
|
"@fullcalendar/daygrid": "^5.3.2",
|
||||||
|
"@fullcalendar/interaction": "^5.3.1",
|
||||||
|
"@fullcalendar/list": "^5.3.1",
|
||||||
|
"@fullcalendar/react": "^5.3.1",
|
||||||
|
"@fullcalendar/timegrid": "^5.3.1",
|
||||||
"@loadable/component": "^5.13.2",
|
"@loadable/component": "^5.13.2",
|
||||||
"attr-accept": "^2.2.2",
|
"attr-accept": "^2.2.2",
|
||||||
"bootstrap": "^4.5.2",
|
"bootstrap": "^4.5.3",
|
||||||
"chart.js": "^2.9.3",
|
"chart.js": "^2.9.3",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"echarts": "^4.9.0",
|
"echarts": "^4.9.0",
|
||||||
|
|
@ -42,6 +50,7 @@
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^16.13.1",
|
||||||
"react-dropzone": "^10.2.2",
|
"react-dropzone": "^10.2.2",
|
||||||
"react-es6-progressbar.js": "^1.1.0",
|
"react-es6-progressbar.js": "^1.1.0",
|
||||||
|
"react-flatpickr": "^3.10.6",
|
||||||
"react-hook-form": "^4.10.2",
|
"react-hook-form": "^4.10.2",
|
||||||
"react-i18next": "^11.7.0",
|
"react-i18next": "^11.7.0",
|
||||||
"react-image-lightbox": "^5.1.1",
|
"react-image-lightbox": "^5.1.1",
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
||||||
/*-----------------------------------------------
|
/*-----------------------------------------------
|
||||||
| Calender
|
| Calendar
|
||||||
-----------------------------------------------*/
|
-----------------------------------------------*/
|
||||||
.calendar {
|
.calendar {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
|
|
||||||
|
|
@ -9,4 +9,24 @@
|
||||||
}
|
}
|
||||||
@return $raised;
|
@return $raised;
|
||||||
}
|
}
|
||||||
@function toRem($px) { @return ($px / 16); }
|
@function toRem($px) {
|
||||||
|
@return ($px / 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin chrome-scrollbar {
|
||||||
|
overflow: auto;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: rgba($gray-600, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin firefox-scrollbar {
|
||||||
|
scrollbar-color: rgba($gray-600, 0.3) transparent;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,13 @@
|
||||||
/*-----------------------------------------------
|
/*-----------------------------------------------
|
||||||
| Icons group
|
| Icons group
|
||||||
-----------------------------------------------*/
|
-----------------------------------------------*/
|
||||||
.icon-group{
|
.icon-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
.icon-item:not(:last-child){ margin-right: map_get($spacers, 2); }
|
.icon-item:not(:last-child) {
|
||||||
|
margin-right: map_get($spacers, 2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.icon-item{
|
.icon-item {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -17,9 +19,21 @@
|
||||||
border: 0;
|
border: 0;
|
||||||
font-size: $font-size-sm;
|
font-size: $font-size-sm;
|
||||||
box-shadow: $box-shadow-sm;
|
box-shadow: $box-shadow-sm;
|
||||||
@include hover-focus{ background-color: $light; }
|
@include hover-focus {
|
||||||
&.icon-item-lg{
|
background-color: $light;
|
||||||
|
}
|
||||||
|
&.icon-item-sm {
|
||||||
|
height: 1.875rem;
|
||||||
|
width: 1.875rem;
|
||||||
|
}
|
||||||
|
&.icon-item-lg {
|
||||||
height: 2.75rem;
|
height: 2.75rem;
|
||||||
width: 2.75rem;
|
width: 2.75rem;
|
||||||
}
|
}
|
||||||
|
&.icon-item-hover {
|
||||||
|
transition: $transition-base;
|
||||||
|
@include hover-focus {
|
||||||
|
background-color: $gray-200;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
.card-notification {
|
.card-notification {
|
||||||
min-width: 20rem;
|
min-width: 20rem;
|
||||||
@include media-breakpoint-only(xs) {
|
@include media-breakpoint-only(xs) {
|
||||||
min-width: 16rem;
|
min-width: 17rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.settings-popover {
|
.settings-popover {
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,10 @@
|
||||||
/*-----------------------------------------------
|
/*-----------------------------------------------
|
||||||
| Navbar
|
| Navbar vertical
|
||||||
-----------------------------------------------*/
|
-----------------------------------------------*/
|
||||||
.shadow-bottom {
|
.shadow-bottom {
|
||||||
box-shadow: 0 0.5rem 0.5rem -0.5rem rgba($black, 0.2) !important;
|
box-shadow: 0 0.5rem 0.5rem -0.5rem rgba($black, 0.2) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*-----------------------------------------------
|
|
||||||
| Navbar vertical
|
|
||||||
-----------------------------------------------*/
|
|
||||||
$navbar-vertical-width: 12.625rem;
|
|
||||||
$vartical-navbar-padding: 1.5rem;
|
|
||||||
.navbar-top {
|
.navbar-top {
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 1020;
|
z-index: 1020;
|
||||||
|
|
@ -67,8 +62,8 @@ $vartical-navbar-padding: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.nav-link-icon {
|
.nav-link-icon {
|
||||||
width: $vartical-navbar-padding;
|
width: $vertical-navbar-padding;
|
||||||
min-width: $vartical-navbar-padding;
|
min-width: $vertical-navbar-padding;
|
||||||
font-size: map_get($font-sizes, 0);
|
font-size: map_get($font-sizes, 0);
|
||||||
}
|
}
|
||||||
.nav {
|
.nav {
|
||||||
|
|
@ -76,7 +71,7 @@ $vartical-navbar-padding: 1.5rem;
|
||||||
font-size: 0.8125rem;
|
font-size: 0.8125rem;
|
||||||
.nav-item {
|
.nav-item {
|
||||||
.nav-link {
|
.nav-link {
|
||||||
padding: 0.2rem $vartical-navbar-padding;
|
padding: 0.2rem $vertical-navbar-padding;
|
||||||
}
|
}
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0.35rem;
|
margin-bottom: 0.35rem;
|
||||||
|
|
@ -85,13 +80,13 @@ $vartical-navbar-padding: 1.5rem;
|
||||||
.nav {
|
.nav {
|
||||||
.nav-item {
|
.nav-item {
|
||||||
.nav-link {
|
.nav-link {
|
||||||
padding-left: $vartical-navbar-padding * 1.75;
|
padding-left: $vertical-navbar-padding * 1.75;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.nav {
|
.nav {
|
||||||
.nav-item {
|
.nav-item {
|
||||||
.nav-link {
|
.nav-link {
|
||||||
padding-left: $vartical-navbar-padding * 2.75;
|
padding-left: $vertical-navbar-padding * 2.75;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -265,11 +260,6 @@ $vartical-navbar-padding: 1.5rem;
|
||||||
| Break
|
| Break
|
||||||
-----------------------------------------------*/
|
-----------------------------------------------*/
|
||||||
|
|
||||||
$breaks: ('xxl', 'xl', 'lg', 'md', 'sm', 'xs');
|
|
||||||
// $navbar-collapsed-width: 3.4375rem;
|
|
||||||
$navbar-collapsed-width: 3.125rem;
|
|
||||||
$navbar-vertical-max-width: 12.625rem;
|
|
||||||
|
|
||||||
@for $i from 1 through length($breaks) {
|
@for $i from 1 through length($breaks) {
|
||||||
$item: nth($breaks, $i);
|
$item: nth($breaks, $i);
|
||||||
$j: '';
|
$j: '';
|
||||||
|
|
|
||||||
|
|
@ -7,4 +7,5 @@
|
||||||
@import 'plugins/plyr';
|
@import 'plugins/plyr';
|
||||||
@import 'plugins/react-datetime';
|
@import 'plugins/react-datetime';
|
||||||
@import 'plugins/leaflet';
|
@import 'plugins/leaflet';
|
||||||
@import 'plugins/emoji';
|
@import 'plugins/emoji';
|
||||||
|
@import 'plugins/full-calendar';
|
||||||
|
|
|
||||||
|
|
@ -453,6 +453,16 @@ $avatars-dimension: (
|
||||||
|
|
||||||
$tooltip-padding-y: 0.5rem !default;
|
$tooltip-padding-y: 0.5rem !default;
|
||||||
$tooltip-font-size: map_get($font-sizes, '-1') !default;
|
$tooltip-font-size: map_get($font-sizes, '-1') !default;
|
||||||
|
|
||||||
|
/*-----------------------------------------------
|
||||||
|
| Navbar vertical
|
||||||
|
-----------------------------------------------*/
|
||||||
|
$navbar-vertical-width: 12.5rem !default;
|
||||||
|
$vertical-navbar-padding: 1.5rem !default;
|
||||||
|
$breaks: ('xxl', 'xl', 'lg', 'md', 'sm', 'xs') !default;
|
||||||
|
$navbar-collapsed-width: 3.125rem !default;
|
||||||
|
$navbar-vertical-max-width: 12.625rem !default;
|
||||||
|
|
||||||
//*-----------------------------------------------
|
//*-----------------------------------------------
|
||||||
//| Navbar Inverted
|
//| Navbar Inverted
|
||||||
//-----------------------------------------------*/
|
//-----------------------------------------------*/
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,318 @@
|
||||||
|
#appCalendar {
|
||||||
|
min-height: calc(100vh - #{$top-nav-height});
|
||||||
|
}
|
||||||
|
.fc {
|
||||||
|
.fc-col-header {
|
||||||
|
background-color: $gray-100;
|
||||||
|
th {
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fc-col-header-cell-cushion {
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
.fc-daygrid-day-frame {
|
||||||
|
border: 2px solid transparent;
|
||||||
|
padding: 2px !important;
|
||||||
|
transition: $transition-base;
|
||||||
|
&:active {
|
||||||
|
background-color: rgba($primary, 0.1) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fc-daygrid-day-top {
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
.fc-daygrid-day-number {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background-color: $gray-100;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none !important;
|
||||||
|
border-radius: 50%;
|
||||||
|
line-height: 30px;
|
||||||
|
padding: 0 !important;
|
||||||
|
font-size: map-get($font-sizes, '-1');
|
||||||
|
transition: $transition-base;
|
||||||
|
@include hover-focus {
|
||||||
|
background-color: $gray-200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Events
|
||||||
|
.fc-daygrid-event {
|
||||||
|
border-radius: $border-radius !important;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.25rem !important;
|
||||||
|
padding: 0.25rem 0.5rem !important;
|
||||||
|
border: 0 !important;
|
||||||
|
font-size: map-get($font-sizes, '-2');
|
||||||
|
}
|
||||||
|
.fc-h-event {
|
||||||
|
background-color: rgb(230, 239, 252);
|
||||||
|
.fc-event-main {
|
||||||
|
color: darken($primary, 10%);
|
||||||
|
}
|
||||||
|
.fc-event-time,
|
||||||
|
.fc-event-title {
|
||||||
|
font-weight: $font-weight-semi-bold !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fc-event-title {
|
||||||
|
font-weight: normal !important;
|
||||||
|
}
|
||||||
|
.fc-daygrid-event-dot {
|
||||||
|
border-color: $gray-300 !important;
|
||||||
|
}
|
||||||
|
.fc-day-today:not(.fc-popover) {
|
||||||
|
background-color: transparent !important;
|
||||||
|
.fc-daygrid-day-frame {
|
||||||
|
border: 2px solid rgba($primary, 0.5);
|
||||||
|
}
|
||||||
|
.fc-daygrid-day-number {
|
||||||
|
background-color: $primary !important;
|
||||||
|
color: #fff;
|
||||||
|
@include hover-focus {
|
||||||
|
background-color: darken($primary, 10%) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.fc-direction-rtl,
|
||||||
|
&.fc-direction-ltr {
|
||||||
|
.fc-daygrid-event {
|
||||||
|
&.fc-event-start,
|
||||||
|
&.fc-event-end {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fc-popover {
|
||||||
|
border-color: $border-color;
|
||||||
|
box-shadow: $box-shadow;
|
||||||
|
.fc-popover-title {
|
||||||
|
font-family: $font-family-sans-serif;
|
||||||
|
}
|
||||||
|
.fc-daygrid-event {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
margin-bottom: 2px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fc-popover-header {
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: $font-weight-semi-bold;
|
||||||
|
border-top-left-radius: $border-radius-soft;
|
||||||
|
border-top-right-radius: $border-radius-soft;
|
||||||
|
}
|
||||||
|
.fc-daygrid-more-link {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
color: $gray-500 !important;
|
||||||
|
font-size: map-get($font-sizes, '-2');
|
||||||
|
@include hover-focus {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $gray-600 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fc-daygrid-dot-event {
|
||||||
|
color: $gray-500 !important;
|
||||||
|
@include hover-focus {
|
||||||
|
background-color: $gray-200 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fc-day:not(.fc-popover) .fc-daygrid-dot-event {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.fc-event-time,
|
||||||
|
.fc-event-title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event List View
|
||||||
|
.fc-list-event {
|
||||||
|
&:hover td {
|
||||||
|
background-color: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fc-dayGridMonth-view {
|
||||||
|
.fc-event-time {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fc-timeGridDay-view .fc-scrollgrid-sync-inner {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.fc-timeGridDay-view,
|
||||||
|
.fc-timeGridWeek-view {
|
||||||
|
.fc-daygrid-day-events {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.fc-v-event .fc-event-main {
|
||||||
|
padding-left: 1rem;
|
||||||
|
color: $gray-500;
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: $gray-400;
|
||||||
|
top: 5px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fc-timegrid-event {
|
||||||
|
padding: 0.5rem;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
border-radius: $border-radius-soft;
|
||||||
|
@include hover-focus {
|
||||||
|
background-color: $gray-200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fc-timegrid-slot {
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
.fc-timegrid-col {
|
||||||
|
padding: 6px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fc-list {
|
||||||
|
.fc-list-day-cushion {
|
||||||
|
padding: 0.5rem 1.25rem;
|
||||||
|
background-color: $white;
|
||||||
|
}
|
||||||
|
.fc-list-day:not(:first-child) {
|
||||||
|
.fc-list-day-cushion {
|
||||||
|
margin-top: map-get($spacers, 4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fc-list-event-time {
|
||||||
|
padding-left: 1.25rem;
|
||||||
|
}
|
||||||
|
.fc-list-event-title {
|
||||||
|
padding-right: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fc-list-empty {
|
||||||
|
background-color: $gray-100 !important;
|
||||||
|
}
|
||||||
|
.fc-list-event-dot {
|
||||||
|
border-color: $gray-300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
.fc-timegrid {
|
||||||
|
.event-bg-soft-#{$color} {
|
||||||
|
border: 0 !important;
|
||||||
|
@extend .bg-soft-#{$color};
|
||||||
|
.fc-event-main:after {
|
||||||
|
background-color: $value !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-soft-#{$color} {
|
||||||
|
.fc-event-main {
|
||||||
|
color: darken($value, 10%) !important;
|
||||||
|
&:after {
|
||||||
|
background-color: darken($value, 10%) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fc-list-event-time,
|
||||||
|
.fc-list-event-title {
|
||||||
|
color: darken($value, 10%) !important;
|
||||||
|
font-weight: $font-weight-semi-bold !important;
|
||||||
|
}
|
||||||
|
.fc-list-event-dot {
|
||||||
|
border-color: darken($value, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[data-fc-view]:not(.active) span {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.timeline {
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: $gray-200;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
&:not(:last-child):before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
height: 100%;
|
||||||
|
width: 1px;
|
||||||
|
background-color: $gray-200;
|
||||||
|
top: 50%;
|
||||||
|
left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.windows {
|
||||||
|
&.chrome {
|
||||||
|
.fc-scroller {
|
||||||
|
overflow: hidden auto !important;
|
||||||
|
@include chrome-scrollbar;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.firefox {
|
||||||
|
.fc-scroller {
|
||||||
|
overflow: hidden auto !important;
|
||||||
|
@include firefox-scrollbar;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
.fc {
|
||||||
|
.fc-daygrid-day-frame {
|
||||||
|
padding: 6px !important;
|
||||||
|
}
|
||||||
|
.fc-day:not(.fc-popover) .fc-daygrid-dot-event {
|
||||||
|
.fc-event-time,
|
||||||
|
.fc-event-title {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fc-daygrid-more-link {
|
||||||
|
margin-left: 10px;
|
||||||
|
text-align: left;
|
||||||
|
font-size: map-get($font-sizes, '-1');
|
||||||
|
}
|
||||||
|
.fc-daygrid-event {
|
||||||
|
font-size: map-get($font-sizes, '-1');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ie {
|
||||||
|
.fc-daygrid-event {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.safari {
|
||||||
|
.fc-dayGridMonth-view {
|
||||||
|
.fc-daygrid-day {
|
||||||
|
position: relative;
|
||||||
|
.fc-daygrid-day-frame {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Modal,
|
||||||
|
ModalHeader,
|
||||||
|
ModalBody,
|
||||||
|
ModalFooter,
|
||||||
|
Form,
|
||||||
|
FormGroup,
|
||||||
|
Label,
|
||||||
|
Input,
|
||||||
|
CustomInput
|
||||||
|
} from 'reactstrap';
|
||||||
|
import Datetime from 'react-datetime';
|
||||||
|
import { v4 as uuid } from 'uuid';
|
||||||
|
import Flex from '../common/Flex';
|
||||||
|
|
||||||
|
const AddScheduleModal = ({
|
||||||
|
setIsOpenScheduleModal,
|
||||||
|
isOpenScheduleModal,
|
||||||
|
setInitialEvents,
|
||||||
|
initialEvents,
|
||||||
|
addScheduleStartDate,
|
||||||
|
setAddScheduleStartDate
|
||||||
|
}) => {
|
||||||
|
const toggle = () => setIsOpenScheduleModal(!isOpenScheduleModal);
|
||||||
|
|
||||||
|
const [formObj, setFormObj] = useState({ id: uuid() });
|
||||||
|
const [endDate, setEndDate] = useState();
|
||||||
|
const [startDate, setStartDate] = useState();
|
||||||
|
const closeBtn = (
|
||||||
|
<button className="close font-weight-normal" onClick={toggle}>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleChange = target => {
|
||||||
|
let name = target.name;
|
||||||
|
let value = name === 'allDay' ? target.checked : target.value;
|
||||||
|
setFormObj({ ...formObj, [name]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
!isOpenScheduleModal && setAddScheduleStartDate(null);
|
||||||
|
!isOpenScheduleModal && setEndDate(null);
|
||||||
|
!isOpenScheduleModal && setStartDate(null);
|
||||||
|
setFormObj({ ...formObj, start: addScheduleStartDate });
|
||||||
|
// eslint-disable-next-line
|
||||||
|
}, [isOpenScheduleModal, addScheduleStartDate]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal isOpen={isOpenScheduleModal} toggle={toggle} modalClassName="theme-modal" contentClassName="border">
|
||||||
|
<Form
|
||||||
|
onSubmit={e => {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsOpenScheduleModal(false);
|
||||||
|
setInitialEvents([...initialEvents, formObj]);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ModalHeader toggle={toggle} className="bg-light d-flex flex-between-center border-bottom-0" close={closeBtn}>
|
||||||
|
Create Schedule
|
||||||
|
</ModalHeader>
|
||||||
|
<ModalBody>
|
||||||
|
<FormGroup>
|
||||||
|
<Label className="fs-0" for="eventTitle">
|
||||||
|
Title
|
||||||
|
</Label>
|
||||||
|
<Input name="title" id="eventTitle" required onChange={({ target }) => handleChange(target)} />
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Label className="fs-0" for="eventStart">
|
||||||
|
Start Date
|
||||||
|
</Label>
|
||||||
|
<Datetime
|
||||||
|
timeFormat={true}
|
||||||
|
value={startDate || addScheduleStartDate}
|
||||||
|
onChange={dateTime => {
|
||||||
|
if (dateTime._isValid) {
|
||||||
|
setStartDate(dateTime);
|
||||||
|
let date = {};
|
||||||
|
date.value = dateTime.format();
|
||||||
|
date.name = 'start';
|
||||||
|
handleChange(date);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
dateFormat="MM-DD-YYYY"
|
||||||
|
inputProps={{ placeholder: 'MM-DD-YYYY H:M', id: 'eventStart' }}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Label className="fs-0" for="eventEnd">
|
||||||
|
End Date
|
||||||
|
</Label>
|
||||||
|
<Datetime
|
||||||
|
value={endDate}
|
||||||
|
timeFormat={true}
|
||||||
|
onChange={dateTime => {
|
||||||
|
if (dateTime._isValid) {
|
||||||
|
setEndDate(dateTime);
|
||||||
|
let date = {};
|
||||||
|
date.value = dateTime.format();
|
||||||
|
date.name = 'end';
|
||||||
|
handleChange(date);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
dateFormat="MM-DD-YYYY"
|
||||||
|
inputProps={{ placeholder: 'MM-DD-YYYY H:M', id: 'eventEnd' }}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<CustomInput
|
||||||
|
name="allDay"
|
||||||
|
type="checkbox"
|
||||||
|
id="allDay"
|
||||||
|
label="All Day"
|
||||||
|
onChange={({ target }) => handleChange(target)}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Label className="fs-0">Schedule Meeting</Label>
|
||||||
|
<div>
|
||||||
|
<Button color="" type="button" className="text-left bg-soft-info text-info">
|
||||||
|
<FontAwesomeIcon icon="video" className="mr-2" />
|
||||||
|
<span>Add video conference link</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Label className="fs-0" for="eventDescription">
|
||||||
|
Description
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
type="textarea"
|
||||||
|
name="description"
|
||||||
|
id="eventDescription"
|
||||||
|
onChange={({ target }) => handleChange(target)}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Label for="eventLabel">Label</Label>
|
||||||
|
<CustomInput type="select" id="eventLabel" name="className" onChange={({ target }) => handleChange(target)}>
|
||||||
|
<option>None</option>
|
||||||
|
<option value="bg-soft-info">Business</option>
|
||||||
|
<option value="bg-soft-danger">Important</option>
|
||||||
|
<option value="bg-soft-warning">Personal</option>
|
||||||
|
<option value="bg-soft-success">Must Attend</option>
|
||||||
|
</CustomInput>
|
||||||
|
</FormGroup>
|
||||||
|
</ModalBody>
|
||||||
|
<ModalFooter tag={Flex} justify="end" align="center" className="bg-light border-top-0">
|
||||||
|
<Button color="link" tag="a" href="pages/event-create" className="text-600">
|
||||||
|
More Option
|
||||||
|
</Button>
|
||||||
|
<Button color="primary" type="submit" className="px-4">
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
</ModalFooter>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddScheduleModal;
|
||||||
|
|
@ -0,0 +1,213 @@
|
||||||
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
|
import { Button, Card, CardBody, CardHeader, Col, Row, UncontrolledTooltip } from 'reactstrap';
|
||||||
|
import FullCalendar from '@fullcalendar/react';
|
||||||
|
import dayGridPlugin from '@fullcalendar/daygrid';
|
||||||
|
import bootstrapPlugin from '@fullcalendar/bootstrap';
|
||||||
|
import timeGridPlugin from '@fullcalendar/timegrid';
|
||||||
|
import listPlugin from '@fullcalendar/list';
|
||||||
|
import interactionPlugin from '@fullcalendar/interaction';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
|
import DropdownFilter from '../email/inbox/DropdownFilter';
|
||||||
|
import CalendarEventModal from './CalendarEventModal';
|
||||||
|
import AddScheduleModal from './AddScheduleModal';
|
||||||
|
import Flex from '../common/Flex';
|
||||||
|
|
||||||
|
import events from '../../data/calendar/events';
|
||||||
|
|
||||||
|
const Calendar = () => {
|
||||||
|
const calendarRef = useRef();
|
||||||
|
const [calendarApi, setCalendarApi] = useState({});
|
||||||
|
const [title, setTitle] = useState('');
|
||||||
|
const [currentFilter, setCurrentFilter] = useState('Month View');
|
||||||
|
const [isOpenModal, setIsOpenModal] = useState(false);
|
||||||
|
const [isOpenScheduleModal, setIsOpenScheduleModal] = useState(false);
|
||||||
|
const [modalEventContent, setModalEventContent] = useState(false);
|
||||||
|
const [addScheduleStartDate, setAddScheduleStartDate] = useState();
|
||||||
|
|
||||||
|
const buttonText = {
|
||||||
|
today: 'Today',
|
||||||
|
month: 'Month view',
|
||||||
|
week: 'week',
|
||||||
|
day: 'day',
|
||||||
|
listWeek: 'list view',
|
||||||
|
listYear: 'year'
|
||||||
|
};
|
||||||
|
|
||||||
|
const eventTimeFormat = {
|
||||||
|
hour: 'numeric',
|
||||||
|
minute: '2-digit',
|
||||||
|
omitZeroMinute: true,
|
||||||
|
meridiem: true
|
||||||
|
};
|
||||||
|
|
||||||
|
const viewName = ['Month View', 'Week View', 'Day View', 'List View', 'Year View'];
|
||||||
|
|
||||||
|
const views = {
|
||||||
|
week: {
|
||||||
|
eventLimit: 3
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const eventList = events.reduce(
|
||||||
|
(acc, event) => (event.schedules ? acc.concat(event.schedules.concat(event)) : acc.concat(event)),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
const [initialEvents, setInitialEvents] = useState(eventList);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setCalendarApi(calendarRef.current.getApi());
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleFilter = filter => {
|
||||||
|
setCurrentFilter(filter);
|
||||||
|
switch (filter) {
|
||||||
|
case 'Month View':
|
||||||
|
calendarApi.changeView('dayGridMonth');
|
||||||
|
setTitle(calendarApi.getCurrentData().viewTitle);
|
||||||
|
break;
|
||||||
|
case 'Week View':
|
||||||
|
calendarApi.changeView('timeGridWeek');
|
||||||
|
setTitle(calendarApi.getCurrentData().viewTitle);
|
||||||
|
break;
|
||||||
|
case 'Day View':
|
||||||
|
calendarApi.changeView('timeGridDay');
|
||||||
|
setTitle(calendarApi.getCurrentData().viewTitle);
|
||||||
|
break;
|
||||||
|
case 'List View':
|
||||||
|
calendarApi.changeView('listWeek');
|
||||||
|
setTitle(calendarApi.getCurrentData().viewTitle);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
calendarApi.changeView('listYear');
|
||||||
|
setTitle(calendarApi.getCurrentData().viewTitle);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEventClick = info => {
|
||||||
|
if (info.event.url) {
|
||||||
|
window.open(info.event.url);
|
||||||
|
info.jsEvent.preventDefault();
|
||||||
|
} else {
|
||||||
|
setModalEventContent(info);
|
||||||
|
setIsOpenModal(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card className="mb-3">
|
||||||
|
<CardHeader>
|
||||||
|
<Row noGutters className="align-items-center">
|
||||||
|
<Col xs="auto" className="d-flex justify-content-end order-md-1">
|
||||||
|
<UncontrolledTooltip placement="bottom" target="previous">
|
||||||
|
Previous
|
||||||
|
</UncontrolledTooltip>
|
||||||
|
<UncontrolledTooltip placement="bottom" target="next">
|
||||||
|
Next
|
||||||
|
</UncontrolledTooltip>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
calendarApi.prev();
|
||||||
|
setTitle(calendarApi.getCurrentData().viewTitle);
|
||||||
|
}}
|
||||||
|
color="link"
|
||||||
|
className="icon-item icon-item-sm icon-item-hover shadow-none p-0 mr-1 ml-md-2"
|
||||||
|
id="previous"
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon="arrow-left" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
calendarApi.next();
|
||||||
|
setTitle(calendarApi.getCurrentData().viewTitle);
|
||||||
|
}}
|
||||||
|
color="link"
|
||||||
|
className="icon-item icon-item-sm icon-item-hover shadow-none p-0 mr-1"
|
||||||
|
id="next"
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon="arrow-right" />
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
<Col xs="auto" md="auto" className="order-md-2">
|
||||||
|
<h4 className="mb-0 fs-0 fs-sm-1 fs-lg-2 calendar-title">
|
||||||
|
{title || `${calendarApi.currentDataManager?.data?.viewTitle}`}
|
||||||
|
</h4>
|
||||||
|
</Col>
|
||||||
|
<Col xs md="auto" tag={Flex} justify="end" className="order-md-3">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
color="falcon-primary"
|
||||||
|
onClick={() => {
|
||||||
|
calendarApi.today();
|
||||||
|
setTitle(calendarApi.getCurrentData().viewTitle);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Today
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
<Col md="auto" className="d-md-none">
|
||||||
|
<hr />
|
||||||
|
</Col>
|
||||||
|
<Col xs="auto" className="d-flex order-md-0">
|
||||||
|
<Button color="primary" size="sm" onClick={() => setIsOpenScheduleModal(true)}>
|
||||||
|
<FontAwesomeIcon icon="plus" className="mr-1" /> Add Schedule
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
<Col className="d-flex justify-content-end order-md-2">
|
||||||
|
<DropdownFilter
|
||||||
|
className="mr-2"
|
||||||
|
filters={viewName}
|
||||||
|
currentFilter={currentFilter}
|
||||||
|
handleFilter={handleFilter}
|
||||||
|
icon="sort"
|
||||||
|
right
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody className="p-0">
|
||||||
|
<FullCalendar
|
||||||
|
ref={calendarRef}
|
||||||
|
headerToolbar={false}
|
||||||
|
plugins={[dayGridPlugin, bootstrapPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
|
||||||
|
initialView="dayGridMonth"
|
||||||
|
themeSystem="bootstrap"
|
||||||
|
dayMaxEvents={2}
|
||||||
|
height={800}
|
||||||
|
stickyHeaderDates={false}
|
||||||
|
editable
|
||||||
|
selectable
|
||||||
|
selectMirror
|
||||||
|
select={info => {
|
||||||
|
setIsOpenScheduleModal(true);
|
||||||
|
setAddScheduleStartDate(info.start);
|
||||||
|
}}
|
||||||
|
views={views}
|
||||||
|
eventTimeFormat={eventTimeFormat}
|
||||||
|
eventClick={handleEventClick}
|
||||||
|
events={initialEvents}
|
||||||
|
buttonText={buttonText}
|
||||||
|
/>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<AddScheduleModal
|
||||||
|
isOpenScheduleModal={isOpenScheduleModal}
|
||||||
|
setIsOpenScheduleModal={setIsOpenScheduleModal}
|
||||||
|
initialEvents={initialEvents}
|
||||||
|
setInitialEvents={setInitialEvents}
|
||||||
|
addScheduleStartDate={addScheduleStartDate}
|
||||||
|
setAddScheduleStartDate={setAddScheduleStartDate}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CalendarEventModal
|
||||||
|
isOpenModal={isOpenModal}
|
||||||
|
setIsOpenModal={setIsOpenModal}
|
||||||
|
modalEventContent={modalEventContent}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Calendar;
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
|
import { Button, Media, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
|
||||||
|
import Flex from '../common/Flex';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
|
const getCircleStackIcon = (icon, transform) => (
|
||||||
|
<span className="fa-stack ml-n1 mr-3">
|
||||||
|
<FontAwesomeIcon icon="circle" className="text-200 fa-stack-2x" />
|
||||||
|
<FontAwesomeIcon icon={icon} transform={transform ?? ''} className="text-primary fa-stack-1x" inverse />
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
|
||||||
|
const EventModalMediaContent = ({ icon, heading, content, children }) => (
|
||||||
|
<Media className="mt-3">
|
||||||
|
{getCircleStackIcon(icon)}
|
||||||
|
<Media body>
|
||||||
|
<>
|
||||||
|
<h6>{heading}</h6>
|
||||||
|
{children || <p className="mb-0 text-justify">{content}</p>}
|
||||||
|
</>
|
||||||
|
</Media>
|
||||||
|
</Media>
|
||||||
|
);
|
||||||
|
|
||||||
|
const CalendarEventModal = ({ isOpenModal, setIsOpenModal, modalEventContent }) => {
|
||||||
|
const toggle = () => setIsOpenModal(!isOpenModal);
|
||||||
|
|
||||||
|
const { title, end, start } = isOpenModal && modalEventContent.event;
|
||||||
|
const { description, location, organizer, schedules } = isOpenModal && modalEventContent.event.extendedProps;
|
||||||
|
|
||||||
|
const closeBtn = (
|
||||||
|
<button className="close font-weight-normal" onClick={toggle}>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal isOpen={isOpenModal} toggle={toggle} modalClassName="theme-modal" contentClassName="border" centered>
|
||||||
|
<ModalHeader toggle={toggle} tag="div" className="px-card bg-light border-0 flex-between-center" close={closeBtn}>
|
||||||
|
<h5 className="mb-0">{title}</h5>
|
||||||
|
{organizer && (
|
||||||
|
<p className="mb-0 fs--1 mt-1">
|
||||||
|
by <a href="#!">{organizer}</a>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</ModalHeader>
|
||||||
|
<ModalBody className="px-card pb-card pt-1 fs--1">
|
||||||
|
{description && <EventModalMediaContent icon="align-left" heading="Description" content={description} />}
|
||||||
|
{(end || start) && (
|
||||||
|
<EventModalMediaContent icon="calendar-check" heading="Time and Date">
|
||||||
|
<span>{moment(start).format('LLLL')}</span>
|
||||||
|
{end && (
|
||||||
|
<>
|
||||||
|
{' '}
|
||||||
|
– <br /> <span>{moment(end).format('LLLL')}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</EventModalMediaContent>
|
||||||
|
)}
|
||||||
|
{location && (
|
||||||
|
<EventModalMediaContent icon="map-marker-alt" heading="Location">
|
||||||
|
<div className="mb-1" dangerouslySetInnerHTML={{ __html: location }} />
|
||||||
|
</EventModalMediaContent>
|
||||||
|
)}
|
||||||
|
{schedules && (
|
||||||
|
<EventModalMediaContent icon="clock" heading="Schedule">
|
||||||
|
<ul className="list-unstyled timeline mb-0">
|
||||||
|
{schedules.map((schedule, index) => (
|
||||||
|
<li key={index}>{schedule.title}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</EventModalMediaContent>
|
||||||
|
)}
|
||||||
|
</ModalBody>
|
||||||
|
<ModalFooter tag={Flex} justify="end" className="bg-light px-card border-top-0">
|
||||||
|
<Button tag="a" href="pages/event-create" color="falcon-default" size="sm">
|
||||||
|
<FontAwesomeIcon icon="pencil-alt" className="fs--2 mr-2" />
|
||||||
|
<span>Edit</span>
|
||||||
|
</Button>
|
||||||
|
<Button tag="a" href="pages/event-detail" color="falcon-primary" size="sm">
|
||||||
|
<span>See more details</span>
|
||||||
|
<FontAwesomeIcon icon="angle-right" className="fs--2 ml-1" />
|
||||||
|
</Button>
|
||||||
|
</ModalFooter>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CalendarEventModal;
|
||||||
|
|
@ -1,7 +1,25 @@
|
||||||
export default [
|
export default [
|
||||||
|
{
|
||||||
|
title: `2.9.0 - Banded kestrel`,
|
||||||
|
publish: '02 September, 2020',
|
||||||
|
logs: {
|
||||||
|
New: [
|
||||||
|
'<strong>Page</strong> :Calender',
|
||||||
|
'<strong>DOC</strong> : Full Calendar',
|
||||||
|
'<strong>Plugin</strong> : <code>FullCalendar</code>'
|
||||||
|
],
|
||||||
|
Migration: {
|
||||||
|
Add: [
|
||||||
|
'<code>src/components/calendar/*.*</code>',
|
||||||
|
'<code>src/components/plugins/CalenderExample.js</code>',
|
||||||
|
'<code>src/assets/scss/theme/_full-calender.scss</code>'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: `2.8.0 - Dickinson's kestrel`,
|
title: `2.8.0 - Dickinson's kestrel`,
|
||||||
publish: '29 September, 2020',
|
publish: '28 September, 2020',
|
||||||
logs: {
|
logs: {
|
||||||
New: ['Navbar combo layout', '<strong>DOC</strong> : Navbar combo Doc'],
|
New: ['Navbar combo layout', '<strong>DOC</strong> : Navbar combo Doc'],
|
||||||
Update: ['<strong>DOC</strong>: Documentation'],
|
Update: ['<strong>DOC</strong>: Documentation'],
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,13 @@
|
||||||
import React, { Fragment, useContext, useState } from 'react';
|
import React, { Fragment, useContext, useState } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Col, Row } from 'reactstrap';
|
import { Button, Col, Row } from 'reactstrap';
|
||||||
import StarCount from '../product/StarCount';
|
import StarCount from '../product/StarCount';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { calculateSale, isIterableArray } from '../../../helpers/utils';
|
import { calculateSale, isIterableArray } from '../../../helpers/utils';
|
||||||
import QuantityController from '../../common/QuantityController';
|
import QuantityController from '../../common/QuantityController';
|
||||||
import ButtonIcon from '../../common/ButtonIcon';
|
import ButtonIcon from '../../common/ButtonIcon';
|
||||||
import AppContext, { ProductContext } from '../../../context/Context';
|
import AppContext, { ProductContext } from '../../../context/Context';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
|
|
||||||
const ProductDetailsMain = ({
|
const ProductDetailsMain = ({
|
||||||
id,
|
id,
|
||||||
|
|
@ -103,7 +104,7 @@ const ProductDetailsMain = ({
|
||||||
<Col xs="auto" className="pr-0">
|
<Col xs="auto" className="pr-0">
|
||||||
<QuantityController quantity={quantity} setQuantity={setQuantity} />
|
<QuantityController quantity={quantity} setQuantity={setQuantity} />
|
||||||
</Col>
|
</Col>
|
||||||
<div className="col-auto">
|
<div className="col-auto pr-0">
|
||||||
{cartLoading ? (
|
{cartLoading ? (
|
||||||
<ButtonIcon
|
<ButtonIcon
|
||||||
color="primary"
|
color="primary"
|
||||||
|
|
@ -116,16 +117,17 @@ const ProductDetailsMain = ({
|
||||||
Processing
|
Processing
|
||||||
</ButtonIcon>
|
</ButtonIcon>
|
||||||
) : (
|
) : (
|
||||||
<ButtonIcon color="primary" size="sm" icon="cart-plus" onClick={handleAddToCart}>
|
<Button color="primary" size="sm" onClick={handleAddToCart}>
|
||||||
Add to Cart
|
<FontAwesomeIcon icon="cart-plus" className="mr-sm-2" />
|
||||||
</ButtonIcon>
|
<span className="d-md-inline-block d-none">Add to Cart</span>
|
||||||
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-sm-auto pl-3 pl-sm-0">
|
<div className="col-auto">
|
||||||
<ButtonIcon
|
<ButtonIcon
|
||||||
color="outline-danger"
|
color="outline-danger"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="border-300 mr-2 mt-2 mt-sm-0"
|
className="border-300 mr-2 "
|
||||||
icon={[isInFavouriteItems(id) ? 'fas' : 'far', 'heart']}
|
icon={[isInFavouriteItems(id) ? 'fas' : 'far', 'heart']}
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
isInFavouriteItems(id)
|
isInFavouriteItems(id)
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,32 @@
|
||||||
import React, { useContext } from 'react';
|
import React from 'react';
|
||||||
import { DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
|
import { DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome/index';
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome/index';
|
||||||
import { isIterableArray } from '../../../helpers/utils';
|
import { isIterableArray } from '../../../helpers/utils';
|
||||||
import DropdownItemFilter from './DropdownItemFilter';
|
import DropdownItemFilter from './DropdownItemFilter';
|
||||||
import { EmailContext } from '../../../context/Context';
|
|
||||||
|
|
||||||
const DropdownFilter = props => {
|
const DropdownFilter = ({ filters, handleFilter, currentFilter, icon, right, ...rest }) => (
|
||||||
// Context
|
<UncontrolledDropdown>
|
||||||
const { filters, handleFilter, currentFilter } = useContext(EmailContext);
|
<DropdownToggle size="sm" color="falcon-default" {...rest}>
|
||||||
|
{currentFilter && <span className="mr-2">{currentFilter}</span>}
|
||||||
return (
|
<FontAwesomeIcon icon={icon} />
|
||||||
<UncontrolledDropdown>
|
</DropdownToggle>
|
||||||
<DropdownToggle size="sm" color="falcon-default" {...props}>
|
<DropdownMenu className="border py-2" right={right}>
|
||||||
<FontAwesomeIcon icon="sliders-h" />
|
{isIterableArray(filters) &&
|
||||||
</DropdownToggle>
|
filters.map((filter, index) => (
|
||||||
<DropdownMenu className="border py-2">
|
<DropdownItemFilter
|
||||||
{isIterableArray(filters) &&
|
currentFilter={currentFilter}
|
||||||
filters.map((filter, index) => (
|
onClick={() => {
|
||||||
<DropdownItemFilter
|
handleFilter(filter);
|
||||||
currentFilter={currentFilter}
|
}}
|
||||||
onClick={() => handleFilter(filter)}
|
filter={filter}
|
||||||
filter={filter}
|
className="text-capitalize"
|
||||||
className="text-capitalize"
|
key={index}
|
||||||
key={index}
|
>
|
||||||
>
|
{filter}
|
||||||
{filter}
|
</DropdownItemFilter>
|
||||||
</DropdownItemFilter>
|
))}
|
||||||
))}
|
</DropdownMenu>
|
||||||
</DropdownMenu>
|
</UncontrolledDropdown>
|
||||||
</UncontrolledDropdown>
|
);
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DropdownFilter;
|
export default DropdownFilter;
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ import { EmailContext } from '../../../context/Context';
|
||||||
|
|
||||||
const InboxHeader = ({ isAllSelected, toggleIsAllSelected, selectedItems, isIndeterminate }) => {
|
const InboxHeader = ({ isAllSelected, toggleIsAllSelected, selectedItems, isIndeterminate }) => {
|
||||||
// Context
|
// Context
|
||||||
const { handleFilter } = useContext(EmailContext);
|
const { filters, handleFilter, currentFilter } = useContext(EmailContext);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
|
|
@ -31,7 +31,13 @@ const InboxHeader = ({ isAllSelected, toggleIsAllSelected, selectedItems, isInde
|
||||||
<Button color="falcon-default" className="btn-sm ml-sm-1" onClick={() => handleFilter('all')}>
|
<Button color="falcon-default" className="btn-sm ml-sm-1" onClick={() => handleFilter('all')}>
|
||||||
<FontAwesomeIcon icon="redo" />
|
<FontAwesomeIcon icon="redo" />
|
||||||
</Button>
|
</Button>
|
||||||
<DropdownFilter className="ml-2" />
|
<DropdownFilter
|
||||||
|
className="ml-2"
|
||||||
|
filters={filters}
|
||||||
|
handleFilter={handleFilter}
|
||||||
|
currentFilter={currentFilter}
|
||||||
|
icon="sliders-h"
|
||||||
|
/>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)}
|
)}
|
||||||
</Col>
|
</Col>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React from 'react';
|
import React, { useContext } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import NavbarDropdown from './NavbarDropdown';
|
import NavbarDropdown from './NavbarDropdown';
|
||||||
import NavbarDropdownComponents from './NavbarDropdownComponents';
|
import NavbarDropdownComponents from './NavbarDropdownComponents';
|
||||||
|
|
@ -30,19 +30,22 @@ import {
|
||||||
} from '../../routes';
|
} from '../../routes';
|
||||||
import { NavItem } from 'reactstrap';
|
import { NavItem } from 'reactstrap';
|
||||||
import { NavLink } from 'react-router-dom';
|
import { NavLink } from 'react-router-dom';
|
||||||
import { breakpoints } from '../../helpers/utils';
|
import { breakpoints, getPageName } from '../../helpers/utils';
|
||||||
import { topNavbarBreakpoint } from '../../config';
|
import { navbarBreakPoint, topNavbarBreakpoint } from '../../config';
|
||||||
|
import AppContext from '../../context/Context';
|
||||||
import { withTranslation } from 'react-i18next';
|
import { withTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
|
||||||
const NavbarTopDropDownMenus = ({ setNavbarCollapsed, t }) => {
|
const NavbarTopDropDownMenus = ({ setNavbarCollapsed, setShowBurgerMenu, t }) => {
|
||||||
|
const { isCombo, isTopNav } = useContext(AppContext);
|
||||||
// const components = [componentRoutes, pluginRoutes, utilityRoutes];
|
// const components = [componentRoutes, pluginRoutes, utilityRoutes];
|
||||||
// const pages = [pageRoutes, kanbanRoutes, widgetsRoutes, chatRoutes, emailRoutes, ECommerceRoutes];
|
// const pages = [pageRoutes, kanbanRoutes, widgetsRoutes, chatRoutes, emailRoutes, ECommerceRoutes];
|
||||||
const handleSetNavbarCollapsed = () => {
|
const handleSetNavbarCollapsed = () => {
|
||||||
const windowWidth = window.innerWidth;
|
const windowWidth = window.innerWidth;
|
||||||
windowWidth < breakpoints[topNavbarBreakpoint] && setNavbarCollapsed(false);
|
isTopNav && !isCombo && windowWidth < breakpoints[topNavbarBreakpoint] && setNavbarCollapsed(false);
|
||||||
|
isCombo && windowWidth < breakpoints[navbarBreakPoint] && setShowBurgerMenu(false);
|
||||||
};
|
};
|
||||||
|
const isLanding = getPageName('landing');
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/*<NavbarDropdown
|
{/*<NavbarDropdown
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,17 @@
|
||||||
import React, { useContext, useEffect, useRef } from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { Button, Collapse, Nav, Navbar } from 'reactstrap';
|
|
||||||
import is from 'is_js';
|
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
import is from 'is_js';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { useContext, useEffect, useRef } from 'react';
|
||||||
|
import { Button, Collapse, Nav, Navbar } from 'reactstrap';
|
||||||
|
import bgNavbarImg from '../../assets/img/generic/bg-navbar.png';
|
||||||
|
import { navbarBreakPoint, topNavbarBreakpoint } from '../../config';
|
||||||
|
import AppContext from '../../context/Context';
|
||||||
|
import routes from '../../routes';
|
||||||
|
import Flex from '../common/Flex';
|
||||||
import Logo from './Logo';
|
import Logo from './Logo';
|
||||||
|
import NavbarTopDropDownMenus from './NavbarTopDropDownMenus';
|
||||||
import NavbarVerticalMenu from './NavbarVerticalMenu';
|
import NavbarVerticalMenu from './NavbarVerticalMenu';
|
||||||
import ToggleButton from './ToggleButton';
|
import ToggleButton from './ToggleButton';
|
||||||
import AppContext from '../../context/Context';
|
|
||||||
import Flex from '../common/Flex';
|
|
||||||
import routes from '../../routes';
|
|
||||||
import { navbarBreakPoint, topNavbarBreakpoint } from '../../config';
|
|
||||||
|
|
||||||
import bgNavbarImg from '../../assets/img/generic/bg-navbar.png';
|
|
||||||
import NavbarTopDropDownMenus from './NavbarTopDropDownMenus';
|
|
||||||
|
|
||||||
const NavbarVertical = ({ navbarStyle }) => {
|
const NavbarVertical = ({ navbarStyle }) => {
|
||||||
const navBarRef = useRef(null);
|
const navBarRef = useRef(null);
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React, { useContext, useEffect, useState } from 'react';
|
import React, { Fragment, useContext, useEffect, useState } from 'react';
|
||||||
import { NavLink, withRouter } from 'react-router-dom';
|
import { NavLink, withRouter } from 'react-router-dom';
|
||||||
import { Collapse, Nav, NavItem, NavLink as BootstrapNavLink } from 'reactstrap';
|
import { Collapse, Nav, NavItem, NavLink as BootstrapNavLink } from 'reactstrap';
|
||||||
import AppContext from '../../context/Context';
|
import AppContext from '../../context/Context';
|
||||||
|
|
@ -8,6 +8,7 @@ import NavbarVerticalMenuItem from './NavbarVerticalMenuItem';
|
||||||
const NavbarVerticalMenu = ({ routes, location }) => {
|
const NavbarVerticalMenu = ({ routes, location }) => {
|
||||||
const [openedIndex, setOpenedIndex] = useState(null);
|
const [openedIndex, setOpenedIndex] = useState(null);
|
||||||
const { setShowBurgerMenu } = useContext(AppContext);
|
const { setShowBurgerMenu } = useContext(AppContext);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let openedDropdown = null;
|
let openedDropdown = null;
|
||||||
routes.forEach((route, index) => {
|
routes.forEach((route, index) => {
|
||||||
|
|
@ -23,32 +24,47 @@ const NavbarVerticalMenu = ({ routes, location }) => {
|
||||||
return setOpenedIndex(openedIndex === index ? null : index);
|
return setOpenedIndex(openedIndex === index ? null : index);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getHr = name => {
|
||||||
|
if (name === 'Widgets' || name === 'Documentation') {
|
||||||
|
return (
|
||||||
|
<div className="navbar-vertical-divider">
|
||||||
|
<hr className="navbar-vertical-hr my-2" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return routes.map((route, index) => {
|
return routes.map((route, index) => {
|
||||||
if (!route.children) {
|
if (!route.children) {
|
||||||
return (
|
return (
|
||||||
<NavItem key={index}>
|
<Fragment key={index}>
|
||||||
<NavLink className="nav-link" {...route} onClick={() => setShowBurgerMenu(false)}>
|
{getHr(route.name)}
|
||||||
<NavbarVerticalMenuItem route={route} />
|
<NavItem>
|
||||||
</NavLink>
|
<NavLink className="nav-link" {...route} onClick={() => setShowBurgerMenu(false)}>
|
||||||
</NavItem>
|
<NavbarVerticalMenuItem route={route} />
|
||||||
|
</NavLink>
|
||||||
|
</NavItem>
|
||||||
|
</Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NavItem key={index}>
|
<Fragment key={index}>
|
||||||
<BootstrapNavLink
|
{getHr(route.name)}
|
||||||
onClick={e => toggleOpened(e, index)}
|
<NavItem>
|
||||||
className="dropdown-indicator cursor-pointer"
|
<BootstrapNavLink
|
||||||
aria-expanded={openedIndex === index}
|
onClick={e => toggleOpened(e, index)}
|
||||||
>
|
className="dropdown-indicator cursor-pointer"
|
||||||
<NavbarVerticalMenuItem route={route} />
|
aria-expanded={openedIndex === index}
|
||||||
</BootstrapNavLink>
|
>
|
||||||
<Collapse isOpen={openedIndex === index}>
|
<NavbarVerticalMenuItem route={route} />
|
||||||
<Nav>
|
</BootstrapNavLink>
|
||||||
<NavbarVerticalMenu routes={route.children} location={location} />
|
<Collapse isOpen={openedIndex === index}>
|
||||||
</Nav>
|
<Nav>
|
||||||
</Collapse>
|
<NavbarVerticalMenu routes={route.children} location={location} />
|
||||||
</NavItem>
|
</Nav>
|
||||||
|
</Collapse>
|
||||||
|
</NavItem>
|
||||||
|
</Fragment>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -7,16 +7,18 @@ import CartNotification from './CartNotification';
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import AppContext from '../../context/Context';
|
import AppContext from '../../context/Context';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { navbarBreakPoint } from '../../config';
|
||||||
|
|
||||||
const TopNavRightSideNavItem = () => {
|
const TopNavRightSideNavItem = () => {
|
||||||
const { isTopNav } = useContext(AppContext);
|
const { isTopNav, isCombo } = useContext(AppContext);
|
||||||
return (
|
return (
|
||||||
<Nav navbar className="navbar-nav-icons ml-auto flex-row align-items-center">
|
<Nav navbar className="navbar-nav-icons ml-auto flex-row align-items-center">
|
||||||
<NavItem>
|
<NavItem>
|
||||||
<SettingsAnimatedIcon />
|
<SettingsAnimatedIcon />
|
||||||
</NavItem>
|
</NavItem>
|
||||||
{isTopNav && (
|
{/* {(isCombo || isTopNav) && (
|
||||||
<NavItem className={`p-2 px-lg-0 cursor-pointer d-none d-sm-block`}>
|
<NavItem className={classNames(`p-2 px-lg-0 cursor-pointer`, { [`d-${navbarBreakPoint}-none`]: isCombo })}>
|
||||||
<NavLink tag={Link} to="/changelog" id="changelog">
|
<NavLink tag={Link} to="/changelog" id="changelog">
|
||||||
<FontAwesomeIcon icon="code-branch" transform="right-6 grow-4" />
|
<FontAwesomeIcon icon="code-branch" transform="right-6 grow-4" />
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
|
@ -24,8 +26,8 @@ const TopNavRightSideNavItem = () => {
|
||||||
Changelog
|
Changelog
|
||||||
</UncontrolledTooltip>
|
</UncontrolledTooltip>
|
||||||
</NavItem>
|
</NavItem>
|
||||||
)}
|
)} */}
|
||||||
<CartNotification />
|
{/* <CartNotification /> */}
|
||||||
<NotificationDropdown />
|
<NotificationDropdown />
|
||||||
<ProfileDropdown />
|
<ProfileDropdown />
|
||||||
</Nav>
|
</Nav>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
import React from 'react';
|
||||||
|
import FullCalendar from '@fullcalendar/react';
|
||||||
|
import dayGridPlugin from '@fullcalendar/daygrid';
|
||||||
|
import timeGridPlugin from '@fullcalendar/timegrid';
|
||||||
|
|
||||||
|
import PageHeader from '../common/PageHeader';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
|
import { Button, Card, CardBody, Row, Col } from 'reactstrap';
|
||||||
|
import FalconCardHeader from '../common/FalconCardHeader';
|
||||||
|
import FalconEditor from '../common/FalconEditor';
|
||||||
|
|
||||||
|
const calenderCode = `function fullCalendarExample() {
|
||||||
|
return (
|
||||||
|
<FullCalendar
|
||||||
|
plugins={[ dayGridPlugin,timeGridPlugin ]}
|
||||||
|
initialView="dayGridMonth"
|
||||||
|
headerToolbar={ {
|
||||||
|
left: 'prev,next today',
|
||||||
|
center: 'title',
|
||||||
|
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
||||||
|
}}
|
||||||
|
events= 'https://fullcalendar.io/demo-events.json'
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}`;
|
||||||
|
const CalendarExample = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<PageHeader
|
||||||
|
title="Full Calendar"
|
||||||
|
description="FullCalendar seamlessly integrates with the React JavaScript framework. It provides a component that exactly matches the functionality of FullCalendar’s standard API."
|
||||||
|
className="mb-3"
|
||||||
|
>
|
||||||
|
<Button tag="a" href="https://fullcalendar.io/" target="_blank" color="link" size="sm" className="pl-0">
|
||||||
|
FullCalendar Documentation
|
||||||
|
<FontAwesomeIcon icon="chevron-right" className="ml-1 fs--2" />
|
||||||
|
</Button>
|
||||||
|
</PageHeader>
|
||||||
|
<Row>
|
||||||
|
<Col>
|
||||||
|
<Card>
|
||||||
|
<FalconCardHeader title="FullCalendar example" />
|
||||||
|
<CardBody>
|
||||||
|
<FalconEditor
|
||||||
|
code={calenderCode}
|
||||||
|
scope={{ FullCalendar, dayGridPlugin, timeGridPlugin }}
|
||||||
|
language="jsx"
|
||||||
|
/>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CalendarExample;
|
||||||
|
|
@ -0,0 +1,130 @@
|
||||||
|
// let todayStr = new Date().toISOString().replace(/T.*$/, '');
|
||||||
|
// var options = { month: 'long' };
|
||||||
|
// let currentMonthName = new Intl.DateTimeFormat('en-US', options).format(todayStr);
|
||||||
|
import * as uuid from 'uuid/v4';
|
||||||
|
|
||||||
|
const today = new Date()
|
||||||
|
.getDate()
|
||||||
|
.toString()
|
||||||
|
.padStart(2, '0');
|
||||||
|
|
||||||
|
let currentMonth = (new Date().getMonth() + 1).toString().padStart(2, '0');
|
||||||
|
const nextMonth = (currentMonth + 1).toString().padStart(2, '0');
|
||||||
|
const prevMonth = (currentMonth - 1).toString().padStart(2, '0');
|
||||||
|
const currentYear = new Date().getUTCFullYear();
|
||||||
|
|
||||||
|
const events = [
|
||||||
|
{
|
||||||
|
id: uuid(),
|
||||||
|
title: 'Boot Camp',
|
||||||
|
start: `${currentYear}-${currentMonth}-01 10:00:00`,
|
||||||
|
end: `${currentYear}-${currentMonth}-03 16:00:00`,
|
||||||
|
description:
|
||||||
|
"Boston Harbor Now in partnership with the Friends of Christopher Columbus Park, the Wharf District Council and the City of Boston is proud to announce the New Year's Eve Midnight Harbor Fireworks! This beloved nearly 40-year old tradition is made possible by the generous support of local waterfront organizations and businesses and the support of the City of Boston and the Office of Mayor Marty Walsh.",
|
||||||
|
className: 'bg-soft-success',
|
||||||
|
location: 'Boston Harborage, Christopher Columbus Park, </br> Boston, MA 02109, United States',
|
||||||
|
organizer: 'Boston Harbor Now'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uuid(),
|
||||||
|
title: `Crain's New York Business `,
|
||||||
|
start: `${currentYear}-${currentMonth}-11`,
|
||||||
|
description: `Crain's 2020 Hall of Fame. Sponsored Content By Crain's Content Studio. Crain's Content Studio Presents: New Jersey: Perfect for Business. Crain's Business Forum: Letitia James, New York State Attorney General. Crain's NYC Summit: Examining racial disparities during the pandemic`,
|
||||||
|
className: 'bg-soft-primary'
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: uuid(),
|
||||||
|
title: 'Conference',
|
||||||
|
start: `${currentYear}-${currentMonth}-${today}`,
|
||||||
|
description:
|
||||||
|
'The Milken Institute Global Conference gathered the best minds in the world to tackle some of its most stubborn challenges. It was a unique experience in which individuals with the power to enact change connected with experts who are reinventing health, technology, philanthropy, industry, and media.',
|
||||||
|
className: 'bg-soft-success',
|
||||||
|
allDay: true,
|
||||||
|
schedules: [
|
||||||
|
{
|
||||||
|
id: uuid(),
|
||||||
|
title: 'Reporting',
|
||||||
|
start: `${currentYear}-${currentMonth}-${today} 11:00:00`,
|
||||||
|
description: 'Time to start the conference and will briefly describe all information about the event.',
|
||||||
|
className: 'event-bg-soft-success'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uuid(),
|
||||||
|
title: 'Lunch',
|
||||||
|
start: `${currentYear}-${currentMonth}-${today} 14:00:00`,
|
||||||
|
description: 'Lunch facility for all the attendance in the conference.',
|
||||||
|
className: 'event-bg-soft-success'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uuid(),
|
||||||
|
title: 'Contest',
|
||||||
|
start: `${currentYear}-${currentMonth}-${today} 16:00:00`,
|
||||||
|
description: 'The starting of the programming contest',
|
||||||
|
className: 'event-bg-soft-success'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uuid(),
|
||||||
|
title: 'Dinner',
|
||||||
|
start: `${currentYear}-${currentMonth}-${today} 22:00:00`,
|
||||||
|
description: 'Dinner facility for all the attendance in the conference',
|
||||||
|
className: 'event-bg-soft-success'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uuid(),
|
||||||
|
title: `ICT Expo ${currentYear} - Product Release`,
|
||||||
|
start: `${currentYear}-${currentMonth}-16 10:00:00`,
|
||||||
|
description: `ICT Expo ${currentYear} is the largest private-sector exposition aimed at showcasing IT and ITES products and services in Switzerland.`,
|
||||||
|
end: `${currentYear}-${currentMonth}-18 16:00:00`,
|
||||||
|
className: 'bg-soft-warning'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uuid(),
|
||||||
|
title: 'Meeting',
|
||||||
|
start: `${currentYear}-${currentMonth}-07 10:00:00`,
|
||||||
|
description: 'Discuss about the upcoming projects in current year and assign all tasks to the individuals'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uuid(),
|
||||||
|
title: 'Meeting',
|
||||||
|
start: `${currentYear}-${currentMonth}-14 10:00:00`,
|
||||||
|
description:
|
||||||
|
'PeaceX is an international peace and amity organisation that aims at casting a pall at the striking issues surmounting the development of peoples and is committed to impacting the lives of young people all over the world.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uuid(),
|
||||||
|
title: 'Event With Url',
|
||||||
|
start: `${currentYear}-${currentMonth}-23`,
|
||||||
|
description: 'Will celebrate birthday party with my friends and family',
|
||||||
|
className: 'bg-soft-success',
|
||||||
|
url: 'http://google.com'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uuid(),
|
||||||
|
title: 'Meeting',
|
||||||
|
start: `${currentYear}-${currentMonth}-26`,
|
||||||
|
description: 'Sample example of a event with url. Click the event, will redirect to the given link.',
|
||||||
|
className: 'bg-soft-danger'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uuid(),
|
||||||
|
title: 'Birthday Party',
|
||||||
|
start: `${currentYear}-${nextMonth}-05`,
|
||||||
|
description:
|
||||||
|
'The Future of Zambia – Top 30 Under 30 is an annual award, ranking scheme, and recognition platform for young Zambian achievers under the age of 30, who are building brands, creating jobs, changing the game, and transforming the country.',
|
||||||
|
className: 'bg-soft-primary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uuid(),
|
||||||
|
title: 'Click for Google',
|
||||||
|
url: 'http://google.com/',
|
||||||
|
start: `${currentYear}-${prevMonth}-10`,
|
||||||
|
description:
|
||||||
|
'Applications are open for the New Media Writing Prize 2020. The New Media Writing Prize (NMWP) showcases exciting and inventive stories and poetry that integrate a variety of formats, platforms, and digital media.',
|
||||||
|
className: 'bg-soft-primary'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default events;
|
||||||
|
|
@ -1,311 +1,317 @@
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core';
|
import { library } from '@fortawesome/fontawesome-svg-core';
|
||||||
import {
|
import {
|
||||||
faChartPie,
|
faFacebook,
|
||||||
faCopy,
|
faFacebookF,
|
||||||
faSearch,
|
faFacebookSquare,
|
||||||
faHome,
|
faGooglePlusG,
|
||||||
faBell,
|
faGulp,
|
||||||
faPlay,
|
faHotjar,
|
||||||
faChevronRight,
|
faLinkedinIn,
|
||||||
faChevronLeft,
|
faMediumM,
|
||||||
faChevronUp,
|
faNodeJs,
|
||||||
faChevronDown,
|
faSass,
|
||||||
faExchangeAlt,
|
faTrello,
|
||||||
faAngleRight,
|
faTwitter,
|
||||||
faEllipsisH,
|
faYoutube
|
||||||
faCrown,
|
} from '@fortawesome/free-brands-svg-icons';
|
||||||
faListAlt,
|
import {
|
||||||
faCheck,
|
faCircle as farCircle,
|
||||||
faBan,
|
faClock as farClock,
|
||||||
faStream,
|
faComment as farComment,
|
||||||
faArrowsAltV,
|
faCopy as farCopy,
|
||||||
faSort,
|
faDizzy as farDizzy,
|
||||||
faSortAlphaDown,
|
faFile as farFile,
|
||||||
faSortAlphaUp,
|
faFileArchive as farFileArchive,
|
||||||
faSortNumericDown,
|
faFileAudio as farFileAudio,
|
||||||
faSortNumericUp,
|
faFileCode as farFileCode,
|
||||||
faSortAmountDown,
|
faFileImage as farFileImage,
|
||||||
faSortAmountUp,
|
faFilePdf as farFilePdf,
|
||||||
faCheckCircle,
|
faFileVideo as farFileVideo,
|
||||||
faUserCircle,
|
faHeart as farHeart,
|
||||||
faQuestionCircle,
|
faImage as farImage,
|
||||||
faLock,
|
faLaughBeam as farLaughBeam,
|
||||||
faCircle,
|
faLightbulb as farLightbulb,
|
||||||
faHeart,
|
faObjectUngroup as farObjectUngroup,
|
||||||
faShareAlt,
|
faPaperPlane as farPaperPlane,
|
||||||
faCaretRight,
|
faQuestionCircle as farQuestionCircle,
|
||||||
faArrowDown,
|
faSmileBeam as farSmileBeam,
|
||||||
faArrowUp,
|
faStar as farStar
|
||||||
faPrint,
|
} from '@fortawesome/free-regular-svg-icons';
|
||||||
faDollarSign,
|
import {
|
||||||
faLink,
|
faAlignLeft,
|
||||||
faPlus,
|
faAlignRight,
|
||||||
faMinus,
|
faAngleRight,
|
||||||
faUser,
|
faArchive,
|
||||||
faPencilAlt,
|
faArrowDown,
|
||||||
faCamera,
|
faArrowLeft,
|
||||||
faTimesCircle,
|
faArrowRight,
|
||||||
faSignInAlt,
|
faArrowsAltV,
|
||||||
faBook,
|
faArrowUp,
|
||||||
faPuzzlePiece,
|
faAt,
|
||||||
faTrash,
|
faBan,
|
||||||
faAlignLeft,
|
faBell,
|
||||||
faAlignRight,
|
faBook,
|
||||||
faPlug,
|
faCalendarAlt,
|
||||||
faTimes,
|
faCalendarCheck,
|
||||||
faFilter,
|
faCamera,
|
||||||
faExternalLinkAlt,
|
faCaretDown,
|
||||||
faCartPlus,
|
faCaretRight,
|
||||||
faShoppingCart,
|
faCaretUp,
|
||||||
faStar,
|
faCartPlus,
|
||||||
faStarHalfAlt,
|
faChartPie,
|
||||||
faArrowLeft,
|
faCheck,
|
||||||
faArrowRight,
|
faCheckCircle,
|
||||||
faArchive,
|
faCheckDouble,
|
||||||
faEnvelope,
|
faCheckSquare,
|
||||||
faClock,
|
faChevronDown,
|
||||||
faReply,
|
faChevronLeft,
|
||||||
faLocationArrow,
|
faChevronRight,
|
||||||
faCog,
|
faChevronUp,
|
||||||
faPaperclip,
|
faCircle,
|
||||||
faImage,
|
faCircleNotch,
|
||||||
faEllipsisV,
|
faClock,
|
||||||
faEnvelopeOpen,
|
faCodeBranch,
|
||||||
faRedo,
|
faCog,
|
||||||
faSlidersH,
|
faComments,
|
||||||
faTrashAlt,
|
faCopy,
|
||||||
faFileArchive,
|
faCrown,
|
||||||
faFilePdf,
|
faDollarSign,
|
||||||
faFileAlt,
|
faEdit,
|
||||||
faEye,
|
faEllipsisH,
|
||||||
faCaretUp,
|
faEllipsisV,
|
||||||
faCaretDown,
|
faEnvelope,
|
||||||
faCodeBranch,
|
faEnvelopeOpen,
|
||||||
faExclamationTriangle,
|
faExchangeAlt,
|
||||||
faListUl,
|
faExclamation,
|
||||||
faTh,
|
faExclamationCircle,
|
||||||
faGift,
|
faExclamationTriangle,
|
||||||
faUsers,
|
faExternalLinkAlt,
|
||||||
faGlobeAmericas,
|
faEye,
|
||||||
faPlusSquare,
|
faFileAlt,
|
||||||
faUserPlus,
|
faFileArchive,
|
||||||
faCircleNotch,
|
faFilePdf,
|
||||||
faExclamation,
|
faFilter,
|
||||||
faThumbsUp,
|
faFolderPlus,
|
||||||
faComments,
|
faGift,
|
||||||
faPhone,
|
faGlobeAmericas,
|
||||||
faInfo,
|
faHeart,
|
||||||
faVideo,
|
faHome,
|
||||||
faPalette,
|
faIcons,
|
||||||
faEdit,
|
faImage,
|
||||||
faShare,
|
faInfo,
|
||||||
faCheckSquare,
|
faLink,
|
||||||
faTools,
|
faList,
|
||||||
faCheckDouble,
|
faListAlt,
|
||||||
faSmileBeam,
|
faListUl,
|
||||||
faPoll,
|
faLocationArrow,
|
||||||
faPercentage,
|
faLock,
|
||||||
faIcons,
|
faMinus,
|
||||||
faList,
|
faMapMarkerAlt,
|
||||||
faUserFriends,
|
faPalette,
|
||||||
faExclamationCircle,
|
faPaperclip,
|
||||||
faFolderPlus,
|
faPencilAlt,
|
||||||
faTag,
|
faPercentage,
|
||||||
faAt
|
faPhone,
|
||||||
} from '@fortawesome/free-solid-svg-icons';
|
faPlay,
|
||||||
|
faPlug,
|
||||||
import {
|
faPlus,
|
||||||
faFacebook,
|
faPlusSquare,
|
||||||
faFacebookSquare,
|
faPoll,
|
||||||
faGulp,
|
faPrint,
|
||||||
faNodeJs,
|
faPuzzlePiece,
|
||||||
faSass,
|
faQuestionCircle,
|
||||||
faFacebookF,
|
faRedo,
|
||||||
faTwitter,
|
faReply,
|
||||||
faGooglePlusG,
|
faSearch,
|
||||||
faLinkedinIn,
|
faShare,
|
||||||
faMediumM,
|
faShareAlt,
|
||||||
faHotjar,
|
faShoppingCart,
|
||||||
faYoutube,
|
faSignInAlt,
|
||||||
faTrello
|
faSlidersH,
|
||||||
} from '@fortawesome/free-brands-svg-icons';
|
faSmileBeam,
|
||||||
|
faSort,
|
||||||
import {
|
faSortAlphaDown,
|
||||||
faHeart as farHeart,
|
faSortAlphaUp,
|
||||||
faLightbulb as farLightbulb,
|
faSortAmountDown,
|
||||||
faObjectUngroup as farObjectUngroup,
|
faSortAmountUp,
|
||||||
faPaperPlane as farPaperPlane,
|
faSortNumericDown,
|
||||||
faStar as farStar,
|
faSortNumericUp,
|
||||||
faImage as farImage,
|
faStar,
|
||||||
faFileArchive as farFileArchive,
|
faStarHalfAlt,
|
||||||
faFilePdf as farFilePdf,
|
faStream,
|
||||||
faFile as farFile,
|
faTag,
|
||||||
faFileVideo as farFileVideo,
|
faTh,
|
||||||
faFileAudio as farFileAudio,
|
faThumbsUp,
|
||||||
faFileImage as farFileImage,
|
faTimes,
|
||||||
faFileCode as farFileCode,
|
faTimesCircle,
|
||||||
faClock as farClock,
|
faTools,
|
||||||
faQuestionCircle as farQuestionCircle,
|
faTrash,
|
||||||
faDizzy as farDizzy,
|
faTrashAlt,
|
||||||
faLaughBeam as farLaughBeam,
|
faUser,
|
||||||
faSmileBeam as farSmileBeam,
|
faUserCircle,
|
||||||
faCircle as farCircle,
|
faUserFriends,
|
||||||
faCopy as farCopy,
|
faUserPlus,
|
||||||
faComment as farComment
|
faUsers,
|
||||||
} from '@fortawesome/free-regular-svg-icons';
|
faVideo,
|
||||||
|
faCross
|
||||||
library.add(
|
} from '@fortawesome/free-solid-svg-icons';
|
||||||
// Solid
|
|
||||||
faChartPie,
|
library.add(
|
||||||
faCopy,
|
// Solid
|
||||||
faSearch,
|
faChartPie,
|
||||||
faHome,
|
faCopy,
|
||||||
faBell,
|
faSearch,
|
||||||
faPlay,
|
faHome,
|
||||||
faChevronRight,
|
faBell,
|
||||||
faChevronLeft,
|
faPlay,
|
||||||
faChevronUp,
|
faChevronRight,
|
||||||
faChevronDown,
|
faChevronLeft,
|
||||||
faExchangeAlt,
|
faChevronUp,
|
||||||
faAngleRight,
|
faChevronDown,
|
||||||
faEllipsisH,
|
faExchangeAlt,
|
||||||
faCrown,
|
faAngleRight,
|
||||||
faListAlt,
|
faEllipsisH,
|
||||||
faCheck,
|
faCrown,
|
||||||
faBan,
|
faListAlt,
|
||||||
faStream,
|
faCheck,
|
||||||
faArrowsAltV,
|
faBan,
|
||||||
faSort,
|
faStream,
|
||||||
faSortAlphaDown,
|
faArrowsAltV,
|
||||||
faSortAlphaUp,
|
faSort,
|
||||||
faSortNumericDown,
|
faSortAlphaDown,
|
||||||
faSortNumericUp,
|
faSortAlphaUp,
|
||||||
faSortAmountDown,
|
faSortNumericDown,
|
||||||
faSortAmountUp,
|
faSortNumericUp,
|
||||||
faCheckCircle,
|
faSortAmountDown,
|
||||||
faUserCircle,
|
faSortAmountUp,
|
||||||
faQuestionCircle,
|
faCheckCircle,
|
||||||
faLock,
|
faUserCircle,
|
||||||
faCircle,
|
faQuestionCircle,
|
||||||
faHeart,
|
faLock,
|
||||||
faShareAlt,
|
faCircle,
|
||||||
faCaretRight,
|
faHeart,
|
||||||
faArrowDown,
|
faShareAlt,
|
||||||
faArrowUp,
|
faCaretRight,
|
||||||
faArrowLeft,
|
faArrowDown,
|
||||||
faArrowRight,
|
faArrowUp,
|
||||||
faPrint,
|
faArrowLeft,
|
||||||
faDollarSign,
|
faArrowRight,
|
||||||
faLink,
|
faPrint,
|
||||||
faPlus,
|
faDollarSign,
|
||||||
faMinus,
|
faLink,
|
||||||
faUser,
|
faPlus,
|
||||||
faPencilAlt,
|
faMinus,
|
||||||
faCamera,
|
faUser,
|
||||||
faTimesCircle,
|
faPencilAlt,
|
||||||
faSignInAlt,
|
faCamera,
|
||||||
faBook,
|
faTimesCircle,
|
||||||
faPuzzlePiece,
|
faSignInAlt,
|
||||||
faTrash,
|
faBook,
|
||||||
faAlignLeft,
|
faPuzzlePiece,
|
||||||
faAlignRight,
|
faTrash,
|
||||||
faPlug,
|
faAlignLeft,
|
||||||
faTimes,
|
faAlignRight,
|
||||||
faFilter,
|
faPlug,
|
||||||
faExternalLinkAlt,
|
faTimes,
|
||||||
faCartPlus,
|
faFilter,
|
||||||
faShoppingCart,
|
faExternalLinkAlt,
|
||||||
faStar,
|
faCartPlus,
|
||||||
faStarHalfAlt,
|
faShoppingCart,
|
||||||
faArchive,
|
faStar,
|
||||||
faEnvelope,
|
faStarHalfAlt,
|
||||||
faClock,
|
faArchive,
|
||||||
faStar,
|
faEnvelope,
|
||||||
faReply,
|
faClock,
|
||||||
faLocationArrow,
|
faStar,
|
||||||
faCog,
|
faReply,
|
||||||
faPaperclip,
|
faLocationArrow,
|
||||||
faImage,
|
faCog,
|
||||||
faEllipsisV,
|
faPaperclip,
|
||||||
faEnvelopeOpen,
|
faImage,
|
||||||
faRedo,
|
faEllipsisV,
|
||||||
faSlidersH,
|
faEnvelopeOpen,
|
||||||
faTrashAlt,
|
faRedo,
|
||||||
faFileArchive,
|
faSlidersH,
|
||||||
faFilePdf,
|
faTrashAlt,
|
||||||
faFileAlt,
|
faFileArchive,
|
||||||
faEye,
|
faFilePdf,
|
||||||
faCaretUp,
|
faFileAlt,
|
||||||
faCodeBranch,
|
faEye,
|
||||||
faExclamationTriangle,
|
faCaretUp,
|
||||||
faListUl,
|
faCodeBranch,
|
||||||
faTh,
|
faExclamationTriangle,
|
||||||
faGift,
|
faListUl,
|
||||||
faUsers,
|
faTh,
|
||||||
faGlobeAmericas,
|
faGift,
|
||||||
faPlusSquare,
|
faUsers,
|
||||||
faCaretDown,
|
faGlobeAmericas,
|
||||||
faUserPlus,
|
faPlusSquare,
|
||||||
faCircleNotch,
|
faCaretDown,
|
||||||
faExclamation,
|
faUserPlus,
|
||||||
faThumbsUp,
|
faCircleNotch,
|
||||||
faComments,
|
faExclamation,
|
||||||
faPalette,
|
faThumbsUp,
|
||||||
faEdit,
|
faComments,
|
||||||
faTrashAlt,
|
faPalette,
|
||||||
faShare,
|
faEdit,
|
||||||
faCheckSquare,
|
faTrashAlt,
|
||||||
faTools,
|
faShare,
|
||||||
faCheckDouble,
|
faCheckSquare,
|
||||||
faSmileBeam,
|
faTools,
|
||||||
faPoll,
|
faCheckDouble,
|
||||||
faPercentage,
|
faSmileBeam,
|
||||||
faIcons,
|
faPoll,
|
||||||
faList,
|
faPercentage,
|
||||||
faUserFriends,
|
faIcons,
|
||||||
faExclamationCircle,
|
faList,
|
||||||
faFolderPlus,
|
faUserFriends,
|
||||||
faTag,
|
faExclamationCircle,
|
||||||
faAt,
|
faFolderPlus,
|
||||||
|
faTag,
|
||||||
// Brand
|
faAt,
|
||||||
faFacebook,
|
faCalendarAlt,
|
||||||
faFacebookF,
|
faCalendarCheck,
|
||||||
faFacebookSquare,
|
faMapMarkerAlt,
|
||||||
faGulp,
|
faCross,
|
||||||
faNodeJs,
|
|
||||||
faSass,
|
// Brand
|
||||||
faTwitter,
|
faFacebook,
|
||||||
faGooglePlusG,
|
faFacebookF,
|
||||||
faLinkedinIn,
|
faFacebookSquare,
|
||||||
faMediumM,
|
faGulp,
|
||||||
faHotjar,
|
faNodeJs,
|
||||||
faYoutube,
|
faSass,
|
||||||
faVideo,
|
faTwitter,
|
||||||
faInfo,
|
faGooglePlusG,
|
||||||
faPhone,
|
faLinkedinIn,
|
||||||
faTrello,
|
faMediumM,
|
||||||
|
faHotjar,
|
||||||
// Regular
|
faYoutube,
|
||||||
farHeart,
|
faVideo,
|
||||||
farLightbulb,
|
faInfo,
|
||||||
farObjectUngroup,
|
faPhone,
|
||||||
farPaperPlane,
|
faTrello,
|
||||||
farStar,
|
|
||||||
farImage,
|
// Regular
|
||||||
farFileArchive,
|
farHeart,
|
||||||
farFilePdf,
|
farLightbulb,
|
||||||
farFile,
|
farObjectUngroup,
|
||||||
farFileVideo,
|
farPaperPlane,
|
||||||
farFileAudio,
|
farStar,
|
||||||
farFileImage,
|
farImage,
|
||||||
farFileCode,
|
farFileArchive,
|
||||||
farClock,
|
farFilePdf,
|
||||||
farQuestionCircle,
|
farFile,
|
||||||
farDizzy,
|
farFileVideo,
|
||||||
farLaughBeam,
|
farFileAudio,
|
||||||
farSmileBeam,
|
farFileImage,
|
||||||
farCircle,
|
farFileCode,
|
||||||
farCopy,
|
farClock,
|
||||||
farComment
|
farQuestionCircle,
|
||||||
);
|
farDizzy,
|
||||||
|
farLaughBeam,
|
||||||
|
farSmileBeam,
|
||||||
|
farCircle,
|
||||||
|
farCopy,
|
||||||
|
farComment
|
||||||
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,256 +1,261 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Redirect, Route, Switch } from 'react-router-dom';
|
import { Redirect, Route, Switch } from 'react-router-dom';
|
||||||
import Activity from '../components/page/Activity';
|
import Alerts from '../components/bootstrap-components/Alerts';
|
||||||
import Associations from '../components/page/Associations';
|
import Avatar from '../components/bootstrap-components/Avatar';
|
||||||
import Billing from '../components/page/Billing';
|
import Backgrounds from '../components/bootstrap-components/Backgrounds';
|
||||||
import CustomerDetails from '../components/page/CustomerDetails';
|
import Badges from '../components/bootstrap-components/Badges';
|
||||||
import EventDetail from '../components/page/EventDetail';
|
import Breadcrumbs from '../components/bootstrap-components/Breadcrumb';
|
||||||
import EventCreate from '../components/page/EventCreate';
|
import Buttons from '../components/bootstrap-components/Buttons';
|
||||||
import Events from '../components/page/Events';
|
import Cards from '../components/bootstrap-components/Cards';
|
||||||
import Faq from '../components/page/Faq';
|
import Carousel from '../components/bootstrap-components/Carousel';
|
||||||
import Invoice from '../components/page/Invoice';
|
import Collapses from '../components/bootstrap-components/Collapses';
|
||||||
import InvitePeople from '../components/page/InvitePeople';
|
import Combo from '../components/bootstrap-components/Combo';
|
||||||
import Notifications from '../components/page/Notifications';
|
import CookieNotice from '../components/bootstrap-components/CookieNotice';
|
||||||
import People from '../components/page/People';
|
import Dropdowns from '../components/bootstrap-components/Dropdowns';
|
||||||
import Pricing from '../components/pricing/Pricing';
|
import FalconAccordions from '../components/bootstrap-components/FalconAccordions';
|
||||||
import PricingAlt from '../components/pricing/PricingAlt';
|
import Forms from '../components/bootstrap-components/Forms';
|
||||||
import Profile from '../components/profile/Profile';
|
import ListGroups from '../components/bootstrap-components/ListGroups';
|
||||||
import Settings from '../components/page/Settings';
|
import Modals from '../components/bootstrap-components/Modals';
|
||||||
import Starter from '../components/extra/Starter';
|
import Navbars from '../components/bootstrap-components/Navbars';
|
||||||
import GettingStarted from '../components/documentation/GettingStarted';
|
import NavBarTop from '../components/bootstrap-components/NavBarTop';
|
||||||
import Alerts from '../components/bootstrap-components/Alerts';
|
import Navs from '../components/bootstrap-components/Navs';
|
||||||
import FalconAccordions from '../components/bootstrap-components/FalconAccordions';
|
import PageHeaders from '../components/bootstrap-components/PageHeaders';
|
||||||
import Spinners from '../components/bootstrap-components/Spinners';
|
import Paginations from '../components/bootstrap-components/Paginations';
|
||||||
import Carousel from '../components/bootstrap-components/Carousel';
|
import Popovers from '../components/bootstrap-components/Popovers';
|
||||||
import Avatar from '../components/bootstrap-components/Avatar';
|
import ProgressBar from '../components/bootstrap-components/ProgressBar';
|
||||||
import Badges from '../components/bootstrap-components/Badges';
|
import Sidepanel from '../components/bootstrap-components/Sidepanel';
|
||||||
import Backgrounds from '../components/bootstrap-components/Backgrounds';
|
import Spinners from '../components/bootstrap-components/Spinners';
|
||||||
import Breadcrumbs from '../components/bootstrap-components/Breadcrumb';
|
import Tables from '../components/bootstrap-components/Tables';
|
||||||
import Buttons from '../components/bootstrap-components/Buttons';
|
import Tooltips from '../components/bootstrap-components/Tooltips';
|
||||||
import Cards from '../components/bootstrap-components/Cards';
|
import VerticalNavbar from '../components/bootstrap-components/VerticalNavbar';
|
||||||
import Collapses from '../components/bootstrap-components/Collapses';
|
import Calendar from '../components/calendar/Calendar';
|
||||||
import Dropdowns from '../components/bootstrap-components/Dropdowns';
|
import ChangeLog from '../components/changelog/ChangeLog';
|
||||||
import Forms from '../components/bootstrap-components/Forms';
|
import Chat from '../components/chat/Chat';
|
||||||
import ListGroups from '../components/bootstrap-components/ListGroups';
|
import GettingStarted from '../components/documentation/GettingStarted';
|
||||||
import Modals from '../components/bootstrap-components/Modals';
|
import Checkout from '../components/e-commerce/Checkout';
|
||||||
import Navs from '../components/bootstrap-components/Navs';
|
import Customers from '../components/e-commerce/Customers';
|
||||||
import Navbars from '../components/bootstrap-components/Navbars';
|
import FavouriteItems from '../components/e-commerce/FavouriteItems';
|
||||||
import PageHeaders from '../components/bootstrap-components/PageHeaders';
|
import OrderDetails from '../components/e-commerce/OrderDetails';
|
||||||
import Paginations from '../components/bootstrap-components/Paginations';
|
import Orders from '../components/e-commerce/Orders';
|
||||||
import Popovers from '../components/bootstrap-components/Popovers';
|
import ProductDetails from '../components/e-commerce/ProductDetails';
|
||||||
import ProgressBar from '../components/bootstrap-components/ProgressBar';
|
import Products from '../components/e-commerce/Products';
|
||||||
import Tables from '../components/bootstrap-components/Tables';
|
import ShoppingCart from '../components/e-commerce/ShoppingCart';
|
||||||
import Tooltips from '../components/bootstrap-components/Tooltips';
|
import Compose from '../components/email/Compose';
|
||||||
import NavBarTop from '../components/bootstrap-components/NavBarTop';
|
import EmailDetail from '../components/email/EmailDetail';
|
||||||
import Combo from '../components/bootstrap-components/Combo';
|
import Inbox from '../components/email/Inbox';
|
||||||
import VerticalNavbar from '../components/bootstrap-components/VerticalNavbar';
|
import InboxProvider from '../components/email/inbox/InboxProvider';
|
||||||
import Sidepanel from '../components/bootstrap-components/Sidepanel';
|
import Starter from '../components/extra/Starter';
|
||||||
import CookieNotice from '../components/bootstrap-components/CookieNotice';
|
import Feed from '../components/feed/Feed';
|
||||||
import Borders from '../components/utilities/Borders';
|
import Kanban from '../components/kanban/Kanban';
|
||||||
import Clearfix from '../components/utilities/Clearfix';
|
import Activity from '../components/page/Activity';
|
||||||
import CloseIcon from '../components/utilities/CloseIcon';
|
import Associations from '../components/page/Associations';
|
||||||
import Colors from '../components/utilities/Colors';
|
import Billing from '../components/page/Billing';
|
||||||
import Display from '../components/utilities/Display';
|
import CustomerDetails from '../components/page/CustomerDetails';
|
||||||
import Embed from '../components/utilities/Embed';
|
import EventCreate from '../components/page/EventCreate';
|
||||||
import Figures from '../components/utilities/Figures';
|
import EventDetail from '../components/page/EventDetail';
|
||||||
import Flex from '../components/utilities/Flex';
|
import Events from '../components/page/Events';
|
||||||
import Grid from '../components/utilities/Grid';
|
import Faq from '../components/page/Faq';
|
||||||
import Sizing from '../components/utilities/Sizing';
|
import InvitePeople from '../components/page/InvitePeople';
|
||||||
import Spacing from '../components/utilities/Spacing';
|
import Invoice from '../components/page/Invoice';
|
||||||
import StretchedLink from '../components/utilities/StretchedLink';
|
import Notifications from '../components/page/Notifications';
|
||||||
import Typography from '../components/utilities/Typography';
|
import People from '../components/page/People';
|
||||||
import VerticalAlign from '../components/utilities/VerticalAlign';
|
import Settings from '../components/page/Settings';
|
||||||
import Visibility from '../components/utilities/Visibility';
|
import BulkSelect from '../components/plugins/BulkSelect';
|
||||||
import Typed from '../components/plugins/Typed';
|
import CalendarExample from '../components/plugins/CalendarExample';
|
||||||
import ImageLightbox from '../components/plugins/ImageLightbox';
|
import Chart from '../components/plugins/Chart';
|
||||||
import GoogleMapExample from '../components/plugins/GoogleMap';
|
import CodeHighlightDoc from '../components/plugins/CodeHighlightDoc';
|
||||||
import Chart from '../components/plugins/Chart';
|
import CountUpExample from '../components/plugins/Countup';
|
||||||
import CountUpExample from '../components/plugins/Countup';
|
import DatetimeExample from '../components/plugins/Datetime';
|
||||||
import DatetimeExample from '../components/plugins/Datetime';
|
import Dropzone from '../components/plugins/Dropzone';
|
||||||
import FontAwesome from '../components/plugins/FontAwesome';
|
import EchartMap from '../components/plugins/EchartMap';
|
||||||
import Echarts from '../components/plugins/Echarts';
|
import Echarts from '../components/plugins/Echarts';
|
||||||
import Toastify from '../components/plugins/Toastify';
|
import EmojiMart from '../components/plugins/EmojiMart';
|
||||||
import Select from '../components/plugins/Select';
|
import FontAwesome from '../components/plugins/FontAwesome';
|
||||||
import SlickCarousel from '../components/plugins/SlickCarousel';
|
import GoogleMapExample from '../components/plugins/GoogleMap';
|
||||||
import ReactBootstrapTable2 from '../components/plugins/ReactBootstrapTable2';
|
import ImageLightbox from '../components/plugins/ImageLightbox';
|
||||||
import ReactBeautifulDnD from '../components/plugins/ReactBeautifulDnD';
|
import Leaflet from '../components/plugins/Leaflet';
|
||||||
import EmailDetail from '../components/email/EmailDetail';
|
import Lottie from '../components/plugins/Lottie';
|
||||||
import Inbox from '../components/email/Inbox';
|
import Plyr from '../components/plugins/Plyr';
|
||||||
import Compose from '../components/email/Compose';
|
import ProgressBarJs from '../components/plugins/ProgressBarJs';
|
||||||
import QuillEditorExample from '../components/plugins/Quill';
|
import QuillEditorExample from '../components/plugins/Quill';
|
||||||
import BulkSelect from '../components/plugins/BulkSelect';
|
import ReactBeautifulDnD from '../components/plugins/ReactBeautifulDnD';
|
||||||
import ChangeLog from '../components/changelog/ChangeLog';
|
import ReactBootstrapTable2 from '../components/plugins/ReactBootstrapTable2';
|
||||||
import ProgressBarJs from '../components/plugins/ProgressBarJs';
|
import ReactHookFrom from '../components/plugins/ReactHookFrom';
|
||||||
import Products from '../components/e-commerce/Products';
|
import Scrollbar from '../components/plugins/Scrollbar';
|
||||||
import ProductDetails from '../components/e-commerce/ProductDetails';
|
import Select from '../components/plugins/Select';
|
||||||
import ShoppingCart from '../components/e-commerce/ShoppingCart';
|
import SlickCarousel from '../components/plugins/SlickCarousel';
|
||||||
import FavouriteItems from '../components/e-commerce/FavouriteItems';
|
import Toastify from '../components/plugins/Toastify';
|
||||||
import Orders from '../components/e-commerce/Orders';
|
import Typed from '../components/plugins/Typed';
|
||||||
import OrderDetails from '../components/e-commerce/OrderDetails';
|
import Pricing from '../components/pricing/Pricing';
|
||||||
import Customers from '../components/e-commerce/Customers';
|
import PricingAlt from '../components/pricing/PricingAlt';
|
||||||
import Checkout from '../components/e-commerce/Checkout';
|
import Profile from '../components/profile/Profile';
|
||||||
import Feed from '../components/feed/Feed';
|
import Borders from '../components/utilities/Borders';
|
||||||
import Plyr from '../components/plugins/Plyr';
|
import Clearfix from '../components/utilities/Clearfix';
|
||||||
import Scrollbar from '../components/plugins/Scrollbar';
|
import CloseIcon from '../components/utilities/CloseIcon';
|
||||||
import Leaflet from '../components/plugins/Leaflet';
|
import Colors from '../components/utilities/Colors';
|
||||||
import EchartMap from '../components/plugins/EchartMap';
|
import Display from '../components/utilities/Display';
|
||||||
import InboxProvider from '../components/email/inbox/InboxProvider';
|
import Embed from '../components/utilities/Embed';
|
||||||
import ReactHookFrom from '../components/plugins/ReactHookFrom';
|
import Figures from '../components/utilities/Figures';
|
||||||
import Lottie from '../components/plugins/Lottie';
|
import Flex from '../components/utilities/Flex';
|
||||||
import Dropzone from '../components/plugins/Dropzone';
|
import Grid from '../components/utilities/Grid';
|
||||||
import CodeHighlightDoc from '../components/plugins/CodeHighlightDoc';
|
import Sizing from '../components/utilities/Sizing';
|
||||||
import EmojiMart from '../components/plugins/EmojiMart';
|
import Spacing from '../components/utilities/Spacing';
|
||||||
import Chat from '../components/chat/Chat';
|
import StretchedLink from '../components/utilities/StretchedLink';
|
||||||
import Widgets from '../components/widgets/Widgets';
|
import Typography from '../components/utilities/Typography';
|
||||||
import Kanban from '../components/kanban/Kanban';
|
import VerticalAlign from '../components/utilities/VerticalAlign';
|
||||||
|
import Visibility from '../components/utilities/Visibility';
|
||||||
const InboxRoutes = ({ match: { url } }) => (
|
import Widgets from '../components/widgets/Widgets';
|
||||||
<InboxProvider>
|
|
||||||
<Switch>
|
const InboxRoutes = ({ match: { url } }) => (
|
||||||
<Route path={`${url}/email-detail`} exact component={EmailDetail} />
|
<InboxProvider>
|
||||||
<Route path={`${url}/inbox`} exact component={Inbox} />
|
<Switch>
|
||||||
<Route path={`${url}/compose`} exact component={Compose} />
|
<Route path={`${url}/email-detail`} exact component={EmailDetail} />
|
||||||
|
<Route path={`${url}/inbox`} exact component={Inbox} />
|
||||||
{/*Redirect*/}
|
<Route path={`${url}/compose`} exact component={Compose} />
|
||||||
<Redirect to="/errors/404" />
|
|
||||||
</Switch>
|
{/*Redirect*/}
|
||||||
</InboxProvider>
|
<Redirect to="/errors/404" />
|
||||||
);
|
</Switch>
|
||||||
|
</InboxProvider>
|
||||||
const ProductRoutes = ({ match: { url } }) => (
|
);
|
||||||
<Switch>
|
|
||||||
<Route path={`${url}/products/:productLayout`} exact component={Products} />
|
const ProductRoutes = ({ match: { url } }) => (
|
||||||
<Route path={`${url}/checkout`} exact component={Checkout} />
|
<Switch>
|
||||||
<Route path={`${url}/product-details/:id`} exact component={ProductDetails} />
|
<Route path={`${url}/products/:productLayout`} exact component={Products} />
|
||||||
<Route path={`${url}/product-details/`} exact component={ProductDetails} />
|
<Route path={`${url}/checkout`} exact component={Checkout} />
|
||||||
<Route path={`${url}/shopping-cart`} exact component={ShoppingCart} />
|
<Route path={`${url}/product-details/:id`} exact component={ProductDetails} />
|
||||||
<Route path={`${url}/orders`} exact component={Orders} />
|
<Route path={`${url}/product-details/`} exact component={ProductDetails} />
|
||||||
<Route path={`${url}/order-details`} exact component={OrderDetails} />
|
<Route path={`${url}/shopping-cart`} exact component={ShoppingCart} />
|
||||||
<Route path={`${url}/customers`} exact component={Customers} />
|
<Route path={`${url}/orders`} exact component={Orders} />
|
||||||
<Route path={`${url}/favourite-items`} exact component={FavouriteItems} />
|
<Route path={`${url}/order-details`} exact component={OrderDetails} />
|
||||||
|
<Route path={`${url}/customers`} exact component={Customers} />
|
||||||
{/*Redirect*/}
|
<Route path={`${url}/favourite-items`} exact component={FavouriteItems} />
|
||||||
<Redirect to="/errors/404" />
|
|
||||||
</Switch>
|
{/*Redirect*/}
|
||||||
);
|
<Redirect to="/errors/404" />
|
||||||
|
</Switch>
|
||||||
const DashboardRoutes = () => (
|
);
|
||||||
<Switch>
|
|
||||||
<Route path="/feed" exact component={Feed} />
|
const DashboardRoutes = () => (
|
||||||
{/*Pages*/}
|
<Switch>
|
||||||
<Route path="/pages/activity" exact component={Activity} />
|
<Route path="/feed" exact component={Feed} />
|
||||||
<Route path="/pages/associations" exact component={Associations} />
|
{/*Pages*/}
|
||||||
<Route path="/pages/billing" exact component={Billing} />
|
<Route path="/pages/activity" exact component={Activity} />
|
||||||
<Route path="/pages/customer-details" exact component={CustomerDetails} />
|
<Route path="/pages/associations" exact component={Associations} />
|
||||||
<Route path="/pages/event-detail" exact component={EventDetail} />
|
<Route path="/pages/billing" exact component={Billing} />
|
||||||
<Route path="/pages/event-create" exact component={EventCreate} />
|
<Route path="/pages/customer-details" exact component={CustomerDetails} />
|
||||||
<Route path="/pages/events" exact component={Events} />
|
<Route path="/pages/event-detail" exact component={EventDetail} />
|
||||||
<Route path="/pages/faq" exact component={Faq} />
|
<Route path="/pages/event-create" exact component={EventCreate} />
|
||||||
<Route path="/pages/invoice" exact component={Invoice} />
|
<Route path="/pages/events" exact component={Events} />
|
||||||
<Route path="/pages/invite-people" exact component={InvitePeople} />
|
<Route path="/pages/faq" exact component={Faq} />
|
||||||
<Route path="/pages/notifications" exact component={Notifications} />
|
<Route path="/pages/invoice" exact component={Invoice} />
|
||||||
<Route path="/pages/people" exact component={People} />
|
<Route path="/pages/invite-people" exact component={InvitePeople} />
|
||||||
<Route path="/pages/pricing" exact component={Pricing} />
|
<Route path="/pages/notifications" exact component={Notifications} />
|
||||||
<Route path="/pages/pricing-alt" exact component={PricingAlt} />
|
<Route path="/pages/people" exact component={People} />
|
||||||
<Route path="/pages/profile" exact component={Profile} />
|
<Route path="/pages/pricing" exact component={Pricing} />
|
||||||
<Route path="/pages/settings" exact component={Settings} />
|
<Route path="/pages/pricing-alt" exact component={PricingAlt} />
|
||||||
<Route path="/pages/starter" exact component={Starter} />
|
<Route path="/pages/profile" exact component={Profile} />
|
||||||
{/*chat*/}
|
<Route path="/pages/settings" exact component={Settings} />
|
||||||
<Route path="/chat" exact component={Chat} />
|
<Route path="/pages/starter" exact component={Starter} />
|
||||||
{/*kanban*/}
|
{/*chat*/}
|
||||||
<Route path="/kanban" exact component={Kanban} />
|
<Route path="/chat" exact component={Chat} />
|
||||||
{/*E commerce*/}
|
{/*calendar*/}
|
||||||
<Route path="/e-commerce" component={ProductRoutes} />
|
<Route path="/calendar" exact component={Calendar} />
|
||||||
|
{/*kanban*/}
|
||||||
{/*Email*/}
|
<Route path="/kanban" exact component={Kanban} />
|
||||||
<Route path="/email" component={InboxRoutes} />
|
{/*E commerce*/}
|
||||||
|
<Route path="/e-commerce" component={ProductRoutes} />
|
||||||
{/*widgets*/}
|
|
||||||
<Route path="/widgets" component={Widgets} />
|
{/*Email*/}
|
||||||
|
<Route path="/email" component={InboxRoutes} />
|
||||||
{/*Documentation*/}
|
|
||||||
<Route path="/documentation" exact component={GettingStarted} />
|
{/*widgets*/}
|
||||||
|
<Route path="/widgets" component={Widgets} />
|
||||||
{/*Changelog*/}
|
|
||||||
<Route path="/changelog" exact component={ChangeLog} />
|
{/*Documentation*/}
|
||||||
|
<Route path="/documentation" exact component={GettingStarted} />
|
||||||
{/*Components*/}
|
|
||||||
<Route path="/components/alerts" exact component={Alerts} />
|
{/*Changelog*/}
|
||||||
<Route path="/components/accordions" exact component={FalconAccordions} />
|
<Route path="/changelog" exact component={ChangeLog} />
|
||||||
<Route path="/components/avatar" exact component={Avatar} />
|
|
||||||
<Route path="/components/badges" exact component={Badges} />
|
{/*Components*/}
|
||||||
<Route path="/components/backgrounds" exact component={Backgrounds} />
|
<Route path="/components/alerts" exact component={Alerts} />
|
||||||
<Route path="/components/breadcrumb" exact component={Breadcrumbs} />
|
<Route path="/components/accordions" exact component={FalconAccordions} />
|
||||||
<Route path="/components/buttons" exact component={Buttons} />
|
<Route path="/components/avatar" exact component={Avatar} />
|
||||||
<Route path="/components/cards" exact component={Cards} />
|
<Route path="/components/badges" exact component={Badges} />
|
||||||
<Route path="/components/cookie-notice" exact component={CookieNotice} />
|
<Route path="/components/backgrounds" exact component={Backgrounds} />
|
||||||
<Route path="/components/collapses" exact component={Collapses} />
|
<Route path="/components/breadcrumb" exact component={Breadcrumbs} />
|
||||||
<Route path="/components/dropdowns" exact component={Dropdowns} />
|
<Route path="/components/buttons" exact component={Buttons} />
|
||||||
<Route path="/components/forms" exact component={Forms} />
|
<Route path="/components/cards" exact component={Cards} />
|
||||||
<Route path="/components/listgroups" exact component={ListGroups} />
|
<Route path="/components/cookie-notice" exact component={CookieNotice} />
|
||||||
<Route path="/components/modals" exact component={Modals} />
|
<Route path="/components/collapses" exact component={Collapses} />
|
||||||
<Route path="/components/navs" exact component={Navs} />
|
<Route path="/components/dropdowns" exact component={Dropdowns} />
|
||||||
<Route path="/components/navbars" exact component={Navbars} />
|
<Route path="/components/forms" exact component={Forms} />
|
||||||
<Route path="/components/navbar-top" exact component={NavBarTop} />
|
<Route path="/components/listgroups" exact component={ListGroups} />
|
||||||
<Route path="/components/combo" exact component={Combo} />
|
<Route path="/components/modals" exact component={Modals} />
|
||||||
<Route path="/components/navbar-vertical" exact component={VerticalNavbar} />
|
<Route path="/components/navs" exact component={Navs} />
|
||||||
<Route path="/components/Sidepanel" exact component={Sidepanel} />
|
<Route path="/components/navbars" exact component={Navbars} />
|
||||||
<Route path="/components/pageheaders" exact component={PageHeaders} />
|
<Route path="/components/navbar-top" exact component={NavBarTop} />
|
||||||
<Route path="/components/paginations" exact component={Paginations} />
|
<Route path="/components/combo" exact component={Combo} />
|
||||||
<Route path="/components/popovers" exact component={Popovers} />
|
<Route path="/components/navbar-vertical" exact component={VerticalNavbar} />
|
||||||
<Route path="/components/progress" exact component={ProgressBar} />
|
<Route path="/components/Sidepanel" exact component={Sidepanel} />
|
||||||
<Route path="/components/tables" exact component={Tables} />
|
<Route path="/components/pageheaders" exact component={PageHeaders} />
|
||||||
<Route path="/components/tooltips" exact component={Tooltips} />
|
<Route path="/components/paginations" exact component={Paginations} />
|
||||||
<Route path="/components/spinners" exact component={Spinners} />
|
<Route path="/components/popovers" exact component={Popovers} />
|
||||||
<Route path="/components/carousel" exact component={Carousel} />
|
<Route path="/components/progress" exact component={ProgressBar} />
|
||||||
|
<Route path="/components/tables" exact component={Tables} />
|
||||||
{/*Utilities*/}
|
<Route path="/components/tooltips" exact component={Tooltips} />
|
||||||
<Route path="/utilities/borders" exact component={Borders} />
|
<Route path="/components/spinners" exact component={Spinners} />
|
||||||
<Route path="/utilities/clearfix" exact component={Clearfix} />
|
<Route path="/components/carousel" exact component={Carousel} />
|
||||||
<Route path="/utilities/closeIcon" exact component={CloseIcon} />
|
|
||||||
<Route path="/utilities/colors" exact component={Colors} />
|
{/*Utilities*/}
|
||||||
<Route path="/utilities/display" exact component={Display} />
|
<Route path="/utilities/borders" exact component={Borders} />
|
||||||
<Route path="/utilities/embed" exact component={Embed} />
|
<Route path="/utilities/clearfix" exact component={Clearfix} />
|
||||||
<Route path="/utilities/figures" exact component={Figures} />
|
<Route path="/utilities/closeIcon" exact component={CloseIcon} />
|
||||||
<Route path="/utilities/flex" exact component={Flex} />
|
<Route path="/utilities/colors" exact component={Colors} />
|
||||||
<Route path="/utilities/grid" exact component={Grid} />
|
<Route path="/utilities/display" exact component={Display} />
|
||||||
<Route path="/utilities/sizing" exact component={Sizing} />
|
<Route path="/utilities/embed" exact component={Embed} />
|
||||||
<Route path="/utilities/spacing" exact component={Spacing} />
|
<Route path="/utilities/figures" exact component={Figures} />
|
||||||
<Route path="/utilities/stretchedLink" exact component={StretchedLink} />
|
<Route path="/utilities/flex" exact component={Flex} />
|
||||||
<Route path="/utilities/typography" exact component={Typography} />
|
<Route path="/utilities/grid" exact component={Grid} />
|
||||||
<Route path="/utilities/verticalAlign" exact component={VerticalAlign} />
|
<Route path="/utilities/sizing" exact component={Sizing} />
|
||||||
<Route path="/utilities/visibility" exact component={Visibility} />
|
<Route path="/utilities/spacing" exact component={Spacing} />
|
||||||
|
<Route path="/utilities/stretchedLink" exact component={StretchedLink} />
|
||||||
{/*Plugins*/}
|
<Route path="/utilities/typography" exact component={Typography} />
|
||||||
<Route path="/plugins/bulk-select" exact component={BulkSelect} />
|
<Route path="/utilities/verticalAlign" exact component={VerticalAlign} />
|
||||||
<Route path="/plugins/typed" exact component={Typed} />
|
<Route path="/utilities/visibility" exact component={Visibility} />
|
||||||
<Route path="/plugins/image-lightbox" exact component={ImageLightbox} />
|
|
||||||
<Route path="/plugins/lottie" exact component={Lottie} />
|
{/*Plugins*/}
|
||||||
<Route path="/plugins/google-map" exact component={GoogleMapExample} />
|
<Route path="/plugins/calendar-example" exact component={CalendarExample} />
|
||||||
<Route path="/plugins/wysiwyg" exact component={QuillEditorExample} />
|
<Route path="/plugins/bulk-select" exact component={BulkSelect} />
|
||||||
<Route path="/plugins/chart" exact component={Chart} />
|
<Route path="/plugins/typed" exact component={Typed} />
|
||||||
<Route path="/plugins/countup" exact component={CountUpExample} />
|
<Route path="/plugins/image-lightbox" exact component={ImageLightbox} />
|
||||||
<Route path="/plugins/datetime" exact component={DatetimeExample} />
|
<Route path="/plugins/lottie" exact component={Lottie} />
|
||||||
<Route path="/plugins/font-awesome" exact component={FontAwesome} />
|
<Route path="/plugins/google-map" exact component={GoogleMapExample} />
|
||||||
<Route path="/plugins/echarts" exact component={Echarts} />
|
<Route path="/plugins/wysiwyg" exact component={QuillEditorExample} />
|
||||||
<Route path="/plugins/toastify" exact component={Toastify} />
|
<Route path="/plugins/chart" exact component={Chart} />
|
||||||
<Route path="/plugins/select" exact component={Select} />
|
<Route path="/plugins/countup" exact component={CountUpExample} />
|
||||||
<Route path="/plugins/slick-carousel" exact component={SlickCarousel} />
|
<Route path="/plugins/datetime" exact component={DatetimeExample} />
|
||||||
<Route path="/plugins/scroll-bar" exact component={Scrollbar} />
|
<Route path="/plugins/font-awesome" exact component={FontAwesome} />
|
||||||
<Route path="/plugins/progressbar" exact component={ProgressBarJs} />
|
<Route path="/plugins/echarts" exact component={Echarts} />
|
||||||
<Route path="/plugins/plyr" exact component={Plyr} />
|
<Route path="/plugins/toastify" exact component={Toastify} />
|
||||||
<Route path="/plugins/react-hook-form" exact component={ReactHookFrom} />
|
<Route path="/plugins/select" exact component={Select} />
|
||||||
<Route path="/plugins/leaflet-map" exact component={Leaflet} />
|
<Route path="/plugins/slick-carousel" exact component={SlickCarousel} />
|
||||||
<Route path="/plugins/echart-map" exact component={EchartMap} />
|
<Route path="/plugins/scroll-bar" exact component={Scrollbar} />
|
||||||
<Route path="/plugins/dropzone" exact component={Dropzone} />
|
<Route path="/plugins/progressbar" exact component={ProgressBarJs} />
|
||||||
<Route path="/plugins/code-highlight" exact component={CodeHighlightDoc} />
|
<Route path="/plugins/plyr" exact component={Plyr} />
|
||||||
<Route path="/plugins/emoji-mart" exact component={EmojiMart} />
|
<Route path="/plugins/react-hook-form" exact component={ReactHookFrom} />
|
||||||
<Route path="/plugins/react-bootstrap-table2" exact component={ReactBootstrapTable2} />
|
<Route path="/plugins/leaflet-map" exact component={Leaflet} />
|
||||||
<Route path="/plugins/react-beautiful-dnd" exact component={ReactBeautifulDnD} />
|
<Route path="/plugins/echart-map" exact component={EchartMap} />
|
||||||
|
<Route path="/plugins/dropzone" exact component={Dropzone} />
|
||||||
{/*Redirect*/}
|
<Route path="/plugins/code-highlight" exact component={CodeHighlightDoc} />
|
||||||
<Redirect to="/errors/404" />
|
<Route path="/plugins/emoji-mart" exact component={EmojiMart} />
|
||||||
</Switch>
|
<Route path="/plugins/react-bootstrap-table2" exact component={ReactBootstrapTable2} />
|
||||||
);
|
<Route path="/plugins/react-beautiful-dnd" exact component={ReactBeautifulDnD} />
|
||||||
|
|
||||||
export default DashboardRoutes;
|
{/*Redirect*/}
|
||||||
|
<Redirect to="/errors/404" />
|
||||||
|
</Switch>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default DashboardRoutes;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue