From 0db4a271b1cc82052de2762104b800d763ef21e9 Mon Sep 17 00:00:00 2001 From: TinCodes Date: Wed, 4 Sep 2024 10:45:00 -0400 Subject: [PATCH 1/5] Added PI Process Import to New Process modal --- resources/img/wf-to-pm.svg | 9 ++ .../js/components/templates/ButtonCard.vue | 36 ++---- .../templates/SelectTemplateModal.vue | 17 ++- .../components/templates/TemplateSearch.vue | 19 +++- .../import/components/ImportPIModal.vue | 106 ++++++++++++++++++ 5 files changed, 153 insertions(+), 34 deletions(-) create mode 100644 resources/img/wf-to-pm.svg create mode 100644 resources/js/processes/import/components/ImportPIModal.vue diff --git a/resources/img/wf-to-pm.svg b/resources/img/wf-to-pm.svg new file mode 100644 index 0000000000..4fc331ce64 --- /dev/null +++ b/resources/img/wf-to-pm.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/resources/js/components/templates/ButtonCard.vue b/resources/js/components/templates/ButtonCard.vue index be9e5c8800..5a72ca1825 100644 --- a/resources/js/components/templates/ButtonCard.vue +++ b/resources/js/components/templates/ButtonCard.vue @@ -5,21 +5,14 @@
{{ button.title }}
+
+
{{ button.description }}
+
{{ $t("Powered by ProcessMaker AI") }}
- -
-
- -
-

{{ button.helperTitle }}

-

{{ button.helperDescription }}

-
- -
@@ -93,26 +86,11 @@ export default { font-size: 1.5rem; } -.helper-container { - position: relative; -} -.arrow-left { - width: 0; - height: 0; - border-top: 16px solid transparent; - border-bottom: 16px solid transparent; - border-right: 13px solid #BCDCF8; - position: absolute; - top: calc(50% - 16px); - left: 0px; -} -.button-card.card-helper { - border: 0; - background: #BCDCF8; -} -.button-card.card-helper .card-text { - color:#363A3E; +.description { + font-weight: 200; + font-size: 14px; } + .ai-slogan-container { position: absolute; bottom: 0; diff --git a/resources/js/components/templates/SelectTemplateModal.vue b/resources/js/components/templates/SelectTemplateModal.vue index fe27a59d9e..f036055635 100644 --- a/resources/js/components/templates/SelectTemplateModal.vue +++ b/resources/js/components/templates/SelectTemplateModal.vue @@ -25,6 +25,7 @@ @show-details="updateModal($event)" @blank-process-button-clicked="createBlankProcess()" @ai-process-button-clicked="createAiProcess()" + @process-intelligence-clicked="importPI()" :showTemplateOptionsActionBar="true" :package-ai="packageAi" /> @@ -38,6 +39,11 @@ @resetModal="resetModal()" :projectId="projectId" /> + @@ -45,9 +51,10 @@ import Modal from "../shared/Modal.vue"; import TemplateSearch from "./TemplateSearch.vue"; import CreateProcessModal from "../../processes/components/CreateProcessModal.vue"; + import ImportPIModal from "../../processes/import/components/ImportPIModal.vue"; export default { - components: { Modal, TemplateSearch, CreateProcessModal }, + components: { Modal, TemplateSearch, CreateProcessModal, ImportPIModal }, props: ['type', 'countCategories', 'packageAi', 'isProjectsInstalled', 'hideAddBtn', 'projectId', 'isAbTestingInstalled'], data: function() { return { @@ -107,6 +114,14 @@ window.location.href = "/package-ai/processes/create"; } }, + onClosePIModal() { + this.$refs["import-pi-modal"].hide(); + this.$bvModal.show('selectTemplate'); + }, + importPI() { + this.$bvModal.hide("selectTemplate"); + this.$refs["import-pi-modal"].show(); + }, useSelectedTemplate() { this.selectedTemplate = true; this.blankTemplate = false; diff --git a/resources/js/components/templates/TemplateSearch.vue b/resources/js/components/templates/TemplateSearch.vue index 29cde20105..97b2a52d70 100644 --- a/resources/js/components/templates/TemplateSearch.vue +++ b/resources/js/components/templates/TemplateSearch.vue @@ -28,13 +28,21 @@ @card-button-clicked="$emit('blank-process-button-clicked')" /> -
+
+ +
+ +
{{ $t('Templates') }}
@@ -140,13 +148,16 @@ export default { }, aiProcessButton: { title: this.$t("Generate from AI"), - helperEnabled: true, - helperTitle: this.$t("Try our new Generative AI"), - helperDescription: this.$t("Describe your process. Our AI will build the model for you. Use it immediately or tweak it as needed."), svgIcon: "../../../img/nl-to-process.svg", svgIconStyle: "height: 2em;", showAiSlogan: true, }, + processIntelligenceButton: { + title: this.$t("Import a PI Process"), + description: this.$t("Workfellow Process Intelligence"), + svgIcon: "../../../img/wf-to-pm.svg", + svgIconStyle: "height: 2em;", + }, showWizardTemplateDetails: false, }; }, diff --git a/resources/js/processes/import/components/ImportPIModal.vue b/resources/js/processes/import/components/ImportPIModal.vue new file mode 100644 index 0000000000..c77f3bec66 --- /dev/null +++ b/resources/js/processes/import/components/ImportPIModal.vue @@ -0,0 +1,106 @@ + + \ No newline at end of file From c7701472a634be6a2d748cbbaa26f8938b5ff434 Mon Sep 17 00:00:00 2001 From: TinCodes Date: Wed, 4 Sep 2024 15:59:23 -0400 Subject: [PATCH 2/5] Changed accepted filetype to JSON --- resources/js/processes/import/components/ImportPIModal.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/js/processes/import/components/ImportPIModal.vue b/resources/js/processes/import/components/ImportPIModal.vue index c77f3bec66..498b1ab91a 100644 --- a/resources/js/processes/import/components/ImportPIModal.vue +++ b/resources/js/processes/import/components/ImportPIModal.vue @@ -13,7 +13,7 @@