web-sdk-im
Version:
React js components
599 lines (547 loc) • 22.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactRouterDom = require("react-router-dom");
var _styles = require("@material-ui/core/styles");
var _core = require("@material-ui/core");
var _WorkbenchHead = _interopRequireDefault(require("./WorkbenchHead"));
var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
var _Room = _interopRequireDefault(require("@material-ui/icons/Room"));
var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
var _PieChart = _interopRequireDefault(require("@material-ui/icons/PieChart"));
var _Assignment = _interopRequireDefault(require("@material-ui/icons/Assignment"));
var _CloudUpload = _interopRequireDefault(require("@material-ui/icons/CloudUpload"));
var _VideoCall = _interopRequireDefault(require("@material-ui/icons/VideoCall"));
var _Group = _interopRequireDefault(require("@material-ui/icons/Group"));
var _AssignmentInd = _interopRequireDefault(require("@material-ui/icons/AssignmentInd"));
var _EventNote = _interopRequireDefault(require("@material-ui/icons/EventNote"));
var _Alarm = _interopRequireDefault(require("@material-ui/icons/Alarm"));
var _BusinessCenter = _interopRequireDefault(require("@material-ui/icons/BusinessCenter"));
var _AssignmentTurnedIn = _interopRequireDefault(require("@material-ui/icons/AssignmentTurnedIn"));
var _MeetingRoom = _interopRequireDefault(require("@material-ui/icons/MeetingRoom"));
var _Store = _interopRequireDefault(require("@material-ui/icons/Store"));
var _Memory = _interopRequireDefault(require("@material-ui/icons/Memory"));
var _ToggleOn = _interopRequireDefault(require("@material-ui/icons/ToggleOn"));
var _Dashboard = _interopRequireDefault(require("@material-ui/icons/Dashboard"));
var _ContactMail = _interopRequireDefault(require("@material-ui/icons/ContactMail"));
var _AccountTree = _interopRequireDefault(require("@material-ui/icons/AccountTree"));
var _ListAlt = _interopRequireDefault(require("@material-ui/icons/ListAlt"));
var _DirectionsCar = _interopRequireDefault(require("@material-ui/icons/DirectionsCar"));
var _SurroundSound = _interopRequireDefault(require("@material-ui/icons/SurroundSound"));
var _IMCards = _interopRequireDefault(require("./IMCards"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
// const Header = getHeader(styled);
// const Fullscreen = getFullscreen(styled);
var useStyles = (0, _styles.makeStyles)(function (theme) {
return {
root: {
width: '100%',
//maxWidth: 360,
backgroundColor: theme.palette.background.paper
},
pageWrapper: {
background: '#f5f5f5',
height: '100vh'
},
linkColor: {
color: '#33C176',
fontSize: '14px'
},
linkSize: {
fontSize: '0.75rem'
},
checkboxWrap: {
minWidth: '0'
},
checkboxColor: {
color: '#33C176 !important',
borderRadius: '50% !important'
},
// btnStyle: {
// background: '#33C176',
// textTransform: 'capitalize',
// },
btnStyle: {
background: '#33C176',
textTransform: 'capitalize',
color: '#fff',
width: '100%',
'&:active': {
background: '#33C176'
},
'&:hover': {
background: '#33C176'
},
'&:focus': {
background: '#33C176'
}
},
listBtnStyle: {
textTransform: 'capitalize',
color: '#33C176',
border: '1px solid #33C176',
fontSize: '0.75rem'
},
textBtnWrap: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center' // padding: '0.5rem 1rem',
},
column: {
overflow: 'hidden',
padding: '0.5rem'
},
media: {
height: 0,
paddingTop: '56.25%' // 16:9
},
expand: {
transform: 'rotate(0deg)',
marginLeft: 'auto',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest
})
},
expandOpen: {
transform: 'rotate(180deg)'
},
avatar: {
backgroundColor: 'transparent',
border: '2px dashed #36c96d'
},
icon: {
color: '#36c96d'
}
};
});
var useMessageSearchStyles = (0, _styles.makeStyles)(function () {
return {
root: {
backgroundColor: 'rgba(0, 0, 0, .04)',
borderRadius: 40,
width: '100%'
},
input: {
boxSizing: 'border-box',
minHeight: 36
},
icon: {
color: 'rgb(0, 153, 255)',
width: 35,
height: 35
}
};
});
var data1 = [{
id: '1',
title: 'Punch in',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_Room["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#ff9038'
}, {
id: '2',
title: 'Attendance Statistics',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_PieChart["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#6c89ff'
}, {
id: '3',
title: 'Attendance Management',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_Assignment["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#7674e8'
}, {
id: '4',
title: 'Video Conference',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_CloudUpload["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#9274E8'
}, {
id: '5',
title: 'Wisdom Cloud U Disk',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_CloudUpload["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#36D8CE'
}, {
id: '6',
title: 'Apply and Approve',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_CloudUpload["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#FF5F67'
}, {
id: '7',
title: 'Leave Apply',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_CloudUpload["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#2AD2C8'
}, {
id: '8',
title: 'Overtime',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_CloudUpload["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#FF5F67'
}];
var data2 = [{
id: '1',
title: 'Phone Clock in',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_Room["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#ff9038'
}, {
id: '2',
title: 'Attendance Statistics',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_PieChart["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#6c89ff'
}, {
id: '3',
title: 'Attendance Management',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_Assignment["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#7674e8'
}, {
id: '3',
title: 'Wisdom Cloud U Disk',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_CloudUpload["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#36d8ce'
}];
var data3 = [{
id: '1',
title: 'Apply and Approve',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_AssignmentInd["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#ff5f67'
}, {
id: '2',
title: 'Attendance Statistics',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_EventNote["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#29d1c7'
}, {
id: '3',
title: 'Overtime',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_Alarm["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#ff5d65'
}, {
id: '4',
title: 'Evection',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_BusinessCenter["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#1874ff'
}, {
id: '5',
title: 'Go out',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_MeetingRoom["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#7573e8'
}, {
id: '6',
title: 'Retroactive',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_AssignmentTurnedIn["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#ff8f38'
}, {
id: '7',
title: 'My Team',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_Group["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#7573e8'
}];
var data4 = [{
id: '1',
title: 'Identity Authentication',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_ContactMail["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#2AD2C8'
}, {
id: '2',
title: 'Contract Management',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_ListAlt["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#FFA031'
}, {
id: '3',
title: 'Organization',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_AccountTree["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#60C9D2'
}, {
id: '4',
title: 'Car Management',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_DirectionsCar["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#F59337'
}, {
id: '5',
title: 'Announcement',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_SurroundSound["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#7FA9FF'
}];
var data5 = [{
id: '1',
title: 'Smart Switch',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_ToggleOn["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#FF9E30'
}, {
id: '2',
title: 'Visitors',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_AssignmentInd["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#53AFFF'
}, {
id: '3',
title: 'Opening Code',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_Dashboard["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#39D7CD'
}];
var data6 = [{
id: '1',
title: 'Equipment Center',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_Memory["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#6EB53B'
}, {
id: '2',
title: 'Open The Door',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_MeetingRoom["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#51ADFF'
}];
var data7 = [{
id: '1',
title: 'Welfare Mall',
subheader: 'September 14, 2016',
avataricon: /*#__PURE__*/_react["default"].createElement(_Store["default"], null),
iconbutton: /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null),
avatarimage: 'https://i.pravatar.cc/300?img=13',
background: '#FA6543'
}];
var Workbench = function Workbench() {
var styles = useStyles();
var messageStyle = useMessageSearchStyles();
var _React$useState = _react["default"].useState(true),
_React$useState2 = _slicedToArray(_React$useState, 2),
open = _React$useState2[0],
setOpen = _React$useState2[1];
var clickToOpenList = function clickToOpenList() {
setOpen(!open);
};
var history = (0, _reactRouterDom.useHistory)();
var handleClick = function handleClick(event) {
event.preventDefault();
history.push('/initiate-chat');
};
var _React$useState3 = _react["default"].useState(''),
_React$useState4 = _slicedToArray(_React$useState3, 2),
checked = _React$useState4[0],
setChecked = _React$useState4[1];
var handleChange = function handleChange(event) {
var isChecked = event.target.checked;
var checkedValue = event.target.value;
alert(checkedValue);
setChecked(isChecked);
};
var clickToConfirm = function clickToConfirm() {
alert("Are you sure ?");
};
var addApplication = function addApplication() {
alert('Click to add application!');
};
var handleCardClicked = function handleCardClicked(id, index) {
alert("Id: ".concat(id, "\nIndex: ").concat(index));
};
return /*#__PURE__*/_react["default"].createElement(_core.Box, {
component: "div",
className: styles.pageWrapper
}, /*#__PURE__*/_react["default"].createElement(_core.Box, {
component: "div"
}, /*#__PURE__*/_react["default"].createElement(_core.Toolbar, {
disableGutters: true,
style: {
minHeight: "0"
}
}, /*#__PURE__*/_react["default"].createElement(_WorkbenchHead["default"], null))), /*#__PURE__*/_react["default"].createElement(_core.Grid, {
container: true,
direction: "row"
}, /*#__PURE__*/_react["default"].createElement(_core.Grid, {
item: true,
lg: 12
}, /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_core.Grid, {
container: true,
direction: "row",
justify: "flex-start",
alignItems: "center"
}, /*#__PURE__*/_react["default"].createElement(_core.Grid, {
item: true,
xs: 12,
sm: 6,
md: 4,
lg: 3,
xl: 2,
className: styles.column
}, /*#__PURE__*/_react["default"].createElement(_core.Card, {
className: styles.root,
onClick: addApplication
}, /*#__PURE__*/_react["default"].createElement(_core.CardHeader, {
className: "cardHeader",
avatar: /*#__PURE__*/_react["default"].createElement(_core.Avatar, {
"aria-label": "recipe",
className: styles.avatar
}, /*#__PURE__*/_react["default"].createElement(_Add["default"], null)),
title: "Add application"
})))), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_core.Box, {
component: "div"
}, /*#__PURE__*/_react["default"].createElement(_core.Box, {
component: "div",
m: 1
}, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
variant: "h6",
align: "left"
}, "My Common Applications")), /*#__PURE__*/_react["default"].createElement(_IMCards["default"], {
options: data1,
avatarChild: true,
onCardClick: function onCardClick(id, index) {
return handleCardClicked(id, index);
}
})), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_core.Box, {
component: "div"
}, /*#__PURE__*/_react["default"].createElement(_core.Box, {
component: "div",
m: 1
}, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
variant: "h6",
align: "left"
}, "Time Management")), /*#__PURE__*/_react["default"].createElement(_IMCards["default"], {
options: data2,
avatarChild: true
})), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_core.Box, {
component: "div"
}, /*#__PURE__*/_react["default"].createElement(_core.Box, {
component: "div",
m: 1
}, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
variant: "h6",
align: "left"
}, "Synergy Office")), /*#__PURE__*/_react["default"].createElement(_IMCards["default"], {
options: data3,
avatarChild: true
})), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_core.Box, {
component: "div"
}, /*#__PURE__*/_react["default"].createElement(_core.Box, {
component: "div",
m: 1
}, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
variant: "h6",
align: "left"
}, "Personnel Administrative")), /*#__PURE__*/_react["default"].createElement(_IMCards["default"], {
options: data4,
avatarChild: true
})), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_core.Box, {
component: "div"
}, /*#__PURE__*/_react["default"].createElement(_core.Box, {
component: "div",
m: 1
}, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
variant: "h6",
align: "left"
}, "Security Management")), /*#__PURE__*/_react["default"].createElement(_IMCards["default"], {
options: data5,
avatarChild: true
})), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_core.Box, {
component: "div"
}, /*#__PURE__*/_react["default"].createElement(_core.Box, {
component: "div",
m: 1
}, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
variant: "h6",
align: "left"
}, "Intelligent Hardware")), /*#__PURE__*/_react["default"].createElement(_IMCards["default"], {
options: data6,
avatarChild: true
})), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_core.Box, {
component: "div"
}, /*#__PURE__*/_react["default"].createElement(_core.Box, {
component: "div",
m: 1
}, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
variant: "h6",
align: "left"
}, "Employee Welfare")), /*#__PURE__*/_react["default"].createElement(_IMCards["default"], {
options: data7,
avatarChild: true
})), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null))));
};
var _default = Workbench;
exports["default"] = _default;