From c5020f67797dafb9983572ca85df256ce974d92f Mon Sep 17 00:00:00 2001 From: Peshwas Mofak Date: Fri, 25 Mar 2022 17:34:24 +0100 Subject: [PATCH 01/15] feat: add metro-boxes for dashboard + styling --- frontend/src/pages/Dashboard.tsx | 48 ++++++++++++++++++++++++-------- 1 file changed, 36 insertions(+), 12 deletions(-) diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index a8d12917..dfd0c0bc 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -1,6 +1,6 @@ import { Box, Button, createStyles } from '@mantine/core' import { useNavigate } from 'react-router-dom' -import { CalendarEvent, FileText, Users } from 'tabler-icons-react' +import { CalendarEvent, FileText, Lock, Scale, Trash, Users } from 'tabler-icons-react' const useStyles = createStyles((theme) => ({ dashboardWrapper: { @@ -8,10 +8,29 @@ const useStyles = createStyles((theme) => ({ height: '100%', display: 'flex', flexDirection: 'column', - justifyContent: 'center', alignItems: 'center', color: 'white', }, + metroBoxWrapper: { + margin: 0, + height: '100%', + display: 'flex', + flexDirection:'row', + gap: '1.5rem', + alignItems: 'center', + color: theme.colors.ntnui_yellow[9], + }, + metroBoxes: { + border: '2px solid ' + theme.colors.ntnui_yellow[9], + cursor: 'pointer', + '&:hover': { + transform: 'translateY(-0.3rem)', + }, + '&:active': { + transform: 'scale(0.98)' + } + + }, })) function Dashboard() { @@ -20,16 +39,21 @@ function Dashboard() { return ( -

Hei, Bolle bollesen!

- - - +

Hei, Bolle Bollesen!

+
+ navigate('/applications')}> + Søknader + + navigate('/admission-status')}> + Opptaksstatus + + navigate('/application-period')}> + Opptaksperiode + + navigate('/application-period')}> + Tilganger + +
) } From d0851dc747642d1922c88bef6c490c677c446206 Mon Sep 17 00:00:00 2001 From: supapesh Date: Sun, 27 Mar 2022 16:19:59 +0200 Subject: [PATCH 02/15] feat: add 4 boxes for dashboard + relevant styling --- frontend/src/pages/Dashboard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index dfd0c0bc..20964c61 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -1,6 +1,6 @@ -import { Box, Button, createStyles } from '@mantine/core' +import { Box, createStyles } from '@mantine/core' import { useNavigate } from 'react-router-dom' -import { CalendarEvent, FileText, Lock, Scale, Trash, Users } from 'tabler-icons-react' +import { CalendarEvent, FileText, Lock, Users } from 'tabler-icons-react' const useStyles = createStyles((theme) => ({ dashboardWrapper: { From 4bcf244c9d1e8d188a606d5280ac37fb066ff6f7 Mon Sep 17 00:00:00 2001 From: supapesh Date: Tue, 29 Mar 2022 14:39:57 +0200 Subject: [PATCH 03/15] fix: change outlines of icons to thinner --- frontend/src/pages/Dashboard.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index 20964c61..5c265aab 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -22,6 +22,11 @@ const useStyles = createStyles((theme) => ({ }, metroBoxes: { border: '2px solid ' + theme.colors.ntnui_yellow[9], + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '1rem', + padding: '1rem', cursor: 'pointer', '&:hover': { transform: 'translateY(-0.3rem)', @@ -42,16 +47,16 @@ function Dashboard() {

Hei, Bolle Bollesen!

navigate('/applications')}> - Søknader + Søknader navigate('/admission-status')}> - Opptaksstatus + Opptaksstatus navigate('/application-period')}> - Opptaksperiode + Opptaksperiode navigate('/application-period')}> - Tilganger + Tilganger
From 61698cfbf53cf869a0d670bed5761961794d2971 Mon Sep 17 00:00:00 2001 From: supapesh Date: Mon, 4 Apr 2022 18:03:20 +0200 Subject: [PATCH 04/15] feat: add service and add function for dates --- frontend/src/pages/Dashboard.tsx | 41 +++++++++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index 5c265aab..9707f2eb 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -1,6 +1,8 @@ import { Box, createStyles } from '@mantine/core' +import { useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' -import { CalendarEvent, FileText, Lock, Users } from 'tabler-icons-react' +import { CalendarEvent, FileText, Loader, Lock, Users } from 'tabler-icons-react' +import { isApplicationPeriodActive, getAdmissionPeriod } from '../services/Applications' const useStyles = createStyles((theme) => ({ dashboardWrapper: { @@ -41,6 +43,42 @@ const useStyles = createStyles((theme) => ({ function Dashboard() { const { classes } = useStyles() const navigate = useNavigate() + const [periodOpen, setPeriodOpen] = useState(false) + const [startDate, setStartDate] = useState("") + const [endDate, setEndDate] = useState("") + + useEffect(() => { + const getApplicationPeriodActiveAsync = async () => { + try { + const response = await isApplicationPeriodActive() + setPeriodOpen(response) + if (response) { + const getApplicationsPeriodAsync = async () => { + const response = await getAdmissionPeriod() + const parsedEndDate = new Date( + response.admissionPeriod.end_date + ).toLocaleDateString('no-No', { + month: 'long', + day: '2-digit', + year: 'numeric', + }) + const parsedStartDate = new Date( + response.admissionPeriod.start_date).toLocaleDateString('no-No', { + month: 'long', + day: '2-digit', + year: 'numeric', + }) + setStartDate(parsedStartDate) + setEndDate(parsedEndDate) + } + getApplicationsPeriodAsync() + } + } catch (err) { + setPeriodOpen(false) + } + } + getApplicationPeriodActiveAsync() + }, []) return ( @@ -64,3 +102,4 @@ function Dashboard() { } export default Dashboard + From eaf30a8f24b283a2c13f21038b72a7c7a8849a60 Mon Sep 17 00:00:00 2001 From: supapesh Date: Wed, 6 Apr 2022 15:24:36 +0200 Subject: [PATCH 05/15] feat: add styling to dates + responsive design --- frontend/src/pages/Dashboard.tsx | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index 9707f2eb..56f44bd9 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -1,9 +1,10 @@ import { Box, createStyles } from '@mantine/core' import { useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' -import { CalendarEvent, FileText, Loader, Lock, Users } from 'tabler-icons-react' +import { CalendarEvent, FileText, Lock, Users } from 'tabler-icons-react' import { isApplicationPeriodActive, getAdmissionPeriod } from '../services/Applications' + const useStyles = createStyles((theme) => ({ dashboardWrapper: { margin: 0, @@ -21,6 +22,12 @@ const useStyles = createStyles((theme) => ({ gap: '1.5rem', alignItems: 'center', color: theme.colors.ntnui_yellow[9], + '@media (max-width: 900px)': { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'center', + alignItems: 'center', + }, }, metroBoxes: { border: '2px solid ' + theme.colors.ntnui_yellow[9], @@ -30,14 +37,13 @@ const useStyles = createStyles((theme) => ({ gap: '1rem', padding: '1rem', cursor: 'pointer', - '&:hover': { - transform: 'translateY(-0.3rem)', - }, '&:active': { transform: 'scale(0.98)' - } - + }, }, + date: { + color: 'royalblue', + } })) function Dashboard() { @@ -83,18 +89,19 @@ function Dashboard() { return (

Hei, Bolle Bollesen!

+ {periodOpen ? (

Opptaksperioden er satt fra {startDate} til {endDate}

) : (

Det er for tiden ingen satt opptaksperiode

)}
navigate('/applications')}> - Søknader + Søknader navigate('/admission-status')}> - Opptaksstatus + Opptaksstatus - navigate('/application-period')}> - Opptaksperiode + navigate('/admission-period')}> + Opptaksperiode - navigate('/application-period')}> - Tilganger + navigate('/admission-period')}> + Tilganger
From 99e039cbbb314283a21d96243cbe0655c6ec132a Mon Sep 17 00:00:00 2001 From: supapesh Date: Wed, 6 Apr 2022 15:37:22 +0200 Subject: [PATCH 06/15] fix: remove "access"-page; not in this sprint --- frontend/src/pages/Dashboard.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index 56f44bd9..7e66c30b 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -100,9 +100,6 @@ function Dashboard() { navigate('/admission-period')}> Opptaksperiode - navigate('/admission-period')}> - Tilganger - ) From dede48e8cec4446e2ebfa623d97c01556fb1202e Mon Sep 17 00:00:00 2001 From: supapesh Date: Wed, 6 Apr 2022 15:38:56 +0200 Subject: [PATCH 07/15] chore: run fix --- frontend/src/pages/Dashboard.tsx | 61 +++++++++++++++++++++----------- 1 file changed, 40 insertions(+), 21 deletions(-) diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index 7e66c30b..29ddfe40 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -1,9 +1,11 @@ import { Box, createStyles } from '@mantine/core' import { useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' -import { CalendarEvent, FileText, Lock, Users } from 'tabler-icons-react' -import { isApplicationPeriodActive, getAdmissionPeriod } from '../services/Applications' - +import { CalendarEvent, FileText, Users } from 'tabler-icons-react' +import { + isApplicationPeriodActive, + getAdmissionPeriod, +} from '../services/Applications' const useStyles = createStyles((theme) => ({ dashboardWrapper: { @@ -18,7 +20,7 @@ const useStyles = createStyles((theme) => ({ margin: 0, height: '100%', display: 'flex', - flexDirection:'row', + flexDirection: 'row', gap: '1.5rem', alignItems: 'center', color: theme.colors.ntnui_yellow[9], @@ -38,21 +40,21 @@ const useStyles = createStyles((theme) => ({ padding: '1rem', cursor: 'pointer', '&:active': { - transform: 'scale(0.98)' + transform: 'scale(0.98)', }, }, date: { color: 'royalblue', - } + }, })) function Dashboard() { const { classes } = useStyles() const navigate = useNavigate() const [periodOpen, setPeriodOpen] = useState(false) - const [startDate, setStartDate] = useState("") - const [endDate, setEndDate] = useState("") - + const [startDate, setStartDate] = useState('') + const [endDate, setEndDate] = useState('') + useEffect(() => { const getApplicationPeriodActiveAsync = async () => { try { @@ -69,7 +71,8 @@ function Dashboard() { year: 'numeric', }) const parsedStartDate = new Date( - response.admissionPeriod.start_date).toLocaleDateString('no-No', { + response.admissionPeriod.start_date + ).toLocaleDateString('no-No', { month: 'long', day: '2-digit', year: 'numeric', @@ -89,21 +92,37 @@ function Dashboard() { return (

Hei, Bolle Bollesen!

- {periodOpen ? (

Opptaksperioden er satt fra {startDate} til {endDate}

) : (

Det er for tiden ingen satt opptaksperiode

)} + {periodOpen ? ( +

+ Opptaksperioden er satt fra{' '} + {startDate} til{' '} + {endDate}{' '} +

+ ) : ( +

Det er for tiden ingen satt opptaksperiode

+ )}
- navigate('/applications')}> - Søknader - - navigate('/admission-status')}> - Opptaksstatus - - navigate('/admission-period')}> - Opptaksperiode - + navigate('/applications')} + > + Søknader + + navigate('/admission-status')} + > + Opptaksstatus + + navigate('/admission-period')} + > + Opptaksperiode +
) } export default Dashboard - From 52b8d6cb2e9cffb466bf6b970e47d1aa88e06164 Mon Sep 17 00:00:00 2001 From: supapesh Date: Fri, 8 Apr 2022 15:23:54 +0200 Subject: [PATCH 08/15] fix: implement many visual changes from review --- frontend/src/pages/Dashboard.tsx | 40 +++++++++++++++++++++++++------- 1 file changed, 31 insertions(+), 9 deletions(-) diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index 29ddfe40..3b4fd593 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -9,7 +9,7 @@ import { const useStyles = createStyles((theme) => ({ dashboardWrapper: { - margin: 0, + margin: '1rem', height: '100%', display: 'flex', flexDirection: 'column', @@ -17,6 +17,7 @@ const useStyles = createStyles((theme) => ({ color: 'white', }, metroBoxWrapper: { + paddingTop: '1rem', margin: 0, height: '100%', display: 'flex', @@ -33,6 +34,8 @@ const useStyles = createStyles((theme) => ({ }, metroBoxes: { border: '2px solid ' + theme.colors.ntnui_yellow[9], + width: '170px', + borderRadius: theme.radius.sm, display: 'flex', flexDirection: 'column', alignItems: 'center', @@ -41,10 +44,27 @@ const useStyles = createStyles((theme) => ({ cursor: 'pointer', '&:active': { transform: 'scale(0.98)', + color: '#F8F082', + boxShadow: '0 0 2px #F8F082', + }, + '&:hover': { + color: '#F8F082', + boxShadow: '0 0 10px #F8F082', + transition: 'ease-in-out 0.1s', }, }, date: { - color: 'royalblue', + color: theme.colors.ntnui_blue[9], + fontWeight: '600', + textAlign: 'center', + fontSize: '1.3rem', + }, + text: { + textAlign: 'center', + fontWeight: 'lighter', + }, + header: { + fontWeight: '600', }, })) @@ -91,34 +111,36 @@ function Dashboard() { return ( -

Hei, Bolle Bollesen!

+

+ Hei, Bolle Bollesen! +

{periodOpen ? ( -

- Opptaksperioden er satt fra{' '} +

+ Opptaksperioden er satt fra{' '} {startDate} til{' '} {endDate}{' '}

) : ( -

Det er for tiden ingen satt opptaksperiode

+

Det er for tiden ingen satt opptaksperiode

)}
navigate('/applications')} > - Søknader + Søknader navigate('/admission-status')} > - Opptaksstatus + Opptaksstatus navigate('/admission-period')} > - Opptaksperiode + Opptaksperiode
From 253d7ca0519c40c54297913db982a8dfe57754a9 Mon Sep 17 00:00:00 2001 From: supapesh Date: Fri, 8 Apr 2022 15:56:44 +0200 Subject: [PATCH 09/15] feat: display all functionalities if organizer --- frontend/src/pages/Dashboard.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index 3b4fd593..7f311df0 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -6,6 +6,7 @@ import { isApplicationPeriodActive, getAdmissionPeriod, } from '../services/Applications' +import isOrganizer from '../utils/isOrganizer' const useStyles = createStyles((theme) => ({ dashboardWrapper: { @@ -74,10 +75,14 @@ function Dashboard() { const [periodOpen, setPeriodOpen] = useState(false) const [startDate, setStartDate] = useState('') const [endDate, setEndDate] = useState('') + const [isTheOrganizer, setTheOrganizer] = useState(false) useEffect(() => { const getApplicationPeriodActiveAsync = async () => { try { + if (await isOrganizer()) { + setTheOrganizer(true) + } const response = await isApplicationPeriodActive() setPeriodOpen(response) if (response) { @@ -136,12 +141,14 @@ function Dashboard() { > Opptaksstatus - navigate('/admission-period')} - > - Opptaksperiode - + {isTheOrganizer && ( + navigate('/admission-period')} + > + Opptaksperiode + + )} ) From 1d96c0813179c54cd4f86649405d8f63b997cd76 Mon Sep 17 00:00:00 2001 From: supapesh Date: Wed, 13 Apr 2022 14:43:42 +0200 Subject: [PATCH 10/15] fix: styling and add loader to dates --- frontend/src/pages/Dashboard.tsx | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index 7f311df0..89fd4bbb 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -1,4 +1,4 @@ -import { Box, createStyles } from '@mantine/core' +import { Box, createStyles, Loader } from '@mantine/core' import { useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' import { CalendarEvent, FileText, Users } from 'tabler-icons-react' @@ -7,6 +7,7 @@ import { getAdmissionPeriod, } from '../services/Applications' import isOrganizer from '../utils/isOrganizer' +import { getNtnuiProfile } from '../../../package/index' const useStyles = createStyles((theme) => ({ dashboardWrapper: { @@ -43,6 +44,7 @@ const useStyles = createStyles((theme) => ({ gap: '1rem', padding: '1rem', cursor: 'pointer', + transition: 'ease-in-out 0.1s', '&:active': { transform: 'scale(0.98)', color: '#F8F082', @@ -51,7 +53,6 @@ const useStyles = createStyles((theme) => ({ '&:hover': { color: '#F8F082', boxShadow: '0 0 10px #F8F082', - transition: 'ease-in-out 0.1s', }, }, date: { @@ -63,10 +64,17 @@ const useStyles = createStyles((theme) => ({ text: { textAlign: 'center', fontWeight: 'lighter', + '*': { + // Icon + margin: '0 0 -3px 0', + }, }, header: { fontWeight: '600', }, + loader: { + margin: '0 0 -3px 0', + }, })) function Dashboard() { @@ -76,8 +84,10 @@ function Dashboard() { const [startDate, setStartDate] = useState('') const [endDate, setEndDate] = useState('') const [isTheOrganizer, setTheOrganizer] = useState(false) + const [isLoading, setIsLoading] = useState(false) useEffect(() => { + setIsLoading(true) const getApplicationPeriodActiveAsync = async () => { try { if (await isOrganizer()) { @@ -104,6 +114,7 @@ function Dashboard() { }) setStartDate(parsedStartDate) setEndDate(parsedEndDate) + setIsLoading(false) } getApplicationsPeriodAsync() } @@ -122,8 +133,17 @@ function Dashboard() { {periodOpen ? (

Opptaksperioden er satt fra{' '} - {startDate} til{' '} - {endDate}{' '} + {isLoading ? ( + + ) : ( + {startDate} + )}{' '} + til{' '} + {isLoading ? ( + + ) : ( + {endDate} + )}

) : (

Det er for tiden ingen satt opptaksperiode

From 7678aaa8e7f208248d5abead4b1a73b43979857f Mon Sep 17 00:00:00 2001 From: supapesh Date: Mon, 18 Apr 2022 16:20:52 +0200 Subject: [PATCH 11/15] feat: add retrieval of userprofile and display it --- frontend/src/pages/Dashboard.tsx | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index 89fd4bbb..142d53a4 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -7,7 +7,7 @@ import { getAdmissionPeriod, } from '../services/Applications' import isOrganizer from '../utils/isOrganizer' -import { getNtnuiProfile } from '../../../package/index' +import { IUserProfile, getUserProfile } from '../services/User' const useStyles = createStyles((theme) => ({ dashboardWrapper: { @@ -72,6 +72,9 @@ const useStyles = createStyles((theme) => ({ header: { fontWeight: '600', }, + subHeader: { + fontWeight: 'lighter', + }, loader: { margin: '0 0 -3px 0', }, @@ -85,9 +88,15 @@ function Dashboard() { const [endDate, setEndDate] = useState('') const [isTheOrganizer, setTheOrganizer] = useState(false) const [isLoading, setIsLoading] = useState(false) + const [userName, setUserName] = useState() useEffect(() => { setIsLoading(true) + const getUser = async () => { + const user = await getUserProfile() + setUserName(user) + setIsLoading(false) + } const getApplicationPeriodActiveAsync = async () => { try { if (await isOrganizer()) { @@ -123,12 +132,20 @@ function Dashboard() { } } getApplicationPeriodActiveAsync() + getUser() }, []) return (

- Hei, Bolle Bollesen! + {isLoading ? ( + + ) : ( + + Hei, + {userName?.first_name} {userName?.last_name} + + )}

{periodOpen ? (

From a90f02a418ecc3c1f31deba9362164ace72f8c32 Mon Sep 17 00:00:00 2001 From: supapesh Date: Wed, 20 Apr 2022 12:14:07 +0200 Subject: [PATCH 12/15] fix: make fontweight thinner on header --- frontend/src/pages/Dashboard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index 142d53a4..2fce2a33 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -70,7 +70,7 @@ const useStyles = createStyles((theme) => ({ }, }, header: { - fontWeight: '600', + fontWeight: '500', }, subHeader: { fontWeight: 'lighter', From 0791b151ff92eda94201d9b548b3a5425d23922c Mon Sep 17 00:00:00 2001 From: Livia Emilie Valenti Stokke Date: Wed, 20 Apr 2022 20:50:59 +0200 Subject: [PATCH 13/15] fix: status date format --- frontend/src/components/StatusInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/StatusInput.tsx b/frontend/src/components/StatusInput.tsx index 0a5d9a7f..4aa6ab8b 100644 --- a/frontend/src/components/StatusInput.tsx +++ b/frontend/src/components/StatusInput.tsx @@ -141,7 +141,7 @@ function StatusInput({ setByValue && `Satt av ${setByValue} ${dayjs(updatedDateValue) .locale('nb') - .format('d. MMM HH:mm')}` + .format('D. MMM HH:mm')}` } disabled={!allowedToChange || isLoading} placeholder='Pick one' From 738c98bbfdffe89476361ebf7a98a09fd09cc727 Mon Sep 17 00:00:00 2001 From: Livia Emilie Valenti Stokke Date: Wed, 20 Apr 2022 22:40:56 +0200 Subject: [PATCH 14/15] feat: transition on load --- frontend/src/pages/Dashboard.tsx | 152 +++++++++++++++---------------- 1 file changed, 71 insertions(+), 81 deletions(-) diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index 2fce2a33..ff1bcdb2 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -1,4 +1,4 @@ -import { Box, createStyles, Loader } from '@mantine/core' +import { Box, createStyles, Transition } from '@mantine/core' import { useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' import { CalendarEvent, FileText, Users } from 'tabler-icons-react' @@ -8,6 +8,8 @@ import { } from '../services/Applications' import isOrganizer from '../utils/isOrganizer' import { IUserProfile, getUserProfile } from '../services/User' +import dayjs from 'dayjs' +require('dayjs/locale/nb') const useStyles = createStyles((theme) => ({ dashboardWrapper: { @@ -83,7 +85,7 @@ const useStyles = createStyles((theme) => ({ function Dashboard() { const { classes } = useStyles() const navigate = useNavigate() - const [periodOpen, setPeriodOpen] = useState(false) + const [periodOpen, setPeriodOpen] = useState(true) const [startDate, setStartDate] = useState('') const [endDate, setEndDate] = useState('') const [isTheOrganizer, setTheOrganizer] = useState(false) @@ -92,101 +94,89 @@ function Dashboard() { useEffect(() => { setIsLoading(true) - const getUser = async () => { - const user = await getUserProfile() - setUserName(user) - setIsLoading(false) - } - const getApplicationPeriodActiveAsync = async () => { + const getDashboardDataAsync = async () => { try { + // Get user + const user = await getUserProfile() + setUserName(user) if (await isOrganizer()) { setTheOrganizer(true) } + // Check if application period active const response = await isApplicationPeriodActive() setPeriodOpen(response) + // If active, get application period if (response) { - const getApplicationsPeriodAsync = async () => { - const response = await getAdmissionPeriod() - const parsedEndDate = new Date( - response.admissionPeriod.end_date - ).toLocaleDateString('no-No', { - month: 'long', - day: '2-digit', - year: 'numeric', - }) - const parsedStartDate = new Date( - response.admissionPeriod.start_date - ).toLocaleDateString('no-No', { - month: 'long', - day: '2-digit', - year: 'numeric', - }) - setStartDate(parsedStartDate) - setEndDate(parsedEndDate) - setIsLoading(false) - } - getApplicationsPeriodAsync() + const response = await getAdmissionPeriod() + const parsedStartDate = dayjs(response.admissionPeriod.start_date) + .locale('nb') + .format('D. MMMM YYYY') + const parsedEndDate = dayjs(response.admissionPeriod.end_date) + .locale('nb') + .format('D. MMMM YYYY') + setStartDate(parsedStartDate) + setEndDate(parsedEndDate) } + setIsLoading(false) } catch (err) { - setPeriodOpen(false) + setIsLoading(false) } } - getApplicationPeriodActiveAsync() - getUser() + getDashboardDataAsync() }, []) return ( -

- {isLoading ? ( - - ) : ( - - Hei, - {userName?.first_name} {userName?.last_name} - - )} -

- {periodOpen ? ( -

- Opptaksperioden er satt fra{' '} - {isLoading ? ( - - ) : ( - {startDate} - )}{' '} - til{' '} - {isLoading ? ( - - ) : ( - {endDate} - )} -

- ) : ( -

Det er for tiden ingen satt opptaksperiode

- )} -
- navigate('/applications')} - > - Søknader - - navigate('/admission-status')} - > - Opptaksstatus - - {isTheOrganizer && ( - navigate('/admission-period')} - > - Opptaksperiode - + + {(styles) => ( + <> +

+ + Hei, + {userName?.first_name} {userName?.last_name} + +

+

+ {periodOpen ? ( + <> + Opptaksperioden er satt + fra {startDate} til{' '} + {endDate} + + ) : ( + Det er for tiden ingen satt opptaksperiode + )} +

+
+ navigate('/applications')} + > + Søknader + + navigate('/admission-status')} + > + Opptaksstatus + + {isTheOrganizer && ( + navigate('/admission-period')} + > + Opptaksperiode + + )} +
+ )} -
+ ) } From a927a4746c5c23549043a2d8463445a5526f679c Mon Sep 17 00:00:00 2001 From: supapesh Date: Thu, 21 Apr 2022 00:07:31 +0200 Subject: [PATCH 15/15] chore: run fix --- frontend/src/pages/Dashboard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx index ff1bcdb2..b0a396a0 100644 --- a/frontend/src/pages/Dashboard.tsx +++ b/frontend/src/pages/Dashboard.tsx @@ -109,8 +109,8 @@ function Dashboard() { if (response) { const response = await getAdmissionPeriod() const parsedStartDate = dayjs(response.admissionPeriod.start_date) - .locale('nb') - .format('D. MMMM YYYY') + .locale('nb') + .format('D. MMMM YYYY') const parsedEndDate = dayjs(response.admissionPeriod.end_date) .locale('nb') .format('D. MMMM YYYY')