rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-03-22 13:19:50 +01:00
Code Issues Releases Activity

(ui) refactor machine creation form

Browse Source
This commit is contained in:
Sylvain 2022-11-07 16:54:26 +01:00
parent 4cc6574f58
commit 4203da097c
5 changed files with 29 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/frontend/src/javascript/components/form/form-image-upload.tsx
View File

@ -31,7 +31,7 @@ export const FormImageUpload = <TFieldValues extends FieldValues, TContext exten
const { t } = useTranslation('shared');
const [file, setFile] = useState<ImageType>(defaultImage);
const [image, setImage] = useState<string | ArrayBuffer>(defaultImage.attachment_url);
const [image, setImage] = useState<string | ArrayBuffer>(defaultImage?.attachment_url);
useEffect(() => {
setFile(defaultImage);
@ -118,7 +118,7 @@ export const FormImageUpload = <TFieldValues extends FieldValues, TContext exten
register={register}
label={label}
formState={formState}
rules={rules}
rules={{ ...rules, required: rules.required && !hasImage() }}
disabled={disabled}
error={error}
warning={warning}

3
app/frontend/src/javascript/components/machines/machine-form.tsx
View File

@ -35,8 +35,9 @@ export const MachineForm: React.FC<MachineFormProps> = ({ action, machine, onErr
* Callback triggered when the user validates the machine form: handle create or update
*/
const onSubmit: SubmitHandler<Machine> = (data: Machine) => {
MachineAPI[action](data).then(() => {
MachineAPI[action](data).then((res) => {
onSuccess(t(`app.admin.machine_form.${action}_success`));
window.location.href = `/#!/machines/${res.slug}`;
}).catch(error => {
onError(error);
});

20
app/frontend/src/javascript/controllers/machines.js.erb
View File

@ -231,7 +231,7 @@ Application.Controllers.controller('MachinesController', ['$scope', '$state', '_
/**
* Controller used in the machine creation page (admin)
*/
Application.Controllers.controller('NewMachineController', ['$scope', '$state', 'CSRF', function ($scope, $state, CSRF) {
Application.Controllers.controller('NewMachineController', ['$scope', '$state', 'CSRF', 'growl', function ($scope, $state, CSRF, growl) {
CSRF.setMetaTags();
// API URL where the form will be posted
@ -244,6 +244,20 @@ Application.Controllers.controller('NewMachineController', ['$scope', '$state',
$scope.machine =
{ machine_files_attributes: [] };
/**
* Shows an error message forwarded from a child component
*/
$scope.onError = function (message) {
growl.error(message);
}
/**
* Shows a success message forwarded from a child react components
*/
$scope.onSuccess = function (message) {
growl.success(message)
}
// Using the MachinesController
return new MachinesController($scope, $state);
}
@ -252,8 +266,8 @@ Application.Controllers.controller('NewMachineController', ['$scope', '$state',
/**
* Controller used in the machine edition page (admin)
*/
Application.Controllers.controller('EditMachineController', ['$scope', '$state', '$transition$', 'machinePromise', 'CSRF',
function ($scope, $state, $transition$, machinePromise, CSRF) {
Application.Controllers.controller('EditMachineController', ['$scope', '$state', '$transition$', 'machinePromise', 'CSRF', 'growl',
function ($scope, $state, $transition$, machinePromise, CSRF, growl) {
/* PUBLIC SCOPE */
// API URL where the form will be posted

6
app/frontend/templates/machines/new.html
View File

@ -26,6 +26,10 @@
{{ 'app.admin.machines_new.consider_changing_them_before_creating_any_reservation_slot' | translate }}
</div>
<ng-include src="'/machines/_form.html'"></ng-include>
<div class="panel panel-default bg-light m-lg">
<div class="panel-body m-r">
<machine-form action="'create'" on-error="onError" on-success="onSuccess"></machine-form>
</div>
</div>
</div>
</div>

6
app/frontend/templates/machines/show.html
View File

@ -39,8 +39,8 @@
<div class="article wrapper-lg" >
<div class="article-thumbnail" ng-if="machine.machine_image">
<img ng-src="{{machine.machine_image}}" alt="{{machine.name}}" class="img-responsive">
<div class="article-thumbnail" ng-if="machine.machine_image_attributes">
<img ng-src="{{machine.machine_image_attributes.attachment_url}}" alt="{{machine.name}}" class="img-responsive">
</div>
<p class="intro" ng-bind-html="machine.description | toTrusted"></p>
@ -69,7 +69,7 @@
<ul class="widget-content list-group list-group-lg no-bg auto">
<li ng-repeat="file in machine.machine_files_attributes" class="list-group-item no-b clearfix">
<a target="_blank" ng-href="{{file.attachment_url}}"><i class="fa fa-arrow-circle-o-down"> </i> {{file.attachment | humanize : 25}}</a>
<a target="_blank" ng-href="{{file.attachment_url}}"><i class="fa fa-arrow-circle-o-down"> </i> {{file.attachment_name | humanize : 25}}</a>
</li>
</ul>
</section>