laden von erweiterungen implementiert

src/pages/vault/[vaultId]/browser.vue

@@ -1,16 +1,16 @@
 <template>
-    <div>
-        browser {{ useRouter().currentRoute.value.meta.name }}
-        <HaexBrowser
-            :tabs="tabs"
-            :activeTabId="activeTabId"
-            @createTab="createNewTab"
-            @closeTab="closeTab"
-            @navigate="navigateToUrl"
-            @goBack="goBack"
-            @goForward="goForward"
-        />
-    </div>
+  <div class="bg-red-400 h-full">
+    browser {{ useRouter().currentRoute.value.meta.name }}
+    <HaexBrowser
+      :tabs="tabs"
+      :activeTabId="activeTabId"
+      @createTab="createNewTab"
+      @closeTab="closeTab"
+      @navigate="navigateToUrl"
+      @goBack="goBack"
+      @goForward="goForward"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -20,16 +20,16 @@ import { Window, getCurrentWindow } from "@tauri-apps/api/window";
 import { Webview } from "@tauri-apps/api/webview";
 
 definePageMeta({
-    name: "haexBrowser",
+  name: "haexBrowser",
 });
 
 interface Tab {
-    id: string;
-    title: string;
-    url: string;
-    isLoading: boolean;
-    isActive: boolean;
-    window_label: string;
+  id: string;
+  title: string;
+  url: string;
+  isLoading: boolean;
+  isActive: boolean;
+  window_label: string;
 }
 
 const tabs = ref<Tab[]>([]);
@@ -39,43 +39,43 @@ let unlistenTabCreated: UnlistenFn | null = null;
 let unlistenTabClosed: UnlistenFn | null = null;
 
 onMounted(async () => {
-    // Erstelle einen ersten Tab beim Start
-    //createNewTab("https://www.google.com");
+  // Erstelle einen ersten Tab beim Start
+  //createNewTab("https://www.google.com");
 
-    // Höre auf Tab-Events
-    unlistenTabCreated = await listen("tab-created", (event) => {
-        const newTab = event.payload as Tab;
+  // Höre auf Tab-Events
+  unlistenTabCreated = await listen("tab-created", (event) => {
+    const newTab = event.payload as Tab;
 
-        tabs.value = tabs.value.map((tab) => ({
-            ...tab,
-            isActive: tab.id === newTab.id,
-        }));
+    tabs.value = tabs.value.map((tab) => ({
+      ...tab,
+      isActive: tab.id === newTab.id,
+    }));
 
-        if (!tabs.value.some((tab) => tab.id === newTab.id)) {
-            tabs.value.push(newTab);
-        }
+    if (!tabs.value.some((tab) => tab.id === newTab.id)) {
+      tabs.value.push(newTab);
+    }
 
-        activeTabId.value = newTab.id;
-    });
+    activeTabId.value = newTab.id;
+  });
 
-    unlistenTabClosed = await listen("tab-closed", (event) => {
-        const closedTabId = event.payload as string;
-        tabs.value = tabs.value.filter((tab) => tab.id !== closedTabId);
-    });
+  unlistenTabClosed = await listen("tab-closed", (event) => {
+    const closedTabId = event.payload as string;
+    tabs.value = tabs.value.filter((tab) => tab.id !== closedTabId);
+  });
 });
 
 onUnmounted(() => {
-    if (unlistenTabCreated) unlistenTabCreated();
-    if (unlistenTabClosed) unlistenTabClosed();
+  if (unlistenTabCreated) unlistenTabCreated();
+  if (unlistenTabClosed) unlistenTabClosed();
 });
 
 const createNewTab = async (url: string = "about:blank") => {
-    try {
-        /* const appWindow = new Window('uniqueLabel111', {
+  try {
+    /* const appWindow = new Window('uniqueLabel111', {
       fullscreen: true,
     });
  */
-        /* const appWindow = getCurrentWindow();
+    /* const appWindow = getCurrentWindow();
 
     const webview = new Webview(appWindow, 'theUniqueLabel', {
       url: 'https://github.com/tauri-apps/tauri',
@@ -85,43 +85,43 @@ const createNewTab = async (url: string = "about:blank") => {
       y: 0,
     });
     await webview.show(); */
-        //console.log('create webview', webview);
-        const tab_id = "foo";
-        await invoke("create_tab", { url, tabId: "foo" });
-    } catch (error) {
-        console.error("Fehler beim Erstellen des Tabs:", error);
-    }
+    //console.log('create webview', webview);
+    const tab_id = "foo";
+    await invoke("create_tab", { url, tabId: "foo" });
+  } catch (error) {
+    console.error("Fehler beim Erstellen des Tabs:", error);
+  }
 };
 
 const closeTab = async (tabId: string) => {
-    try {
-        //await invoke('close_tab', { tabId });
-    } catch (error) {
-        console.error("Fehler beim Schließen des Tabs:", error);
-    }
+  try {
+    //await invoke('close_tab', { tabId });
+  } catch (error) {
+    console.error("Fehler beim Schließen des Tabs:", error);
+  }
 };
 
 const navigateToUrl = async (tabId: string, url: string) => {
-    try {
-        //await invoke('navigate_to_url', { tabId, url });
-    } catch (error) {
-        console.error("Fehler bei der Navigation:", error);
-    }
+  try {
+    //await invoke('navigate_to_url', { tabId, url });
+  } catch (error) {
+    console.error("Fehler bei der Navigation:", error);
+  }
 };
 
 const goBack = async (tabId: string | null) => {
-    try {
-        //await invoke('go_back', { tabId });
-    } catch (error) {
-        console.error("Fehler beim Zurückgehen:", error);
-    }
+  try {
+    //await invoke('go_back', { tabId });
+  } catch (error) {
+    console.error("Fehler beim Zurückgehen:", error);
+  }
 };
 
 const goForward = async (tabId: string | null) => {
-    try {
-        //await invoke('go_forward', { tabId });
-    } catch (error) {
-        console.error("Fehler beim Vorwärtsgehen:", error);
-    }
+  try {
+    //await invoke('go_forward', { tabId });
+  } catch (error) {
+    console.error("Fehler beim Vorwärtsgehen:", error);
+  }
 };
 </script>

