FOUR-10236 | Ellipsis Menu Action: Enhance Assign Asset Modal Information

resources/js/components/shared/AddToProjectModal.vue

@@ -10,15 +10,34 @@
         size="md"
       >
         <template>
-            <required></required>
+            <div class="d-flex justify-content-between pb-3">
+              <h6>
+                <span class="text-capitalize">{{ formatAssetType(assetType) }}:</span> {{ assetName }}
+              </h6>
+              <required></required>
+            </div>
             <project-select
-                v-model="projects"
-                :label="$t('Select Project')"
-                api-get="projects"
-                api-list="projects"
-                name="proeject"
-                :errors="addError.project"
+              required
+              v-model="projects"
+              :label="$t('Select Project')"
+              api-get="projects"
+              api-list="projects"
+              name="project"
+              :errors="addError.project"
             />
+            <b-form-group>
+              <b-form-checkbox
+                v-model="copyAsset"
+                class="pt-3"
+              >
+                <span
+                v-b-tooltip.hover.bottom
+                :title="$t('Use a copy if you are planning on making changes to this asset.')"
+                >
+                  Use a copy of this asset
+                </span>
+              </b-form-checkbox>
+            </b-form-group>
         </template>
       </modal>
     </div>
@@ -39,25 +58,26 @@
       return {
         errors: {},
         projects: [],
+        copyAsset: false,
         addError: {},
         showModal: false,
         disabled: true,
         customModalButtons: [
           {"content": "Cancel", "action": "close", "variant": "outline-secondary", "disabled": false, "hidden": false},
-          {"content": "Assign", "action": "addToProject", "variant": "primary", "disabled": true, "hidden": false},
+          {"content": "Add", "action": "addToProject", "variant": "primary", "disabled": true, "hidden": false},
         ],
       }
     },
       computed: {
         title() {
-          return this.$t('Assign to Project');
+          return this.$t('Add to a Project');
         },
       },
       watch: {
         projects() {
             this.customModalButtons[1].disabled = this.projects.length > 0 ? false : true;
-        }
-      },  
+        },
+      },
       methods: {
         show() {
           this.customModalButtons[1].disabled = this.projects.length > 0 ? false : true;
@@ -70,8 +90,15 @@
         },
         clear() {
           this.projects = [];
+          this.copyAsset = false;
+        },
+        validateProject() {
+          //TODO: ADD FUNCTIONALITY TO CHECK IF ASSET EXISTS ON A PROJECT
         },
         addToProject() {
+          // if (this.copyAsset) {
+          //   //TODO: ADD FUNCTIONALITY FOR COPYING AN ASSET
+          // }
           let formData = new FormData();
           formData.append("asset_type", this.assetType);
           formData.append("asset_id", this.assetId);
@@ -92,12 +119,14 @@
             }
           });
         },
+        formatAssetType(assetType) {
+          return assetType.replace(/-/g, " ");
+        },
       },
     };
 </script>
 
 <style scoped>
-
     .overflow-modal {
     max-height: 30vh;
     overflow-y: auto;

resources/js/processes/components/ProcessesListing.vue

@@ -95,7 +95,7 @@
         { value: "edit-designer", content: "Edit Process", link: true, href:"/modeler/{{id}}", permission: "edit-processes", icon: "fas fa-edit", conditional: "if(status == 'ACTIVE' or status == 'INACTIVE', true, false)"},
         { value: "create-template", content: "Save as Template", permission: "create-process-templates", icon: "fas fa-layer-group" },
         { value: "create-pm-block", content: "Save as PM Block", permission: "create-pm-blocks", icon: "fas nav-icon fa-cube" },
-        { value: "add-to-project", content: "Assign to Project", icon: "fas nav-icon fa-folder" },
+        { value: "add-to-project", content: "Add to Project", icon: "fas fa-folder-plus" },
         { value: "edit-item", content: "Configure", link: true, href:"/processes/{{id}}/edit", permission: "edit-processes", icon: "fas fa-cog", conditional: "if(status == 'ACTIVE' or status == 'INACTIVE', true, false)"},
         { value: "view-documentation", content: "View Documentation", link: true, href:"/modeler/{{id}}/print", permission: "view-processes", icon: "fas fa-sign", conditional: "isDocumenterInstalled"},
         { value: "remove-item", content: "Archive", permission: "archive-processes", icon: "fas fa-archive", conditional: "if(status == 'ACTIVE' or status == 'INACTIVE', true, false)" },

resources/js/processes/screens/components/ScreenListing.vue

@@ -123,8 +123,8 @@ export default {
         },
         { 
           value: "add-to-project", 
-          content: "Assign to Project",
-          icon: "fas nav-icon fa-folder" 
+          content: "Add to Project",
+          icon: "fas fa-folder-plus"
         },
         {
           value: "duplicate-item",
@@ -236,9 +236,9 @@ export default {
           }
         });
     },
-    showAddToProjectModal(name, id) {        
+    showAddToProjectModal(title, id) {        
       this.screenId = id;
-      this.assetName = name;
+      this.assetName = title;
       this.$refs["add-to-project-modal"].show();
     },
     onAction(actionType, data, index) {
@@ -275,7 +275,7 @@ export default {
           );
             break;
             case 'add-to-project':
-              this.showAddToProjectModal(data.name, data.id);
+              this.showAddToProjectModal(data.title, data.id);
             break;
         }
     } else {

resources/js/processes/scripts/components/ScriptListing.vue

@@ -120,8 +120,8 @@ export default {
         },
         { 
           value: "add-to-project", 
-          content: "Assign to Project",
-          icon: "fas nav-icon fa-folder" 
+          content: "Add to Project",
+          icon: "fas fa-folder-plus" 
         },
         {
           value: "duplicate-item",
@@ -247,7 +247,7 @@ export default {
           );
           break;
         case 'add-to-project':
-          this.showAddToProjectModal(data.name, data.id);
+          this.showAddToProjectModal(data.title, data.id);
           break;
       }
     },
@@ -277,9 +277,9 @@ export default {
           this.loading = false;
         });
     },
-    showAddToProjectModal(name, id) {        
+    showAddToProjectModal(title, id) {        
       this.assetId = id;
-      this.assetName = name;
+      this.assetName = title;
       this.$refs["add-to-project-modal"].show();
     },
   },