Develop/fazil

package.json

@@ -12,14 +12,19 @@
     "@pnp/polyfill-ie11": "^1.0.1",
     "@pnp/sp": "^1.3.0",
     "@progress/kendo-data-query": "^1.5.1",
+    "@progress/kendo-react-dateinputs": "^2.7.1",
+    "@progress/kendo-react-inputs": "^2.7.1",
     "@progress/kendo-dropdowns-react-wrapper": "^2017.3.1026",
     "@progress/kendo-editor-react-wrapper": "^2018.3.1017",
     "@progress/kendo-react-dropdowns": "^2.8.0",
+    "@progress/kendo-react-excel-export": "^2.7.1",
+    "@progress/kendo-react-grid": "^2.7.1",
     "@progress/kendo-react-intl": "^2.8.0",
     "@progress/kendo-theme-default": "^3.5.1",
     "@progress/kendo-ui": "^2019.1.412",
     "@progress/kendo-upload-react-wrapper": "^2018.3.1017",
     "class-transformer": "^0.2.0",
+    "history": "^4.8.0",
     "immutability-helper": "^2.6.6",
     "object-assign": "^4.1.1",
     "office-ui-fabric-core": "^9.0.0",
@@ -28,9 +33,10 @@
     "react-collapsible": "^2.6.0",
     "react-dom": "^16.8.3",
     "react-redux": "^5.0.7",
-    "react-router": "^5.0.0",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.5",
     "redux": "^3.7.2",
+    "react-router-redux": "^5.0.0-alpha.9",
     "redux-logger": "^3.0.6",
     "redux-promise-middleware": "^5.0.0",
     "redux-thunk": "^2.3.0",
@@ -57,6 +63,8 @@
     "@types/react": "^16.8.3",
     "@types/react-dom": "^16.8.1",
     "@types/react-redux": "^5.0.21",
+    "@types/react-router-dom": "^4.2.6",
+    "@types/react-router-redux": "^5.0.12",
     "@types/redux-logger": "^3.0.5",
     "@types/redux-promise-middleware": "0.0.11",
     "@types/throttle-debounce": "^1.1.0",
@@ -69,7 +77,7 @@
     "gulp-spsave": "^3.1.1",
     "html-webpack-plugin": "^3.0.6",
     "mini-css-extract-plugin": "^0.5.0",
-    "node-sass": "^4.7.2",
+    "node-sass": "^4.11.0",
     "node-sp-auth": "^2.5.2",
     "pre-commit": "^1.2.2",
     "react-hot-loader": "^4.1.2",

src/actions/ActionTypeKey.ts

