-
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* studio - create common table component * studio - common table component * studio - fix filter * studio - common table component * studio - unit tests * studio - unit tests * studio - unit tests
- Loading branch information
1 parent
c645d5a
commit c179f7f
Showing
30 changed files
with
802 additions
and
117 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import { mount } from "@vue/test-utils"; | ||
import AgdbTable from "./AgdbTable.vue"; | ||
import { addTable, clearTables } from "@/composables/table/tableConfig"; | ||
import { setTableData } from "@/composables/table/tableData"; | ||
import { TABLE_NAME, tableConfig, tableData } from "@/tests/tableMocks"; | ||
|
||
describe("AgdbTable", () => { | ||
beforeEach(() => { | ||
clearTables(); | ||
}); | ||
it("should render for correct data", () => { | ||
addTable({ name: TABLE_NAME, columns: tableConfig, uniqueKey: "name" }); | ||
setTableData(TABLE_NAME, tableData); | ||
|
||
const wrapper = mount(AgdbTable, { | ||
props: { | ||
name: TABLE_NAME, | ||
}, | ||
}); | ||
expect(wrapper.findAll(".agdb-table-row").length).toBe( | ||
tableData.length, | ||
); | ||
}); | ||
it("should not render rows when table doesn't exist", () => { | ||
const wrapper = mount(AgdbTable, { | ||
props: { | ||
name: TABLE_NAME, | ||
}, | ||
}); | ||
expect(wrapper.findAll(".agdb-table-row").length).toBe(0); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
<script lang="ts" setup> | ||
import { computed, defineProps } from "vue"; | ||
import { getRows } from "@/composables/table/tableData"; | ||
import TableRow from "@/components/base/table/TableRow.vue"; | ||
import TableHeader from "./TableHeader.vue"; | ||
import { getTableColumns } from "@/composables/table/tableConfig"; | ||
import { type TRow } from "@/composables/table/types"; | ||
const props = defineProps({ | ||
name: { | ||
type: String, | ||
required: true, | ||
}, | ||
}); | ||
const rows = computed(() => { | ||
return getRows(props.name); | ||
}); | ||
const columns = computed(() => { | ||
return getTableColumns<TRow>(props.name); | ||
}); | ||
</script> | ||
|
||
<template> | ||
<div class="agdb-table"> | ||
<TableHeader :tableKey="name" /> | ||
<template v-for="row in rows" :key="row[0]"> | ||
<TableRow :row="row[1]" :columns="columns" /> | ||
</template> | ||
</div> | ||
</template> | ||
|
||
<style lang="less" scoped> | ||
.agdb-table { | ||
display: grid; | ||
padding: 1rem; | ||
border: 1px solid var(--color-border); | ||
border-radius: 0.5rem; | ||
margin: 0 auto; | ||
max-width: 100%; | ||
overflow: auto; | ||
} | ||
.agdb-table ::v-deep(.columns) { | ||
display: grid; | ||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); | ||
gap: 1rem; | ||
padding: 0.5rem; | ||
border-bottom: 1px solid var(--color-border); | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { shallowMount } from "@vue/test-utils"; | ||
import TableHeader from "./TableHeader.vue"; | ||
|
||
describe("TableHeader", () => { | ||
it("should render", () => { | ||
const wrapper = shallowMount(TableHeader, { | ||
props: { | ||
tableKey: "table", | ||
}, | ||
}); | ||
expect(wrapper.exists()).toBe(true); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
<script lang="ts" setup> | ||
import { getTableColumnsArray } from "@/composables/table/tableConfig"; | ||
import { defineProps, computed } from "vue"; | ||
const props = defineProps({ | ||
tableKey: { | ||
type: String, | ||
required: true, | ||
}, | ||
}); | ||
const columns = computed(() => { | ||
return getTableColumnsArray(props.tableKey); | ||
}); | ||
</script> | ||
|
||
<template> | ||
<div class="agdb-table-header columns"> | ||
<div v-for="column in columns" :key="column.key"> | ||
{{ column.title }} | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<style lang="less" scoped> | ||
.agdb-table-header { | ||
&.columns { | ||
border: 1px solid var(--color-border); | ||
} | ||
div { | ||
font-weight: bold; | ||
font-size: 1.05rem; | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { shallowMount } from "@vue/test-utils"; | ||
import TableRow from "./TableRow.vue"; | ||
import { columnsMap } from "@/tests/tableMocks"; | ||
|
||
describe("TableRow", () => { | ||
it("should render", () => { | ||
const wrapper = shallowMount(TableRow, { | ||
props: { | ||
columns: columnsMap, | ||
row: { | ||
role: "admin", | ||
name: "admin/app3", | ||
db_type: "file", | ||
size: 50, | ||
backup: 0, | ||
}, | ||
}, | ||
}); | ||
expect(wrapper.text()).toContain("admin"); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
<script lang="ts" setup> | ||
import { defineProps, computed, type PropType } from "vue"; | ||
import { type Column, type TRow } from "@/composables/table/types"; | ||
const props = defineProps({ | ||
row: { | ||
type: Object as PropType<TRow>, | ||
required: true, | ||
}, | ||
columns: { | ||
type: Object as PropType<Map<string, Column<TRow>>>, | ||
required: true, | ||
}, | ||
}); | ||
const cellKeys = computed(() => { | ||
return Object.keys(props.row); | ||
}); | ||
const getFromattedValue = (key: string) => { | ||
const column = props.columns.get(key); | ||
const value = props.row[key]; | ||
if (column?.valueFormatter) { | ||
return column.valueFormatter(value); | ||
} | ||
return value; | ||
}; | ||
</script> | ||
|
||
<template> | ||
<div class="agdb-table-row columns"> | ||
<div v-for="cellKey in cellKeys" :key="cellKey"> | ||
<p>{{ getFromattedValue(cellKey) }}</p> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<style lang="less" scoped></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { shallowMount } from "@vue/test-utils"; | ||
import DbTable from "./DbTable.vue"; | ||
|
||
describe("DbTable", () => { | ||
it("should render", () => { | ||
const wrapper = shallowMount(DbTable, { | ||
props: { | ||
tableKey: "table", | ||
}, | ||
}); | ||
expect(wrapper.exists()).toBe(true); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
<script lang="ts" setup> | ||
import AgdbTable from "../base/table/AgdbTable.vue"; | ||
import { useDbList } from "@/composables/stores/DbStore"; | ||
import { addTable } from "@/composables/table/tableConfig"; | ||
import { setTableData } from "@/composables/table/tableData"; | ||
import { watchEffect } from "vue"; | ||
import { dateFormatter } from "@/composables/table/utils"; | ||
const { databases } = useDbList(); | ||
const TABLE_KEY = "databases"; | ||
addTable({ | ||
name: TABLE_KEY, | ||
columns: [ | ||
{ key: "role", title: "Role" }, | ||
{ key: "name", title: "Owner/Name" }, | ||
{ key: "db_type", title: "Type" }, | ||
{ key: "size", title: "Size" }, | ||
{ | ||
key: "backup", | ||
title: "Backup", | ||
valueFormatter: dateFormatter, | ||
}, | ||
], | ||
uniqueKey: "name", | ||
}); | ||
watchEffect(() => { | ||
setTableData(TABLE_KEY, databases.value); | ||
}); | ||
</script> | ||
|
||
<template> | ||
<div class="table-wrap"> | ||
<div v-if="databases.length" class="db-table"> | ||
<AgdbTable :name="TABLE_KEY" /> | ||
</div> | ||
|
||
<p v-else>No databases found</p> | ||
</div> | ||
</template> | ||
|
||
<style lang="less" scoped> | ||
.table-wrap { | ||
overflow: auto; | ||
} | ||
.db-table { | ||
width: 1000px; | ||
margin: 0 auto; | ||
} | ||
</style> |
Oops, something went wrong.