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

Fix classes names

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/frontend/src/javascript/api/space.ts
View File

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

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

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

4
app/frontend/src/javascript/components/pricing/machines/delete-pack.tsx
View File

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

9
app/frontend/src/javascript/components/pricing/machines/edit-pack.tsx
View File

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

2
app/frontend/src/javascript/components/pricing/machines/machines-pricing.tsx
View File

@ -107,7 +107,7 @@ const MachinesPricing: React.FC<MachinesPricingProps> = ({ onError, onSuccess })
}; };
return ( return (
<div className="machines-pricing"> <div className="pricing-list">
<FabAlert level="warning"> <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_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> <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>

2
app/frontend/src/javascript/components/pricing/machines/pack-form.tsx
View File

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

8
app/frontend/src/javascript/components/pricing/spaces/configure-extended-price-button.tsx
View File

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

4
app/frontend/src/javascript/components/pricing/spaces/delete-extended-price.tsx
View File

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

9
app/frontend/src/javascript/components/pricing/spaces/edit-extended-price.tsx
View File

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

6
app/frontend/src/javascript/components/pricing/spaces/extended-price-form.tsx
View File

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

8
app/frontend/src/javascript/components/pricing/spaces/spaces-pricing.tsx
View File

@ -35,7 +35,7 @@ const SpacesPricing: React.FC<SpacesPricingProps> = ({ onError, onSuccess }) =>
// retrieve the initial data // retrieve the initial data
useEffect(() => { useEffect(() => {
SpaceAPI.index(false) SpaceAPI.index()
.then(data => setSpaces(data)) .then(data => setSpaces(data))
.catch(error => onError(error)); .catch(error => onError(error));
GroupAPI.index({ disabled: false, admins: false }) 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 * Find the default price (hourly rate) matching the given criterion
*/ */
const findPriceBy = (spaceId, groupId): Price => { 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 ( return (
<div className="machines-pricing"> <div className="pricing-list">
<FabAlert level="warning"> <FabAlert level="warning">
<p><HtmlTranslate trKey="app.admin.pricing.these_prices_match_space_hours_rates_html"/></p> <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> <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}> {spaces?.map(space => <tr key={space.id}>
<td>{space.name}</td> <td>{space.name}</td>
{groups?.map(group => <td key={group.id}> {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 <ConfigureExtendedPriceButton
prices={findExtendedPricesBy(space.id, group.id)} prices={findExtendedPricesBy(space.id, group.id)}
onError={onError} onError={onError}

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

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

6
app/frontend/src/stylesheets/modules/pricing/configure-packs-button.scss → app/frontend/src/stylesheets/modules/pricing/configure-group-button.scss
View File

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

4
app/frontend/src/stylesheets/modules/pricing/delete-pack.scss → app/frontend/src/stylesheets/modules/pricing/delete-group.scss
View File

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

2
app/frontend/src/stylesheets/modules/pricing/edit-pack.scss → app/frontend/src/stylesheets/modules/pricing/edit-group.scss
View File

@ -1,3 +1,3 @@
.edit-pack { .edit-group {
display: inline-block; display: inline-block;
} }

2
app/frontend/src/stylesheets/modules/pricing/pack-form.scss → app/frontend/src/stylesheets/modules/pricing/group-form.scss
View File

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

4
app/frontend/src/stylesheets/modules/pricing/machines-pricing.scss → app/frontend/src/stylesheets/modules/pricing/pricing-list.scss
View File

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