@@ -3,6 +3,7 @@ enum ActionTypeKeys {
   GET_CURRENT_USER_SUCCESS = "GET_CURRENT_USER_SUCCESS",
   GET_CURRENT_USER_ERROR = "GET_CURRENT_USER_ERROR",
 
+  UPDATE_SITE_INFO = "UPDATE_SITE_INFO",
   GET_SITE_INPROGRESS = "GET_SITE_INPROGRESS",
   GET_SITE_SUCCESS = "GET_SITE_SUCCESS",
   GET_SITE_ERROR = "GET_SITE_ERROR",

src/actions/ActionTypes.ts

@@ -7,14 +7,16 @@ import {
   IGetTicketDictionaryActionSuccess,
   IGetSiteActionInProgress,
   IGetSiteActionSuccess,
-  IGetSiteActionError
+  IGetSiteActionError,
+  IUpdateSiteInfo
 } from "./IActions";
 
 type ActionTypes =
   | IGetUserActionInProgress
   | IGetUserActionSuccess
   | IGetUserActionError
 
+  | IUpdateSiteInfo
   | IGetSiteActionInProgress
   | IGetSiteActionSuccess
   | IGetSiteActionError

src/actions/Actions.ts

@@ -2,7 +2,7 @@ import keys from "./ActionTypeKey";
 import * as IActions from "./IActions";
 import { ICurrentUserState } from "../models/IUserState";
 import { ITicketDictionary } from "../models/ITicketState";
-import { ISite } from "../models/ISiteState";
+import { ISiteInfo } from "../models/ISiteState";
 //#region User Actions
 export function getCurrentUserInProgress(): IActions.IGetUserActionInProgress {
   return {
@@ -34,14 +34,27 @@ export function getCurrentUserError(
 //#endregion
 
 //#region Site Actions
+export function updateSiteInfo(
+  value: any,
+  key: string
+): IActions.IUpdateSiteInfo {
+  return {
+    type: keys.UPDATE_SITE_INFO,
+    payload: {
+      value,
+      key
+    }
+  };
+}
+
 export function getSiteInProgress(): IActions.IGetSiteActionInProgress {
   return {
     type: keys.GET_SITE_INPROGRESS
   };
 }
 
 export function getSiteSuccess(
-  siteInfo: ISite
+  siteInfo: ISiteInfo
 ): IActions.IGetSiteActionSuccess {
   return {
     type: keys.GET_SITE_SUCCESS,

src/actions/IActions.ts

@@ -2,7 +2,7 @@ import { Action } from "redux";
 import keys from "./ActionTypeKey";
 import { ICurrentUserState } from "../models/IUserState";
 import { ITicketDictionary } from "../models/ITicketState";
-import { ISite } from "../models/ISiteState";
+import { ISiteInfo } from "../models/ISiteState";
 
 //#region UserActions
 export interface IGetUserActionInProgress extends Action {
@@ -25,16 +25,21 @@ export interface IGetUserActionError extends Action {
 //#endregion
 
 //#region SiteAction
-
-//#region UserActions
+export interface IUpdateSiteInfo extends Action {
+  readonly type: keys.UPDATE_SITE_INFO;
+  payload: {
+    value: any;
+    key: string;
+  };
+}
 export interface IGetSiteActionInProgress extends Action {
   readonly type: keys.GET_SITE_INPROGRESS;
 }
 
 export interface IGetSiteActionSuccess extends Action {
   readonly type: keys.GET_SITE_SUCCESS;
   payload: {
-    siteInfo: ISite;
+    siteInfo: ISiteInfo;
   };
 }
 

src/components/App.tsx

@@ -1,17 +1,17 @@
 import * as React from "react";
 import pnp from "@pnp/pnpjs";
 import { Fabric } from "office-ui-fabric-react/lib/Fabric";
+import { HashRouter as Router } from "react-router-dom";
 import { initializeIcons } from "@uifabric/icons";
 import "@progress/kendo-ui";
 import "@progress/kendo-theme-default/dist/all.css";
 import { pnpConfig } from "../utils/pnp.config";
 
 import { getCurrentUser } from "../services/UserAPI";
 import { IAppProps } from "../models/IAppProps";
-import { ICurrentUserState } from "../models/IUserState";
-import Ticket from "../containers/ticket/Ticket";
 import { ErrorMessage } from "./support/ErrorMessage";
 import { Spinner, SpinnerSize } from "office-ui-fabric-react";
+import AppNavigation from "./AppNavigation";
 
 export class App extends React.Component<IAppProps, {}> {
   constructor(props: IAppProps) {
@@ -25,29 +25,32 @@ export class App extends React.Component<IAppProps, {}> {
   }
 
   public render(): JSX.Element {
-    const userState: ICurrentUserState = this.props.store.user.currentUser;
     return (
-      <Fabric>
-        {!this.props.store.user.currentUser.isFetched ? (
-          this.props.store.user.error ? (
-            <ErrorMessage
-              error={`Error while getting user - ${
-                this.props.store.user.error
-              }`}
-            />
-          ) : (
-            <Spinner
-              size={SpinnerSize.large}
-              style={{ margin: "200px" }}
-              label={"Getting current user info..."}
-            />
-          )
-        ) : (
+      <Router hashType="noslash">
+        <Fabric>
           <div>
-            <Ticket />
+            {!this.props.store.user.currentUser.isFetched ? (
+              this.props.store.user.error ? (
+                <ErrorMessage
+                  error={`Error while getting user - ${
+                    this.props.store.user.error
+                  }`}
+                />
+              ) : (
+                <Spinner
+                  size={SpinnerSize.large}
+                  style={{ margin: "200px" }}
+                  label={"Getting current user info..."}
+                />
+              )
+            ) : (
+              <div className="ms-Grid">
+                <AppNavigation />
+              </div>
+            )}
           </div>
-        )}
-      </Fabric>
+        </Fabric>
+      </Router>
     );
   }
 }

src/components/AppNavigation.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { HashRouter as Router, Route } from "react-router-dom";
+import Ticket from "../containers/ticket/Ticket";
+import Dashboard from "../containers/Dashboard";
+
+class AppNavigation extends React.Component<{}> {
+  constructor(props: {}) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div className="ms-Grid-row">
+        <Router hashType="noslash">
+          <div>
+            <Route path="/" exact={true} component={Dashboard} />
+            <Route path="/newticket" exact={true} component={Ticket} />
+            <Route
+                path="/editticket/:id"
+                exact={true}
+                component={Ticket}
+              />
+              <Route
+                path="/viewticket/:id"
+                exact={true}
+                component={Ticket}
+              />
+          </div>
+        </Router>
+      </div>
+    );
+  }
+}
+
+export default AppNavigation;

src/components/Dashboard.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { IDashboardProps } from "../models/IDashboardProps";
+import TicketGrid from "../containers/ticket/TicketGrid";
+import { autobind } from "@uifabric/utilities";
+import { CompoundButton } from "office-ui-fabric-react";
+import { navigateToNewForm } from "../services/SiteAPI";
+
+export class Dashboard extends React.Component<IDashboardProps, {}> {
+  constructor(props: IDashboardProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div>
+        <div className="ms-Grid-col ms-sm12 ms-md12 ms-lg12">
+          <CompoundButton
+            iconProps={{ iconName: "Add" }}
+            primary={true}
+            secondaryText="You can create a new ticket here"
+            onClick={e => {
+              this._onNavigationUpdate(e);
+            }}
+          >
+            Create New Ticket
+          </CompoundButton>
+        </div>
+        <br />
+        <div className="ms-Grid-col ms-sm12 ms-md12 ms-lg12">For Dev:</div>
+        <div className="ms-Grid-col ms-sm12 ms-md12 ms-lg12">
+          <TicketGrid />
+        </div>
+      </div>
+    );
+  }
+
+  @autobind
+  private _onNavigationUpdate(event: any) {
+    event.preventDefault();
+    navigateToNewForm(this.props);
+  }
+}

src/components/support/KendoCombo.tsx

@@ -5,7 +5,7 @@ import { autobind } from "@uifabric/utilities";
 import "./KendoCombo.scss";
 
 interface IKendoComboProps {
-  getLabelValue: (value: string) => void;
+  getValue: (value: string) => void;
   fullValues?: any[];
   isRemote?: boolean;
   textValue: string;
@@ -77,6 +77,6 @@ export class KendoCombo extends React.Component<
   private _onItemsChange(event: any) {
     const value: string = event.sender._prev;
     this.setState({ keyValue: value });
-    this.props.getLabelValue(value);
+    this.props.getValue(value);
   }
 }

src/components/support/RichTextEditor.scss

@@ -0,0 +1,4 @@
+
+.rich-text-readonly{
+    pointer-events: none;
+}

src/components/support/RichTextEditor.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { Editor } from "@progress/kendo-editor-react-wrapper";
+// import { Menu, MenuItem, SubMenu, ContextMenu, PanelBar, PanelItem, SubItems, TabStrip, Tabs, Tab, Content } from '@progress/kendo-layout-react-wrapper';
+import "./RichTextEditor.scss";
+import "@progress/kendo-ui";
+
+interface IRichTextEditor {
+  value: any;
+  getEvent?: (event: any) => void;
+  disabled?: boolean;
+  placeholder: string;
+}
+
+export class RichTextEditor extends React.Component<IRichTextEditor, {}> {
+  constructor(props: IRichTextEditor) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <Editor
+          value={this.props.value}
+          change={this._onItemsChange}
+          resizable={true}
+          placeholder={this.props.placeholder}
+          tools={[
+            { name: "bold" },
+            { name: "italic" },
+            { name: "underline" },
+            { name: "strikethrough" },
+            { name: "justifyLeft" },
+            { name: "justifyCenter" },
+            { name: "justifyRight" },
+            { name: "justifyFull" },
+            { name: "insertUnorderedList" },
+            { name: "insertOrderedList" },
+            { name: "indent" },
+            { name: "outdent" },
+            { name: "createLink" },
+            { name: "unlink" },
+            { name: "createTable" },
+            { name: "addRowAbove" },
+            { name: "addRowBelow" },
+            { name: "addColumnLeft" },
+            { name: "addColumnRight" },
+            { name: "deleteRow" },
+            { name: "deleteColumn" },
+            { name: "foreColor" },
+            { name: "backColor" }
+          ]}
+        />
+      </div>
+    );
+  }
+
+  private _onItemsChange = (event: any): void => {
+    this.props.getEvent(event);
+  };
+}