New: cursor and autoFocus (#541)

Hi, I added cursor pointer fot the buttons and auto focus in the forms in the first screen of the app.
brafdlog · Feb 29, 2024 · 9dce6a8 · 9dce6a8
1 parent 61aceda
commit 9dce6a8
Show file tree

Hide file tree

Showing 7 changed files with 325 additions and 190 deletions.
diff --git a/ui-react/src/components/Body.module.css b/ui-react/src/components/Body.module.css
@@ -1,30 +1,34 @@
 .container {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .buttonsContainer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }
 
 .scrapeButton {
-    margin-bottom: 15px;
+  margin-bottom: 15px;
+}
+
+.pointer {
+  cursor: pointer;
 }
 
 .customGap {
   gap: 6rem;
 }
 
 .contentContainer {
-    margin-top: 5rem;
+  margin-top: 5rem;
 }
 
 .modalWide {
-    max-width: unset;
-    width: 70%;
-}
+  max-width: unset;
+  width: 70%;
+}
diff --git a/ui-react/src/components/Body.tsx b/ui-react/src/components/Body.tsx
@@ -1,15 +1,17 @@
 import { observer } from 'mobx-react-lite';
 import React, { useContext, useState } from 'react';
-import {
-  Button, Form, Image, Modal
-} from 'react-bootstrap';
+import { Button, Form, Image, Modal } from 'react-bootstrap';
 import Container from 'react-bootstrap/Container';
 import Stack from 'react-bootstrap/Stack';
 import settingsIcon from '../assets/gear.svg';
 import { toggleUIVersion } from '../eventsBridge';
 import { StoreContext } from '../Store';
 import {
-  Account, Exporter, Importer, ModalStatus, OutputVendorName
+  Account,
+  Exporter,
+  Importer,
+  ModalStatus,
+  OutputVendorName,
 } from '../types';
 import AccountLogs from './accounts/AccountLogs';
 import AccountsContainer from './accounts/AccountsContainer';
