Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/show item paginated list #294

Merged
merged 3 commits into from
Jun 1, 2023
Merged

Feature/show item paginated list #294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ad0f71d
add showElement method in BIMDataPagination component
LrxGaelle Jun 1, 2023
885d51b
adjust documentation
LrxGaelle Jun 1, 2023
5d401b2
delete duplicate code
LrxGaelle Jun 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
v-for="element of page"
:key="elementKey ? element[elementKey] : element"
@click="$emit('element-click', element)"
ref="elements"
:class="{ 'element-active': isElementActive(element) }"
>
<slot name="element" :element="element">
{{ element && element.toString() }}
Expand Down Expand Up @@ -56,6 +58,7 @@ export default {
},
elementKey: {
type: String,
default: "",
},
loading: {
type: Boolean,
Expand All @@ -77,6 +80,9 @@ export default {
type: String,
default: "var(--color-white)",
},
activeElement: {
type: [String, Number, Object],
},
},
emits: ["element-click"],
data() {
Expand Down Expand Up @@ -104,11 +110,48 @@ export default {
deep: true,
immediate: true,
},
activeElement: {
handler(value) {
if (value) {
this.showElement(value);
}
},
immediate: true,
},
},
methods: {
onPageChange(pageNumber) {
this.currentPage = pageNumber;
},
compareElements(elementA, elementB) {
if (this.elementKey) {
return elementA[this.elementKey] === elementB[this.elementKey];
} else {
return elementA === elementB;
}
},
isElementActive(element) {
if (!this.activeElement) return false;
return this.compareElements(element, this.activeElement);
},
async showElement(elem) {
const elementIndex = this.list.findIndex(listElement =>
this.compareElements(elem, listElement)
);
if (elementIndex === -1) return;
const startIndex = this.perPage * (this.currentPage - 1);
const endIndex = startIndex + this.perPage;
const isElementInCurrentPage =
elementIndex >= startIndex && elementIndex < endIndex;
if (!isElementInCurrentPage) {
const elementPage = Math.ceil((elementIndex + 1) / this.perPage);
this.currentPage = elementPage;
}
await this.$nextTick();
const elementIndexOnPage = elementIndex % this.perPage;
const domElement = this.$refs.elements[elementIndexOnPage];
domElement.scrollIntoView({ block: "center" });
},
},
};
</script>
Expand Down
8 changes: 8 additions & 0 deletions src/BIMDataComponents/BIMDataPaginatedList/_BIMDataPaginatedList.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,14 @@
height: auto;
}

&__elements {
li {
&.element-active {
font-weight: bold;
}
}
}

.bimdata-spinner {
padding: 12px 0;
justify-content: center;
Expand Down
74 changes: 54 additions & 20 deletions src/web/views/Components/Pagination/Pagination.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,18 @@
<ComponentCode :componentTitle="$route.name" language="javascript">
<template #module>
<BIMDataPaginatedList
:list="paginatedListExample"
:list="isBasicPagination ? basicPagination : complexPagination"
:perPage="Number(numberInput)"
:numberDataElements="isNumberDataElements"
elementKey="id"
:activeElement="{ id: +searchInList }"
>
<template v-if="isBasicPagination" #element="{ element }">
{{ element }}
</template>
<template v-else #element="{ element }">
{{ element.text }}
</template>
</BIMDataPaginatedList>
</template>

Expand All @@ -20,9 +28,20 @@
placeholder="Number of items per page"
type="number"
></BIMDataInput>

<BIMDataToggle v-model="isBasicPagination" class="m-b-30">
<span>complex pagination</span>
<template #right><span>basic pagination</span></template>
</BIMDataToggle>
<BIMDataInput
v-if="!isBasicPagination"
margin="30px 0px 18px"
v-model="searchInList"
placeholder="Search an item in list by id"
type="number"
></BIMDataInput>
<BIMDataCheckbox
text="numberDataElements"
margin="24px 0 0"
text="Display data elements"
v-model="isNumberDataElements"
/>
</template>
Expand All @@ -34,9 +53,11 @@

<template #code>
<pre>
&lt;BIMDataPaginatedList :list="paginatedListExample" :perPage="{{
&lt;BIMDataPaginatedList :list="paginationList" :perPage="{{
numberInput
}}"&gt;&lt;/BIMDataPaginatedList&gt;
}}"&gt;
{{ getPagination() }}
&lt;/BIMDataPaginatedList&gt;
</pre>
</template>
</ComponentCode>
Expand Down Expand Up @@ -66,12 +87,15 @@
</template>

