Add selectFolder button and functionality

Adds a button to the UI to select folders and adds them to a list

openem-ingestor/app.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"context"
+	"openem-ingestor/backend"
 
 	"github.com/wailsapp/wails/v2/pkg/runtime"
 )
@@ -37,5 +38,9 @@ func (a *App) startup(ctx context.Context) {
 }
 
 func (a *App) SelectFolder() {
-
+	folder, err := backend.SelectFolder(a.ctx)
+	if err != nil {
+		return
+	}
+	println(folder.Folder)
 }

openem-ingestor/backend/api.go

@@ -0,0 +1,32 @@
+package backend
+
+import (
+	"context"
+
+"github.com/google/uuid"
+	"github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+type DatasetFolder struct {
+Id     uuid.UUID
+	Folder string
+Cancel context.CancelFunc
+}
+
+// Select a folder using a native menu
+func SelectFolder(context context.Context) (DatasetFolder, error) {
+	dialogOptions := runtime.OpenDialogOptions{
+	}
+
+	folder, err := runtime.OpenDirectoryDialog(context, dialogOptions)
+	if err != nil || folder == "" {
+		return DatasetFolder{}, err
+	}
+
+	id := uuid.New()
+
+	runtime.EventsEmit(context, "folder-added", id, folder)
+
+	selected_folder := DatasetFolder{Folder: folder, Id: id}
+	return selected_folder, nil
+}

openem-ingestor/frontend/src/App.svelte

@@ -1,13 +1,40 @@
 <script lang="ts">
   import logo from "./assets/images/logo-wide-1024x317.png";
-  // import { SelectFolder } from "../wailsjs/go/main/App.js";
+  import { SelectFolder } from "../wailsjs/go/main/App.js";
+  import { EventsOn } from "../wailsjs/runtime/runtime";
+  import List from "./List.svelte";
+  import ListElement from "./ListElement.svelte";
 
-  function selectFolder(): void {}
+  function selectFolder(): void {
+    SelectFolder();
+  }
+
+  let items = {};
+
+  function newItem(id: string, folder: string): string {
+    items[id] = {
+      id: id,
+      value: folder,
+      status: "Selected",
+      progress: 0,
+      component: ListElement,
+    };
+    return id;
+  }
+
+  EventsOn("folder-added", (id, folder) => {
+    newItem(id, folder);
+  });
 </script>
 
 <main>
   <img alt="OpenEM logo" id="logo" src={logo} />
   <button class="btn" on:click={selectFolder}>Select Folder</button>
+  <div>
+    <div id="upload-list">
+      <List {items} />
+    </div>
+  </div>
 </main>
 
 <style>

openem-ingestor/frontend/src/List.svelte

@@ -0,0 +1,25 @@
+<script>
+  export let items;
+</script>
+
+<h3>Selected Folders:</h3>
+<div style="overflow-y: scroll; height:400px;">
+  <ul>
+    {#each Object.entries(items) as [id, item]}
+      <li>
+        <svelte:component this={item.component} {...item} />
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+  ul {
+    list-style-type: none;
+  }
+  li {
+    display: block;
+    flex: 0 1 auto; /* Default */
+    list-style-type: none;
+  }
+</style>

openem-ingestor/frontend/src/ListElement.svelte

@@ -0,0 +1,30 @@
+<script>
+  export let id;
+  export let value;
+  export let status;
+  export let progress;
+</script>
+
+<div class="listitem">
+  <div class="path">
+    {value}
+  </div>
+  <div>
+    {status}
+  </div>
+  <div>
+    {progress} %
+  </div>
+</div>
+
+<style>
+  .listitem {
+    display: grid;
+    grid-template-columns: 5fr 2fr 2fr;
+    grid-template-rows: auto;
+    padding-right: 30px;
+  }
+  .path {
+    text-align: left;
+  }
+</style>

openem-ingestor/go.mod

@@ -4,13 +4,15 @@ go 1.21
 
 toolchain go1.22.1
 
-require github.com/wailsapp/wails/v2 v2.9.1
+require (
+	github.com/google/uuid v1.3.0
+	github.com/wailsapp/wails/v2 v2.9.1
+)
 
 require (
 	github.com/bep/debounce v1.2.1 // indirect
 	github.com/go-ole/go-ole v1.2.6 // indirect
 	github.com/godbus/dbus/v5 v5.1.0 // indirect
-	github.com/google/uuid v1.3.0 // indirect
 	github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e // indirect
 	github.com/labstack/echo/v4 v4.10.2 // indirect
 	github.com/labstack/gommon v0.4.0 // indirect