@@ -23,14 +25,16 @@ import GeneralSettings from './GeneralSettings';
 import CheckForUpdates from './CheckForUpdates';
 
 type BodyProps = {
-  scrape
+  scrape;
 };
 
 const Body = ({ scrape }: BodyProps) => {
   const store = useContext(StoreContext);
   const { config } = store;
   const { isScraping } = store;
-  const [modalStatus, setModalStatus] = useState<ModalStatus>(ModalStatus.HIDDEN);
+  const [modalStatus, setModalStatus] = useState<ModalStatus>(
+    ModalStatus.HIDDEN,
+  );
 
   const [currentAccount, setCurrentAccount] = useState<Account>();
   const closeModal = () => setModalStatus(ModalStatus.HIDDEN);
@@ -65,58 +69,112 @@ const Body = ({ scrape }: BodyProps) => {
   };
 
   return (
-    <Container className={styles.root} >
-      <Container className={styles.container} >
+    <Container className={styles.root}>
+      <Container className={styles.container}>
         <div className={styles.contentContainer}>
           <Stack direction="horizontal" className={styles.customGap}>
-            {config && config.scraping
-              && <AccountsContainer title="בנקים וכרטיסי אשראי">
-                <Importers accounts={store.importers} isScraping={isScraping} showModal={showModal} handleNewAccountClicked={newScraperClicked} />
-              </AccountsContainer>}
-            {config && config.outputVendors
-              && <AccountsContainer title="תוכנות ניהול תקציב" accounts={store.exporters} isScraping={isScraping} showModal={showModal} >
-                <Exporters exporters={store.exporters} isScraping={isScraping} showModal={showModal} />
+            {config && config.scraping && (
+              <AccountsContainer title="בנקים וכרטיסי אשראי">
+                <Importers
+                  accounts={store.importers}
+                  isScraping={isScraping}
+                  showModal={showModal}
+                  handleNewAccountClicked={newScraperClicked}
+                />
               </AccountsContainer>
-            }
+            )}
+            {config && config.outputVendors && (
+              <AccountsContainer
+                title="תוכנות ניהול תקציב"
+                accounts={store.exporters}
+                isScraping={isScraping}
+                showModal={showModal}
+              >
+                <Exporters
+                  exporters={store.exporters}
+                  isScraping={isScraping}
+                  showModal={showModal}
+                />
+              </AccountsContainer>
+            )}
           </Stack>
         </div>
-        <Modal show={modalStatus !== ModalStatus.HIDDEN} onHide={closeModal} dialogClassName={wideModal ? styles.modalWide : ''}>
-          <Modal.Header closeButton className={styles.modalHeader}>
-          </Modal.Header>
+        <Modal
+          show={modalStatus !== ModalStatus.HIDDEN}
+          onHide={closeModal}
+          dialogClassName={wideModal ? styles.modalWide : ''}
+        >
+          <Modal.Header
+            closeButton
+            className={styles.modalHeader}
+          ></Modal.Header>
           <Modal.Body>
-            {modalStatus === ModalStatus.LOGS && currentAccount && <AccountLogs logs={currentAccount.logs} />}
-            {
-              modalStatus === ModalStatus.IMPORTER_SETTINGS && currentAccount
-              && <EditImporter handleSave={updateImporter} importer={currentAccount} handleDelete={deleteImporter} />
-            }
-            {
-              modalStatus === ModalStatus.EXPORTER_SETTINGS && currentAccount
-              && <EditExporter handleSave={updateExporter} exporter={currentAccount} handleDelete={deleteImporter} />
-            }
-            {modalStatus === ModalStatus.NEW_SCRAPER && <CreateImporter handleSave={createImporter} />}
-            {modalStatus === ModalStatus.GENERAL_SETTINGS && <GeneralSettings />}
+            {modalStatus === ModalStatus.LOGS && currentAccount && (
+              <AccountLogs logs={currentAccount.logs} />
+            )}
+            {modalStatus === ModalStatus.IMPORTER_SETTINGS &&
+              currentAccount && (
+                <EditImporter
+                  handleSave={updateImporter}
+                  importer={currentAccount}
+                  handleDelete={deleteImporter}
+                />
+              )}
+            {modalStatus === ModalStatus.EXPORTER_SETTINGS &&
+              currentAccount && (
+                <EditExporter
+                  handleSave={updateExporter}
+                  exporter={currentAccount}
+                  handleDelete={deleteImporter}
+                />
+              )}
+            {modalStatus === ModalStatus.NEW_SCRAPER && (
+              <CreateImporter handleSave={createImporter} />
+            )}
+            {modalStatus === ModalStatus.GENERAL_SETTINGS && (
+              <GeneralSettings />
+            )}
           </Modal.Body>
         </Modal>
       </Container>
       <Container className={styles.buttonsContainer}>
-        <Button variant="dark" size="lg" className={styles.scrapeButton} onClick={scrape} disabled={store.isScraping}>הפעל</Button>
-        <Image src={settingsIcon} onClick={() => showModal(null, ModalStatus.GENERAL_SETTINGS)} />
+        <Button
+          variant="dark"
+          size="lg"
+          className={styles.scrapeButton}
+          onClick={scrape}
+          disabled={store.isScraping}
+        >
+          הפעל
+        </Button>
+        <Image
+          src={settingsIcon}
+          onClick={() => showModal(null, ModalStatus.GENERAL_SETTINGS)}
+          className={styles.pointer}
+        />
         <Form.Check
-            type="switch"
-            onClick={toggleUIVersion}
-            label="מעבר לממשק ישן"
-            defaultChecked
+          type="switch"
+          onClick={toggleUIVersion}
+          label="מעבר לממשק ישן"
+          defaultChecked
         />
       </Container>
       <Container className={styles.checkUpdatesContainer}>
-      <CheckForUpdates/>
-      </Container>
+        <CheckForUpdates />
       </Container>
+    </Container>
   );
 };
 
