[studio] enable db actions #1389 (#1424)

* studio - db actions

* studio - db actions

* studio - db actions

* studio - dblist refacotoring

* dropdown menu

* studio - db actions and fixed refresh

* studio - db actions

* studio - db config and unit tests

* studio - unit tests

agdb_studio/package.json

@@ -17,6 +17,8 @@
     },
     "dependencies": {
         "@kalimahapps/vue-icons": "^1.7.1",
+        "@vueuse/components": "^12.0.0",
+        "@vueuse/core": "^12.0.0",
         "agdb_api": "file:../agdb_api/typescript",
         "openapi-client-axios": "^7.5.1",
         "vue": "^3.3.4",

agdb_studio/src/assets/base.css

@@ -22,12 +22,15 @@
     --text-dark-2: rgba(235, 235, 235, 0.64);
 
     --base-font: "Red Hat Display", sans-serif;
+
+    --orange: #ffa02c;
 }
 
 :root {
     --color-background: var(--white);
     --color-background-soft: var(--white-soft);
     --color-background-mute: var(--white-mute);
+    --color-background-active: var(--orange);
 
     --color-border: var(--divider-light-2);
     --color-border-hover: var(--divider-light-1);

agdb_studio/src/assets/button.less

@@ -21,25 +21,25 @@
 
 .button-default {
     --backgroundColor: #007bff;
-    --color: #fff;
+    --color: var(--white);
     --borderColor: #025ec0;
 }
 
 .button-success {
     --backgroundColor: #28a745;
-    --color: #fff;
+    --color: var(--white);
     --borderColor: #1e7732;
 }
 
 .button-warning {
-    --backgroundColor: #ffa02c;
-    --color: #181818;
+    --backgroundColor: var(--orange);
+    --color: var(--black);
     --borderColor: #d88621;
 }
 
 .button-danger {
     --backgroundColor: #dc3545;
-    --color: #fff;
+    --color: var(--white);
     --borderColor: #af2836;
 }
 

agdb_studio/src/components/base/dropdown/AgdbDropdown.spec.ts

@@ -0,0 +1,44 @@
+import { mount } from "@vue/test-utils";
+import AgdbDropdown from "./AgdbDropdown.vue";
+import { describe, beforeEach, vi, it, expect } from "vitest";
+
+describe("AgdbDropdown", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    it("should open and close on click", async () => {
+        const wrapper = mount(AgdbDropdown, {
+            slots: {
+                content: "<div>content</div>",
+                trigger: "<div>trigger</div>",
+            },
+        });
+        const trigger = wrapper.find(".trigger");
+        expect(wrapper.find(".content").exists()).toBe(false);
+        trigger.trigger("click");
+        await wrapper.vm.$nextTick();
+        expect(wrapper.find(".content").isVisible()).toBe(true);
+        trigger.trigger("click");
+        await wrapper.vm.$nextTick();
+        expect(wrapper.find(".content").exists()).toBe(false);
+    });
+
+    it("should close when clicking outside", async () => {
+        const wrapper = mount(AgdbDropdown, {
+            slots: {
+                content: "<div>content</div>",
+                trigger: "<div>trigger</div>",
+            },
+        });
+        const trigger = wrapper.find(".trigger");
+        expect(wrapper.find(".content").exists()).toBe(false);
+        trigger.trigger("click");
+        await wrapper.vm.$nextTick();
+        expect(wrapper.find(".content").isVisible()).toBe(true);
+        document.body.click();
+        await wrapper.vm.$nextTick();
+        document.body.click();
+        await wrapper.vm.$nextTick();
+        expect(wrapper.find(".content").exists()).toBe(false);
+    });
+});

agdb_studio/src/components/base/dropdown/AgdbDropdown.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { vOnClickOutside } from "@vueuse/components";
+import { ref } from "vue";
+
+const opened = ref(false);
+const close = () => {
+    if (!opened.value) return;
+    opened.value = false;
+};
+const toggle = () => {
+    opened.value = !opened.value;
+};
+</script>
+
+<template>
+    <div class="agdb-dropdown" v-on-click-outside="close">
+        <button type="button" class="trigger button" @click="toggle">
+            <slot name="trigger"></slot>
+        </button>
+        <div v-if="opened" class="content" @click="close">
+            <slot name="content"></slot>
+        </div>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.content {
+    position: absolute;
+}
+</style>