<script>
import { basicPagination, complexPagination } from "./option-sets.js";

import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
import BIMDataPaginatedList from "../../../../../src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue";
import BIMDataInput from "../../../../../src/BIMDataComponents/BIMDataInput/BIMDataInput.vue";
import BIMDataTable from "../../../../../src/BIMDataComponents/BIMDataTable/BIMDataTable.vue";
import BIMDataText from "../../../../../src/BIMDataComponents/BIMDataText/BIMDataText.vue";
import BIMDataCheckbox from "../../../../../src/BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.vue";
import BIMDataToggle from "../../../../../src/BIMDataComponents/BIMDataToggle/BIMDataToggle.vue";

export default {
components: {
Expand All @@ -81,25 +105,16 @@ export default {
BIMDataInput,
BIMDataTable,
BIMDataText,
BIMDataToggle,
},
data() {
return {
numberInput: 4,
basicPagination,
complexPagination,
numberInput: 8,
searchInList: 2,
isNumberDataElements: true,
paginatedListExample: [
"item 01",
"item 02",
"item 03",
"item 04",
"item 05",
"item 06",
"item 07",
"item 08",
"item 09",
"item 10",
"item 11",
"item 12",
],
isBasicPagination: true,
propsData: [
["Props", "Type", "Default value", "Description"],
[
Expand Down Expand Up @@ -149,5 +164,24 @@ export default {
],
};
},
methods: {
getPagination() {
if (this.isBasicPagination) {
return `<template #element="{ element }">
{{ element }}
</template>`;
} else {
return `<template #element="{ element }">
{{ element.text }}
</template>`;
}
},
},
};
</script>

<style scoped lang="scss">
.toggle__button {
font-size: 12px;
}
</style>
72 changes: 72 additions & 0 deletions src/web/views/Components/Pagination/option-sets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
const basicPagination = [
"item 01",
"item 02",
"item 03",
"item 04",
"item 05",
"item 06",
"item 07",
"item 08",
"item 09",
"item 10",
"item 11",
"item 12",
];

const complexPagination = [
{ id: 1, text: "item 01" },
{ id: 2, text: "item 02" },
{ id: 3, text: "item 03" },
{ id: 4, text: "item 04" },
{ id: 5, text: "item 05" },
{ id: 6, text: "item 06" },
{ id: 7, text: "item 07" },
{ id: 8, text: "item 08" },
{ id: 9, text: "item 09" },
{ id: 10, text: "item 10" },
{ id: 11, text: "item 11" },
{ id: 12, text: "item 12" },
{ id: 13, text: "item 13" },
{ id: 14, text: "item 14" },
{ id: 15, text: "item 15" },
{ id: 16, text: "item 16" },
{ id: 17, text: "item 17" },
{ id: 18, text: "item 18" },
{ id: 19, text: "item 19" },
{ id: 20, text: "item 20" },
{ id: 21, text: "item 21" },
{ id: 22, text: "item 22" },
{ id: 23, text: "item 23" },
{ id: 24, text: "item 24" },
{ id: 25, text: "item 25" },
{ id: 26, text: "item 26" },
{ id: 27, text: "item 27" },
{ id: 28, text: "item 28" },
{ id: 29, text: "item 29" },
{ id: 30, text: "item 30" },
{ id: 31, text: "item 31" },
{ id: 32, text: "item 32" },
{ id: 33, text: "item 33" },
{ id: 34, text: "item 34" },
{ id: 35, text: "item 35" },
{ id: 36, text: "item 36" },
{ id: 37, text: "item 37" },
{ id: 38, text: "item 38" },
{ id: 39, text: "item 39" },
{ id: 40, text: "item 40" },
{ id: 41, text: "item 41" },
{ id: 42, text: "item 42" },
{ id: 43, text: "item 43" },
{ id: 44, text: "item 44" },
{ id: 45, text: "item 45" },
{ id: 46, text: "item 46" },
{ id: 47, text: "item 47" },
{ id: 48, text: "item 48" },
{ id: 49, text: "item 49" },
{ id: 50, text: "item 50" },
{ id: 51, text: "item 51" },
{ id: 52, text: "item 52" },
{ id: 53, text: "item 53" },
];

export { basicPagination, complexPagination };