-function shouldShowWideModal(modalStatus: ModalStatus, currentAccount?: Account) {
-  return modalStatus === ModalStatus.EXPORTER_SETTINGS && currentAccount && currentAccount.companyId === OutputVendorName.YNAB;
+function shouldShowWideModal(
+  modalStatus: ModalStatus,
+  currentAccount?: Account,
+) {
+  return (
+    modalStatus === ModalStatus.EXPORTER_SETTINGS &&
+    currentAccount &&
+    currentAccount.companyId === OutputVendorName.YNAB
+  );
 }
 
 export default observer(Body);
diff --git a/ui-react/src/components/GeneralSettings.tsx b/ui-react/src/components/GeneralSettings.tsx
@@ -13,56 +13,60 @@ function GeneralSettings() {
   }
 
   const handleTimeoutChanged = (timeout: string) => {
-
     const numberTimeout = Number(timeout);
     if (numberTimeout) {
       store.setTimeout(numberTimeout);
     }
   };
 
   return (
-        <div className={styles.container}>
-            <Card className={styles.card}>
-                <Card.Body className={styles.cardBody}>
-                    <Form>
-                        <Form.Label>הראה דפדפן</Form.Label>
-                        <Form.Check
-                            type="switch"
-                            onClick={toggleShowBrowser}
-                            defaultChecked={store.config?.scraping?.showBrowser}
-                        />
-                        <Form.Group>
-                            <Form.Label>כמה ימים אחורה לחפש?</Form.Label>
-                            <Form.Control
-                                className={styles.input}
-                                defaultValue={store.config?.scraping.numDaysBack}
-                                onBlur={(event) => store.setNumDaysBack(event.target.value)} />
-                        </Form.Group>
-                        <Form.Group>
-                            <Form.Label>כמה חשבונות לשלוף במקביל?</Form.Label>
-                            <Form.Control
-                                className={styles.input}
-                                defaultValue={store.config?.scraping.maxConcurrency}
-                                onBlur={(event) => store.setMaxConcurrency(event.target.value)} />
-                        </Form.Group>
-                        <Form.Group>
-                            <Form.Label>Chromium path</Form.Label>
-                            <Form.Control
-                                className={styles.input}
-                                defaultValue={store.config?.scraping.chromiumPath}
-                                onBlur={(event) => store.setChromiumPath(event.target.value)} />
-                        </Form.Group>
-                        <Form.Group>
-                            <Form.Label>כמה זמן לחכות לשליפה? (millisec)</Form.Label>
-                            <Form.Control
-                                className={styles.input}
-                                defaultValue={store.config?.scraping.timeout}
-                                onBlur={(event) => handleTimeoutChanged(event.target.value)} />
-                        </Form.Group>
-                    </Form>
-                </Card.Body>
-            </Card>
-        </div>
+    <div className={styles.container}>
+      <Card className={styles.card}>
+        <Card.Body className={styles.cardBody}>
+          <Form>
+            <Form.Label>הראה דפדפן</Form.Label>
+            <Form.Check
+              type="switch"
+              onClick={toggleShowBrowser}
+              defaultChecked={store.config?.scraping?.showBrowser}
+            />
+            <Form.Group>
+              <Form.Label>כמה ימים אחורה לחפש?</Form.Label>
+              <Form.Control
+                className={styles.input}
+                defaultValue={store.config?.scraping.numDaysBack}
+                onBlur={(event) => store.setNumDaysBack(event.target.value)}
+                autoFocus
+              />
+            </Form.Group>
+            <Form.Group>
+              <Form.Label>כמה חשבונות לשלוף במקביל?</Form.Label>
+              <Form.Control
+                className={styles.input}
+                defaultValue={store.config?.scraping.maxConcurrency}
+                onBlur={(event) => store.setMaxConcurrency(event.target.value)}
+              />
+            </Form.Group>
+            <Form.Group>
+              <Form.Label>Chromium path</Form.Label>
+              <Form.Control
+                className={styles.input}
+                defaultValue={store.config?.scraping.chromiumPath}
+                onBlur={(event) => store.setChromiumPath(event.target.value)}
+              />
+            </Form.Group>
+            <Form.Group>
+              <Form.Label>כמה זמן לחכות לשליפה? (millisec)</Form.Label>
+              <Form.Control
+                className={styles.input}
+                defaultValue={store.config?.scraping.timeout}
+                onBlur={(event) => handleTimeoutChanged(event.target.value)}
+              />
+            </Form.Group>
+          </Form>
+        </Card.Body>
+      </Card>
+    </div>
   );
 }