Skip to content

Commit

Permalink
fix(dashboard): rajout du bouton Rafraichir
Browse files Browse the repository at this point in the history
  • Loading branch information
Arnaud AMBROSELLI committed Nov 6, 2023
1 parent 82c78c7 commit 8f89496
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 88 deletions.
2 changes: 1 addition & 1 deletion dashboard/postcss.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ module.exports = {
tailwindcss: {},
autoprefixer: {},
},
}
};
35 changes: 11 additions & 24 deletions dashboard/src/components/TopBar.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import logo from '../assets/logo-green.png';
import { UnBugButton } from '../components/header';
import SelectTeam from './SelectTeam';

import { theme } from '../config';

import { currentTeamState, organisationState, teamsState, userState } from '../recoil/auth';
import API from '../services/api';
import { useRecoilState, useRecoilValue } from 'recoil';
import Notification from './Notification';
import { useDataLoader } from './DataLoader';
import OpenNewWindowIcon from './OpenNewWindowIcon';
import ColorHeaderBand from './ColorHeaderBand';
import UnBugButton from './UnBugButton';

const TopBar = () => {
const [dropdownOpen, setDropdownOpen] = useState(false);
Expand All @@ -23,7 +20,7 @@ const TopBar = () => {
const teams = useRecoilValue(teamsState);
const [currentTeam, setCurrentTeam] = useRecoilState(currentTeamState);

const { resetCache } = useDataLoader();
const { resetCache, refresh, isLoading } = useDataLoader();

return (
<div className="tw-hidden tw-w-full sm:tw-block">
Expand Down Expand Up @@ -52,18 +49,20 @@ const TopBar = () => {
}}
/>
</div>
<div className="tw-flex tw-flex-1 tw-justify-end [&_.dropdown-menu.show]:tw-z-20">
<div className="tw-flex tw-flex-1 tw-justify-end tw-gap-x-4 [&_.dropdown-menu.show]:tw-z-20">
<Notification />
<UnBugButton />
<button type="button" className="button-link !tw-ml-0" disabled={isLoading} onClick={refresh}>
Rafraichir
</button>
<ButtonDropdown direction="down" isOpen={dropdownOpen} toggle={() => setDropdownOpen(!dropdownOpen)}>
<DropdownToggleStyled>
{user?.name}
<div className="tw-ml-2.5 tw-flex tw-h-3 tw-w-3 tw-flex-1 tw-flex-col tw-justify-between">
<DropdownToggle className="tw-ml-2.5 !tw-inline-flex tw-flex-1 tw-items-center tw-justify-between tw-gap-x-2.5 !tw-rounded-full tw-border-main tw-bg-main tw-py-1 !tw-px-4 tw-text-xs">
<span>{user?.name}</span>
<div className="tw-inline-flex tw-h-3 tw-w-3 tw-flex-1 tw-flex-col tw-justify-between">
<div className="tw-block tw-h-px tw-w-full tw-bg-white" />
<div className="tw-block tw-h-px tw-w-full tw-bg-white" />
<div className="tw-block tw-h-px tw-w-full tw-bg-white" />
</div>
</DropdownToggleStyled>
</DropdownToggle>
<DropdownMenu>
<DropdownItem header disabled>
{user?.name} - {user.role}
Expand Down Expand Up @@ -112,6 +111,7 @@ const TopBar = () => {
</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<UnBugButton />
</div>
</aside>
<div className="tw-w-full">
Expand All @@ -121,17 +121,4 @@ const TopBar = () => {
);
};

const DropdownToggleStyled = styled(DropdownToggle)`
border-radius: 40px !important;
padding: 4px 16px;
display: flex;
font-size: 12px;
flex: 1;
justify-content: space-between;
align-items: center;
background-color: ${theme.main};
border-color: ${theme.main};
margin: 0 0 0 1rem;
`;

export default TopBar;
63 changes: 63 additions & 0 deletions dashboard/src/components/UnBugButton.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React from 'react';
import { useDataLoader } from './DataLoader';
import API from '../services/api';
import { ModalBody, ModalContainer, ModalFooter, ModalHeader } from './tailwind/Modal';

export default function UnBugButton() {
const [isModalOpen, setIsModalOpen] = React.useState(false);
const { resetCache } = useDataLoader();
return (
<>
<button
type="button"
className="button-link !tw-ml-0"
onClick={() => {
setIsModalOpen(true);
}}>
Un bug ?
</button>
{isModalOpen && (
<ModalContainer open={isModalOpen} onClose={() => setIsModalOpen(false)} size="xl">
<ModalHeader toggle={() => setIsModalOpen(false)} title="Un bug ? 🪲" />
<ModalBody className="tw-p-4">
<p>
Vous ne voyez plus vos données&nbsp;? C’est peut-être un problème de cache sur votre ordinateur. Nous vous conseillons les étapes
suivantes&nbsp;:
</p>
<ul className="tw-list-disc tw-space-y-2">
<li>
Cliquez{' '}
<button
className={'tw-text-blue-500 tw-underline'}
onClick={() => {
resetCache().then(() => {
return API.logout();
});
}}>
sur ce lien
</button>{' '}
pour réinitialiser le cache et vérifiez si le problème persiste
</li>
<li>
Essayez depuis un autre ordinateur ou un autre compte pour voir si le problème est général ou localisé. Cela aidera les équipes pour
l'étape suivante
</li>
<li>
Si le problème persiste, contactez votre chargé de déploiement&nbsp;:
<ul className="tw-list-disc">
<li>Yoann - [email protected] (06&nbsp;83&nbsp;98&nbsp;29&nbsp;66)</li>
<li>Melissa - [email protected] (06&nbsp;13&nbsp;23&nbsp;33&nbsp;45)</li>
</ul>
</li>
</ul>
</ModalBody>
<ModalFooter>
<button type="button" className="button-cancel" onClick={() => setIsModalOpen(false)}>
Fermer
</button>
</ModalFooter>
</ModalContainer>
)}
</>
);
}
62 changes: 0 additions & 62 deletions dashboard/src/components/header/index.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
import React from 'react';
import BackButton from '../backButton';
import { useDataLoader } from '../DataLoader';
import ButtonCustom from '../ButtonCustom';
import API from '../../services/api';
import { ModalBody, ModalContainer, ModalFooter, ModalHeader } from '../tailwind/Modal';

const Header = ({ title, style = {}, titleStyle = {}, className = '' }) => {
return (
Expand All @@ -13,63 +8,6 @@ const Header = ({ title, style = {}, titleStyle = {}, className = '' }) => {
);
};

export const UnBugButton = () => {
const [isModalOpen, setIsModalOpen] = React.useState(false);
const { resetCache } = useDataLoader();
return (
<>
<ButtonCustom
className="tw-ml-4"
color="link"
title="Un bug ?"
onClick={() => {
setIsModalOpen(true);
}}
/>
{isModalOpen && (
<ModalContainer open={isModalOpen} onClose={() => setIsModalOpen(false)} size="xl">
<ModalHeader toggle={() => setIsModalOpen(false)} title="Un bug ? 🪲" />
<ModalBody className="tw-p-4">
<p>
Vous ne voyez plus vos données&nbsp;? C’est peut-être un problème de cache sur votre ordinateur. Nous vous conseillons les étapes
suivantes&nbsp;:
</p>
<ul className="tw-list-disc tw-space-y-2">
<li>
Cliquez{' '}
<button
className={'tw-text-blue-500 tw-underline'}
onClick={() => {
resetCache().then(() => {
return API.logout();
});
}}>
sur ce lien
</button>{' '}
pour réinitialiser le cache et vérifiez si le problème persiste&nbsp;;
</li>
<li>
Essayez depuis un autre ordinateur ou un autre compte pour voir si le problème est général ou localisé. Cela aidera les équipes pour
l'étape suivante&nbsp;;
</li>
<li>
Si le problème persiste, contactez votre chargé de déploiement :
<ul className="tw-list-disc">
<li>Yoann - [email protected] (06&nbsp;83&nbsp;98&nbsp;29&nbsp;66)</li>
<li>Melissa - [email protected] (06&nbsp;13&nbsp;23&nbsp;33&nbsp;45)</li>
</ul>
</li>
</ul>
</ModalBody>
<ModalFooter>
<ButtonCustom color="secondary" title="Fermer" onClick={() => setIsModalOpen(false)} />
</ModalFooter>
</ModalContainer>
)}
</>
);
};

export const SmallHeaderWithBackButton = ({ className, ...props }) => {
return <Header className={[className, 'tw-py-4 tw-px-0'].join(' ')} title={<BackButton />} {...props} />;
};
Expand Down
2 changes: 1 addition & 1 deletion dashboard/src/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
}

.button-link {
@apply tw-inline-flex tw-w-full tw-cursor-pointer tw-justify-center tw-rounded-md tw-border tw-border-transparent tw-px-4 tw-py-2 tw-font-normal tw-text-main75 hover:tw-underline focus:tw-underline focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-main25 focus:tw-ring-offset-2 disabled:tw-cursor-not-allowed disabled:tw-opacity-30 sm:tw-ml-3 sm:tw-w-auto;
@apply tw-inline-flex tw-w-full tw-cursor-pointer tw-justify-center tw-rounded-md tw-border tw-border-transparent tw-px-4 tw-py-2 tw-font-semibold tw-text-main hover:tw-underline focus:tw-underline focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-main25 focus:tw-ring-offset-2 disabled:tw-cursor-not-allowed disabled:tw-opacity-30 sm:tw-ml-3 sm:tw-w-auto;
}

.button-cancel,
Expand Down

0 comments on commit 8f89496

Please sign in to comment.