Files CRUD.

Remove Contacts and Calendar + CardDav and CalDav.
2024-04-03 14:02:04 +01:00
parent c4788761d2
commit 4e5fdd569a
89 changed files with 2302 additions and 8001 deletions
--- a/components/files/SearchFiles.tsx
+++ b/components/files/SearchFiles.tsx
@@ -0,0 +1,165 @@
+import { useSignal } from '@preact/signals';
+import { useEffect } from 'preact/hooks';
+
+import { Directory, DirectoryFile } from '/lib/types.ts';
+// import { RequestBody, ResponseBody } from '/routes/api/files/search.tsx';
+interface SearchFilesProps {}
+
+export default function SearchFiles({}: SearchFilesProps) {
+  const isSearching = useSignal<boolean>(false);
+  const areResultsVisible = useSignal<boolean>(false);
+  const matchingDirectories = useSignal<Directory[]>([]);
+  const matchingFiles = useSignal<DirectoryFile[]>([]);
+  const searchTimeout = useSignal<ReturnType<typeof setTimeout>>(0);
+  const closeTimeout = useSignal<ReturnType<typeof setTimeout>>(0);
+
+  const dateFormat = new Intl.DateTimeFormat('en-GB', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+
+  function searchFiles(searchTerm: string) {
+    if (searchTimeout.value) {
+      clearTimeout(searchTimeout.value);
+    }
+
+    if (searchTerm.trim().length < 2) {
+      return;
+    }
+
+    areResultsVisible.value = false;
+
+    searchTimeout.value = setTimeout(() => {
+      isSearching.value = true;
+
+      // TODO: Build this
+      // try {
+      //   const requestBody: RequestBody = { searchTerm };
+      //   const response = await fetch(`/api/files/search`, {
+      //     method: 'POST',
+      //     body: JSON.stringify(requestBody),
+      //   });
+      //   const result = await response.json() as ResponseBody;
+
+      //   if (!result.success) {
+      //     throw new Error('Failed to search files!');
+      //   }
+
+      //   matchingDirectories.value = result.matchingDirectories;
+      //   matchingFiles.value = result.matchingFiles;
+
+      //   if (matchingDirectories.value.length > 0 || matchingFiles.value.length > 0) {
+      //     areResultsVisible.value = true;
+      //   }
+      // } catch (error) {
+      //   console.error(error);
+      // }
+
+      isSearching.value = false;
+    }, 500);
+  }
+
+  function onFocus() {
+    if (matchingDirectories.value.length > 0 || matchingFiles.value.length > 0) {
+      areResultsVisible.value = true;
+    }
+  }
+
+  function onBlur() {
+    if (closeTimeout.value) {
+      clearTimeout(closeTimeout.value);
+    }
+
+    closeTimeout.value = setTimeout(() => {
+      areResultsVisible.value = false;
+    }, 300);
+  }
+
+  useEffect(() => {
+    return () => {
+      if (searchTimeout.value) {
+        clearTimeout(searchTimeout.value);
+      }
+
+      if (closeTimeout.value) {
+        clearTimeout(closeTimeout.value);
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      <input
+        class='input-field w-72 mr-2'
+        type='search'
+        name='search'
+        placeholder='Search files...'
+        onInput={(event) => searchFiles(event.currentTarget.value)}
+        onFocus={() => onFocus()}
+        onBlur={() => onBlur()}
+      />
+      {isSearching.value ? <img src='/images/loading.svg' class='white mr-2' width={18} height={18} /> : null}
+      {areResultsVisible.value
+        ? (
+          <section class='relative inline-block text-left ml-2 text-xs'>
+            <section
+              class={`absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none`}
+              role='menu'
+              aria-orientation='vertical'
+              aria-labelledby='view-button'
+              tabindex={-1}
+            >
+              <section class='py-1'>
+                <ol class='mt-2'>
+                  {matchingDirectories.value.map((directory) => (
+                    <li class='mb-1'>
+                      <a
+                        href={`/files?path=${directory.parent_path}${directory.directory_name}`}
+                        class={`block px-2 py-2 hover:no-underline hover:opacity-60`}
+                        target='_blank'
+                        rel='noopener noreferrer'
+                      >
+                        <time
+                          datetime={new Date(directory.updated_at).toISOString()}
+                          class='mr-2 flex-none text-slate-100 block'
+                        >
+                          {dateFormat.format(new Date(directory.updated_at))}
+                        </time>
+                        <p class='flex-auto truncate font-medium text-white'>
+                          {directory.directory_name}
+                        </p>
+                      </a>
+                    </li>
+                  ))}
+                  {matchingFiles.value.map((file) => (
+                    <li class='mb-1'>
+                      <a
+                        href={`/files/open/${file.file_name}?path=${file.parent_path}`}
+                        class={`block px-2 py-2 hover:no-underline hover:opacity-60`}
+                        target='_blank'
+                        rel='noopener noreferrer'
+                      >
+                        <time
+                          datetime={new Date(file.updated_at).toISOString()}
+                          class='mr-2 flex-none text-slate-100 block'
+                        >
+                          {dateFormat.format(new Date(file.updated_at))}
+                        </time>
+                        <p class='flex-auto truncate font-medium text-white'>
+                          {file.file_name}
+                        </p>
+                      </a>
+                    </li>
+                  ))}
+                </ol>
+              </section>
+            </section>
+          </section>
+        )
+        : null}
+    </>
+  );
+}