[studio] display db users in expanded row #1460 (#1479)

* studio - db details in db table * studio - db users * studio - db users * studio - unit test * studio - unit tests * studio - remove comments * studio - dbdetails stub in unit test * studio - type fixed
agnesoft · Jan 11, 2025 · 3240ba1 · 3240ba1
1 parent b52160e
commit 3240ba1
Show file tree

Hide file tree

Showing 32 changed files with 760 additions and 52 deletions.
diff --git a/agdb_studio/src/assets/base.css b/agdb_studio/src/assets/base.css
@@ -20,10 +20,13 @@
     --text-light-2: rgba(60, 60, 60, 0.66);
     --text-dark-1: var(--white);
     --text-dark-2: rgba(235, 235, 235, 0.64);
+    --text-dark-3: rgba(235, 235, 235, 0.4);
 
     --base-font: "Red Hat Display", sans-serif;
 
     --orange: #ffa02c;
+    --red: #af2836;
+    --green: #1e7732;
 }
 
 :root {
@@ -37,6 +40,7 @@
 
     --color-heading: var(--text-light-1);
     --color-text: var(--text-light-1);
+    --color-text-muted: var(--text-light-2);
 
     --section-gap: 160px;
 }
@@ -52,6 +56,7 @@
 
         --color-heading: var(--text-dark-1);
         --color-text: var(--text-dark-2);
+        --color-text-muted: var(--text-dark-3);
     }
 }
 

