Skip to content

Feature/FOUR-14386: Update Cards (UI updated). #6973

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

Merged
ryancooley merged 23 commits into from
Jun 25, 2024
Merged

Feature/FOUR-14386: Update Cards (UI updated). #6973

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
c3d325f
Added badges for Alternatives column in the request lists
gustavobascope Jun 13, 2024
cfa2a2c
Added an overdue tag in the tasks list
gustavobascope Jun 14, 2024
643dec3
remove unused library
gustavobascope Jun 14, 2024
44c959f
SonarQube fixes
gustavobascope Jun 14, 2024
c706df7
SonarQube fixes
gustavobascope Jun 14, 2024
36094c1
Merge branch 'next2-improvements' of github.com:ProcessMaker/processm…
gustavobascope Jun 17, 2024
0adeb1e
Merge branch 'next2-improvements' of github.com:ProcessMaker/processm…
gustavobascope Jun 17, 2024
24b2d19
Saving progress working ok
CarliPinell Jun 18, 2024
406fd63
saving progress part 2
CarliPinell Jun 18, 2024
f2f4200
Saving progress 3
CarliPinell Jun 18, 2024
eefdb62
Merge pull request #6954 from ProcessMaker/observation/FOUR-16525
ryancooley Jun 18, 2024
b0ab1e3
Merge pull request #6953 from ProcessMaker/observation/FOUR-16526
ryancooley Jun 18, 2024
3728853
Ready for PR
CarliPinell Jun 19, 2024
a4eeb0f
Merge branch 'next2-improvements' of github.com:ProcessMaker/processm…
CarliPinell Jun 19, 2024
988c2ce
removing comments
CarliPinell Jun 19, 2024
ef8bb39
solving sonar qube observations
CarliPinell Jun 19, 2024
10973f1
Modifications event scrollend
CarliPinell Jun 20, 2024
7319b34
adding translations
CarliPinell Jun 20, 2024
b7d3286
Merge branch 'next' of github.com:ProcessMaker/processmaker into feat…
CarliPinell Jun 20, 2024
8d5181b
making improvements on cards and bookmarks
CarliPinell Jun 22, 2024
9eda92d
saving more progress
CarliPinell Jun 24, 2024
39acf7d
removing unused code
CarliPinell Jun 24, 2024
4d5393c
changing nextick Gloval to this context
CarliPinell Jun 24, 2024
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
Prev Previous commit
Next Next commit
Modifications event scrollend
  • Loading branch information
@CarliPinell
CarliPinell committed Jun 20, 2024
commit 10973f174685800fc8cc341be1340395b648f8f2
39 changes: 21 additions & 18 deletions resources/js/processes-catalogue/components/CardProcess.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
/>
<div
id="infinite-list-card"
v-show="!loading && processList.length > 0"
class="processList"
v-show="processList.length > 0"
class="processList d-flex"
ref="processListContainer"
>
<template v-for="(process, index) in processList">
Expand All @@ -23,25 +23,26 @@
:hideBookmark="categoryId === 'all_templates'"
/>

<div v-if="(index % perPage === perPage - 1) && processList.length >= perPage">
<div v-if="((index + 1) === processList.length)">
<Card
<div v-if="(index % perPage === perPage - 1) && processList.length >= perPage" style="width: 75%;">

<Card v-if="((index + 1) === processList.length)"
style="width: 100%;"
:show-cards="false"
:current-page="counterPage + Math.floor(index / perPage)"
:total-pages="totalPages"
:card-message="'show-more'"
:loading="shouldShowLoader"
:loading="loading"
/>
</div>
<div v-else>

<Card
v-else
style="width: 100%;"
:show-cards="false"
:current-page="counterPage + Math.floor(index / perPage)"
:total-pages="totalPages"
:card-message="cardMessage"
:loading="shouldShowLoader"
:loading="loading"
/>
</div>
</div>
</template>
</div>
Expand Down Expand Up @@ -104,7 +105,7 @@ export default {
},
watch: {
async categoryId() {
const listCard = document.querySelector("#infinite-list-card");
const listCard = document.querySelector(".processes-info");
listCard.scrollTop = 0;
this.pmql = "";
this.filter = "";
Expand All @@ -119,15 +120,15 @@ export default {
this.switchMenu = this.categoryId;
this.loadCard(()=>{
Vue.nextTick(()=>{
const listCard = document.querySelector("#infinite-list-card");
const listCard = document.querySelector(".processes-info");

listCard.addEventListener("scroll", () => this.handleScroll());
listCard.addEventListener("scrollend", () => this.handleScroll());
});
});
},
destroyed() {
const listCard = document.querySelector("#infinite-list-card");
listCard.removeEventListener("scroll", this.handleScroll);
const listCard = document.querySelector(".processes-info");
listCard.removeEventListener("scrollend", this.handleScroll);
},
methods: {
loadCard(callback) {
Expand Down Expand Up @@ -221,7 +222,7 @@ export default {
this.loadCard();
},
handleScroll() {
const container = this.$refs.processListContainer;
const container = document.querySelector(".processes-info");
if ((container.scrollTop + container.clientHeight >= container.scrollHeight)) {
this.cardMessage = "show-page";
this.onPageChanged(this.currentPage + 1);
Expand All @@ -238,8 +239,10 @@ export default {
display: flex;
flex-wrap: wrap;
position: relative;
height: 97%;
overflow:auto;
height: 100%;
overflow: unset;
justify-content: flex-start;
align-items: center;
@media (max-width: $lp-breakpoint) {
display: block;
}
Expand Down
7 changes: 3 additions & 4 deletions resources/js/processes-catalogue/components/utils/Card.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@
<b-card v-else
class="text-center d-flex align-items-center justify-content-center card-process2">
<span v-if="cardMessage === 'show-page'">Page {{ currentPage }} of {{ totalPages }}</span>
<span v-else><i class="fas fa-spinner fa-spin"></i> {{ $t('Loading') }}...</span>
<span v-if="cardMessage === 'show-more' && !loading"> {{ $t('Show More') }}</span>
Comment thread
CarliPinell marked this conversation as resolved.
Resolved
<span v-if="loading"><i class="fas fa-spinner fa-spin"></i> {{ $t('Loading') }}...</span>
Comment thread
CarliPinell marked this conversation as resolved.
Resolved
</b-card>
</template>

Expand Down Expand Up @@ -85,7 +86,7 @@ export default {
return this.process.counts.total.toLocaleString();
}
return null;
}
},
},
methods: {
/**
Expand Down Expand Up @@ -130,8 +131,6 @@ export default {
}
}
.card-process2 {
max-width: 100%;
width: 57vw;
height: 40px;
margin-top: 1rem;
margin-right: 1rem;
Expand Down