Skip to content

feature/FOUR-15535: Adjust UI in filters of menues in Tasks and Cases #1601

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
pmPaulis merged 4 commits into from
May 29, 2024
Merged

feature/FOUR-15535: Adjust UI in filters of menues in Tasks and Cases #1601

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b712263
feature/FOUR-15535
luNunezProcessmaker May 28, 2024
391083e
feature/FOUR-15535
luNunezProcessmaker May 29, 2024
4a254af
feature/FOUR-15535
luNunezProcessmaker May 29, 2024
493160d
Merge branch 'feature/FOUR-15529' of github.com:ProcessMaker/screen-b…
luNunezProcessmaker May 29, 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
149 changes: 51 additions & 98 deletions src/components/renderer/form-list-table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<template v-if="dataControl.dropdownShow === 'requests'">
<b-dropdown
variant="outline-secondary"
right
offset="-70"
no-caret
>
<template #button-content>
Expand Down Expand Up @@ -44,44 +44,21 @@
<div class="mr-4">
<b-dropdown
variant="outline-secondary"
offset="-50"
size="sm"
>
<template #button-content>
<span class="text-capitalize">
<b-icon
v-if="showBadge"
icon="circle-fill"
class="mr-2"
:variant="badgeVariant"
/>
{{ $t(titleDropdown) }}
</span>
</template>
<b-dropdown-item
@click="handleDropdownSelection('requests_dropdown', 'all')"
v-for="option in requestFilterDropdown"
:key="option"
@click="handleDropdownSelection('requests_dropdown', option)"
>
<span class="item-text">
{{ $t("View All") }}
</span>
</b-dropdown-item>
<b-dropdown-item
@click="handleDropdownSelection('requests_dropdown', 'Completed')"
>
<span class="item-text">
<i
class="fas fa-circle mr-2 text-primary"
/>
{{ $t("Completed") }}
</span>
</b-dropdown-item>
<b-dropdown-item
@click="handleDropdownSelection('requests_dropdown', 'In Progress')"
>
<span class="item-text">
<i
class="fas fa-circle mr-2 text-success"
/>
{{ $t("In Progress") }}
{{ $t(option) }}
</span>
</b-dropdown-item>
</b-dropdown>
Expand All @@ -91,42 +68,21 @@
<div class="mr-4">
<b-dropdown
variant="outline-secondary"
offset="-50"
size="sm"
>
<template #button-content>
<span class="text-capitalize">
<b-icon
v-if="showBadge"
icon="circle-fill"
class="mr-2"
:variant="badgeVariant"
/>
{{ $t(titleDropdown) }}
</span>
</template>
<b-dropdown-item @click="handleDropdownSelection('tasks', 'all')">
<span class="item-text">
{{ $t("View All") }}
</span>
</b-dropdown-item>
<b-dropdown-item
@click="handleDropdownSelection('tasks', 'Overdue')"
v-for="option in taskFilterDropdown"
:key="option"
@click="handleDropdownSelection('tasks', option)"
>
<span class="item-text">
<i
class="fas fa-circle mr-2 text-danger"
/>
{{ $t("Overdue") }}
</span>
</b-dropdown-item>
<b-dropdown-item
@click="handleDropdownSelection('tasks', 'In Progress')"
>
<span class="item-text">
<i
class="fas fa-circle mr-2 text-warning"
/>
{{ $t("In Progress") }}
{{ $t(option) }}
</span>
</b-dropdown-item>
</b-dropdown>
Expand Down Expand Up @@ -198,12 +154,22 @@ export default {
searchCriteria: "",
showInput: false,
pmql: "",
badgeVariant: "",
typeSelected: "",
showBadge: false,
customStyle: {
"border-radius": "8px"
}
},
taskFilterDropdown: [
"Self-service",
"In Progress",
"Overdue",
"View All"
],
requestFilterDropdown: [
"View All",
"Completed",
"In Progress",
]
};
},
watch: {
Expand Down Expand Up @@ -239,9 +205,7 @@ export default {
this.typeSelected = listType;
if (listType === "tasks") {
this.$root.$emit("dropdownSelectionTask", valueSelected);
this.titleDropdown =
valueSelected === "all" ? this.viewAll : valueSelected;
this.colorBadge();
this.titleDropdown = valueSelected;
} else {
if (listType === "requests_filter") {
this.optionRequest = valueSelected;
Expand All @@ -253,9 +217,7 @@ export default {
}
}
if (listType === "requests_dropdown") {
this.titleDropdown =
valueSelected === "all" ? this.viewAll : valueSelected;
this.colorBadge();
this.titleDropdown = valueSelected;
this.dropdownRequest = valueSelected;
}
combinedFilter.push(this.optionRequest);
Expand Down Expand Up @@ -292,36 +254,6 @@ export default {
this.performSearch(listType);
this.showInput = !this.showInput;
},
/**
* Set the badge's color of the filter selected
*/
colorBadge() {
if (this.titleDropdown === "In Progress") {
if (this.typeSelected === "tasks") {
this.badgeVariant = "warning";
}
if (this.typeSelected === "requests_dropdown") {
this.badgeVariant = "success";
}
this.showBadge = true;
}
if (this.titleDropdown === "Overdue") {
this.badgeVariant = "danger";
this.showBadge = true;
}
if (this.titleDropdown === "Overdue") {
this.badgeVariant = "danger";
this.showBadge = true;
}
if (this.titleDropdown === "Completed") {
this.badgeVariant = "primary";
this.showBadge = true;
}
if (this.titleDropdown === "View All" || this.titleDropdown === "all") {
this.badgeVariant = "";
this.showBadge = false;
}
},
/**
* Verify backward compatibility for Start New Case
*/
Expand Down Expand Up @@ -383,8 +315,10 @@ export default {
padding: 0;
}

.btn-outline-secondary {
.btn-outline-secondary,
.btn-outline-secondary:focus {
border: none;
box-shadow: none;
}

.item-text {
Expand All @@ -398,19 +332,38 @@ export default {
}

.dropdown-menu {
padding: 10px;
width: 211px;
box-shadow: 0px 10px 20px 4px #00000021;
padding: 0px;
width: 180px;
box-shadow: 0px 4px 8px 0px #0000001A;
border-radius: 4px;
}

.dropdown-item {
padding: 10px 8px;
padding: 13px 12px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 21.79px;
letter-spacing: -0.02em;
text-align: left;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
background: none;
color: #228fed;
border: none;
box-shadow: none;
}

.head-filter {
display: flex;
align-items: baseline;
gap: 8px;
}

.badge {
display: inline-flex;
padding: 8px;
Expand Down
15 changes: 10 additions & 5 deletions src/components/renderer/form-requests.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ export default {
orderDirection: "DESC",
additionalParams: "",
showTable: true,
pmqlSearch: "",
sortOrder: [
{
field: "id",
Expand Down Expand Up @@ -116,6 +117,10 @@ export default {
pmql = this.pmql;
}

if (this.pmqlSearch) {
pmql = pmql + "AND" + this.pmqlSearch;
}

let { filter } = this;

if (filter && filter.length) {
Expand Down Expand Up @@ -224,23 +229,23 @@ export default {
: "text-dark";
},
fetchData(selectedOptions) {
if (selectedOptions[0] === "by_me" && selectedOptions[1] !== "all") {
if (selectedOptions[0] === "by_me" && selectedOptions[1] !== "View All") {
this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "${selectedOptions[1]}")`;
}
if (
selectedOptions[0] === "as_participant" &&
selectedOptions[1] !== "all"
selectedOptions[1] !== "View All"
) {
this.pmql = `(status = "${selectedOptions[1]}") AND (participant = "${Processmaker.user.username}")`;
}
if (selectedOptions[1] === "all") {
if (selectedOptions[1] === "View All") {
this.pmql = `(user_id = ${ProcessMaker.user.id}) AND ((status = "In Progress") OR (status = "Completed"))`;
}
this.fetch();
},
fetchSearch(searchData) {
this.pmql = "";
this.pmql = searchData;
this.pmqlSearch = "";
this.pmqlSearch = searchData;
this.fetch();
},
setupColumns() {
Expand Down
21 changes: 15 additions & 6 deletions src/components/renderer/form-tasks.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ export default {
status: "",
showTable: true,
tableHeaders: [],
pmqlSearch: "",
sortOrder: [
{
field: "ID",
Expand All @@ -153,7 +154,7 @@ export default {
},
mounted() {
this.setupColumns();
this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "In Progress")`;
this.pmql = `(user_id = ${ProcessMaker.user.id})`;
this.fetch();
this.$root.$on("dropdownSelectionTask", this.fetchData);
this.$root.$on("searchTask", this.fetchSearch);
Expand All @@ -175,6 +176,10 @@ export default {
pmql = this.pmql;
}

if (this.pmqlSearch) {
pmql = pmql + "AND" + this.pmqlSearch;
}

if (this.filterDropdowns !== undefined) {
filterDropdowns = this.filterDropdowns;
}
Expand Down Expand Up @@ -406,18 +411,22 @@ export default {
: "text-dark";
},
fetchData(selectedOption) {
if (selectedOption === "In Progress" || selectedOption === "all") {
this.filterDropdowns = "";
this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "In Progress")`;
this.filterDropdowns = "";
this.pmql = `(user_id = ${ProcessMaker.user.id})`
if (selectedOption === "Self-service") {
this.pmql = this.pmql + `AND (status = "Self Service")`;
}
if (selectedOption === "In Progress") {
this.pmql = this.pmql + `AND (status = "In Progress")`;
}
if (selectedOption === "Overdue") {
this.filterDropdowns = "overdue=true";
}
this.fetch();
},
fetchSearch(searchData) {
this.pmql = "";
this.pmql = searchData;
this.pmqlSearch = "";
this.pmqlSearch = searchData;
this.fetch();
},
formatRemainingTime(date) {
Expand Down