diff --git a/agdb_studio/src/assets/button.less b/agdb_studio/src/assets/button.less
@@ -40,7 +40,7 @@
 .button-danger {
     --backgroundColor: #dc3545;
     --color: var(--white);
-    --borderColor: #af2836;
+    --borderColor: var(--red);
 }
 
 .button-transparent {

diff --git a/agdb_studio/src/components/base/content/AgdbContent.spec.ts b/agdb_studio/src/components/base/content/AgdbContent.spec.ts
@@ -25,7 +25,7 @@ describe("AgdbContent", () => {
                         ],
                     },
                     {
-                        component: "my-component",
+                        component: "my-component" as unknown as AsyncComponent,
                     },
                     {
                         input: {
@@ -89,4 +89,32 @@ describe("AgdbContent", () => {
         const input = wrapper.find("input");
         expect(input.element.matches(":focus")).toBe(true);
     });
+    it("should render select input and change value", async () => {
+        const inputValue = ref("test");
+        addInput(testKey, "test", inputValue);
+        const wrapper = mount(AgdbContent, {
+            props: {
+                content: [
+                    {
+                        input: {
+                            key: "test",
+                            type: "select",
+                            label: "Test input",
+                            options: [
+                                { value: "test", label: "Test" },
+                                { value: "test2", label: "Test2" },
+                            ],
+                        },
+                    },
+                ],
+                contentKey: testKey,
+            },
+        });
+        const select = wrapper.find("select");
+        expect(select.element.value).toBe("test");
+        expect(getInputValue(testKey, "test")).toBe("test");
+        select.element.value = "test2";
+        await select.trigger("change");
+        expect(getInputValue(testKey, "test")).toBe("test2");
+    });
 });
diff --git a/agdb_studio/src/components/base/content/AgdbContent.vue b/agdb_studio/src/components/base/content/AgdbContent.vue
@@ -7,7 +7,7 @@ const props = defineProps({
     contentKey: { type: Symbol, required: true },
 });
 
-const { getContentInputs, setInputValue } = useContentInputs();
+const { getContentInputs, setInputValue, getInputValue } = useContentInputs();
 const inputs = getContentInputs(props.contentKey) ?? new Map();
 
 const autofocusElement = ref();
@@ -35,8 +35,32 @@ onMounted(() => {
             </div>
             <div v-if="part.input" class="input-row">
                 <label>{{ part.input.label }}</label>
+                <select
+                    v-if="
+                        inputs.get(part.input.key) !== undefined &&
+                        part.input.type === 'select'
+                    "
+                    @change="
+                        (event: Event) => {
+                            setInputValue(
+                                props.contentKey,
+                                part.input?.key,
+                                (event.target as HTMLSelectElement).value,
+                            );
+                        }
+                    "
+                    :value="getInputValue(props.contentKey, part.input.key)"
+                >
+                    <option
+                        v-for="(option, index) in part.input.options"
+                        :key="index"
+                        :value="option.value"
+                    >
+                        {{ option.label }}
+                    </option>
+                </select>
                 <input
-                    v-if="inputs.get(part.input.key) !== undefined"
+                    v-else-if="inputs.get(part.input.key) !== undefined"
                     :type="part.input.type"
                     :ref="
                         (el) => {
@@ -65,7 +89,9 @@ onMounted(() => {
     }
 }
 .input-row {
-    display: flex;
-    gap: 1rem;
+    display: grid;
+    grid-template-columns: minmax(60px, 150px) minmax(150px, 1fr);
+    grid-gap: 1rem;
+    margin-bottom: 1rem;
 }
 </style>
diff --git a/agdb_studio/src/components/base/modal/AgdbModal.spec.ts b/agdb_studio/src/components/base/modal/AgdbModal.spec.ts
@@ -5,17 +5,17 @@ import { mount } from "@vue/test-utils";
 import { convertArrayOfStringsToContent } from "@/composables/content/utils";
 
 describe("AgdbModal", () => {
-    const { showModal, hideModal } = useModal();
+    const { openModal, closeModal } = useModal();
     beforeEach(() => {
-        hideModal();
+        closeModal();
     });
 
     it("shows a modal when called", async () => {
         const wrapper = mount(AgdbModal, {
             attachTo: document.body,
         });
         expect(wrapper.isVisible()).toBe(false);
-        showModal({
+        openModal({
             header: "Test Header",
             content: convertArrayOfStringsToContent(["Test Body"]),
         });
@@ -26,7 +26,7 @@ describe("AgdbModal", () => {
         const wrapper = mount(AgdbModal, {
             attachTo: document.body,
         });
-        showModal({
+        openModal({
             header: "Test Header",
             content: convertArrayOfStringsToContent(["Test Body"]),
         });
@@ -39,7 +39,7 @@ describe("AgdbModal", () => {
         const wrapper = mount(AgdbModal, {
             attachTo: document.body,
         });
-        showModal({
+        openModal({
             header: "Test Header",
             content: convertArrayOfStringsToContent(["Test Body"]),
         });
@@ -54,7 +54,7 @@ describe("AgdbModal", () => {
         const wrapper = mount(AgdbModal, {
             attachTo: document.body,
         });
-        showModal({
+        openModal({
             header: "Test Header",
             content: convertArrayOfStringsToContent(["Test Body"]),
             buttons: [
@@ -75,7 +75,7 @@ describe("AgdbModal", () => {
         const wrapper = mount(AgdbModal, {
             attachTo: document.body,
         });
-        showModal({
+        openModal({
             header: "Test Header",
             content: convertArrayOfStringsToContent(["Test Body"]),
             onConfirm: () => {},
@@ -90,7 +90,7 @@ describe("AgdbModal", () => {
         const wrapper = mount(AgdbModal, {
             attachTo: document.body,
         });
-        showModal({
+        openModal({
             header: "Test Header",
             content: [
                 {

diff --git a/agdb_studio/src/components/base/modal/AgdbModal.vue b/agdb_studio/src/components/base/modal/AgdbModal.vue
@@ -5,7 +5,7 @@ import AgdbContent from "../content/AgdbContent.vue";
 import { KEY_MODAL } from "@/composables/modal/constants";
 import { nextTick, ref, watch } from "vue";
 
-const { modal, buttons, hideModal, modalIsVisible } = useModal();
+const { modal, buttons, closeModal, modalIsVisible } = useModal();
 
 const autofocusElement = ref();
 
@@ -27,7 +27,7 @@ watch(modalIsVisible, async () => {
             <header class="modal-header">
                 <h3>{{ modal.header }}</h3>
                 <button
-                    @click="hideModal"
+                    @click="closeModal"
                     class="button button-transparent"
                     data-testid="close-modal"
                 >
@@ -45,7 +45,7 @@ watch(modalIsVisible, async () => {
                 <button
                     v-for="button in buttons"
                     :key="button.text"
-                    @click="button.action"
+                    @click.prevent="button.action"
                     :class="button.className"
                     :type="button.type ?? 'button'"
                     :form="button.type === 'submit' ? 'modal-form' : undefined"

diff --git a/agdb_studio/src/components/base/table/AgdbCellMenu.spec.ts b/agdb_studio/src/components/base/table/AgdbCellMenu.spec.ts
@@ -11,7 +11,7 @@ const { fetchDatabases } = vi.hoisted(() => {
         fetchDatabases: vi.fn(),
     };
 });
-const { modalIsVisible, onConfirm, modal, hideModal } = useModal();
+const { modalIsVisible, onConfirm, modal, closeModal } = useModal();
 
 vi.mock("@/composables/db/dbStore", () => {
     return {
@@ -25,7 +25,7 @@ vi.mock("@/composables/db/dbStore", () => {
 describe("AgdbCellMenu", () => {
     beforeEach(() => {
         vi.clearAllMocks();
-        hideModal();
+        closeModal();
     });
     it("should open and close on click", async () => {
         const wrapper = mount(AgdbCellMenu, {

diff --git a/agdb_studio/src/components/base/table/AgdbCellMenu.vue b/agdb_studio/src/components/base/table/AgdbCellMenu.vue
@@ -14,7 +14,7 @@ const props = defineProps({
 
 const row = inject<Ref<TRow>>(INJECT_KEY_ROW);
 const { fetchDatabases } = useDbStore();
-const { showModal } = useModal();
+const { openModal } = useModal();
 
 const mapActions = (actions: Action[]): Action[] => {
     return actions.map((action) => {
@@ -33,7 +33,7 @@ const mapActions = (actions: Action[]): Action[] => {
                   }
                 : action.confirmation
                   ? ({ event }: ActionProps<undefined>) =>
-                        showModal({
+                        openModal({
                             header: action.confirmationHeader
                                 ? typeof action.confirmationHeader ===
                                   "function"

diff --git a/agdb_studio/src/components/base/table/AgdbTableRow.spec.ts b/agdb_studio/src/components/base/table/AgdbTableRow.spec.ts
@@ -12,7 +12,7 @@ describe("TableRow", () => {
     addTable({
         name: TABLE_NAME,
         columns: tableConfig,
-        rowDetailsComponent: "component",
+        rowDetailsComponent: "DbDetails",
     });
 
     it("should render", () => {
@@ -59,6 +59,7 @@ describe("TableRow", () => {
                 },
                 stubs: {
                     transitions: false,
+                    DbDetails: true,
                 },
             },
         });

diff --git a/agdb_studio/src/components/base/table/AgdbTableRow.vue b/agdb_studio/src/components/base/table/AgdbTableRow.vue
@@ -9,6 +9,7 @@ import AgdbCell from "./AgdbCell.vue";
 import { getTable } from "@/composables/table/tableConfig";
 import { AkChevronDownSmall, AkChevronUpSmall } from "@kalimahapps/vue-icons";
 import SlideUpTransition from "@/components/transitions/SlideUpTransition.vue";
+import { getAsyncComponent } from "@/utils/asyncComponents";
 
 const props = defineProps({
     row: {
@@ -31,7 +32,13 @@ provide(INJECT_KEY_ROW, rowData);
 
 const tableKey = inject<Ref<Symbol | string>>(INJECT_KEY_TABLE_NAME);
 const rowDetailsComponent = computed(() => {
-    return tableKey ? getTable(tableKey.value)?.rowDetailsComponent : undefined;
+    const name = tableKey
+        ? getTable(tableKey.value)?.rowDetailsComponent
+        : undefined;
+    if (name) {
+        return getAsyncComponent(name);
+    }
+    return undefined;
 });
 const rowExpanded = ref(false);
 const toggleExpandRow = (): void => {
@@ -62,8 +69,7 @@ const toggleExpandRow = (): void => {
         </div>
         <SlideUpTransition>
             <div v-if="rowExpanded && rowDetailsComponent" class="expanded-row">
-                details
-                <component :is="rowDetailsComponent" />
+                <component :is="rowDetailsComponent" :row="row" />
             </div>
         </SlideUpTransition>
     </div>