From 440606325352a7facdd98e45f8ed32ca2c4cbf99 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Wed, 1 Apr 2020 16:37:09 +0200 Subject: [PATCH 01/43] Installed Material-Ui; Created Sign up page; General styling --- Controllers/AppUsersController.cs | 2 +- Controllers/ProjectsController.cs | 2 +- Controllers/TicketsController.cs | 2 +- Startup.cs | 2 +- TicketManager.csproj | 22 +- client/package-lock.json | 241 ++++++++++++++++++++++ client/package.json | 3 + client/src/App.tsx | 18 +- client/src/components/Avatar.tsx | 18 -- client/src/components/AvatarList.tsx | 23 +-- client/src/components/ButtonAppBar.tsx | 60 ++++++ client/src/components/FloatingButton.tsx | 38 +++- client/src/components/Footer.tsx | 53 +++++ client/src/components/Header.tsx | 13 +- client/src/components/ProfileSelector.tsx | 7 +- client/src/components/ProgressBar.tsx | 41 +++- client/src/components/SignInSide.tsx | 118 +++++++++++ client/src/components/TicketList.tsx | 6 +- client/src/components/UserAvatar.tsx | 51 +++++ client/src/components/UserHeader.tsx | 4 +- client/src/pages/HomePage.tsx | 32 +-- client/src/pages/Layout.tsx | 44 ++-- client/src/pages/ProjectPage.tsx | 2 +- client/src/utils/router.tsx | 42 ++-- 24 files changed, 708 insertions(+), 136 deletions(-) delete mode 100644 client/src/components/Avatar.tsx create mode 100644 client/src/components/ButtonAppBar.tsx create mode 100644 client/src/components/Footer.tsx create mode 100644 client/src/components/SignInSide.tsx create mode 100644 client/src/components/UserAvatar.tsx diff --git a/Controllers/AppUsersController.cs b/Controllers/AppUsersController.cs index 2c1b759..b8ec990 100644 --- a/Controllers/AppUsersController.cs +++ b/Controllers/AppUsersController.cs @@ -13,7 +13,7 @@ using TicketManager.Resources; namespace TicketManager.Controllers { - [Authorize] + // [Authorize] [Produces("application/json")] [Route("api/v1/users")] [ApiController] diff --git a/Controllers/ProjectsController.cs b/Controllers/ProjectsController.cs index c06bfb0..0bd41d0 100644 --- a/Controllers/ProjectsController.cs +++ b/Controllers/ProjectsController.cs @@ -13,7 +13,7 @@ using System; namespace TicketManager.Controllers { // [Authorize(Roles = "Admin")] - [Authorize] + // [Authorize] [Produces("application/json")] [Route("api/v1/[controller]")] [ApiController] diff --git a/Controllers/TicketsController.cs b/Controllers/TicketsController.cs index 78891dd..efc6132 100644 --- a/Controllers/TicketsController.cs +++ b/Controllers/TicketsController.cs @@ -10,7 +10,7 @@ using TicketManager.Models; namespace TicketManager.Controllers { - [Authorize] + // [Authorize] [Route("api/v1/[controller]")] [ApiController] public class TicketsController : ControllerBase diff --git a/Startup.cs b/Startup.cs index e358b50..271e797 100644 --- a/Startup.cs +++ b/Startup.cs @@ -63,7 +63,7 @@ namespace TicketManager { Name = "Ruidy Nemausat", Email = "ruidy.nemausat@gmail.com", - Url = new Uri("https://ruidywebsite.herokuapp.com/"), + Url = new Uri("https://ruidyportfolio.herokuapp.com/"), } }); // Set the comments path for the Swagger JSON and UI. diff --git a/TicketManager.csproj b/TicketManager.csproj index d68b951..46c0c2f 100644 --- a/TicketManager.csproj +++ b/TicketManager.csproj @@ -1,7 +1,7 @@ - netcoreapp3.1 + netcoreapp3.0 8.0 @@ -13,24 +13,24 @@ - - - - - + + + + + runtime; build; native; contentfiles; analyzers; buildtransitive all - - - - + + + + - + runtime; build; native; contentfiles; analyzers; buildtransitive all diff --git a/client/package-lock.json b/client/package-lock.json index a8c0141..a7823f3 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1057,6 +1057,11 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -1282,6 +1287,93 @@ "@types/yargs": "^13.0.0" } }, + "@material-ui/core": { + "version": "4.9.8", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.8.tgz", + "integrity": "sha512-4cslpG6oLoPWUfwPkX+hvbak4hAGiOfgXOu/UIYeeMrtsTEebC0Mirjoby7zhS4ny86YI3rXEFW6EZDmlj5n5w==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/styles": "^4.9.6", + "@material-ui/system": "^4.9.6", + "@material-ui/types": "^5.0.0", + "@material-ui/utils": "^4.9.6", + "@types/react-transition-group": "^4.2.0", + "clsx": "^1.0.2", + "hoist-non-react-statics": "^3.3.2", + "popper.js": "^1.14.1", + "prop-types": "^15.7.2", + "react-is": "^16.8.0", + "react-transition-group": "^4.3.0" + } + }, + "@material-ui/icons": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz", + "integrity": "sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==", + "requires": { + "@babel/runtime": "^7.4.4" + } + }, + "@material-ui/lab": { + "version": "4.0.0-alpha.47", + "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.47.tgz", + "integrity": "sha512-+WC3O0M/769D3nO9Rqupusc+lob7tQMe5/DnOjAhZ0bpXlJbhZb7N84WkEk4JgQLj6ydP8e9Jhqd1lG+mGj+xw==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.9.6", + "clsx": "^1.0.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0" + } + }, + "@material-ui/styles": { + "version": "4.9.6", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.6.tgz", + "integrity": "sha512-ijgwStEkw1OZ6gCz18hkjycpr/3lKs1hYPi88O/AUn4vMuuGEGAIrqKVFq/lADmZUNF3DOFIk8LDkp7zmjPxtA==", + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/hash": "^0.8.0", + "@material-ui/types": "^5.0.0", + "@material-ui/utils": "^4.9.6", + "clsx": "^1.0.2", + "csstype": "^2.5.2", + "hoist-non-react-statics": "^3.3.2", + "jss": "^10.0.3", + "jss-plugin-camel-case": "^10.0.3", + "jss-plugin-default-unit": "^10.0.3", + "jss-plugin-global": "^10.0.3", + "jss-plugin-nested": "^10.0.3", + "jss-plugin-props-sort": "^10.0.3", + "jss-plugin-rule-value-function": "^10.0.3", + "jss-plugin-vendor-prefixer": "^10.0.3", + "prop-types": "^15.7.2" + } + }, + "@material-ui/system": { + "version": "4.9.6", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.6.tgz", + "integrity": "sha512-QtfoAePyqXoZ2HUVSwGb1Ro0kucMCvVjbI0CdYIR21t0Opgfm1Oer6ni9P5lfeXA39xSt0wCierw37j+YES48Q==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.9.6", + "prop-types": "^15.7.2" + } + }, + "@material-ui/types": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.0.tgz", + "integrity": "sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg==" + }, + "@material-ui/utils": { + "version": "4.9.6", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.9.6.tgz", + "integrity": "sha512-gqlBn0JPPTUZeAktn1rgMcy9Iczrr74ecx31tyZLVGdBGGzsxzM6PP6zeS7FuoLS6vG4hoZP7hWnOoHtkR0Kvw==", + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0" + } + }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", @@ -1622,6 +1714,14 @@ "@types/react-router": "*" } }, + "@types/react-transition-group": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.4.tgz", + "integrity": "sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA==", + "requires": { + "@types/react": "*" + } + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -3168,6 +3268,11 @@ "shallow-clone": "^0.1.2" } }, + "clsx": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz", + "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -3665,6 +3770,15 @@ "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz", "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=" }, + "css-vendor": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.7.tgz", + "integrity": "sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==", + "requires": { + "@babel/runtime": "^7.6.2", + "is-in-browser": "^1.0.2" + } + }, "css-what": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz", @@ -4091,6 +4205,30 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz", + "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^2.6.7" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.9.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz", + "integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "regenerator-runtime": { + "version": "0.13.5", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz", + "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==" + } + } + }, "dom-serializer": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", @@ -6072,6 +6210,11 @@ "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=" }, + "hyphenate-style-name": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz", + "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==" + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -6371,6 +6514,11 @@ "is-extglob": "^2.1.1" } }, + "is-in-browser": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" + }, "is-number": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", @@ -7780,6 +7928,83 @@ "verror": "1.10.0" } }, + "jss": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.1.1.tgz", + "integrity": "sha512-Xz3qgRUFlxbWk1czCZibUJqhVPObrZHxY3FPsjCXhDld4NOj1BgM14Ir5hVm+Qr6OLqVljjGvoMcCdXNOAbdkQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^2.6.5", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-camel-case": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.1.1.tgz", + "integrity": "sha512-MDIaw8FeD5uFz1seQBKz4pnvDLnj5vIKV5hXSVdMaAVq13xR6SVTVWkIV/keyTs5txxTvzGJ9hXoxgd1WTUlBw==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.1.1" + } + }, + "jss-plugin-default-unit": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.1.1.tgz", + "integrity": "sha512-UkeVCA/b3QEA4k0nIKS4uWXDCNmV73WLHdh2oDGZZc3GsQtlOCuiH3EkB/qI60v2MiCq356/SYWsDXt21yjwdg==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.1.1" + } + }, + "jss-plugin-global": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.1.1.tgz", + "integrity": "sha512-VBG3wRyi3Z8S4kMhm8rZV6caYBegsk+QnQZSVmrWw6GVOT/Z4FA7eyMu5SdkorDlG/HVpHh91oFN56O4R9m2VA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.1.1" + } + }, + "jss-plugin-nested": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.1.1.tgz", + "integrity": "sha512-ozEu7ZBSVrMYxSDplPX3H82XHNQk2DQEJ9TEyo7OVTPJ1hEieqjDFiOQOxXEj9z3PMqkylnUbvWIZRDKCFYw5Q==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.1.1", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.1.1.tgz", + "integrity": "sha512-g/joK3eTDZB4pkqpZB38257yD4LXB0X15jxtZAGbUzcKAVUHPl9Jb47Y7lYmiGsShiV4YmQRqG1p2DHMYoK91g==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.1.1" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.1.1.tgz", + "integrity": "sha512-ClV1lvJ3laU9la1CUzaDugEcwnpjPTuJ0yGy2YtcU+gG/w9HMInD5vEv7xKAz53Bk4WiJm5uLOElSEshHyhKNw==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.1.1" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.1.1.tgz", + "integrity": "sha512-09MZpQ6onQrhaVSF6GHC4iYifQ7+4YC/tAP6D4ZWeZotvCMq1mHLqNKRIaqQ2lkgANjlEot2JnVi1ktu4+L4pw==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.7", + "jss": "10.1.1" + } + }, "jsx-ast-utils": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz", @@ -9204,6 +9429,11 @@ "ts-pnp": "^1.1.2" } }, + "popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==" + }, "portfinder": { "version": "1.0.25", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz", @@ -10731,6 +10961,17 @@ "workbox-webpack-plugin": "4.3.1" } }, + "react-transition-group": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz", + "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", diff --git a/client/package.json b/client/package.json index 87298e4..22ccca7 100644 --- a/client/package.json +++ b/client/package.json @@ -4,6 +4,9 @@ "private": true, "dependencies": { "@auth0/auth0-spa-js": "^1.6.4", + "@material-ui/core": "^4.9.8", + "@material-ui/icons": "^4.9.1", + "@material-ui/lab": "^4.0.0-alpha.47", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.4.0", "@testing-library/user-event": "^7.2.1", diff --git a/client/src/App.tsx b/client/src/App.tsx index f71b386..e3b5f69 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,8 +1,12 @@ import React, { FC } from "react"; +import { Router } from "react-router-dom"; +import * as createHistory from "history"; import Layout from "./pages/Layout"; import { useAuth0 } from "./authentication/auth0"; -const App: FC = () => { +export const history = createHistory.createBrowserHistory(); + +export default function App() { const { loading } = useAuth0(); if (loading) { @@ -10,10 +14,10 @@ const App: FC = () => { } return ( -
- -
+ <> + + + + ); -}; - -export default App; +} diff --git a/client/src/components/Avatar.tsx b/client/src/components/Avatar.tsx deleted file mode 100644 index 91dd6e9..0000000 --- a/client/src/components/Avatar.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React, { FC } from "react"; - -interface IProps { - picture: string; -} -export const Avatar: FC = ({ picture }) => { - return ( - <> - user avatar - - ); -}; diff --git a/client/src/components/AvatarList.tsx b/client/src/components/AvatarList.tsx index 606111f..644c1b1 100644 --- a/client/src/components/AvatarList.tsx +++ b/client/src/components/AvatarList.tsx @@ -1,6 +1,9 @@ import React, { FC } from "react"; -import { User } from "../types/User"; import { Link } from "react-router-dom"; +import Avatar from "@material-ui/core/Avatar"; +import AvatarGroup from "@material-ui/lab/AvatarGroup"; +import { User } from "../types/User"; +import { UserAvatar } from "./UserAvatar"; interface AvatarListProps { users: User[]; @@ -11,17 +14,13 @@ export const AvatarList: FC = ({ users }) => { <> ) : ( <> - {users.map((user: User, i: number) => ( - - {user.fullName} - - ))} + + {users.map((user: User, i: number) => ( + + + + ))} + ); }; diff --git a/client/src/components/ButtonAppBar.tsx b/client/src/components/ButtonAppBar.tsx new file mode 100644 index 0000000..bf3e1af --- /dev/null +++ b/client/src/components/ButtonAppBar.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; +import AppBar from "@material-ui/core/AppBar"; +import Toolbar from "@material-ui/core/Toolbar"; +import Typography from "@material-ui/core/Typography"; +import Button from "@material-ui/core/Button"; +import IconButton from "@material-ui/core/IconButton"; +import MenuIcon from "@material-ui/icons/Menu"; +import { useAuth0 } from "../authentication/auth0"; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + flexGrow: 1 + }, + menuButton: { + marginRight: theme.spacing(2) + }, + title: { + flexGrow: 1 + } + }) +); + +export default function ButtonAppBar() { + const classes = useStyles(); + const { isAuthenticated, loginWithRedirect, logout } = useAuth0(); + + return ( +
+ + + + + + + + + {!isAuthenticated ? ( + + ) : ( + + )} + + +
+ ); +} diff --git a/client/src/components/FloatingButton.tsx b/client/src/components/FloatingButton.tsx index 0031443..9cae4e0 100644 --- a/client/src/components/FloatingButton.tsx +++ b/client/src/components/FloatingButton.tsx @@ -1,23 +1,43 @@ import React, { FC, MouseEvent } from "react"; +import { Fab, SvgIconTypeMap } from "@material-ui/core"; +import { OverridableComponent } from "@material-ui/core/OverridableComponent"; +import AddIcon from "@material-ui/icons/Add"; + import { Button } from "./Button"; interface IProps { icon?: string; - size?: string; - color?: string; + color?: "inherit" | "primary" | "secondary" | "default" | undefined; onClick?: (e: MouseEvent) => void; + size?: "small" | "medium" | "large" | undefined; + text?: string; } +// export const FloatingButton: FC = ({ +// icon = "add", +// size = "small", +// color = "red", +// onClick +// }) => { +// const iconComponent = {icon}; +// return ( +// +// ); +// }; + export const FloatingButton: FC = ({ - icon = "add", - size = "small", - color = "red", + color, + icon, + size, + text, onClick }) => { - const iconComponent = {icon}; return ( - + + + {text} + ); }; diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx new file mode 100644 index 0000000..b814495 --- /dev/null +++ b/client/src/components/Footer.tsx @@ -0,0 +1,53 @@ +import React from "react"; +import { AppBar } from "@material-ui/core"; +import CssBaseline from "@material-ui/core/CssBaseline"; +import Typography from "@material-ui/core/Typography"; +import { makeStyles } from "@material-ui/core/styles"; +import Container from "@material-ui/core/Container"; +import Link from "@material-ui/core/Link"; + +function Copyright() { + return ( + + {"© "} + + BugBuster + {" "} + {new Date().getFullYear()} + {". All Rights Reserved. Made with 🔥"} + + ); +} + +const useStyles = makeStyles(theme => ({ + footer: { + padding: theme.spacing(3, 2), + marginTop: "auto", + backgroundColor: + theme.palette.type === "light" + ? theme.palette.grey[200] + : theme.palette.grey[800] + } +})); + +export default function Footer() { + const classes = useStyles(); + + return ( +
+ + + + Ruidy Nemausat + {" "} + + + +
+ ); +} diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx index 863906a..a93d504 100644 --- a/client/src/components/Header.tsx +++ b/client/src/components/Header.tsx @@ -1,4 +1,5 @@ import React, { FC } from "react"; +import { Typography, Box } from "@material-ui/core"; type HeaderProps = { title: string; @@ -7,9 +8,13 @@ type HeaderProps = { export const Header: FC = ({ title, description }) => { return ( - <> -

{title}

-

{description}

- + + + {title} + + + {description} + + ); }; diff --git a/client/src/components/ProfileSelector.tsx b/client/src/components/ProfileSelector.tsx index f689262..1671585 100644 --- a/client/src/components/ProfileSelector.tsx +++ b/client/src/components/ProfileSelector.tsx @@ -1,6 +1,6 @@ import React, { FC } from "react"; import { HorizontalCard } from "./HorizontalCard"; -import { Avatar } from "./Avatar"; +import { UserAvatar } from "./UserAvatar"; import { Link } from "react-router-dom"; export const ProfileSelector: FC = () => { @@ -10,7 +10,10 @@ export const ProfileSelector: FC = () => {

Select a profile

- +
Demo User
diff --git a/client/src/components/ProgressBar.tsx b/client/src/components/ProgressBar.tsx index bf0ff90..c4ddf8e 100644 --- a/client/src/components/ProgressBar.tsx +++ b/client/src/components/ProgressBar.tsx @@ -1,6 +1,10 @@ import React, { FC, CSSProperties } from "react"; +import { makeStyles, Theme, createStyles } from "@material-ui/core/styles"; +import LinearProgress from "@material-ui/core/LinearProgress"; +import { Box } from "@material-ui/core"; +import { PlaylistAddCheck } from "@material-ui/icons"; -type ProgressBarProps = { +type IProps = { value: number; max?: number; tasksTotalCount?: number; @@ -8,7 +12,18 @@ type ProgressBarProps = { remainingDays?: number; }; -export const ProgressBar: FC = ({ +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: "100%", + "& > * + *": { + marginTop: theme.spacing(2) + } + } + }) +); + +export const ProgressBar: FC = ({ value, max = 100, tasksDone, @@ -28,21 +43,29 @@ export const ProgressBar: FC = ({ barColor = "red"; } + const classes = useStyles(); + return ( <>
-
+ +
+ + {/* */} +
+ + {/*
-
-
- playlist_add_check +
*/} + + {tasksDone}/{tasksTotalCount} -
+ Due {remainingDays} days -
-
+ +
); diff --git a/client/src/components/SignInSide.tsx b/client/src/components/SignInSide.tsx new file mode 100644 index 0000000..bb58e38 --- /dev/null +++ b/client/src/components/SignInSide.tsx @@ -0,0 +1,118 @@ +import React from "react"; +import Avatar from "@material-ui/core/Avatar"; +import Button from "@material-ui/core/Button"; +import CssBaseline from "@material-ui/core/CssBaseline"; +import TextField from "@material-ui/core/TextField"; +import FormControlLabel from "@material-ui/core/FormControlLabel"; +import Checkbox from "@material-ui/core/Checkbox"; +import Link from "@material-ui/core/Link"; +import Paper from "@material-ui/core/Paper"; +import Grid from "@material-ui/core/Grid"; +import LockOutlinedIcon from "@material-ui/icons/LockOutlined"; +import Typography from "@material-ui/core/Typography"; +import { makeStyles, createStyles, Theme } from "@material-ui/core/styles"; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + height: "100vh" + }, + image: { + backgroundImage: "url(https://source.unsplash.com/daily?dev)", + backgroundRepeat: "no-repeat", + backgroundColor: + theme.palette.type === "light" + ? theme.palette.grey[50] + : theme.palette.grey[900], + backgroundSize: "cover", + backgroundPosition: "center" + }, + paper: { + margin: theme.spacing(8, 4), + display: "flex", + flexDirection: "column", + alignItems: "center" + }, + avatar: { + margin: theme.spacing(1), + backgroundColor: theme.palette.secondary.main + }, + form: { + width: "100%", + marginTop: theme.spacing(1) + }, + submit: { + margin: theme.spacing(3, 0, 2) + } + }) +); + +export default function SignInSide() { + const classes = useStyles(); + + return ( + + + + +
+ + + + + Sign in + +
+ + + } + label="Remember me" + /> + + + + + Forgot password? + + + + + {"Don't have an account? Sign Up"} + + + + +
+ + + ); +} diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx index 149eabe..b593f31 100644 --- a/client/src/components/TicketList.tsx +++ b/client/src/components/TicketList.tsx @@ -53,11 +53,7 @@ export const TicketList: FC = ({ />

Tickets

{addButton && ( - + )} = () => { +// return ( +// <> +// user avatar +// +// ); +// }; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + display: "flex", + "& > *": { + margin: theme.spacing(1) + } + }, + small: { + width: theme.spacing(3), + height: theme.spacing(3) + }, + large: { + width: theme.spacing(10), + height: theme.spacing(10) + } + }) +); + +export const UserAvatar: FC = ({ picture, alt }) => { + const classes = useStyles(); + + return ( +
+ +
+ ); +}; diff --git a/client/src/components/UserHeader.tsx b/client/src/components/UserHeader.tsx index 3242e63..b2345d9 100644 --- a/client/src/components/UserHeader.tsx +++ b/client/src/components/UserHeader.tsx @@ -1,6 +1,6 @@ import React, { FC } from "react"; import { Header } from "../components/Header"; -import { Avatar } from "../components/Avatar"; +import { UserAvatar } from "./UserAvatar"; interface IProps { fullName: string; @@ -11,7 +11,7 @@ export const UserHeader: FC = ({ fullName, presentation, picture }) => { return (
- +
diff --git a/client/src/pages/HomePage.tsx b/client/src/pages/HomePage.tsx index d6676c9..e6fe164 100644 --- a/client/src/pages/HomePage.tsx +++ b/client/src/pages/HomePage.tsx @@ -1,21 +1,23 @@ import React from "react"; -import { LogInForm } from "../components/LogInForm"; -import { ProfileSelector } from "../components/ProfileSelector"; +// import { LogInForm } from "../components/LogInForm"; +// import { ProfileSelector } from "../components/ProfileSelector"; +import SignInSide from "../components/SignInSide"; export const HomePage: React.FC = () => { return ( -
-
-

Ticket Manager

-
-
- -
-
- -
-
-
-
+ //
+ //
+ //

Ticket Manager

+ //
+ //
+ // + //
+ //
+ // + //
+ //
+ //
+ //
+ ); }; diff --git a/client/src/pages/Layout.tsx b/client/src/pages/Layout.tsx index cf9a792..f7e8a1e 100644 --- a/client/src/pages/Layout.tsx +++ b/client/src/pages/Layout.tsx @@ -1,18 +1,36 @@ import React, { FC } from "react"; + +import CssBaseline from "@material-ui/core/CssBaseline"; +import { makeStyles } from "@material-ui/core/styles"; import { AppRouter } from "../utils/router"; -import { NavBar } from "../components/Navbar"; +import ButtonAppBar from "../components/ButtonAppBar"; +import Footer from "../components/Footer"; -const Layout: FC = () => { +const useStyles = makeStyles(theme => ({ + root: { + display: "flex", + flexDirection: "column", + minHeight: "100vh" + }, + main: { + marginTop: theme.spacing(8), + marginBottom: theme.spacing(2) + } +})); + +export default function Layout() { + const classes = useStyles(); return ( - <> -
- -
- {/* */} - - {/*
*/} - +
+
+
+ +
+ {/* */} + + +
+
+
); -}; - -export default Layout; +} diff --git a/client/src/pages/ProjectPage.tsx b/client/src/pages/ProjectPage.tsx index 464d0e4..f6c61fb 100644 --- a/client/src/pages/ProjectPage.tsx +++ b/client/src/pages/ProjectPage.tsx @@ -39,7 +39,7 @@ export const ProjectPage: FC = ({ viewModel }) => { setShowModal(true)} /> diff --git a/client/src/utils/router.tsx b/client/src/utils/router.tsx index 88a01d4..098f4c6 100644 --- a/client/src/utils/router.tsx +++ b/client/src/utils/router.tsx @@ -8,38 +8,32 @@ import { TicketController } from "../controllers/TicketController"; import { NotFoundPage } from "../pages/NotFoundPage"; // import { TestPage } from "../pages/TestPage"; -export const history = creacteHistory.createBrowserHistory(); - export const AppRouter = () => { return ( - -
- - {/* + + {/* */} - - - + + + - - - + + + - - - + + + - - - + + + - - - - -
- + + + + ); }; From f9e1fd93922f96da5e24453d90ade1569a0c1033 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 3 Apr 2020 10:53:10 +0200 Subject: [PATCH 02/43] add UserTabPanel Component and minor refactoring --- client/package-lock.json | 115 +++++++++++++++++++ client/package.json | 2 + client/src/components/ActivityList.tsx | 4 +- client/src/components/AppFileList.tsx | 6 +- client/src/components/AvatarList.tsx | 1 - client/src/components/ButtonAppBar.tsx | 1 - client/src/components/FileCollection.tsx | 1 - client/src/components/FloatingButton.tsx | 19 +-- client/src/components/Footer.tsx | 24 ++-- client/src/components/HorizontalCard.tsx | 5 - client/src/components/InputFile.tsx | 4 +- client/src/components/MemberList.tsx | 6 +- client/src/components/NewTicketModal.tsx | 3 +- client/src/components/NewTicketTabRouter.tsx | 41 ------- client/src/components/ProfileSelector.tsx | 1 - client/src/components/ProgressBar.tsx | 26 ++--- client/src/components/ProjectList.tsx | 4 +- client/src/components/TabRouter.tsx | 1 - client/src/components/TicketList.tsx | 8 +- client/src/components/UserAvatar.tsx | 14 --- client/src/components/UserTabPanel.tsx | 102 ++++++++++++++++ client/src/components/UsersModal.tsx | 7 +- client/src/pages/UserPage.tsx | 4 +- client/src/utils/router.tsx | 8 +- 24 files changed, 269 insertions(+), 138 deletions(-) delete mode 100644 client/src/components/NewTicketTabRouter.tsx create mode 100644 client/src/components/UserTabPanel.tsx diff --git a/client/package-lock.json b/client/package-lock.json index a7823f3..378ba1e 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1714,6 +1714,14 @@ "@types/react-router": "*" } }, + "@types/react-swipeable-views": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/@types/react-swipeable-views/-/react-swipeable-views-0.13.0.tgz", + "integrity": "sha512-orrreCcXev6IUXDuHf07RDDCAoIZRMSr95eyWmYNRfjic7w/O+68iPu0NCysVls+UygRNvoqZMuXI72N/58E1w==", + "requires": { + "@types/react": "*" + } + }, "@types/react-transition-group": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.4.tgz", @@ -8014,6 +8022,11 @@ "object.assign": "^4.1.0" } }, + "keycode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", + "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -10850,6 +10863,16 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.5.tgz", "integrity": "sha512-+DMR2k5c6BqMDSMF8hLH0vYKtKTeikiFW+fj0LClN+XZg4N9b8QUAdHC62CGWNLTi/gnuuemNcNcTFrCvK1f+A==" }, + "react-event-listener": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz", + "integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==", + "requires": { + "@babel/runtime": "^7.2.0", + "prop-types": "^15.6.0", + "warning": "^4.0.1" + } + }, "react-is": { "version": "16.12.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", @@ -10961,6 +10984,85 @@ "workbox-webpack-plugin": "4.3.1" } }, + "react-swipeable-views": { + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/react-swipeable-views/-/react-swipeable-views-0.13.9.tgz", + "integrity": "sha512-WXC2FKYvZ9QdJ31v9LjEJEl1bA7E4AcaloTkbW0uU0dYf5uvv4aOpiyxubvOkVl1a5L2UAHmKSif4TmJ9usrSg==", + "requires": { + "@babel/runtime": "7.0.0", + "prop-types": "^15.5.4", + "react-swipeable-views-core": "^0.13.7", + "react-swipeable-views-utils": "^0.13.9", + "warning": "^4.0.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz", + "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==", + "requires": { + "regenerator-runtime": "^0.12.0" + } + }, + "regenerator-runtime": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", + "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==" + } + } + }, + "react-swipeable-views-core": { + "version": "0.13.7", + "resolved": "https://registry.npmjs.org/react-swipeable-views-core/-/react-swipeable-views-core-0.13.7.tgz", + "integrity": "sha512-ekn9oDYfBt0oqJSGGwLEhKvn+QaqMGTy//9dURTLf+vp7W5j6GvmKryYdnwJCDITaPFI2hujXV4CH9krhvaE5w==", + "requires": { + "@babel/runtime": "7.0.0", + "warning": "^4.0.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz", + "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==", + "requires": { + "regenerator-runtime": "^0.12.0" + } + }, + "regenerator-runtime": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", + "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==" + } + } + }, + "react-swipeable-views-utils": { + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/react-swipeable-views-utils/-/react-swipeable-views-utils-0.13.9.tgz", + "integrity": "sha512-QLGxRKrbJCbWz94vkWLzb1Daaa2Y/TZKmsNKQ6WSNrS+chrlfZ3z9tqZ7YUJlW6pRWp3QZdLSY3UE3cN0TXXmw==", + "requires": { + "@babel/runtime": "7.0.0", + "keycode": "^2.1.7", + "prop-types": "^15.6.0", + "react-event-listener": "^0.6.0", + "react-swipeable-views-core": "^0.13.7", + "shallow-equal": "^1.2.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz", + "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==", + "requires": { + "regenerator-runtime": "^0.12.0" + } + }, + "regenerator-runtime": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", + "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==" + } + } + }, "react-transition-group": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz", @@ -11747,6 +11849,11 @@ } } }, + "shallow-equal": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz", + "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==" + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", @@ -13129,6 +13236,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", diff --git a/client/package.json b/client/package.json index 22ccca7..eb38d0b 100644 --- a/client/package.json +++ b/client/package.json @@ -16,12 +16,14 @@ "@types/react": "^16.9.19", "@types/react-dom": "^16.9.5", "@types/react-router-dom": "^5.1.3", + "@types/react-swipeable-views": "^0.13.0", "@types/underscore": "^1.9.4", "history": "^4.10.1", "react": "^16.12.0", "react-dom": "^16.12.0", "react-router-dom": "^5.1.2", "react-scripts": "3.3.1", + "react-swipeable-views": "^0.13.9", "typescript": "^3.7.5", "underscore": "^1.9.2" }, diff --git a/client/src/components/ActivityList.tsx b/client/src/components/ActivityList.tsx index 5f597c0..f362964 100644 --- a/client/src/components/ActivityList.tsx +++ b/client/src/components/ActivityList.tsx @@ -12,9 +12,7 @@ export const ActivityList: FC = ({ activities }) => { const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => { setFilterText(""); }; - const handleChange: (e: ChangeEvent) => void = ( - e: ChangeEvent - ) => { + const handleChange = (e: ChangeEvent) => { setFilterText(e.target.value); }; diff --git a/client/src/components/AppFileList.tsx b/client/src/components/AppFileList.tsx index fd4cd63..6a05a64 100644 --- a/client/src/components/AppFileList.tsx +++ b/client/src/components/AppFileList.tsx @@ -10,12 +10,10 @@ type IProps = { export const FileList: FC = ({ files }) => { const [filterText, setFilterText] = useState(""); - const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => { + const clearFilterText = (e: MouseEvent): void => { setFilterText(""); }; - const handleChange: (e: ChangeEvent) => void = ( - e: ChangeEvent - ) => { + const handleChange = (e: ChangeEvent): void => { setFilterText(e.target.value); }; return ( diff --git a/client/src/components/AvatarList.tsx b/client/src/components/AvatarList.tsx index 644c1b1..e13fef7 100644 --- a/client/src/components/AvatarList.tsx +++ b/client/src/components/AvatarList.tsx @@ -3,7 +3,6 @@ import { Link } from "react-router-dom"; import Avatar from "@material-ui/core/Avatar"; import AvatarGroup from "@material-ui/lab/AvatarGroup"; import { User } from "../types/User"; -import { UserAvatar } from "./UserAvatar"; interface AvatarListProps { users: User[]; diff --git a/client/src/components/ButtonAppBar.tsx b/client/src/components/ButtonAppBar.tsx index bf3e1af..d652d15 100644 --- a/client/src/components/ButtonAppBar.tsx +++ b/client/src/components/ButtonAppBar.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { Link } from "react-router-dom"; import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; import AppBar from "@material-ui/core/AppBar"; import Toolbar from "@material-ui/core/Toolbar"; diff --git a/client/src/components/FileCollection.tsx b/client/src/components/FileCollection.tsx index c709da9..7f27d07 100644 --- a/client/src/components/FileCollection.tsx +++ b/client/src/components/FileCollection.tsx @@ -7,7 +7,6 @@ type IProps = { }; export const FileCollection: FC = ({ files, filterText }) => { - console.log(); return ( <>
    diff --git a/client/src/components/FloatingButton.tsx b/client/src/components/FloatingButton.tsx index 9cae4e0..ea28e6d 100644 --- a/client/src/components/FloatingButton.tsx +++ b/client/src/components/FloatingButton.tsx @@ -1,10 +1,7 @@ import React, { FC, MouseEvent } from "react"; -import { Fab, SvgIconTypeMap } from "@material-ui/core"; -import { OverridableComponent } from "@material-ui/core/OverridableComponent"; +import { Fab } from "@material-ui/core"; import AddIcon from "@material-ui/icons/Add"; -import { Button } from "./Button"; - interface IProps { icon?: string; color?: "inherit" | "primary" | "secondary" | "default" | undefined; @@ -13,20 +10,6 @@ interface IProps { text?: string; } -// export const FloatingButton: FC = ({ -// icon = "add", -// size = "small", -// color = "red", -// onClick -// }) => { -// const iconComponent = {icon}; -// return ( -// -// ); -// }; - export const FloatingButton: FC = ({ color, icon, diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx index b814495..09a94eb 100644 --- a/client/src/components/Footer.tsx +++ b/client/src/components/Footer.tsx @@ -1,23 +1,31 @@ -import React from "react"; -import { AppBar } from "@material-ui/core"; -import CssBaseline from "@material-ui/core/CssBaseline"; +import React, { FC } from "react"; import Typography from "@material-ui/core/Typography"; import { makeStyles } from "@material-ui/core/styles"; import Container from "@material-ui/core/Container"; import Link from "@material-ui/core/Link"; -function Copyright() { +interface IProps { + brand: string; + text: string; +} + +const copyParams: IProps = { + brand: "BugBuster", + text: "Made with 🔥" +}; + +const Copyright: FC = ({ brand, text }) => { return ( {"© "} - BugBuster + {brand} {" "} {new Date().getFullYear()} - {". All Rights Reserved. Made with 🔥"} + {`. All Rights Reserved. ${text}`} ); -} +}; const useStyles = makeStyles(theme => ({ footer: { @@ -46,7 +54,7 @@ export default function Footer() { Ruidy Nemausat {" "} - +
); diff --git a/client/src/components/HorizontalCard.tsx b/client/src/components/HorizontalCard.tsx index 8d53495..4ee8664 100644 --- a/client/src/components/HorizontalCard.tsx +++ b/client/src/components/HorizontalCard.tsx @@ -45,11 +45,6 @@ export const HorizontalCard: FC = ({ check - {/* - - archive - - */}
diff --git a/client/src/components/InputFile.tsx b/client/src/components/InputFile.tsx index 1f8c63f..7e3418a 100644 --- a/client/src/components/InputFile.tsx +++ b/client/src/components/InputFile.tsx @@ -1,8 +1,6 @@ import React, { FC } from "react"; -type IProps = {}; - -export const InputFile: FC = () => { +export const InputFile: FC = () => { return ( <>
diff --git a/client/src/components/MemberList.tsx b/client/src/components/MemberList.tsx index 4f49466..feadf27 100644 --- a/client/src/components/MemberList.tsx +++ b/client/src/components/MemberList.tsx @@ -10,12 +10,10 @@ interface IProps { export const MemberList: FC = ({ users }) => { const [members, setMembers] = useState([]); const [filterText, setFilterText] = useState(""); - const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => { + const clearFilterText = (e: MouseEvent): void => { setFilterText(""); }; - const handleChange: (e: ChangeEvent) => void = ( - e: ChangeEvent - ) => { + const handleChange = (e: ChangeEvent): void => { setFilterText(e.target.value); }; return ( diff --git a/client/src/components/NewTicketModal.tsx b/client/src/components/NewTicketModal.tsx index 055974f..c586a69 100644 --- a/client/src/components/NewTicketModal.tsx +++ b/client/src/components/NewTicketModal.tsx @@ -6,11 +6,10 @@ import { Ticket } from "../types/Ticket"; import { Project } from "../types/Project"; import { post } from "../utils/http"; import { Constants } from "../utils/Constants"; -// import { HttpResponse } from "../types/HttpResponse"; interface IProps { show: boolean; - handleClose(): void; + handleClose: () => void; allProjects: Project[]; } diff --git a/client/src/components/NewTicketTabRouter.tsx b/client/src/components/NewTicketTabRouter.tsx deleted file mode 100644 index 0b68000..0000000 --- a/client/src/components/NewTicketTabRouter.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React, { FC } from "react"; -import { useRouteMatch } from "react-router-dom"; -import { TabRouterHeader } from "./TabRouterHeader"; - -interface IProps { - tabNames: string[]; - description: string; - setDescription: React.Dispatch>; - title: string; - setTitle: React.Dispatch>; - endingDate: string; - setEndingDate: React.Dispatch>; -} - -export const NewTicketTabRouter: FC = ({ - tabNames, - description, - setDescription, - title, - setTitle, - endingDate, - setEndingDate -}) => { - const { url } = useRouteMatch(); - return ( - <> -
- - - {/* */} -
- - ); -}; diff --git a/client/src/components/ProfileSelector.tsx b/client/src/components/ProfileSelector.tsx index 1671585..19cae4e 100644 --- a/client/src/components/ProfileSelector.tsx +++ b/client/src/components/ProfileSelector.tsx @@ -1,5 +1,4 @@ import React, { FC } from "react"; -import { HorizontalCard } from "./HorizontalCard"; import { UserAvatar } from "./UserAvatar"; import { Link } from "react-router-dom"; diff --git a/client/src/components/ProgressBar.tsx b/client/src/components/ProgressBar.tsx index c4ddf8e..86d95cf 100644 --- a/client/src/components/ProgressBar.tsx +++ b/client/src/components/ProgressBar.tsx @@ -1,4 +1,4 @@ -import React, { FC, CSSProperties } from "react"; +import React, { FC } from "react"; import { makeStyles, Theme, createStyles } from "@material-ui/core/styles"; import LinearProgress from "@material-ui/core/LinearProgress"; import { Box } from "@material-ui/core"; @@ -25,23 +25,23 @@ const useStyles = makeStyles((theme: Theme) => export const ProgressBar: FC = ({ value, - max = 100, + // max = 100, tasksDone, tasksTotalCount, remainingDays }) => { - const styleString: CSSProperties = { width: `${value}%` }; - let barColor: string = "green"; + // const styleString: CSSProperties = { width: `${value}%` }; + // let barColor: string = "green"; - if (value < 100) { - barColor = "yellow"; - } - if (value < 200 / 3) { - barColor = "orange"; - } - if (value < 100 / 3) { - barColor = "red"; - } + // if (value < 100) { + // barColor = "yellow"; + // } + // if (value < 200 / 3) { + // barColor = "orange"; + // } + // if (value < 100 / 3) { + // barColor = "red"; + // } const classes = useStyles(); diff --git a/client/src/components/ProjectList.tsx b/client/src/components/ProjectList.tsx index a574d41..cd7cb93 100644 --- a/client/src/components/ProjectList.tsx +++ b/client/src/components/ProjectList.tsx @@ -17,9 +17,7 @@ export const ProjectList: FC = ({ projects }) => { setFilterText(""); }; - const handleChange: (e: ChangeEvent) => void = ( - e: ChangeEvent - ) => { + const handleChange = (e: ChangeEvent): void => { setFilterText(e.target.value); }; diff --git a/client/src/components/TabRouter.tsx b/client/src/components/TabRouter.tsx index 8ecfaba..2f34d2a 100644 --- a/client/src/components/TabRouter.tsx +++ b/client/src/components/TabRouter.tsx @@ -3,7 +3,6 @@ import { Route, useRouteMatch, Redirect } from "react-router-dom"; import { TabRouterHeader } from "./TabRouterHeader"; import { TicketList } from "./TicketList"; import { FileList } from "./AppFileList"; -// import { ActivityList } from "./ActivityList"; import { Ticket } from "../types/Ticket"; import { AppFile } from "../types/AppFile"; import { Activity } from "../types/Activity"; diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx index b593f31..0910d8f 100644 --- a/client/src/components/TicketList.tsx +++ b/client/src/components/TicketList.tsx @@ -21,17 +21,15 @@ export const TicketList: FC = ({ addButton = true }) => { const [filterText, setFilterText] = useState(""); - const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => { + const clearFilterText = (e: MouseEvent): void => { setFilterText(""); }; - const onClick: (e: MouseEvent) => void = (e: MouseEvent) => { + const onClick = (e: MouseEvent): void => { e.preventDefault(); setShowNew(true); }; - const handleChange: (e: ChangeEvent) => void = ( - e: ChangeEvent - ) => { + const handleChange = (e: ChangeEvent): void => { setFilterText(e.target.value); }; diff --git a/client/src/components/UserAvatar.tsx b/client/src/components/UserAvatar.tsx index 8e7ffb7..6bbd826 100644 --- a/client/src/components/UserAvatar.tsx +++ b/client/src/components/UserAvatar.tsx @@ -7,20 +7,6 @@ interface IProps { alt: string; } -// export const Avatar: FC = () => { -// return ( -// <> -// user avatar -// -// ); -// }; - const useStyles = makeStyles((theme: Theme) => createStyles({ root: { diff --git a/client/src/components/UserTabPanel.tsx b/client/src/components/UserTabPanel.tsx new file mode 100644 index 0000000..2a54610 --- /dev/null +++ b/client/src/components/UserTabPanel.tsx @@ -0,0 +1,102 @@ +import React, { FC } from "react"; +import SwipeableViews from "react-swipeable-views"; +import { makeStyles, Theme, useTheme } from "@material-ui/core/styles"; +import AppBar from "@material-ui/core/AppBar"; +import Tabs from "@material-ui/core/Tabs"; +import Tab from "@material-ui/core/Tab"; +import Typography from "@material-ui/core/Typography"; +import Box from "@material-ui/core/Box"; +import { Header } from "./Header"; +import { Ticket } from "../types/Ticket"; +import { Project } from "../types/Project"; +import { ProjectList } from "./ProjectList"; +import { TicketList } from "./TicketList"; + +interface TabProps { + children?: React.ReactNode; + dir?: string; + index: any; + value: any; +} + +const TabPanel: FC = (props: TabProps) => { + const { children, value, index, ...other } = props; + + return ( + + ); +}; + +const a11yProps = (index: any) => { + return { + id: `full-width-tab-${index}`, + "aria-controls": `full-width-tabpanel-${index}` + }; +}; + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + backgroundColor: theme.palette.background.paper, + width: 500 + } +})); + +interface IProps { + tabNames: string[]; + tickets: Ticket[]; + projects: Project[]; +} + +export const UserTabPanel: FC = ({ tickets, tabNames, projects }) => { + const classes = useStyles(); + const theme = useTheme(); + const [value, setValue] = React.useState(0); + + const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => { + setValue(newValue); + }; + + const handleChangeIndex = (index: number) => { + setValue(index); + }; + + return ( +
+ + + {tabNames.map((t: string, i: number) => ( + + ))} + + + + + + + + + + +
+ ); +}; diff --git a/client/src/components/UsersModal.tsx b/client/src/components/UsersModal.tsx index 7d88fd7..f09f8c0 100644 --- a/client/src/components/UsersModal.tsx +++ b/client/src/components/UsersModal.tsx @@ -1,4 +1,4 @@ -import React, { FC, useState, ChangeEvent, FormEvent, useEffect } from "react"; +import React, { FC, useState, ChangeEvent, FormEvent } from "react"; import { Modal } from "./Modal"; import { AvatarList } from "./AvatarList"; import { User } from "../types/User"; @@ -25,9 +25,7 @@ export const UsersModal: FC = ({ const [members, setMembers] = useState(users); const { id } = useParams(); - const handleChange: (e: ChangeEvent) => void = ( - e: ChangeEvent - ) => { + const handleChange = (e: ChangeEvent): void => { setFilterText(e.target.value); }; @@ -42,7 +40,6 @@ export const UsersModal: FC = ({ handleClose(); }; - useEffect(() => {}); return (
diff --git a/client/src/pages/UserPage.tsx b/client/src/pages/UserPage.tsx index 2b908af..b23078a 100644 --- a/client/src/pages/UserPage.tsx +++ b/client/src/pages/UserPage.tsx @@ -2,10 +2,12 @@ import React, { FC } from "react"; import { UserVM } from "../VM/UserVM"; import { UserHeader } from "../components/UserHeader"; import { UserTabRouter } from "../components/UserTabRouter"; +import { UserTabPanel } from "../components/UserTabPanel"; interface IProps { viewModel: UserVM; } + export const UserPage: FC = ({ viewModel }) => { const { fullName, presentation, picture, projects, tickets } = viewModel; const tabNames: string[] = ["Projects", "Tickets"]; @@ -17,7 +19,7 @@ export const UserPage: FC = ({ viewModel }) => { fullName={fullName} presentation={presentation} /> - { return ( - {/* - - */} + + + From 6de5e17b791e897dba57163b2b09adfc10dbe07a Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 3 Apr 2020 11:07:33 +0200 Subject: [PATCH 03/43] update UserPageLayout --- client/public/index.html | 4 ++-- client/src/components/UserTabPanel.tsx | 4 ++-- client/src/pages/UserPage.tsx | 24 ++++++++++-------------- 3 files changed, 14 insertions(+), 18 deletions(-) diff --git a/client/public/index.html b/client/public/index.html index aec8e99..eb30249 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -12,11 +12,11 @@ - - + --> { const useStyles = makeStyles((theme: Theme) => ({ root: { backgroundColor: theme.palette.background.paper, - width: 500 + flexGrow: 1 } })); @@ -71,7 +71,7 @@ export const UserTabPanel: FC = ({ tickets, tabNames, projects }) => { return (
- + = ({ viewModel }) => { const { fullName, presentation, picture, projects, tickets } = viewModel; const tabNames: string[] = ["Projects", "Tickets"]; + return ( -
-
- - -
-
+ + + + ); }; From 05660e55aa0ce4b6d0334be890cde3286270d010 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 3 Apr 2020 11:45:03 +0200 Subject: [PATCH 04/43] update FilterBar --- client/src/components/FilterBar.tsx | 53 ++++++++++++++++----------- client/src/components/ProjectList.tsx | 23 ++++++++---- 2 files changed, 47 insertions(+), 29 deletions(-) diff --git a/client/src/components/FilterBar.tsx b/client/src/components/FilterBar.tsx index fc9cb9c..c42c1be 100644 --- a/client/src/components/FilterBar.tsx +++ b/client/src/components/FilterBar.tsx @@ -1,5 +1,9 @@ import React, { FC, ChangeEvent, MouseEvent } from "react"; import { useRouteMatch } from "react-router-dom"; +import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; +import TextField from "@material-ui/core/TextField"; +import { Grid } from "@material-ui/core"; +// import { AccountCircle, FilterList, FilterListSharp } from "@material-ui/icons"; type IProps = { filterText: string; @@ -7,35 +11,42 @@ type IProps = { clearFilterText: (e: MouseEvent) => void; }; +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + "& > *": { + margin: theme.spacing(1), + width: "25ch" + } + }, + margin: { + margin: theme.spacing(1) + } + }) +); + export const FilterBar: FC = ({ filterText, - handleChange, - clearFilterText + handleChange + // clearFilterText }) => { const { url } = useRouteMatch(); const placeholder: string = url.split("/")[3] || "users"; + const classes = useStyles(); return ( - <> -
-
- + + + - - - close - -
-
- + + +
); }; diff --git a/client/src/components/ProjectList.tsx b/client/src/components/ProjectList.tsx index cd7cb93..da5671e 100644 --- a/client/src/components/ProjectList.tsx +++ b/client/src/components/ProjectList.tsx @@ -6,6 +6,7 @@ import { put } from "../utils/http"; import { Constants } from "../utils/Constants"; import { HttpResponse } from "../types/HttpResponse"; import { Project } from "../types/Project"; +import { Container, Typography, Grid } from "@material-ui/core"; type IProps = { projects: Project[]; @@ -28,14 +29,20 @@ export const ProjectList: FC = ({ projects }) => { ); return ( <> -
-

Projects

- -
+ + + + Projects + + + + + +
    {filteredTickets.length === 0 ? ( From 6d5aedd499896b0cc3eb3024ab23f3cd31b5755e Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 3 Apr 2020 11:59:14 +0200 Subject: [PATCH 05/43] update horizontalCard --- client/src/components/HorizontalCard.tsx | 85 +++++++++++++++--------- client/src/components/ProjectList.tsx | 40 ++++++----- 2 files changed, 71 insertions(+), 54 deletions(-) diff --git a/client/src/components/HorizontalCard.tsx b/client/src/components/HorizontalCard.tsx index 4ee8664..62a71ea 100644 --- a/client/src/components/HorizontalCard.tsx +++ b/client/src/components/HorizontalCard.tsx @@ -1,5 +1,11 @@ import React, { FC, MouseEvent } from "react"; import { Link } from "react-router-dom"; +import { makeStyles } from "@material-ui/core/styles"; +import Card from "@material-ui/core/Card"; +import CardActions from "@material-ui/core/CardActions"; +import CardContent from "@material-ui/core/CardContent"; +import Button from "@material-ui/core/Button"; +import Typography from "@material-ui/core/Typography"; import { getRemainingdays } from "../utils/methods"; interface IProps { @@ -9,47 +15,60 @@ interface IProps { link?: string; } +const useStyles = makeStyles({ + root: { + minWidth: 275 + }, + bullet: { + display: "inline-block", + margin: "0 2px", + transform: "scale(0.8)" + }, + title: { + fontSize: 14 + }, + pos: { + marginBottom: 12 + } +}); + export const HorizontalCard: FC = ({ title, remainingDays, link = "#", validateTicket }) => { + const classes = useStyles(); + const bull = •; + return ( -
  • -
    -
    -
    -
    -
    -
    - - {title ?? "Nothing to do"} - -
    -
    + + + + + {title ?? "Nothing to do"} + + + + + + Due{" "} + {remainingDays ? ( + getRemainingdays(remainingDays) + ) : ( - Due{" "} - {remainingDays ? ( - getRemainingdays(remainingDays) - ) : ( - - Too much 0 - - )}{" "} - days + Too much 0 -
    - - - check - - -
    -
    -
    -
    -
    -
    • + )}{" "} + days + + + + + + + ); }; diff --git a/client/src/components/ProjectList.tsx b/client/src/components/ProjectList.tsx index da5671e..2c5c406 100644 --- a/client/src/components/ProjectList.tsx +++ b/client/src/components/ProjectList.tsx @@ -44,27 +44,25 @@ export const ProjectList: FC = ({ projects }) => {
    -
      - {filteredTickets.length === 0 ? ( - - ) : ( - filteredTickets.map((t: Project) => ( - { - e.preventDefault(); - await put>( - `${Constants.ticketsURI}/${t.id}/closed`, - {} - ); - }} - /> - )) - )} -
    + {filteredTickets.length === 0 ? ( + + ) : ( + filteredTickets.map((t: Project) => ( + { + e.preventDefault(); + await put>( + `${Constants.ticketsURI}/${t.id}/closed`, + {} + ); + }} + /> + )) + )}
    ); From 597c8066ae2990ce4c1b1458598a275044ee73e4 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 3 Apr 2020 12:22:48 +0200 Subject: [PATCH 06/43] update projectlist --- client/src/App.tsx | 2 +- client/src/authentication/auth0.tsx | 2 +- client/src/components/HorizontalCard.tsx | 1 - client/src/components/ProjectList.tsx | 75 ++++++++++++------------ client/src/components/UserTabPanel.tsx | 5 +- client/src/pages/Layout.tsx | 21 +++---- client/src/pages/UserPage.tsx | 1 - client/src/utils/router.tsx | 4 +- 8 files changed, 53 insertions(+), 58 deletions(-) diff --git a/client/src/App.tsx b/client/src/App.tsx index e3b5f69..f388612 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,4 +1,4 @@ -import React, { FC } from "react"; +import React from "react"; import { Router } from "react-router-dom"; import * as createHistory from "history"; import Layout from "./pages/Layout"; diff --git a/client/src/authentication/auth0.tsx b/client/src/authentication/auth0.tsx index bb85f11..6be8707 100644 --- a/client/src/authentication/auth0.tsx +++ b/client/src/authentication/auth0.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useContext, FC } from "react"; +import React, { useState, useEffect, useContext } from "react"; import createAuth0Client from "@auth0/auth0-spa-js"; import Auth0Client from "@auth0/auth0-spa-js/dist/typings/Auth0Client"; diff --git a/client/src/components/HorizontalCard.tsx b/client/src/components/HorizontalCard.tsx index 62a71ea..6f0a7cc 100644 --- a/client/src/components/HorizontalCard.tsx +++ b/client/src/components/HorizontalCard.tsx @@ -39,7 +39,6 @@ export const HorizontalCard: FC = ({ validateTicket }) => { const classes = useStyles(); - const bull = •; return ( diff --git a/client/src/components/ProjectList.tsx b/client/src/components/ProjectList.tsx index 2c5c406..e6bcf93 100644 --- a/client/src/components/ProjectList.tsx +++ b/client/src/components/ProjectList.tsx @@ -6,7 +6,7 @@ import { put } from "../utils/http"; import { Constants } from "../utils/Constants"; import { HttpResponse } from "../types/HttpResponse"; import { Project } from "../types/Project"; -import { Container, Typography, Grid } from "@material-ui/core"; +import { Typography, Grid } from "@material-ui/core"; type IProps = { projects: Project[]; @@ -27,43 +27,44 @@ export const ProjectList: FC = ({ projects }) => { t.status !== "Done" && t.title.toLowerCase().includes(filterText.toLowerCase()) ); + return ( - <> - - - - Projects - - - - - + + + + Projects + -
    - {filteredTickets.length === 0 ? ( - - ) : ( - filteredTickets.map((t: Project) => ( - { - e.preventDefault(); - await put>( - `${Constants.ticketsURI}/${t.id}/closed`, - {} - ); - }} - /> - )) - )} -
    - + + + + +
    + {filteredTickets.length === 0 ? ( + + ) : ( + filteredTickets.map((t: Project) => ( + { + e.preventDefault(); + await put>( + `${Constants.ticketsURI}/${t.id}/closed`, + {} + ); + }} + /> + )) + )} +
    +     +     ); }; diff --git a/client/src/components/UserTabPanel.tsx b/client/src/components/UserTabPanel.tsx index 0164010..604dfb9 100644 --- a/client/src/components/UserTabPanel.tsx +++ b/client/src/components/UserTabPanel.tsx @@ -6,7 +6,6 @@ import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; import Typography from "@material-ui/core/Typography"; import Box from "@material-ui/core/Box"; -import { Header } from "./Header"; import { Ticket } from "../types/Ticket"; import { Project } from "../types/Project"; import { ProjectList } from "./ProjectList"; @@ -45,7 +44,7 @@ const a11yProps = (index: any) => { const useStyles = makeStyles((theme: Theme) => ({ root: { - backgroundColor: theme.palette.background.paper, + backgroundColor: "#ffffff", flexGrow: 1 } })); @@ -81,7 +80,7 @@ export const UserTabPanel: FC = ({ tickets, tabNames, projects }) => { aria-label="full width tabs example" > {tabNames.map((t: string, i: number) => ( - + ))} diff --git a/client/src/pages/Layout.tsx b/client/src/pages/Layout.tsx index f7e8a1e..91c8d23 100644 --- a/client/src/pages/Layout.tsx +++ b/client/src/pages/Layout.tsx @@ -1,5 +1,4 @@ -import React, { FC } from "react"; - +import React from "react"; import CssBaseline from "@material-ui/core/CssBaseline"; import { makeStyles } from "@material-ui/core/styles"; import { AppRouter } from "../utils/router"; @@ -21,16 +20,14 @@ const useStyles = makeStyles(theme => ({ export default function Layout() { const classes = useStyles(); return ( -
    -
    -
    - -
    - {/* */} - - -
    -
    +
    +
    + +
    + {/* */} + + +
    ); } diff --git a/client/src/pages/UserPage.tsx b/client/src/pages/UserPage.tsx index ea2df6c..6e4f9e4 100644 --- a/client/src/pages/UserPage.tsx +++ b/client/src/pages/UserPage.tsx @@ -1,7 +1,6 @@ import React, { FC } from "react"; import { UserVM } from "../VM/UserVM"; import { UserHeader } from "../components/UserHeader"; -import { UserTabRouter } from "../components/UserTabRouter"; import { UserTabPanel } from "../components/UserTabPanel"; import { Container } from "@material-ui/core"; diff --git a/client/src/utils/router.tsx b/client/src/utils/router.tsx index f0c5950..d2d63c8 100644 --- a/client/src/utils/router.tsx +++ b/client/src/utils/router.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { Router, Route, Switch } from "react-router-dom"; -import * as creacteHistory from "history"; +import { Route, Switch } from "react-router-dom"; + import { HomeController } from "../controllers/HomeController"; import { ProjectController } from "../controllers/ProjectController"; import { UserController } from "../controllers/UserController"; From 9e0a2f0d47242c297d86715d83cbcbcdf22da77b Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 3 Apr 2020 13:01:28 +0200 Subject: [PATCH 07/43] update ticketlist --- client/src/components/TicketList.tsx | 76 ++++++++++++++++------------ 1 file changed, 44 insertions(+), 32 deletions(-) diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx index 0910d8f..94fcfae 100644 --- a/client/src/components/TicketList.tsx +++ b/client/src/components/TicketList.tsx @@ -8,6 +8,7 @@ import { put } from "../utils/http"; import { Constants } from "../utils/Constants"; import { NewTicketModal } from "./NewTicketModal"; import { Project } from "../types/Project"; +import { Grid, Typography } from "@material-ui/core"; type TicketListProps = { tickets: Ticket[]; @@ -49,38 +50,49 @@ export const TicketList: FC = ({ show={showNew} allProjects={allProjects} /> -

    Tickets

    - {addButton && ( - - )} - -
    -
    -
      - {filteredTickets.length === 0 ? ( - - ) : ( - filteredTickets.map((t: Ticket) => ( - { - e.preventDefault(); - await put>( - `${Constants.ticketsURI}/${t.id}/closed`, - {} - ); - }} - /> - )) - )} -
    + + + + + Tickets + + + + {addButton && ( + + )} + + + + + +
    + {filteredTickets.length === 0 ? ( + + ) : ( + filteredTickets.map((t: Ticket) => ( + { + e.preventDefault(); + await put>( + `${Constants.ticketsURI}/${t.id}/closed`, + {} + ); + }} + /> + )) + )} +
    +     +
    ); From 70d1df1e05b8ef518f81f197f8d258ff01b94052 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 3 Apr 2020 13:11:57 +0200 Subject: [PATCH 08/43] update UserHeader --- client/src/components/UserHeader.tsx | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/client/src/components/UserHeader.tsx b/client/src/components/UserHeader.tsx index b2345d9..1a6a460 100644 --- a/client/src/components/UserHeader.tsx +++ b/client/src/components/UserHeader.tsx @@ -1,21 +1,34 @@ import React, { FC } from "react"; import { Header } from "../components/Header"; import { UserAvatar } from "./UserAvatar"; +import { Grid, makeStyles, createStyles, Theme } from "@material-ui/core"; +import classes from "*.module.css"; interface IProps { fullName: string; presentation: string; picture: string; } + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + margin: theme.spacing(1), + flexGrow: 1 + } +})); + export const UserHeader: FC = ({ fullName, presentation, picture }) => { + const classes = useStyles(); return ( -
    -
    - -
    -
    -
    -
    +
    + + + + + +
    + +
    ); }; From 12a8e9e289b7da084b740c9c802452986894cc66 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 3 Apr 2020 13:47:06 +0200 Subject: [PATCH 09/43] update InputFile; AppFileList --- client/src/components/AppFileList.tsx | 23 +++-- client/src/components/AvatarList.tsx | 2 +- client/src/components/InputFile.tsx | 55 +++++++++-- client/src/components/ProjectTabPanel.tsx | 110 ++++++++++++++++++++++ client/src/components/TicketList.tsx | 98 ++++++++++--------- client/src/pages/ProjectPage.tsx | 59 +++++++----- 6 files changed, 252 insertions(+), 95 deletions(-) create mode 100644 client/src/components/ProjectTabPanel.tsx diff --git a/client/src/components/AppFileList.tsx b/client/src/components/AppFileList.tsx index 6a05a64..ce15934 100644 --- a/client/src/components/AppFileList.tsx +++ b/client/src/components/AppFileList.tsx @@ -3,6 +3,7 @@ import { AppFile } from "../types/AppFile"; import { FileCollection } from "./FileCollection"; import { InputFile } from "./InputFile"; import { FilterBar } from "./FilterBar"; +import { Grid, Typography } from "@material-ui/core"; type IProps = { files: AppFile[]; @@ -18,14 +19,20 @@ export const FileList: FC = ({ files }) => { }; return ( <> -
    -

    Files

    - -
    + + + + Files + + + + + + diff --git a/client/src/components/AvatarList.tsx b/client/src/components/AvatarList.tsx index e13fef7..adc2eea 100644 --- a/client/src/components/AvatarList.tsx +++ b/client/src/components/AvatarList.tsx @@ -13,7 +13,7 @@ export const AvatarList: FC = ({ users }) => { <> ) : ( <> - + {users.map((user: User, i: number) => ( diff --git a/client/src/components/InputFile.tsx b/client/src/components/InputFile.tsx index 7e3418a..c4257e7 100644 --- a/client/src/components/InputFile.tsx +++ b/client/src/components/InputFile.tsx @@ -1,27 +1,62 @@ import React, { FC } from "react"; +import { CloudUpload } from "@material-ui/icons"; +import { makeStyles, createStyles, Theme } from "@material-ui/core/styles"; +import Button from "@material-ui/core/Button"; export const InputFile: FC = () => { return ( <>
    -
    - cloud_upload + + -
    -
    - -
    +
    ); }; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + "& > *": { + margin: theme.spacing(1) + } + }, + input: { + display: "none" + } + }) +); + +const UploadButton: FC = () => { + const classes = useStyles(); + + return ( +
    + + +
    + ); +}; diff --git a/client/src/components/ProjectTabPanel.tsx b/client/src/components/ProjectTabPanel.tsx new file mode 100644 index 0000000..f763a98 --- /dev/null +++ b/client/src/components/ProjectTabPanel.tsx @@ -0,0 +1,110 @@ +import React, { FC } from "react"; +import SwipeableViews from "react-swipeable-views"; +import { makeStyles, Theme, useTheme } from "@material-ui/core/styles"; +import AppBar from "@material-ui/core/AppBar"; +import Tabs from "@material-ui/core/Tabs"; +import Tab from "@material-ui/core/Tab"; +import Typography from "@material-ui/core/Typography"; +import Box from "@material-ui/core/Box"; +import { Ticket } from "../types/Ticket"; +import { Project } from "../types/Project"; +import { FileList } from "./AppFileList"; +import { TicketList } from "./TicketList"; +import { AppFile } from "../types/AppFile"; + +interface TabProps { + children?: React.ReactNode; + dir?: string; + index: any; + value: any; +} + +const TabPanel: FC = (props: TabProps) => { + const { children, value, index, ...other } = props; + + return ( + + ); +}; + +const a11yProps = (index: any) => { + return { + id: `full-width-tab-${index}`, + "aria-controls": `full-width-tabpanel-${index}` + }; +}; + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + backgroundColor: "#ffffff", + flexGrow: 1 + } +})); + +interface IProps { + tickets: Ticket[]; + remainingDays?: number; + tabNames: string[]; + files: AppFile[]; + // activities: Activity[]; + allProjects: Project[]; +} + +export const ProjectTabPanel: FC = ({ + tickets, + tabNames, + files + // allProjects +}) => { + const classes = useStyles(); + const theme = useTheme(); + const [value, setValue] = React.useState(0); + + const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => { + setValue(newValue); + }; + + const handleChangeIndex = (index: number) => { + setValue(index); + }; + + return ( +
    + + + {tabNames.map((t: string, i: number) => ( + + ))} + + + + + + + + + + +
    + ); +}; diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx index 94fcfae..d780d93 100644 --- a/client/src/components/TicketList.tsx +++ b/client/src/components/TicketList.tsx @@ -42,58 +42,56 @@ export const TicketList: FC = ({ ); return ( <> -
    - { - setShowNew(false); - }} - show={showNew} - allProjects={allProjects} - /> + { + setShowNew(false); + }} + show={showNew} + allProjects={allProjects} + /> - - - - Tickets - - - - {addButton && ( - - )} - - - - - -
    - {filteredTickets.length === 0 ? ( - - ) : ( - filteredTickets.map((t: Ticket) => ( - { - e.preventDefault(); - await put>( - `${Constants.ticketsURI}/${t.id}/closed`, - {} - ); - }} - /> - )) - )} -
    -     + + + + Tickets + -
    + + {addButton && ( + + )} + + + + + +
    + {filteredTickets.length === 0 ? ( + + ) : ( + filteredTickets.map((t: Ticket) => ( + { + e.preventDefault(); + await put>( + `${Constants.ticketsURI}/${t.id}/closed`, + {} + ); + }} + /> + )) + )} +
    +     + ); }; diff --git a/client/src/pages/ProjectPage.tsx b/client/src/pages/ProjectPage.tsx index f6c61fb..000603e 100644 --- a/client/src/pages/ProjectPage.tsx +++ b/client/src/pages/ProjectPage.tsx @@ -6,6 +6,8 @@ import { ProgressBar } from "../components/ProgressBar"; import { TabRouter } from "../components/TabRouter"; import { FloatingButton } from "../components/FloatingButton"; import { UsersModal } from "../components/UsersModal"; +import { Container, Grid } from "@material-ui/core"; +import { ProjectTabPanel } from "../components/ProjectTabPanel"; interface IProps { viewModel: ProjectVM; @@ -32,38 +34,43 @@ export const ProjectPage: FC = ({ viewModel }) => { const [showModal, setShowModal] = useState(false); return ( -
    -
    -
    -
    + +
    + setShowModal(false)} + /> + + + + + setShowModal(true)} /> - setShowModal(false)} - /> -
    - - -
    -
    + + + + + + + ); }; From 084f666ff17bfd92631589d8c818ce7bc580a032 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 3 Apr 2020 13:57:35 +0200 Subject: [PATCH 10/43] update FileCollection: File Entry --- client/src/components/FileCollection.tsx | 53 +++++++++++++++++------- 1 file changed, 38 insertions(+), 15 deletions(-) diff --git a/client/src/components/FileCollection.tsx b/client/src/components/FileCollection.tsx index 7f27d07..69237df 100644 --- a/client/src/components/FileCollection.tsx +++ b/client/src/components/FileCollection.tsx @@ -1,4 +1,13 @@ import React, { FC } from "react"; +import { createStyles, Theme, makeStyles } from "@material-ui/core/styles"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +import ListItemText from "@material-ui/core/ListItemText"; +import ListItemAvatar from "@material-ui/core/ListItemAvatar"; +import Avatar from "@material-ui/core/Avatar"; +import ImageIcon from "@material-ui/icons/Image"; +import WorkIcon from "@material-ui/icons/Work"; +import BeachAccessIcon from "@material-ui/icons/BeachAccess"; import { AppFile } from "../types/AppFile"; type IProps = { @@ -6,10 +15,21 @@ type IProps = { filterText: string; }; +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: "100%", + maxWidth: 360, + backgroundColor: theme.palette.background.paper + } + }) +); + export const FileCollection: FC = ({ files, filterText }) => { + const classes = useStyles(); return ( - <> -
      + + {files.length === 0 ? ( ) : ( @@ -21,8 +41,8 @@ export const FileCollection: FC = ({ files, filterText }) => { ) .map((file: AppFile) => ) )} -
    - + + ); }; @@ -32,16 +52,19 @@ type IFProps = { export const FileEntry: FC = ({ file }) => { return ( -
  • - {/* */} - folder - {file ? file.name : "Add your first file"} -

    - {file ? file.size : 0}kb {file ? file.format : "pdf"} -

    - - more_vert - -
    • + + + + + + + + ); }; + + + + + + From 95fa11e6057ab99e2ffb62e4e428ad1a5073d5fc Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 3 Apr 2020 14:23:37 +0200 Subject: [PATCH 11/43] update ProjectPage Layout --- client/src/components/FileCollection.tsx | 2 -- client/src/pages/ProjectPage.tsx | 31 ++++++++++++++++-------- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/client/src/components/FileCollection.tsx b/client/src/components/FileCollection.tsx index 69237df..f1738c8 100644 --- a/client/src/components/FileCollection.tsx +++ b/client/src/components/FileCollection.tsx @@ -28,7 +28,6 @@ const useStyles = makeStyles((theme: Theme) => export const FileCollection: FC = ({ files, filterText }) => { const classes = useStyles(); return ( - {files.length === 0 ? ( @@ -42,7 +41,6 @@ export const FileCollection: FC = ({ files, filterText }) => { .map((file: AppFile) => ) )} - ); }; diff --git a/client/src/pages/ProjectPage.tsx b/client/src/pages/ProjectPage.tsx index 000603e..707b06b 100644 --- a/client/src/pages/ProjectPage.tsx +++ b/client/src/pages/ProjectPage.tsx @@ -3,16 +3,22 @@ import ProjectVM from "../VM/ProjectVM"; import { Header } from "../components/Header"; import { AvatarList } from "../components/AvatarList"; import { ProgressBar } from "../components/ProgressBar"; -import { TabRouter } from "../components/TabRouter"; import { FloatingButton } from "../components/FloatingButton"; import { UsersModal } from "../components/UsersModal"; -import { Container, Grid } from "@material-ui/core"; +import { Container, Grid, makeStyles, Theme } from "@material-ui/core"; import { ProjectTabPanel } from "../components/ProjectTabPanel"; interface IProps { viewModel: ProjectVM; } +const useStyles = makeStyles((theme: Theme) => ({ + root: { + margin: theme.spacing(1), + flexGrow: 1 + } +})); + export const ProjectPage: FC = ({ viewModel }) => { const { // id, @@ -33,9 +39,13 @@ export const ProjectPage: FC = ({ viewModel }) => { const tabNames: string[] = ["Tickets", "Files"]; //, "Activity"]; const [showModal, setShowModal] = useState(false); + const classes = useStyles(); + return ( -
    +
    +
    +
    = ({ viewModel }) => { - - +
    + +
    Date: Fri, 3 Apr 2020 14:26:06 +0200 Subject: [PATCH 12/43] update ProjectPage Layout --- client/src/components/FileCollection.tsx | 49 +++++++++++------------- client/src/components/UserHeader.tsx | 3 +- client/src/pages/ProjectPage.tsx | 2 +- 3 files changed, 24 insertions(+), 30 deletions(-) diff --git a/client/src/components/FileCollection.tsx b/client/src/components/FileCollection.tsx index f1738c8..4f25ec3 100644 --- a/client/src/components/FileCollection.tsx +++ b/client/src/components/FileCollection.tsx @@ -5,9 +5,7 @@ import ListItem from "@material-ui/core/ListItem"; import ListItemText from "@material-ui/core/ListItemText"; import ListItemAvatar from "@material-ui/core/ListItemAvatar"; import Avatar from "@material-ui/core/Avatar"; -import ImageIcon from "@material-ui/icons/Image"; import WorkIcon from "@material-ui/icons/Work"; -import BeachAccessIcon from "@material-ui/icons/BeachAccess"; import { AppFile } from "../types/AppFile"; type IProps = { @@ -29,18 +27,18 @@ export const FileCollection: FC = ({ files, filterText }) => { const classes = useStyles(); return ( - {files.length === 0 ? ( - - ) : ( - files - .filter( - f => - f.name.toLowerCase().includes(filterText.toLowerCase()) || - f.format.toLowerCase().includes(filterText.toLowerCase()) - ) - .map((file: AppFile) => ) - )} - + {files.length === 0 ? ( + + ) : ( + files + .filter( + f => + f.name.toLowerCase().includes(filterText.toLowerCase()) || + f.format.toLowerCase().includes(filterText.toLowerCase()) + ) + .map((file: AppFile) => ) + )} + ); }; @@ -51,18 +49,15 @@ type IFProps = { export const FileEntry: FC = ({ file }) => { return ( - - - - - - - + + + + + + + ); }; - - - - - - diff --git a/client/src/components/UserHeader.tsx b/client/src/components/UserHeader.tsx index 1a6a460..e20555c 100644 --- a/client/src/components/UserHeader.tsx +++ b/client/src/components/UserHeader.tsx @@ -1,8 +1,7 @@ import React, { FC } from "react"; import { Header } from "../components/Header"; import { UserAvatar } from "./UserAvatar"; -import { Grid, makeStyles, createStyles, Theme } from "@material-ui/core"; -import classes from "*.module.css"; +import { Grid, makeStyles, Theme } from "@material-ui/core"; interface IProps { fullName: string; diff --git a/client/src/pages/ProjectPage.tsx b/client/src/pages/ProjectPage.tsx index 707b06b..6f09d7b 100644 --- a/client/src/pages/ProjectPage.tsx +++ b/client/src/pages/ProjectPage.tsx @@ -32,7 +32,7 @@ export const ProjectPage: FC = ({ viewModel }) => { ticketsTotalCount, remainingDays, files, - activities, + // activities, allProjects } = viewModel; From c5cb741b610603b8d1c81c930f6defcba02b8ce8 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 3 Apr 2020 15:13:33 +0200 Subject: [PATCH 13/43] update ticketPage Layout --- client/src/pages/TicketPage.tsx | 126 ++++++++++++++++++++++---------- 1 file changed, 88 insertions(+), 38 deletions(-) diff --git a/client/src/pages/TicketPage.tsx b/client/src/pages/TicketPage.tsx index df4f640..b31fe93 100644 --- a/client/src/pages/TicketPage.tsx +++ b/client/src/pages/TicketPage.tsx @@ -1,14 +1,41 @@ import React, { FC } from "react"; +import { Link } from "react-router-dom"; +import Table from "@material-ui/core/Table"; +import TableBody from "@material-ui/core/TableBody"; +import TableCell from "@material-ui/core/TableCell"; +import TableContainer from "@material-ui/core/TableContainer"; +import TableHead from "@material-ui/core/TableHead"; +import TableRow from "@material-ui/core/TableRow"; +import Paper from "@material-ui/core/Paper"; import { Header } from "../components/Header"; import { AvatarList } from "../components/AvatarList"; import { TicketVM } from "../VM/TicketVM"; import { getRemainingdays } from "../utils/methods"; -import { Link } from "react-router-dom"; + +import { + Container, + makeStyles, + Theme, + Grid, + Typography, + Chip +} from "@material-ui/core"; +import { Timer, InfoSharp } from "@material-ui/icons"; interface IProps { viewModel: TicketVM; } +const useStyles = makeStyles((theme: Theme) => ({ + root: { + margin: theme.spacing(1), + flexGrow: 1 + }, + table: { + minWidth: 650 + } +})); + export const TicketPage: FC = ({ viewModel }) => { const { title, @@ -23,48 +50,38 @@ export const TicketPage: FC = ({ viewModel }) => { } = viewModel; const daysToEnd: number = getRemainingdays(endingDate); // let notes: string = ""; + const classes = useStyles(); + const infos: InfoProps = { status, category, impact, difficulty }; return ( -
    -
    + +
    - +
    + -
    -
    -
    +
    + + + In project: {" "} {project.title} -
    -
    -
    - timer - Due in {daysToEnd} days -
    -
    + + + + Due in {daysToEnd} days + + +
    -
    -
    - Status: {status} - {/* close */} -
    - -
    - Category: {category} - {/* close */} -
    - -
    - Impact: {impact} - {/* close */} -
    - -
    - Difficulty: {difficulty} - {/* close */} -
    - - {/* */} -
    -
    + + ); +}; + +interface InfoProps { + status: string; + category: string; + impact: string; + difficulty: string; +} + +const InfoTable: FC = (info: InfoProps) => { + const classes = useStyles(); + + return ( + + + + + Status + Category + Impact + Difficulty + + + + + {info.status} + {info.category} + {info.impact} + {info.difficulty} + + +
    +     ); }; From 058d70cb444227b3fab457b9f544d74765379aa9 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 3 Apr 2020 16:28:52 +0200 Subject: [PATCH 14/43] add Private ROute component --- TicketManager.csproj | 7 +- client/src/App.tsx | 13 ++-- client/src/authentication/auth0.jsx | 90 ++++++++++++++++++++++ client/src/authentication/auth0.tsx | 112 ---------------------------- client/src/pages/TicketPage.tsx | 6 +- client/src/utils/PrivateRoute.jsx | 24 ++++++ client/src/utils/router.tsx | 5 +- 7 files changed, 127 insertions(+), 130 deletions(-) create mode 100644 client/src/authentication/auth0.jsx delete mode 100644 client/src/authentication/auth0.tsx create mode 100644 client/src/utils/PrivateRoute.jsx diff --git a/TicketManager.csproj b/TicketManager.csproj index 46c0c2f..d068f9e 100644 --- a/TicketManager.csproj +++ b/TicketManager.csproj @@ -14,9 +14,9 @@ - - - + + + runtime; build; native; contentfiles; analyzers; buildtransitive all @@ -24,7 +24,6 @@ - diff --git a/client/src/App.tsx b/client/src/App.tsx index f388612..caa2e47 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,11 +1,10 @@ import React from "react"; import { Router } from "react-router-dom"; -import * as createHistory from "history"; import Layout from "./pages/Layout"; import { useAuth0 } from "./authentication/auth0"; - +// import history from "./utils/history"; +import * as createHistory from "history"; export const history = createHistory.createBrowserHistory(); - export default function App() { const { loading } = useAuth0(); @@ -14,10 +13,8 @@ export default function App() { } return ( - <> - - - - + + + ); } diff --git a/client/src/authentication/auth0.jsx b/client/src/authentication/auth0.jsx new file mode 100644 index 0000000..aa5194a --- /dev/null +++ b/client/src/authentication/auth0.jsx @@ -0,0 +1,90 @@ +// src/react-auth0-spa.js +import React, { useState, useEffect, useContext } from "react"; +import createAuth0Client from "@auth0/auth0-spa-js"; + +const DEFAULT_REDIRECT_CALLBACK = () => + window.history.replaceState({}, document.title, window.location.pathname); + +export const Auth0Context = React.createContext(); +export const useAuth0 = () => useContext(Auth0Context); +export const Auth0Provider = ({ + children, + onRedirectCallback = DEFAULT_REDIRECT_CALLBACK, + ...initOptions +}) => { + const [isAuthenticated, setIsAuthenticated] = useState(); + const [user, setUser] = useState(); + const [auth0Client, setAuth0] = useState(); + const [loading, setLoading] = useState(true); + const [popupOpen, setPopupOpen] = useState(false); + + useEffect(() => { + const initAuth0 = async () => { + const auth0FromHook = await createAuth0Client(initOptions); + setAuth0(auth0FromHook); + + if ( + window.location.search.includes("code=") && + window.location.search.includes("state=") + ) { + const { appState } = await auth0FromHook.handleRedirectCallback(); + onRedirectCallback(appState); + } + + const isAuthenticated = await auth0FromHook.isAuthenticated(); + + setIsAuthenticated(isAuthenticated); + + if (isAuthenticated) { + const user = await auth0FromHook.getUser(); + setUser(user); + } + + setLoading(false); + }; + initAuth0(); + // eslint-disable-next-line + }, []); + + const loginWithPopup = async (params = {}) => { + setPopupOpen(true); + try { + await auth0Client.loginWithPopup(params); + } catch (error) { + console.error(error); + } finally { + setPopupOpen(false); + } + const user = await auth0Client.getUser(); + setUser(user); + setIsAuthenticated(true); + }; + + const handleRedirectCallback = async () => { + setLoading(true); + await auth0Client.handleRedirectCallback(); + const user = await auth0Client.getUser(); + setLoading(false); + setIsAuthenticated(true); + setUser(user); + }; + return ( + auth0Client.getIdTokenClaims(...p), + loginWithRedirect: (...p) => auth0Client.loginWithRedirect(...p), + getTokenSilently: (...p) => auth0Client.getTokenSilently(...p), + getTokenWithPopup: (...p) => auth0Client.getTokenWithPopup(...p), + logout: (...p) => auth0Client.logout(...p) + }} + > + {children} + + ); +}; diff --git a/client/src/authentication/auth0.tsx b/client/src/authentication/auth0.tsx deleted file mode 100644 index 6be8707..0000000 --- a/client/src/authentication/auth0.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import React, { useState, useEffect, useContext } from "react"; -import createAuth0Client from "@auth0/auth0-spa-js"; -import Auth0Client from "@auth0/auth0-spa-js/dist/typings/Auth0Client"; - -interface IAuth0Context { - isAuthenticated: boolean; - user: any; - loading: boolean; - popupOpen: boolean; - loginWithPopup(options: PopupLoginOptions): Promise; - handleRedirectCallback(): Promise; - getIdTokenClaims(o?: getIdTokenClaimsOptions): Promise; - loginWithRedirect(o: RedirectLoginOptions): Promise; - getTokenSilently(o?: GetTokenSilentlyOptions): Promise; - getTokenWithPopup(o?: GetTokenWithPopupOptions): Promise; - logout(o?: LogoutOptions): void; -} -export interface IAuth0ProviderOptions { - children: React.ReactElement; - onRedirectCallback?(result: RedirectLoginResult): void; -} - -const DEFAULT_REDIRECT_CALLBACK: () => void = () => - window.history.replaceState({}, document.title, window.location.pathname); - -export const Auth0Context: React.Context = React.createContext( - null -); -export const useAuth0: () => IAuth0Context = () => useContext(Auth0Context)!; -export const Auth0Provider = ({ - children, - onRedirectCallback = DEFAULT_REDIRECT_CALLBACK, - ...initOptions -}: IAuth0ProviderOptions & Auth0ClientOptions) => { - const [isAuthenticated, setIsAuthenticated] = useState(false); - const [user, setUser] = useState(); - const [auth0Client, setAuth0] = useState(); - const [loading, setLoading] = useState(true); - const [popupOpen, setPopupOpen] = useState(false); - - useEffect(() => { - const initAuth0 = async () => { - const auth0FromHook = await createAuth0Client(initOptions); - setAuth0(auth0FromHook); - - if (window.location.search.includes("code=")) { - const { appState } = await auth0FromHook.handleRedirectCallback(); - onRedirectCallback(appState); - } - - const isAuthenticated = await auth0FromHook.isAuthenticated(); - - setIsAuthenticated(isAuthenticated); - - if (isAuthenticated) { - const user = await auth0FromHook.getUser(); - setUser(user); - } - - setLoading(false); - }; - initAuth0(); - // eslint-disable-next-line - }, []); - - const loginWithPopup = async (o: PopupLoginOptions) => { - setPopupOpen(true); - try { - await auth0Client!.loginWithPopup(o); - } catch (error) { - console.error(error); - } finally { - setPopupOpen(false); - } - const user = await auth0Client!.getUser(); - setUser(user); - setIsAuthenticated(true); - }; - - const handleRedirectCallback = async () => { - setLoading(true); - const result = await auth0Client!.handleRedirectCallback(); - const user = await auth0Client!.getUser(); - setLoading(false); - setIsAuthenticated(true); - setUser(user); - return result; - }; - return ( - - auth0Client!.getIdTokenClaims(o), - loginWithRedirect: (o: RedirectLoginOptions) => - auth0Client!.loginWithRedirect(o), - getTokenSilently: (o: GetTokenSilentlyOptions | undefined) => - auth0Client!.getTokenSilently(o), - getTokenWithPopup: (o: GetTokenWithPopupOptions | undefined) => - auth0Client!.getTokenWithPopup(o), - logout: (o: LogoutOptions | undefined) => auth0Client!.logout(o) - }} - > - {children} - - ); -}; diff --git a/client/src/pages/TicketPage.tsx b/client/src/pages/TicketPage.tsx index b31fe93..7788dd2 100644 --- a/client/src/pages/TicketPage.tsx +++ b/client/src/pages/TicketPage.tsx @@ -17,10 +17,9 @@ import { makeStyles, Theme, Grid, - Typography, - Chip + Typography } from "@material-ui/core"; -import { Timer, InfoSharp } from "@material-ui/icons"; +import { Timer } from "@material-ui/icons"; interface IProps { viewModel: TicketVM; @@ -52,7 +51,6 @@ export const TicketPage: FC = ({ viewModel }) => { // let notes: string = ""; const classes = useStyles(); - const infos: InfoProps = { status, category, impact, difficulty }; return (
    diff --git a/client/src/utils/PrivateRoute.jsx b/client/src/utils/PrivateRoute.jsx new file mode 100644 index 0000000..61f1d4d --- /dev/null +++ b/client/src/utils/PrivateRoute.jsx @@ -0,0 +1,24 @@ +import React, { useEffect } from "react"; +import { Route } from "react-router-dom"; +import { useAuth0 } from "../authentication/auth0"; + +export const PrivateRoute = ({ component: Component, path, ...rest }) => { + const { loading, isAuthenticated, loginWithRedirect } = useAuth0(); + + useEffect(() => { + if (loading || isAuthenticated) { + return; + } + const fn = async () => { + await loginWithRedirect({ + appState: { targetUrl: window.location.pathname } + }); + }; + fn(); + }, [loading, isAuthenticated, loginWithRedirect, path]); + + const render = props => + isAuthenticated === true ? : null; + + return ; +}; diff --git a/client/src/utils/router.tsx b/client/src/utils/router.tsx index d2d63c8..2d56d19 100644 --- a/client/src/utils/router.tsx +++ b/client/src/utils/router.tsx @@ -7,13 +7,14 @@ import { UserController } from "../controllers/UserController"; import { TicketController } from "../controllers/TicketController"; import { NotFoundPage } from "../pages/NotFoundPage"; import { TestPage } from "../pages/TestPage"; +import { PrivateRoute } from "./PrivateRoute"; export const AppRouter = () => { return ( - + {/* - + */} From 382dc145c87276b72bd6a399075b7345e3b4029f Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 17 Apr 2020 08:24:36 +0200 Subject: [PATCH 15/43] Updated AvatarList component style --- client/src/components/AvatarList.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/client/src/components/AvatarList.tsx b/client/src/components/AvatarList.tsx index adc2eea..35d5f86 100644 --- a/client/src/components/AvatarList.tsx +++ b/client/src/components/AvatarList.tsx @@ -3,16 +3,27 @@ import { Link } from "react-router-dom"; import Avatar from "@material-ui/core/Avatar"; import AvatarGroup from "@material-ui/lab/AvatarGroup"; import { User } from "../types/User"; +import { makeStyles, Theme, createStyles } from "@material-ui/core"; interface AvatarListProps { users: User[]; } +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + marginLeft: theme.spacing(2), + marginRight: theme.spacing(2), + }, + }) +); + export const AvatarList: FC = ({ users }) => { + const classes = useStyles(); return users === undefined ? ( <> ) : ( - <> +
    {users.map((user: User, i: number) => ( @@ -20,6 +31,6 @@ export const AvatarList: FC = ({ users }) => { ))} - +
    ); }; From 880d7fafda5eccf28475b1ef387472a719d609f7 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 17 Apr 2020 08:54:08 +0200 Subject: [PATCH 16/43] Created MainLayout moved AppRouter to App --- app.db | Bin 106496 -> 106496 bytes client/src/App.tsx | 11 +++++-- .../Layout.tsx => layouts/MainLayout.tsx} | 29 +++++++++++------- 3 files changed, 26 insertions(+), 14 deletions(-) rename client/src/{pages/Layout.tsx => layouts/MainLayout.tsx} (50%) diff --git a/app.db b/app.db index ac293e3d5b4003ad6f335549ae5e1b627e48548d..41345a2109cb37a4f14a775d5ef5bbb5a8c65ee7 100644 GIT binary patch delta 64 zcmV-G0Kfl$zy^T82CxB;4Gv@g0}W6B4($!v4N$WY5JC+Dfd>SW-JLpVBo~kX delta 58 zcmV-A0LA}+zy^T82CxB;4G(t!0}a{$4($!v4rH?t5X=pe+MS97fd&K(lY5^zlZ~Ay QliZ&qgYBNT?VbS>0d&|F-T(jq diff --git a/client/src/App.tsx b/client/src/App.tsx index caa2e47..9415eaa 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,10 +1,13 @@ import React from "react"; import { Router } from "react-router-dom"; -import Layout from "./pages/Layout"; import { useAuth0 } from "./authentication/auth0"; -// import history from "./utils/history"; import * as createHistory from "history"; +// import history from "./utils/history"; +import MainLayout from "./layouts/MainLayout"; +import { AppRouter } from "./utils/router"; + export const history = createHistory.createBrowserHistory(); + export default function App() { const { loading } = useAuth0(); @@ -14,7 +17,9 @@ export default function App() { return ( - + + + ); } diff --git a/client/src/pages/Layout.tsx b/client/src/layouts/MainLayout.tsx similarity index 50% rename from client/src/pages/Layout.tsx rename to client/src/layouts/MainLayout.tsx index 91c8d23..abe0847 100644 --- a/client/src/pages/Layout.tsx +++ b/client/src/layouts/MainLayout.tsx @@ -1,23 +1,28 @@ -import React from "react"; +import React, { FC } from "react"; import CssBaseline from "@material-ui/core/CssBaseline"; import { makeStyles } from "@material-ui/core/styles"; -import { AppRouter } from "../utils/router"; import ButtonAppBar from "../components/ButtonAppBar"; import Footer from "../components/Footer"; -const useStyles = makeStyles(theme => ({ +/** + * @function useStyles creates the css styles used in the following component. + */ +const useStyles = makeStyles((theme) => ({ + // root style allow for fixed footer root: { display: "flex", flexDirection: "column", - minHeight: "100vh" + minHeight: "100vh", }, - main: { - marginTop: theme.spacing(8), - marginBottom: theme.spacing(2) - } })); -export default function Layout() { +/** + * MainLayout is the principal page layout. It mainly ensure the footer is fixed + * to the page bottom. + * + * @param children - The encapsulated component. + */ +const MainLayout: FC = ({ children }) => { const classes = useStyles(); return (
    @@ -26,8 +31,10 @@ export default function Layout() { {/* */} - + {children}
    ); -} +}; + +export default MainLayout; From 6dea3bf41c2d5747be0effc56739266711912c45 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 17 Apr 2020 09:40:49 +0200 Subject: [PATCH 17/43] Created PageLayout and wrapped Project/User/TicketPages --- client/src/layouts/PageLayout.tsx | 43 ++++++++++++++ client/src/pages/NotFoundPage.tsx | 9 ++- client/src/pages/ProjectPage.tsx | 99 +++++++++++++++++-------------- client/src/pages/TicketPage.tsx | 90 +++++++++++++++------------- client/src/pages/UserPage.tsx | 25 +++++--- 5 files changed, 167 insertions(+), 99 deletions(-) create mode 100644 client/src/layouts/PageLayout.tsx diff --git a/client/src/layouts/PageLayout.tsx b/client/src/layouts/PageLayout.tsx new file mode 100644 index 0000000..eee403a --- /dev/null +++ b/client/src/layouts/PageLayout.tsx @@ -0,0 +1,43 @@ +import React, { FC, ReactNode } from "react"; +import { makeStyles, Theme, Container } from "@material-ui/core"; + +/** + * @function useStyles creates the css styles used in the following component. + */ +const useStyles = makeStyles((theme: Theme) => ({ + // root style allow for fixed footer + header: { + margin: theme.spacing(1), + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), + flexGrow: 1, + }, + content: { + margin: theme.spacing(1), + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), + }, +})); + +interface IProps { + header: ReactNode; + content: ReactNode; +} + +/** + * PageLayout divide the page in 2 parts: Header and Content, to ensure cohesion. + * + * @param Header - The encapsulated component. + * @param Content - The encapsulated component. + */ +const PageLayout: FC = ({ header, content }) => { + const classes = useStyles(); + return ( + +
    {header}
    +
    {content}
    +     + ); +}; + +export default PageLayout; diff --git a/client/src/pages/NotFoundPage.tsx b/client/src/pages/NotFoundPage.tsx index a13397c..5b60c5e 100644 --- a/client/src/pages/NotFoundPage.tsx +++ b/client/src/pages/NotFoundPage.tsx @@ -1,10 +1,13 @@ import React, { FC } from "react"; +import PageLayout from "../layouts/PageLayout"; +import { Header } from "../components/Header"; interface IProps {} export const NotFoundPage: FC = () => { return ( -
    -

    error

    -
    + } + content={

    error

    } + /> ); }; diff --git a/client/src/pages/ProjectPage.tsx b/client/src/pages/ProjectPage.tsx index 6f09d7b..d43d0f6 100644 --- a/client/src/pages/ProjectPage.tsx +++ b/client/src/pages/ProjectPage.tsx @@ -1,12 +1,13 @@ import React, { FC, useState } from "react"; -import ProjectVM from "../VM/ProjectVM"; +import { Container, Grid, makeStyles, Theme } from "@material-ui/core"; import { Header } from "../components/Header"; import { AvatarList } from "../components/AvatarList"; import { ProgressBar } from "../components/ProgressBar"; import { FloatingButton } from "../components/FloatingButton"; import { UsersModal } from "../components/UsersModal"; -import { Container, Grid, makeStyles, Theme } from "@material-ui/core"; import { ProjectTabPanel } from "../components/ProjectTabPanel"; +import ProjectVM from "../VM/ProjectVM"; +import PageLayout from "../layouts/PageLayout"; interface IProps { viewModel: ProjectVM; @@ -15,8 +16,8 @@ interface IProps { const useStyles = makeStyles((theme: Theme) => ({ root: { margin: theme.spacing(1), - flexGrow: 1 - } + flexGrow: 1, + }, })); export const ProjectPage: FC = ({ viewModel }) => { @@ -33,7 +34,7 @@ export const ProjectPage: FC = ({ viewModel }) => { remainingDays, files, // activities, - allProjects + allProjects, } = viewModel; const tabNames: string[] = ["Tickets", "Files"]; //, "Activity"]; @@ -41,47 +42,53 @@ export const ProjectPage: FC = ({ viewModel }) => { const classes = useStyles(); - return ( - -
    -
    -
    - setShowModal(false)} - /> - - - - - - - setShowModal(true)} - /> - - - -
    - { + return ( + <> + setShowModal(false)} /> -
    - -     + + + + + + + setShowModal(true)} + /> + + + +
    + +
    + + + ); + }; + + return ( + } + content={} + /> ); }; diff --git a/client/src/pages/TicketPage.tsx b/client/src/pages/TicketPage.tsx index 7788dd2..2f4592d 100644 --- a/client/src/pages/TicketPage.tsx +++ b/client/src/pages/TicketPage.tsx @@ -17,9 +17,10 @@ import { makeStyles, Theme, Grid, - Typography + Typography, } from "@material-ui/core"; import { Timer } from "@material-ui/icons"; +import PageLayout from "../layouts/PageLayout"; interface IProps { viewModel: TicketVM; @@ -28,11 +29,11 @@ interface IProps { const useStyles = makeStyles((theme: Theme) => ({ root: { margin: theme.spacing(1), - flexGrow: 1 + flexGrow: 1, }, table: { - minWidth: 650 - } + minWidth: 650, + }, })); export const TicketPage: FC = ({ viewModel }) => { @@ -45,50 +46,55 @@ export const TicketPage: FC = ({ viewModel }) => { status, category, impact, - difficulty + difficulty, } = viewModel; const daysToEnd: number = getRemainingdays(endingDate); // let notes: string = ""; const classes = useStyles(); + const Content: FC = () => { + return ( + <> + + +
    + + + + In project: {" "} + {project.title} + + + + Due in {daysToEnd} days + + +
    + +
    + + {/* */} +
    + + ); + }; return ( - -
    -
    -
    - - -
    - - - - In project: {" "} - {project.title} - - - - Due in {daysToEnd} days - - -
    - -
    - - {/* */} -
    -     + } + content={} + /> ); }; diff --git a/client/src/pages/UserPage.tsx b/client/src/pages/UserPage.tsx index 6e4f9e4..0d0f3a9 100644 --- a/client/src/pages/UserPage.tsx +++ b/client/src/pages/UserPage.tsx @@ -3,6 +3,7 @@ import { UserVM } from "../VM/UserVM"; import { UserHeader } from "../components/UserHeader"; import { UserTabPanel } from "../components/UserTabPanel"; import { Container } from "@material-ui/core"; +import PageLayout from "../layouts/PageLayout"; interface IProps { viewModel: UserVM; @@ -13,13 +14,21 @@ export const UserPage: FC = ({ viewModel }) => { const tabNames: string[] = ["Projects", "Tickets"]; return ( - - - - + + } + content={ + + } + /> ); }; From 19f896f296118b1fdb3812fb50b7e34fa408657c Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 17 Apr 2020 10:09:31 +0200 Subject: [PATCH 18/43] Updated UserTabPanel UI --- client/src/components/UserHeader.tsx | 37 ++++++++++++++------------ client/src/components/UserTabPanel.tsx | 22 ++++++++------- client/src/layouts/MainLayout.tsx | 1 + client/src/layouts/PageLayout.tsx | 4 +-- client/src/pages/ProjectPage.tsx | 2 +- client/src/pages/TicketPage.tsx | 8 +----- client/src/pages/UserPage.tsx | 1 - client/src/utils/router.tsx | 3 --- 8 files changed, 38 insertions(+), 40 deletions(-) diff --git a/client/src/components/UserHeader.tsx b/client/src/components/UserHeader.tsx index e20555c..c57ae51 100644 --- a/client/src/components/UserHeader.tsx +++ b/client/src/components/UserHeader.tsx @@ -1,7 +1,10 @@ import React, { FC } from "react"; import { Header } from "../components/Header"; import { UserAvatar } from "./UserAvatar"; -import { Grid, makeStyles, Theme } from "@material-ui/core"; +import { + Grid, + // makeStyles, Theme +} from "@material-ui/core"; interface IProps { fullName: string; @@ -9,25 +12,25 @@ interface IProps { picture: string; } -const useStyles = makeStyles((theme: Theme) => ({ - root: { - margin: theme.spacing(1), - flexGrow: 1 - } -})); +// const useStyles = makeStyles((theme: Theme) => ({ +// root: { +// paddingTop: theme.spacing(2), +// flexGrow: 1, +// }, +// })); export const UserHeader: FC = ({ fullName, presentation, picture }) => { - const classes = useStyles(); + // const classes = useStyles(); return ( -
    - - - - - -
    - + //
    + + + -
    + +
    + + + //
    ); }; diff --git a/client/src/components/UserTabPanel.tsx b/client/src/components/UserTabPanel.tsx index 604dfb9..254185f 100644 --- a/client/src/components/UserTabPanel.tsx +++ b/client/src/components/UserTabPanel.tsx @@ -1,4 +1,4 @@ -import React, { FC } from "react"; +import React, { FC, useState, ReactNode } from "react"; import SwipeableViews from "react-swipeable-views"; import { makeStyles, Theme, useTheme } from "@material-ui/core/styles"; import AppBar from "@material-ui/core/AppBar"; @@ -12,7 +12,7 @@ import { ProjectList } from "./ProjectList"; import { TicketList } from "./TicketList"; interface TabProps { - children?: React.ReactNode; + children?: ReactNode; dir?: string; index: any; value: any; @@ -38,15 +38,15 @@ const TabPanel: FC = (props: TabProps) => { const a11yProps = (index: any) => { return { id: `full-width-tab-${index}`, - "aria-controls": `full-width-tabpanel-${index}` + "aria-controls": `full-width-tabpanel-${index}`, }; }; const useStyles = makeStyles((theme: Theme) => ({ root: { - backgroundColor: "#ffffff", - flexGrow: 1 - } + backgroundColor: "#E9ECEF", + borderRadius: "20px", + }, })); interface IProps { @@ -58,7 +58,7 @@ interface IProps { export const UserTabPanel: FC = ({ tickets, tabNames, projects }) => { const classes = useStyles(); const theme = useTheme(); - const [value, setValue] = React.useState(0); + const [value, setValue] = useState(0); const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => { setValue(newValue); @@ -70,14 +70,18 @@ export const UserTabPanel: FC = ({ tickets, tabNames, projects }) => { return (
    - + {tabNames.map((t: string, i: number) => ( diff --git a/client/src/layouts/MainLayout.tsx b/client/src/layouts/MainLayout.tsx index abe0847..9bc6507 100644 --- a/client/src/layouts/MainLayout.tsx +++ b/client/src/layouts/MainLayout.tsx @@ -13,6 +13,7 @@ const useStyles = makeStyles((theme) => ({ display: "flex", flexDirection: "column", minHeight: "100vh", + backgroundColor: "#f8f9fa", }, })); diff --git a/client/src/layouts/PageLayout.tsx b/client/src/layouts/PageLayout.tsx index eee403a..3c1c099 100644 --- a/client/src/layouts/PageLayout.tsx +++ b/client/src/layouts/PageLayout.tsx @@ -8,8 +8,8 @@ const useStyles = makeStyles((theme: Theme) => ({ // root style allow for fixed footer header: { margin: theme.spacing(1), - marginTop: theme.spacing(2), - marginBottom: theme.spacing(2), + paddingTop: theme.spacing(2), + paddingBottom: theme.spacing(2), flexGrow: 1, }, content: { diff --git a/client/src/pages/ProjectPage.tsx b/client/src/pages/ProjectPage.tsx index d43d0f6..32b8aed 100644 --- a/client/src/pages/ProjectPage.tsx +++ b/client/src/pages/ProjectPage.tsx @@ -1,5 +1,5 @@ import React, { FC, useState } from "react"; -import { Container, Grid, makeStyles, Theme } from "@material-ui/core"; +import { Grid, makeStyles, Theme } from "@material-ui/core"; import { Header } from "../components/Header"; import { AvatarList } from "../components/AvatarList"; import { ProgressBar } from "../components/ProgressBar"; diff --git a/client/src/pages/TicketPage.tsx b/client/src/pages/TicketPage.tsx index 2f4592d..aaa76ff 100644 --- a/client/src/pages/TicketPage.tsx +++ b/client/src/pages/TicketPage.tsx @@ -12,13 +12,7 @@ import { AvatarList } from "../components/AvatarList"; import { TicketVM } from "../VM/TicketVM"; import { getRemainingdays } from "../utils/methods"; -import { - Container, - makeStyles, - Theme, - Grid, - Typography, -} from "@material-ui/core"; +import { makeStyles, Theme, Grid, Typography } from "@material-ui/core"; import { Timer } from "@material-ui/icons"; import PageLayout from "../layouts/PageLayout"; diff --git a/client/src/pages/UserPage.tsx b/client/src/pages/UserPage.tsx index 0d0f3a9..f1228f8 100644 --- a/client/src/pages/UserPage.tsx +++ b/client/src/pages/UserPage.tsx @@ -2,7 +2,6 @@ import React, { FC } from "react"; import { UserVM } from "../VM/UserVM"; import { UserHeader } from "../components/UserHeader"; import { UserTabPanel } from "../components/UserTabPanel"; -import { Container } from "@material-ui/core"; import PageLayout from "../layouts/PageLayout"; interface IProps { diff --git a/client/src/utils/router.tsx b/client/src/utils/router.tsx index 2d56d19..1a316fe 100644 --- a/client/src/utils/router.tsx +++ b/client/src/utils/router.tsx @@ -1,13 +1,10 @@ import React from "react"; import { Route, Switch } from "react-router-dom"; - import { HomeController } from "../controllers/HomeController"; import { ProjectController } from "../controllers/ProjectController"; import { UserController } from "../controllers/UserController"; import { TicketController } from "../controllers/TicketController"; import { NotFoundPage } from "../pages/NotFoundPage"; -import { TestPage } from "../pages/TestPage"; -import { PrivateRoute } from "./PrivateRoute"; export const AppRouter = () => { return ( From 1ad15ed05c047d92cc64e7c5c631a32d3f819ce2 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 17 Apr 2020 10:12:44 +0200 Subject: [PATCH 19/43] Updated ProjectTabPanel UI --- client/src/components/ProjectTabPanel.tsx | 24 +++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/client/src/components/ProjectTabPanel.tsx b/client/src/components/ProjectTabPanel.tsx index f763a98..cd61703 100644 --- a/client/src/components/ProjectTabPanel.tsx +++ b/client/src/components/ProjectTabPanel.tsx @@ -1,4 +1,4 @@ -import React, { FC } from "react"; +import React, { FC, useState, ReactNode } from "react"; import SwipeableViews from "react-swipeable-views"; import { makeStyles, Theme, useTheme } from "@material-ui/core/styles"; import AppBar from "@material-ui/core/AppBar"; @@ -13,7 +13,7 @@ import { TicketList } from "./TicketList"; import { AppFile } from "../types/AppFile"; interface TabProps { - children?: React.ReactNode; + children?: ReactNode; dir?: string; index: any; value: any; @@ -39,15 +39,15 @@ const TabPanel: FC = (props: TabProps) => { const a11yProps = (index: any) => { return { id: `full-width-tab-${index}`, - "aria-controls": `full-width-tabpanel-${index}` + "aria-controls": `full-width-tabpanel-${index}`, }; }; const useStyles = makeStyles((theme: Theme) => ({ root: { - backgroundColor: "#ffffff", - flexGrow: 1 - } + backgroundColor: "#E9ECEF", + borderRadius: "20px", + }, })); interface IProps { @@ -62,12 +62,12 @@ interface IProps { export const ProjectTabPanel: FC = ({ tickets, tabNames, - files + files, // allProjects }) => { const classes = useStyles(); const theme = useTheme(); - const [value, setValue] = React.useState(0); + const [value, setValue] = useState(0); const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => { setValue(newValue); @@ -79,14 +79,18 @@ export const ProjectTabPanel: FC = ({ return (
    - + {tabNames.map((t: string, i: number) => ( From cef6fcb543d8fe9d9c809e6479d45083f852f0a9 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 17 Apr 2020 10:23:21 +0200 Subject: [PATCH 20/43] Set FilterBar background color to #fff --- README.md | 3 ++- client/src/components/FilterBar.tsx | 17 +++++++++++------ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index fb4ca2d..bb1b2e4 100644 --- a/README.md +++ b/README.md @@ -51,4 +51,5 @@ - [ ] use dtoRequest for PutProjects - [ ] render avatarlist after UserModal Update - [x] Form validators -- [ ] Azure +- [x] Azure +- [ ] Refactor TabPanels code diff --git a/client/src/components/FilterBar.tsx b/client/src/components/FilterBar.tsx index c42c1be..bae32cb 100644 --- a/client/src/components/FilterBar.tsx +++ b/client/src/components/FilterBar.tsx @@ -16,22 +16,25 @@ const useStyles = makeStyles((theme: Theme) => root: { "& > *": { margin: theme.spacing(1), - width: "25ch" - } + width: "25ch", + }, }, margin: { - margin: theme.spacing(1) - } + margin: theme.spacing(1), + }, + filter: { + backgroundColor: "#fff", + }, }) ); export const FilterBar: FC = ({ filterText, - handleChange + handleChange, // clearFilterText }) => { const { url } = useRouteMatch(); - const placeholder: string = url.split("/")[3] || "users"; + const placeholder: string = url.split("/")[3] || "elements"; const classes = useStyles(); return (
    @@ -44,6 +47,8 @@ export const FilterBar: FC = ({ size="small" value={filterText} onChange={handleChange} + color="primary" + className={classes.filter} /> From 9e7a1290c0a7358eb30d098e67dee3e088460a6f Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 17 Apr 2020 10:40:36 +0200 Subject: [PATCH 21/43] [UI] updated ProjectList --- client/src/components/ProjectList.tsx | 36 +++++++++++++++++++++------ 1 file changed, 28 insertions(+), 8 deletions(-) diff --git a/client/src/components/ProjectList.tsx b/client/src/components/ProjectList.tsx index e6bcf93..cc758e3 100644 --- a/client/src/components/ProjectList.tsx +++ b/client/src/components/ProjectList.tsx @@ -1,12 +1,26 @@ import React, { FC, useState, ChangeEvent, MouseEvent } from "react"; -import { Ticket } from "../types/Ticket"; +import { + Typography, + Grid, + makeStyles, + createStyles, + Theme, +} from "@material-ui/core"; import { HorizontalCard } from "./HorizontalCard"; import { FilterBar } from "./FilterBar"; -import { put } from "../utils/http"; -import { Constants } from "../utils/Constants"; +import { Ticket } from "../types/Ticket"; import { HttpResponse } from "../types/HttpResponse"; import { Project } from "../types/Project"; -import { Typography, Grid } from "@material-ui/core"; +import { put } from "../utils/http"; +import { Constants } from "../utils/Constants"; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + header: { + paddingBottom: theme.spacing(2), + }, + }) +); type IProps = { projects: Project[]; @@ -23,19 +37,25 @@ export const ProjectList: FC = ({ projects }) => { }; let filteredTickets = projects.filter( - t => + (t) => t.status !== "Done" && t.title.toLowerCase().includes(filterText.toLowerCase()) ); + const classes = useStyles(); + return ( - + Projects - - Date: Fri, 17 Apr 2020 10:44:16 +0200 Subject: [PATCH 22/43] [UI] updated TicketList --- README.md | 1 + client/src/components/TicketList.tsx | 43 +++++++++++++++++++++------- 2 files changed, 33 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index bb1b2e4..bf36f53 100644 --- a/README.md +++ b/README.md @@ -53,3 +53,4 @@ - [x] Form validators - [x] Azure - [ ] Refactor TabPanels code +- [ ] Refactor Lists code diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx index d780d93..edc4c9c 100644 --- a/client/src/components/TicketList.tsx +++ b/client/src/components/TicketList.tsx @@ -1,14 +1,28 @@ import React, { FC, useState, ChangeEvent, MouseEvent } from "react"; -import { Ticket } from "../types/Ticket"; +import { + Grid, + Typography, + makeStyles, + Theme, + createStyles, +} from "@material-ui/core"; import { FloatingButton } from "./FloatingButton"; import { HorizontalCard } from "./HorizontalCard"; import { FilterBar } from "./FilterBar"; import { HttpResponse } from "../types/HttpResponse"; -import { put } from "../utils/http"; -import { Constants } from "../utils/Constants"; +import { Ticket } from "../types/Ticket"; import { NewTicketModal } from "./NewTicketModal"; import { Project } from "../types/Project"; -import { Grid, Typography } from "@material-ui/core"; +import { put } from "../utils/http"; +import { Constants } from "../utils/Constants"; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + header: { + paddingBottom: theme.spacing(2), + }, + }) +); type TicketListProps = { tickets: Ticket[]; @@ -19,7 +33,7 @@ type TicketListProps = { export const TicketList: FC = ({ tickets, allProjects, - addButton = true + addButton = true, }) => { const [filterText, setFilterText] = useState(""); const clearFilterText = (e: MouseEvent): void => { @@ -36,10 +50,13 @@ export const TicketList: FC = ({ const [showNew, setShowNew] = useState(false); let filteredTickets = tickets.filter( - t => + (t) => t.status !== "Done" && t.title.toLowerCase().includes(filterText.toLowerCase()) ); + + const classes = useStyles(); + return ( <> = ({ /> - + Tickets - - + {addButton && ( )} - - + Date: Fri, 17 Apr 2020 10:58:25 +0200 Subject: [PATCH 23/43] [UI] updated TicketList. AddTicketButton --- client/src/components/ProjectTabPanel.tsx | 2 +- client/src/components/TicketList.tsx | 17 +++++++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/client/src/components/ProjectTabPanel.tsx b/client/src/components/ProjectTabPanel.tsx index cd61703..6f90e8f 100644 --- a/client/src/components/ProjectTabPanel.tsx +++ b/client/src/components/ProjectTabPanel.tsx @@ -103,7 +103,7 @@ export const ProjectTabPanel: FC = ({ onChangeIndex={handleChangeIndex} > - + diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx index edc4c9c..99d9e2e 100644 --- a/client/src/components/TicketList.tsx +++ b/client/src/components/TicketList.tsx @@ -21,6 +21,10 @@ const useStyles = makeStyles((theme: Theme) => header: { paddingBottom: theme.spacing(2), }, + addButton: { + position: "relative", + marginLeft: "20px", + }, }) ); @@ -77,12 +81,17 @@ export const TicketList: FC = ({ > Tickets + {addButton && ( + + + + )} - {addButton && ( - - )} - Date: Fri, 17 Apr 2020 11:59:31 +0200 Subject: [PATCH 24/43] HorizontalCard is a Layout; Created ProjectCard and TicketCard --- client/src/components/HorizontalCard.tsx | 44 ++++-------------- client/src/components/ProjectCard.tsx | 34 ++++++++++++++ client/src/components/ProjectList.tsx | 19 ++++---- client/src/components/TicketCard.tsx | 57 ++++++++++++++++++++++++ client/src/components/TicketList.tsx | 5 ++- 5 files changed, 112 insertions(+), 47 deletions(-) create mode 100644 client/src/components/ProjectCard.tsx create mode 100644 client/src/components/TicketCard.tsx diff --git a/client/src/components/HorizontalCard.tsx b/client/src/components/HorizontalCard.tsx index 6f0a7cc..8f5763a 100644 --- a/client/src/components/HorizontalCard.tsx +++ b/client/src/components/HorizontalCard.tsx @@ -1,4 +1,4 @@ -import React, { FC, MouseEvent } from "react"; +import React, { FC, MouseEvent, ReactNode } from "react"; import { Link } from "react-router-dom"; import { makeStyles } from "@material-ui/core/styles"; import Card from "@material-ui/core/Card"; @@ -10,33 +10,22 @@ import { getRemainingdays } from "../utils/methods"; interface IProps { title?: string; - remainingDays?: string; - validateTicket?: (event: MouseEvent) => void; link?: string; + content: ReactNode; + actions?: ReactNode; } const useStyles = makeStyles({ root: { - minWidth: 275 + minWidth: 275, }, - bullet: { - display: "inline-block", - margin: "0 2px", - transform: "scale(0.8)" - }, - title: { - fontSize: 14 - }, - pos: { - marginBottom: 12 - } }); export const HorizontalCard: FC = ({ title, - remainingDays, link = "#", - validateTicket + content, + actions, }) => { const classes = useStyles(); @@ -48,26 +37,9 @@ export const HorizontalCard: FC = ({ {title ?? "Nothing to do"} - - - - Due{" "} - {remainingDays ? ( - getRemainingdays(remainingDays) - ) : ( - - Too much 0 - - )}{" "} - days - - + {content} - - - + {actions} ); }; diff --git a/client/src/components/ProjectCard.tsx b/client/src/components/ProjectCard.tsx new file mode 100644 index 0000000..802f8de --- /dev/null +++ b/client/src/components/ProjectCard.tsx @@ -0,0 +1,34 @@ +import React, { FC, MouseEvent } from "react"; +import { HorizontalCard } from "./HorizontalCard"; +import { Typography } from "@material-ui/core"; +import { getRemainingdays } from "../utils/methods"; + +interface IProps { + title?: string; + remainingDays?: string; + link?: string; +} + +const ProjectCard: FC = ({ title, remainingDays, link = "#" }) => { + const Content: FC = () => { + return ( + + + Due{" "} + {remainingDays ? ( + getRemainingdays(remainingDays) + ) : ( + + Too much 0 + + )}{" "} + days + + + ); + }; + + return } />; +}; + +export default ProjectCard; diff --git a/client/src/components/ProjectList.tsx b/client/src/components/ProjectList.tsx index cc758e3..8fb8af7 100644 --- a/client/src/components/ProjectList.tsx +++ b/client/src/components/ProjectList.tsx @@ -13,6 +13,7 @@ import { HttpResponse } from "../types/HttpResponse"; import { Project } from "../types/Project"; import { put } from "../utils/http"; import { Constants } from "../utils/Constants"; +import ProjectCard from "./ProjectCard"; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -65,21 +66,21 @@ export const ProjectList: FC = ({ projects }) => {
    {filteredTickets.length === 0 ? ( - + ) : ( filteredTickets.map((t: Project) => ( - { - e.preventDefault(); - await put>( - `${Constants.ticketsURI}/${t.id}/closed`, - {} - ); - }} + // validateTicket={async (e: MouseEvent) => { + // e.preventDefault(); + // await put>( + // `${Constants.ticketsURI}/${t.id}/closed`, + // {} + // ); + // }} /> )) )} diff --git a/client/src/components/TicketCard.tsx b/client/src/components/TicketCard.tsx new file mode 100644 index 0000000..f1130f6 --- /dev/null +++ b/client/src/components/TicketCard.tsx @@ -0,0 +1,57 @@ +import React, { FC, MouseEvent } from "react"; +import { HorizontalCard } from "./HorizontalCard"; +import { Button, Typography } from "@material-ui/core"; +import { getRemainingdays } from "../utils/methods"; + +interface IProps { + title?: string; + remainingDays?: string; + validateTicket?: (event: MouseEvent) => void; + link?: string; +} + +const TicketCard: FC = ({ + title, + remainingDays, + link = "#", + validateTicket, +}) => { + const Content: FC = () => { + return ( + + + Due{" "} + {remainingDays ? ( + getRemainingdays(remainingDays) + ) : ( + + Too much 0 + + )}{" "} + days + + + ); + }; + + const Action = () => { + return ( + <> + + + ); + }; + + return ( + } + actions={} + /> + ); +}; + +export default TicketCard; diff --git a/client/src/components/TicketList.tsx b/client/src/components/TicketList.tsx index 99d9e2e..87630f9 100644 --- a/client/src/components/TicketList.tsx +++ b/client/src/components/TicketList.tsx @@ -15,6 +15,7 @@ import { NewTicketModal } from "./NewTicketModal"; import { Project } from "../types/Project"; import { put } from "../utils/http"; import { Constants } from "../utils/Constants"; +import TicketCard from "./TicketCard"; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -101,10 +102,10 @@ export const TicketList: FC = ({
    {filteredTickets.length === 0 ? ( - + ) : ( filteredTickets.map((t: Ticket) => ( - Date: Fri, 17 Apr 2020 12:51:34 +0200 Subject: [PATCH 25/43] Splitted ProgressBar and Info into 2 components; add progress bar to horizontal card top --- README.md | 1 + client/src/components/HorizontalCard.tsx | 6 ++- client/src/components/ProgressBar.tsx | 50 ++++++-------------- client/src/components/ProgressInfo.tsx | 42 +++++++++++++++++ client/src/components/ProjectCard.tsx | 60 +++++++++++++++++------- client/src/components/ProjectList.tsx | 22 +++------ client/src/pages/ProjectPage.tsx | 5 +- 7 files changed, 114 insertions(+), 72 deletions(-) create mode 100644 client/src/components/ProgressInfo.tsx diff --git a/README.md b/README.md index bf36f53..887ea1b 100644 --- a/README.md +++ b/README.md @@ -54,3 +54,4 @@ - [x] Azure - [ ] Refactor TabPanels code - [ ] Refactor Lists code +- [ ] Query project members in UserPage diff --git a/client/src/components/HorizontalCard.tsx b/client/src/components/HorizontalCard.tsx index 8f5763a..1ba66a4 100644 --- a/client/src/components/HorizontalCard.tsx +++ b/client/src/components/HorizontalCard.tsx @@ -4,13 +4,13 @@ import { makeStyles } from "@material-ui/core/styles"; import Card from "@material-ui/core/Card"; import CardActions from "@material-ui/core/CardActions"; import CardContent from "@material-ui/core/CardContent"; -import Button from "@material-ui/core/Button"; import Typography from "@material-ui/core/Typography"; -import { getRemainingdays } from "../utils/methods"; +import { ProgressBar } from "./ProgressBar"; interface IProps { title?: string; link?: string; + progress?: number; content: ReactNode; actions?: ReactNode; } @@ -26,11 +26,13 @@ export const HorizontalCard: FC = ({ link = "#", content, actions, + progress = 0, }) => { const classes = useStyles(); return ( + diff --git a/client/src/components/ProgressBar.tsx b/client/src/components/ProgressBar.tsx index 86d95cf..ef1a8da 100644 --- a/client/src/components/ProgressBar.tsx +++ b/client/src/components/ProgressBar.tsx @@ -6,10 +6,6 @@ import { PlaylistAddCheck } from "@material-ui/icons"; type IProps = { value: number; - max?: number; - tasksTotalCount?: number; - tasksDone?: number; - remainingDays?: number; }; const useStyles = makeStyles((theme: Theme) => @@ -17,19 +13,13 @@ const useStyles = makeStyles((theme: Theme) => root: { width: "100%", "& > * + *": { - marginTop: theme.spacing(2) - } - } + marginTop: theme.spacing(2), + }, + }, }) ); -export const ProgressBar: FC = ({ - value, - // max = 100, - tasksDone, - tasksTotalCount, - remainingDays -}) => { +export const ProgressBar: FC = ({ value }) => { // const styleString: CSSProperties = { width: `${value}%` }; // let barColor: string = "green"; @@ -46,27 +36,17 @@ export const ProgressBar: FC = ({ const classes = useStyles(); return ( - <> -
    - -
    - - {/* */} -
    -     - {/*
    -
    -
    */} - - - - {tasksDone}/{tasksTotalCount} - - - Due {remainingDays} days - - + +
    + + {/* */}
    - +     ); }; + +{ + /*
    +
    +
    */ +} diff --git a/client/src/components/ProgressInfo.tsx b/client/src/components/ProgressInfo.tsx new file mode 100644 index 0000000..0faadc4 --- /dev/null +++ b/client/src/components/ProgressInfo.tsx @@ -0,0 +1,42 @@ +import React, { FC } from "react"; +import { makeStyles, Theme, createStyles } from "@material-ui/core/styles"; +import LinearProgress from "@material-ui/core/LinearProgress"; +import { Box } from "@material-ui/core"; +import { PlaylistAddCheck } from "@material-ui/icons"; + +type IProps = { + tasksTotalCount?: number; + tasksDone?: number; + remainingDays?: number; +}; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: "100%", + "& > * + *": { + marginTop: theme.spacing(2), + }, + }, + }) +); + +export const ProgressInfo: FC = ({ + tasksDone, + tasksTotalCount, + remainingDays, +}) => { + const classes = useStyles(); + + return ( + + + + {tasksDone}/{tasksTotalCount} + + + Due {remainingDays} days + + + ); +}; diff --git a/client/src/components/ProjectCard.tsx b/client/src/components/ProjectCard.tsx index 802f8de..bc9a1ef 100644 --- a/client/src/components/ProjectCard.tsx +++ b/client/src/components/ProjectCard.tsx @@ -1,34 +1,60 @@ -import React, { FC, MouseEvent } from "react"; +import React, { FC } from "react"; import { HorizontalCard } from "./HorizontalCard"; -import { Typography } from "@material-ui/core"; +import { Typography, makeStyles, Theme, createStyles } from "@material-ui/core"; import { getRemainingdays } from "../utils/methods"; +import { User } from "../types/User"; +import { AvatarList } from "./AvatarList"; +import { ProgressBar } from "./ProgressBar"; +import { ProgressInfo } from "./ProgressInfo"; interface IProps { title?: string; remainingDays?: string; link?: string; + members?: User[]; + progress?: number; } -const ProjectCard: FC = ({ title, remainingDays, link = "#" }) => { +const useStyles = makeStyles((theme: Theme) => + createStyles({ + progress: { + paddingTop: theme.spacing(4), + paddingBottom: theme.spacing(4), + }, + }) +); + +const ProjectCard: FC = ({ + title, + remainingDays, + link = "#", + members, + progress = 0, +}) => { + const classes = useStyles(); + const Content: FC = () => { return ( - - - Due{" "} - {remainingDays ? ( - getRemainingdays(remainingDays) - ) : ( - - Too much 0 - - )}{" "} - days - - + <> + {members && } +
    + {/* + Progression: + */} + +
    + ); }; - return } />; + return ( + } + progress={progress} + /> + ); }; export default ProjectCard; diff --git a/client/src/components/ProjectList.tsx b/client/src/components/ProjectList.tsx index 8fb8af7..d9720b6 100644 --- a/client/src/components/ProjectList.tsx +++ b/client/src/components/ProjectList.tsx @@ -6,14 +6,9 @@ import { createStyles, Theme, } from "@material-ui/core"; -import { HorizontalCard } from "./HorizontalCard"; import { FilterBar } from "./FilterBar"; -import { Ticket } from "../types/Ticket"; -import { HttpResponse } from "../types/HttpResponse"; -import { Project } from "../types/Project"; -import { put } from "../utils/http"; -import { Constants } from "../utils/Constants"; import ProjectCard from "./ProjectCard"; +import { Project } from "../types/Project"; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -37,7 +32,7 @@ export const ProjectList: FC = ({ projects }) => { setFilterText(e.target.value); }; - let filteredTickets = projects.filter( + let filteredProjects = projects.filter( (t) => t.status !== "Done" && t.title.toLowerCase().includes(filterText.toLowerCase()) @@ -65,22 +60,17 @@ export const ProjectList: FC = ({ projects }) => {
    - {filteredTickets.length === 0 ? ( + {filteredProjects.length === 0 ? ( ) : ( - filteredTickets.map((t: Project) => ( + filteredProjects.map((t: Project) => ( { - // e.preventDefault(); - // await put>( - // `${Constants.ticketsURI}/${t.id}/closed`, - // {} - // ); - // }} + members={t.users} + progress={t.progression} /> )) )} diff --git a/client/src/pages/ProjectPage.tsx b/client/src/pages/ProjectPage.tsx index 32b8aed..ee3cea3 100644 --- a/client/src/pages/ProjectPage.tsx +++ b/client/src/pages/ProjectPage.tsx @@ -8,6 +8,7 @@ import { UsersModal } from "../components/UsersModal"; import { ProjectTabPanel } from "../components/ProjectTabPanel"; import ProjectVM from "../VM/ProjectVM"; import PageLayout from "../layouts/PageLayout"; +import { ProgressInfo } from "../components/ProgressInfo"; interface IProps { viewModel: ProjectVM; @@ -67,8 +68,8 @@ export const ProjectPage: FC = ({ viewModel }) => {
    - + Date: Fri, 17 Apr 2020 13:01:23 +0200 Subject: [PATCH 26/43] [UI] updated ProjectCard --- README.md | 1 + client/src/components/ProjectCard.tsx | 10 +++------- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 887ea1b..cec96d4 100644 --- a/README.md +++ b/README.md @@ -55,3 +55,4 @@ - [ ] Refactor TabPanels code - [ ] Refactor Lists code - [ ] Query project members in UserPage +- [ ] Query progression info in UserPage diff --git a/client/src/components/ProjectCard.tsx b/client/src/components/ProjectCard.tsx index bc9a1ef..600767c 100644 --- a/client/src/components/ProjectCard.tsx +++ b/client/src/components/ProjectCard.tsx @@ -18,15 +18,14 @@ interface IProps { const useStyles = makeStyles((theme: Theme) => createStyles({ progress: { - paddingTop: theme.spacing(4), - paddingBottom: theme.spacing(4), + paddingTop: theme.spacing(2), }, }) ); const ProjectCard: FC = ({ title, - remainingDays, + remainingDays = "", link = "#", members, progress = 0, @@ -38,10 +37,7 @@ const ProjectCard: FC = ({ <> {members && }
    - {/* - Progression: - */} - +
    ); From 3bf705f0363d4289c70d1356c2cb573318543ccb Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 17 Apr 2020 14:07:33 +0200 Subject: [PATCH 27/43] Prepared for tcikets info --- client/src/components/ProjectCard.tsx | 10 +++++++++- client/src/components/ProjectList.tsx | 6 ++++++ client/src/components/ProjectTabPanel.tsx | 4 ++-- client/src/pages/ProjectPage.tsx | 2 +- 4 files changed, 18 insertions(+), 4 deletions(-) diff --git a/client/src/components/ProjectCard.tsx b/client/src/components/ProjectCard.tsx index 600767c..004a6a1 100644 --- a/client/src/components/ProjectCard.tsx +++ b/client/src/components/ProjectCard.tsx @@ -13,6 +13,8 @@ interface IProps { link?: string; members?: User[]; progress?: number; + ticketsNumber?: number; + ticketsDone?: number; } const useStyles = makeStyles((theme: Theme) => @@ -29,6 +31,8 @@ const ProjectCard: FC = ({ link = "#", members, progress = 0, + ticketsNumber, + ticketsDone, }) => { const classes = useStyles(); @@ -37,7 +41,11 @@ const ProjectCard: FC = ({ <> {members && }
    - +
    ); diff --git a/client/src/components/ProjectList.tsx b/client/src/components/ProjectList.tsx index d9720b6..878b5f2 100644 --- a/client/src/components/ProjectList.tsx +++ b/client/src/components/ProjectList.tsx @@ -71,6 +71,12 @@ export const ProjectList: FC = ({ projects }) => { link={`/projects/${t.id}`} members={t.users} progress={t.progression} + ticketsNumber={t.tickets === undefined ? 0 : t.tickets.length} + ticketsDone={ + t.tickets === undefined + ? 0 + : t.tickets.filter((t) => t.status === "Done").length + } /> )) )} diff --git a/client/src/components/ProjectTabPanel.tsx b/client/src/components/ProjectTabPanel.tsx index 6f90e8f..7d241c3 100644 --- a/client/src/components/ProjectTabPanel.tsx +++ b/client/src/components/ProjectTabPanel.tsx @@ -105,9 +105,9 @@ export const ProjectTabPanel: FC = ({ - + {/* - + */}
    ); diff --git a/client/src/pages/ProjectPage.tsx b/client/src/pages/ProjectPage.tsx index ee3cea3..91f28a7 100644 --- a/client/src/pages/ProjectPage.tsx +++ b/client/src/pages/ProjectPage.tsx @@ -38,7 +38,7 @@ export const ProjectPage: FC = ({ viewModel }) => { allProjects, } = viewModel; - const tabNames: string[] = ["Tickets", "Files"]; //, "Activity"]; + const tabNames: string[] = ["Tickets"]; //, "Files", "Activity"]; const [showModal, setShowModal] = useState(false); const classes = useStyles(); From 2b449e651c884e7f3e8bafdcc7064df3c3bee163 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 17 Apr 2020 14:14:00 +0200 Subject: [PATCH 28/43] [UI] updated Progress INfoBar on projectpage --- client/src/pages/ProjectPage.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/client/src/pages/ProjectPage.tsx b/client/src/pages/ProjectPage.tsx index 91f28a7..93044cb 100644 --- a/client/src/pages/ProjectPage.tsx +++ b/client/src/pages/ProjectPage.tsx @@ -16,7 +16,8 @@ interface IProps { const useStyles = makeStyles((theme: Theme) => ({ root: { - margin: theme.spacing(1), + marginTop: theme.spacing(4), + marginBottom: theme.spacing(4), flexGrow: 1, }, })); @@ -54,10 +55,15 @@ export const ProjectPage: FC = ({ viewModel }) => { /> - + - - + {/* + */} Date: Fri, 17 Apr 2020 14:27:03 +0200 Subject: [PATCH 29/43] [chore]: Components folder organisation --- .../components/{ => Avatars}/AvatarList.tsx | 2 +- .../components/{ => Avatars}/UserAvatar.tsx | 0 .../src/components/{ => Buttons}/Button.tsx | 0 .../{ => Buttons}/FloatingButton.tsx | 0 .../components/{ => Cards}/HorizontalCard.tsx | 4 +-- .../components/{ => Cards}/ProjectCard.tsx | 11 ++++---- .../src/components/{ => Cards}/TicketCard.tsx | 2 +- .../components/{ => Lists}/ActivityList.tsx | 6 ++--- .../components/{ => Lists}/AppFileList.tsx | 8 +++--- .../src/components/{ => Lists}/MemberList.tsx | 6 ++--- .../components/{ => Lists}/ProjectList.tsx | 6 ++--- .../src/components/{ => Lists}/TicketList.tsx | 19 +++++++------- client/src/components/LogInForm.tsx | 2 +- client/src/components/{ => Modals}/Modal.tsx | 0 .../{ => Modals}/NewTicketModal.tsx | 14 +++++------ .../components/{ => Modals}/UsersModal.tsx | 14 +++++------ .../{ => Modals}/UsersModalEntry.tsx | 6 ++--- .../{ => Panels}/ProjectTabPanel.tsx | 12 ++++----- .../src/components/{ => Panels}/TabRouter.tsx | 14 +++++------ .../{ => Panels}/TabRouterHeader.tsx | 0 .../components/{ => Panels}/UserTabPanel.tsx | 8 +++--- .../components/{ => Panels}/UserTabRouter.tsx | 8 +++--- client/src/components/ProfileSelector.tsx | 2 +- .../components/{ => Progress}/ProgressBar.tsx | 7 ------ .../{ => Progress}/ProgressInfo.tsx | 25 +++++++++---------- client/src/components/UserHeader.tsx | 2 +- client/src/pages/ProjectPage.tsx | 14 +++++------ client/src/pages/TicketPage.tsx | 2 +- client/src/pages/UserPage.tsx | 2 +- 29 files changed, 92 insertions(+), 104 deletions(-) rename client/src/components/{ => Avatars}/AvatarList.tsx (95%) rename client/src/components/{ => Avatars}/UserAvatar.tsx (100%) rename client/src/components/{ => Buttons}/Button.tsx (100%) rename client/src/components/{ => Buttons}/FloatingButton.tsx (100%) rename client/src/components/{ => Cards}/HorizontalCard.tsx (90%) rename client/src/components/{ => Cards}/ProjectCard.tsx (78%) rename client/src/components/{ => Cards}/TicketCard.tsx (95%) rename client/src/components/{ => Lists}/ActivityList.tsx (83%) rename client/src/components/{ => Lists}/AppFileList.tsx (83%) rename client/src/components/{ => Lists}/MemberList.tsx (86%) rename client/src/components/{ => Lists}/ProjectList.tsx (93%) rename client/src/components/{ => Lists}/TicketList.tsx (86%) rename client/src/components/{ => Modals}/Modal.tsx (100%) rename client/src/components/{ => Modals}/NewTicketModal.tsx (88%) rename client/src/components/{ => Modals}/UsersModal.tsx (88%) rename client/src/components/{ => Modals}/UsersModalEntry.tsx (84%) rename client/src/components/{ => Panels}/ProjectTabPanel.tsx (92%) rename client/src/components/{ => Panels}/TabRouter.tsx (76%) rename client/src/components/{ => Panels}/TabRouterHeader.tsx (100%) rename client/src/components/{ => Panels}/UserTabPanel.tsx (93%) rename client/src/components/{ => Panels}/UserTabRouter.tsx (80%) rename client/src/components/{ => Progress}/ProgressBar.tsx (85%) rename client/src/components/{ => Progress}/ProgressInfo.tsx (61%) diff --git a/client/src/components/AvatarList.tsx b/client/src/components/Avatars/AvatarList.tsx similarity index 95% rename from client/src/components/AvatarList.tsx rename to client/src/components/Avatars/AvatarList.tsx index 35d5f86..5c1cf8a 100644 --- a/client/src/components/AvatarList.tsx +++ b/client/src/components/Avatars/AvatarList.tsx @@ -2,7 +2,7 @@ import React, { FC } from "react"; import { Link } from "react-router-dom"; import Avatar from "@material-ui/core/Avatar"; import AvatarGroup from "@material-ui/lab/AvatarGroup"; -import { User } from "../types/User"; +import { User } from "../../types/User"; import { makeStyles, Theme, createStyles } from "@material-ui/core"; interface AvatarListProps { diff --git a/client/src/components/UserAvatar.tsx b/client/src/components/Avatars/UserAvatar.tsx similarity index 100% rename from client/src/components/UserAvatar.tsx rename to client/src/components/Avatars/UserAvatar.tsx diff --git a/client/src/components/Button.tsx b/client/src/components/Buttons/Button.tsx similarity index 100% rename from client/src/components/Button.tsx rename to client/src/components/Buttons/Button.tsx diff --git a/client/src/components/FloatingButton.tsx b/client/src/components/Buttons/FloatingButton.tsx similarity index 100% rename from client/src/components/FloatingButton.tsx rename to client/src/components/Buttons/FloatingButton.tsx diff --git a/client/src/components/HorizontalCard.tsx b/client/src/components/Cards/HorizontalCard.tsx similarity index 90% rename from client/src/components/HorizontalCard.tsx rename to client/src/components/Cards/HorizontalCard.tsx index 1ba66a4..d93c223 100644 --- a/client/src/components/HorizontalCard.tsx +++ b/client/src/components/Cards/HorizontalCard.tsx @@ -1,11 +1,11 @@ -import React, { FC, MouseEvent, ReactNode } from "react"; +import React, { FC, ReactNode } from "react"; import { Link } from "react-router-dom"; import { makeStyles } from "@material-ui/core/styles"; import Card from "@material-ui/core/Card"; import CardActions from "@material-ui/core/CardActions"; import CardContent from "@material-ui/core/CardContent"; import Typography from "@material-ui/core/Typography"; -import { ProgressBar } from "./ProgressBar"; +import { ProgressBar } from "../Progress/ProgressBar"; interface IProps { title?: string; diff --git a/client/src/components/ProjectCard.tsx b/client/src/components/Cards/ProjectCard.tsx similarity index 78% rename from client/src/components/ProjectCard.tsx rename to client/src/components/Cards/ProjectCard.tsx index 004a6a1..3f3fe9a 100644 --- a/client/src/components/ProjectCard.tsx +++ b/client/src/components/Cards/ProjectCard.tsx @@ -1,11 +1,10 @@ import React, { FC } from "react"; import { HorizontalCard } from "./HorizontalCard"; -import { Typography, makeStyles, Theme, createStyles } from "@material-ui/core"; -import { getRemainingdays } from "../utils/methods"; -import { User } from "../types/User"; -import { AvatarList } from "./AvatarList"; -import { ProgressBar } from "./ProgressBar"; -import { ProgressInfo } from "./ProgressInfo"; +import { makeStyles, Theme, createStyles } from "@material-ui/core"; +import { AvatarList } from "../Avatars/AvatarList"; +import { ProgressInfo } from "../Progress/ProgressInfo"; +import { User } from "../../types/User"; +import { getRemainingdays } from "../../utils/methods"; interface IProps { title?: string; diff --git a/client/src/components/TicketCard.tsx b/client/src/components/Cards/TicketCard.tsx similarity index 95% rename from client/src/components/TicketCard.tsx rename to client/src/components/Cards/TicketCard.tsx index f1130f6..5447449 100644 --- a/client/src/components/TicketCard.tsx +++ b/client/src/components/Cards/TicketCard.tsx @@ -1,7 +1,7 @@ import React, { FC, MouseEvent } from "react"; import { HorizontalCard } from "./HorizontalCard"; import { Button, Typography } from "@material-ui/core"; -import { getRemainingdays } from "../utils/methods"; +import { getRemainingdays } from "../../utils/methods"; interface IProps { title?: string; diff --git a/client/src/components/ActivityList.tsx b/client/src/components/Lists/ActivityList.tsx similarity index 83% rename from client/src/components/ActivityList.tsx rename to client/src/components/Lists/ActivityList.tsx index f362964..c70082c 100644 --- a/client/src/components/ActivityList.tsx +++ b/client/src/components/Lists/ActivityList.tsx @@ -1,7 +1,7 @@ import React, { FC, useState, ChangeEvent, MouseEvent } from "react"; -import { ActivityCollection } from "./ActivityCollection"; -import { Activity } from "../types/Activity"; -import { FilterBar } from "./FilterBar"; +import { ActivityCollection } from "../ActivityCollection"; +import { Activity } from "../../types/Activity"; +import { FilterBar } from "../FilterBar"; type IProps = { activities: Activity[]; diff --git a/client/src/components/AppFileList.tsx b/client/src/components/Lists/AppFileList.tsx similarity index 83% rename from client/src/components/AppFileList.tsx rename to client/src/components/Lists/AppFileList.tsx index ce15934..028d18b 100644 --- a/client/src/components/AppFileList.tsx +++ b/client/src/components/Lists/AppFileList.tsx @@ -1,8 +1,8 @@ import React, { FC, useState, ChangeEvent, MouseEvent } from "react"; -import { AppFile } from "../types/AppFile"; -import { FileCollection } from "./FileCollection"; -import { InputFile } from "./InputFile"; -import { FilterBar } from "./FilterBar"; +import { AppFile } from "../../types/AppFile"; +import { FileCollection } from "../FileCollection"; +import { InputFile } from "../InputFile"; +import { FilterBar } from "../FilterBar"; import { Grid, Typography } from "@material-ui/core"; type IProps = { diff --git a/client/src/components/MemberList.tsx b/client/src/components/Lists/MemberList.tsx similarity index 86% rename from client/src/components/MemberList.tsx rename to client/src/components/Lists/MemberList.tsx index feadf27..631fe80 100644 --- a/client/src/components/MemberList.tsx +++ b/client/src/components/Lists/MemberList.tsx @@ -1,7 +1,7 @@ import React, { FC, useState, ChangeEvent, MouseEvent } from "react"; -import { UsersModalEntry } from "./UsersModalEntry"; -import { FilterBar } from "./FilterBar"; -import { User } from "../types/User"; +import { UsersModalEntry } from "../Modals/UsersModalEntry"; +import { FilterBar } from "../FilterBar"; +import { User } from "../../types/User"; interface IProps { users: User[]; diff --git a/client/src/components/ProjectList.tsx b/client/src/components/Lists/ProjectList.tsx similarity index 93% rename from client/src/components/ProjectList.tsx rename to client/src/components/Lists/ProjectList.tsx index 878b5f2..a7ca012 100644 --- a/client/src/components/ProjectList.tsx +++ b/client/src/components/Lists/ProjectList.tsx @@ -6,9 +6,9 @@ import { createStyles, Theme, } from "@material-ui/core"; -import { FilterBar } from "./FilterBar"; -import ProjectCard from "./ProjectCard"; -import { Project } from "../types/Project"; +import { FilterBar } from "../FilterBar"; +import ProjectCard from "../Cards/ProjectCard"; +import { Project } from "../../types/Project"; const useStyles = makeStyles((theme: Theme) => createStyles({ diff --git a/client/src/components/TicketList.tsx b/client/src/components/Lists/TicketList.tsx similarity index 86% rename from client/src/components/TicketList.tsx rename to client/src/components/Lists/TicketList.tsx index 87630f9..75efda4 100644 --- a/client/src/components/TicketList.tsx +++ b/client/src/components/Lists/TicketList.tsx @@ -6,16 +6,15 @@ import { Theme, createStyles, } from "@material-ui/core"; -import { FloatingButton } from "./FloatingButton"; -import { HorizontalCard } from "./HorizontalCard"; -import { FilterBar } from "./FilterBar"; -import { HttpResponse } from "../types/HttpResponse"; -import { Ticket } from "../types/Ticket"; -import { NewTicketModal } from "./NewTicketModal"; -import { Project } from "../types/Project"; -import { put } from "../utils/http"; -import { Constants } from "../utils/Constants"; -import TicketCard from "./TicketCard"; +import { FloatingButton } from "../Buttons/FloatingButton"; +import { FilterBar } from "../FilterBar"; +import { HttpResponse } from "../../types/HttpResponse"; +import { Ticket } from "../../types/Ticket"; +import { NewTicketModal } from "../Modals/NewTicketModal"; +import { Project } from "../../types/Project"; +import { put } from "../../utils/http"; +import { Constants } from "../../utils/Constants"; +import TicketCard from "../Cards/TicketCard"; const useStyles = makeStyles((theme: Theme) => createStyles({ diff --git a/client/src/components/LogInForm.tsx b/client/src/components/LogInForm.tsx index 9ef2fb0..4a85da7 100644 --- a/client/src/components/LogInForm.tsx +++ b/client/src/components/LogInForm.tsx @@ -1,7 +1,7 @@ import React, { FC } from "react"; import { InputField } from "./InputField"; import { PasswordField } from "./PasswordField"; -import { Button } from "./Button"; +import { Button } from "./Buttons/Button"; export const LogInForm: FC = () => { return ( diff --git a/client/src/components/Modal.tsx b/client/src/components/Modals/Modal.tsx similarity index 100% rename from client/src/components/Modal.tsx rename to client/src/components/Modals/Modal.tsx diff --git a/client/src/components/NewTicketModal.tsx b/client/src/components/Modals/NewTicketModal.tsx similarity index 88% rename from client/src/components/NewTicketModal.tsx rename to client/src/components/Modals/NewTicketModal.tsx index c586a69..304f932 100644 --- a/client/src/components/NewTicketModal.tsx +++ b/client/src/components/Modals/NewTicketModal.tsx @@ -1,11 +1,11 @@ import React, { FC, useState, FormEvent } from "react"; import { useRouteMatch } from "react-router-dom"; import { Modal } from "./Modal"; -import { NewTicketForm } from "./NewTicketForm"; -import { Ticket } from "../types/Ticket"; -import { Project } from "../types/Project"; -import { post } from "../utils/http"; -import { Constants } from "../utils/Constants"; +import { NewTicketForm } from "../NewTicketForm"; +import { Ticket } from "../../types/Ticket"; +import { Project } from "../../types/Project"; +import { post } from "../../utils/http"; +import { Constants } from "../../utils/Constants"; interface IProps { show: boolean; @@ -16,7 +16,7 @@ interface IProps { export const NewTicketModal: FC = ({ show, handleClose, - allProjects + allProjects, }) => { const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); @@ -35,7 +35,7 @@ export const NewTicketModal: FC = ({ description: description, endingDate: new Date(endingDate).toISOString(), creatorId: "20bf4b2a-7209-4826-96cd-29c2bc937a94", - projectId: parseInt(projectId) + projectId: parseInt(projectId), }; // const response: HttpResponse = diff --git a/client/src/components/UsersModal.tsx b/client/src/components/Modals/UsersModal.tsx similarity index 88% rename from client/src/components/UsersModal.tsx rename to client/src/components/Modals/UsersModal.tsx index f09f8c0..7c6695b 100644 --- a/client/src/components/UsersModal.tsx +++ b/client/src/components/Modals/UsersModal.tsx @@ -1,10 +1,10 @@ import React, { FC, useState, ChangeEvent, FormEvent } from "react"; import { Modal } from "./Modal"; -import { AvatarList } from "./AvatarList"; -import { User } from "../types/User"; -import { FilterBar } from "./FilterBar"; -import { patch } from "../utils/http"; -import { Constants } from "../utils/Constants"; +import { AvatarList } from "../Avatars/AvatarList"; +import { User } from "../../types/User"; +import { FilterBar } from "../FilterBar"; +import { patch } from "../../utils/http"; +import { Constants } from "../../utils/Constants"; import { UsersModalEntry } from "./UsersModalEntry"; import { useParams } from "react-router-dom"; @@ -19,7 +19,7 @@ export const UsersModal: FC = ({ show, handleClose, users, - allUsers + allUsers, }) => { const [filterText, setFilterText] = useState(""); const [members, setMembers] = useState(users); @@ -35,7 +35,7 @@ export const UsersModal: FC = ({ e.preventDefault(); await patch( `${Constants.projectsURI}/${id}/members`, - members.map(m => m.id) + members.map((m) => m.id) ); handleClose(); }; diff --git a/client/src/components/UsersModalEntry.tsx b/client/src/components/Modals/UsersModalEntry.tsx similarity index 84% rename from client/src/components/UsersModalEntry.tsx rename to client/src/components/Modals/UsersModalEntry.tsx index 36a67f4..7e7f04c 100644 --- a/client/src/components/UsersModalEntry.tsx +++ b/client/src/components/Modals/UsersModalEntry.tsx @@ -1,5 +1,5 @@ import React, { FC } from "react"; -import { User } from "../types/User"; +import { User } from "../../types/User"; interface IProps { setMembers: React.Dispatch>; @@ -9,7 +9,7 @@ interface IProps { export const UsersModalEntry: FC = ({ user, setMembers, members }) => { const match: (id: string) => boolean = (id: string) => { - return Boolean(members.find(m => m.id === id)); + return Boolean(members.find((m) => m.id === id)); }; return (
    @@ -22,7 +22,7 @@ export const UsersModalEntry: FC = ({ user, setMembers, members }) => { onChange={() => { !match(user.id) ? setMembers([...members, user]) - : setMembers(members.filter(p => p.id !== user.id)); + : setMembers(members.filter((p) => p.id !== user.id)); }} /> diff --git a/client/src/components/ProjectTabPanel.tsx b/client/src/components/Panels/ProjectTabPanel.tsx similarity index 92% rename from client/src/components/ProjectTabPanel.tsx rename to client/src/components/Panels/ProjectTabPanel.tsx index 7d241c3..d008411 100644 --- a/client/src/components/ProjectTabPanel.tsx +++ b/client/src/components/Panels/ProjectTabPanel.tsx @@ -1,16 +1,16 @@ import React, { FC, useState, ReactNode } from "react"; -import SwipeableViews from "react-swipeable-views"; import { makeStyles, Theme, useTheme } from "@material-ui/core/styles"; import AppBar from "@material-ui/core/AppBar"; import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; import Typography from "@material-ui/core/Typography"; import Box from "@material-ui/core/Box"; -import { Ticket } from "../types/Ticket"; -import { Project } from "../types/Project"; -import { FileList } from "./AppFileList"; -import { TicketList } from "./TicketList"; -import { AppFile } from "../types/AppFile"; +import SwipeableViews from "react-swipeable-views"; +import { Ticket } from "../../types/Ticket"; +import { Project } from "../../types/Project"; +import { TicketList } from "../Lists/TicketList"; +// import { FileList } from "./AppFileList"; +import { AppFile } from "../../types/AppFile"; interface TabProps { children?: ReactNode; diff --git a/client/src/components/TabRouter.tsx b/client/src/components/Panels/TabRouter.tsx similarity index 76% rename from client/src/components/TabRouter.tsx rename to client/src/components/Panels/TabRouter.tsx index 2f34d2a..24f9286 100644 --- a/client/src/components/TabRouter.tsx +++ b/client/src/components/Panels/TabRouter.tsx @@ -1,12 +1,12 @@ import React, { FC } from "react"; import { Route, useRouteMatch, Redirect } from "react-router-dom"; import { TabRouterHeader } from "./TabRouterHeader"; -import { TicketList } from "./TicketList"; -import { FileList } from "./AppFileList"; -import { Ticket } from "../types/Ticket"; -import { AppFile } from "../types/AppFile"; -import { Activity } from "../types/Activity"; -import { Project } from "../types/Project"; +import { TicketList } from "../Lists/TicketList"; +import { FileList } from "../Lists/AppFileList"; +import { Ticket } from "../../types/Ticket"; +import { AppFile } from "../../types/AppFile"; +import { Activity } from "../../types/Activity"; +import { Project } from "../../types/Project"; interface IProps { tickets: Ticket[]; @@ -22,7 +22,7 @@ export const TabRouter: FC = ({ tabNames, files, activities, - allProjects + allProjects, }) => { const { url } = useRouteMatch(); diff --git a/client/src/components/TabRouterHeader.tsx b/client/src/components/Panels/TabRouterHeader.tsx similarity index 100% rename from client/src/components/TabRouterHeader.tsx rename to client/src/components/Panels/TabRouterHeader.tsx diff --git a/client/src/components/UserTabPanel.tsx b/client/src/components/Panels/UserTabPanel.tsx similarity index 93% rename from client/src/components/UserTabPanel.tsx rename to client/src/components/Panels/UserTabPanel.tsx index 254185f..17123cf 100644 --- a/client/src/components/UserTabPanel.tsx +++ b/client/src/components/Panels/UserTabPanel.tsx @@ -6,10 +6,10 @@ import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; import Typography from "@material-ui/core/Typography"; import Box from "@material-ui/core/Box"; -import { Ticket } from "../types/Ticket"; -import { Project } from "../types/Project"; -import { ProjectList } from "./ProjectList"; -import { TicketList } from "./TicketList"; +import { Ticket } from "../../types/Ticket"; +import { Project } from "../../types/Project"; +import { ProjectList } from "../Lists/ProjectList"; +import { TicketList } from "../Lists/TicketList"; interface TabProps { children?: ReactNode; diff --git a/client/src/components/UserTabRouter.tsx b/client/src/components/Panels/UserTabRouter.tsx similarity index 80% rename from client/src/components/UserTabRouter.tsx rename to client/src/components/Panels/UserTabRouter.tsx index af30bf3..dd3fea1 100644 --- a/client/src/components/UserTabRouter.tsx +++ b/client/src/components/Panels/UserTabRouter.tsx @@ -1,10 +1,10 @@ import React, { FC } from "react"; import { Route, useRouteMatch, Redirect } from "react-router-dom"; import { TabRouterHeader } from "./TabRouterHeader"; -import { ProjectList } from "./ProjectList"; -import { Ticket } from "../types/Ticket"; -import { Project } from "../types/Project"; -import { TicketList } from "./TicketList"; +import { ProjectList } from "../Lists/ProjectList"; +import { Ticket } from "../../types/Ticket"; +import { Project } from "../../types/Project"; +import { TicketList } from "../Lists/TicketList"; interface IProps { tabNames: string[]; diff --git a/client/src/components/ProfileSelector.tsx b/client/src/components/ProfileSelector.tsx index 19cae4e..3c6fdb9 100644 --- a/client/src/components/ProfileSelector.tsx +++ b/client/src/components/ProfileSelector.tsx @@ -1,5 +1,5 @@ import React, { FC } from "react"; -import { UserAvatar } from "./UserAvatar"; +import { UserAvatar } from "./Avatars/UserAvatar"; import { Link } from "react-router-dom"; export const ProfileSelector: FC = () => { diff --git a/client/src/components/ProgressBar.tsx b/client/src/components/Progress/ProgressBar.tsx similarity index 85% rename from client/src/components/ProgressBar.tsx rename to client/src/components/Progress/ProgressBar.tsx index ef1a8da..e3f837c 100644 --- a/client/src/components/ProgressBar.tsx +++ b/client/src/components/Progress/ProgressBar.tsx @@ -2,7 +2,6 @@ import React, { FC } from "react"; import { makeStyles, Theme, createStyles } from "@material-ui/core/styles"; import LinearProgress from "@material-ui/core/LinearProgress"; import { Box } from "@material-ui/core"; -import { PlaylistAddCheck } from "@material-ui/icons"; type IProps = { value: number; @@ -44,9 +43,3 @@ export const ProgressBar: FC = ({ value }) => { ); }; - -{ - /*
    -
    -
    */ -} diff --git a/client/src/components/ProgressInfo.tsx b/client/src/components/Progress/ProgressInfo.tsx similarity index 61% rename from client/src/components/ProgressInfo.tsx rename to client/src/components/Progress/ProgressInfo.tsx index 0faadc4..17f741a 100644 --- a/client/src/components/ProgressInfo.tsx +++ b/client/src/components/Progress/ProgressInfo.tsx @@ -1,6 +1,5 @@ import React, { FC } from "react"; -import { makeStyles, Theme, createStyles } from "@material-ui/core/styles"; -import LinearProgress from "@material-ui/core/LinearProgress"; +// import { makeStyles, Theme, createStyles } from "@material-ui/core/styles"; import { Box } from "@material-ui/core"; import { PlaylistAddCheck } from "@material-ui/icons"; @@ -10,23 +9,23 @@ type IProps = { remainingDays?: number; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: "100%", - "& > * + *": { - marginTop: theme.spacing(2), - }, - }, - }) -); +// const useStyles = makeStyles((theme: Theme) => +// createStyles({ +// root: { +// width: "100%", +// "& > * + *": { +// marginTop: theme.spacing(2), +// }, +// }, +// }) +// ); export const ProgressInfo: FC = ({ tasksDone, tasksTotalCount, remainingDays, }) => { - const classes = useStyles(); + // const classes = useStyles(); return ( diff --git a/client/src/components/UserHeader.tsx b/client/src/components/UserHeader.tsx index c57ae51..98f6ff9 100644 --- a/client/src/components/UserHeader.tsx +++ b/client/src/components/UserHeader.tsx @@ -1,6 +1,6 @@ import React, { FC } from "react"; import { Header } from "../components/Header"; -import { UserAvatar } from "./UserAvatar"; +import { UserAvatar } from "./Avatars/UserAvatar"; import { Grid, // makeStyles, Theme diff --git a/client/src/pages/ProjectPage.tsx b/client/src/pages/ProjectPage.tsx index 93044cb..43e12cd 100644 --- a/client/src/pages/ProjectPage.tsx +++ b/client/src/pages/ProjectPage.tsx @@ -1,14 +1,14 @@ import React, { FC, useState } from "react"; import { Grid, makeStyles, Theme } from "@material-ui/core"; import { Header } from "../components/Header"; -import { AvatarList } from "../components/AvatarList"; -import { ProgressBar } from "../components/ProgressBar"; -import { FloatingButton } from "../components/FloatingButton"; -import { UsersModal } from "../components/UsersModal"; -import { ProjectTabPanel } from "../components/ProjectTabPanel"; +import { AvatarList } from "../components/Avatars/AvatarList"; +import { ProgressBar } from "../components/Progress/ProgressBar"; +import { FloatingButton } from "../components/Buttons/FloatingButton"; +import { UsersModal } from "../components/Modals/UsersModal"; +import { ProjectTabPanel } from "../components/Panels/ProjectTabPanel"; import ProjectVM from "../VM/ProjectVM"; import PageLayout from "../layouts/PageLayout"; -import { ProgressInfo } from "../components/ProgressInfo"; +import { ProgressInfo } from "../components/Progress/ProgressInfo"; interface IProps { viewModel: ProjectVM; @@ -62,8 +62,6 @@ export const ProjectPage: FC = ({ viewModel }) => { alignItems="center" > - {/* - */} Date: Fri, 17 Apr 2020 14:40:45 +0200 Subject: [PATCH 30/43] Updated Modal to Material UI --- client/src/components/Modals/Modal.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/client/src/components/Modals/Modal.tsx b/client/src/components/Modals/Modal.tsx index b28367f..6fe838f 100644 --- a/client/src/components/Modals/Modal.tsx +++ b/client/src/components/Modals/Modal.tsx @@ -1,16 +1,15 @@ -import React, { FC, CSSProperties } from "react"; +import React, { FC } from "react"; +import Dialog from "@material-ui/core/Dialog"; interface IProps { handleClose: () => void; show: boolean; } + export const Modal: FC = ({ handleClose, show, children }) => { - const showHideStyle: CSSProperties = show - ? { display: "block", zIndex: 10 } - : { display: "none", zIndex: 10 }; return ( -
    -
    {children}
    -
    + + {children} + ); }; From 63de24ef6178e20b9697336b551e0edaf2d29ffb Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 17 Apr 2020 15:13:18 +0200 Subject: [PATCH 31/43] Updated Users and New Ticket Modals to Material UI --- client/src/components/Modals/Modal.tsx | 63 ++++++++++++++++++- .../src/components/Modals/NewTicketModal.tsx | 31 +++++++-- client/src/components/Modals/UsersModal.tsx | 12 ++-- 3 files changed, 94 insertions(+), 12 deletions(-) diff --git a/client/src/components/Modals/Modal.tsx b/client/src/components/Modals/Modal.tsx index 6fe838f..734f942 100644 --- a/client/src/components/Modals/Modal.tsx +++ b/client/src/components/Modals/Modal.tsx @@ -1,15 +1,74 @@ import React, { FC } from "react"; import Dialog from "@material-ui/core/Dialog"; +import { + DialogTitle, + Typography, + IconButton, + DialogContent, + makeStyles, + Theme, + createStyles, + DialogActions, + Button, +} from "@material-ui/core"; +import CloseIcon from "@material-ui/icons/Close"; interface IProps { handleClose: () => void; show: boolean; + action: string; + handleAction: (e: React.FormEvent) => Promise; + name: string; } -export const Modal: FC = ({ handleClose, show, children }) => { +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + margin: 0, + padding: theme.spacing(2), + }, + closeButton: { + position: "absolute", + right: theme.spacing(1), + top: theme.spacing(1), + color: theme.palette.grey[500], + }, + }) +); + +export const Modal: FC = ({ + handleClose, + show, + action, + handleAction, + children, + name, +}) => { + const classes = useStyles(); + return ( - {children} + + {name} + {handleClose ? ( + + + + ) : null} + + {children} + + + + ); }; diff --git a/client/src/components/Modals/NewTicketModal.tsx b/client/src/components/Modals/NewTicketModal.tsx index 304f932..96056c2 100644 --- a/client/src/components/Modals/NewTicketModal.tsx +++ b/client/src/components/Modals/NewTicketModal.tsx @@ -6,6 +6,21 @@ import { Ticket } from "../../types/Ticket"; import { Project } from "../../types/Project"; import { post } from "../../utils/http"; import { Constants } from "../../utils/Constants"; +import { + DialogTitle, + DialogContent, + DialogContentText, + TextField, + DialogActions, + Button, + Typography, + IconButton, + Theme, + createStyles, + makeStyles, +} from "@material-ui/core"; +import MuiDialogTitle from "@material-ui/core/DialogTitle"; +import MuiDialogContent from "@material-ui/core/DialogContent"; interface IProps { show: boolean; @@ -26,9 +41,7 @@ export const NewTicketModal: FC = ({ const id = url.split("/")[2]; const [projectId, setProjectId] = useState(id); - const handleSubmit: (event: FormEvent) => void = async ( - e: FormEvent - ) => { + const handleSubmit = async (e: FormEvent) => { e.preventDefault(); let newTicket = { title: title, @@ -44,11 +57,17 @@ export const NewTicketModal: FC = ({ }; return ( - +
    -
    + {/*

    New Ticket

    -
    +
    */}
    = ({ setFilterText(e.target.value); }; - const handleSubmit: (event: FormEvent) => void = async ( - e: FormEvent - ) => { + const handleSubmit = async (e: FormEvent) => { e.preventDefault(); await patch( `${Constants.projectsURI}/${id}/members`, @@ -41,7 +39,13 @@ export const UsersModal: FC = ({ }; return ( - +

    Manage users

    From e073c59b2c7f556bf5267c4f44e20bc713f39f38 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 17 Apr 2020 16:09:58 +0200 Subject: [PATCH 32/43] [UI] updated New Ticket Modal --- client/src/components/Modals/Modal.tsx | 2 +- .../src/components/Modals/NewTicketModal.tsx | 119 ++++++++++-------- client/src/components/NewTicketForm.tsx | 37 +----- 3 files changed, 74 insertions(+), 84 deletions(-) diff --git a/client/src/components/Modals/Modal.tsx b/client/src/components/Modals/Modal.tsx index 734f942..f52ad5e 100644 --- a/client/src/components/Modals/Modal.tsx +++ b/client/src/components/Modals/Modal.tsx @@ -47,7 +47,7 @@ export const Modal: FC = ({ const classes = useStyles(); return ( - + {name} {handleClose ? ( diff --git a/client/src/components/Modals/NewTicketModal.tsx b/client/src/components/Modals/NewTicketModal.tsx index 96056c2..1fedf93 100644 --- a/client/src/components/Modals/NewTicketModal.tsx +++ b/client/src/components/Modals/NewTicketModal.tsx @@ -6,21 +6,7 @@ import { Ticket } from "../../types/Ticket"; import { Project } from "../../types/Project"; import { post } from "../../utils/http"; import { Constants } from "../../utils/Constants"; -import { - DialogTitle, - DialogContent, - DialogContentText, - TextField, - DialogActions, - Button, - Typography, - IconButton, - Theme, - createStyles, - makeStyles, -} from "@material-ui/core"; -import MuiDialogTitle from "@material-ui/core/DialogTitle"; -import MuiDialogContent from "@material-ui/core/DialogContent"; +import { TextField, MenuItem } from "@material-ui/core"; interface IProps { show: boolean; @@ -64,44 +50,75 @@ export const NewTicketModal: FC = ({ action="New Ticket" handleAction={handleSubmit} > -
    - {/*
    -

    New Ticket

    -
    */} + {/*
    */} +
    + ) => + setTitle(e.target.value) + } + autoFocus + /> -
    - - close - -
    + ) => + setDescription(e.target.value) + } + multiline + /> + + ) => + setEndingDate(e.target.value) + } + /> + + ) => { + e.preventDefault(); + setProjectId(e.target.value); + }} + // helperText="Please select your currency" + variant="outlined" + > + {allProjects.map((p) => ( + + {p.title} + + ))} +
    - - -
    - -
    - -
    - -
    -
    + {/* */} ); }; diff --git a/client/src/components/NewTicketForm.tsx b/client/src/components/NewTicketForm.tsx index 97e0108..aac5205 100644 --- a/client/src/components/NewTicketForm.tsx +++ b/client/src/components/NewTicketForm.tsx @@ -1,4 +1,5 @@ import React, { FC } from "react"; +import { TextField, MenuItem } from "@material-ui/core"; import { Project } from "../types/Project"; interface IProps { @@ -22,45 +23,17 @@ export const NewTicketForm: FC = ({ setEndingDate, allProjects, projectId, - setProjectId + setProjectId, }) => { return ( <> -
    -
    - note_add - ) => - setTitle(e.target.value) - } - /> - -
    - -
    - mode_edit - - -
    - + {/*
    date_range ) => setEndingDate(e.target.value) } @@ -81,14 +54,14 @@ export const NewTicketForm: FC = ({ - {allProjects.map(p => ( + {allProjects.map((p) => ( ))}
    -
    +
    */} ); }; From ddbd949112c73ed0c6d015eaa64400a5bff289a4 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 17 Apr 2020 16:14:35 +0200 Subject: [PATCH 33/43] [BUG] new ticket modal receives projects --- client/src/components/Modals/NewTicketModal.tsx | 3 +-- client/src/components/Panels/ProjectTabPanel.tsx | 8 ++++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/client/src/components/Modals/NewTicketModal.tsx b/client/src/components/Modals/NewTicketModal.tsx index 1fedf93..5b135b3 100644 --- a/client/src/components/Modals/NewTicketModal.tsx +++ b/client/src/components/Modals/NewTicketModal.tsx @@ -1,12 +1,11 @@ import React, { FC, useState, FormEvent } from "react"; import { useRouteMatch } from "react-router-dom"; +import { TextField, MenuItem } from "@material-ui/core"; import { Modal } from "./Modal"; -import { NewTicketForm } from "../NewTicketForm"; import { Ticket } from "../../types/Ticket"; import { Project } from "../../types/Project"; import { post } from "../../utils/http"; import { Constants } from "../../utils/Constants"; -import { TextField, MenuItem } from "@material-ui/core"; interface IProps { show: boolean; diff --git a/client/src/components/Panels/ProjectTabPanel.tsx b/client/src/components/Panels/ProjectTabPanel.tsx index d008411..b3fb77f 100644 --- a/client/src/components/Panels/ProjectTabPanel.tsx +++ b/client/src/components/Panels/ProjectTabPanel.tsx @@ -63,7 +63,7 @@ export const ProjectTabPanel: FC = ({ tickets, tabNames, files, - // allProjects + allProjects, }) => { const classes = useStyles(); const theme = useTheme(); @@ -103,7 +103,11 @@ export const ProjectTabPanel: FC = ({ onChangeIndex={handleChangeIndex} > - + {/* From bff1315ca166ff215c397e3c70780559258d142f Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 17 Apr 2020 16:26:34 +0200 Subject: [PATCH 34/43] [UI] updated New Ticket Modal --- README.md | 1 + app.db | Bin 106496 -> 106496 bytes .../src/components/Modals/NewTicketModal.tsx | 47 ++++++++++-------- 3 files changed, 27 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index cec96d4..1a08cc7 100644 --- a/README.md +++ b/README.md @@ -56,3 +56,4 @@ - [ ] Refactor Lists code - [ ] Query project members in UserPage - [ ] Query progression info in UserPage +- [ ] Add info fields in New Ticket Form diff --git a/app.db b/app.db index 41345a2109cb37a4f14a775d5ef5bbb5a8c65ee7..68d0ac39123881a38dbc61f4e25fbfdf37b9fdfb 100644 GIT binary patch delta 252 zcmZoTz}9epZNvY3M%GOQEDAgF>-4w%jN(Aa=M4NG`QPwA=l=$j dyv{Gl!pzACRKdx}0wS1MnHd?Gm>3usSODk8KIH%a delta 111 zcmZoTz}9epZNvY3MwU$lEDBuAya5b+Z+UO=25c4-aN^w@Fjt&$a@BmR$-Q$mCf}K_ zvia>i@rPW@{BIffzw>|Mf4f<5!F~SeZ~Ga=fr4)s_&@T$;r|8{yvHxX!pzCY0wS1M NnHd?Gm>3usSOE3BBi;Z2 diff --git a/client/src/components/Modals/NewTicketModal.tsx b/client/src/components/Modals/NewTicketModal.tsx index 5b135b3..cb1a5fb 100644 --- a/client/src/components/Modals/NewTicketModal.tsx +++ b/client/src/components/Modals/NewTicketModal.tsx @@ -49,7 +49,6 @@ export const NewTicketModal: FC = ({ action="New Ticket" handleAction={handleSubmit} > - {/*
    */}
    = ({ multiline /> + ) => { + e.preventDefault(); + setProjectId(e.target.value); + }} + // helperText="Please select your currency" + variant="outlined" + margin="normal" + > + {allProjects.map((p) => ( + + {p.title} + + ))} + + = ({ setEndingDate(e.target.value) } /> - - ) => { - e.preventDefault(); - setProjectId(e.target.value); - }} - // helperText="Please select your currency" - variant="outlined" - > - {allProjects.map((p) => ( - - {p.title} - - ))} -
    - {/*
    */} ); }; From d80225786fea08f36bffa094e3540ecfc8fe4eff Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 17 Apr 2020 17:20:39 +0200 Subject: [PATCH 35/43] [UI] Users Modal done --- app.db | Bin 106496 -> 106496 bytes client/src/components/Modals/UsersModal.tsx | 101 ++++++++++++-------- 2 files changed, 61 insertions(+), 40 deletions(-) diff --git a/app.db b/app.db index 68d0ac39123881a38dbc61f4e25fbfdf37b9fdfb..d760d1eb80bf0576be343922b757b4a20605e4b0 100644 GIT binary patch delta 124 zcmZoTz}9epZNvI{MwZDN>NQxHnL{}z8`!JxaPhBYVB&9P;BV%?wpmc1oS#*bg)@{9 zB*)6kz`&q6d1JpSGf-^uMt?O%mQ52FCvfwx2Wn|!;BVu<4%AY`KmBq&qXt;D#$*vY VmC5VNQvxnL{}z8`!Jxa4|42F!8Tt;J?nlcC( + createStyles({ + root: { + width: "100%", + maxWidth: 360, + backgroundColor: theme.palette.background.paper, + }, + }) +); + export const UsersModal: FC = ({ show, handleClose, users, allUsers, }) => { - const [filterText, setFilterText] = useState(""); - const [members, setMembers] = useState(users); const { id } = useParams(); + const [filterText, setFilterText] = useState(""); const handleChange = (e: ChangeEvent): void => { setFilterText(e.target.value); }; + const memberIDs = users.map((u) => u.id); + const [members, setMembers] = useState(memberIDs); + + const handleToggle = (value: string) => () => { + const currentIndex = members.indexOf(value); + const newChecked = [...members]; + + if (currentIndex === -1) { + newChecked.push(value); + } else { + newChecked.splice(currentIndex, 1); + } + + setMembers(newChecked); + }; + const handleSubmit = async (e: FormEvent) => { e.preventDefault(); await patch( `${Constants.projectsURI}/${id}/members`, - members.map((m) => m.id) + members //.map((m) => m.id) ); handleClose(); }; + const classes = useStyles(); + return ( = ({ action="Submit" handleAction={handleSubmit} > -
    -
    -

    Manage users

    -
    -
    - - close - -
    -
    -
    + setFilterText("")} handleChange={handleChange} /> -
    + -
    -
      - {allUsers.map((u: User) => ( -
    • - + {allUsers.map((u: User) => ( + + + + + + + -
      • - ))} -
    -
    - -
    -
    + + + ))} +     ); }; From f043ac76ba43702ccce8933504524af3e8a51e36 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Fri, 17 Apr 2020 17:23:53 +0200 Subject: [PATCH 36/43] [UI] Users Modal done --- client/src/components/Modals/Modal.tsx | 7 +++- client/src/components/Modals/UsersModal.tsx | 39 +++++++++++---------- 2 files changed, 26 insertions(+), 20 deletions(-) diff --git a/client/src/components/Modals/Modal.tsx b/client/src/components/Modals/Modal.tsx index f52ad5e..705f172 100644 --- a/client/src/components/Modals/Modal.tsx +++ b/client/src/components/Modals/Modal.tsx @@ -47,7 +47,12 @@ export const Modal: FC = ({ const classes = useStyles(); return ( - + {name} {handleClose ? ( diff --git a/client/src/components/Modals/UsersModal.tsx b/client/src/components/Modals/UsersModal.tsx index e85d438..f697635 100644 --- a/client/src/components/Modals/UsersModal.tsx +++ b/client/src/components/Modals/UsersModal.tsx @@ -90,25 +90,26 @@ export const UsersModal: FC = ({ handleChange={handleChange} /> - - - {allUsers.map((u: User) => ( - - - - - - - - - - ))} - + + + {allUsers.map((u: User) => ( + + + + + + + + + + ))} + + ); }; From 429ace34bb34fff8f91c4fba9def9ea2926d5906 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Sat, 18 Apr 2020 09:14:19 +0200 Subject: [PATCH 37/43] [chore]: rdelete unused refs --- README.md | 1 + client/src/components/Cards/TicketCard.tsx | 2 +- client/src/components/Modals/UsersModal.tsx | 1 - client/src/components/Progress/ProgressInfo.tsx | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 1a08cc7..7be337c 100644 --- a/README.md +++ b/README.md @@ -57,3 +57,4 @@ - [ ] Query project members in UserPage - [ ] Query progression info in UserPage - [ ] Add info fields in New Ticket Form +- [ ] Filter users in Users Modal diff --git a/client/src/components/Cards/TicketCard.tsx b/client/src/components/Cards/TicketCard.tsx index 5447449..f7e2597 100644 --- a/client/src/components/Cards/TicketCard.tsx +++ b/client/src/components/Cards/TicketCard.tsx @@ -20,7 +20,7 @@ const TicketCard: FC = ({ return ( - Due{" "} + Due in{" "} {remainingDays ? ( getRemainingdays(remainingDays) ) : ( diff --git a/client/src/components/Modals/UsersModal.tsx b/client/src/components/Modals/UsersModal.tsx index f697635..4b915f9 100644 --- a/client/src/components/Modals/UsersModal.tsx +++ b/client/src/components/Modals/UsersModal.tsx @@ -12,7 +12,6 @@ import Avatar from "@material-ui/core/Avatar"; import { Modal } from "./Modal"; import { AvatarList } from "../Avatars/AvatarList"; import { FilterBar } from "../FilterBar"; -import { UsersModalEntry } from "./UsersModalEntry"; import { User } from "../../types/User"; import { patch } from "../../utils/http"; import { Constants } from "../../utils/Constants"; diff --git a/client/src/components/Progress/ProgressInfo.tsx b/client/src/components/Progress/ProgressInfo.tsx index 17f741a..eaaf028 100644 --- a/client/src/components/Progress/ProgressInfo.tsx +++ b/client/src/components/Progress/ProgressInfo.tsx @@ -34,7 +34,7 @@ export const ProgressInfo: FC = ({ {tasksDone}/{tasksTotalCount} - Due {remainingDays} days + Due in {remainingDays} days ); From 872a87abfd526c6bfb236f5d432066d6e06dc9ac Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Sat, 18 Apr 2020 09:19:08 +0200 Subject: [PATCH 38/43] [UI]: add margin below on cards --- app.db | Bin 106496 -> 106496 bytes .../src/components/Cards/HorizontalCard.tsx | 1 + 2 files changed, 1 insertion(+) diff --git a/app.db b/app.db index d760d1eb80bf0576be343922b757b4a20605e4b0..de14588bb47861141585603589d4ec8cb8c190e2 100644 GIT binary patch delta 316 zcmZoTz}9epZNvY3el}hP1_oyS76$(7{OkBzHVX=r@iS?#PTt_JIeC43C>Jw-1OtCF z|26&ypp+Lsn-&XWC?nJ4+x;qRtePyGp^TFa>{TYO>5t%J&@)dL~AO7M7E@%`<0Y+O&YB0qC|^2L3jn!()NA z`SVX+@2|nis=*9#)An`xj9~$Mto)A|_`mai;(yEkg8%VmL4}L_tSrn7jBL|i^fSr; vr5`fzf8>9||D69D|3jekd473TW=2LPHWp@1MxaVgMivmk3>IVph7}6{=KfCS delta 202 zcmZoTz}9epZNvY3URGWP1_mbnbqxI1`PXe06j;PRd0l-N2NQoY1AjCBHK0g2KdUAS zXDH)j1ACRpYx*O2Sa<^%_}=o~;tk+y0LnY?ZVs5M#l+spplR&r$T>M`uJL5?c^Z?; z<5eaFuq->@|%$$s@Ac6%%Ftai Date: Sat, 18 Apr 2020 10:11:34 +0200 Subject: [PATCH 39/43] Created enums for category, impact and diff. Updated new Ticket post DTO --- .../src/components/Modals/NewTicketModal.tsx | 204 +++++++++++++----- client/src/types/enums/category.ts | 3 + client/src/types/enums/difficulty.ts | 3 + client/src/types/enums/impact.ts | 3 + 4 files changed, 154 insertions(+), 59 deletions(-) create mode 100644 client/src/types/enums/category.ts create mode 100644 client/src/types/enums/difficulty.ts create mode 100644 client/src/types/enums/impact.ts diff --git a/client/src/components/Modals/NewTicketModal.tsx b/client/src/components/Modals/NewTicketModal.tsx index cb1a5fb..bb29b1d 100644 --- a/client/src/components/Modals/NewTicketModal.tsx +++ b/client/src/components/Modals/NewTicketModal.tsx @@ -1,11 +1,21 @@ import React, { FC, useState, FormEvent } from "react"; import { useRouteMatch } from "react-router-dom"; -import { TextField, MenuItem } from "@material-ui/core"; +import { + TextField, + MenuItem, + Grid, + makeStyles, + Theme, + createStyles, +} from "@material-ui/core"; import { Modal } from "./Modal"; import { Ticket } from "../../types/Ticket"; import { Project } from "../../types/Project"; import { post } from "../../utils/http"; import { Constants } from "../../utils/Constants"; +import Category from "../../types/enums/category"; +import Impact from "../../types/enums/impact"; +import Difficulty from "../../types/enums/difficulty"; interface IProps { show: boolean; @@ -13,6 +23,12 @@ interface IProps { allProjects: Project[]; } +const useStyles = makeStyles((theme: Theme) => ({ + select: { + width: 120, + }, +})); + export const NewTicketModal: FC = ({ show, handleClose, @@ -25,6 +41,9 @@ export const NewTicketModal: FC = ({ const { url } = useRouteMatch(); const id = url.split("/")[2]; const [projectId, setProjectId] = useState(id); + const [categoryID, setCategoryID] = useState(0); + const [impactID, setImpactID] = useState(0); + const [difficultyID, setDifficultyID] = useState(0); const handleSubmit = async (e: FormEvent) => { e.preventDefault(); @@ -32,8 +51,11 @@ export const NewTicketModal: FC = ({ title: title, description: description, endingDate: new Date(endingDate).toISOString(), - creatorId: "20bf4b2a-7209-4826-96cd-29c2bc937a94", + creatorId: "20bf4b2a-7209-4826-96cd-29c2bc937a94", // get current User id projectId: parseInt(projectId), + impact: impactID, + difficulty: difficultyID, + category: categoryID, }; // const response: HttpResponse = @@ -41,6 +63,7 @@ export const NewTicketModal: FC = ({ handleClose(); }; + const classes = useStyles(); return ( = ({ action="New Ticket" handleAction={handleSubmit} > -
    - ) => - setTitle(e.target.value) - } - autoFocus - /> + ) => + setTitle(e.target.value) + } + autoFocus + /> - ) => - setDescription(e.target.value) - } - multiline - /> + ) => + setDescription(e.target.value) + } + multiline + /> + ) => { + e.preventDefault(); + setProjectId(e.target.value); + }} + // helperText="Please select your currency" + variant="outlined" + margin="normal" + > + {allProjects.map((p) => ( + + {p.title} + + ))} + + + ) => + setEndingDate(e.target.value) + } + /> + + ) => { e.preventDefault(); - setProjectId(e.target.value); + setCategoryID(parseInt(e.target.value)); }} - // helperText="Please select your currency" variant="outlined" margin="normal" + className={classes.select} > - {allProjects.map((p) => ( - - {p.title} + {Category.map((c: string, i: number) => ( + + {c} ))} ) => { + e.preventDefault(); + setImpactID(parseInt(e.target.value)); }} variant="outlined" - required - value={endingDate} - onChange={(e: React.ChangeEvent) => - setEndingDate(e.target.value) - } - /> -
    + margin="normal" + > + {Impact.map((c: string, i: number) => ( + + {c} + + ))} + + + ) => { + e.preventDefault(); + setDifficultyID(parseInt(e.target.value)); + }} + variant="outlined" + margin="normal" + > + {Difficulty.map((c: string, i: number) => ( + + {c} + + ))} + +     ); }; diff --git a/client/src/types/enums/category.ts b/client/src/types/enums/category.ts new file mode 100644 index 0000000..07e06d0 --- /dev/null +++ b/client/src/types/enums/category.ts @@ -0,0 +1,3 @@ +const Category: string[] = ["Product", "Tech", "Design", "Marketing", "Test"]; + +export default Category; diff --git a/client/src/types/enums/difficulty.ts b/client/src/types/enums/difficulty.ts new file mode 100644 index 0000000..746c54d --- /dev/null +++ b/client/src/types/enums/difficulty.ts @@ -0,0 +1,3 @@ +const Difficulty: string[] = ["Easy", "Medium", "Hard"]; + +export default Difficulty; diff --git a/client/src/types/enums/impact.ts b/client/src/types/enums/impact.ts new file mode 100644 index 0000000..1584183 --- /dev/null +++ b/client/src/types/enums/impact.ts @@ -0,0 +1,3 @@ +const Impact: string[] = ["High", "Medium", "Low"]; + +export default Impact; From 5e057d1c72adceda29de3948b6f893bb209ac810 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Sat, 18 Apr 2020 10:51:10 +0200 Subject: [PATCH 40/43] [UI] updated TicketCard to display ticket Info --- client/src/components/Cards/TicketCard.tsx | 113 ++++++++++++++++----- client/src/components/Lists/TicketList.tsx | 3 +- 2 files changed, 91 insertions(+), 25 deletions(-) diff --git a/client/src/components/Cards/TicketCard.tsx b/client/src/components/Cards/TicketCard.tsx index f7e2597..af5a36d 100644 --- a/client/src/components/Cards/TicketCard.tsx +++ b/client/src/components/Cards/TicketCard.tsx @@ -1,36 +1,103 @@ import React, { FC, MouseEvent } from "react"; +import { Button, Typography, Grid } from "@material-ui/core"; +import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; +import Chip from "@material-ui/core/Chip"; +import Paper from "@material-ui/core/Paper"; +import CategoryIcon from "@material-ui/icons/Category"; +import PriorityHighIcon from "@material-ui/icons/PriorityHigh"; +import SpeedIcon from "@material-ui/icons/Speed"; import { HorizontalCard } from "./HorizontalCard"; -import { Button, Typography } from "@material-ui/core"; +import { Ticket } from "../../types/Ticket"; import { getRemainingdays } from "../../utils/methods"; interface IProps { - title?: string; - remainingDays?: string; + ticket?: Ticket; validateTicket?: (event: MouseEvent) => void; link?: string; } -const TicketCard: FC = ({ - title, - remainingDays, - link = "#", - validateTicket, -}) => { +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + display: "flex", + justifyContent: "center", + flexWrap: "wrap", + listStyle: "none", + padding: theme.spacing(0.5), + margin: 0, + marginTop: 20, + marginBottom: 20, + }, + chip: { + margin: theme.spacing(0.5), + }, + }) +); + +const TicketCard: FC = ({ link = "#", validateTicket, ticket }) => { + const ChipsArray: FC = () => { + const classes = useStyles(); + const chipData = [ + // { label: "status", value: ticket?.status }, + { label: "category", value: ticket?.category }, + { label: "impact", value: ticket?.impact }, + { label: "difficulty", value: ticket?.difficulty }, + ]; + + return ( + // + + {chipData.map((data, i: number) => { + let icon = ; + let color: + | "inherit" + | "default" + | "primary" + | "secondary" + | undefined; + + if (data.label === "impact") { + color = "primary"; + icon = ; + } + if (data.label === "difficulty") { + color = "secondary"; + icon = ; + } + + return ( +
  • + +
    • + ); + })} +     + ); + }; + const Content: FC = () => { return ( - - - Due in{" "} - {remainingDays ? ( - getRemainingdays(remainingDays) - ) : ( - - Too much 0 - - )}{" "} - days - - + + + + + Due in{" "} + {ticket?.endingDate ? ( + getRemainingdays(ticket?.endingDate) + ) : ( + + Too much 0 + + )}{" "} + days + + + ); }; @@ -46,7 +113,7 @@ const TicketCard: FC = ({ return ( } actions={} diff --git a/client/src/components/Lists/TicketList.tsx b/client/src/components/Lists/TicketList.tsx index 75efda4..e6910c5 100644 --- a/client/src/components/Lists/TicketList.tsx +++ b/client/src/components/Lists/TicketList.tsx @@ -106,8 +106,7 @@ export const TicketList: FC = ({ filteredTickets.map((t: Ticket) => ( { e.preventDefault(); From 8a3e1d96d5228d1da00b7ed84bc89b85487c575e Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Sat, 18 Apr 2020 11:18:06 +0200 Subject: [PATCH 41/43] Extracted TicketChipsArray in own component. Used on ticketPage --- client/src/components/Cards/TicketCard.tsx | 81 +++------------ .../src/components/Cards/TicketChipsArray.tsx | 77 +++++++++++++++ client/src/pages/TicketPage.tsx | 99 +++++++++++-------- 3 files changed, 147 insertions(+), 110 deletions(-) create mode 100644 client/src/components/Cards/TicketChipsArray.tsx diff --git a/client/src/components/Cards/TicketCard.tsx b/client/src/components/Cards/TicketCard.tsx index af5a36d..dcd1090 100644 --- a/client/src/components/Cards/TicketCard.tsx +++ b/client/src/components/Cards/TicketCard.tsx @@ -3,12 +3,11 @@ import { Button, Typography, Grid } from "@material-ui/core"; import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; import Chip from "@material-ui/core/Chip"; import Paper from "@material-ui/core/Paper"; -import CategoryIcon from "@material-ui/icons/Category"; -import PriorityHighIcon from "@material-ui/icons/PriorityHigh"; -import SpeedIcon from "@material-ui/icons/Speed"; + import { HorizontalCard } from "./HorizontalCard"; import { Ticket } from "../../types/Ticket"; import { getRemainingdays } from "../../utils/methods"; +import TicketChipsArray from "./TicketChipsArray"; interface IProps { ticket?: Ticket; @@ -16,74 +15,20 @@ interface IProps { link?: string; } -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - display: "flex", - justifyContent: "center", - flexWrap: "wrap", - listStyle: "none", - padding: theme.spacing(0.5), - margin: 0, - marginTop: 20, - marginBottom: 20, - }, - chip: { - margin: theme.spacing(0.5), - }, - }) -); - -const TicketCard: FC = ({ link = "#", validateTicket, ticket }) => { - const ChipsArray: FC = () => { - const classes = useStyles(); - const chipData = [ - // { label: "status", value: ticket?.status }, - { label: "category", value: ticket?.category }, - { label: "impact", value: ticket?.impact }, - { label: "difficulty", value: ticket?.difficulty }, - ]; - - return ( - // - - {chipData.map((data, i: number) => { - let icon = ; - let color: - | "inherit" - | "default" - | "primary" - | "secondary" - | undefined; - - if (data.label === "impact") { - color = "primary"; - icon = ; - } - if (data.label === "difficulty") { - color = "secondary"; - icon = ; - } - - return ( -
  • - -
    • - ); - })} -     - ); - }; - +const TicketCard: FC = ({ + link = "#", + validateTicket, + ticket = {} as Ticket, +}) => { const Content: FC = () => { return ( - + Due in{" "} diff --git a/client/src/components/Cards/TicketChipsArray.tsx b/client/src/components/Cards/TicketChipsArray.tsx new file mode 100644 index 0000000..92b57f9 --- /dev/null +++ b/client/src/components/Cards/TicketChipsArray.tsx @@ -0,0 +1,77 @@ +import React, { FC } from "react"; +import { Grid, Chip, makeStyles, Theme, createStyles } from "@material-ui/core"; +import CategoryIcon from "@material-ui/icons/Category"; +import PriorityHighIcon from "@material-ui/icons/PriorityHigh"; +import SpeedIcon from "@material-ui/icons/Speed"; +import { Ticket } from "../../types/Ticket"; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + display: "flex", + justifyContent: "space-between", + flexWrap: "wrap", + listStyle: "none", + padding: theme.spacing(0.5), + margin: 0, + marginTop: 20, + marginBottom: 20, + }, + chip: { + margin: theme.spacing(0.5), + }, + }) +); + +interface IProps { + status: string; + category: string; + impact: string; + difficulty: string; +} +const TicketChipsArray: FC = ({ + status, + category, + impact, + difficulty, +}) => { + const classes = useStyles(); + const chipData = [ + // { label: "status", value: status }, + { label: "category", value: category }, + { label: "impact", value: impact }, + { label: "difficulty", value: difficulty }, + ]; + + return ( + // + + {chipData.map((data, i: number) => { + let icon = ; + let color: "inherit" | "default" | "primary" | "secondary" | undefined; + + if (data.label === "impact") { + color = "primary"; + icon = ; + } + if (data.label === "difficulty") { + color = "secondary"; + icon = ; + } + + return ( +
  • + +
    • + ); + })} +     + ); +}; + +export default TicketChipsArray; diff --git a/client/src/pages/TicketPage.tsx b/client/src/pages/TicketPage.tsx index 29a5d7a..cf6a5b2 100644 --- a/client/src/pages/TicketPage.tsx +++ b/client/src/pages/TicketPage.tsx @@ -7,14 +7,14 @@ import TableContainer from "@material-ui/core/TableContainer"; import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; import Paper from "@material-ui/core/Paper"; -import { Header } from "../components/Header"; -import { AvatarList } from "../components/Avatars/AvatarList"; -import { TicketVM } from "../VM/TicketVM"; -import { getRemainingdays } from "../utils/methods"; - import { makeStyles, Theme, Grid, Typography } from "@material-ui/core"; import { Timer } from "@material-ui/icons"; import PageLayout from "../layouts/PageLayout"; +import { TicketVM } from "../VM/TicketVM"; +import { Header } from "../components/Header"; +import { AvatarList } from "../components/Avatars/AvatarList"; +import TicketChipsArray from "../components/Cards/TicketChipsArray"; +import { getRemainingdays } from "../utils/methods"; interface IProps { viewModel: TicketVM; @@ -23,10 +23,15 @@ interface IProps { const useStyles = makeStyles((theme: Theme) => ({ root: { margin: theme.spacing(1), - flexGrow: 1, + // flexGrow: 1, }, table: { - minWidth: 650, + margin: "auto", + maxWidth: 650, + alignItems: "center", + }, + subtitle: { + marginTop: 20, }, })); @@ -54,8 +59,12 @@ export const TicketPage: FC = ({ viewModel }) => {
    - - In project: {" "} + + Project: {project.title} @@ -65,8 +74,14 @@ export const TicketPage: FC = ({ viewModel }) => {
    -
    - + {/* */} + = ({ viewModel }) => { ); }; -interface InfoProps { - status: string; - category: string; - impact: string; - difficulty: string; -} +// interface InfoProps { +// status: string; +// category: string; +// impact: string; +// difficulty: string; +// } -const InfoTable: FC = (info: InfoProps) => { - const classes = useStyles(); +// const InfoTable: FC = (info: InfoProps) => { +// const classes = useStyles(); - return ( - - - - - Status - Category - Impact - Difficulty - - - - - {info.status} - {info.category} - {info.impact} - {info.difficulty} - - -
    -     - ); -}; +// return ( +// +// +// +// +// Status +// Category +// Impact +// Difficulty +// +// +// +// +// {info.status} +// {info.category} +// {info.impact} +// {info.difficulty} +// +// +//
    +//     +// ); +// }; From 1368859860ed3bf3c4825b80e5849fcf7528a5fd Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Sat, 18 Apr 2020 11:47:25 +0200 Subject: [PATCH 42/43] Created NewProjectModal not implemented yet --- README.md | 2 +- client/src/VM/UserVM.ts | 4 +- client/src/components/Lists/ProjectList.tsx | 110 +++++---- .../src/components/Modals/NewProjectModal.tsx | 214 ++++++++++++++++++ client/src/components/Panels/UserTabPanel.tsx | 11 +- .../src/components/Panels/UserTabRouter.tsx | 2 +- client/src/controllers/UserController.tsx | 18 +- client/src/pages/UserPage.tsx | 10 +- 8 files changed, 321 insertions(+), 50 deletions(-) create mode 100644 client/src/components/Modals/NewProjectModal.tsx diff --git a/README.md b/README.md index 7be337c..59de80e 100644 --- a/README.md +++ b/README.md @@ -56,5 +56,5 @@ - [ ] Refactor Lists code - [ ] Query project members in UserPage - [ ] Query progression info in UserPage -- [ ] Add info fields in New Ticket Form +- [x] Add info fields in New Ticket Form - [ ] Filter users in Users Modal diff --git a/client/src/VM/UserVM.ts b/client/src/VM/UserVM.ts index 5152faf..0ddbfcf 100644 --- a/client/src/VM/UserVM.ts +++ b/client/src/VM/UserVM.ts @@ -16,8 +16,9 @@ export class UserVM { public projects: Project[]; public tickets: Ticket[]; public activities: Activity[]; + public allUsers: User[]; - public constructor(user: User) { + public constructor(user: User, allUsers: User[]) { this.id = user.id; this.firstName = user.firstName; this.lastName = user.lastName; @@ -30,5 +31,6 @@ export class UserVM { this.projects = user.projects; this.tickets = user.tickets; this.activities = user.activities; + this.allUsers = allUsers; } } diff --git a/client/src/components/Lists/ProjectList.tsx b/client/src/components/Lists/ProjectList.tsx index a7ca012..873e83a 100644 --- a/client/src/components/Lists/ProjectList.tsx +++ b/client/src/components/Lists/ProjectList.tsx @@ -8,26 +8,38 @@ import { } from "@material-ui/core"; import { FilterBar } from "../FilterBar"; import ProjectCard from "../Cards/ProjectCard"; +import { FloatingButton } from "../Buttons/FloatingButton"; +import { NewProjectModal } from "../Modals/NewProjectModal"; import { Project } from "../../types/Project"; +import { User } from "../../types/User"; const useStyles = makeStyles((theme: Theme) => createStyles({ header: { paddingBottom: theme.spacing(2), }, + addButton: { + position: "relative", + marginLeft: "20px", + }, }) ); type IProps = { projects: Project[]; + allUsers: User[]; }; -export const ProjectList: FC = ({ projects }) => { +export const ProjectList: FC = ({ projects, allUsers }) => { const [filterText, setFilterText] = useState(""); const clearFilterText: (e: MouseEvent) => void = (e: MouseEvent) => { setFilterText(""); }; - + const [showNew, setShowNew] = useState(false); + const onClick = (e: MouseEvent): void => { + e.preventDefault(); + setShowNew(true); + }; const handleChange = (e: ChangeEvent): void => { setFilterText(e.target.value); }; @@ -41,47 +53,59 @@ export const ProjectList: FC = ({ projects }) => { const classes = useStyles(); return ( - - - - Projects - - + <> + { + setShowNew(false); + }} + show={showNew} + allUsers={allUsers} + /> + + + + Projects + + + + + + + +
    + {filteredProjects.length === 0 ? ( + + ) : ( + filteredProjects.map((t: Project) => ( + t.status === "Done").length + } + /> + )) + )} +
    +     - -
    - {filteredProjects.length === 0 ? ( - - ) : ( - filteredProjects.map((t: Project) => ( - t.status === "Done").length - } - /> - )) - )} -
    -     -     + ); }; diff --git a/client/src/components/Modals/NewProjectModal.tsx b/client/src/components/Modals/NewProjectModal.tsx new file mode 100644 index 0000000..94476ec --- /dev/null +++ b/client/src/components/Modals/NewProjectModal.tsx @@ -0,0 +1,214 @@ +import React, { FC, useState, FormEvent } from "react"; +import { useRouteMatch } from "react-router-dom"; +import { + TextField, + MenuItem, + Grid, + makeStyles, + Theme, + createStyles, +} from "@material-ui/core"; +import { Modal } from "./Modal"; +import { Ticket } from "../../types/Ticket"; +import { User } from "../../types/User"; +import { post } from "../../utils/http"; +import { Constants } from "../../utils/Constants"; +import Category from "../../types/enums/category"; +import Impact from "../../types/enums/impact"; +import Difficulty from "../../types/enums/difficulty"; + +interface IProps { + show: boolean; + handleClose: () => void; + allUsers: User[]; +} + +const useStyles = makeStyles((theme: Theme) => ({ + select: { + width: 120, + }, +})); + +export const NewProjectModal: FC = ({ + show, + handleClose, + allUsers, +}) => { + const [title, setTitle] = useState(""); + const [description, setDescription] = useState(""); + const [endingDate, setEndingDate] = useState(""); + + const { url } = useRouteMatch(); + const id = url.split("/")[2]; + const [projectId, setProjectId] = useState(id); + const [categoryID, setCategoryID] = useState(0); + const [impactID, setImpactID] = useState(0); + const [difficultyID, setDifficultyID] = useState(0); + + const handleSubmit = async (e: FormEvent) => { + e.preventDefault(); + let newTicket = { + title: title, + description: description, + endingDate: new Date(endingDate).toISOString(), + creatorId: "20bf4b2a-7209-4826-96cd-29c2bc937a94", // get current User id + projectId: parseInt(projectId), + impact: impactID, + difficulty: difficultyID, + category: categoryID, + }; + + // const response: HttpResponse = + await post(`${Constants.ticketsURI}`, newTicket); + handleClose(); + }; + + const classes = useStyles(); + return ( + + ) => + setTitle(e.target.value) + } + autoFocus + /> + + ) => + setDescription(e.target.value) + } + multiline + /> + + ) => { + e.preventDefault(); + setProjectId(e.target.value); + }} + // helperText="Please select your currency" + variant="outlined" + margin="normal" + > + {allUsers.map((p) => ( + + {p} + + ))} + + + ) => + setEndingDate(e.target.value) + } + /> + + + ) => { + e.preventDefault(); + setCategoryID(parseInt(e.target.value)); + }} + variant="outlined" + margin="normal" + className={classes.select} + > + {Category.map((c: string, i: number) => ( + + {c} + + ))} + + + ) => { + e.preventDefault(); + setImpactID(parseInt(e.target.value)); + }} + variant="outlined" + margin="normal" + > + {Impact.map((c: string, i: number) => ( + + {c} + + ))} + + + ) => { + e.preventDefault(); + setDifficultyID(parseInt(e.target.value)); + }} + variant="outlined" + margin="normal" + > + {Difficulty.map((c: string, i: number) => ( + + {c} + + ))} + + + + ); +}; diff --git a/client/src/components/Panels/UserTabPanel.tsx b/client/src/components/Panels/UserTabPanel.tsx index 17123cf..c23b783 100644 --- a/client/src/components/Panels/UserTabPanel.tsx +++ b/client/src/components/Panels/UserTabPanel.tsx @@ -10,6 +10,7 @@ import { Ticket } from "../../types/Ticket"; import { Project } from "../../types/Project"; import { ProjectList } from "../Lists/ProjectList"; import { TicketList } from "../Lists/TicketList"; +import { User } from "../../types/User"; interface TabProps { children?: ReactNode; @@ -53,9 +54,15 @@ interface IProps { tabNames: string[]; tickets: Ticket[]; projects: Project[]; + allUsers: User[]; } -export const UserTabPanel: FC = ({ tickets, tabNames, projects }) => { +export const UserTabPanel: FC = ({ + tickets, + tabNames, + projects, + allUsers, +}) => { const classes = useStyles(); const theme = useTheme(); const [value, setValue] = useState(0); @@ -94,7 +101,7 @@ export const UserTabPanel: FC = ({ tickets, tabNames, projects }) => { onChangeIndex={handleChangeIndex} > - + diff --git a/client/src/components/Panels/UserTabRouter.tsx b/client/src/components/Panels/UserTabRouter.tsx index dd3fea1..6a45d4d 100644 --- a/client/src/components/Panels/UserTabRouter.tsx +++ b/client/src/components/Panels/UserTabRouter.tsx @@ -23,7 +23,7 @@ export const UserTabRouter: FC = ({ tickets, tabNames, projects }) => { - + {/* */} diff --git a/client/src/controllers/UserController.tsx b/client/src/controllers/UserController.tsx index 181a3fa..fc31881 100644 --- a/client/src/controllers/UserController.tsx +++ b/client/src/controllers/UserController.tsx @@ -14,6 +14,7 @@ export const UserController: FC = () => { const [user, setUser] = useState({} as User); const [hasError, setHasError] = useState(false); const [error, setError] = useState(""); + const [allUsers, setAllUsers] = useState([]); const { id } = useParams(); async function httpGetUser(id: string): Promise { @@ -32,9 +33,24 @@ export const UserController: FC = () => { } } + async function httpGetAllUsers(): Promise { + try { + const response: HttpResponse = await get( + `${Constants.usersURI}` + ); + if (response.parsedBody !== undefined) { + setAllUsers((response.parsedBody as unknown) as User[]); + } + } catch (ex) { + setHasError(true); + setError(ex); + } + } + useEffect(() => { if (id !== undefined) { httpGetUser(id); + httpGetAllUsers(); } else { setHasError(true); setError("Bad Request"); @@ -45,6 +61,6 @@ export const UserController: FC = () => { return ; } - const viewModel = new UserVM(user); + const viewModel = new UserVM(user, allUsers); return isLoading ? : ; }; diff --git a/client/src/pages/UserPage.tsx b/client/src/pages/UserPage.tsx index b528959..b3d8e2c 100644 --- a/client/src/pages/UserPage.tsx +++ b/client/src/pages/UserPage.tsx @@ -9,7 +9,14 @@ interface IProps { } export const UserPage: FC = ({ viewModel }) => { - const { fullName, presentation, picture, projects, tickets } = viewModel; + const { + fullName, + presentation, + picture, + projects, + tickets, + allUsers, + } = viewModel; const tabNames: string[] = ["Projects", "Tickets"]; return ( @@ -26,6 +33,7 @@ export const UserPage: FC = ({ viewModel }) => { tabNames={tabNames} projects={projects} tickets={tickets} + allUsers={allUsers} /> } /> From 3e94c311e50735cf10c623a072da06a3cfdf3d43 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Sat, 18 Apr 2020 14:35:29 +0200 Subject: [PATCH 43/43] NewProjectModal can add new project --- app.db | Bin 106496 -> 106496 bytes client/src/components/Cards/TicketCard.tsx | 6 +- .../src/components/Cards/TicketChipsArray.tsx | 1 - .../src/components/Modals/NewProjectModal.tsx | 140 +----------------- .../src/components/Modals/NewTicketModal.tsx | 1 - client/src/components/Panels/UserTabPanel.tsx | 7 +- client/src/pages/TicketPage.tsx | 7 - 7 files changed, 11 insertions(+), 151 deletions(-) diff --git a/app.db b/app.db index de14588bb47861141585603589d4ec8cb8c190e2..a8c3bd0aabfc3814a7263785df14202f6d1a9a1f 100644 GIT binary patch delta 160 zcmZoTz}9epZ39aH7c<{{2L9Rnf_(Eg3kpo+^DAKHU{FKfY@lFZU7V2L3<%m-$x#t(?O@dA+{|E3*c3DC1-UdzJ0K>ls-U0GanJ A1ONa4 delta 67 zcmZoTz}9epZ39aH2NS;_1OIG(!OemKto)k= createStyles({ diff --git a/client/src/components/Modals/NewProjectModal.tsx b/client/src/components/Modals/NewProjectModal.tsx index 94476ec..3d63126 100644 --- a/client/src/components/Modals/NewProjectModal.tsx +++ b/client/src/components/Modals/NewProjectModal.tsx @@ -1,21 +1,10 @@ import React, { FC, useState, FormEvent } from "react"; -import { useRouteMatch } from "react-router-dom"; -import { - TextField, - MenuItem, - Grid, - makeStyles, - Theme, - createStyles, -} from "@material-ui/core"; +import { TextField } from "@material-ui/core"; import { Modal } from "./Modal"; -import { Ticket } from "../../types/Ticket"; +import { Project } from "../../types/Project"; import { User } from "../../types/User"; import { post } from "../../utils/http"; import { Constants } from "../../utils/Constants"; -import Category from "../../types/enums/category"; -import Impact from "../../types/enums/impact"; -import Difficulty from "../../types/enums/difficulty"; interface IProps { show: boolean; @@ -23,53 +12,30 @@ interface IProps { allUsers: User[]; } -const useStyles = makeStyles((theme: Theme) => ({ - select: { - width: 120, - }, -})); - -export const NewProjectModal: FC = ({ - show, - handleClose, - allUsers, -}) => { +export const NewProjectModal: FC = ({ show, handleClose }) => { const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [endingDate, setEndingDate] = useState(""); - const { url } = useRouteMatch(); - const id = url.split("/")[2]; - const [projectId, setProjectId] = useState(id); - const [categoryID, setCategoryID] = useState(0); - const [impactID, setImpactID] = useState(0); - const [difficultyID, setDifficultyID] = useState(0); - const handleSubmit = async (e: FormEvent) => { e.preventDefault(); - let newTicket = { + let newProject = { title: title, description: description, endingDate: new Date(endingDate).toISOString(), - creatorId: "20bf4b2a-7209-4826-96cd-29c2bc937a94", // get current User id - projectId: parseInt(projectId), - impact: impactID, - difficulty: difficultyID, - category: categoryID, + managerId: "cd179eb7-3a54-4060-b22c-3e947bdffcbc", // get current User id }; - // const response: HttpResponse = - await post(`${Constants.ticketsURI}`, newTicket); + await post(`${Constants.projectsURI}`, newProject); handleClose(); }; - const classes = useStyles(); return ( = ({ multiline /> - ) => { - e.preventDefault(); - setProjectId(e.target.value); - }} - // helperText="Please select your currency" - variant="outlined" - margin="normal" - > - {allUsers.map((p) => ( - - {p} - - ))} - - = ({ type="date" margin="normal" fullWidth - // defaultValue={new Date().toISOString()} - // className={classes.textField} InputLabelProps={{ shrink: true, }} @@ -144,71 +85,6 @@ export const NewProjectModal: FC = ({ setEndingDate(e.target.value) } /> - - - ) => { - e.preventDefault(); - setCategoryID(parseInt(e.target.value)); - }} - variant="outlined" - margin="normal" - className={classes.select} - > - {Category.map((c: string, i: number) => ( - - {c} - - ))} - - - ) => { - e.preventDefault(); - setImpactID(parseInt(e.target.value)); - }} - variant="outlined" - margin="normal" - > - {Impact.map((c: string, i: number) => ( - - {c} - - ))} - - - ) => { - e.preventDefault(); - setDifficultyID(parseInt(e.target.value)); - }} - variant="outlined" - margin="normal" - > - {Difficulty.map((c: string, i: number) => ( - - {c} - - ))} - - ); }; diff --git a/client/src/components/Modals/NewTicketModal.tsx b/client/src/components/Modals/NewTicketModal.tsx index bb29b1d..9493b17 100644 --- a/client/src/components/Modals/NewTicketModal.tsx +++ b/client/src/components/Modals/NewTicketModal.tsx @@ -6,7 +6,6 @@ import { Grid, makeStyles, Theme, - createStyles, } from "@material-ui/core"; import { Modal } from "./Modal"; import { Ticket } from "../../types/Ticket"; diff --git a/client/src/components/Panels/UserTabPanel.tsx b/client/src/components/Panels/UserTabPanel.tsx index c23b783..ad0c2ba 100644 --- a/client/src/components/Panels/UserTabPanel.tsx +++ b/client/src/components/Panels/UserTabPanel.tsx @@ -48,6 +48,7 @@ const useStyles = makeStyles((theme: Theme) => ({ backgroundColor: "#E9ECEF", borderRadius: "20px", }, + topbar: { borderTopLeftRadius: "10px", borderTopRightRadius: "10px" }, })); interface IProps { @@ -77,11 +78,7 @@ export const UserTabPanel: FC = ({ return (
    - +