Backend API
import React from 'react';
import CardView, { Column, HeaderFilter, SearchPanel } from 'devextreme-react/card-view';
import { tasks } from './data.ts';
const App = () => (
<CardView
dataSource={tasks}
keyExpr="Task_ID"
cardsPerRow="auto"
cardMinWidth={310}
wordWrapEnabled={true}
>
<SearchPanel
visible={true}
defaultText="an"
/>
<HeaderFilter
visible={true}
/>
<Column
dataField="Task_Subject"
caption="Subject"
/>
<Column
dataField="Task_Start_Date"
caption="Start Date"
dataType="date"
/>
<Column
dataField="Task_Due_Date"
caption="Due Date"
dataType="date"
/>
<Column
dataField="Task_Priority"
caption="Priority"
/>
<Column
dataField="Task_Status"
caption="Status"
/>
</CardView>
);
export default App;
import React from 'react';
import CardView, { Column, HeaderFilter, SearchPanel } from 'devextreme-react/card-view';
import { tasks } from './data.js';
const App = () => (
<CardView
dataSource={tasks}
keyExpr="Task_ID"
cardsPerRow="auto"
cardMinWidth={310}
wordWrapEnabled={true}
>
<SearchPanel
visible={true}
defaultText="an"
/>
<HeaderFilter visible={true} />
<Column
dataField="Task_Subject"
caption="Subject"
/>
<Column
dataField="Task_Start_Date"
caption="Start Date"
dataType="date"
/>
<Column
dataField="Task_Due_Date"
caption="Due Date"
dataType="date"
/>
<Column
dataField="Task_Priority"
caption="Priority"
/>
<Column
dataField="Task_Status"
caption="Status"
/>
</CardView>
);
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
export interface Task {
Task_ID: number;
Task_Assigned_Employee_ID: number;
Task_Owner_ID: number;
Task_Subject: string;
Task_Start_Date: string;
Task_Due_Date: string;
Task_Status: string;
Task_Priority: number;
Task_Completion: number;
}
export const tasks: Task[] = [{
'Task_ID': 1,
'Task_Assigned_Employee_ID': 7,
'Task_Owner_ID': 1,
'Task_Subject': 'Prepare 2013 Financial',
'Task_Start_Date': '2013-01-15T00:00:00',
'Task_Due_Date': '2013-01-31T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 2,
'Task_Assigned_Employee_ID': 4,
'Task_Owner_ID': 1,
'Task_Subject': 'Prepare 3013 Marketing Plan',
'Task_Start_Date': '2013-01-01T00:00:00',
'Task_Due_Date': '2013-01-31T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 3,
'Task_Assigned_Employee_ID': 2,
'Task_Owner_ID': 1,
'Task_Subject': 'Update Personnel Files',
'Task_Start_Date': '2013-02-03T00:00:00',
'Task_Due_Date': '2013-02-28T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 4,
'Task_Assigned_Employee_ID': 2,
'Task_Owner_ID': 1,
'Task_Subject': 'Review Health Insurance Options Under the Affordable Care Act',
'Task_Start_Date': '2013-02-12T00:00:00',
'Task_Due_Date': '2013-04-25T00:00:00',
'Task_Status': 'In Progress',
'Task_Priority': 4,
'Task_Completion': 50,
}, {
'Task_ID': 5,
'Task_Assigned_Employee_ID': 1,
'Task_Owner_ID': 2,
'Task_Subject': 'Choose between PPO and HMO Health Plan',
'Task_Start_Date': '2013-02-15T00:00:00',
'Task_Due_Date': '2013-04-15T00:00:00',
'Task_Status': 'In Progress',
'Task_Priority': 4,
'Task_Completion': 75,
}, {
'Task_ID': 6,
'Task_Assigned_Employee_ID': 1,
'Task_Owner_ID': 4,
'Task_Subject': 'Google AdWords Strategy',
'Task_Start_Date': '2013-02-16T00:00:00',
'Task_Due_Date': '2013-02-28T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 7,
'Task_Assigned_Employee_ID': 1,
'Task_Owner_ID': 4,
'Task_Subject': 'New Brochures',
'Task_Start_Date': '2013-02-17T00:00:00',
'Task_Due_Date': '2013-02-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 8,
'Task_Assigned_Employee_ID': 28,
'Task_Owner_ID': 1,
'Task_Subject': '2013 Brochure Designs',
'Task_Start_Date': '2013-02-19T00:00:00',
'Task_Due_Date': '2013-02-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 9,
'Task_Assigned_Employee_ID': 29,
'Task_Owner_ID': 28,
'Task_Subject': 'Brochure Design Review',
'Task_Start_Date': '2013-02-19T00:00:00',
'Task_Due_Date': '2013-02-22T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 10,
'Task_Assigned_Employee_ID': 29,
'Task_Owner_ID': 28,
'Task_Subject': 'Website Re-Design Plan',
'Task_Start_Date': '2013-02-19T00:00:00',
'Task_Due_Date': '2013-02-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 11,
'Task_Assigned_Employee_ID': 4,
'Task_Owner_ID': 1,
'Task_Subject': 'Rollout of New Website and Marketing Brochures',
'Task_Start_Date': '2013-02-20T00:00:00',
'Task_Due_Date': '2013-02-28T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 12,
'Task_Assigned_Employee_ID': 8,
'Task_Owner_ID': 4,
'Task_Subject': 'Update Sales Strategy Documents',
'Task_Start_Date': '2013-02-20T00:00:00',
'Task_Due_Date': '2013-02-22T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 13,
'Task_Assigned_Employee_ID': 41,
'Task_Owner_ID': 8,
'Task_Subject': 'Create 2012 Sales Report',
'Task_Start_Date': '2013-02-20T00:00:00',
'Task_Due_Date': '2013-02-21T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 14,
'Task_Assigned_Employee_ID': 42,
'Task_Owner_ID': 41,
'Task_Subject': 'Direct vs Online Sales Comparison Report',
'Task_Start_Date': '2013-02-20T00:00:00',
'Task_Due_Date': '2013-02-22T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 15,
'Task_Assigned_Employee_ID': 4,
'Task_Owner_ID': 41,
'Task_Subject': 'Review 2012 Sales Report and Approve 2013 Plans',
'Task_Start_Date': '2013-02-23T00:00:00',
'Task_Due_Date': '2013-02-28T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 16,
'Task_Assigned_Employee_ID': 3,
'Task_Owner_ID': 1,
'Task_Subject': 'Deliver R&D Plans for 2013',
'Task_Start_Date': '2013-03-01T00:00:00',
'Task_Due_Date': '2013-03-10T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 17,
'Task_Assigned_Employee_ID': 32,
'Task_Owner_ID': 3,
'Task_Subject': 'Create 2013 R&D Plans',
'Task_Start_Date': '2013-03-01T00:00:00',
'Task_Due_Date': '2013-03-07T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 18,
'Task_Assigned_Employee_ID': 33,
'Task_Owner_ID': 32,
'Task_Subject': '2013 QA Strategy Report',
'Task_Start_Date': '2013-03-02T00:00:00',
'Task_Due_Date': '2013-03-05T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 19,
'Task_Assigned_Employee_ID': 31,
'Task_Owner_ID': 33,
'Task_Subject': '2013 Training Events',
'Task_Start_Date': '2013-03-02T00:00:00',
'Task_Due_Date': '2013-03-04T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 20,
'Task_Assigned_Employee_ID': 5,
'Task_Owner_ID': 31,
'Task_Subject': 'Approve Hiring of John Jeffers',
'Task_Start_Date': '2013-03-02T00:00:00',
'Task_Due_Date': '2013-03-12T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 21,
'Task_Assigned_Employee_ID': 2,
'Task_Owner_ID': 5,
'Task_Subject': 'Non-Compete Agreements',
'Task_Start_Date': '2013-03-12T00:00:00',
'Task_Due_Date': '2013-03-14T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 1,
'Task_Completion': 100,
}, {
'Task_ID': 22,
'Task_Assigned_Employee_ID': 1,
'Task_Owner_ID': 2,
'Task_Subject': 'Update NDA Agreement',
'Task_Start_Date': '2013-03-14T00:00:00',
'Task_Due_Date': '2013-03-16T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 23,
'Task_Assigned_Employee_ID': 5,
'Task_Owner_ID': 2,
'Task_Subject': 'Update Employee Files with New NDA',
'Task_Start_Date': '2013-03-16T00:00:00',
'Task_Due_Date': '2013-03-26T00:00:00',
'Task_Status': 'Need Assistance',
'Task_Priority': 2,
'Task_Completion': 90,
}, {
'Task_ID': 24,
'Task_Assigned_Employee_ID': 6,
'Task_Owner_ID': 5,
'Task_Subject': 'Sign Updated NDA',
'Task_Start_Date': '2013-03-20T00:00:00',
'Task_Due_Date': '2013-03-25T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 25,
'Task_Assigned_Employee_ID': 7,
'Task_Owner_ID': 5,
'Task_Subject': 'Sign Updated NDA',
'Task_Start_Date': '2013-03-20T00:00:00',
'Task_Due_Date': '2013-03-25T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 26,
'Task_Assigned_Employee_ID': 8,
'Task_Owner_ID': 5,
'Task_Subject': 'Sign Updated NDA',
'Task_Start_Date': '2013-03-20T00:00:00',
'Task_Due_Date': '2013-03-25T00:00:00',
'Task_Status': 'Need Assistance',
'Task_Priority': 3,
'Task_Completion': 25,
}, {
'Task_ID': 27,
'Task_Assigned_Employee_ID': 9,
'Task_Owner_ID': 5,
'Task_Subject': 'Sign Updated NDA',
'Task_Start_Date': '2013-03-20T00:00:00',
'Task_Due_Date': '2013-03-25T00:00:00',
'Task_Status': 'In Progress',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 28,
'Task_Assigned_Employee_ID': 17,
'Task_Owner_ID': 9,
'Task_Subject': 'Submit Questions Regarding New NDA',
'Task_Start_Date': '2013-03-21T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 29,
'Task_Assigned_Employee_ID': 18,
'Task_Owner_ID': 9,
'Task_Subject': 'Submit Questions Regarding New NDA',
'Task_Start_Date': '2013-03-21T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 30,
'Task_Assigned_Employee_ID': 19,
'Task_Owner_ID': 9,
'Task_Subject': 'Submit Questions Regarding New NDA',
'Task_Start_Date': '2013-03-21T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Need Assistance',
'Task_Priority': 4,
'Task_Completion': 25,
}, {
'Task_ID': 31,
'Task_Assigned_Employee_ID': 14,
'Task_Owner_ID': 10,
'Task_Subject': 'Submit Signed NDA',
'Task_Start_Date': '2013-03-22T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 32,
'Task_Assigned_Employee_ID': 13,
'Task_Owner_ID': 10,
'Task_Subject': 'Submit Signed NDA',
'Task_Start_Date': '2013-03-22T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 33,
'Task_Assigned_Employee_ID': 15,
'Task_Owner_ID': 10,
'Task_Subject': 'Submit Signed NDA',
'Task_Start_Date': '2013-03-22T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 34,
'Task_Assigned_Employee_ID': 16,
'Task_Owner_ID': 10,
'Task_Subject': 'Submit Signed NDA',
'Task_Start_Date': '2013-03-22T00:00:00',
'Task_Due_Date': '2013-03-24T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 35,
'Task_Assigned_Employee_ID': 7,
'Task_Owner_ID': 1,
'Task_Subject': 'Update Revenue Projections',
'Task_Start_Date': '2013-03-24T00:00:00',
'Task_Due_Date': '2013-04-07T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 36,
'Task_Assigned_Employee_ID': 8,
'Task_Owner_ID': 7,
'Task_Subject': 'Review Revenue Projections',
'Task_Start_Date': '2013-03-25T00:00:00',
'Task_Due_Date': '2013-04-06T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 37,
'Task_Assigned_Employee_ID': 41,
'Task_Owner_ID': 7,
'Task_Subject': 'Comment on Revenue Projections',
'Task_Start_Date': '2013-03-25T00:00:00',
'Task_Due_Date': '2013-04-03T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 38,
'Task_Assigned_Employee_ID': 42,
'Task_Owner_ID': 7,
'Task_Subject': 'Comment on Revenue Projections',
'Task_Start_Date': '2013-03-25T00:00:00',
'Task_Due_Date': '2013-04-03T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 39,
'Task_Assigned_Employee_ID': 45,
'Task_Owner_ID': 7,
'Task_Subject': 'Comment on Revenue Projections',
'Task_Start_Date': '2013-03-25T00:00:00',
'Task_Due_Date': '2013-04-03T00:00:00',
'Task_Status': 'Deferred',
'Task_Priority': 3,
'Task_Completion': 25,
}, {
'Task_ID': 40,
'Task_Assigned_Employee_ID': 5,
'Task_Owner_ID': 11,
'Task_Subject': 'Provide New Health Insurance Docs',
'Task_Start_Date': '2013-03-28T00:00:00',
'Task_Due_Date': '2013-04-07T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 41,
'Task_Assigned_Employee_ID': 10,
'Task_Owner_ID': 11,
'Task_Subject': 'Review Changes to Health Insurance Coverage',
'Task_Start_Date': '2013-04-07T00:00:00',
'Task_Due_Date': '2013-04-30T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 42,
'Task_Assigned_Employee_ID': 14,
'Task_Owner_ID': 10,
'Task_Subject': 'Scan Health Insurance Forms',
'Task_Start_Date': '2013-04-15T00:00:00',
'Task_Due_Date': '2013-04-20T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}, {
'Task_ID': 43,
'Task_Assigned_Employee_ID': 15,
'Task_Owner_ID': 14,
'Task_Subject': 'Sign Health Insurance Forms',
'Task_Start_Date': '2013-04-16T00:00:00',
'Task_Due_Date': '2013-04-19T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 44,
'Task_Assigned_Employee_ID': 13,
'Task_Owner_ID': 14,
'Task_Subject': 'Sign Health Insurance Forms',
'Task_Start_Date': '2013-04-16T00:00:00',
'Task_Due_Date': '2013-04-19T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 45,
'Task_Assigned_Employee_ID': 16,
'Task_Owner_ID': 14,
'Task_Subject': 'Sign Health Insurance Forms',
'Task_Start_Date': '2013-04-16T00:00:00',
'Task_Due_Date': '2013-04-19T00:00:00',
'Task_Status': 'Deferred',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 46,
'Task_Assigned_Employee_ID': 18,
'Task_Owner_ID': 9,
'Task_Subject': 'Follow up with West Coast Stores',
'Task_Start_Date': '2013-04-18T00:00:00',
'Task_Due_Date': '2014-02-04T00:00:00',
'Task_Status': 'In Progress',
'Task_Priority': 3,
'Task_Completion': 95,
}, {
'Task_ID': 47,
'Task_Assigned_Employee_ID': 17,
'Task_Owner_ID': 9,
'Task_Subject': 'Follow up with East Coast Stores',
'Task_Start_Date': '2013-04-18T00:00:00',
'Task_Due_Date': '2014-01-04T00:00:00',
'Task_Status': 'In Progress',
'Task_Priority': 3,
'Task_Completion': 85,
}, {
'Task_ID': 48,
'Task_Assigned_Employee_ID': 19,
'Task_Owner_ID': 9,
'Task_Subject': 'Send Email to Customers about Recall',
'Task_Start_Date': '2013-04-18T00:00:00',
'Task_Due_Date': '2013-04-30T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 4,
'Task_Completion': 100,
}, {
'Task_ID': 49,
'Task_Assigned_Employee_ID': 9,
'Task_Owner_ID': 7,
'Task_Subject': 'Submit Refund Report for 2013 Recall',
'Task_Start_Date': '2013-04-25T00:00:00',
'Task_Due_Date': '2013-05-05T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 3,
'Task_Completion': 100,
}, {
'Task_ID': 50,
'Task_Assigned_Employee_ID': 2,
'Task_Owner_ID': 7,
'Task_Subject': 'Give Final Approval for Refunds',
'Task_Start_Date': '2013-05-05T00:00:00',
'Task_Due_Date': '2013-05-15T00:00:00',
'Task_Status': 'Completed',
'Task_Priority': 2,
'Task_Completion': 100,
}];
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://cdn.jsdelivr.net/npm/',
'bundles:': '../../../../bundles/',
'externals:': '../../../../bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.6/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.24/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.64/dist/dx-gantt.js',
'inferno': 'npm:inferno@8.2.3/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@8.2.3/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'@preact/signals-core': 'npm:@preact/signals-core@1.8.0/dist/signals-core.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme-react/common': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/common/core/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
// eslint-disable-next-line
const useTgzInCSB = ['openai'];
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const tasks = [
{
Task_ID: 1,
Task_Assigned_Employee_ID: 7,
Task_Owner_ID: 1,
Task_Subject: 'Prepare 2013 Financial',
Task_Start_Date: '2013-01-15T00:00:00',
Task_Due_Date: '2013-01-31T00:00:00',
Task_Status: 'Completed',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 2,
Task_Assigned_Employee_ID: 4,
Task_Owner_ID: 1,
Task_Subject: 'Prepare 3013 Marketing Plan',
Task_Start_Date: '2013-01-01T00:00:00',
Task_Due_Date: '2013-01-31T00:00:00',
Task_Status: 'Completed',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 3,
Task_Assigned_Employee_ID: 2,
Task_Owner_ID: 1,
Task_Subject: 'Update Personnel Files',
Task_Start_Date: '2013-02-03T00:00:00',
Task_Due_Date: '2013-02-28T00:00:00',
Task_Status: 'Completed',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 4,
Task_Assigned_Employee_ID: 2,
Task_Owner_ID: 1,
Task_Subject: 'Review Health Insurance Options Under the Affordable Care Act',
Task_Start_Date: '2013-02-12T00:00:00',
Task_Due_Date: '2013-04-25T00:00:00',
Task_Status: 'In Progress',
Task_Priority: 4,
Task_Completion: 50,
},
{
Task_ID: 5,
Task_Assigned_Employee_ID: 1,
Task_Owner_ID: 2,
Task_Subject: 'Choose between PPO and HMO Health Plan',
Task_Start_Date: '2013-02-15T00:00:00',
Task_Due_Date: '2013-04-15T00:00:00',
Task_Status: 'In Progress',
Task_Priority: 4,
Task_Completion: 75,
},
{
Task_ID: 6,
Task_Assigned_Employee_ID: 1,
Task_Owner_ID: 4,
Task_Subject: 'Google AdWords Strategy',
Task_Start_Date: '2013-02-16T00:00:00',
Task_Due_Date: '2013-02-28T00:00:00',
Task_Status: 'Completed',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 7,
Task_Assigned_Employee_ID: 1,
Task_Owner_ID: 4,
Task_Subject: 'New Brochures',
Task_Start_Date: '2013-02-17T00:00:00',
Task_Due_Date: '2013-02-24T00:00:00',
Task_Status: 'Completed',
Task_Priority: 2,
Task_Completion: 100,
},
{
Task_ID: 8,
Task_Assigned_Employee_ID: 28,
Task_Owner_ID: 1,
Task_Subject: '2013 Brochure Designs',
Task_Start_Date: '2013-02-19T00:00:00',
Task_Due_Date: '2013-02-24T00:00:00',
Task_Status: 'Completed',
Task_Priority: 3,
Task_Completion: 100,
},
{
Task_ID: 9,
Task_Assigned_Employee_ID: 29,
Task_Owner_ID: 28,
Task_Subject: 'Brochure Design Review',
Task_Start_Date: '2013-02-19T00:00:00',
Task_Due_Date: '2013-02-22T00:00:00',
Task_Status: 'Completed',
Task_Priority: 2,
Task_Completion: 100,
},
{
Task_ID: 10,
Task_Assigned_Employee_ID: 29,
Task_Owner_ID: 28,
Task_Subject: 'Website Re-Design Plan',
Task_Start_Date: '2013-02-19T00:00:00',
Task_Due_Date: '2013-02-24T00:00:00',
Task_Status: 'Completed',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 11,
Task_Assigned_Employee_ID: 4,
Task_Owner_ID: 1,
Task_Subject: 'Rollout of New Website and Marketing Brochures',
Task_Start_Date: '2013-02-20T00:00:00',
Task_Due_Date: '2013-02-28T00:00:00',
Task_Status: 'Completed',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 12,
Task_Assigned_Employee_ID: 8,
Task_Owner_ID: 4,
Task_Subject: 'Update Sales Strategy Documents',
Task_Start_Date: '2013-02-20T00:00:00',
Task_Due_Date: '2013-02-22T00:00:00',
Task_Status: 'Completed',
Task_Priority: 2,
Task_Completion: 100,
},
{
Task_ID: 13,
Task_Assigned_Employee_ID: 41,
Task_Owner_ID: 8,
Task_Subject: 'Create 2012 Sales Report',
Task_Start_Date: '2013-02-20T00:00:00',
Task_Due_Date: '2013-02-21T00:00:00',
Task_Status: 'Completed',
Task_Priority: 2,
Task_Completion: 100,
},
{
Task_ID: 14,
Task_Assigned_Employee_ID: 42,
Task_Owner_ID: 41,
Task_Subject: 'Direct vs Online Sales Comparison Report',
Task_Start_Date: '2013-02-20T00:00:00',
Task_Due_Date: '2013-02-22T00:00:00',
Task_Status: 'Completed',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 15,
Task_Assigned_Employee_ID: 4,
Task_Owner_ID: 41,
Task_Subject: 'Review 2012 Sales Report and Approve 2013 Plans',
Task_Start_Date: '2013-02-23T00:00:00',
Task_Due_Date: '2013-02-28T00:00:00',
Task_Status: 'Completed',
Task_Priority: 2,
Task_Completion: 100,
},
{
Task_ID: 16,
Task_Assigned_Employee_ID: 3,
Task_Owner_ID: 1,
Task_Subject: 'Deliver R&D Plans for 2013',
Task_Start_Date: '2013-03-01T00:00:00',
Task_Due_Date: '2013-03-10T00:00:00',
Task_Status: 'Completed',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 17,
Task_Assigned_Employee_ID: 32,
Task_Owner_ID: 3,
Task_Subject: 'Create 2013 R&D Plans',
Task_Start_Date: '2013-03-01T00:00:00',
Task_Due_Date: '2013-03-07T00:00:00',
Task_Status: 'Completed',
Task_Priority: 2,
Task_Completion: 100,
},
{
Task_ID: 18,
Task_Assigned_Employee_ID: 33,
Task_Owner_ID: 32,
Task_Subject: '2013 QA Strategy Report',
Task_Start_Date: '2013-03-02T00:00:00',
Task_Due_Date: '2013-03-05T00:00:00',
Task_Status: 'Completed',
Task_Priority: 2,
Task_Completion: 100,
},
{
Task_ID: 19,
Task_Assigned_Employee_ID: 31,
Task_Owner_ID: 33,
Task_Subject: '2013 Training Events',
Task_Start_Date: '2013-03-02T00:00:00',
Task_Due_Date: '2013-03-04T00:00:00',
Task_Status: 'Completed',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 20,
Task_Assigned_Employee_ID: 5,
Task_Owner_ID: 31,
Task_Subject: 'Approve Hiring of John Jeffers',
Task_Start_Date: '2013-03-02T00:00:00',
Task_Due_Date: '2013-03-12T00:00:00',
Task_Status: 'Completed',
Task_Priority: 2,
Task_Completion: 100,
},
{
Task_ID: 21,
Task_Assigned_Employee_ID: 2,
Task_Owner_ID: 5,
Task_Subject: 'Non-Compete Agreements',
Task_Start_Date: '2013-03-12T00:00:00',
Task_Due_Date: '2013-03-14T00:00:00',
Task_Status: 'Completed',
Task_Priority: 1,
Task_Completion: 100,
},
{
Task_ID: 22,
Task_Assigned_Employee_ID: 1,
Task_Owner_ID: 2,
Task_Subject: 'Update NDA Agreement',
Task_Start_Date: '2013-03-14T00:00:00',
Task_Due_Date: '2013-03-16T00:00:00',
Task_Status: 'Completed',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 23,
Task_Assigned_Employee_ID: 5,
Task_Owner_ID: 2,
Task_Subject: 'Update Employee Files with New NDA',
Task_Start_Date: '2013-03-16T00:00:00',
Task_Due_Date: '2013-03-26T00:00:00',
Task_Status: 'Need Assistance',
Task_Priority: 2,
Task_Completion: 90,
},
{
Task_ID: 24,
Task_Assigned_Employee_ID: 6,
Task_Owner_ID: 5,
Task_Subject: 'Sign Updated NDA',
Task_Start_Date: '2013-03-20T00:00:00',
Task_Due_Date: '2013-03-25T00:00:00',
Task_Status: 'Completed',
Task_Priority: 3,
Task_Completion: 100,
},
{
Task_ID: 25,
Task_Assigned_Employee_ID: 7,
Task_Owner_ID: 5,
Task_Subject: 'Sign Updated NDA',
Task_Start_Date: '2013-03-20T00:00:00',
Task_Due_Date: '2013-03-25T00:00:00',
Task_Status: 'Completed',
Task_Priority: 3,
Task_Completion: 100,
},
{
Task_ID: 26,
Task_Assigned_Employee_ID: 8,
Task_Owner_ID: 5,
Task_Subject: 'Sign Updated NDA',
Task_Start_Date: '2013-03-20T00:00:00',
Task_Due_Date: '2013-03-25T00:00:00',
Task_Status: 'Need Assistance',
Task_Priority: 3,
Task_Completion: 25,
},
{
Task_ID: 27,
Task_Assigned_Employee_ID: 9,
Task_Owner_ID: 5,
Task_Subject: 'Sign Updated NDA',
Task_Start_Date: '2013-03-20T00:00:00',
Task_Due_Date: '2013-03-25T00:00:00',
Task_Status: 'In Progress',
Task_Priority: 3,
Task_Completion: 100,
},
{
Task_ID: 28,
Task_Assigned_Employee_ID: 17,
Task_Owner_ID: 9,
Task_Subject: 'Submit Questions Regarding New NDA',
Task_Start_Date: '2013-03-21T00:00:00',
Task_Due_Date: '2013-03-24T00:00:00',
Task_Status: 'Completed',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 29,
Task_Assigned_Employee_ID: 18,
Task_Owner_ID: 9,
Task_Subject: 'Submit Questions Regarding New NDA',
Task_Start_Date: '2013-03-21T00:00:00',
Task_Due_Date: '2013-03-24T00:00:00',
Task_Status: 'Completed',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 30,
Task_Assigned_Employee_ID: 19,
Task_Owner_ID: 9,
Task_Subject: 'Submit Questions Regarding New NDA',
Task_Start_Date: '2013-03-21T00:00:00',
Task_Due_Date: '2013-03-24T00:00:00',
Task_Status: 'Need Assistance',
Task_Priority: 4,
Task_Completion: 25,
},
{
Task_ID: 31,
Task_Assigned_Employee_ID: 14,
Task_Owner_ID: 10,
Task_Subject: 'Submit Signed NDA',
Task_Start_Date: '2013-03-22T00:00:00',
Task_Due_Date: '2013-03-24T00:00:00',
Task_Status: 'Completed',
Task_Priority: 3,
Task_Completion: 100,
},
{
Task_ID: 32,
Task_Assigned_Employee_ID: 13,
Task_Owner_ID: 10,
Task_Subject: 'Submit Signed NDA',
Task_Start_Date: '2013-03-22T00:00:00',
Task_Due_Date: '2013-03-24T00:00:00',
Task_Status: 'Completed',
Task_Priority: 3,
Task_Completion: 100,
},
{
Task_ID: 33,
Task_Assigned_Employee_ID: 15,
Task_Owner_ID: 10,
Task_Subject: 'Submit Signed NDA',
Task_Start_Date: '2013-03-22T00:00:00',
Task_Due_Date: '2013-03-24T00:00:00',
Task_Status: 'Completed',
Task_Priority: 3,
Task_Completion: 100,
},
{
Task_ID: 34,
Task_Assigned_Employee_ID: 16,
Task_Owner_ID: 10,
Task_Subject: 'Submit Signed NDA',
Task_Start_Date: '2013-03-22T00:00:00',
Task_Due_Date: '2013-03-24T00:00:00',
Task_Status: 'Completed',
Task_Priority: 3,
Task_Completion: 100,
},
{
Task_ID: 35,
Task_Assigned_Employee_ID: 7,
Task_Owner_ID: 1,
Task_Subject: 'Update Revenue Projections',
Task_Start_Date: '2013-03-24T00:00:00',
Task_Due_Date: '2013-04-07T00:00:00',
Task_Status: 'Completed',
Task_Priority: 2,
Task_Completion: 100,
},
{
Task_ID: 36,
Task_Assigned_Employee_ID: 8,
Task_Owner_ID: 7,
Task_Subject: 'Review Revenue Projections',
Task_Start_Date: '2013-03-25T00:00:00',
Task_Due_Date: '2013-04-06T00:00:00',
Task_Status: 'Completed',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 37,
Task_Assigned_Employee_ID: 41,
Task_Owner_ID: 7,
Task_Subject: 'Comment on Revenue Projections',
Task_Start_Date: '2013-03-25T00:00:00',
Task_Due_Date: '2013-04-03T00:00:00',
Task_Status: 'Completed',
Task_Priority: 3,
Task_Completion: 100,
},
{
Task_ID: 38,
Task_Assigned_Employee_ID: 42,
Task_Owner_ID: 7,
Task_Subject: 'Comment on Revenue Projections',
Task_Start_Date: '2013-03-25T00:00:00',
Task_Due_Date: '2013-04-03T00:00:00',
Task_Status: 'Completed',
Task_Priority: 3,
Task_Completion: 100,
},
{
Task_ID: 39,
Task_Assigned_Employee_ID: 45,
Task_Owner_ID: 7,
Task_Subject: 'Comment on Revenue Projections',
Task_Start_Date: '2013-03-25T00:00:00',
Task_Due_Date: '2013-04-03T00:00:00',
Task_Status: 'Deferred',
Task_Priority: 3,
Task_Completion: 25,
},
{
Task_ID: 40,
Task_Assigned_Employee_ID: 5,
Task_Owner_ID: 11,
Task_Subject: 'Provide New Health Insurance Docs',
Task_Start_Date: '2013-03-28T00:00:00',
Task_Due_Date: '2013-04-07T00:00:00',
Task_Status: 'Completed',
Task_Priority: 2,
Task_Completion: 100,
},
{
Task_ID: 41,
Task_Assigned_Employee_ID: 10,
Task_Owner_ID: 11,
Task_Subject: 'Review Changes to Health Insurance Coverage',
Task_Start_Date: '2013-04-07T00:00:00',
Task_Due_Date: '2013-04-30T00:00:00',
Task_Status: 'Completed',
Task_Priority: 2,
Task_Completion: 100,
},
{
Task_ID: 42,
Task_Assigned_Employee_ID: 14,
Task_Owner_ID: 10,
Task_Subject: 'Scan Health Insurance Forms',
Task_Start_Date: '2013-04-15T00:00:00',
Task_Due_Date: '2013-04-20T00:00:00',
Task_Status: 'Completed',
Task_Priority: 2,
Task_Completion: 100,
},
{
Task_ID: 43,
Task_Assigned_Employee_ID: 15,
Task_Owner_ID: 14,
Task_Subject: 'Sign Health Insurance Forms',
Task_Start_Date: '2013-04-16T00:00:00',
Task_Due_Date: '2013-04-19T00:00:00',
Task_Status: 'Completed',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 44,
Task_Assigned_Employee_ID: 13,
Task_Owner_ID: 14,
Task_Subject: 'Sign Health Insurance Forms',
Task_Start_Date: '2013-04-16T00:00:00',
Task_Due_Date: '2013-04-19T00:00:00',
Task_Status: 'Completed',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 45,
Task_Assigned_Employee_ID: 16,
Task_Owner_ID: 14,
Task_Subject: 'Sign Health Insurance Forms',
Task_Start_Date: '2013-04-16T00:00:00',
Task_Due_Date: '2013-04-19T00:00:00',
Task_Status: 'Deferred',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 46,
Task_Assigned_Employee_ID: 18,
Task_Owner_ID: 9,
Task_Subject: 'Follow up with West Coast Stores',
Task_Start_Date: '2013-04-18T00:00:00',
Task_Due_Date: '2014-02-04T00:00:00',
Task_Status: 'In Progress',
Task_Priority: 3,
Task_Completion: 95,
},
{
Task_ID: 47,
Task_Assigned_Employee_ID: 17,
Task_Owner_ID: 9,
Task_Subject: 'Follow up with East Coast Stores',
Task_Start_Date: '2013-04-18T00:00:00',
Task_Due_Date: '2014-01-04T00:00:00',
Task_Status: 'In Progress',
Task_Priority: 3,
Task_Completion: 85,
},
{
Task_ID: 48,
Task_Assigned_Employee_ID: 19,
Task_Owner_ID: 9,
Task_Subject: 'Send Email to Customers about Recall',
Task_Start_Date: '2013-04-18T00:00:00',
Task_Due_Date: '2013-04-30T00:00:00',
Task_Status: 'Completed',
Task_Priority: 4,
Task_Completion: 100,
},
{
Task_ID: 49,
Task_Assigned_Employee_ID: 9,
Task_Owner_ID: 7,
Task_Subject: 'Submit Refund Report for 2013 Recall',
Task_Start_Date: '2013-04-25T00:00:00',
Task_Due_Date: '2013-05-05T00:00:00',
Task_Status: 'Completed',
Task_Priority: 3,
Task_Completion: 100,
},
{
Task_ID: 50,
Task_Assigned_Employee_ID: 2,
Task_Owner_ID: 7,
Task_Subject: 'Give Final Approval for Refunds',
Task_Start_Date: '2013-05-05T00:00:00',
Task_Due_Date: '2013-05-15T00:00:00',
Task_Status: 'Completed',
Task_Priority: 2,
Task_Completion: 100,
},
];
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" />
<script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.tsx");
</script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
Numeric, date, and Boolean values match if they are equal to the search query. String values match if they contain the query. Search for string values is case-insensitive.
To specify a search query in code, set the searchPanel.text property or call the searchByText(text) method.