delete plugin through modal confirmation

2022-09-02 19:16:13 +01:00 · 2022-09-02 19:16:13 +01:00 · 5a08834def
parent 54eed13541
commit 5a08834def
3 changed files with 58 additions and 5 deletions
--- a/packages/builder/src/pages/builder/portal/manage/plugins/_components/DeletePluginModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/plugins/_components/DeletePluginModal.svelte
@ -0,0 +1,31 @@
+<script>
+  import { goto } from "@roxi/routify"
+  import { Body, ModalContent, notifications } from "@budibase/bbui"
+
+  import { plugins } from "stores/portal"
+
+  export let plugin
+
+  async function deletePlugin() {
+    try {
+      await plugins.deletePlugin(plugin._id, plugin._rev)
+      notifications.success(`Plugin ${plugin?.name} deleted.`)
+      $goto("./")
+    } catch (error) {
+      notifications.error("Error deleting plugin")
+    }
+  }
+</script>
+
+<ModalContent
+  warning
+  onConfirm={deletePlugin}
+  title="Delete Plugin"
+  confirmText="Delete plugin"
+  cancelText="Cancel"
+  showCloseIcon={false}
+>
+  <Body>
+    Are you sure you want to delete <strong>{plugin?.name}</strong>
+  </Body>
+</ModalContent>
--- a/packages/builder/src/pages/builder/portal/manage/plugins/_components/PluginRow.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/plugins/_components/PluginRow.svelte
@ -1,6 +1,8 @@
 <script>
  import { Icon, Body, ActionMenu, MenuItem, Detail } from "@budibase/bbui"
-  import { plugins } from "stores/portal"
+  import { createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()

  export let plugin
  $: console.log(plugin)
@ -9,6 +11,14 @@
  function editGroup() {
    modal.show()
  }
+
+  const remove = plugin => {
+    dispatch("delete", {
+      _id: plugin._id,
+      _rev: plugin._rev,
+      name: plugin.name,
+    })
+  }
 </script>

 <div class="row">
@ -41,9 +51,7 @@
        <span slot="control">
          <Icon hoverable name="More" />
        </span>
-        <MenuItem
-          on:click={() => plugins.deletePlugin(plugin._id, plugin._rev)}
-          icon="Delete">Delete</MenuItem
+        <MenuItem on:click={() => remove(plugin)} icon="Delete">Delete</MenuItem
        >
        <MenuItem on:click={() => editGroup(plugin)} icon="Edit">Edit</MenuItem>
      </ActionMenu>
--- a/packages/builder/src/pages/builder/portal/manage/plugins/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/plugins/index.svelte
@ -13,9 +13,12 @@
  import { plugins } from "stores/portal"
  import PluginRow from "./_components/PluginRow.svelte"
  import AddPluginModal from "./_components/AddPluginModal.svelte"
+  import DeletePluginModal from "./_components/DeletePluginModal.svelte"

  let modal
+  let deleteModal
  let searchTerm = ""
+  let removePlugin

  let filterOptions = [
    { label: "All Plugins", value: "all" },
@ -31,6 +34,14 @@
          .filter(plugin =>
            plugin?.name?.toLowerCase().includes(searchTerm.toLowerCase())
          )
+
+  const deletePlugin = evt => {
+    const { detail } = evt
+
+    deleteModal.show()
+    removePlugin = detail
+  }
+
  onMount(async () => {
    await plugins.load()
  })
@ -66,7 +77,7 @@

    {#if $plugins}
      {#each filteredPlugins as plugin}
-        <PluginRow {plugin} />
+        <PluginRow {plugin} on:delete={deletePlugin} />
      {/each}
    {/if}
  </Layout>
@ -75,6 +86,9 @@
 <Modal bind:this={modal}>
  <AddPluginModal />
 </Modal>
+<Modal bind:this={deleteModal}>
+  <DeletePluginModal plugin={removePlugin} />
+</Modal>

 <style>
  .filters {