rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-02-20 14:54:15 +01:00
Code Issues Releases Activity

packs popover

Browse Source
This commit is contained in:
Sylvain 2021-06-23 11:33:42 +02:00
parent 8cc4811794
commit f81e0910c2
4 changed files with 104 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/frontend/src/javascript/components/pricing/configure-packs-button.tsx
View File

@ -1,6 +1,7 @@
import React, { useState } from 'react';
import { PrepaidPack } from '../../models/prepaid-pack';
import { FabModal } from '../base/fab-modal';
import { useTranslation } from 'react-i18next';
interface ConfigurePacksButtonProps {
packs: Array<PrepaidPack>,
@ -12,6 +13,7 @@ interface ConfigurePacksButtonProps {
* When clicked, it opens a modal dialog to configure (add/delete/edit/remove) prepaid-packs.
*/
export const ConfigurePacksButton: React.FC<ConfigurePacksButtonProps> = ({ packs, onError }) => {
const { t } = useTranslation('admin');
const [showList, setShowList] = useState<boolean>(false);
const [addPackModal, setAddPackModal] = useState<boolean>(false);
@ -28,12 +30,23 @@ export const ConfigurePacksButton: React.FC<ConfigurePacksButtonProps> = ({ pack
}
return (
<div className="configure-packs-button" onMouseOver={toggleShowList} onClick={handleAddPack}>
<i className="fas fa-box-open" />
{packs && showList && <div className="packs-overview">
{packs.map(p => <div>{p.minutes / 60}h - {p.amount}</div>)}
<div className="configure-packs-button" onClick={toggleShowList}>
<button className="packs-button">
<i className="fas fa-box" />
</button>
{showList && <div className="packs-popover">
<div className="popover-title">
<h3>{t('app.admin.configure_packs_button.packs')}</h3>
<button className="add-pack-button" onClick={handleAddPack}><i className="fas fa-plus"/></button>
</div>
<div className="popover-content">
<ul>
{packs?.map(p => <li key={p.id}>{p.minutes / 60}h - {p.amount}</li>)}
</ul>
{packs?.length === 0 && <span>{t('app.admin.configure_packs_button.no_packs')}</span>}
</div>
</div>}
<FabModal isOpen={addPackModal} toggleModal={toggleAddPackModal}>NEW PACK</FabModal>
<FabModal isOpen={addPackModal} toggleModal={toggleAddPackModal}>NEW PACK</FabModal>
</div>
);
}

1
app/frontend/src/stylesheets/application.scss
View File

@ -57,5 +57,6 @@
@import "modules/user/avatar";
@import "modules/pricing/machines-pricing";
@import "modules/pricing/editable-price";
@import "modules/pricing/configure-packs-button";
@import "app.responsive";

82
app/frontend/src/stylesheets/modules/pricing/configure-packs-button.scss Normal file
View File

@ -0,0 +1,82 @@
.configure-packs-button {
display: inline-block;
margin-left: 6px;
position: relative;
.packs-button {
border: 1px solid #d0cccc;
border-radius: 50%;
cursor: pointer;
width: 30px;
height: 30px;
display: inline-block;
padding: 2px 6px;
box-shadow: 0 1px 1px 0 #abaaaa;
&:hover {
background-color: #b9b9b9;
color: white;
}
}
.packs-popover {
& {
position: absolute;
width: 276px;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
top: 35px;
left: -125px;
z-index: 1;
}
&::before {
content: "";
background-color: transparent;
position: absolute;
left: 132px;
top: -7px;
height: 7px;
width: 12px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
}
&::after {
content: "";
background-color: transparent;
position: absolute;
left: 133px;
top: -6px;
height: 6px;
width: 10px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #f0f0f0;
}
.popover-title {
padding: .5rem 1rem;
margin-bottom: 0;
font-size: 1rem;
background-color: #f0f0f0;
border-bottom: 1px solid rgba(0,0,0,.2);
border-top-left-radius: calc(.3rem - 1px);
border-top-right-radius: calc(.3rem - 1px);
& > h3 {
margin: 2px;
}
& > .add-pack-button {
position: absolute;
right: 5px;
top: 10px;
}
}
.popover-content {
padding: 1rem 1rem;
color: #212529;
background-color: white;
}
}
}

3
config/locales/app.admin.en.yml
View File

@ -374,6 +374,9 @@ en:
you_can_override: "You can override this duration for each availability you create in the agenda. The price will then be adjusted accordingly."
machines: "Machines"
price_updated: "Price successfully updated"
configure_packs_button:
packs: "Prepaid packs"
no_packs: "No packs for now"
#ajouter un code promotionnel
coupons_new:
add_a_coupon: "Add a coupon"