FOUR-26705 | The Copy Options Is Not Visible for a Flow Genie from the Recent Asset

resources/js/components/shared/ellipsisMenuActions.js

@@ -269,6 +269,15 @@ export default {
             "view-additional-asset-actions",
           ],
         },
+        {
+          value: "copy-item",
+          content: "Copy",
+          icon: "fas fa-copy",
+          permission: [
+            "create-flow_genies",
+            "view-additional-asset-actions",
+          ],
+        },
         {
           value: "add-to-project",
           content: "Add to Project",

resources/js/components/shared/flowGenieNavigation.js

@@ -9,20 +9,32 @@ export default {
      * navigation for flow genies actions
      */
     onFlowGenieNavigate(action, data) {
+      const name = data.name || data.title;
       switch (action.value) {
         case "edit-item":
           this.editFlowGenie(data);
-          break;  
-        case 'add-to-project':
-          this.showAddToProjectModal(data.title, data.id);
+          break;
+        case "copy-item":
+          this.doDuplicateFlowGenie(data);
+          break;
+        case "add-to-project":
+          this.showAddToProjectModal(name, data.id);
           break;
         case "remove-item":
           this.doDeleteFlowGenie(data);
           break;
+        default:
+          break;
       }
     },
     /**
-     * go to edit decision table
+     * Open the copy Flow Genie modal.
+     */
+    doDuplicateFlowGenie(data) {
+      this.showFlowGenieCopyModal(data);
+    },
+    /**
+     * go to edit flow genie
      */
     editFlowGenie(row) {
       window.location.href = `/designer/flow-genies/${row.id}/edit`;

resources/js/processes/designer/CopyFlowGenieModal.vue

@@ -0,0 +1,241 @@
+<template>
+  <div>
+    <modal
+      id="copyFlowGenieDesigner"
+      size="md"
+      :title="modalTitle"
+      :set-custom-buttons="true"
+      :custom-buttons="customModalButtons"
+      :required-in-footer="false"
+      @duplicateAsset="onDuplicate"
+      @close="onClose"
+      @hidden="onClose"
+    >
+      <Required />
+      <b-form-group
+        required
+        :label="$t('Name')"
+        :invalid-feedback="errorMessage('name', errors)"
+        :state="errorState('name', errors)"
+        :description="errorState('name', errors) === false ? '' : $t('The Genie name must be unique.')"
+      >
+        <b-form-input
+          v-model="formData.name"
+          required
+          autofocus
+          autocomplete="off"
+          :state="errorState('name', errors)"
+          name="name"
+        />
+      </b-form-group>
+      <b-form-group
+        required
+        :label="$t('Description')"
+        :invalid-feedback="errorMessage('description', errors)"
+        :state="errorState('description', errors)"
+      >
+        <b-form-textarea
+          v-model="formData.description"
+          autocomplete="off"
+          :state="errorState('description', errors)"
+          name="description"
+        />
+      </b-form-group>
+      <category-select
+        v-model="formData.flow_genie_category_id"
+        :label="$t('Category')"
+        api-get="package-ai/flow_genie_categories"
+        api-list="package-ai/flow_genie_categories"
+        name="category"
+        :errors="errors.flow_genie_category_id"
+      />
+      <project-select
+        :label="$t('Project')"
+        api-get="projects"
+        api-list="projects"
+        v-model="formData.projects"
+        :errors="errors.projects"
+      />
+    </modal>
+  </div>
+</template>
+
+<script>
+import { FormErrorsMixin, Required, Modal, CategorySelect, ProjectSelect } from "SharedComponents";
+
+export default {
+  components: {
+    Modal,
+    Required,
+    CategorySelect,
+    ProjectSelect,
+  },
+  mixins: [FormErrorsMixin],
+  props: {
+    assetType: {
+      type: String,
+      default: "Flow Genie",
+    },
+    assetName: {
+      type: String,
+      default: "",
+    },
+    assetData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      autoValidate: false,
+      errors: {},
+      customModalButtons: [
+        {
+          content: this.$t("Cancel"),
+          action: "close",
+          variant: "outline-secondary",
+          disabled: false,
+          hidden: false,
+        },
+        {
+          content: this.$t("Duplicate"),
+          action: "duplicateAsset",
+          variant: "primary",
+          disabled: false,
+          hidden: false,
+        },
+      ],
+      formData: {
+        id: null,
+        name: null,
+        description: null,
+        projects: "",
+        flow_genie_category_id: null,
+        config: null,
+      },
+    };
+  },
+  computed: {
+    modalTitle() {
+      return `${this.$t("Copy of")} ${this.assetType}: ${this.assetName}`;
+    },
+  },
+  watch: {
+    formData: {
+      handler() {
+        if (this.autoValidate) {
+          this.validateData();
+        }
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    show() {
+      this.initializeFormData();
+      this.$bvModal.show("copyFlowGenieDesigner");
+    },
+    initializeFormData() {
+      this.formData = {
+        id: this.assetData.id,
+        name: `${this.assetName || this.assetData.name || ""} ${this.$t("Copy")}`.trim(),
+        description: this.assetData.description || "",
+        flow_genie_category_id: this.assetData.flow_genie_category_id,
+        config: this.assetData.config,
+        projects: this.parseProjects(this.assetData.projects),
+      };
+    },
+    parseProjects(projects) {
+      if (!projects) {
+        return "";
+      }
+      let parsed = projects;
+      if (typeof projects === "string") {
+        try {
+          parsed = JSON.parse(projects);
+        } catch (e) {
+          return projects;
+        }
+      }
+      if (Array.isArray(parsed)) {
+        return parsed
+          .map((project) => (typeof project === "object" ? project.id : project))
+          .filter((id) => id !== null && id !== undefined && id !== "")
+          .join(",");
+      }
+      return "";
+    },
+    resetFormData() {
+      this.formData = {
+        id: null,
+        name: null,
+        description: null,
+        projects: "",
+        flow_genie_category_id: null,
+        config: null,
+      };
+    },
+    resetErrors() {
+      this.errors = {
+        name: null,
+        description: null,
+        flow_genie_category_id: null,
+        projects: null,
+      };
+    },
+    onClose() {
+      this.$bvModal.hide("copyFlowGenieDesigner");
+      this.resetFormData();
+      this.resetErrors();
+      this.autoValidate = false;
+      this.customModalButtons[1].disabled = false;
+    },
+    onDuplicate() {
+      this.autoValidate = true;
+      this.validateData();
+      if (!_.isEmpty(this.errors.name) || !_.isEmpty(this.errors.description)) {
+        return;
+      }
+
+      const sourceId = this.formData.id || this.assetData.id;
+      window.ProcessMaker.apiClient
+        .put(`package-ai/flow_genies/${sourceId}/duplicate`, this.formData)
+        .then(() => {
+          ProcessMaker.alert(this.$t("The Genie was duplicated."), "success");
+          this.onClose();
+          this.$emit("reload");
+        })
+        .catch((error) => {
+          if (error.response?.status === 422) {
+            this.errors = error.response.data.errors;
+            Object.keys(this.errors).forEach((key) => {
+              this.errors[key] = this.errors[key].map((text) => {
+                const replaced = text.replace("Authtype", this.$t("Authentication Method"));
+                return this.$t(replaced);
+              });
+            });
+          }
+        });
+    },
+    validateData() {
+      const { name, description } = this.formData;
+
+      this.resetErrors();
+
+      if (_.isEmpty(name)) {
+        this.errors.name = ["The name is a required field."];
+      } else if (name.length > 255) {
+        this.errors.name = ["Name must be less than 255 characters."];
+      }
+
+      if (_.isEmpty(description)) {
+        this.errors.description = ["The description is a required field."];
+      }
+
+      this.customModalButtons[1].disabled = !(
+        _.isEmpty(this.errors.name) && _.isEmpty(this.errors.description)
+      );
+    },
+  },
+};
+</script>

resources/js/processes/designer/RecentAssetsList.vue

@@ -124,6 +124,13 @@
             <button type="button" @click="onSubmitDuplicateScript" class="btn btn-secondary ml-2">{{ $t('Save') }}</button>
           </div>
         </b-modal>
+        <copy-flow-genie-modal
+          ref="copy-flow-genie-modal"
+          asset-type="Flow Genie"
+          :asset-name="flowGenieName"
+          :asset-data="flowGenieData"
+          @reload="fetch()"
+        />
       </div>
     </div>
   </div>
@@ -147,6 +154,7 @@ import CreatePmBlockModal from "../../components/pm-blocks/CreatePmBlockModal.vu
 import EllipsisMenu from "../../components/shared/EllipsisMenu.vue";
 import AddToBundle from "../../components/shared/AddToBundle.vue";
 import CategorySelect from "../categories/components/CategorySelect.vue";
+import CopyFlowGenieModal from "./CopyFlowGenieModal.vue";
 
 const uniqIdsMixin = createUniqIdsMixin();
 
@@ -158,6 +166,7 @@ export default {
     EllipsisMenu,
     AddToBundle,
     CategorySelect,
+    CopyFlowGenieModal,
   },
   mixins: [
     datatableMixin,
@@ -208,6 +217,8 @@ export default {
       processTemplateName: "",
       pmBlockName: "",
       bundleAssetType: "ProcessMaker\\Models\\Process",
+      flowGenieName: "",
+      flowGenieData: {},
     };
   },
   methods: {
@@ -267,7 +278,7 @@ export default {
         case "Decision Table":
           return this.addBundleAction(this.decisionTableActions, 2);
         case "Flow Genie":
-          return this.addBundleAction(this.flowGenieActions, 2);
+          return this.addBundleAction(this.flowGenieActions, 3);
         default:
           return []; // Handle unknown asset types as needed
       }
@@ -424,6 +435,16 @@ export default {
           }
         });
     },
+    /**
+     * Open the copy Flow Genie modal
+     */
+    showFlowGenieCopyModal(data) {
+      this.flowGenieName = data.name || data.title || "";
+      this.flowGenieData = data;
+      this.$nextTick(() => {
+        this.$refs["copy-flow-genie-modal"].show();
+      });
+    },
   },
 };
 </script>