Added the option to chose update or copy for devlink installing asset

Author: gustavobascope

ProcessMaker/Http/Controllers/Api/DevLinkController.php

@@ -355,12 +355,14 @@ public function removeSharedAsset($id)
 
     public function installRemoteAsset(Request $request, DevLink $devLink)
     {
+        $updateType = $request->input('updateType', DevLinkInstall::MODE_UPDATE);
+
         DevLinkInstall::dispatch(
             $request->user()->id,
             $devLink->id,
             $request->input('class'),
             $request->input('id'),
-            DevLinkInstall::MODE_UPDATE,
+            $updateType,
             DevLinkInstall::TYPE_IMPORT_ASSET
         );
 

ProcessMaker/Jobs/DevLinkInstall.php

@@ -67,7 +67,7 @@ public function handle(): void
                         $bundle->reinstall($this->importMode, $logger);
                         break;
                     case self::TYPE_IMPORT_ASSET:
-                        $devLink->installRemoteAsset($this->class, $this->id, $logger);
+                        $devLink->installRemoteAsset($this->class, $this->id, $this->importMode, $logger);
                         break;
                     default:
                         break;

ProcessMaker/Models/DevLink.php

@@ -191,14 +191,14 @@ public function installRemoteBundle($remoteBundleId, $updateType)
         $this->logger->setStatus('done');
     }
 
-    public function installRemoteAsset(string $class, int $id, Logger $logger) : ProcessMakerModel
+    public function installRemoteAsset(string $class, int $id, string $updateType, Logger $logger) : ProcessMakerModel
     {
         $payload = $this->client()->get(
             route('api.devlink.export-local-asset', ['class' => $class, 'id' => $id], false)
         )->json();
 
         $options = new Options([
-            'mode' => 'update',
+            'mode' => $updateType,
         ]);
 
         $logger->setSteps([$payload]);

resources/js/admin/devlink/components/AssetListing.vue

@@ -1,14 +1,13 @@
 <script setup>
 import { ref, watch, onMounted, getCurrentInstance } from 'vue';
-import { useRouter, useRoute } from 'vue-router/composables';
+import { useRoute } from 'vue-router/composables';
 import debounce from 'lodash/debounce';
 import InstanceTabs from './InstanceTabs.vue';
 import types from './assetTypes';
 import moment from 'moment';
 import Header from './Header.vue';
 import InstallProgress from './InstallProgress.vue';
 
-const router = useRouter();
 const route = useRoute();
 const vue = getCurrentInstance().proxy;
 
@@ -18,9 +17,30 @@ const items = ref([]);
 const meta = ref({});
 const filter = ref("");
 const showInstallModal = ref(false);
+const showConfirmModal = ref(false);
+const selectedAsset = ref(null);
+const installMode = ref('update');
 const page = ref(1);
 const perPage = ref(15);
 
+const load = () => {
+  if (!typeConfig) {
+    return;
+  }
+  const queryParams = {
+    url: typeConfig.url,
+    filter: filter.value,
+    per_page: perPage.value,
+    page: page.value
+  };
+  ProcessMaker.apiClient
+    .get(`devlink/${route.params.id}/remote-assets-listing`, { params: queryParams })
+    .then((result) => {
+      items.value = result.data.data;
+      meta.value = result.data.meta;
+    });
+};
+
 watch(page, () => {
   load();
 });
@@ -57,52 +77,42 @@ const fields = [
   },
   {
     key: 'menu',
-    label: ''
+    label: '',
   },
 ];
 
 
 const install = (asset) => {
-  vue.$bvModal.msgBoxConfirm(vue.$t('Are you sure you want to install this asset onto this instance?'), {
-    okTitle: vue.$t('Ok'),
-    cancelTitle: vue.$t('Cancel')
-  }).then((confirm) => {
-    if (confirm) {
-      showInstallModal.value = true;
-      const params = {
-        class: typeConfig.class,
-        id: asset.id
-      };
-      ProcessMaker.apiClient
-        .post(`/devlink/${route.params.id}/install-remote-asset`, params)
-        .then((response) => {
-        });
-    }
-  });
+  selectedAsset.value = asset;
+  showConfirmModal.value = true;
+};
+
+const confirmInstall = () => {
+  if (selectedAsset.value) {
+    showConfirmModal.value = false;
+    showInstallModal.value = true;
+    const params = {
+      class: typeConfig.class,
+      id: selectedAsset.value.id,
+      updateType: installMode.value
+    };
+    ProcessMaker.apiClient
+      .post(`/devlink/${route.params.id}/install-remote-asset`, params)
+      .then(() => {
+        selectedAsset.value = null;
+      });
+  }
+};
+
+const cancelInstall = () => {
+  selectedAsset.value = null;
+  showConfirmModal.value = false;
 };
 
 onMounted(() => {
   load();
 });
 
-const load = () => {
-  if (!typeConfig) {
-    return;
-  }
-  const queryParams = {
-    url: typeConfig.url,
-    filter: filter.value,
-    per_page: perPage.value,
-    page: page.value
-  };
-  ProcessMaker.apiClient
-    .get(`devlink/${route.params.id}/remote-assets-listing`, { params: queryParams })
-    .then((result) => {
-      items.value = result.data.data;
-      meta.value = result.data.meta;
-    });
-};
-
 // Debounced function
 const debouncedLoad = debounce(load, 300);
 
@@ -152,6 +162,53 @@ const handleFilterChange = () => {
         @page-change="page = $event"
         @per-page-change="perPage = $event"
       />
+    <!-- Confirmation Modal -->
+    <b-modal 
+      id="install-confirm" 
+      v-model="showConfirmModal" 
+      :title="$t('Install Asset')" 
+      @ok="confirmInstall"
+      @cancel="cancelInstall"
+      :ok-title="$t('Install')"
+      :cancel-title="$t('Cancel')"
+    >
+      <div class="mb-3">
+        <p>{{ $t('Do you want to proceed with installing the asset on your instance?') }}</p>
+        <p v-if="selectedAsset" class="font-weight-bold">{{ selectedAsset.name || selectedAsset.title }}</p>
+      </div>
+      
+      <div class="form-group">
+        <label class="font-weight-bold mb-2">{{ $t('Installation Mode:') }}</label>
+        <div class="custom-control custom-radio">
+          <input 
+            id="update-mode" 
+            v-model="installMode" 
+            type="radio" 
+            value="update" 
+            class="custom-control-input"
+          >
+          <label for="update-mode" class="custom-control-label">
+            <strong>{{ $t('Update') }}</strong>
+            <div class="text-muted small">{{ $t('Update existing asset with the same name (recommended)') }}</div>
+          </label>
+        </div>
+        <div class="custom-control custom-radio mt-2">
+          <input 
+            id="copy-mode" 
+            v-model="installMode" 
+            type="radio" 
+            value="copy" 
+            class="custom-control-input"
+          >
+          <label for="copy-mode" class="custom-control-label">
+            <strong>{{ $t('Copy') }}</strong>
+            <div class="text-muted small">{{ $t('Create a new asset even if one with the same name exists') }}</div>
+          </label>
+        </div>
+      </div>
+    </b-modal>
+
+    <!-- Progress Modal -->
     <b-modal id="install-progress" size="lg" v-model="showInstallModal" :title="$t('Installation Progress')" hide-footer>
       <install-progress />
     </b-modal>