1893 lines
84 KiB
JavaScript
1893 lines
84 KiB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import { Accordion, Button, Card, Col, Container, Dropdown, FloatingLabel, Form, ListGroup, Modal, Placeholder, Row, SSRProvider, Table } from 'react-bootstrap';
|
|
import { useForm } from 'react-hook-form';
|
|
import {TabulatorFull as Tabulator} from 'tabulator-tables';
|
|
import {data, getBarchartData, getSearchResults, predefinedRanges, tableData, tableData1, wordcloudData} from "./Components/TabulatorData";
|
|
import { DatePicker, RangeSlider, SelectPicker } from 'rsuite';
|
|
import { CheckPicker } from 'rsuite';
|
|
import './jqueryloader'
|
|
import { DateRangePicker } from 'rsuite';
|
|
import { Checkbox, CheckboxGroup } from 'rsuite';
|
|
import { Radio, RadioGroup } from 'rsuite';
|
|
import ReactEcharts from "echarts-for-react";
|
|
import { getPieChartData } from './Components/TabulatorData';
|
|
import axios from 'axios';
|
|
import * as anychart from 'anychart'
|
|
import Link from 'next/link';
|
|
import { confirmAlert } from "react-confirm-alert";
|
|
|
|
const data1 = ['A', 'B', 'C', 'D'];
|
|
var table;
|
|
let option1;
|
|
var app = {};
|
|
var tablePaymentsGrid = '';
|
|
var toggleValue = '';
|
|
// export svg
|
|
const exportcsv = '/images/contacts/Excel.svg';
|
|
const gridEditIcon = '/images/refine_by_icons/edit.svg';
|
|
const gridDeleteIcon = '/images/cross_gray.svg';
|
|
const microview = '/images/microview_active.svg';
|
|
const key_icon = '/images/primary_indication.svg';
|
|
|
|
export default function Home() {
|
|
|
|
// Custom tabulator start
|
|
function ActionFormatter(){
|
|
return(
|
|
`<div class="gridActionIcon">
|
|
<span>
|
|
<img src=${gridEditIcon} alt="edit" width="18" height="18"/>
|
|
<img src=${gridDeleteIcon} alt="edit" width="18" height="18"/>
|
|
</span>
|
|
</div>`
|
|
);
|
|
}
|
|
function microViewFormat(){
|
|
return(
|
|
`<img src=${microview} alt="micro" width='25' height='20'/>`
|
|
)
|
|
}
|
|
function keyViewFormat(){
|
|
return(
|
|
`<img src=${key_icon} alt="key" width='25' height='20'/>`
|
|
)
|
|
}
|
|
function idViewFormat(){
|
|
return(
|
|
`<a href='#' class='text-decoration-none'>#</a>`
|
|
)
|
|
}
|
|
const customTabulator = () =>{
|
|
var table = new Tabulator("#customTabulator", {
|
|
height:"311px",
|
|
data:tableData,
|
|
layout:window?.innerWidth > 800 ? "fitColumns" : "fitData",
|
|
resizableColumnFit:true,
|
|
addRowPos:"top",
|
|
initialSort:[
|
|
{column:"name", dir:"asc"},
|
|
],
|
|
filterMode:"local",
|
|
pagination:true,
|
|
paginationMode:"local",
|
|
paginationSize:10,
|
|
paginationSizeSelector:[10, 25, 50, 75],
|
|
columns:[
|
|
{title:"#", field:"id", headerSort:false, titleFormatter:idViewFormat, width:50},
|
|
{title:" ", field:"id", headerSort:false, formatter:microViewFormat, width:50},
|
|
{title:" ", field:"id", headerSort:false, formatter:keyViewFormat, width:50},
|
|
{title:"Name", field:"name", headerFilter:true, headerFilterPlaceholder:'Search', tooltip:tooltipValue, width:200},
|
|
{title:"Age", field:"age", hozAlign:"left", sorter:"number", headerFilter:true, headerFilterPlaceholder:'Search', width:70},
|
|
{title:"Gender", field:"gender", headerFilter:true, headerFilterPlaceholder:'Search', width:90},
|
|
{title:"Height", field:"height", hozAlign:"left", headerFilter:true, headerFilterPlaceholder:'Search'},
|
|
{title:"Color", field:"col", headerFilter:true, headerFilterPlaceholder:'Search'},
|
|
{title:"Date Of Birth", field:"dob", hozAlign:"left", sorter:"date", headerFilter:true, headerFilterPlaceholder:'Search'},
|
|
{title:"Cheese", field:"cheese", hozAlign:"left", headerFilter:true, headerFilterPlaceholder:'Search'},
|
|
{title:"Action", field:"name", hozAlign:"left", formatter: ActionFormatter},
|
|
],
|
|
ajaxResponse:function(url, params, response){
|
|
return response.data;
|
|
},
|
|
});
|
|
return table;
|
|
}
|
|
// Custom tabulator end
|
|
|
|
// Tabulator Collapse start
|
|
//Title Formatter
|
|
var titleCustomization = function(cell, formatterParams, onRendered){
|
|
var column_title = cell.getValue();
|
|
var response = checkBGforblock(column_title);
|
|
onRendered(function(){
|
|
var buttonFor = '';
|
|
switch(cell.getValue()){
|
|
case 'Events Total': buttonFor = 'eventsCollapse'; break;
|
|
case 'Affiliations Total': buttonFor = 'affiliationsCollapse'; break;
|
|
case 'Publications Total': buttonFor = 'publicationsCollapse'; break;
|
|
case 'Referral Total': buttonFor = 'referralCollapse'; break;
|
|
}
|
|
if(buttonFor != ""){
|
|
$(cell.getElement()).parent("div").parent("div").append('<div class="tabulator-custom-button" id="'+buttonFor+'"><i class="bi bi-skip-forward"></i></div>');
|
|
}
|
|
$(cell.getElement()).parent("div").parent("div").parent("div").addClass(response);
|
|
|
|
switch(buttonFor){
|
|
case 'eventsCollapse':
|
|
$("#eventsCollapse").click(function(event){
|
|
table.toggleColumn('numspc');
|
|
table.toggleColumn('numocc');
|
|
var type = $(this).attr("toggle-type");
|
|
if(type == "" || type == "collapse"){
|
|
$(this).attr("toggle-type", "collapsed");
|
|
$(this).children("i").removeClass("bi-skip-backward").addClass("bi-skip-forward");
|
|
}else{
|
|
$(this).attr("toggle-type", "collapse");
|
|
$(this).children("i").removeClass("bi-skip-forward").addClass("bi-skip-backward");
|
|
}
|
|
event.stopPropagation();
|
|
});
|
|
break;
|
|
case 'affiliationsCollapse':
|
|
$("#affiliationsCollapse").click(function(event){
|
|
table.toggleColumn('numia');
|
|
table.toggleColumn('numas');
|
|
table.toggleColumn('numeb');
|
|
table.toggleColumn('numec');
|
|
table.toggleColumn('numgc');
|
|
var type = $(this).attr("toggle-type");
|
|
if(type == "" || type == "collapse"){
|
|
$(this).attr("toggle-type", "collapsed");
|
|
$(this).children("i").removeClass("bi-skip-backward").addClass("bi-skip-forward");
|
|
}else{
|
|
$(this).attr("toggle-type", "collapse");
|
|
$(this).children("i").removeClass("bi-skip-forward").addClass("bi-skip-backward");
|
|
}
|
|
event.stopPropagation();
|
|
});
|
|
break;
|
|
case 'publicationsCollapse':
|
|
$("#publicationsCollapse").click(function(event){
|
|
table.toggleColumn('leadc');
|
|
table.toggleColumn('numma');
|
|
table.toggleColumn('numsa');
|
|
table.toggleColumn('numfa');
|
|
table.toggleColumn('numla');
|
|
var type = $(this).attr("toggle-type");
|
|
if(type == "" || type == "collapse"){
|
|
$(this).attr("toggle-type", "collapsed");
|
|
$(this).children("i").removeClass("bi-skip-backward").addClass("bi-skip-forward");
|
|
}else{
|
|
$(this).attr("toggle-type", "collapse");
|
|
$(this).children("i").removeClass("bi-skip-forward").addClass("bi-skip-backward");
|
|
}
|
|
event.stopPropagation();
|
|
});
|
|
break;
|
|
case 'referralCollapse':
|
|
$("#referralCollapse").click(function(event){
|
|
table.toggleColumn('kref');
|
|
table.toggleColumn('oref');
|
|
var type = $(this).attr("toggle-type");
|
|
if(type == "" || type == "collapse"){
|
|
$(this).attr("toggle-type", "collapsed");
|
|
$(this).children("i").removeClass("bi-skip-backward").addClass("bi-skip-forward");
|
|
}else{
|
|
$(this).attr("toggle-type", "collapse");
|
|
$(this).children("i").removeClass("bi-skip-forward").addClass("bi-skip-backward");
|
|
}
|
|
event.stopPropagation();
|
|
});
|
|
break;
|
|
}
|
|
});
|
|
return cell.getValue();
|
|
};
|
|
|
|
//Cell Formatter
|
|
var cellCustomization = function(column, formatterParams, onRendered){
|
|
var column_field = column.getField();
|
|
var response = checkBGforblock(column_field);
|
|
$(column.getElement()).addClass(response);
|
|
return column.getValue();
|
|
};
|
|
function checkBGforblock(column_value){
|
|
switch(column_value){
|
|
case 'Events Total': case 'numevc': var class_name = 'eventsBgPrimary'; break;
|
|
case 'Speaking': case 'numspc': var class_name = 'eventsBgSecondary'; break;
|
|
case 'Organizing Committee': case 'numocc': var class_name = 'eventsBgTertiary'; break;
|
|
case 'Affiliations Total': case 'numed': var class_name = 'affiliationsBgPrimary'; break;
|
|
case 'Industry': case 'numia': var class_name = 'affiliationsBgSecondary'; break;
|
|
case 'Associations': case 'numas': var class_name = 'affiliationsBgSecondary'; break;
|
|
case 'Editorial Boards': case 'numeb': var class_name = 'affiliationsBgSecondary'; break;
|
|
case 'Univ/Hospital': case 'numec': var class_name = 'affiliationsBgTertiary'; break;
|
|
case 'Guidelines': case 'numgc': var class_name = 'affiliationsBgfourth'; break;
|
|
case 'Publications Total': case 'nump': var class_name = 'publicationsBgPrimary'; break;
|
|
case 'Lead Author': case 'leadc': var class_name = 'publicationsBgSecondary'; break;
|
|
case 'Contributng Author': case 'numma': var class_name = 'publicationsBgTertiary'; break;
|
|
case 'Single Author': case 'numsa': var class_name = 'publicationsBgTertiary'; break;
|
|
case 'First Author': case 'numfa': var class_name = 'publicationsBgTertiary'; break;
|
|
case 'Last Author': case 'numla': var class_name = 'publicationsBgTertiary'; break;
|
|
case 'Trails Total': case 'numtc': var class_name = 'trailBgPrimary'; break;
|
|
case 'Referral Total': case 'ref': var class_name = 'referralBgPrimary'; break;
|
|
case 'HCP': case 'kref': var class_name = 'referralBgSecondary'; break;
|
|
case 'HCO': case 'oref': var class_name = 'referralBgSecondary'; break;
|
|
case 'Previous Tier (2014-2018)': case 'prev_tier': var class_name = 'prev_tierBg'; break;
|
|
case 'Current Tier (2015-2019)': case 'current_tier': var class_name = 'current_tierBg'; break;
|
|
case 'Status': case 'status': var class_name = 'statusBg'; break;
|
|
}
|
|
return class_name;
|
|
}
|
|
var addSelectAllBox = function(cell, formatterParams, onRendered){
|
|
return '<div class="custom-control custom-checkbox custom-control-inline"><input type="checkbox" class="custom-control-input" name="export_opts" value="" /><label class="custom-control-label widget-label"></label></div>';
|
|
};
|
|
var nameCustomization = function(column, formatterParams, onRendered){
|
|
return '<a href="" class="link">'+column.getValue()+'</a>'
|
|
};
|
|
var tooltipValue = function formatTooltip(e, cell, onRendered) {
|
|
let data = cell.getData()['name']
|
|
return data;
|
|
}
|
|
//microprofile view icon
|
|
var viewMicroIcon = function(cell, formatterParams){
|
|
return '<div class="tooltip-demo tooltop-right microViewIcon Male" onclick="viewKolMicroProfile(4140,this); return false;"><a href="" class="tooltipLink" rel="tooltip" data-original-title="Profile Snapshot"></a></div>';
|
|
};
|
|
const getData = () =>{
|
|
table = new Tabulator('#collapsibleTabulator', {
|
|
selectable:true,
|
|
height:475,
|
|
data:tableData1,
|
|
layout:"fitDataStretch",
|
|
addRowPos:"top",
|
|
initialSort:[
|
|
{column:"name", dir:"asc"},
|
|
],
|
|
filterMode:"local",
|
|
pagination:true,
|
|
paginationMode:"local",
|
|
paginationSize:50,
|
|
paginationSizeSelector:[10, 25, 50, 75],
|
|
placeholder:"No Data Available",
|
|
columns:[
|
|
{title:"", formatter:'rownum',hozAlign:'center',headerSort:false,tooltip:false,frozen:true,width:10},
|
|
{formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false, cellClick:function(e, cell){
|
|
cell.getRow().toggleSelect();
|
|
}},
|
|
// {title:"",formatter:viewMicroIcon, headerSort:false, hozhozAlign:"center",titleFormatter:addSelectAllBox, frozen:true,width:10},
|
|
{title:"Name", field:"name", headerFilter:true, headerFilterPlaceholder:'Search',hozAlign:"left", formatter:nameCustomization,frozen:true, tooltip:tooltipValue},
|
|
{title:"Tier", field:"tier", hozAlign:"center",width:70},
|
|
{title:"Rank", field:"rank", hozAlign:"center",width:70},
|
|
{title:"Score", field:"score",hozAlign:"center",width:70},
|
|
{title:"Events Total", field:"numevc",hozAlign:"center",titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
|
|
{title:"Speaking", field:"numspc",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
|
|
{title:"Organizing Committee", field:"numocc",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:100},
|
|
{title:"Affiliations Total", field:"numed",hozAlign:"center",titleFormatter:titleCustomization, formatter:cellCustomization, width:100},
|
|
{title:"Industry", field:"numia",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
|
|
{title:"Associations", field:"numas",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:100},
|
|
{title:"Editorial Boards", field:"numeb",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
|
|
{title:"Univ/Hospital", field:"numec",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:100},
|
|
{title:"Guidelines", field:"numgc",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:100},
|
|
{title:"Publications Total", field:"nump",hozAlign:"center",titleFormatter:titleCustomization, formatter:cellCustomization, width:100},
|
|
{title:"Lead Author", field:"leadc",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
|
|
{title:"Contributng Author", field:"numma",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:100},
|
|
{title:"Single Author", field:"numsa",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
|
|
{title:"First Author", field:"numfa",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
|
|
{title:"Last Author", field:"numla",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
|
|
{title:"Trails Total", field:"numtc",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
|
|
{title:"Referral Total", field:"ref",hozAlign:"center",titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
|
|
{title:"HCP", field:"kref",hozAlign:"center",titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
|
|
{title:"HCO", field:"oref",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90}
|
|
],
|
|
ajaxResponse:function(url, params, response){
|
|
return response.data;
|
|
},
|
|
});
|
|
}
|
|
function addToMyContacts(){
|
|
alert("test");
|
|
}
|
|
// Tabulator Collapse end
|
|
|
|
// Forms validation start
|
|
/* Declaring a variable called pswdshow and setting it to false. */
|
|
const [pswdshow, setPswd] = useState(false);
|
|
|
|
/* Creating a state variable called confpswdshow and setting it to false. */
|
|
const [confpswdshow, setConfPswd] = useState(false);
|
|
|
|
/**
|
|
* If the password is shown, then hide it. If the password is hidden, then show it
|
|
*/
|
|
const showPassword = () =>{
|
|
setPswd(pswdshow ? false : true);
|
|
}
|
|
|
|
/**
|
|
* If the value of confpswdshow is true, then setConfPswd(false) else setConfPswd(true)
|
|
*/
|
|
const showConfirmPassword = () =>{
|
|
setConfPswd(confpswdshow ? false : true);
|
|
}
|
|
const {register, formState: { errors }, reset, watch, getValues, handleSubmit} = useForm();
|
|
|
|
const registerUser = (data) =>{
|
|
// console.log(data);
|
|
}
|
|
// Forms validation end
|
|
// fullscreen
|
|
const fullScreen = (e) =>{
|
|
e.preventDefault();
|
|
if (typeof window !== "undefined") {
|
|
var targetelement = document.getElementById("fullscreen");
|
|
const requestFullScreen = targetelement.requestFullscreen || targetelement.webkitRequestFullScreen || targetelement.mozRequestFullScreen || targetelement.msRequestFullScreen;
|
|
requestFullScreen.call(targetelement);
|
|
if (document.fullscreen) { document.exitFullscreen(); }
|
|
}
|
|
}
|
|
// fullscreen end
|
|
|
|
// rsuite selectpicker
|
|
const dataset = ['Eugenia', 'Bryan', 'Linda', 'Nancy', 'Lloyd', 'Alice', 'Julia', 'Albert'].map(
|
|
item => ({ label: item, value: item })
|
|
);
|
|
const [value4, setValue4] = React.useState(null);
|
|
const handleSelectPicker = (value) =>{
|
|
setValue4(value)
|
|
}
|
|
// rsuite selectpicker end
|
|
|
|
// rsuite check picker
|
|
const [value3, setValue3] = React.useState([]);
|
|
const handleCheckPicker = (value) =>{
|
|
setValue3(value)
|
|
}
|
|
// rsuite check picker end
|
|
// rsuite daterangepicker
|
|
const [value, setValue] = useState();
|
|
const handleDateChange = (data) =>{
|
|
setValue(data);
|
|
}
|
|
// rsuite daterangepicker end
|
|
// rsuite range slider
|
|
const [value1, setValue1] = React.useState([10, 50]);
|
|
// rsuite range slider end
|
|
|
|
// rsuite checkbox
|
|
const [value2, setValue2] = React.useState(['A', 'C']);
|
|
const handleCheckAll = (value, checked) => setValue2(checked ? data1 : []);
|
|
const handleChange = value => setValue2(value);
|
|
// rsuite checkbox end
|
|
|
|
// rsuite radio
|
|
const [value5, setValue5] = React.useState('A');
|
|
// rsuite radio
|
|
|
|
// autocomplete search
|
|
const [searchTerm, updateSearchTerm] = useState('');
|
|
const [filteredResults, updateFilteredResults] = useState([]);
|
|
const [searchResults, updateSearchResults] = useState([]);
|
|
const [displayResults, updateDisplayResults] = useState(false);
|
|
const [focusIndex, updateFocusIndex] = useState(-1);
|
|
const linkRefs = [];
|
|
const keys = {
|
|
ENTER: 13,
|
|
UP: 38,
|
|
DOWN: 40
|
|
};
|
|
|
|
const updateSearch = e => {
|
|
var input = e.target?.value;
|
|
updateSearchTerm(e.target.value);
|
|
updateFilteredResults(searchResults.filter(result =>{
|
|
if(input?.length >= 3){
|
|
return result.title.match(new RegExp(e.target.value, 'gi'))
|
|
}
|
|
}))
|
|
};
|
|
|
|
const hideAutoSuggest = e => {
|
|
e.persist();
|
|
var input = e.target?.value;
|
|
if (e.relatedTarget && e.relatedTarget.className === 'autosuggest-link') {
|
|
return false;
|
|
}
|
|
if(input?.length >= 0){
|
|
$('#search-card-results').css('border-color', 'transparent');
|
|
}
|
|
if(input?.length >= 3){
|
|
updateDisplayResults(false);
|
|
}else{
|
|
updateDisplayResults(true);
|
|
updateFocusIndex(-1);
|
|
}
|
|
};
|
|
|
|
const showAutoSuggest = (e) => {
|
|
updateDisplayResults(false);
|
|
};
|
|
const handleInput = (e) =>{
|
|
var input = e.target?.value;
|
|
if(input?.length < 3){
|
|
$('.search-suggestions').css('display', 'none');
|
|
}
|
|
if(input?.length >= 3){
|
|
$('.search-suggestions').removeClass('d-none');
|
|
$('.search-suggestions').css('display', 'block');
|
|
$('.search-suggestions').css('border-color', 'rgba(0, 0, 0, 0.175)')
|
|
}else{
|
|
$('.search-suggestions').css('border-color', 'transparent')
|
|
}
|
|
}
|
|
const handleNavigation = e => {
|
|
switch (e.keyCode) {
|
|
case keys.ENTER:
|
|
if (focusIndex !== -1) {
|
|
window.open(linkRefs[focusIndex].href);
|
|
}
|
|
hideAutoSuggest(e);
|
|
break;
|
|
case keys.UP:
|
|
|
|
if (focusIndex > -1) {
|
|
updateFocusIndex(focusIndex - 1);
|
|
}
|
|
break;
|
|
case keys.DOWN:
|
|
|
|
if (focusIndex < filteredResults.length - 1) {
|
|
updateFocusIndex(focusIndex + 1);
|
|
}
|
|
break;
|
|
}
|
|
};
|
|
|
|
const SearchResults = () => {
|
|
const Message = ({ text }) => (
|
|
<div className="search-results-message">
|
|
<p>{text}</p>
|
|
<hr />
|
|
</div>
|
|
);
|
|
|
|
if (!displayResults) {
|
|
return null;
|
|
}
|
|
|
|
if (!searchResults.length) {
|
|
return <Message text="Loading search results" />
|
|
}
|
|
|
|
if (!searchTerm) {
|
|
return <Message text="Try to search for something..." />
|
|
}
|
|
|
|
if (!filteredResults.length) {
|
|
return <Message text="We couldn't find anything for your search term." />
|
|
}
|
|
|
|
return (
|
|
<ul className="search-results">
|
|
{filteredResults.map((article, index) => (
|
|
<li key={index} className='list-unstyled'>
|
|
{/* ⚠️ You may want to outsource this part to make the component less heavy */}
|
|
<Card model={article} id='search-card-results'/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
// autocomplete seacrh end
|
|
|
|
// Echarts Pichart
|
|
const [apiData, setapiData] = useState()
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
},
|
|
legend: {
|
|
type:'scroll',
|
|
orient: "horizontal",
|
|
bottom : "0%",
|
|
legendHoverLink: true,
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
data: apiData?.map((item, index)=>{
|
|
return(
|
|
{ value: item?.value, name: item?.title }
|
|
)
|
|
}),
|
|
label: {
|
|
width: 64,
|
|
overflow: "break",
|
|
fontSize: 12,
|
|
fontWeight : 'normal'
|
|
},
|
|
labelLine: {
|
|
width : 1.5,
|
|
length2: 7,
|
|
length: 7
|
|
},
|
|
width: "100%",
|
|
height: "100%",
|
|
center : ['48%', '50%']
|
|
}
|
|
]
|
|
};
|
|
const onChartClick = (params) => {
|
|
console.log('Chart clicked', params);
|
|
};
|
|
// Echarts Pichart end
|
|
|
|
// Echarts Barchart
|
|
const [apiData1, setapiData1] = useState();
|
|
const series = apiData1?.map((item)=>({
|
|
name: item?.name,
|
|
data: item?.data,
|
|
}))
|
|
app.config = {
|
|
rotate: 67,
|
|
align: 'right',
|
|
verticalAlign: 'middle',
|
|
position: 'bottom',
|
|
distance: 6,
|
|
};
|
|
const labelOption = {
|
|
show: true,
|
|
position: app.config.position,
|
|
distance: app.config.distance,
|
|
align: app.config.align,
|
|
verticalAlign: app.config.verticalAlign,
|
|
rotate: app.config.rotate,
|
|
formatter: '{c} {name|{a}}',
|
|
fontSize: 12,
|
|
rich: {
|
|
name: {
|
|
color: '#0066cc',
|
|
fontSize: 12,
|
|
},
|
|
}
|
|
};
|
|
|
|
option1 = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: series?.map(item => item?.name),
|
|
top:"2%",
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
orient: 'vertical',
|
|
left: 'right',
|
|
top: 'center',
|
|
feature: {
|
|
mark: { show: true },
|
|
dataView: { show: true, readOnly: false },
|
|
magicType: { show: true, type: ['bar', 'line'] },
|
|
restore: { show: true },
|
|
saveAsImage: {
|
|
type: "png"
|
|
}
|
|
}
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: { show: false },
|
|
data: ['', '', '', '', ''],
|
|
boundaryGap: true,
|
|
triggerEvent : true
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
}
|
|
],
|
|
series: series?.map((item, index) => Object.assign(item, {
|
|
type: 'bar',
|
|
label: labelOption,
|
|
}))
|
|
};
|
|
const onBarChartClick = (params) => {
|
|
console.log('BarChart clicked', params);
|
|
};
|
|
// Echart Barchart end
|
|
|
|
// Echarts Bubblechart
|
|
const [apiData2, setapiData2] = useState()
|
|
const scatterData = apiData2?.map((item)=>({
|
|
name: item?.title,
|
|
value: [item?.id, item?.discountPercentage, item?.title],
|
|
itemStyle: 'blue'
|
|
}));
|
|
const option2 = {
|
|
xAxis: {},
|
|
yAxis: {},
|
|
tooltip: {
|
|
triggerOn: "mousemove",
|
|
alwaysShowContent: true,
|
|
position: 'top'
|
|
},
|
|
series: [
|
|
{
|
|
symbolSize: 20,
|
|
data: scatterData,
|
|
type: 'scatter'
|
|
}
|
|
]
|
|
};
|
|
const onBubbleChartClick = (params) => {
|
|
console.log('Chart clicked', params);
|
|
};
|
|
// Echarts Bubblechart end
|
|
// Echarts events
|
|
const onEvents = {
|
|
click: onChartClick,
|
|
click: onBarChartClick,
|
|
click: onBubbleChartClick,
|
|
};
|
|
// Echarts events end
|
|
|
|
// Filters datepicker
|
|
const [datevalue, setDateValue] = React.useState(new Date());
|
|
const [datevalue1, setDateValue1] = React.useState(new Date());
|
|
const [datevalue2, setDateValue2] = React.useState(new Date());
|
|
const [datevalue3, setDateValue3] = React.useState(new Date());
|
|
// Filters datepicker end
|
|
|
|
// Client form modal
|
|
const [show, setShow] = useState(false);
|
|
|
|
const handleClose = () => setShow(false);
|
|
const handleShow = () => setShow(true);
|
|
// Client form modal end
|
|
|
|
// Plan new record modal
|
|
const [show1, setShow1] = useState(false);
|
|
|
|
const [dateone, setDateOne] = React.useState(new Date());
|
|
const [datetwo, setDateTwo] = React.useState(new Date());
|
|
const [selectedOptions, setSelectedOptions] = useState();
|
|
const optionList = ['Eugenia', 'Bryan', 'Linda', 'Nancy', 'Lloyd', 'Alice', 'Julia', 'Albert'].map(
|
|
item => ({ label: item, value: item })
|
|
);
|
|
// Add Rows
|
|
const [assignProfiles, setAssignProfiles] = useState([{hcpname : "", assignto : "", status : ""}]);
|
|
const hcpnameref = useRef();
|
|
const assigntoref = useRef();
|
|
const statusref = useRef();
|
|
|
|
/* It takes the index of the key and the event object, and then it creates a copy of the keys array,
|
|
* changes the value of the key at the given index, and then sets the keys array to the new array
|
|
* @param index - the index of the key in the array
|
|
* @param event - The event that triggered the function.
|
|
*/
|
|
const handleFormChange = (index, event) => {
|
|
let data = [...assignProfiles];
|
|
data[index][event.target.name] = event.target.value;
|
|
setAssignProfiles(data);
|
|
}
|
|
const addRow = (e) =>{
|
|
setAssignProfiles([...assignProfiles, {hcpname : "", assignto : "", status : ""}]);
|
|
}
|
|
const removeRow = (index) =>{
|
|
const list = [...assignProfiles];
|
|
list.splice(index, 1);
|
|
setAssignProfiles(list);
|
|
}
|
|
// Add Rows
|
|
|
|
function handleSelect(data) {
|
|
setSelectedOptions(data);
|
|
}
|
|
|
|
const handleClose1 = () => setShow1(false);
|
|
const handleShow1 = () => setShow1(true);
|
|
const registerPlan = (e) =>{
|
|
e.preventDefault();
|
|
console.log(assignProfiles);
|
|
}
|
|
// Plan new record modal end
|
|
|
|
// Accordions
|
|
const icon = '/microview_active.svg';
|
|
const viewsimilar = '/view_similar.svg';
|
|
//Accordions end
|
|
|
|
// confirm alert
|
|
const submit = () => {
|
|
confirmAlert({
|
|
title: 'Confirm to submit',
|
|
message: 'Are you sure to do this.',
|
|
buttons: [
|
|
{
|
|
label: 'Yes',
|
|
onClick: () => alert('Click Yes')
|
|
},
|
|
{
|
|
label: 'No',
|
|
onClick: () => alert('Click No')
|
|
}
|
|
]
|
|
});
|
|
};
|
|
const submit1 = () => {
|
|
confirmAlert({
|
|
customUI: ({ onClose }) => {
|
|
return (
|
|
<div className='custom-ui'>
|
|
<h1>Are you sure?</h1>
|
|
<p>You want to delete this file?</p>
|
|
<button className='button' onClick={onClose}>No</button>
|
|
<button className='button'
|
|
onClick={() => {
|
|
// handleClickDelete();
|
|
onClose();
|
|
}}
|
|
>
|
|
Yes, Delete it!
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
}
|
|
// confirm alert end
|
|
|
|
//group by HCP tabulator
|
|
function toggleKolGrouping(){
|
|
toggleValue = $("#toggleKolGrouping").text();
|
|
if(toggleValue == 'Remove Grouping'){
|
|
tablePaymentsGrid.setGroupBy(false);
|
|
$("#toggleKolGrouping").text("Group By HCP");
|
|
}else{
|
|
tablePaymentsGrid.setGroupStartOpen(false);
|
|
tablePaymentsGrid.setGroupBy("kol_name");
|
|
$("#toggleKolGrouping").text("Remove Grouping");
|
|
}
|
|
}
|
|
function listPayments(){
|
|
//Tabulator Grid parameters
|
|
var gridFor='payments';
|
|
var gridHeaderText= "Payments";
|
|
var gridId= gridFor+'-grid-table';
|
|
|
|
var actionLink = "<div class='gridActionIcon'><div class='gridEditIcon' onclick=\"editInteraction();return false;\" ><a href=\"#\" data-tooltip=\"tooltip\" data-placement=\"bottom\" title=\"Edit\" class=\"tooltipLink\"></a></div></div>";
|
|
actionLink += "<div class='gridActionIcon'><div class='gridDeleteIcon' onclick=\"deleteInteraction();return false;\" ><a href=\"#\" data-tooltip=\"tooltip\" data-placement=\"bottom\" title=\"Delete\" class=\"tooltipLink\"></a></div></div>";
|
|
|
|
//Data for grid to load
|
|
var tableData2 = [
|
|
{micro:'1',kol_name:'Aaron James Miller',date:"14/05/2020",type: "General",amount: "555.00",status: "Completed",act:''},
|
|
{micro:'2',kol_name:'Aaron James Miller',date:"20/05/2020",type: "General",amount: "550.00",status: "Completed",act:''},
|
|
{micro:'3',kol_name:'Aaron James',date:"14/05/2020",type: "General",amount: "555.00",status: "Completed",act:''},
|
|
{micro:'4',kol_name:'Aaron James',date:"20/05/2020",type: "General",amount: "550.00",status: "Completed",act:''},
|
|
]
|
|
//Tabulator Gird initialisation
|
|
tablePaymentsGrid = new Tabulator("#"+gridId, {
|
|
//var tableData = <?php //echo json_encode($arr_users); ?>;
|
|
data:tableData2,
|
|
columns:[
|
|
{title:"#", formatter:'rownum',align:'center',headerSort:false,tooltip:false, width:"5%"},
|
|
{title:"", field:"micro",formatter:function(cell, formatterParams, onRendered){
|
|
return "<div class='microViewIcon' onclick=\"viewPaymentMicroProfile("+ cell.getValue() +"); return false;\" ><a href=\"#\" data-tooltip=\"tooltip\" data-placement=\"bottom\" title=\"View Interaction\"></a></div>"; //return the contents of the cell;
|
|
},headerFilter:false,headerSort:false,align:'center', width:"5%"},
|
|
{title:"HCP Name", field:"kol_name",formatter:function(cell, formatterParams, onRendered){
|
|
return "<a href='#' class='label-blue'>" + cell.getValue() + "</a>"; //return the contents of the cell;
|
|
},headerFilter:true, headerFilterPlaceholder:'Search', align:'left', width:"42%"},
|
|
{title:"Date", field:"date",headerFilter:true, headerFilterPlaceholder:'Search', align:'left', width:"10%"},
|
|
{title:"Type", field:"type",headerFilter:true, headerFilterPlaceholder:'Search', align:'left', width:"10%"},
|
|
{title:"Amount", field:"amount",headerFilter:true, headerFilterPlaceholder:'Search', align:'left',bottomCalc:"sum", width:"10%"},
|
|
{title:"Status", field:"status",headerFilter:true, headerFilterPlaceholder:'Search', align:'left', width:"10%"},
|
|
{title:"Action", field:"act",formatter:function(cell, formatterParams){
|
|
return actionLink;
|
|
},headerFilter:false,headerSort:false,width:80,align:'center', width:"8%"}
|
|
],
|
|
layout:"fitDataStretch",
|
|
tooltips:true,
|
|
ajaxSorting:false,
|
|
ajaxFiltering:false,
|
|
initialSort:[{column:"date", dir:"desc"}],
|
|
groupClosedShowCalcs:true,
|
|
paginationSize:10, // this option can take any positive integer value (default = 10),possible values 10,20,50,100
|
|
pagination:"local",
|
|
paginationSizeSelector:[10, 20, 50, 100],
|
|
tableBuilt:function(){
|
|
$("#"+gridFor+"-grid-header .grid-header-text").html(gridHeaderText);
|
|
}
|
|
});
|
|
|
|
var grid_options ='<div style="float:right;" class="excelExportIcon sprite_iconSet tooltip-demo tooltop-left" onclick="exportExcel(\'#listPaymentsResultSet\',\'payments\');"><a href="#" rel="tooltip" data-original-title="Export Payment Details into Excel format"> </a></div>';
|
|
grid_options +='<div style="float:right;" class="title-bar-actions"><a onclick="addPayment();" class="grid_new_btn">Add Payments</a></div>';
|
|
$("#"+gridFor+"-grid-header .grid-header-text").append(grid_options);
|
|
}
|
|
// group by HCP tabulator end
|
|
|
|
// training grid tabulator
|
|
var trainingData = [
|
|
{id:1, name:"Billy Bob", degree:"xyz", speciality:"ABC", frame:'NA-1991', type:"Education", },
|
|
{id:2, name:"Mary May", degree:"NOP", speciality:"DEF", frame:'NA-1991', type:"Teaching", },
|
|
{id:3, name:"Christine Lobowski", degree:"PAN", speciality:"GHI", frame:'NA-1991', type:"Educamp", },
|
|
{id:4, name:"Brendon Philips", degree:"BE", speciality:"PQR", frame:'NA-1991', type:"Education", },
|
|
{id:5, name:"Margret Marmajuke", degree:"BED", speciality:"MNO", frame:'NA-1991', type:"Technology", },
|
|
]
|
|
const trainingGridTabulator = () =>{
|
|
var table = new Tabulator("#trainingGridTable", {
|
|
height:"311px",
|
|
data:trainingData,
|
|
layout:window?.innerWidth > 800 ? "fitColumns" : "fitData",
|
|
resizableColumnFit:true,
|
|
addRowPos:"top",
|
|
initialSort:[
|
|
{column:"name", dir:"asc"},
|
|
],
|
|
filterMode:"local",
|
|
footerElement:"<a href='#' class='text-center text-danger'>Show more</a>",
|
|
columns:[
|
|
{title:"#", field:"id", headerSort:false, titleFormatter:idViewFormat, width:50},
|
|
{title:"Name", field:"name", headerFilter:true, headerFilterPlaceholder:'Search', tooltip:tooltipValue, width:200},
|
|
{title:"Degree", field:"degree", hozAlign:"left", sorter:"number", headerFilter:true, headerFilterPlaceholder:'Search'},
|
|
{title:"Speciality", field:"speciality", headerFilter:true, headerFilterPlaceholder:'Search'},
|
|
{title:"Frame", field:"frame", hozAlign:"left", headerFilter:true, headerFilterPlaceholder:'Search'},
|
|
{title:"Type", field:"type", headerFilter:true, headerFilterPlaceholder:'Search'},
|
|
{title:"Action", field:"name", hozAlign:"left", formatter: ActionFormatter},
|
|
],
|
|
ajaxResponse:function(url, params, response){
|
|
return response.data;
|
|
},
|
|
});
|
|
return table;
|
|
}
|
|
// training grid tabulator end
|
|
/* useEffect hook */
|
|
useEffect(()=>{
|
|
customTabulator();
|
|
getData();
|
|
|
|
// autocomplete search
|
|
const getSearchResult = () => {
|
|
// ⚠️ This is where you should pull data in from your server
|
|
const searchResultsResponse = getSearchResults();
|
|
updateSearchResults(searchResultsResponse);
|
|
};
|
|
getSearchResult();
|
|
// autocomplete search end
|
|
|
|
// Echarts Pichart
|
|
const getPieChartResult = () => {
|
|
// ⚠️ This is where you should pull data in from your server
|
|
const piechartResultsResponse = getPieChartData();
|
|
setapiData(piechartResultsResponse);
|
|
};
|
|
getPieChartResult();
|
|
// Echarts Pichart end
|
|
|
|
// Echarts Barchart
|
|
const getBarChartResult = () => {
|
|
// ⚠️ This is where you should pull data in from your server
|
|
const barchartResultsResponse = getBarchartData();
|
|
setapiData1(barchartResultsResponse);
|
|
};
|
|
getBarChartResult();
|
|
// Echarts Barchart end
|
|
|
|
// Echarts Bubble chart
|
|
axios.get('https://dummyjson.com/products')
|
|
.then(res => {
|
|
const values = res?.data?.products;
|
|
setapiData2(values);
|
|
})
|
|
// Echarts Bubble chart end
|
|
|
|
// wordcloud anychart
|
|
const getWordCloudResult = () => {
|
|
const wordclouddatas = wordcloudData();
|
|
$('#anychart').empty();
|
|
// create a tag (word) cloud chart
|
|
var chart = anychart.tagCloud(wordclouddatas);
|
|
// set a chart title
|
|
chart.title('15 most spoken languages')
|
|
// display the word cloud chart
|
|
chart.container("anychart");
|
|
chart.draw();
|
|
}
|
|
getWordCloudResult();
|
|
// wordcloud anychart end
|
|
// groupby HCP tabulator
|
|
listPayments();
|
|
// groupby HCP tabulator end
|
|
// training grid tabulator
|
|
trainingGridTabulator();
|
|
// training grid tabulator end
|
|
}, [])
|
|
return (
|
|
<>
|
|
<SSRProvider>
|
|
<Container fluid className='customTabulator'>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={10} xxl={10} className='mx-auto py-3'>
|
|
<Card className='no-shadow border-start-0 border-top'>
|
|
<Card.Header className='border-0'>
|
|
<span className='grid-header-text fw-bold'>Custom Tabulator</span>
|
|
<div className='float-end'>
|
|
<Button variant='link'><i className="bi bi-plus-circle"></i>{' '}Add Users</Button>
|
|
<a href="#" className='text-decoration-none'><img src={exportcsv} alt="csv"/></a>
|
|
</div>
|
|
</Card.Header>
|
|
<Card.Body>
|
|
<div id="customTabulator"></div>
|
|
</Card.Body>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
<Container fluid className='groupByTabulator'>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={10} xxl={10} className='mx-auto py-3'>
|
|
<Card className='no-shadow border-start-0 border-top'>
|
|
<Card.Header className='border-0'>
|
|
<span className='grid-header-text fw-bold'>Custom Tabulator</span>
|
|
<div className='float-end'>
|
|
<Button variant='link' onClick={toggleKolGrouping} id="toggleKolGrouping">
|
|
<i className="bi bi-plus-circle"></i>{' '}Group By HCP</Button>
|
|
<a href="#" className='text-decoration-none'><img src={exportcsv} alt="csv"/></a>
|
|
</div>
|
|
</Card.Header>
|
|
<Card.Body>
|
|
<div id="payments-grid-table" className="customGridWrapper"></div>
|
|
</Card.Body>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
<Container fluid className='training-grid-table'>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={10} xxl={10} className='mx-auto py-3'>
|
|
<Card className='no-shadow border-start-0 border-top'>
|
|
<Card.Header className='border-0'>
|
|
<span className='grid-header-text fw-bold'>Training<span className='text-sm fw-normal'>{' '}(Recent 5 of 10)</span></span>
|
|
<div className='float-end'>
|
|
<Button variant='link'><i className="bi bi-plus-circle"></i>{' '}Add Training</Button>
|
|
</div>
|
|
</Card.Header>
|
|
<Card.Body>
|
|
<div id="trainingGridTable"></div>
|
|
</Card.Body>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
<Container fluid className='collapsibleTabulator'>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={10} xxl={10} className='mx-auto py-3'>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12}>
|
|
<Card className='no-shadow border-start-0 border-top' id='fullscreen'>
|
|
<Card.Header className='border-0'>
|
|
<span className='grid-header-text fw-bold'>Collapsible Tabulator</span>
|
|
<div className='float-end'>
|
|
<Button variant='link'><i className="bi bi-plus-circle"></i>{' '}Add Contacts</Button>
|
|
<i className="bi bi-arrows-fullscreen" onClick={fullScreen}></i>
|
|
</div>
|
|
</Card.Header>
|
|
<Card.Body>
|
|
<div id="collapsibleTabulator"></div>
|
|
</Card.Body>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
<Container fluid className='py-3'>
|
|
<Row>
|
|
<Col>
|
|
<Card className='no-shadow border_left'>
|
|
<Card.Header>
|
|
<span className="new_record_heading p-2 pl-4 pr-4">Record New User</span>
|
|
</Card.Header>
|
|
<Card.Body>
|
|
<Card.Title className='mb-3'><span>User Details</span></Card.Title>
|
|
<Form className='form-section' onSubmit={handleSubmit(registerUser)}>
|
|
<Row>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<FloatingLabel id="salutation" className='mb-3'>
|
|
<Form.Control as="select" type="select" aria-label="select salutation"
|
|
name="salutation" placeholder='select salutation'
|
|
{...register('salutation', {
|
|
required : 'salutation is required'
|
|
})}>
|
|
<option value="">Select Salutation</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</Form.Control>
|
|
<label htmlFor="salutation">Salutation<span className='text-danger'>*</span></label>
|
|
{errors.salutation && <p className="text-danger error_message">{errors.salutation.message}</p>}
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<FloatingLabel id="email" className="mb-3">
|
|
<Form.Control type="email" placeholder="name@example.com"
|
|
{...register('username', {
|
|
required : 'username is required'
|
|
})}/>
|
|
<label htmlFor="email">Username<span className='text-danger'>*</span></label>
|
|
{errors.username && <p className="text-danger error_message">{errors.username.message}</p>}
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<FloatingLabel id="password" className="mb-3">
|
|
<Form.Control type={pswdshow ? "text" : "password"} placeholder="Password"
|
|
{...register('password', {
|
|
required : true,
|
|
minLength : 6,
|
|
maxLength : 12
|
|
})}/>
|
|
<label htmlFor="password">Password<span className='text-danger'>*</span></label>
|
|
<span className="pview"><i onClick={showPassword}
|
|
className={pswdshow ? "pi pi-eye" : "pi pi-eye-slash"}></i></span>
|
|
{errors?.password?.type === "required" && <p className="text-danger error_message">password is required.</p>}
|
|
{errors?.password?.type === "minLength" && <p className="text-danger error_message">Password cannot be less than 6 characters.</p>}
|
|
{errors?.password?.type === "maxLength" && <p className="text-danger error_message">Password cannot be greater than 12 characters.</p>}
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<FloatingLabel id="confirmpassword" className="mb-3">
|
|
<Form.Control type={confpswdshow ? "text" : "password"} placeholder="Confirm Password"
|
|
{...register('confirmpswd', {
|
|
required : true
|
|
})}/>
|
|
<label htmlFor="confirmpassword">Confirm Password<span className='text-danger'>*</span></label>
|
|
<span className="pview"><i onClick={showConfirmPassword}
|
|
className={confpswdshow ? "pi pi-eye" : "pi pi-eye-slash"}></i></span>
|
|
{watch('confirmpswd') !== watch('password') && getValues('confirmpswd') ? (<p className="text-danger error_message">password doesn't match.</p>) : null}
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<FloatingLabel id="firstname" className="mb-3">
|
|
<Form.Control type="text" placeholder="First Name"
|
|
{...register('firstname', {
|
|
required : 'firstname is required'
|
|
})}/>
|
|
<label htmlFor="firstname">First Name<span className='text-danger'>*</span></label>
|
|
{errors.firstname && <p className="text-danger error_message">{errors.firstname.message}</p>}
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<FloatingLabel id="middlename" className="mb-3">
|
|
<Form.Control type="text" placeholder="Middle Name"/>
|
|
<label htmlFor="middlename">Middle Name</label>
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<FloatingLabel id="lastname" className="mb-3">
|
|
<Form.Control type="text" placeholder="Last Name"
|
|
{...register('lastname', {
|
|
required : 'lastname is required'
|
|
})}/>
|
|
<label htmlFor="lastname">Last Name<span className='text-danger'>*</span></label>
|
|
{errors.lastname && <p className="text-danger error_message">{errors.lastname.message}</p>}
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<FloatingLabel id="gender" className='mb-3'>
|
|
<Form.Select aria-label="Select gender" placeholder='select gender'
|
|
{...register('gender', {
|
|
required : 'gender is required'
|
|
})}>
|
|
<option value=''>Select gender</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</Form.Select>
|
|
<label htmlFor="gender">Gender<span className='text-danger'>*</span></label>
|
|
{errors.gender && <p className="text-danger error_message">{errors.gender.message}</p>}
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<FloatingLabel id="client" className='mb-3'>
|
|
<Form.Select aria-label="Select client" placeholder='select client'
|
|
{...register('client', {
|
|
required : 'client is required'
|
|
})}>
|
|
<option value=''>Select client</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</Form.Select>
|
|
<label htmlFor="client">Client<span className='text-danger'>*</span></label>
|
|
{errors.client && <p className="text-danger error_message">{errors.client.message}</p>}
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<FloatingLabel id="role" className='mb-3'>
|
|
<Form.Select aria-label="Select role" placeholder='select role'
|
|
{...register('role', {
|
|
required : 'role is required'
|
|
})}>
|
|
<option value=''>Select role</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</Form.Select>
|
|
<label htmlFor="role">Role<span className='text-danger'>*</span></label>
|
|
{errors.role && <p className="text-danger error_message">{errors.role.message}</p>}
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<FloatingLabel id="landing menu" className='mb-3'>
|
|
<Form.Select aria-label="Select landing menu" placeholder='select landing menu'
|
|
{...register('landing_menu', {
|
|
required : 'landing_menu is required'
|
|
})}>
|
|
<option value=''>Select landing menu</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</Form.Select>
|
|
<label htmlFor="landing menu">Landing Menu<span className='text-danger'>*</span></label>
|
|
{errors.landing_menu && <p className="text-danger error_message">{errors.landing_menu.message}</p>}
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<FloatingLabel id="country" className='mb-3'>
|
|
<Form.Select aria-label="Select country" placeholder='select country'
|
|
{...register('country', {
|
|
required : 'country is required'
|
|
})}>
|
|
<option value=''>Select country</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</Form.Select>
|
|
<label htmlFor="country">Country<span className='text-danger'>*</span></label>
|
|
{errors.country && <p className="text-danger error_message">{errors.country.message}</p>}
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<FloatingLabel id="state" className='mb-3'>
|
|
<Form.Select aria-label="Select State" placeholder='select state'
|
|
{...register('state', {
|
|
required : 'state is required'
|
|
})}>
|
|
<option value=''>Select State</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</Form.Select>
|
|
<label htmlFor="state">State<span className='text-danger'>*</span></label>
|
|
{errors.state && <p className="text-danger error_message">{errors.state.message}</p>}
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<FloatingLabel id="city" className='mb-3'>
|
|
<Form.Select aria-label="Select City" placeholder='select city'
|
|
{...register('city', {
|
|
required : 'city is required'
|
|
})}>
|
|
<option value=''>Select City</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</Form.Select>
|
|
<label htmlFor="city">City<span className='text-danger'>*</span></label>
|
|
{errors.city && <p className="text-danger error_message">{errors.city.message}</p>}
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Form.Group>
|
|
<div className='float-end mb-3'>
|
|
<Button variant='success' type="submit" className='px-3 mx-2' size='sm'>Save</Button>
|
|
<Button variant='outline-success' className='px-3' size='sm'>Cancel</Button>
|
|
</div>
|
|
</Form.Group>
|
|
</Row>
|
|
</Form>
|
|
</Card.Body>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
<Container fluid id={'select_picker'} className='py-3'>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12}>
|
|
<Card className='no-shadow border_left'>
|
|
<Card.Header>
|
|
<span className="new_record_heading p-2 pl-4 pr-4">Form Components</span>
|
|
</Card.Header>
|
|
<Card.Body>
|
|
<Card.Title className='mb-3'><span>Components</span></Card.Title>
|
|
<Form className='form-section'>
|
|
<Row>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<FloatingLabel id='users' className='mb-3'>
|
|
<label htmlFor="users">Users<span className='text-danger'>*</span></label>
|
|
<SelectPicker value={value4} onChange={handleSelectPicker} data={dataset} placeholder="Select User" placement='auto'/>
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} sm={6} md={6} lg={3}>
|
|
<FloatingLabel id='user' className='mb-3'>
|
|
<label htmlFor="user">Multiple Users<span className='text-danger'>*</span></label>
|
|
<CheckPicker value={value3} onChange={handleCheckPicker} data={data} placeholder="Select User" placement='auto'/>
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} sm={6} md={6} lg={3}>
|
|
<FloatingLabel id='datepicker' className='mb-3'>
|
|
<label htmlFor="datepicker">Datepicker<span className='text-danger'>*</span></label>
|
|
<DateRangePicker
|
|
ranges={predefinedRanges}
|
|
showOneCalendar
|
|
value={value}
|
|
onChange={handleDateChange}
|
|
placeholder="Date Picker"
|
|
placement='auto'
|
|
/>
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} sm={6} md={6} lg={3} id='slider' className='mb-3'>
|
|
<p className='pb-2'>Range Slider</p>
|
|
<RangeSlider
|
|
progress
|
|
value={value1}
|
|
onChange={value => {
|
|
setValue1(value);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3} className='mb-3'>
|
|
<Dropdown>
|
|
<Dropdown.Toggle id="dropdown-basic" className='customButton'>
|
|
Dropdown Button
|
|
</Dropdown.Toggle>
|
|
<Dropdown.Menu>
|
|
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
|
|
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
|
|
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={4} id='textarea' className='mb-3'>
|
|
<FloatingLabel controlId="floatingTextarea">
|
|
<Form.Control
|
|
as="textarea"
|
|
placeholder="Leave a comment here"
|
|
/>
|
|
<label htmlFor="floatingTextarea">Textarea<span className='text-danger'>*</span></label>
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} sm={12} md={12} lg={5} xxl={5} id='checkbox' className='mb-3'>
|
|
<Checkbox
|
|
indeterminate={value2.length > 0 && value2.length < data1.length}
|
|
checked={value2.length === data1.length}
|
|
onChange={handleCheckAll}
|
|
>
|
|
Check all
|
|
</Checkbox>
|
|
<CheckboxGroup inline name="checkboxList" value={value2} onChange={handleChange}>
|
|
{data1.map(item => (
|
|
<Checkbox key={item} value={item}>
|
|
Item {item}
|
|
</Checkbox>
|
|
))}
|
|
</CheckboxGroup>
|
|
</Col>
|
|
<Col xs={12} sm={12} md={12} lg={5} xxl={5} id='radio' className='mb-3'>
|
|
<RadioGroup inline name="radio-name" value={value5} onChange={(value)=>setValue5(value)}>
|
|
<Radio value="A">Item A</Radio>
|
|
<Radio value="B">Item B</Radio>
|
|
<Radio value="C">Item C</Radio>
|
|
</RadioGroup>
|
|
</Col>
|
|
<Col xs={12} sm={12} md={5} lg={4} xxl={4} id='autocomplete' className='mb-3'>
|
|
<p id='search-header'>Autocomplete Search results for :<span className='text-success'>{searchTerm.length ? ` ${searchTerm}` : null}</span></p>
|
|
<input type="text"
|
|
placeholder="Search for tutorials..."
|
|
onKeyUp={updateSearch}
|
|
onKeyDown={handleNavigation}
|
|
onBlur={hideAutoSuggest}
|
|
onFocus={showAutoSuggest}
|
|
onChange={handleInput}
|
|
className='inputclear form-control'/>
|
|
<Card className="search-suggestions d-none">
|
|
<Card.Body>
|
|
{!displayResults && filteredResults.map((article, index) => (
|
|
<div key={index} className={`list-unstyled ${focusIndex === index} ? 'active' : ${null}`}>
|
|
<div className="autosuggest-link"
|
|
ref={link => {linkRefs[index] = link}}>
|
|
<Highlight tags={searchTerm}>{article.title}</Highlight>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Card.Body>
|
|
</Card>
|
|
<SearchResults />
|
|
</Col>
|
|
</Row>
|
|
</Form>
|
|
</Card.Body>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
<Container fluid className='py-3 no-shadow' id='echarts'>
|
|
<Row>
|
|
<Col>
|
|
<span className="new_record_heading p-2 pl-4 pr-4">Echarts Components</span>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12}>
|
|
<div className='chart-title py-3'>
|
|
<span>Pichart</span>
|
|
</div>
|
|
<ReactEcharts option={option} onEvents={onEvents}/>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12}>
|
|
<div className='chart-title py-3'>
|
|
<span>Barchart</span>
|
|
</div>
|
|
<ReactEcharts option={option1} onEvents={onEvents}/>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12}>
|
|
<div className='chart-title py-3'>
|
|
<span>Bubblechart</span>
|
|
</div>
|
|
<ReactEcharts option={option2} onEvents={onEvents}/>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12}>
|
|
<div className='chart-title'>
|
|
<span>WordCloud Chart</span>
|
|
</div>
|
|
<div id='anychart'></div>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
<Container fluid className='textcolor my-3'>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mt-2 mb-2'>
|
|
<span className='new_record_heading p-2 pl-4 pr-4'>Text Colors</span>
|
|
</Col>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-2'>
|
|
<p className="text-primary">text orange- paragraph tag</p>
|
|
<h4 className="text-primary">text orange- header tag(h4)</h4>
|
|
<a href="#">text blue- anchor tag with text underline on hover</a>
|
|
</Col>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-2'>
|
|
<p className=''>Placeholder component-(react-bootstrap) :</p>
|
|
<Placeholder animation='glow'>
|
|
<Placeholder xs={7}/> <Placeholder xs={4} />
|
|
</Placeholder>
|
|
<Placeholder animation='wave'>
|
|
<Placeholder xs={7}/> <Placeholder xs={4} />
|
|
</Placeholder>
|
|
</Col>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-2'>
|
|
<p className='pb-2'>card component-(react-bootstrap) with border blue on top :</p>
|
|
<Card className="no-shadow card-panel">
|
|
<Card.Header className='bg-white border-top-0 border-end-0 border-start-0 border-bottom'>
|
|
<span className="fw-bold card-header-title">Users</span>
|
|
</Card.Header>
|
|
<Card.Body>
|
|
<Card.Title></Card.Title>
|
|
</Card.Body>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
<Container fluid className='no-shadow'>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-3'>
|
|
<span className='new_record_heading p-2 pl-4 pr-4 my-2'>Filters</span>
|
|
</Col>
|
|
<Col id='datepicker'>
|
|
<Row>
|
|
<Col xs={12} sm={6} md={6} lg={3}>
|
|
<FloatingLabel id='datepicker' className='mb-3'>
|
|
<label htmlFor="datepicker">Date From</label>
|
|
<DatePicker oneTap value={datevalue} onChange={(value)=> setDateValue(value)} placement='auto'/>
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} sm={6} md={6} lg={3}>
|
|
<FloatingLabel id='datepicker' className='mb-3'>
|
|
<label htmlFor="datepicker">Date To</label>
|
|
<DatePicker oneTap value={datevalue1} onChange={(value)=> setDateValue1(value)} placement='auto'/>
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={2} sm={2} lg={2} className='mb-2'>
|
|
<div className='my-1'>
|
|
<Button variant='success' className='px-4 btn-sm'>Apply</Button>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col xs={12} sm={6} md={6} lg={3}>
|
|
<FloatingLabel id='datepicker' className='mb-3'>
|
|
<label htmlFor="datepicker">Month From</label>
|
|
<DatePicker format="yyyy-MM" value={datevalue2} onChange={(value)=> setDateValue2(value)} placement='auto'/>
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} sm={6} md={6} lg={3}>
|
|
<FloatingLabel id='datepicker' className='mb-3'>
|
|
<label htmlFor="datepicker">Month To</label>
|
|
<DatePicker format="yyyy-MM" value={datevalue3} onChange={(value)=> setDateValue3(value)} placement='auto'/>
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={2} sm={2} lg={2} className='mb-2'>
|
|
<div className='my-1'>
|
|
<Button variant='success' className='px-4 btn-sm'>Apply</Button>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
<Container fluid className='my-3 interactions'>
|
|
<div>
|
|
<span className="view_heading p-2 pl-4 pr-4 mb-2">View Interactions</span>
|
|
</div>
|
|
<Row className='border-left'>
|
|
<Col xs={12} sm={12} md={12} lg={12}>
|
|
<Card className="card-panel no-shadow">
|
|
<Card.Header className='bg-white border-top-0 border-end-0 border-start-0 border-bottom'>
|
|
<span className="card-form-title">Interaction Details</span>
|
|
</Card.Header>
|
|
<Card.Body>
|
|
<Form className='form-layout'>
|
|
<Row>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<Form.Group className='mb-3'>
|
|
<Form.Label>Interaction Id</Form.Label>
|
|
<p>VPIN01091</p>
|
|
</Form.Group>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<Form.Group className='mb-3'>
|
|
<Form.Label>Interaction Date</Form.Label>
|
|
<p>08/26/2020</p>
|
|
</Form.Group>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<Form.Group className='mb-3'>
|
|
<Form.Label>Interaction Type</Form.Label>
|
|
<p>Virtual Meeting</p>
|
|
</Form.Group>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<Form.Group className='mb-3'>
|
|
<Form.Label>Number of Attendees</Form.Label>
|
|
<p>1</p>
|
|
</Form.Group>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<Form.Group className='mb-3'>
|
|
<Form.Label>Interaction Category</Form.Label>
|
|
<p>One-to-One</p>
|
|
</Form.Group>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<Form.Group className='mb-3'>
|
|
<Form.Label>Interaction Location</Form.Label>
|
|
<p>Virtual</p>
|
|
</Form.Group>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3}>
|
|
<Form.Group className='mb-3'>
|
|
<Form.Label>Employee Name</Form.Label>
|
|
<p></p>
|
|
</Form.Group>
|
|
</Col>
|
|
</Row>
|
|
</Form>
|
|
</Card.Body>
|
|
</Card>
|
|
</Col>
|
|
<Col xs={12} sm={12} md={12} lg={12}>
|
|
<div className="form-header mt-3 mb-3">
|
|
<span>discussion type</span>
|
|
</div>
|
|
<Form className='form-layout'>
|
|
<Table striped bordered className='table-panel' responsive="md">
|
|
<thead className='text-center'>
|
|
<tr>
|
|
<th>Sl no</th>
|
|
<th>Product</th>
|
|
<th>Discussion Type</th>
|
|
<th>Topic</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td><Link href={'#'} className='label-blue'>Dr. Alexander I Spira</Link></td>
|
|
<td>Gastroenterology</td>
|
|
<td>Professor</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td><Link href={'#'} className='label-blue'>Dr. Alton Oliver Sartor</Link></td>
|
|
<td>Gastroenterology</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td><Link href={'#'} className='label-blue'>Dr. Abraham S John</Link></td>
|
|
<td>Advanced Heart Failure And Transplant Cardiology</td>
|
|
<td>Professor</td>
|
|
</tr>
|
|
</tbody>
|
|
</Table>
|
|
</Form>
|
|
</Col>
|
|
<Col xs={12} sm={12} md={12} lg={12}>
|
|
<div className="form-header mt-3 mb-3">
|
|
<span>attendees</span>
|
|
</div>
|
|
<Form className='form-layout'>
|
|
<Table striped bordered className='table-panel' responsive="md">
|
|
<thead className='text-center'>
|
|
<tr>
|
|
<th>Sl no</th>
|
|
<th>HCP Name</th>
|
|
<th>Specialty</th>
|
|
<th>Title</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>Product - B</td>
|
|
<td>Promotional</td>
|
|
<td>Product Education</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td>Product - A</td>
|
|
<td>Non-Promotional</td>
|
|
<td>Other Topic - 2</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td>Product - C</td>
|
|
<td>Promotional</td>
|
|
<td>Product Education</td>
|
|
</tr>
|
|
</tbody>
|
|
</Table>
|
|
</Form>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
{/* Client popup form modal */}
|
|
<Container fluid id='clientpopup' className='no-shadow'>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-2'>
|
|
<span className='new_record_heading p-2 pl-4 pr-4 my-2'>Client Form Modal Section</span>
|
|
</Col>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-3'>
|
|
<Card className='no-shadow border-start-0 border-top'>
|
|
<Card.Header className='border-0'>
|
|
<span className="grid-header-text">Clients</span>
|
|
<span onClick={handleShow} role='button' className='text-success float-end'>
|
|
<i className="bi bi-plus-circle"></i>Add Client</span>
|
|
</Card.Header>
|
|
<Card.Body></Card.Body>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
{/* Modal */}
|
|
<Modal show={show} onHide={handleClose} backdrop="static" keyboard={false}>
|
|
<Modal.Header closeButton>
|
|
<Modal.Title>Create Client</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body>
|
|
<Form>
|
|
<Row className='form-layout no-shadow py-3 my-1'>
|
|
<Col xs={12} sm={12} md={10} lg={10}>
|
|
<FloatingLabel id="name" className="mb-3">
|
|
<Form.Control type="text" placeholder="name"/>
|
|
<label htmlFor="name">UserName<span className='text-danger'>*</span></label>
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} sm={12} md={10} lg={10}>
|
|
<FloatingLabel id="emailname" className="mb-3">
|
|
<Form.Control type="email" placeholder="email"/>
|
|
<label htmlFor="email">Support Email<span className='text-danger'>*</span></label>
|
|
</FloatingLabel>
|
|
</Col>
|
|
</Row>
|
|
<Modal.Footer>
|
|
<Button variant="success" type='submit' className='btn-sm'>Save</Button>
|
|
<Button variant="outline-success" className='btn-sm p-1' onClick={handleClose}>
|
|
Close
|
|
</Button>
|
|
</Modal.Footer>
|
|
</Form>
|
|
</Modal.Body>
|
|
</Modal>
|
|
{/* Client popup form modal end */}
|
|
|
|
{/* Plan new record modal */}
|
|
<Container fluid className='my-3'>
|
|
<Row>
|
|
<Col>
|
|
<Button variant="primary" onClick={handleShow1}>
|
|
Plan Modal
|
|
</Button>
|
|
|
|
<Modal
|
|
size='lg'
|
|
show={show1}
|
|
onHide={handleClose1}
|
|
backdrop="static"
|
|
keyboard={false}
|
|
>
|
|
<Modal.Header closeButton>
|
|
<Modal.Title>Record New Plan</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body className='plan-modal-body'>
|
|
<Col xs={12} sm={12} md={12} lg={12}>
|
|
<div className='mb-1'>
|
|
<span className='fw-bold plan-header'>Plan Details</span>
|
|
</div>
|
|
</Col>
|
|
{/* <div> */}
|
|
<Form onSubmit={handleSubmit(registerPlan)}>
|
|
<Row className='form-layout no-shadow py-3 my-1'>
|
|
<Col xs={12} sm={12} md={12} lg={12}>
|
|
<FloatingLabel id="planname">
|
|
<Form.Control type="text" placeholder="Plan Name"/>
|
|
<label htmlFor="planname">Plan Name<span className='text-danger'>*</span></label>
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={4} sm={4} lg={4} className='date mb-3'>
|
|
<label htmlFor="datefrom">Start Date <span className='text-danger'>*</span></label>
|
|
<DatePicker oneTap value={dateone} onChange={setDateOne} placement='auto'/>
|
|
</Col>
|
|
<Col xs={12} md={4} sm={4} lg={4} className='date mb-3'>
|
|
<label htmlFor="dateto">End Date <span className='text-danger'>*</span></label>
|
|
<DatePicker oneTap value={datetwo} onChange={setDateTwo} placement='auto'/>
|
|
</Col>
|
|
<Col xs={12} md={12} sm={12} lg={12} className='react-bs-textarea'>
|
|
<FloatingLabel controlId="floatingTextarea">
|
|
<Form.Control
|
|
as="textarea"
|
|
placeholder="Leave a comment here"
|
|
/>
|
|
<label htmlFor="floatingTextarea">Description<span className='text-danger'>*</span></label>
|
|
</FloatingLabel>
|
|
</Col>
|
|
</Row>
|
|
<Col xs={12} sm={12} md={12} lg={12}>
|
|
<div className='mb-1'>
|
|
<span className='fw-bold plan-header'>Objectives</span>
|
|
</div>
|
|
<Row className='form-layout no-shadow py-2'>
|
|
<Col xs={12} md={6} sm={6} lg={6} className='mt-3' id='select-picker'>
|
|
<FloatingLabel id='users' className='mb-3'>
|
|
<label htmlFor="single" id='plan-new-record-label'>Objective<span className='text-danger'>*</span></label>
|
|
<SelectPicker value={selectedOptions} onChange={(value)=>setSelectedOptions(value)} data={optionList} placeholder="Select User" placement='auto'/>
|
|
</FloatingLabel>
|
|
</Col>
|
|
</Row>
|
|
</Col>
|
|
<Col xs={12} sm={12} md={12} lg={12}>
|
|
<div className='mb-1'>
|
|
<span className='fw-bold plan-header'>Assign Profiles</span>
|
|
</div>
|
|
<Row className='form-layout no-shadow py-2'>
|
|
{assignProfiles.map((data, index)=>{
|
|
return(
|
|
<React.Fragment key={index}>
|
|
<Col xs={12} md={6} sm={6} lg={3} className='mt-4'>
|
|
<FloatingLabel id="hcpname">
|
|
<Form.Select
|
|
ref={hcpnameref}
|
|
name='hcpname'
|
|
onChange={event => handleFormChange(index, event)}
|
|
aria-label="Select hcpname" placeholder='select hcpname'>
|
|
<option>Select hcpname</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</Form.Select>
|
|
<label htmlFor="hcpname">HCP Name<span className='text-danger'>*</span></label>
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3} className='mt-4'>
|
|
<FloatingLabel id="assignto">
|
|
<Form.Select
|
|
ref={assigntoref}
|
|
name='assignto'
|
|
onChange={event => handleFormChange(index, event)}
|
|
aria-label="Select assignto" placeholder='select assignto'>
|
|
<option>Select asssign</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</Form.Select>
|
|
<label htmlFor="assignto">Assign To<span className='text-danger'>*</span></label>
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={12} md={6} sm={6} lg={3} className='mt-4'>
|
|
<FloatingLabel id="status">
|
|
<Form.Select
|
|
ref={statusref}
|
|
name='status'
|
|
onChange={event => handleFormChange(index, event)}
|
|
aria-label="Select status" placeholder='select status'>
|
|
<option>Select status</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</Form.Select>
|
|
<label htmlFor="status">Status<span className='text-danger'>*</span></label>
|
|
</FloatingLabel>
|
|
</Col>
|
|
<Col xs={1} sm={1} md={1} lg={1} className='mt-4'>
|
|
{(assignProfiles.length-1===index)
|
|
? <Button variant='light' onClick={addRow}>
|
|
<i className="pi pi-plus-circle fs-5"></i>
|
|
</Button> : ''}
|
|
</Col>
|
|
<Col xs={1} sm={1} md={1} lg={1} className='mt-4'>
|
|
{(assignProfiles.length!==1)
|
|
? <Button variant='light' onClick={removeRow}>
|
|
<i className="pi pi-trash fs-5"></i>
|
|
</Button> : ''}
|
|
</Col>
|
|
</React.Fragment>)
|
|
})}
|
|
</Row>
|
|
</Col>
|
|
<Modal.Footer>
|
|
<Button variant="success" type='submit' className='btn-sm'>Save</Button>
|
|
<Button variant="outline-success" className='btn-sm' onClick={handleClose1}>
|
|
Close
|
|
</Button>
|
|
</Modal.Footer>
|
|
</Form>
|
|
{/* </div> */}
|
|
</Modal.Body>
|
|
</Modal>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
{/* Plan new record modal end */}
|
|
<Container fluid className='no-shadow mb-3'>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-2'>
|
|
<span className='new_record_heading p-2 pl-4 pr-4 my-2'>Button Types</span>
|
|
</Col>
|
|
<Col xs={12} sm={6} md={6} lg={3} xxl={3}>
|
|
<Button variant='primary' className='mb-2'>Custom Button</Button>
|
|
</Col>
|
|
<Col xs={12} sm={6} md={6} lg={3} xxl={3}>
|
|
<Button variant='success' className='mb-2'>Primary Button</Button>
|
|
</Col>
|
|
<Col xs={12} sm={6} md={6} lg={3} xxl={3}>
|
|
<Button variant='outline-success' className='mb-2'>Secondary Button</Button>
|
|
</Col>
|
|
<Col xs={12} sm={6} md={6} lg={3} xxl={3}>
|
|
<Button variant='link' className='px-4'>Tertiary Button</Button>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
{/* Accordion */}
|
|
<Container fluid className='no-shadow mb-3'>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-3'>
|
|
<span className='new_record_heading p-2 pl-4 pr-4 my-2'>Accordion</span>
|
|
</Col>
|
|
<Col xs={12} sm={12} md={4} lg={4} className='accordions mb-3'>
|
|
<Card className='no-shadow'>
|
|
<Card.Header>
|
|
<div className='d-flex'><img src={viewsimilar} alt="viewsimilar" className='img-fluid' width={30}/><p className='text-primary'>View Similar</p></div>
|
|
</Card.Header>
|
|
<Card.Body>
|
|
<Accordion defaultActiveKey="0" flush>
|
|
<Accordion.Item eventKey="0">
|
|
<Accordion.Header>
|
|
Similar HCPs who have published on same concepts
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<ListGroup variant="flush">
|
|
<ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Adil Javed</a></ListGroup.Item>
|
|
<ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Andrew Michael Miller</a></ListGroup.Item>
|
|
<ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Brenda Louise Banwell</a></ListGroup.Item>
|
|
<ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Bruce A. Cree</a></ListGroup.Item>
|
|
<ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Daniel D Mikol</a></ListGroup.Item>
|
|
</ListGroup>
|
|
</Accordion.Body>
|
|
</Accordion.Item>
|
|
<Accordion.Item eventKey="1">
|
|
<Accordion.Header>
|
|
{/* <h4 className="text-primary">Similar HCPs who received top referrals</h4> */}
|
|
Similar HCPs who received top referrals
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<ListGroup variant="flush">
|
|
<ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Adil Javed</a></ListGroup.Item>
|
|
<ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Andrew Michael Miller</a></ListGroup.Item>
|
|
<ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Brenda Louise Banwell</a></ListGroup.Item>
|
|
<ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Bruce A. Cree</a></ListGroup.Item>
|
|
<ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Daniel D Mikol</a></ListGroup.Item>
|
|
</ListGroup>
|
|
</Accordion.Body>
|
|
</Accordion.Item>
|
|
<Accordion.Item eventKey="2">
|
|
<Accordion.Header>
|
|
{/* <h4 className='text-primary'>Co-authors of the HCP</h4> */}
|
|
Co-authors of the HCP
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<ListGroup variant="flush">
|
|
<ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Adil Javed</a></ListGroup.Item>
|
|
<ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Andrew Michael Miller</a></ListGroup.Item>
|
|
<ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Brenda Louise Banwell</a></ListGroup.Item>
|
|
<ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Bruce A. Cree</a></ListGroup.Item>
|
|
<ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Daniel D Mikol</a></ListGroup.Item>
|
|
</ListGroup>
|
|
</Accordion.Body>
|
|
</Accordion.Item>
|
|
</Accordion>
|
|
</Card.Body>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
{/* Accordion end */}
|
|
{/* React Confirm Alert */}
|
|
<Container fluid className='no-shadow mb-3' id='reactConfirmAlert'>
|
|
<Row>
|
|
<Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-3'>
|
|
<span className='new_record_heading p-2 pl-4 pr-4 my-2'>React Confirm Alert Section</span>
|
|
</Col>
|
|
<Col xs={12} sm={12} md={6} lg={6} xxl={6} className='mb-2'>
|
|
<Button onClick={submit} variant="primary">Confirm dialog</Button>
|
|
</Col>
|
|
<Col xs={12} sm={12} md={6} lg={6} xxl={6} className='mb-2'>
|
|
<Button onClick={submit1} variant="outline-success">CustomUI dialog</Button>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
{/* React Confirm Alert end */}
|
|
</SSRProvider>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function Highlight({ children: text = "", tags }) {
|
|
if (!tags?.length) return text;
|
|
const matches = [...text.matchAll(new RegExp(tags, "ig"))];
|
|
const startText = text.slice(0, matches[0]?.index);
|
|
return (
|
|
<span>
|
|
{startText}
|
|
{matches.map((match, i) => {
|
|
const startIndex = match.index;
|
|
const currentText = match[0];
|
|
const endIndex = startIndex + currentText.length;
|
|
const nextIndex = matches[i + 1]?.index;
|
|
const untilNextText = text.slice(endIndex, nextIndex);
|
|
return (
|
|
<React.Fragment key={i}>
|
|
<p><span className='text-primary'>{currentText}</span>{untilNextText}</p>
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</span>
|
|
);
|
|
}
|