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.
|
||||
* 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.
|
||||
* 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.
|
||||
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
|
||||
* 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.
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -3,14 +3,22 @@
|
|||
"version": "1.1.3",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^5.15.1",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.30",
|
||||
"@fortawesome/free-brands-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",
|
||||
"@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",
|
||||
"attr-accept": "^2.2.2",
|
||||
"bootstrap": "^4.5.2",
|
||||
"bootstrap": "^4.5.3",
|
||||
"chart.js": "^2.9.3",
|
||||
"classnames": "^2.2.6",
|
||||
"echarts": "^4.9.0",
|
||||
|
|
@ -42,6 +50,7 @@
|
|||
"react-dom": "^16.13.1",
|
||||
"react-dropzone": "^10.2.2",
|
||||
"react-es6-progressbar.js": "^1.1.0",
|
||||
"react-flatpickr": "^3.10.6",
|
||||
"react-hook-form": "^4.10.2",
|
||||
"react-i18next": "^11.7.0",
|
||||
"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 {
|
||||
width: 50px;
|
||||
|
|
|
|||
|
|
@ -9,4 +9,24 @@
|
|||
}
|
||||
@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
|
||||
-----------------------------------------------*/
|
||||
.icon-group{
|
||||
.icon-group {
|
||||
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%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -17,9 +19,21 @@
|
|||
border: 0;
|
||||
font-size: $font-size-sm;
|
||||
box-shadow: $box-shadow-sm;
|
||||
@include hover-focus{ background-color: $light; }
|
||||
&.icon-item-lg{
|
||||
@include hover-focus {
|
||||
background-color: $light;
|
||||
}
|
||||
&.icon-item-sm {
|
||||
height: 1.875rem;
|
||||
width: 1.875rem;
|
||||
}
|
||||
&.icon-item-lg {
|
||||
height: 2.75rem;
|
||||
width: 2.75rem;
|
||||
}
|
||||
&.icon-item-hover {
|
||||
transition: $transition-base;
|
||||
@include hover-focus {
|
||||
background-color: $gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
.card-notification {
|
||||
min-width: 20rem;
|
||||
@include media-breakpoint-only(xs) {
|
||||
min-width: 16rem;
|
||||
min-width: 17rem;
|
||||
}
|
||||
}
|
||||
.settings-popover {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,10 @@
|
|||
/*-----------------------------------------------
|
||||
| Navbar
|
||||
| Navbar vertical
|
||||
-----------------------------------------------*/
|
||||
.shadow-bottom {
|
||||
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 {
|
||||
top: 0;
|
||||
z-index: 1020;
|
||||
|
|
@ -67,8 +62,8 @@ $vartical-navbar-padding: 1.5rem;
|
|||
}
|
||||
}
|
||||
.nav-link-icon {
|
||||
width: $vartical-navbar-padding;
|
||||
min-width: $vartical-navbar-padding;
|
||||
width: $vertical-navbar-padding;
|
||||
min-width: $vertical-navbar-padding;
|
||||
font-size: map_get($font-sizes, 0);
|
||||
}
|
||||
.nav {
|
||||
|
|
@ -76,7 +71,7 @@ $vartical-navbar-padding: 1.5rem;
|
|||
font-size: 0.8125rem;
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
padding: 0.2rem $vartical-navbar-padding;
|
||||
padding: 0.2rem $vertical-navbar-padding;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0.35rem;
|
||||
|
|
@ -85,13 +80,13 @@ $vartical-navbar-padding: 1.5rem;
|
|||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
padding-left: $vartical-navbar-padding * 1.75;
|
||||
padding-left: $vertical-navbar-padding * 1.75;
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
.nav-item {
|
||||
.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
|
||||
-----------------------------------------------*/
|
||||
|
||||
$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) {
|
||||
$item: nth($breaks, $i);
|
||||
$j: '';
|
||||
|
|
|
|||
|
|
@ -8,3 +8,4 @@
|
|||
@import 'plugins/react-datetime';
|
||||
@import 'plugins/leaflet';
|
||||
@import 'plugins/emoji';
|
||||
@import 'plugins/full-calendar';
|
||||
|
|
|
|||
|
|
@ -453,6 +453,16 @@ $avatars-dimension: (
|
|||
|
||||
$tooltip-padding-y: 0.5rem !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
|
||||
//-----------------------------------------------*/
|
||||
|
|
|
|||
|
|
@ -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 [
|
||||
{
|
||||
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`,
|
||||
publish: '29 September, 2020',
|
||||
publish: '28 September, 2020',
|
||||
logs: {
|
||||
New: ['Navbar combo layout', '<strong>DOC</strong> : Navbar combo Doc'],
|
||||
Update: ['<strong>DOC</strong>: Documentation'],
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import React, { Fragment, useContext, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Col, Row } from 'reactstrap';
|
||||
import { Button, Col, Row } from 'reactstrap';
|
||||
import StarCount from '../product/StarCount';
|
||||
import classNames from 'classnames';
|
||||
import { calculateSale, isIterableArray } from '../../../helpers/utils';
|
||||
import QuantityController from '../../common/QuantityController';
|
||||
import ButtonIcon from '../../common/ButtonIcon';
|
||||
import AppContext, { ProductContext } from '../../../context/Context';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
|
||||
const ProductDetailsMain = ({
|
||||
id,
|
||||
|
|
@ -103,7 +104,7 @@ const ProductDetailsMain = ({
|
|||
<Col xs="auto" className="pr-0">
|
||||
<QuantityController quantity={quantity} setQuantity={setQuantity} />
|
||||
</Col>
|
||||
<div className="col-auto">
|
||||
<div className="col-auto pr-0">
|
||||
{cartLoading ? (
|
||||
<ButtonIcon
|
||||
color="primary"
|
||||
|
|
@ -116,16 +117,17 @@ const ProductDetailsMain = ({
|
|||
Processing
|
||||
</ButtonIcon>
|
||||
) : (
|
||||
<ButtonIcon color="primary" size="sm" icon="cart-plus" onClick={handleAddToCart}>
|
||||
Add to Cart
|
||||
</ButtonIcon>
|
||||
<Button color="primary" size="sm" onClick={handleAddToCart}>
|
||||
<FontAwesomeIcon icon="cart-plus" className="mr-sm-2" />
|
||||
<span className="d-md-inline-block d-none">Add to Cart</span>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-auto pl-3 pl-sm-0">
|
||||
<div className="col-auto">
|
||||
<ButtonIcon
|
||||
color="outline-danger"
|
||||
size="sm"
|
||||
className="border-300 mr-2 mt-2 mt-sm-0"
|
||||
className="border-300 mr-2 "
|
||||
icon={[isInFavouriteItems(id) ? 'fas' : 'far', 'heart']}
|
||||
onClick={() =>
|
||||
isInFavouriteItems(id)
|
||||
|
|
|
|||
|
|
@ -1,25 +1,23 @@
|
|||
import React, { useContext } from 'react';
|
||||
import React from 'react';
|
||||
import { DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome/index';
|
||||
import { isIterableArray } from '../../../helpers/utils';
|
||||
import DropdownItemFilter from './DropdownItemFilter';
|
||||
import { EmailContext } from '../../../context/Context';
|
||||
|
||||
const DropdownFilter = props => {
|
||||
// Context
|
||||
const { filters, handleFilter, currentFilter } = useContext(EmailContext);
|
||||
|
||||
return (
|
||||
const DropdownFilter = ({ filters, handleFilter, currentFilter, icon, right, ...rest }) => (
|
||||
<UncontrolledDropdown>
|
||||
<DropdownToggle size="sm" color="falcon-default" {...props}>
|
||||
<FontAwesomeIcon icon="sliders-h" />
|
||||
<DropdownToggle size="sm" color="falcon-default" {...rest}>
|
||||
{currentFilter && <span className="mr-2">{currentFilter}</span>}
|
||||
<FontAwesomeIcon icon={icon} />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu className="border py-2">
|
||||
<DropdownMenu className="border py-2" right={right}>
|
||||
{isIterableArray(filters) &&
|
||||
filters.map((filter, index) => (
|
||||
<DropdownItemFilter
|
||||
currentFilter={currentFilter}
|
||||
onClick={() => handleFilter(filter)}
|
||||
onClick={() => {
|
||||
handleFilter(filter);
|
||||
}}
|
||||
filter={filter}
|
||||
className="text-capitalize"
|
||||
key={index}
|
||||
|
|
@ -29,7 +27,6 @@ const DropdownFilter = props => {
|
|||
))}
|
||||
</DropdownMenu>
|
||||
</UncontrolledDropdown>
|
||||
);
|
||||
};
|
||||
);
|
||||
|
||||
export default DropdownFilter;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { EmailContext } from '../../../context/Context';
|
|||
|
||||
const InboxHeader = ({ isAllSelected, toggleIsAllSelected, selectedItems, isIndeterminate }) => {
|
||||
// Context
|
||||
const { handleFilter } = useContext(EmailContext);
|
||||
const { filters, handleFilter, currentFilter } = useContext(EmailContext);
|
||||
|
||||
return (
|
||||
<CardHeader>
|
||||
|
|
@ -31,7 +31,13 @@ const InboxHeader = ({ isAllSelected, toggleIsAllSelected, selectedItems, isInde
|
|||
<Button color="falcon-default" className="btn-sm ml-sm-1" onClick={() => handleFilter('all')}>
|
||||
<FontAwesomeIcon icon="redo" />
|
||||
</Button>
|
||||
<DropdownFilter className="ml-2" />
|
||||
<DropdownFilter
|
||||
className="ml-2"
|
||||
filters={filters}
|
||||
handleFilter={handleFilter}
|
||||
currentFilter={currentFilter}
|
||||
icon="sliders-h"
|
||||
/>
|
||||
</Fragment>
|
||||
)}
|
||||
</Col>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { useContext } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import NavbarDropdown from './NavbarDropdown';
|
||||
import NavbarDropdownComponents from './NavbarDropdownComponents';
|
||||
|
|
@ -30,19 +30,22 @@ import {
|
|||
} from '../../routes';
|
||||
import { NavItem } from 'reactstrap';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { breakpoints } from '../../helpers/utils';
|
||||
import { topNavbarBreakpoint } from '../../config';
|
||||
import { breakpoints, getPageName } from '../../helpers/utils';
|
||||
import { navbarBreakPoint, topNavbarBreakpoint } from '../../config';
|
||||
import AppContext from '../../context/Context';
|
||||
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 pages = [pageRoutes, kanbanRoutes, widgetsRoutes, chatRoutes, emailRoutes, ECommerceRoutes];
|
||||
const handleSetNavbarCollapsed = () => {
|
||||
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 (
|
||||
<>
|
||||
{/*<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 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 NavbarTopDropDownMenus from './NavbarTopDropDownMenus';
|
||||
import NavbarVerticalMenu from './NavbarVerticalMenu';
|
||||
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 navBarRef = useRef(null);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
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 { Collapse, Nav, NavItem, NavLink as BootstrapNavLink } from 'reactstrap';
|
||||
import AppContext from '../../context/Context';
|
||||
|
|
@ -8,6 +8,7 @@ import NavbarVerticalMenuItem from './NavbarVerticalMenuItem';
|
|||
const NavbarVerticalMenu = ({ routes, location }) => {
|
||||
const [openedIndex, setOpenedIndex] = useState(null);
|
||||
const { setShowBurgerMenu } = useContext(AppContext);
|
||||
|
||||
useEffect(() => {
|
||||
let openedDropdown = null;
|
||||
routes.forEach((route, index) => {
|
||||
|
|
@ -23,19 +24,33 @@ const NavbarVerticalMenu = ({ routes, location }) => {
|
|||
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) => {
|
||||
if (!route.children) {
|
||||
return (
|
||||
<NavItem key={index}>
|
||||
<Fragment key={index}>
|
||||
{getHr(route.name)}
|
||||
<NavItem>
|
||||
<NavLink className="nav-link" {...route} onClick={() => setShowBurgerMenu(false)}>
|
||||
<NavbarVerticalMenuItem route={route} />
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<NavItem key={index}>
|
||||
<Fragment key={index}>
|
||||
{getHr(route.name)}
|
||||
<NavItem>
|
||||
<BootstrapNavLink
|
||||
onClick={e => toggleOpened(e, index)}
|
||||
className="dropdown-indicator cursor-pointer"
|
||||
|
|
@ -49,6 +64,7 @@ const NavbarVerticalMenu = ({ routes, location }) => {
|
|||
</Nav>
|
||||
</Collapse>
|
||||
</NavItem>
|
||||
</Fragment>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,16 +7,18 @@ import CartNotification from './CartNotification';
|
|||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { Link } from 'react-router-dom';
|
||||
import AppContext from '../../context/Context';
|
||||
import classNames from 'classnames';
|
||||
import { navbarBreakPoint } from '../../config';
|
||||
|
||||
const TopNavRightSideNavItem = () => {
|
||||
const { isTopNav } = useContext(AppContext);
|
||||
const { isTopNav, isCombo } = useContext(AppContext);
|
||||
return (
|
||||
<Nav navbar className="navbar-nav-icons ml-auto flex-row align-items-center">
|
||||
<NavItem>
|
||||
<SettingsAnimatedIcon />
|
||||
</NavItem>
|
||||
{isTopNav && (
|
||||
<NavItem className={`p-2 px-lg-0 cursor-pointer d-none d-sm-block`}>
|
||||
{/* {(isCombo || isTopNav) && (
|
||||
<NavItem className={classNames(`p-2 px-lg-0 cursor-pointer`, { [`d-${navbarBreakPoint}-none`]: isCombo })}>
|
||||
<NavLink tag={Link} to="/changelog" id="changelog">
|
||||
<FontAwesomeIcon icon="code-branch" transform="right-6 grow-4" />
|
||||
</NavLink>
|
||||
|
|
@ -24,8 +26,8 @@ const TopNavRightSideNavItem = () => {
|
|||
Changelog
|
||||
</UncontrolledTooltip>
|
||||
</NavItem>
|
||||
)}
|
||||
<CartNotification />
|
||||
)} */}
|
||||
{/* <CartNotification /> */}
|
||||
<NotificationDropdown />
|
||||
<ProfileDropdown />
|
||||
</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,158 +1,160 @@
|
|||
import { library } from '@fortawesome/fontawesome-svg-core';
|
||||
import {
|
||||
faChartPie,
|
||||
faCopy,
|
||||
faSearch,
|
||||
faHome,
|
||||
faBell,
|
||||
faPlay,
|
||||
faChevronRight,
|
||||
faChevronLeft,
|
||||
faChevronUp,
|
||||
faChevronDown,
|
||||
faExchangeAlt,
|
||||
faAngleRight,
|
||||
faEllipsisH,
|
||||
faCrown,
|
||||
faListAlt,
|
||||
faCheck,
|
||||
faBan,
|
||||
faStream,
|
||||
faArrowsAltV,
|
||||
faSort,
|
||||
faSortAlphaDown,
|
||||
faSortAlphaUp,
|
||||
faSortNumericDown,
|
||||
faSortNumericUp,
|
||||
faSortAmountDown,
|
||||
faSortAmountUp,
|
||||
faCheckCircle,
|
||||
faUserCircle,
|
||||
faQuestionCircle,
|
||||
faLock,
|
||||
faCircle,
|
||||
faHeart,
|
||||
faShareAlt,
|
||||
faCaretRight,
|
||||
faArrowDown,
|
||||
faArrowUp,
|
||||
faPrint,
|
||||
faDollarSign,
|
||||
faLink,
|
||||
faPlus,
|
||||
faMinus,
|
||||
faUser,
|
||||
faPencilAlt,
|
||||
faCamera,
|
||||
faTimesCircle,
|
||||
faSignInAlt,
|
||||
faBook,
|
||||
faPuzzlePiece,
|
||||
faTrash,
|
||||
faAlignLeft,
|
||||
faAlignRight,
|
||||
faPlug,
|
||||
faTimes,
|
||||
faFilter,
|
||||
faExternalLinkAlt,
|
||||
faCartPlus,
|
||||
faShoppingCart,
|
||||
faStar,
|
||||
faStarHalfAlt,
|
||||
faArrowLeft,
|
||||
faArrowRight,
|
||||
faArchive,
|
||||
faEnvelope,
|
||||
faClock,
|
||||
faReply,
|
||||
faLocationArrow,
|
||||
faCog,
|
||||
faPaperclip,
|
||||
faImage,
|
||||
faEllipsisV,
|
||||
faEnvelopeOpen,
|
||||
faRedo,
|
||||
faSlidersH,
|
||||
faTrashAlt,
|
||||
faFileArchive,
|
||||
faFilePdf,
|
||||
faFileAlt,
|
||||
faEye,
|
||||
faCaretUp,
|
||||
faCaretDown,
|
||||
faCodeBranch,
|
||||
faExclamationTriangle,
|
||||
faListUl,
|
||||
faTh,
|
||||
faGift,
|
||||
faUsers,
|
||||
faGlobeAmericas,
|
||||
faPlusSquare,
|
||||
faUserPlus,
|
||||
faCircleNotch,
|
||||
faExclamation,
|
||||
faThumbsUp,
|
||||
faComments,
|
||||
faPhone,
|
||||
faInfo,
|
||||
faVideo,
|
||||
faPalette,
|
||||
faEdit,
|
||||
faShare,
|
||||
faCheckSquare,
|
||||
faTools,
|
||||
faCheckDouble,
|
||||
faSmileBeam,
|
||||
faPoll,
|
||||
faPercentage,
|
||||
faIcons,
|
||||
faList,
|
||||
faUserFriends,
|
||||
faExclamationCircle,
|
||||
faFolderPlus,
|
||||
faTag,
|
||||
faAt
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import {
|
||||
faFacebook,
|
||||
faFacebookSquare,
|
||||
faGulp,
|
||||
faNodeJs,
|
||||
faSass,
|
||||
faFacebookF,
|
||||
faTwitter,
|
||||
faFacebookSquare,
|
||||
faGooglePlusG,
|
||||
faGulp,
|
||||
faHotjar,
|
||||
faLinkedinIn,
|
||||
faMediumM,
|
||||
faHotjar,
|
||||
faYoutube,
|
||||
faTrello
|
||||
faNodeJs,
|
||||
faSass,
|
||||
faTrello,
|
||||
faTwitter,
|
||||
faYoutube
|
||||
} from '@fortawesome/free-brands-svg-icons';
|
||||
|
||||
import {
|
||||
faCircle as farCircle,
|
||||
faClock as farClock,
|
||||
faComment as farComment,
|
||||
faCopy as farCopy,
|
||||
faDizzy as farDizzy,
|
||||
faFile as farFile,
|
||||
faFileArchive as farFileArchive,
|
||||
faFileAudio as farFileAudio,
|
||||
faFileCode as farFileCode,
|
||||
faFileImage as farFileImage,
|
||||
faFilePdf as farFilePdf,
|
||||
faFileVideo as farFileVideo,
|
||||
faHeart as farHeart,
|
||||
faImage as farImage,
|
||||
faLaughBeam as farLaughBeam,
|
||||
faLightbulb as farLightbulb,
|
||||
faObjectUngroup as farObjectUngroup,
|
||||
faPaperPlane as farPaperPlane,
|
||||
faStar as farStar,
|
||||
faImage as farImage,
|
||||
faFileArchive as farFileArchive,
|
||||
faFilePdf as farFilePdf,
|
||||
faFile as farFile,
|
||||
faFileVideo as farFileVideo,
|
||||
faFileAudio as farFileAudio,
|
||||
faFileImage as farFileImage,
|
||||
faFileCode as farFileCode,
|
||||
faClock as farClock,
|
||||
faQuestionCircle as farQuestionCircle,
|
||||
faDizzy as farDizzy,
|
||||
faLaughBeam as farLaughBeam,
|
||||
faSmileBeam as farSmileBeam,
|
||||
faCircle as farCircle,
|
||||
faCopy as farCopy,
|
||||
faComment as farComment
|
||||
faStar as farStar
|
||||
} from '@fortawesome/free-regular-svg-icons';
|
||||
import {
|
||||
faAlignLeft,
|
||||
faAlignRight,
|
||||
faAngleRight,
|
||||
faArchive,
|
||||
faArrowDown,
|
||||
faArrowLeft,
|
||||
faArrowRight,
|
||||
faArrowsAltV,
|
||||
faArrowUp,
|
||||
faAt,
|
||||
faBan,
|
||||
faBell,
|
||||
faBook,
|
||||
faCalendarAlt,
|
||||
faCalendarCheck,
|
||||
faCamera,
|
||||
faCaretDown,
|
||||
faCaretRight,
|
||||
faCaretUp,
|
||||
faCartPlus,
|
||||
faChartPie,
|
||||
faCheck,
|
||||
faCheckCircle,
|
||||
faCheckDouble,
|
||||
faCheckSquare,
|
||||
faChevronDown,
|
||||
faChevronLeft,
|
||||
faChevronRight,
|
||||
faChevronUp,
|
||||
faCircle,
|
||||
faCircleNotch,
|
||||
faClock,
|
||||
faCodeBranch,
|
||||
faCog,
|
||||
faComments,
|
||||
faCopy,
|
||||
faCrown,
|
||||
faDollarSign,
|
||||
faEdit,
|
||||
faEllipsisH,
|
||||
faEllipsisV,
|
||||
faEnvelope,
|
||||
faEnvelopeOpen,
|
||||
faExchangeAlt,
|
||||
faExclamation,
|
||||
faExclamationCircle,
|
||||
faExclamationTriangle,
|
||||
faExternalLinkAlt,
|
||||
faEye,
|
||||
faFileAlt,
|
||||
faFileArchive,
|
||||
faFilePdf,
|
||||
faFilter,
|
||||
faFolderPlus,
|
||||
faGift,
|
||||
faGlobeAmericas,
|
||||
faHeart,
|
||||
faHome,
|
||||
faIcons,
|
||||
faImage,
|
||||
faInfo,
|
||||
faLink,
|
||||
faList,
|
||||
faListAlt,
|
||||
faListUl,
|
||||
faLocationArrow,
|
||||
faLock,
|
||||
faMinus,
|
||||
faMapMarkerAlt,
|
||||
faPalette,
|
||||
faPaperclip,
|
||||
faPencilAlt,
|
||||
faPercentage,
|
||||
faPhone,
|
||||
faPlay,
|
||||
faPlug,
|
||||
faPlus,
|
||||
faPlusSquare,
|
||||
faPoll,
|
||||
faPrint,
|
||||
faPuzzlePiece,
|
||||
faQuestionCircle,
|
||||
faRedo,
|
||||
faReply,
|
||||
faSearch,
|
||||
faShare,
|
||||
faShareAlt,
|
||||
faShoppingCart,
|
||||
faSignInAlt,
|
||||
faSlidersH,
|
||||
faSmileBeam,
|
||||
faSort,
|
||||
faSortAlphaDown,
|
||||
faSortAlphaUp,
|
||||
faSortAmountDown,
|
||||
faSortAmountUp,
|
||||
faSortNumericDown,
|
||||
faSortNumericUp,
|
||||
faStar,
|
||||
faStarHalfAlt,
|
||||
faStream,
|
||||
faTag,
|
||||
faTh,
|
||||
faThumbsUp,
|
||||
faTimes,
|
||||
faTimesCircle,
|
||||
faTools,
|
||||
faTrash,
|
||||
faTrashAlt,
|
||||
faUser,
|
||||
faUserCircle,
|
||||
faUserFriends,
|
||||
faUserPlus,
|
||||
faUsers,
|
||||
faVideo,
|
||||
faCross
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
library.add(
|
||||
// Solid
|
||||
|
|
@ -267,6 +269,10 @@ library.add(
|
|||
faFolderPlus,
|
||||
faTag,
|
||||
faAt,
|
||||
faCalendarAlt,
|
||||
faCalendarCheck,
|
||||
faMapMarkerAlt,
|
||||
faCross,
|
||||
|
||||
// Brand
|
||||
faFacebook,
|
||||
|
|
|
|||
|
|
@ -1,51 +1,94 @@
|
|||
import React from 'react';
|
||||
import { Redirect, Route, Switch } from 'react-router-dom';
|
||||
import Activity from '../components/page/Activity';
|
||||
import Associations from '../components/page/Associations';
|
||||
import Billing from '../components/page/Billing';
|
||||
import CustomerDetails from '../components/page/CustomerDetails';
|
||||
import EventDetail from '../components/page/EventDetail';
|
||||
import EventCreate from '../components/page/EventCreate';
|
||||
import Events from '../components/page/Events';
|
||||
import Faq from '../components/page/Faq';
|
||||
import Invoice from '../components/page/Invoice';
|
||||
import InvitePeople from '../components/page/InvitePeople';
|
||||
import Notifications from '../components/page/Notifications';
|
||||
import People from '../components/page/People';
|
||||
import Pricing from '../components/pricing/Pricing';
|
||||
import PricingAlt from '../components/pricing/PricingAlt';
|
||||
import Profile from '../components/profile/Profile';
|
||||
import Settings from '../components/page/Settings';
|
||||
import Starter from '../components/extra/Starter';
|
||||
import GettingStarted from '../components/documentation/GettingStarted';
|
||||
import Alerts from '../components/bootstrap-components/Alerts';
|
||||
import FalconAccordions from '../components/bootstrap-components/FalconAccordions';
|
||||
import Spinners from '../components/bootstrap-components/Spinners';
|
||||
import Carousel from '../components/bootstrap-components/Carousel';
|
||||
import Avatar from '../components/bootstrap-components/Avatar';
|
||||
import Badges from '../components/bootstrap-components/Badges';
|
||||
import Backgrounds from '../components/bootstrap-components/Backgrounds';
|
||||
import Badges from '../components/bootstrap-components/Badges';
|
||||
import Breadcrumbs from '../components/bootstrap-components/Breadcrumb';
|
||||
import Buttons from '../components/bootstrap-components/Buttons';
|
||||
import Cards from '../components/bootstrap-components/Cards';
|
||||
import Carousel from '../components/bootstrap-components/Carousel';
|
||||
import Collapses from '../components/bootstrap-components/Collapses';
|
||||
import Combo from '../components/bootstrap-components/Combo';
|
||||
import CookieNotice from '../components/bootstrap-components/CookieNotice';
|
||||
import Dropdowns from '../components/bootstrap-components/Dropdowns';
|
||||
import FalconAccordions from '../components/bootstrap-components/FalconAccordions';
|
||||
import Forms from '../components/bootstrap-components/Forms';
|
||||
import ListGroups from '../components/bootstrap-components/ListGroups';
|
||||
import Modals from '../components/bootstrap-components/Modals';
|
||||
import Navs from '../components/bootstrap-components/Navs';
|
||||
import Navbars from '../components/bootstrap-components/Navbars';
|
||||
import NavBarTop from '../components/bootstrap-components/NavBarTop';
|
||||
import Navs from '../components/bootstrap-components/Navs';
|
||||
import PageHeaders from '../components/bootstrap-components/PageHeaders';
|
||||
import Paginations from '../components/bootstrap-components/Paginations';
|
||||
import Popovers from '../components/bootstrap-components/Popovers';
|
||||
import ProgressBar from '../components/bootstrap-components/ProgressBar';
|
||||
import Sidepanel from '../components/bootstrap-components/Sidepanel';
|
||||
import Spinners from '../components/bootstrap-components/Spinners';
|
||||
import Tables from '../components/bootstrap-components/Tables';
|
||||
import Tooltips from '../components/bootstrap-components/Tooltips';
|
||||
import NavBarTop from '../components/bootstrap-components/NavBarTop';
|
||||
import Combo from '../components/bootstrap-components/Combo';
|
||||
import VerticalNavbar from '../components/bootstrap-components/VerticalNavbar';
|
||||
import Sidepanel from '../components/bootstrap-components/Sidepanel';
|
||||
import CookieNotice from '../components/bootstrap-components/CookieNotice';
|
||||
import Calendar from '../components/calendar/Calendar';
|
||||
import ChangeLog from '../components/changelog/ChangeLog';
|
||||
import Chat from '../components/chat/Chat';
|
||||
import GettingStarted from '../components/documentation/GettingStarted';
|
||||
import Checkout from '../components/e-commerce/Checkout';
|
||||
import Customers from '../components/e-commerce/Customers';
|
||||
import FavouriteItems from '../components/e-commerce/FavouriteItems';
|
||||
import OrderDetails from '../components/e-commerce/OrderDetails';
|
||||
import Orders from '../components/e-commerce/Orders';
|
||||
import ProductDetails from '../components/e-commerce/ProductDetails';
|
||||
import Products from '../components/e-commerce/Products';
|
||||
import ShoppingCart from '../components/e-commerce/ShoppingCart';
|
||||
import Compose from '../components/email/Compose';
|
||||
import EmailDetail from '../components/email/EmailDetail';
|
||||
import Inbox from '../components/email/Inbox';
|
||||
import InboxProvider from '../components/email/inbox/InboxProvider';
|
||||
import Starter from '../components/extra/Starter';
|
||||
import Feed from '../components/feed/Feed';
|
||||
import Kanban from '../components/kanban/Kanban';
|
||||
import Activity from '../components/page/Activity';
|
||||
import Associations from '../components/page/Associations';
|
||||
import Billing from '../components/page/Billing';
|
||||
import CustomerDetails from '../components/page/CustomerDetails';
|
||||
import EventCreate from '../components/page/EventCreate';
|
||||
import EventDetail from '../components/page/EventDetail';
|
||||
import Events from '../components/page/Events';
|
||||
import Faq from '../components/page/Faq';
|
||||
import InvitePeople from '../components/page/InvitePeople';
|
||||
import Invoice from '../components/page/Invoice';
|
||||
import Notifications from '../components/page/Notifications';
|
||||
import People from '../components/page/People';
|
||||
import Settings from '../components/page/Settings';
|
||||
import BulkSelect from '../components/plugins/BulkSelect';
|
||||
import CalendarExample from '../components/plugins/CalendarExample';
|
||||
import Chart from '../components/plugins/Chart';
|
||||
import CodeHighlightDoc from '../components/plugins/CodeHighlightDoc';
|
||||
import CountUpExample from '../components/plugins/Countup';
|
||||
import DatetimeExample from '../components/plugins/Datetime';
|
||||
import Dropzone from '../components/plugins/Dropzone';
|
||||
import EchartMap from '../components/plugins/EchartMap';
|
||||
import Echarts from '../components/plugins/Echarts';
|
||||
import EmojiMart from '../components/plugins/EmojiMart';
|
||||
import FontAwesome from '../components/plugins/FontAwesome';
|
||||
import GoogleMapExample from '../components/plugins/GoogleMap';
|
||||
import ImageLightbox from '../components/plugins/ImageLightbox';
|
||||
import Leaflet from '../components/plugins/Leaflet';
|
||||
import Lottie from '../components/plugins/Lottie';
|
||||
import Plyr from '../components/plugins/Plyr';
|
||||
import ProgressBarJs from '../components/plugins/ProgressBarJs';
|
||||
import QuillEditorExample from '../components/plugins/Quill';
|
||||
import ReactBeautifulDnD from '../components/plugins/ReactBeautifulDnD';
|
||||
import ReactBootstrapTable2 from '../components/plugins/ReactBootstrapTable2';
|
||||
import ReactHookFrom from '../components/plugins/ReactHookFrom';
|
||||
import Scrollbar from '../components/plugins/Scrollbar';
|
||||
import Select from '../components/plugins/Select';
|
||||
import SlickCarousel from '../components/plugins/SlickCarousel';
|
||||
import Toastify from '../components/plugins/Toastify';
|
||||
import Typed from '../components/plugins/Typed';
|
||||
import Pricing from '../components/pricing/Pricing';
|
||||
import PricingAlt from '../components/pricing/PricingAlt';
|
||||
import Profile from '../components/profile/Profile';
|
||||
import Borders from '../components/utilities/Borders';
|
||||
import Clearfix from '../components/utilities/Clearfix';
|
||||
import CloseIcon from '../components/utilities/CloseIcon';
|
||||
|
|
@ -61,48 +104,7 @@ import StretchedLink from '../components/utilities/StretchedLink';
|
|||
import Typography from '../components/utilities/Typography';
|
||||
import VerticalAlign from '../components/utilities/VerticalAlign';
|
||||
import Visibility from '../components/utilities/Visibility';
|
||||
import Typed from '../components/plugins/Typed';
|
||||
import ImageLightbox from '../components/plugins/ImageLightbox';
|
||||
import GoogleMapExample from '../components/plugins/GoogleMap';
|
||||
import Chart from '../components/plugins/Chart';
|
||||
import CountUpExample from '../components/plugins/Countup';
|
||||
import DatetimeExample from '../components/plugins/Datetime';
|
||||
import FontAwesome from '../components/plugins/FontAwesome';
|
||||
import Echarts from '../components/plugins/Echarts';
|
||||
import Toastify from '../components/plugins/Toastify';
|
||||
import Select from '../components/plugins/Select';
|
||||
import SlickCarousel from '../components/plugins/SlickCarousel';
|
||||
import ReactBootstrapTable2 from '../components/plugins/ReactBootstrapTable2';
|
||||
import ReactBeautifulDnD from '../components/plugins/ReactBeautifulDnD';
|
||||
import EmailDetail from '../components/email/EmailDetail';
|
||||
import Inbox from '../components/email/Inbox';
|
||||
import Compose from '../components/email/Compose';
|
||||
import QuillEditorExample from '../components/plugins/Quill';
|
||||
import BulkSelect from '../components/plugins/BulkSelect';
|
||||
import ChangeLog from '../components/changelog/ChangeLog';
|
||||
import ProgressBarJs from '../components/plugins/ProgressBarJs';
|
||||
import Products from '../components/e-commerce/Products';
|
||||
import ProductDetails from '../components/e-commerce/ProductDetails';
|
||||
import ShoppingCart from '../components/e-commerce/ShoppingCart';
|
||||
import FavouriteItems from '../components/e-commerce/FavouriteItems';
|
||||
import Orders from '../components/e-commerce/Orders';
|
||||
import OrderDetails from '../components/e-commerce/OrderDetails';
|
||||
import Customers from '../components/e-commerce/Customers';
|
||||
import Checkout from '../components/e-commerce/Checkout';
|
||||
import Feed from '../components/feed/Feed';
|
||||
import Plyr from '../components/plugins/Plyr';
|
||||
import Scrollbar from '../components/plugins/Scrollbar';
|
||||
import Leaflet from '../components/plugins/Leaflet';
|
||||
import EchartMap from '../components/plugins/EchartMap';
|
||||
import InboxProvider from '../components/email/inbox/InboxProvider';
|
||||
import ReactHookFrom from '../components/plugins/ReactHookFrom';
|
||||
import Lottie from '../components/plugins/Lottie';
|
||||
import Dropzone from '../components/plugins/Dropzone';
|
||||
import CodeHighlightDoc from '../components/plugins/CodeHighlightDoc';
|
||||
import EmojiMart from '../components/plugins/EmojiMart';
|
||||
import Chat from '../components/chat/Chat';
|
||||
import Widgets from '../components/widgets/Widgets';
|
||||
import Kanban from '../components/kanban/Kanban';
|
||||
|
||||
const InboxRoutes = ({ match: { url } }) => (
|
||||
<InboxProvider>
|
||||
|
|
@ -157,6 +159,8 @@ const DashboardRoutes = () => (
|
|||
<Route path="/pages/starter" exact component={Starter} />
|
||||
{/*chat*/}
|
||||
<Route path="/chat" exact component={Chat} />
|
||||
{/*calendar*/}
|
||||
<Route path="/calendar" exact component={Calendar} />
|
||||
{/*kanban*/}
|
||||
<Route path="/kanban" exact component={Kanban} />
|
||||
{/*E commerce*/}
|
||||
|
|
@ -222,6 +226,7 @@ const DashboardRoutes = () => (
|
|||
<Route path="/utilities/visibility" exact component={Visibility} />
|
||||
|
||||
{/*Plugins*/}
|
||||
<Route path="/plugins/calendar-example" exact component={CalendarExample} />
|
||||
<Route path="/plugins/bulk-select" exact component={BulkSelect} />
|
||||
<Route path="/plugins/typed" exact component={Typed} />
|
||||
<Route path="/plugins/image-lightbox" exact component={ImageLightbox} />
|
||||
|
|
|
|||
Loading…
Reference in New Issue