#276 Improve File Tree Tab

- add checkboxes to all files and folders to activate and deactivate a file or folder

Author: MaximilianZenz

binocular-frontend-new/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "build-pouchdb": "PRE_CONFIGURE_DB=pouchdb NODE_OPTIONS=--max-old-space-size=32768 vite build",
+    "build:offline": "PRE_CONFIGURE_DB=pouchdb NODE_OPTIONS=--max-old-space-size=32768 vite build",
     "lint": "eslint binocular --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },

binocular-frontend-new/src/components/tabs/fileTree/fileList/fileList.tsx

@@ -62,7 +62,7 @@ function FileList(props: { orientation?: string }) {
         }>
         <div>
           {fileList ? (
-            <FileListFolder folder={fileList} name={'/'} foldedOut={true}></FileListFolder>
+            <FileListFolder folder={fileList} name={'/'} foldedOut={true} checked={true}></FileListFolder>
           ) : (
             <span className="loading loading-spinner loading-xs text-accent"></span>
           )}

binocular-frontend-new/src/components/tabs/fileTree/fileList/fileListElements/fileListFile.tsx

@@ -1,13 +1,26 @@
 import fileListElementsStyles from './fileListElements.module.scss';
 import { FileListElementType } from '../../../../../types/data/fileListType.ts';
 import FileIcon from '../../../../../assets/file_gray.svg';
+import { useEffect, useState } from 'react';
 
-function FileListFile(props: { file: FileListElementType }) {
+function FileListFile(props: { file: FileListElementType; checked: boolean }) {
+  const [checked, setChecked] = useState(props.checked);
+  useEffect(() => {
+    setChecked(props.checked);
+  }, [props.checked]);
   return (
     <>
-      <div className={fileListElementsStyles.element}>
-        <img src={FileIcon} alt={`folder ${props.file.name}`} />
-        <span>{props.file.name}</span>
+      <div className={'flex items-center'}>
+        <input
+          type={'checkbox'}
+          className={'checkbox checkbox-accent checkbox-xs'}
+          checked={checked}
+          onChange={(e) => setChecked(e.target.checked)}
+        />
+        <div className={fileListElementsStyles.element}>
+          <img src={FileIcon} alt={`folder ${props.file.name}`} />
+          <span>{props.file.name}</span>
+        </div>
       </div>
     </>
   );

binocular-frontend-new/src/components/tabs/fileTree/fileList/fileListElements/fileListFolder.tsx

@@ -1,19 +1,31 @@
 import fileListElementsStyles from './fileListElements.module.scss';
 import { FileListElementType, FileListElementTypeType } from '../../../../../types/data/fileListType.ts';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import FolderIcon from '../../../../../assets/folder_gray.svg';
 import FolderOpenIcon from '../../../../../assets/folder_open_gray.svg';
 import FileListFile from './fileListFile.tsx';
 
-function FileListFolder(props: { folder: FileListElementType[]; name: string; foldedOut: boolean }) {
+function FileListFolder(props: { folder: FileListElementType[]; name: string; foldedOut: boolean; checked: boolean }) {
   const [foldedOut, setFoldedOut] = useState(props.foldedOut);
+  const [checked, setChecked] = useState(props.checked);
+  useEffect(() => {
+    setChecked(props.checked);
+  }, [props.checked]);
   return (
     <>
       {foldedOut ? (
         <>
-          <div className={fileListElementsStyles.element} onClick={() => setFoldedOut(false)}>
-            <img src={FolderOpenIcon} alt={`folder open ${props.name}`} />
-            <span>{props.name}</span>
+          <div className={'flex items-center'}>
+            <input
+              type={'checkbox'}
+              className={'checkbox checkbox-accent checkbox-xs'}
+              checked={checked}
+              onChange={(e) => setChecked(e.target.checked)}
+            />
+            <div className={fileListElementsStyles.element} onClick={() => setFoldedOut(false)}>
+              <img src={FolderOpenIcon} alt={`folder open ${props.name}`} />
+              <span>{props.name}</span>
+            </div>
           </div>
           <div className={fileListElementsStyles.inset}>
             {props.folder
@@ -25,18 +37,27 @@ function FileListFolder(props: { folder: FileListElementType[]; name: string; fo
                       key={`fileListElement${i}`}
                       folder={element.children}
                       name={element.name}
-                      foldedOut={false}></FileListFolder>
+                      foldedOut={false}
+                      checked={checked}></FileListFolder>
                   );
                 } else {
-                  return <FileListFile key={`fileListElement${i}`} file={element}></FileListFile>;
+                  return <FileListFile key={`fileListElement${i}`} file={element} checked={checked}></FileListFile>;
                 }
               })}
           </div>
         </>
       ) : (
-        <div onClick={() => setFoldedOut(true)} className={fileListElementsStyles.element}>
-          <img src={FolderIcon} alt={`folder ${props.name}`} />
-          <span>{props.name}</span>
+        <div className={'flex items-center'}>
+          <input
+            type={'checkbox'}
+            className={'checkbox checkbox-accent checkbox-xs'}
+            checked={checked}
+            onChange={(e) => setChecked(e.target.checked)}
+          />
+          <div onClick={() => setFoldedOut(true)} className={fileListElementsStyles.element}>
+            <img src={FolderIcon} alt={`folder ${props.name}`} />
+            <span>{props.name}</span>
+          </div>
         </div>
       )}
     </>