Feat/dinamic tabs (#115)

* temp: event parameters * feat: dinamic tabs * feat: saving settings * fix: a lot of things * fix: a lot of things * fix: a lot of things Co-authored-by: Andre Gava <andrelzgava@gmail.com>
librarian-org · Jan 4, 2022 · e9c5b79 · e9c5b79
1 parent 75354c9
commit e9c5b79
Show file tree

Hide file tree

Showing 40 changed files with 1,628 additions and 446 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -7,7 +7,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-latest, windows-latest, macos-latest]
+        os: [ubuntu-latest, windows-latest, macOS-11]
 
     steps:
     - uses: actions/checkout@v2

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -10,7 +10,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-latest, windows-latest, macos-latest]
+        os: [ubuntu-latest, windows-latest, macOS-11]
 
     steps:
     - uses: actions/checkout@v2

diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 [![Build](https://github.com/librarian-org/librarian/actions/workflows/build.yml/badge.svg)](https://github.com/librarian-org/librarian/actions/workflows/build.yml)
 
+> **NOTE**: This project is in Work-In-Progress stage, so it's not functional yet...
+
 A free OpenSource software to handle with books. It's ideal for school libraries
 and for someone who have many books.
 

diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "i18next-electron-fs-backend": "^2.0.0",
     "i18next-fs-backend": "^1.1.4",
     "immutability-helper": "^3.1.1",
+    "jsbarcode": "^3.11.5",
     "polished": "^4.1.3",
     "react": "^17.0.2",
     "react-dnd": "^14.0.4",

diff --git a/src/app/components/Barcode/index.tsx b/src/app/components/Barcode/index.tsx
@@ -0,0 +1,12 @@
+import React, { ReactElement } from 'react';
+import { useBarcode, BarcodeProps } from '../../hooks/useBarcode';
+
+export default function Barcode(props: BarcodeProps): ReactElement {
+  const { value, options } = props;
+  const { inputRef } = useBarcode({
+    value,
+    options,
+  });
+
+  return <svg ref={inputRef} />;
+}
diff --git a/src/app/components/SearchMenu/index.tsx b/src/app/components/SearchMenu/index.tsx
@@ -82,6 +82,14 @@ const SearchMenu: React.FC<SearchMenuProps> = ({ isOpen, setOpen }) => {
     [searchResult, selectedItem]
   );
 
+  const globalSearchHandler = useCallback((search) => {
+    const retorno: any = window.api.sendSync('globalSearch', {
+      entity: 'Any',
+      value: search,
+    });
+    return retorno;
+  }, []);
+
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const value = e.target.value;
@@ -102,17 +110,9 @@ const SearchMenu: React.FC<SearchMenuProps> = ({ isOpen, setOpen }) => {
       setMaxItems(finalResult.length * 2);
       setSelectedItem(-1);
     },
-    [searchSourceMemo]
+    [globalSearchHandler, searchSourceMemo]
   );
 
-  const globalSearchHandler = useCallback((search) => {
-    const retorno: any = window.api.sendSync('globalSearch', {
-      entity: 'Any',
-      value: search,
-    });
-    return retorno;
-  }, []);
-
   const handleKeys = useCallback(
     (event, clicked): void => {
       const mapKeys = [

diff --git a/src/app/components/Settings/index.tsx b/src/app/components/Settings/index.tsx
@@ -1,13 +1,111 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { FiSave } from 'react-icons/fi';
+import { useToast } from '../../hooks/toast';
+import i18n from '../../i18n';
+import Button from '../Button';
+import Input from '../Input';
+import { ButtonContainer, Container } from './styles';
+interface Settings {
+  id?: number;
+  daysReturnDate: string;
+  backupPath: string;
+}
+const Settings: React.FC = () => {
+  const { addToast } = useToast();
 
-import { Container } from './styles';
+  const [settings, setSettings] = useState(null);
+  const [daysReturnDate, setDaysReturnDate] = useState('7');
+  const [backupPath, setBackupPath] = useState('');
+
+  useEffect(() => {
+    const result = window.api.sendSync('list', {
+      entity: 'Settings',
+      value: {},
+    }) as Settings[];
+
+    if (result.length > 0) {
+      setSettings(result[0]);
+      setDaysReturnDate(result[0].daysReturnDate);
+      setBackupPath(result[0].backupPath);
+      return;
+    }
+  }, []);
+
+  const handleSave = useCallback(() => {
+    const result = window.api.sendSync(settings.id ? 'update' : 'create', {
+      entity: 'Settings',
+      value: settings.id
+        ? {
+            id: settings.id,
+            daysReturnDate: daysReturnDate,
+            backupPath: backupPath,
+          }
+        : {
+            daysReturnDate: daysReturnDate,
+            backupPath: backupPath,
+          },
+    }) as { id: string };
+
+    addToast({
+      title: i18n.t('notifications.success'),
+      type: 'success',
+      description: i18n.t('settings.saved'),
+    });
+
+    return;
+  }, [backupPath, daysReturnDate, settings]);
 
-const Settings: React.FC = () => {
   return (
     <Container>
-      Settings
+      <>
+        <div
+          style={{
+            padding: '24px',
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Input
+            containerStyle={{ marginRight: '18px' }}
+            type="number"
+            name="daysReturnDate"
+            label={i18n.t('settings.time')}
+            autoFocus
+            onChange={(e) => setDaysReturnDate(e.target.value)}
+            value={daysReturnDate}
+            placeholder={i18n.t('settings.time')}
+          />
+
+          <Input
+            directory=""
+            webkitdirectory=""
+            type="file"
+            name="path"
+            label={i18n.t('settings.path')}
+            value={backupPath}
+            onChange={(e) => setBackupPath(e.target.value)}
+            placeholder={i18n.t('settings.path')}
+          />
+        </div>
+
+        <ButtonContainer>
+          <Button
+            color="primary"
+            title={i18n.t('button.save')}
+            onClick={handleSave}
+          >
+            <FiSave size={20} />
+          </Button>
+        </ButtonContainer>
+      </>
     </Container>
   );
 };
-
+declare module 'react' {
+  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    directory?: string;
+    webkitdirectory?: string;
+  }
+}
 export default Settings;
diff --git a/src/app/components/Settings/styles.ts b/src/app/components/Settings/styles.ts
@@ -1,5 +1,63 @@
-import styled from 'styled-components';
+import { shade, tint } from 'polished';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+`;
+
+ export const ButtonContainer = styled.div`
+  position: relative,;
+  padding: 0 24px;
+  display: flex;
+  justify-content: end;
+ `;
+
+export const List = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+export const ListItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  border-radius: 8px;
+
+  justify-content: space-between;
+  align-items: center;
+
+  padding: 12px;
+  margin-bottom: 4px;
+  width: 100%;
+
+  background-color: ${props => tint(0.2, props.theme.colors.background)};
+  &:hover {
+    background-color: ${props => tint(0.25, props.theme.colors.background)};
+    ${(props) => props.theme.title == 'light' && css`
+      background-color: ${(props) => shade(0.05, props.theme.colors.background)};
+    `}
+  }
+
+  svg {
+    cursor: pointer;
+    &:hover {
+      color: ${props => tint(0.2, props.theme.colors.secondary.dark)}
+    }
+  }
+`;
+
+export const Row = styled.div`
+  padding: 24px 0 24px 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  width: 100%;
+`;
 
+export const Column = styled.div`
+  display: flex;
 `;
diff --git a/src/app/components/Tabs/Tab.ts b/src/app/components/Tabs/Tab.ts
@@ -4,4 +4,6 @@ export interface Tab {
   title: string;
   unsavedChanges?: boolean;
   titleScope?: string;
+  action: string;
+  item: unknown;
 }
diff --git a/src/app/components/Tabs/index.tsx b/src/app/components/Tabs/index.tsx
@@ -8,14 +8,19 @@ import TabContent from './TabContent';
 import { Tab } from './Tab';
 import Shortcuts from '../Shortcuts';
 import Borrow from '../Borrow';
-import TitleCreate from '../Title';
+import Title from '../Title';
 import Person from '../Person';
 import Settings from '../Settings';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
 import SearchMenu from '../SearchMenu';
+import { Actions } from '../../../common/Actions';
 
+interface ActionParameter {
+  action: Actions;
+  value?: unknown;
+}
 interface Event {
   event: string;
   handler: (...args: any[]) => any;
@@ -25,6 +30,8 @@ const Tabs: React.FC = () => {
   const [tabItems, setTabItems] = useState<Tab[]>([]);
   const [activeTab, setActiveTab] = useState<Tab>(null);
   const [isOpen, setOpen] = useState(false);
+  const [action, setAction] = useState('list');
+  // const [item, setItem] = useState(undefined);
 
   const lastTab = useCallback((): Tab => {
     return tabItems[tabItems.length - 1];
@@ -67,19 +74,25 @@ const Tabs: React.FC = () => {
   }, [activeIndex, activeTab, firstTab, lastTab, setActiveTab, tabItems]);
 
   const handleCreateTab = useCallback(
-    (type: string) => {
+    (type: string, action: Actions, item: unknown) => {
       const hash = v4();
 
-      const alreadyOpened = tabItems.filter((t) => t.type === type);
-      if (alreadyOpened.length > 0) {
-        setActiveTab(alreadyOpened[0]);
+      const tabAlreadyOpened = tabItems.filter((t) => t.type === type);
+      if (tabAlreadyOpened.length > 0) {
+        setAction(action);
+        tabAlreadyOpened[0].action = action;
+        tabAlreadyOpened[0].item = item;
+        setTabItems(tabItems);
+        setActiveTab(tabAlreadyOpened[0]);
         return;
       }
 
       const tab: Tab = {
         id: hash,
         type: type,
         title: `${type}.label`,
+        action: action,
+        item: undefined
       };
 
       addTab(tab);
@@ -110,20 +123,23 @@ const Tabs: React.FC = () => {
     }
   }, [activeTab, close]);
 
-  const borrowTab = useCallback(() => {
-    handleCreateTab('borrow');
+  const borrowTab = useCallback((params: CustomEvent<ActionParameter>) => {
+    const { action, value } = params.detail;
+    handleCreateTab('borrow', action, value);
   }, [handleCreateTab]);
 
-  const personTab = useCallback(() => {
-    handleCreateTab('person');
+  const personTab = useCallback((params: CustomEvent<ActionParameter>) => {
+    const { action, value } = params.detail;
+    handleCreateTab('person', action, value);
   }, [handleCreateTab]);
 
-  const titleTab = useCallback(() => {
-    handleCreateTab('title');
+  const titleTab = useCallback((params: CustomEvent<ActionParameter>) => {
+    const { action, value } = params.detail;
+    handleCreateTab('title', action, value);
   }, [handleCreateTab]);
 
   const settingsTab = useCallback(() => {
-    handleCreateTab('settings');
+    handleCreateTab('settings', Actions.update, {});
   }, [handleCreateTab]);
 
   const quickSearch = useCallback(() => {
@@ -139,7 +155,7 @@ const Tabs: React.FC = () => {
       { event: 'settingsTab', handler: settingsTab },
       { event: 'quickSearch', handler: quickSearch },
     ],
-    [closeCurrentTab, borrowTab, personTab, titleTab, settingsTab]
+    [closeCurrentTab, borrowTab, personTab, titleTab, settingsTab, quickSearch]
   );
 
   useEffect(() => {
@@ -206,7 +222,7 @@ const Tabs: React.FC = () => {
                 >
                   {tab.type === 'borrow' && <Borrow />}
                   {tab.type === 'person' && <Person />}
-                  {tab.type === 'title' && <TitleCreate />}
+                  {tab.type === 'title' && <Title action={tab.action} item={tab.item} />}
                   {tab.type === 'settings' && <Settings />}
                 </TabContent>
               )