src/pages/vault/[vaultId]/extensions/[extensionId].vue

@@ -1,6 +1,8 @@
 <template>
-  {{ iframeSrc }}
-  <div class="w-full h-full">
+  <div class="w-full h-full overflow-scroll bg-red-300">
+    <div>
+      {{ iframeSrc }}
+    </div>
     <iframe
       v-if="iframeSrc"
       class="w-full h-full"
@@ -10,7 +12,7 @@
       sandbox="allow-scripts allow-same-origin"
     >
     </iframe>
-    <p v-else>{{ t("loading") }}</p>
+    <!--  <p v-else>{{ t("loading") }}</p> -->
   </div>
 </template>
 
@@ -28,11 +30,11 @@ const extensionStore = useExtensionsStore();
 watch(iframeSrc, () => console.log("iframeSrc", iframeSrc.value), { immediate: true });
 
 onMounted(async () => {
-  const minfest = await extensionStore.readManifestFileAsync(
+  /* const minfest = await extensionStore.readManifestFileAsync(
     currentExtension.value!.id,
     currentExtension.value!.version
   );
-  console.log("manifest", minfest, extensionStore.extensionEntry);
+  console.log("manifest", minfest, extensionStore.extensionEntry); */
 });
 </script>
 

src/pages/vault/[vaultId]/extensions/index.vue

@@ -1,15 +1,38 @@
 <template>
-  <div class="flex flex-col">
-    <h1>{{ t("title") }}</h1>
-    <UiButton @click="loadExtensionManifestAsync">
-      {{ t("extension.add") }}
+  <div class="flex flex-col p-1 relative">
+    <UiButton
+      class="fixed top-20 right-4 btn-square btn-primary"
+      @click="loadExtensionManifestAsync"
+    >
+      <Icon name="mdi:plus" size="1.5em" />
     </UiButton>
+    <h1>{{ t("title") }}</h1>
+
+    <div class="flex">
+      <HaexExtensionCard
+        v-for="extension in extensionStore.availableExtensions"
+        v-bind="extension"
+        @remove="onShowRemoveDialog(extension)"
+      >
+      </HaexExtensionCard>
+    </div>
+    <!-- <UiButton @click="loadExtensionManifestAsync">
+      {{ t("extension.add") }}
+    </UiButton> -->
 
     <HaexExtensionManifestConfirm
-      :manifest="extension.manifest!"
+      :manifest="extension.manifest"
       v-model:open="showConfirmation"
       @confirm="addExtensionAsync"
     />
+
+    {{ showRemoveDialog }}
+    <HaexExtensionDialogRemove
+      v-model:open="showRemoveDialog"
+      :extension="extensionToBeRemoved"
+      @confirm="removeExtensionAsync"
+    >
+    </HaexExtensionDialogRemove>
   </div>
 </template>
 
@@ -17,6 +40,7 @@
 import { join } from "@tauri-apps/api/path";
 import { open } from "@tauri-apps/plugin-dialog";
 import { readTextFile } from "@tauri-apps/plugin-fs";
+import type { IHaexHubExtension, IHaexHubExtensionManifest } from "~/types/haexhub";
 
 definePageMeta({
   name: "extensionOverview",
@@ -35,6 +59,8 @@ const extension = reactive<{
   path: "",
 });
 
+onMounted(() => console.log("extension overview"));
+
 const loadExtensionManifestAsync = async () => {
   try {
     extension.path = await open({ directory: true, recursive: true });
@@ -50,7 +76,8 @@ const loadExtensionManifestAsync = async () => {
     extension.manifest = manifestFile;
     showConfirmation.value = true;
   } catch (error) {
-    console.error("Fehler beim Laden des Moduls:", error);
+    console.error("Fehler loadExtensionManifestAsync:", error);
+    add({ type: "error", text: JSON.stringify(error) });
   }
 };
 
@@ -67,26 +94,64 @@ const addExtensionAsync = async () => {
       text: t("extension.success.text"),
     });
   } catch (error) {
-    console.error("Fehler beim Laden des Moduls:", error);
+    console.error("Fehler addExtensionAsync:", error);
     add({ type: "error", text: JSON.stringify(error) });
   }
 };
