@saltcorn/filemanager 0.8.7-beta.2 → 0.8.7-beta.4

package/src/App.svelte

@@ -2,7 +2,6 @@
   import { onMount } from "svelte";
   import Fa from "svelte-fa";
   import {
-    faTrashAlt,
     faFileImage,
     faFile,
     faFolder,
@@ -22,14 +21,45 @@
   export let directories = [];
   export let roles = {};
   export let currentFolder = "/";
+  let noSelectAll = false;
   let selectedList = [];
   let selectedFiles = {};
   let rolesList;
   let lastSelected;
-  const fetchAndReset = async function (keepSelection) {
-    const response = await fetch(`/files?dir=${currentFolder}`, {
-      headers: { "X-Requested-With": "XMLHttpRequest" },
-    });
+  let sortBy;
+  let sortDesc = false;
+  let search = "";
+
+  const updateDirState = () => {
+    const url = new URL(window.location);
+    if (url.searchParams.get("dir") !== currentFolder) {
+      url.searchParams.set("dir", currentFolder);
+      window.history.replaceState(null, "", url.toString());
+    }
+  };
+  const updateSortState = () => {
+    const url = new URL(window.location);
+    url.searchParams.set("sortBy", sortBy);
+    if (sortDesc) url.searchParams.set("sortDesc", "on");
+    else url.searchParams.delete("sortDesc");
+    window.history.replaceState(null, "", url.toString());
+  };
+  const readState = () => {
+    const url = new URL(window.location);
+    sortBy = url.searchParams.get("sortBy");
+    sortDesc = url.searchParams.get("sortDesc") === "on";
+    const dirParam = url.searchParams.get("dir");
+    if (dirParam) currentFolder = dirParam;
+  };
+  const fetchAndReset = async function (keepSelection, keepAlerts) {
+    const response = await fetch(
+      `/files?dir=${encodeURIComponent(currentFolder)}${
+        search ? `&search=${encodeURIComponent(search)}` : ""
+      }`,
+      {
+        headers: { "X-Requested-With": "XMLHttpRequest" },
+      }
+    );
     const data = await response.json();
     files = data.files;
     for (const file of files) {
@@ -50,9 +80,13 @@
     } else if (lastSelected) {
       lastSelected = files.find((f) => f.filename === lastSelected.filename);
     }
-    clickHeader("filename");
+    if (!keepAlerts) emptyAlerts();
+    clickHeader(sortBy || "filename", true);
   };
-  onMount(fetchAndReset);
+  onMount(async () => {
+    readState();
+    await fetchAndReset(false, true);
+  });
   function rowClick(file, e) {
     file.selected = true;
     const prev = selectedFiles[file.filename];
@@ -68,39 +102,62 @@
       else lastSelected = null;
     }
     document.getSelection().removeAllRanges();
+    const select = document.getElementById("setRoleSelectId");
+    if (select) select.value = "";
     console.log(lastSelected);
   }
+
+  let ctrlDown = false;
+  function onKeyDown(e) {
+    if (e.keyCode === 17) ctrlDown = true;
+    else if (ctrlDown && e.keyCode === 65 && !noSelectAll) {
+      e.preventDefault();
+      const selectedLength = Object.values(selectedFiles).filter(
+        (v) => v
+      ).length;
+      const select = selectedLength !== files.length;
+      if (!select) lastSelected = undefined;
+      for (const file of files) {
+        file.selected = select;
+        selectedFiles[file.filename] = select;
+      }
+      if (select && !lastSelected) lastSelected = files[files.length - 1];
+    }
+  }
+
+  function onKeyUp(e) {
+    if (e.keyCode === 17) ctrlDown = false;
+  }
   $: selectedList = Object.entries(selectedFiles)
     .filter(([k, v]) => v)
     .map(([k, v]) => k);
 
-  async function POST(url, body, isDownload) {
-    const go=fetch(url, {
+  async function POST(url, body, isDownload, isFormData) {
+    const go = fetch(url, {
       headers: {
         "X-Requested-With": "XMLHttpRequest",
         "CSRF-Token": window._sc_globalCsrf,
-        "Content-Type": "application/json",
+        ...(!isFormData ? { "Content-Type": "application/json" } : {}),
       },
       method: "POST",
-      body: JSON.stringify(body || {}),
+      body: isFormData ? body : JSON.stringify(body || {}),
     });
-    if(isDownload){
-      const res = await go
-      const blob = await res.blob()
+    if (isDownload) {
+      const res = await go;
+      const blob = await res.blob();
 
       const link = document.createElement("a");
       link.href = window.URL.createObjectURL(blob);
-      const header = res.headers.get('Content-Disposition');
-      if(header){
-        const parts = header.split(';');
-        let filename = parts[1].split('=')[1].replaceAll('"', "");
+      const header = res.headers.get("Content-Disposition");
+      if (header) {
+        const parts = header.split(";");
+        let filename = parts[1].split("=")[1].replaceAll('"', "");
         link.download = filename;
       } else link.target = "_blank";
       link.click();
-    
-      return
-   } else
-      return await go;
+
+      return;
+    } else return await go;
   }
 
   async function goAction(e) {
@@ -109,15 +166,16 @@
     switch (action) {
       case "Delete":
         if (!confirm(`Delete files: ${selectedList.join()}`)) return;
+        const alerts = [];
         for (const fileNm of selectedList) {
           const file = files.find((f) => f.filename === fileNm);
-          const delres=await POST(`/files/delete/${file.location}`);
-          const deljson = await delres.json()
-          if(deljson.error) {
-            window.notifyAlert({ type: "danger", text: deljson.error })
-          }
+          const delres = await POST(`/files/delete/${file.location}`);
+          const deljson = await delres.json();
+          if (deljson.error)
+            alerts.push({ type: "danger", text: deljson.error });
         }
         await fetchAndReset();
+        for (const alert of alerts) notifyAlert(alert);
         break;
       case "Rename":
         const newName = window.prompt(
@@ -134,7 +192,6 @@
         await POST(`/files/unzip/${lastSelected.location}`, {});
         await fetchAndReset();
         break;
-
     }
   }
   async function changeAccessRole(e) {
@@ -146,15 +203,18 @@
     await fetchAndReset(true);
   }
   async function downloadZip() {
-    const filesToZip=[]
+    const filesToZip = [];
     for (const fileNm of selectedList) {
-      filesToZip.push(fileNm)
-     
+      filesToZip.push(fileNm);
     }
-    await POST(`/files/download-zip`, { 
-      files: filesToZip, 
-      location: currentFolder
-    }, true);
+    await POST(
+      `/files/download-zip`,
+      {
+        files: filesToZip,
+        location: currentFolder,
+      },
+      true
+    );
   }
   async function moveDirectory(e) {
     for (const fileNm of selectedList) {
@@ -168,6 +228,7 @@
 
   function gotoFolder(folder) {
     currentFolder = folder;
+    updateDirState();
     fetchAndReset();
   }
 
@@ -204,11 +265,12 @@
     return faFile;
   }
 
-  let sortBy;
-  let sortDesc = false;
-  function clickHeader(varNm) {
-    if (sortBy === varNm) sortDesc = !sortDesc;
-    else sortBy = varNm;
+  function clickHeader(varNm, isInit) {
+    if (sortBy === varNm && !isInit) sortDesc = !sortDesc;
+    else if (sortBy !== varNm) {
+      sortBy = varNm;
+      sortDesc = false;
+    }
     let getter = (x) => x[sortBy];
     if (sortBy === "uploaded_at") getter = (x) => new Date(x[sortBy]);
     if (sortBy === "filename") getter = (x) => (x[sortBy] || "").toLowerCase();
@@ -218,15 +280,56 @@
       return 0;
     };
     files = files.sort(cmp);
+    updateSortState();
   }
-  function getSorterIcon(varNm) {   
+  function getSorterIcon(varNm) {
     if (varNm !== sortBy) return null;
     return sortDesc ? faCaretDown : faCaretUp;
   }
+
+  function formatLocation(file) {
+    let relative =
+      currentFolder === "/"
+        ? file.location
+        : file.location.substr(currentFolder.length);
+    if (relative.startsWith("/")) relative = relative.substr(1);
+    return relative.substr(0, relative.length - file.filename.length);
+  }
+
+  async function uploadFiles(files) {
+    try {
+      const body = new FormData();
+      for (const file of files) {
+        body.append("file", file);
+      }
+      body.append("folder", currentFolder);
+      const resp = await POST("/files/upload", body, false, true);
+      if (resp?.status === 200) {
+        await fetchAndReset();
+        const data = await resp.json();
+        notifyAlert({ type: "success", text: data?.success?.msg || "Success" });
+      } else notifyAlert({ type: "warning", text: "Unable to upload" });
+    } catch (error) {
+      notifyAlert({
+        type: "danger",
+        text: error.message ? error.message : "An error occured.",
+      });
+    }
+  }
+
+  function handleDrop(e) {
+    e.preventDefault();
+    if (e.dataTransfer?.files?.length > 0) uploadFiles(e.dataTransfer.files);
+  }
 </script>
 
 <main>
-  <div class="row">
+  <div
+    id="drop-zone"
+    on:drop={handleDrop}
+    ondragover="return false"
+    class="row"
+  >
     <div class="col-8">
       <div>
         <nav aria-label="breadcrumb">
@@ -246,6 +349,37 @@
           </ol>
         </nav>
       </div>
+      <div class="input-group search-bar mb-3">
+        <button
+          on:click={async (e) => {
+            await fetchAndReset();
+          }}
+          class="btn btn-outline-secondary search-bar"
+          type="submit"
+          id="button-search-submit"
+        >
+          <i class="fas fa-search" />
+        </button>
+
+        <input
+          on:change={async (e) => {
+            search = e.target.value;
+            await fetchAndReset();
+          }}
+          on:focus={() => {
+            noSelectAll = true;
+          }}
+          on:blur={() => {
+            noSelectAll = false;
+          }}
+          type="search"
+          class="form-control search-bar"
+          placeholder="Search Files"
+          aria-label="Search"
+          aria-describedby="button-search-submit"
+        />
+      </div>
+
       <div class="filelist">
         <table class="table table-sm">
           <thead>
@@ -255,6 +389,9 @@
                 Filename
                 <Fa icon={getSorterIcon("filename", sortBy, sortDesc)} />
               </th>
+              {#if search}
+                <th>Location</th>
+              {/if}
               <th on:click={() => clickHeader("mimetype")}>
                 Media type
                 <Fa icon={getSorterIcon("mimetype", sortBy, sortDesc)} />
@@ -296,6 +433,11 @@
                     {file.filename}
                   {/if}
                 </td>
+                {#if search}
+                  <td>
+                    {formatLocation(file)}
+                  </td>
+                {/if}
                 <td>
                   {file.mimetype}
                 </td>
@@ -315,6 +457,7 @@
                 <Fa size="lg" icon={faFolderPlus} />
               </td>
               <td>Create new folder...</td>
+              {#if search}<td />{/if}
               <td />
               <td />
               <td />
@@ -377,7 +520,11 @@
           </strong>
         {/if}
         <div class="file-actions d-flex">
-          <select class="form-select" on:change={changeAccessRole}>
+          <select
+            id="setRoleSelectId"
+            class="form-select"
+            on:change={changeAccessRole}
+          >
             <option value="" disabled selected>Set access</option>
             {#each rolesList as role}
               <option value={role.id}>{role.role}</option>
@@ -397,23 +544,23 @@
               <option>Rename</option>
             {/if}
             {#if selectedList.length === 1 && lastSelected.filename.endsWith(".zip")}
-            <option>Unzip</option>
-          {/if}
+              <option>Unzip</option>
+            {/if}
           </select>
         </div>
-        {#if selectedList.length > 1}       
-          <button class="btn btn-outline-secondary mt-2" 
-                  on:click={downloadZip}>
-            <i class="fas fa-file-archive"></i>
+        {#if selectedList.length > 1}
+          <button class="btn btn-outline-secondary mt-2" on:click={downloadZip}>
+            <i class="fas fa-file-archive" />
             Download Zip Archive
           </button>
         {/if}
-        
       {/if}
     </div>
   </div>
 </main>
 
+<svelte:window on:keydown={onKeyDown} on:keyup={onKeyUp} />
+
 <style>
   tr.selected {
     background-color: rgb(213, 237, 255);