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

FOUR-13017 | The Toggles for ‘Available Processes’ and ‘Add From Templates’ Should Change When B-Collapse Opens and Closes #5891

Merged
merged 5 commits into from
Jan 5, 2024
Merged

FOUR-13017 | The Toggles for ‘Available Processes’ and ‘Add From Templates’ Should Change When B-Collapse Opens and Closes #5891

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3bc33dc
Add functionality to b-collapse toggles
mcraeteisha Jan 2, 2024
b234787
Update styling when Guided Templates selected
mcraeteisha Jan 5, 2024
2d56af7
Add toggle icon functionality to entire b-collapse, not just icon
mcraeteisha Jan 5, 2024
84593fc
Merge branch 'next' into observation/FOUR-13017
mcraeteisha Jan 5, 2024
53531cb
Updates to menuCatalogue.vue after merging next into branch
mcraeteisha Jan 5, 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
83 changes: 60 additions & 23 deletions resources/js/processes-catalogue/components/menuCatologue.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,17 @@
block
variant="light"
class="m-1"
@click="onToggleCatalogue"
>
<div class="d-flex justify-content-between pl-3 pr-3">
<i :class="preicon" />
{{ $t(title) }}
<i class="fas fa-sort-down" />
<div class="d-flex align-items-center justify-content-between pl-3 pr-3">
<div class="d-flex align-items-center">
<i :class="preicon" />
{{ $t(title) }}
</div>
<i
class="fas fa-sort-down"
:class="{'fa-sort-up': showCatalogue, 'fa-sort-down': !showCatalogue}"
/>
</div>
</div>
<b-collapse
Expand All @@ -20,9 +26,10 @@
<b-list-group-item
v-for="item in data"
:key="item.id"
:ref="item.name"
ref="processItems"
:class="{ 'list-item-selected': isSelectedProcess(item) }"
class="list-item"
@click="selectItem(item)"
@click="selectProcessItem(item)"
>
{{ item.name }}
</b-list-group-item>
Expand All @@ -33,11 +40,17 @@
block
variant="light"
class="m-1"
@click="onToggleTemplates"
>
<div class="d-flex justify-content-between pl-3 pr-3">
<img src="../../../img/template-icon.svg" alt="Template Icon">
{{ $t("Add From Templates") }}
<i class="fas fa-sort-down" />
<div class="d-flex align-items-center justify-content-between pl-3 pr-3">
<div class="d-flex align-items-center">
<img src="../../../img/template-icon.svg" alt="Template Icon">
{{ $t("Add From Templates") }}
</div>
<i
class="fas fa-sort-down"
:class="{'fa-sort-up': showGuidedTemplates, 'fa-sort-down': !showGuidedTemplates}"
/>
</div>
</div>
<b-collapse
Expand All @@ -46,10 +59,14 @@
>
<b-list-group>
<b-list-group-item
v-for="(item, index) in templateOptions"
:key="index"
ref="templateItems"
:class="{ 'list-item-selected': isSelectedTemplate(item) }"
class="list-item"
@click="wizardLinkSelected"
@click="selectTemplateItem(item)"
>
{{ $t("Guided Templates") }}
{{ item.label }}
</b-list-group-item>
</b-list-group>
</b-collapse>
Expand All @@ -61,6 +78,16 @@ export default {
props: ["data", "select", "title", "preicon"],
data() {
return {
showCatalogue: false,
showGuidedTemplates: false,
selectedProcessItem: null,
selectedTemplateItem: null,
templateOptions: [
{
label: this.$t("Guided Templates"),
selected: false,
},
],
showDefaultCategory: false,
};
},
Expand All @@ -74,9 +101,9 @@ export default {
});
},
updated() {
if(this.showDefaultCategory) {
if (this.showDefaultCategory) {
const indexUncategorized = this.data.findIndex((category) => category.name === "Uncategorized");
this.selectItem(this.data[indexUncategorized]);
this.selectProcessItem(this.data[indexUncategorized]);
this.showDefaultCategory = false;
}
},
Expand All @@ -87,19 +114,29 @@ export default {
loadMore() {
this.$emit("addCategories");
},
selectItem(item) {
this.setSelectItem(item.name || item);
selectProcessItem(item) {
this.selectedProcessItem = item;
this.selectedTemplateItem = null;
this.select(item);
},
setSelectItem(item) {
for (const item in this.$refs) {
this.$refs[item][0].className = "list-item";
}
this.$refs[item][0].className = "list-item list-item-selected";
},
wizardLinkSelected() {
selectTemplateItem(item) {
this.selectedTemplateItem = item;
this.selectedProcessItem = null;
this.select(item);
this.$emit("wizardLinkSelect");
},
isSelectedProcess(item) {
return this.selectedProcessItem === item;
},
isSelectedTemplate(index) {
return this.selectedTemplateItem === index;
},
onToggleCatalogue() {
this.showCatalogue = !this.showCatalogue;
},
onToggleTemplates() {
this.showGuidedTemplates = !this.showGuidedTemplates;
},
},
};
</script>
Expand Down
Loading