Added spinners

TIER · Aug 30, 2022 · 0e0eff9 · 0e0eff9
1 parent 58fa445
commit 0e0eff9
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 22 deletions.
diff --git a/ui/src/app/admin/component/ConfigurationForm.js b/ui/src/app/admin/component/ConfigurationForm.js
@@ -7,12 +7,12 @@ import { faSpinner, faSave, faTrash } from '@fortawesome/free-solid-svg-icons';
 import Translate from '../../i18n/components/translate';
 import PropertySelector from './PropertySelector';
 
-import { useProperties, usePropertiesLoading } from '../hoc/PropertiesProvider';
+import { useProperties } from '../hoc/PropertiesProvider';
 
 import Form from 'react-bootstrap/Form';
 import FloatingLabel from 'react-bootstrap/FloatingLabel';
 
-export function ConfigurationForm({ configuration = {}, schema, onSave, onCancel }) {
+export function ConfigurationForm({ configuration = {}, loading, onSave, onCancel }) {
 
     const { control, register, getValues, watch, formState: { errors } } = useForm({
         defaultValues: {
@@ -26,7 +26,6 @@ export function ConfigurationForm({ configuration = {}, schema, onSave, onCancel
     });
 
     const properties = useProperties();
-    const loading = usePropertiesLoading();
 
     const addProperties = (props) => {
         const parsed = props.reduce((coll, prop, idx) => {
@@ -52,6 +51,8 @@ export function ConfigurationForm({ configuration = {}, schema, onSave, onCancel
         });
     };
 
+    React.useEffect(() => console.log(configuration), [configuration]);
+
     return (<>
         <div className="container-fluid">
             <div className="d-flex justify-content-end align-items-center">
@@ -66,7 +67,9 @@ export function ConfigurationForm({ configuration = {}, schema, onSave, onCancel
                     </Button>
                     <Button variant="secondary"
                         type="button"
-                        onClick={() => onCancel()} aria-label="Cancel changes, go back to dashboard">
+                        onClick={() => onCancel()}
+                        disabled={loading}
+                        aria-label="Cancel changes, go back to dashboard">
                         <Translate value="action.cancel">Cancel</Translate>
                     </Button>
                 </React.Fragment>

diff --git a/ui/src/app/admin/container/ConfigurationList.js b/ui/src/app/admin/container/ConfigurationList.js
@@ -1,15 +1,16 @@
 import React from 'react';
-import { faDownload, faPlusCircle, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faDownload, faEdit, faPlusCircle, faSpinner, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import Button from 'react-bootstrap/Button';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
 import { Link } from 'react-router-dom';
 
 import { Translate } from '../../i18n/components/translate';
 
 import { DeleteConfirmation } from '../../core/components/DeleteConfirmation';
 
-export function ConfigurationList({ configurations, onDelete }) {
+export function ConfigurationList({ configurations, onDelete, loading }) {
 
     const remove = (id) => {
         onDelete(id);
@@ -19,6 +20,11 @@ export function ConfigurationList({ configurations, onDelete }) {
         <DeleteConfirmation title={`message.delete-property-title`} body={`message.delete-property-body`}>
             {(block) =>
                 <div className="container-fluid p-3">
+                    {loading ? 
+                        <div className="d-flex justify-content-end flex-fill">
+                            <FontAwesomeIcon icon={faSpinner} spin={true} pulse={true} size="lg" />
+                        </div>
+                    :
                     <section className="section">
                         <div className="section-body border border-top-0 border-primary">
                             <div className="section-header bg-primary p-2 text-light">
@@ -52,16 +58,20 @@ export function ConfigurationList({ configurations, onDelete }) {
                                                         </Link>
                                                     </td>
                                                     <td className="text-end">
-                                                        <React.Fragment>
-                                                            <Button onClick={() => console.log('clicked')} className={`btn btn-primary`}>
-                                                                <FontAwesomeIcon icon={faDownload} size="lg" />
-                                                                &nbsp; <Translate value="action.download">Download</Translate>
-                                                            </Button>
-                                                            <Button variant="danger" className="ms-2" onClick={() => block(() => remove(c.resourceId))}>
+                                                        <Button onClick={() => console.log('clicked')} className={`btn btn-success`}>
+                                                            <FontAwesomeIcon icon={faDownload} size="lg" />
+                                                            &nbsp; <Translate value="action.download">Download single file</Translate>
+                                                        </Button>
+                                                        <ButtonGroup aria-label="Actions" className="ms-4" >
+                                                            <Link className="btn btn-primary" to={`../configurations/${c.resourceId}/edit`}>
+                                                                <FontAwesomeIcon icon={faEdit} size="lg" />
+                                                                &nbsp; Edit
+                                                            </Link>
+                                                            <Button variant="danger"onClick={() => block(() => remove(c.resourceId))}>
                                                                 <FontAwesomeIcon icon={faTrash} size="lg" />
                                                                 &nbsp; <Translate value="action.delete">Delete</Translate>
                                                             </Button>
-                                                        </React.Fragment>
+                                                        </ButtonGroup>
                                                     </td>
                                                 </tr>
                                             ) : <tr>
@@ -73,6 +83,7 @@ export function ConfigurationList({ configurations, onDelete }) {
                             </div>
                         </div>
                     </section>
+                    }
                 </div>
             }
         </DeleteConfirmation>

diff --git a/ui/src/app/admin/container/EditConfiguration.js b/ui/src/app/admin/container/EditConfiguration.js
@@ -10,6 +10,8 @@ import { createNotificationAction, NotificationTypes, useNotificationDispatcher
 import { useTranslator } from '../../i18n/hooks';
 import { BASE_PATH } from '../../App.constant';
 import { PropertiesProvider } from '../hoc/PropertiesProvider';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
 export function EditConfiguration() {
     const history = useHistory();
@@ -73,17 +75,19 @@ export function EditConfiguration() {
                     </div>
                 </div>
                 <div className="section-body p-4 border border-top-0 border-info">
+                    {loading ? 
+                    <div className="d-flex justify-content-end flex-fill">
+                        <FontAwesomeIcon icon={faSpinner} spin={true} pulse={true} size="lg" />
+                    </div>
+                    :
                     <PropertiesProvider>
-                        <Schema path={`/${BASE_PATH}assets/schema/configuration/configuration.json`}>
-                            {(schema) =>
-                                <ConfigurationForm
-                                    configuration={configuration}
-                                    schema={schema}
-                                    loading={loading}
-                                    onSave={(data) => save(data)}
-                                    onCancel={() => cancel()} />}
-                        </Schema>
+                        {configuration && <ConfigurationForm
+                            configuration={configuration}
+                            loading={loading}
+                            onSave={(data) => save(data)}
+                            onCancel={() => cancel()} /> }
                     </PropertiesProvider>
+                    }
                 </div>
             </section>
         </div>