Merge branch 'frontend-devel' into devel

README.md

@@ -21,13 +21,13 @@ You can test out our web application at https://ryoko-planning.herokuapp.com/.
 
 ### Simple deployment
 
-If you have [yarn](https://yarnpkg.com/) installed it is possible to build and start the complete
-project the same way it is deployed on our server. For this simply enter the root directory of the
-repository and execute the following three command in order:
+If you have [yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) installed it is possible
+to build and start the complete project the same way it is deployed on our server.
+For this simply enter the root directory of the repository and execute the following three command in order:
 
-1. `yarn install` This will install all the dependencies for both the frontend and backend
-2. `yarn build` This will bundle the source for the frontend and transpile backend
-3. `yarn start` This will start the web server and host the webserver at `localhost:8000`
+1. `yarn install` (or `npm install`) This will install all the dependencies for both the frontend and backend
+2. `yarn build` (or `npm run build`) This will bundle the source for the frontend and transpile backend
+3. `yarn start` (or `npm run start`) This will start the web server and host the webserver at `localhost:8000`
 
 Note:
  * The server can use a public and private key pair to sign the authentication web token. They can
@@ -37,7 +37,8 @@ envirenvironment variables. In any case the keys must be suitable for ES384 sign
 keys are not given it will use a simple password to sign the tokens.
  * If your `PORT` environment variable is set that will be used as the port to host the webserver in stead of port 8000.
  * If your `NODE_ENV` environment variable is set to `production` (with SSL) or `staging` (without SSL) the server will try
-to connect to a postgres database using the connection url inside `DATABASE_URL`.
+to connect to a postgres database using the connection url inside `DATABASE_URL` or
+`postgresql://postgres@localhost/ryoko` if no such variable is present in the environment.
 
 ### Details
 
@@ -48,19 +49,19 @@ server and client parts also use the same commands for running building and test
 Before building or running you will have to make sure that you have installed all dependencies. This
 can be done by executing `yarn install` (or `npm install --legacy-peer-deps`).
 
-### How to Run
+#### How to Run
 
 To start a development server you can execute `yarn start` (or `npm run start`) inside the `server`
 and the `client` directories. Most parts of the client will also require the server to be running
 simultaneously.
 
-### How to Build
+#### How to Build
 
 To build a production build enter the respective directory (either `server` or `client`) and execute
 `yarn build` (or `npm run build`). The build output will be created inside a directory named `build`
 and can then be executed using node for the server, or served staticaly for the client.
 
-### How to Use
+#### How to Use
 
 After starting the development server inside `client`, the website is accessible at
 `http://localhost:3000`. Depending on your configuration the site will probably be opened

client/src/adapters/project.ts

@@ -12,7 +12,7 @@ export enum Status {
 }
 
 export const StatusColors = new Map<string, string>([
-    ['open', 'lightblue'],
+    ['open', 'blue'],
     ['closed', 'purple'],
     ['suspended', 'red']
 ]);
@@ -88,7 +88,7 @@ export function getProjectCompletion(uuid: string, from: Date = new Date(0), to:
             completion.closed + 
             completion.suspended +
             completion.overdue
-        )}), "Failed to get project completion"
+        ) || 1}), "Failed to get project completion"
     );
 }
 

client/src/adapters/task.ts

@@ -16,7 +16,7 @@ export enum Status {
 }
 
 export const StatusColors = new Map<string, string>([
-    ['open', 'lightblue'],
+    ['open', 'blue'],
     ['closed', 'purple'],
     ['suspended', 'red']
 ]);

client/src/adapters/team.ts

@@ -66,7 +66,7 @@ export function getTeamCompletion(uuid: string, from: Date = new Date(0), to: Da
             completion.closed + 
             completion.suspended + 
             completion.overdue
-        )}), "Failed to get team completion"
+        ) || 1}), "Failed to get team completion"
     );
 }
 

client/src/adapters/util.ts

+import { CompletionProps } from './../components/ui/Completion/index';
 
+import { ChartItem } from 'components/graphs/BarChart';
 import { apiRoot } from 'config';
 
 import { getAuthHeader } from './auth';
