1
0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-01-29 18:52:22 +01:00

Fix classes names

This commit is contained in:
vincent 2021-12-22 17:25:02 +01:00
parent 934ac309a1
commit c394b3a275
17 changed files with 42 additions and 45 deletions

View File

@ -12,5 +12,4 @@ export default class SpaceAPI {
const res: AxiosResponse<Space> = await apiClient.get(`/api/spaces/${id}`);
return res?.data;
}
}

View File

@ -64,8 +64,8 @@ export const ConfigurePacksButton: React.FC<ConfigurePacksButtonProps> = ({ pack
};
return (
<div className="configure-packs-button">
<button className="packs-button" onClick={toggleShowList}>
<div className="configure-group">
<button className="configure-group-button" onClick={toggleShowList}>
<i className="fas fa-box" />
</button>
{showList && <FabPopover title={t('app.admin.configure_packs_button.packs')} headerButton={renderAddButton()} className="fab-popover__right">
@ -73,7 +73,7 @@ export const ConfigurePacksButton: React.FC<ConfigurePacksButtonProps> = ({ pack
{packs?.map(p =>
<li key={p.id} className={p.disabled ? 'disabled' : ''}>
{formatDuration(p.minutes)} - {FormatLib.price(p.amount)}
<span className="pack-actions">
<span className="group-actions">
<EditPack onSuccess={handleSuccess} onError={onError} pack={p} />
<DeletePack onSuccess={handleSuccess} onError={onError} pack={p} />
</span>

View File

@ -42,8 +42,8 @@ const DeletePackComponent: React.FC<DeletePackProps> = ({ onSuccess, onError, pa
};
return (
<div className="delete-pack">
<FabButton type='button' className="remove-pack-button" icon={<i className="fa fa-trash" />} onClick={toggleDeletionModal} />
<div className="delete-group">
<FabButton type='button' className="delete-group-button" icon={<i className="fa fa-trash" />} onClick={toggleDeletionModal} />
<FabModal title={t('app.admin.delete_pack.delete_pack')}
isOpen={deletionModal}
toggleModal={toggleDeletionModal}

View File

@ -54,16 +54,15 @@ export const EditPack: React.FC<EditPackProps> = ({ pack, onSuccess, onError })
};
return (
<div className="edit-pack">
<FabButton type='button' className="edit-pack-button" icon={<i className="fas fa-edit" />} onClick={handleRequestEdit} />
<div className="edit-group">
<FabButton type='button' icon={<i className="fas fa-edit" />} onClick={handleRequestEdit} />
<FabModal isOpen={isOpen}
toggleModal={toggleModal}
title={t('app.admin.edit_pack.edit_pack')}
className="edit-pack-modal"
closeButton
confirmButton={t('app.admin.edit_pack.confirm_changes')}
onConfirmSendFormId="edit-pack">
{packData && <PackForm formId="edit-pack" onSubmit={handleUpdate} pack={packData} />}
onConfirmSendFormId="edit-group">
{packData && <PackForm formId="edit-group" onSubmit={handleUpdate} pack={packData} />}
</FabModal>
</div>
);

View File

@ -107,7 +107,7 @@ const MachinesPricing: React.FC<MachinesPricingProps> = ({ onError, onSuccess })
};
return (
<div className="machines-pricing">
<div className="pricing-list">
<FabAlert level="warning">
<p><HtmlTranslate trKey="app.admin.machines_pricing.prices_match_machine_hours_rates_html"/></p>
<p><HtmlTranslate trKey="app.admin.machines_pricing.prices_calculated_on_hourly_rate_html" options={{ DURATION: `${EXEMPLE_DURATION}`, RATE: examplePrice('hourly_rate'), PRICE: examplePrice('final_price') }} /></p>

View File

@ -103,7 +103,7 @@ export const PackForm: React.FC<PackFormProps> = ({ formId, onSubmit, pack }) =>
};
return (
<form id={formId} onSubmit={handleSubmit} className="pack-form">
<form id={formId} onSubmit={handleSubmit} className="group-form">
<label htmlFor="hours">{t('app.admin.pack_form.hours')} *</label>
<FabInput id="hours"
type="number"

View File

@ -28,7 +28,7 @@ export const ConfigureExtendedPriceButton: React.FC<ConfigureExtendedPriceButton
const [showList, setShowList] = useState<boolean>(false);
/**
* Open/closes the popover listing the existing packs
* Open/closes the popover listing the existing extended prices
*/
const toggleShowList = (): void => {
setShowList(!showList);
@ -57,8 +57,8 @@ export const ConfigureExtendedPriceButton: React.FC<ConfigureExtendedPriceButton
};
return (
<div className="configure-extended-prices-button">
<button className="packs-button" onClick={toggleShowList}>
<div className="configure-group">
<button className="configure-group-button" onClick={toggleShowList}>
<i className="fas fa-stopwatch" />
</button>
{showList && <FabPopover title={t('app.admin.configure_extendedPrices_button.extendedPrices')} headerButton={renderAddButton()} className="fab-popover__right">
@ -66,7 +66,7 @@ export const ConfigureExtendedPriceButton: React.FC<ConfigureExtendedPriceButton
{extendedPrices?.map(extendedPrice =>
<li key={extendedPrice.id}>
{extendedPrice.duration} {t('app.admin.calendar.minutes')} - {FormatLib.price(extendedPrice.amount)}
<span className="pack-actions">
<span className="group-actions">
<EditExtendedPrice onSuccess={handleSuccess} onError={onError} price={extendedPrice} />
<DeleteExtendedPrice onSuccess={handleSuccess} onError={onError} price={extendedPrice} />
</span>

View File

@ -41,8 +41,8 @@ export const DeleteExtendedPrice: React.FC<DeleteExtendedPriceProps> = ({ onSucc
};
return (
<div className="delete-pack">
<FabButton type='button' className="remove-pack-button" icon={<i className="fa fa-trash" />} onClick={toggleDeletionModal} />
<div className="delete-group">
<FabButton type='button' className="delete-group-button" icon={<i className="fa fa-trash" />} onClick={toggleDeletionModal} />
<FabModal title={t('app.admin.delete_extendedPrice.delete_extendedPrice')}
isOpen={deletionModal}
toggleModal={toggleDeletionModal}

View File

@ -50,16 +50,15 @@ export const EditExtendedPrice: React.FC<EditExtendedPriceProps> = ({ price, onS
};
return (
<div className="edit-pack">
<FabButton type='button' className="edit-pack-button" icon={<i className="fas fa-edit" />} onClick={handleRequestEdit} />
<div className="edit-group">
<FabButton type='button' icon={<i className="fas fa-edit" />} onClick={handleRequestEdit} />
<FabModal isOpen={isOpen}
toggleModal={toggleModal}
title={t('app.admin.edit_extendedPrice.edit_extendedPrice')}
className="edit-pack-modal"
closeButton
confirmButton={t('app.admin.edit_extendedPrice.confirm_changes')}
onConfirmSendFormId="edit-pack">
{extendedPriceData && <ExtendedPriceForm formId="edit-pack" onSubmit={handleUpdate} price={extendedPriceData} />}
onConfirmSendFormId="edit-group">
{extendedPriceData && <ExtendedPriceForm formId="edit-group" onSubmit={handleUpdate} price={extendedPriceData} />}
</FabModal>
</div>
);

View File

@ -7,7 +7,7 @@ import { IFablab } from '../../../models/fablab';
declare let Fablab: IFablab;
interface PackFormProps {
interface ExtendedPriceFormProps {
formId: string,
onSubmit: (pack: Price) => void,
price?: Price,
@ -17,7 +17,7 @@ interface PackFormProps {
* A form component to create/edit a extended price.
* The form validation must be created elsewhere, using the attribute form={formId}.
*/
export const ExtendedPriceForm: React.FC<PackFormProps> = ({ formId, onSubmit, price }) => {
export const ExtendedPriceForm: React.FC<ExtendedPriceFormProps> = ({ formId, onSubmit, price }) => {
const [extendedPriceData, updateExtendedPriceData] = useImmer<Price>(price || {} as Price);
const { t } = useTranslation('admin');
@ -49,7 +49,7 @@ export const ExtendedPriceForm: React.FC<PackFormProps> = ({ formId, onSubmit, p
};
return (
<form id={formId} onSubmit={handleSubmit} className="pack-form">
<form id={formId} onSubmit={handleSubmit} className="group-form">
<label htmlFor="duration">{t('app.admin.calendar.minutes')} *</label>
<FabInput id="duration"
type="number"

View File

@ -35,7 +35,7 @@ const SpacesPricing: React.FC<SpacesPricingProps> = ({ onError, onSuccess }) =>
// retrieve the initial data
useEffect(() => {
SpaceAPI.index(false)
SpaceAPI.index()
.then(data => setSpaces(data))
.catch(error => onError(error));
GroupAPI.index({ disabled: false, admins: false })
@ -67,7 +67,7 @@ const SpacesPricing: React.FC<SpacesPricingProps> = ({ onError, onSuccess }) =>
* Find the default price (hourly rate) matching the given criterion
*/
const findPriceBy = (spaceId, groupId): Price => {
return prices.find(price => price.priceable_id === spaceId && price.group_id === groupId && price.duration == 60);
return prices.find(price => price.priceable_id === spaceId && price.group_id === groupId && price.duration === 60);
};
/**
@ -101,7 +101,7 @@ const SpacesPricing: React.FC<SpacesPricingProps> = ({ onError, onSuccess }) =>
};
return (
<div className="machines-pricing">
<div className="pricing-list">
<FabAlert level="warning">
<p><HtmlTranslate trKey="app.admin.pricing.these_prices_match_space_hours_rates_html"/></p>
<p><HtmlTranslate trKey="app.admin.pricing.prices_calculated_on_hourly_rate_html" options={{ DURATION: `${EXEMPLE_DURATION}`, RATE: examplePrice('hourly_rate'), PRICE: examplePrice('final_price') }} /></p>
@ -118,7 +118,7 @@ const SpacesPricing: React.FC<SpacesPricingProps> = ({ onError, onSuccess }) =>
{spaces?.map(space => <tr key={space.id}>
<td>{space.name}</td>
{groups?.map(group => <td key={group.id}>
{prices && <EditablePrice price={findPriceBy(space.id, group.id)} onSave={handleUpdatePrice} />}
{prices.length && <EditablePrice price={findPriceBy(space.id, group.id)} onSave={handleUpdatePrice} />}
<ConfigureExtendedPriceButton
prices={findExtendedPricesBy(space.id, group.id)}
onError={onError}

View File

@ -57,12 +57,12 @@
@import "modules/machines/machines-filters";
@import "modules/machines/required-training-modal";
@import "modules/user/avatar";
@import "modules/pricing/machines-pricing";
@import "modules/pricing/pricing-list";
@import "modules/pricing/editable-price";
@import "modules/pricing/configure-packs-button";
@import "modules/pricing/pack-form";
@import "modules/pricing/delete-pack";
@import "modules/pricing/edit-pack";
@import "modules/pricing/configure-group-button";
@import "modules/pricing/group-form";
@import "modules/pricing/delete-group";
@import "modules/pricing/edit-group";
@import "modules/settings/check-list-setting";
@import "modules/prepaid-packs/propose-packs-modal";
@import "modules/prepaid-packs/packs-summary";

View File

@ -1,9 +1,9 @@
.configure-packs-button {
.configure-group {
display: inline-block;
margin-left: 6px;
position: relative;
.packs-button {
&-button {
border: 1px solid #d0cccc;
border-radius: 50%;
cursor: pointer;
@ -44,7 +44,7 @@
line-height: 24px;
}
.pack-actions button {
.group-actions button {
font-size: 10px;
vertical-align: middle;
line-height: 10px;

View File

@ -1,7 +1,7 @@
.delete-pack {
.delete-group {
display: inline;
.remove-pack-button {
&-button {
background-color: #cb1117;
color: white;
}

View File

@ -1,4 +1,4 @@
.pack-form {
.group-form {
.interval-inputs {
display: flex;

View File

@ -1,4 +1,4 @@
.machines-pricing {
.pricing-list {
.fab-alert {
margin: 15px 0;
}
@ -28,4 +28,4 @@
border-top: 1px solid #ddd;
}
}
}
}