From 9e15ac972786451aafc9a012ba775a6ebc32b63c Mon Sep 17 00:00:00 2001 From: Nolan Ehrstrom Date: Mon, 3 Jun 2024 14:42:26 -0700 Subject: [PATCH 01/14] Start on refactoring launchpad for mobile routing --- .../components/CardProcess.vue | 13 ++-- .../components/Process.vue | 56 ++++++++++++++++++ .../components/ProcessesCatalogue.vue | 59 +++++++++++-------- .../components/menuCatologue.vue | 2 +- resources/js/processes-catalogue/index.js | 33 +++++++++++ .../processes-catalogue/mobile.blade.php | 12 ++-- 6 files changed, 134 insertions(+), 41 deletions(-) create mode 100644 resources/js/processes-catalogue/components/Process.vue diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue index 49111e1425..9e67f5d3fc 100644 --- a/resources/js/processes-catalogue/components/CardProcess.vue +++ b/resources/js/processes-catalogue/components/CardProcess.vue @@ -49,7 +49,7 @@ export default { pagination, CatalogueEmpty, SearchCards, Card, }, mixins: [dataLoadingMixin], - props: ["category"], + props: ["categoryId"], data() { return { processList: [], @@ -69,7 +69,7 @@ export default { }; }, watch: { - category() { + categoryId() { this.pmql = ""; this.loadCard(); }, @@ -100,7 +100,7 @@ export default { * Build URL for Process Cards */ buildURL() { - if (this.category === undefined || this.category.id === -1) { + if (!this.categoryId || this.categoryId === -1) { return "process_bookmarks/processes?" + `&page=${this.currentPage}` + `&per_page=${this.perPage}` @@ -110,7 +110,7 @@ export default { + "&cat_status=ACTIVE" + "&order_by=name&order_direction=asc"; } - if (this.category.id === 0) { + if (this.categoryId === 0) { return `process_bookmarks?page=${this.currentPage}` + `&per_page=${this.perPage}` + `&pmql=${encodeURIComponent(this.pmql)}` @@ -120,7 +120,7 @@ export default { } return `process_bookmarks/processes?page=${this.currentPage}` + `&per_page=${this.perPage}` - + `&category=${this.category.id}` + + `&category=${this.categoryId}` + `&pmql=${encodeURIComponent(this.pmql)}` + "&bookmark=true" + "&launchpad=true" @@ -130,8 +130,7 @@ export default { * Go to process info */ openProcessInfo(process) { - const categoryId = this.category ? this.category.id : -1; - window.history.replaceState(null, null, `/process-browser/${process.id}?categorySelected=${categoryId}`); + this.$router.push({ name: "show", params: { process: process, processId: process.id } }); this.$emit("openProcess", process); }, /** diff --git a/resources/js/processes-catalogue/components/Process.vue b/resources/js/processes-catalogue/components/Process.vue new file mode 100644 index 0000000000..7ff80693bb --- /dev/null +++ b/resources/js/processes-catalogue/components/Process.vue @@ -0,0 +1,56 @@ + + + \ No newline at end of file diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue index a0b4df079e..f9735e0b8e 100644 --- a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue +++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue @@ -38,20 +38,25 @@
+ +
{{ selectedCategoryName }}
+ + +
@endsection From 06c004de4db6fb0842861f4784a3be811b184b96 Mon Sep 17 00:00:00 2001 From: Nolan Ehrstrom Date: Mon, 3 Jun 2024 16:55:21 -0700 Subject: [PATCH 02/14] Bring back blade template props --- .../components/Process.vue | 23 ++++++++++++--- .../components/ProcessesCatalogue.vue | 29 +++++-------------- .../components/menuCatologue.vue | 2 +- .../processes-catalogue/mobile.blade.php | 12 +++++--- 4 files changed, 36 insertions(+), 30 deletions(-) diff --git a/resources/js/processes-catalogue/components/Process.vue b/resources/js/processes-catalogue/components/Process.vue index 7ff80693bb..7bfa5dee5e 100644 --- a/resources/js/processes-catalogue/components/Process.vue +++ b/resources/js/processes-catalogue/components/Process.vue @@ -2,9 +2,12 @@
{ - this.loadedProcess = response.data; + this.loadedProcess = response.data[0]; }); } } diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue index f9735e0b8e..01eec4959e 100644 --- a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue +++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue @@ -54,7 +54,7 @@
- + @@ -105,7 +73,6 @@ export default { data() { return { showMenu: false, - selectedCategoryName: '', isMobile: window.screen.width < 650, listCategories: [], defaultOptions: [ @@ -114,11 +81,11 @@ export default { name: this.$t("Recent Cases"), }, { - id: -1, + id: 'all_processes', name: this.$t("All Processes"), }, { - id: 0, + id: 'bookmarks', name: this.$t("My Bookmarks"), }, ], @@ -136,7 +103,6 @@ export default { key: 0, totalPages: 1, filter: "", - markCategory: false, fromProcessList: false, categoryCount: 0, hideLaunchpad: true, @@ -145,14 +111,6 @@ export default { mounted() { const url = new URL(window.location.href); this.getCategories(); - setTimeout(() => { - this.checkSelectedProcess(); - if (this.hasGuidedTemplateParamsOnly(url) || this.hasTemplateParams(url)) { - // Loaded from URL with guided template parameters to show guided templates - // Dynamically load the component - this.$refs.categoryList.selectTemplateItem(); - } - }, 500); this.$root.$on("clickCarouselImage", (val) => { this.hideLaunchpad = !val.hideLaunchpad; }); @@ -163,10 +121,13 @@ export default { } }, watch: { - selectedCategoryName() { - // Only hide the menu automatically if we are on mobile - if (this.isMobile) { - this.showMenu = false; + category: { + deep: true, + handler() { + // Only hide the menu automatically if we are on mobile + if (this.isMobile) { + this.showMenu = false; + } } } }, @@ -200,17 +161,15 @@ export default { + `&per_page=${this.numCategories}` + `&filter=${this.filter}`) .then((response) => { - if (!this.checkDefaultOptions()) { - this.listCategories = [...this.defaultOptions, ...this.listCategories]; - } - this.listCategories = [...this.listCategories, ...response.data.data]; + + const loadedCategories = response.data.data.filter(category => { + // filter if category exists in the default options + return !this.defaultOptions.some(defaultOption => defaultOption.name === category.name); + }); + this.listCategories = [...this.defaultOptions, ...loadedCategories]; + this.totalPages = response.data.meta.total_pages !== 0 ? response.data.meta.total_pages : 1; this.categoryCount = response.data.meta.total; - if (this.markCategory) { - const indexCategory = this.listCategories.findIndex((category) => category.name === this.category.name); - this.$refs.categoryList.markCategory(this.listCategories[indexCategory]); - this.markCategory = false; - } }); } }, @@ -235,18 +194,6 @@ export default { const categories = this.process.process_category_id; categoryId = typeof categories === "string" ? categories.split(",")[0] : categories; } - if (categoryId !== "0" && categoryId !== "-1") { - ProcessMaker.apiClient - .get(`process_bookmarks/${categoryId}`) - .then((response) => { - this.category = response.data; - this.markCategory = true; - this.filterCategories(this.category.name); - }); - } else { - this.category = this.getDefaultCategory(categoryId); - this.$refs.categoryList.markCategory(this.category, false); - } } }, /** @@ -258,48 +205,19 @@ export default { /** * Select a category and show display */ - selectCategorie(value) { - // const url = new URL(window.location.href); - - // // If url has Template Params, don't replace state. - // if (!this.hasTemplateParams(url)) { - // window.history.replaceState(null, null, "/process-browser"); - // this.key += 1; - // this.category = value; - // this.selectedProcess = null; - // this.showCardProcesses = true; - // this.guidedTemplates = false; - // this.showWizardTemplates = false; - // } - - // this.showProcess = false; - + selectCategory(value) { if (!value) { return; } - this.$router.push({ name: 'index', query: { categoryId: value.id } }); - this.showMenu = false; - }, - /** - * Select a wizard templates and show display - */ - wizardTemplatesSelected(hasUrlParams = false) { - if (!hasUrlParams) { - // Add the params if the guided template link was selected - const url = new URL(window.location.href); - if (!url.search.includes("?guided_templates=true")) { - url.searchParams.append("guided_templates", true); - // history.pushState(null, "", url); // Update the URL without triggering a page reload - } + + this.category = value; + + // Do not set the query if we are already on the route + if (String(this.$route.query.categoryId) === String(value.id)) { + return; } - // Update state variables - this.showWizardTemplates = true; - this.guidedTemplates = true; - this.showCardProcesses = false; - this.showProcess = false; - this.selectedProcess = null; - this.category = null; + this.$router.push({ name: 'index', query: { categoryId: value.id } }); }, /** * Select a process and show display @@ -307,20 +225,14 @@ export default { openProcess(process) { this.showCardProcesses = false; this.guidedTemplates = false; - // if (this.verifyScreen(process)) { - // this.showProcess = false; - // this.showProcessScreen = true; - // } else { - // this.showProcess = true; - // this.showProcessScreen = false; - // } this.selectedProcess = process; }, /** * Return a process cards from process info */ - returnedFromInfo() { - this.selectCategorie(this.category); + goBackCategory() { + const categoryId = this.category ? this.category.id : 'recent' + this.$router.push({ name: "index", query: { categoryId } }); }, hasGuidedTemplateParamsOnly(url) { return url.search.includes("?guided_templates=true") && !url.search.includes("?guided_templates=true&template="); @@ -356,7 +268,7 @@ export default { overflow: hidden; margin-top: 15px; transition: flex 0.3s; - flex: 0 0 315px; + flex: 0 0 0px; .menu-catalog { background-color: #F7F9FB; @@ -398,7 +310,7 @@ export default { } .menu-open .menu { - flex: 0 0 0px; + flex: 0 0 315px; @media (max-width: $lp-breakpoint) { left: 0%; } diff --git a/resources/js/processes-catalogue/components/menuCatologue.vue b/resources/js/processes-catalogue/components/menuCatologue.vue index 12042c38f2..7cac7e9326 100644 --- a/resources/js/processes-catalogue/components/menuCatologue.vue +++ b/resources/js/processes-catalogue/components/menuCatologue.vue @@ -114,7 +114,6 @@ export default { }, props: [ "data", - "select", "title", "preicon", "filterCategories", @@ -176,30 +175,47 @@ export default { selectedProcessItem: { deep: true, handler: function () { - this.$emit('selectedCategoryName', this.selectedProcessItem?.name); + this.$emit('categorySelected', this.selectedProcessItem); }, + }, + $route(r) { + this.handleRouteQuery(); + }, + data() { + this.handleRouteQuery(); } }, methods: { + handleRouteQuery() { + + // Do not change the selected category if we are not in the index route. + // This way, we preserve the selected category when returning from process details. + + if (this.$route.name !== "index") { + return; + } + + const query = this.$route.query; + + this.selectedProcessItem = null; + this.selectedTemplateItem = null; + + if (query.categoryId) { + this.selectedProcessItem = this.data.find((category) => { + return String(category.id) === String(query.categoryId); + }); + } + }, /** * Adding categories */ loadMore() { this.$emit("addCategories"); }, - markCategory(item, filter = true) { - this.comeFromProcess = true; - this.selectedProcessItem = item; - this.selectedTemplateItem = null; - if (filter) { - this.$refs.searchCategory.fillFilter(item.name); - } - }, selectProcessItem(item) { this.comeFromProcess = false; this.selectedProcessItem = item; this.selectedTemplateItem = null; - this.select(item); }, /** * Enables All Templates option only if user has create-processes permission @@ -219,8 +235,7 @@ export default { } this.selectedTemplateItem = item; this.selectedProcessItem = null; - this.select(item); - this.$emit("wizardLinkSelect"); + this.$emit("wizardLinkSelect", item); }, /** * This method opens New Process modal window From 1fef0c72cec052185584f3912ed10313e1bb308c Mon Sep 17 00:00:00 2001 From: Nolan Ehrstrom Date: Tue, 4 Jun 2024 13:21:25 -0700 Subject: [PATCH 04/14] Move wizard templates to process listing --- .../components/Process.vue | 8 ++--- .../components/ProcessListing.vue | 32 +++++++++++++++++++ .../components/ProcessesCatalogue.vue | 3 +- .../components/WizardTemplates.vue | 2 +- .../components/menuCatologue.vue | 2 +- resources/js/processes-catalogue/index.js | 4 +-- 6 files changed, 39 insertions(+), 12 deletions(-) create mode 100644 resources/js/processes-catalogue/components/ProcessListing.vue diff --git a/resources/js/processes-catalogue/components/Process.vue b/resources/js/processes-catalogue/components/Process.vue index 26c5cbee5c..dcccbf349e 100644 --- a/resources/js/processes-catalogue/components/Process.vue +++ b/resources/js/processes-catalogue/components/Process.vue @@ -11,21 +11,17 @@ :permission="permission" @goBackCategory="goBackCategory" /> - \ No newline at end of file diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue index b953039210..41920a5833 100644 --- a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue +++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue @@ -62,12 +62,11 @@ - diff --git a/resources/js/processes-catalogue/components/ProcessListing.vue b/resources/js/processes-catalogue/components/ProcessListing.vue index 46f9e7cab6..5cdbd88a94 100644 --- a/resources/js/processes-catalogue/components/ProcessListing.vue +++ b/resources/js/processes-catalogue/components/ProcessListing.vue @@ -1,5 +1,5 @@