diff --git a/client/src/components/Grid/GridList.test.js b/client/src/components/Grid/GridList.test.js index a6cf4b56394c..6ed744727143 100644 --- a/client/src/components/Grid/GridList.test.js +++ b/client/src/components/Grid/GridList.test.js @@ -110,7 +110,7 @@ function createTarget(propsData) { describe("GridList", () => { it("basic rendering", async () => { const wrapper = createTarget({ - config: testGrid, + gridConfig: testGrid, }); const findInput = wrapper.find("[data-description='filter text input']"); expect(findInput.attributes().placeholder).toBe("search tests"); @@ -142,7 +142,7 @@ describe("GridList", () => { it("header rendering", async () => { const wrapper = createTarget({ - config: testGrid, + gridConfig: testGrid, }); await wrapper.vm.$nextTick(); for (const [fieldIndex, field] of Object.entries(testGrid.fields)) { @@ -152,7 +152,7 @@ describe("GridList", () => { it("operation handling", async () => { const wrapper = createTarget({ - config: testGrid, + gridConfig: testGrid, }); await wrapper.vm.$nextTick(); const dropdown = wrapper.find("[data-description='grid cell 0-2']"); @@ -174,7 +174,7 @@ describe("GridList", () => { it("filter handling", async () => { const wrapper = createTarget({ - config: testGrid, + gridConfig: testGrid, }); await wrapper.vm.$nextTick(); const filterInput = wrapper.find("[data-description='filter text input']"); @@ -187,7 +187,7 @@ describe("GridList", () => { it("pagination", async () => { const wrapper = createTarget({ - config: testGrid, + gridConfig: testGrid, limit: 2, }); await wrapper.vm.$nextTick(); diff --git a/client/src/components/Grid/GridList.vue b/client/src/components/Grid/GridList.vue index f955808b38bc..357b728ca65b 100644 --- a/client/src/components/Grid/GridList.vue +++ b/client/src/components/Grid/GridList.vue @@ -7,7 +7,7 @@ import { BAlert, BButton, BLink, BPagination } from "bootstrap-vue"; import { computed, onMounted, onUnmounted, ref, watch } from "vue"; import { useRouter } from "vue-router/composables"; -import { Config, FieldHandler, Operation, RowData } from "./configs/types"; +import { FieldHandler, GridConfig, Operation, RowData } from "./configs/types"; import GridBoolean from "./GridElements/GridBoolean.vue"; import GridLink from "./GridElements/GridLink.vue"; @@ -26,7 +26,7 @@ library.add(faCaretDown, faCaretUp, faShieldAlt); interface Props { // provide a grid configuration - config: Config; + gridConfig: GridConfig; // debounce delay delay?: number; // rows per page to be shown @@ -57,8 +57,8 @@ const loading = ref(true); const isAvailable = computed(() => !loading.value && totalRows.value > 0); // sort references -const sortBy = ref(props.config ? props.config.sortBy : ""); -const sortDesc = ref(props.config ? props.config.sortDesc : false); +const sortBy = ref(props.gridConfig ? props.gridConfig.sortBy : ""); +const sortDesc = ref(props.gridConfig ? props.gridConfig.sortDesc : false); // filtering refs and handlers const filterText = ref(""); @@ -74,7 +74,7 @@ const hideMessage = useDebounceFn(() => { * Manually set filter value, used for tags and `SharingIndicators` */ function applyFilter(filter: string, value: string | boolean, quoted = false) { - const filtering = props.config?.filtering; + const filtering = props.gridConfig?.filtering; const quotedValue = quoted ? `'${value}'` : value; if (filtering) { filterText.value = filtering.setFilterValue(filterText.value, filter, quotedValue.toString()) || ""; @@ -85,10 +85,10 @@ function applyFilter(filter: string, value: string | boolean, quoted = false) { * Request grid data */ async function getGridData() { - if (props.config) { + if (props.gridConfig) { try { const offset = props.limit * (currentPage.value - 1); - const [responseData, responseTotal] = await props.config.getData( + const [responseData, responseTotal] = await props.gridConfig.getData( offset, props.limit, searchTerm.value, @@ -184,19 +184,19 @@ watch(operationMessage, () => {