+
+const showRemoveDialog = ref(false);
+const extensionToBeRemoved = ref<IHaexHubExtension>();
+
+const onShowRemoveDialog = (extension: IHaexHubExtension) => {
+  extensionToBeRemoved.value = extension;
+  showRemoveDialog.value = true;
+};
+
+const removeExtensionAsync = async () => {
+  if (!extensionToBeRemoved.value?.id || !extensionToBeRemoved.value?.version) {
+    add({ type: "error", text: "Erweiterung kann nicht gelöscht werden" });
+    return;
+  }
+
+  try {
+    await extensionStore.removeExtensionAsync(
+      extensionToBeRemoved.value.id,
+      extensionToBeRemoved.value.version
+    );
+    await extensionStore.loadExtensionsAsync();
+    add({
+      type: "success",
+      title: t("extension.remove.success.title", {
+        extensionName: extensionToBeRemoved.value.name,
+      }),
+      text: t("extension.remove.success.text", { extensionName: extensionToBeRemoved.value.name }),
+    });
+  } catch (error) {
+    add({
+      type: "error",
+      title: t("extension.remove.error.title"),
+      text: t("extension.remove.error.text", { error: JSON.stringify(error) }),
+    });
+  }
+};
 </script>
 
-<i18n lang="json">
-{
-  "de": {
-    "title": "Erweiterung installieren",
-    "extension": {
-      "add": "Erweiterung hinzufügen",
-      "success": {
-        "title": "{extension} hinzugefügt",
-        "text": "Die Erweiterung wurde erfolgreich hinzugefügt"
-      }
-    }
-  },
-  "en": {
-    "title": "Install extension"
-  }
-}
+<i18n lang="yaml">
+de:
+  title: "Erweiterung installieren"
+  extension:
+    remove:
+      success:
+        text: "Erweiterung {extensionName} wurde erfolgreich entfernt"
+        title: "{extensionName} entfernt"
+      error:
+        text: "Erweiterung {extensionName} konnte nicht entfernt werden. \n {error}"
+        title: "Fehler beim Entfernen von {extensionName}"
+
+    add: "Erweiterung hinzufügen"
+    success:
+      title: "{extension} hinzugefügt"
+      text: "Die Erweiterung wurde erfolgreich hinzugefügt"
+en:
+  title: "Install extension"
 </i18n>

src/pages/vault/[vaultId]/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-blue-200 h-full">aaaaa</div>
+  <div class="h-full"></div>
 </template>
 
 <script setup lang="ts">