+import { StatusColors } from './task';
 
 export interface Activity {
     day: string;
@@ -22,13 +25,15 @@ async function executeApiRequest<T>(path: string, method: string, body: any, onS
             method: method,
             headers: {
                 ...getAuthHeader(),
-                ...(body ? (
-                        body instanceof FormData
-                            ? { 'Content-Type': 'multipart/form-data' }
-                            : { 'Content-Type': 'application/json' })
+                ...(body && !(body instanceof FormData)
+                        ? { 'Content-Type': 'application/json' }
                         : { }),
             },
-            body: body ? JSON.stringify(body) : undefined,
+            body: body
+                    ? (body instanceof FormData
+                            ? body
+                            : JSON.stringify(body))
+                    : undefined,
         });
         if (response.ok) {
             return onSuccess(await response.json());
@@ -56,3 +61,35 @@ export function executeApiPut<T>(path: string, body: any, onSuccess: (data: any)
     return executeApiRequest(path, 'PUT', body, onSuccess, errorMessage);
 }
 
+export function parseCompletion(completion: Completion): CompletionProps[] {
+    const allAmount = completion.sum ?? 1;
+    return [
+        {
+            label: 'Closed',
+            percent: completion.closed / allAmount * 100,
+            color: StatusColors.get('closed') ?? ''
+        },
+        {
+            label: 'Open',
+            percent: completion.open / allAmount * 100,
+            color: StatusColors.get('open') ?? ''
+        },
+        {
+            label: 'Suspended',
+            percent: completion.suspended / allAmount * 100,
+            color: StatusColors.get('suspended') ?? ''
+        },
+        {
+            label: 'Overdue',
+            percent: completion.overdue / allAmount * 100,
+            color: StatusColors.get('overdue') ?? ''
+        },
+    ] 
+}
+
+export function parseActivity(activity: Activity[]): ChartItem[] {
+    return activity.map(item => ({
+        label: item.day,
+        value: item.time
+    }));
+}

client/src/components/forms/ProjectForm/project-form.scss

+@use 'styles/mixins.scss'as mx;
+
 .project-form {
     .color-list {
         display: flex;
         flex-wrap: wrap;
-        margin-right: -20px;
+        margin-right: -10px;
+        @include mx.breakpoint(large) {
+            margin-right: -20px;
+        }
+
         .color-item {
-            width: calc(100% / 7 - 20px);
-            margin-right: 20px;
-            margin-bottom: 20px;
-            padding-bottom: calc(100% / 7 - 20px);
             border-radius: 50%;
             cursor: pointer;
-            opacity: 0.7;
+            opacity: 0.5;
+            margin-right: 10px;
+            margin-bottom: 10px;
+
+            width: calc(100% / 2 - 10px);
+            padding-bottom: calc(100% / 2 - 10px);
+
+            @include mx.breakpoint(medium) {
+                width: calc(100% / 5 - 10px);
+                padding-bottom: calc(100% / 5 - 10px);
+
+            }
+
+            @include mx.breakpoint(large) {
+                margin-right: 20px;
+                margin-bottom: 20px;
+                width: calc(100% / 7 - 20px);
+                padding-bottom: calc(100% / 7 - 20px);
+            }
+
             &.active {
                 opacity: 1;
             }

client/src/components/forms/UserForm/index.tsx

@@ -5,7 +5,7 @@ import TextInput from 'components/ui/TextInput';
 import Button from 'components/ui/Button';
 
 interface Props {
-    onSubmit?: (name?: string, email?: string,) => void;
+    onSubmit?: (name?: string, email?: string, avatar?: File) => void;
     user: User
 }
 
@@ -21,15 +21,29 @@ function validateEmail(email?: string): string | null {
     }
 }
 
+function validateAvatar(avatar?: File): string | null {
+    const validTypes = ['image/jpg', 'image/png', 'image/gif']
+    if (avatar) {
+        if (validTypes.find((type) => type === avatar.type)) {
+            return null;
+        } else {
+            return 'Only files from type jpg, png or gif are allowed'
+        }
+    } else {
+        return null;
+    }
+}
+
 export default function UserForm({ user, onSubmit }: Props) {
     const [name, setName] = useState(user.realname);
     const [email, setEmail] = useState(user.email);
+    const [avatar, setAvatar] = useState<File>();
     const handleSubmit = useCallback(async (e: FormEvent) => {
         e.preventDefault();
-        if (validateEmail(email) === null) {
-            onSubmit?.(name, email);
+        if (validateEmail(email) === null || validateAvatar(avatar) === null) {
+            onSubmit?.(name, email, avatar);
         }
-    }, [onSubmit, name, email]);
+    }, [onSubmit, name, email, avatar]);
     return (
         <form onSubmit={handleSubmit} className="user-form">
             <div className="fields">
@@ -49,7 +63,12 @@ export default function UserForm({ user, onSubmit }: Props) {
                 <div className="avatar-upload">
                     <div className="label">Avatar</div>
                     <label htmlFor="avatar" className="avatar-field">
-                        <input type="file" id="avatar" name="avatar" />
+                        <input type="file" id="avatar" name="avatar" onChange={(e) => {
+                            if (e.target.files && e.target.files.length > 0) {
+                                setAvatar(e.target.files[0])
+                            }
+                        }} />
+                        {avatar ? 'Selected file: ' + avatar.name : 'Select a file'}
                     </label>
                 </div>
             </div>

client/src/components/forms/UserForm/user-form.scss

@@ -26,6 +26,9 @@
     .avatar-upload {
         width: 100%;
         position: relative;
+        input {
+            display: none;
+        }
         .label {
             position: absolute;
             top: -2px;
@@ -42,6 +45,7 @@
             height: 80px;
             margin-bottom: 20px;
             background: s.$light;
+            font-size: 18px;
         }
     }
 }
\ No newline at end of file

client/src/components/graphs/CircularProgress/circular-progress.scss

@@ -42,7 +42,7 @@
 
         circle {
             fill: none;
-            stroke: #dcdcdc;
+            stroke: #F3F3F3;
             stroke-width: 8;
         }
     }

client/src/components/helpers/Filter/filter.scss

@@ -32,7 +32,7 @@
         .tag-item {
             margin: 10px;
             cursor: pointer;
-            opacity: 0.75;
+            opacity: 0.5;
             &.active {
                 opacity: 1;
             }

client/src/components/layout/DetailGrid/detail-grid.scss

@@ -5,17 +5,17 @@
     flex-wrap: wrap;
     margin: -12px;
     @include mx.breakpoint(medium) {
-        margin: -16px;
+        margin: -10px;
     }
     .box-container {
         margin: 12px;
         width: calc(50% - 24px);
         @include mx.breakpoint(medium) {
-            width: calc(25% - 32px);
-            margin: 16px;
+            width: calc(33.33% - 20px);
+            margin: 10px;
         }
         @include mx.breakpoint(large) {
-            width: calc(20% - 32px);
+            width: calc(20% - 20px);
         }
     }
 }

client/src/components/layout/ProjectGrid/index.tsx

@@ -8,6 +8,7 @@ interface Props {
 }
 
 export default function ProjectGrid({ projects }: Props) {
+    let counter = 0;
     return (
         <div className="project-grid">
             <div className="add-project project">
@@ -16,10 +17,12 @@ export default function ProjectGrid({ projects }: Props) {
                 </Link>
             </div>
             {
-                projects.map(project => (
-                    <Project key={project.id} project={project} />
-                ))
-            }
+                projects.map(project => {
+                    counter++;
+                    return <Project key={project.id} project={project} large={(counter - 1) % 5 === 0 && projects.length - 3 >= counter} />
+                }
+
+                )}
         </div >
     )
 }
\ No newline at end of file

client/src/components/layout/ProjectGrid/project-grid.scss

@@ -7,47 +7,31 @@
     grid-auto-rows: max-content;
     grid-auto-flow: row;
     grid-template-columns: repeat(2, 1fr);
+    gap: 25px;
 
     @include mx.breakpoint(medium) {
         grid-template-columns: repeat(4, 1fr);
+        gap: 30px;
     }
 
-    gap: 20px;
 
     .add-project {
         font-size: 64px;
         font-weight: s.$weight-semi-bold;
         cursor: pointer;
+
+        a {
+            color: s.$body-color;
+        }
     }
 
     .project {
         width: 100%;
         padding-bottom: 100%;
 
-        @include mx.breakpoint-down(large) {
-            &:nth-child(5n-3) {
-                grid-row: span 2;
-                height: 100%;
-
-                .details {
-                    display: block;
-                }
-            }
-        }
-
-        @include mx.breakpoint(large) {
-            &:nth-child(8n - 4) {
-                grid-row: span 2;
-                height: 100%;
-
-                .details {
-                    display: block;
-                }
-            }
-        }
-
-        &:last-child {
-            height: 0;
+        &.large {
+            grid-row: span 2;
+            height: 100%;
         }
 
     }

client/src/components/ui/AssigneeList/assignee-list.scss

@@ -2,12 +2,16 @@
 
 .assignee-list {
     display: flex;
+    margin-left: 8px;
 
     &:hover {
         .assignee {
             margin-left: 0;
         }
     }
+    .tooltip {
+        margin-left: -8px;
+    }
 
     .assignee,
     .avatar {

client/src/components/ui/Button/button.scss

@@ -6,7 +6,7 @@
     font-size: fn.toRem(18);
     font-weight: s.$weight-bold;
     background: s.$linear-gradient;
-    box-shadow: 0px 5px 15px rgba(s.$primary, 0.1);
+    box-shadow: 0px 5px 15px rgba(s.$black, 0.1);
     border-radius: 25px;
     display: inline-block;
     color: s.$white;
@@ -21,19 +21,20 @@
 
     &:hover,
     &:focus {
-        box-shadow: 0px 10px 25px rgba(s.$primary, 0.25);
+        box-shadow: 0px 10px 25px rgba(s.$black, 0.15);
         cursor: pointer;
         color: s.$white;
         transform: translateY(-5%);
+        transform-origin: top center;
     }
 
     &:active {
-        transform: scale(0.9);
+        transform: scale(0.99);
     }
 
     &.dark {
         background: s.$primary-dark;
-        box-shadow: 0px 5px 15px rgba(s.$primary-dark, 0.1);
+        box-shadow: 0px 5px 15px rgba(s.$black, 0.1);
     }
     
     &.hollow {

client/src/components/ui/Project/index.tsx

@@ -8,38 +8,47 @@ import { Link } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { Completion } from 'adapters/util';
 import LoadingScreen from '../LoadingScreen';
+import Tag from '../Tag';
+import { StatusColors } from 'adapters/project';
 
 export interface ProjectProps {
     project: IProject
+    large?: boolean
 }
 
-export default function Project({ project }: ProjectProps) {
+export default function Project({ project, large }: ProjectProps) {
     const [assignees, setAssignees] = useState<AssignedUser[]>([]);
-    const [completion, setCOmpletion] = useState<Completion>();
+    const [completion, setCompletion] = useState<Completion>();
+    
     useEffect(() => {
         getProjectAssignees(project.id).then((assignee) => setAssignees(assignee))
-        getProjectCompletion(project.id).then((completion) => setCOmpletion(completion));
+        getProjectCompletion(project.id).then((completion) => setCompletion(completion));
     }, [project]);
 
     return (
-        <Link to={'/projects/' + project.id} className="project">
+        <Link to={'/projects/' + project.id} className={'project ' + (large ? 'large' : '')}>
+            <div className="status">
+                <Tag label={project.status} color={StatusColors.get(project.status)} />
+            </div>
             <div className="content">
                 {
                     completion ? (
-                        <CircularProgress percent={completion.closed / (completion.sum ?? 1) * 100 } color={project.color} />
+                        <CircularProgress percent={completion.closed / (completion.sum ?? 1) * 100} color={project.color} />
                     ) : (
                         <LoadingScreen />
                     )
                 }
                 <div className="title">{project.name}</div>
-                <div className="details">
-                    {project.deadline && (
-                        <div className="range">{project.deadline.getDate()}</div>
-                    )}
-                    <AssigneeList assignees={assignees} max={3} />
-                </div>
+                {
+                    large &&
+                    <div className="details">
+                        {project.deadline && (
+                            <div className="deadline">{project.deadline.toUTCString()}</div>
+                        )}
+                        <AssigneeList assignees={assignees} max={3} />
+                    </div>
+                }
             </div>
-
         </Link>
     );
 }

client/src/components/ui/Project/project.scss

 @use 'styles/settings'as s;
+@use 'styles/mixins'as mx;
 
 .project {
     border-radius: 10px;
@@ -15,6 +16,15 @@
         box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1);
     }
 
+    .circular-progress {
+        justify-content: center;
+
+        svg {
+            height: auto;
+            width: 50%;
+        }
+    }
+
     .content {
         display: flex;
         padding: 20px;
@@ -29,10 +39,14 @@
     }
 
     .title {
-        margin-top: 10px;
+        margin-top: 15px;
         line-height: 1.4;
-        font-size: 14px;
+        font-size: 16px;
         font-weight: s.$weight-bold;
+
+        @include mx.breakpoint(large) {
+            font-size: 20px;
+        }
     }
 
 
@@ -42,12 +56,25 @@
         line-height: 1.8;
     }
 
+    .status {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 12px;
+    }
+
     .details {
-        margin-top: 10px;
-        display: none;
+        margin-top: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px;
+        flex-direction: column;
+        text-align: center;
 
-        .range {
-            margin-bottom: 20px;
+        .deadline {
+            margin-bottom: 10px;
         }
 
         font-size: 14px;

client/src/components/ui/Tag/index.tsx

@@ -8,7 +8,7 @@ interface Props {
 
 export default function Tag({ label, icon, color }: Props) {
     return (
-        <span className={'tag ' + (color ? 'bg-gradient-' + color : '')}>
+        <span className={'tag ' + (color ? 'bg-gradient-horizontal-' + color : '')}>
             {icon && (
                 <i className="icon material-icons">
                     {icon}

client/src/components/ui/Tag/tag.scss

@@ -16,7 +16,7 @@
     }
 
     &:not([class*='bg-gradient']) {
-        background: s.$linear-gradient;
+        background: s.$linear-gradient-horizontal;
     }
 
 }
\ No newline at end of file

client/src/components/ui/Task/task.scss

@@ -16,7 +16,7 @@
         box-shadow: 0 5px 30px rgba(s.$black, 0.15);
         transform: translateY(-5px);
 
-        .project-indicator {
+        .indicator {
             height: 40%;
         }
     }