Add disable/enable all addons btns and fix InstallRes modal view

Author: slmgkck

lang/en-US.json

@@ -85,7 +85,8 @@
     "select-all": "Select All",
     "deselect-all": "Deselect All",
     "selected": "Selected",
-    "disable-all-addons": "Disable all addons"
+    "enable-all-addons": "Enable All Addons",
+    "disable-all-addons": "Disable All Addons"
   },
   "pages": {
     "login": {
@@ -130,6 +131,7 @@
         "installed": "{amount} Installed Addon"
       },
       "update-available": "Update Available",
+      "enable-all-confirm": "Are you sure you want to enable all addons?",
       "disable-all-confirm": "Are you sure you want to disable all addons?"
     },
     "addon-detail": {

lang/tr.json

@@ -84,7 +84,8 @@
     "copy": "Kopyala",
     "select-all": "Tümünü Seç",
     "deselect-all": "Seçimi Kaldır",
-    "disable-all-addons": "Tüm eklentileri devre dışı bırak",
+    "enable-all-addons": "Tüm Eklentileri Etkinleştir",
+    "disable-all-addons": "Tüm Eklentileri Devre Dışı Bırak",
     "selected": "Seçildi"
   },
   "pages": {
@@ -130,6 +131,7 @@
         "installed": "{amount} Yüklü Eklenti"
       },
       "update-available": "Güncelleme Mevcut",
+      "enable-all-confirm": "Tüm eklentileri etkinleştirmek istediğinizden emin misiniz?",
       "disable-all-confirm": "Tüm eklentileri devre dışı bırakmak istediğinizden emin misiniz?"
     },
     "addon-detail": {

src/lib/components/modals/InstallResourceModal.svelte

@@ -20,10 +20,10 @@
           on:click={hide}></button>
       </div>
       <div class="modal-body">
-        <div class="list-group list-group-horizontal">
+        <div class="list-group list-group-horizontal w-100" style="height: 250px;">
           <DragAndDropZone
-            class="list-group-item list-group-item-action w-50 rounded-end-0"
-            style="height: 250px; cursor: pointer;"
+            class="list-group-item rounded-end-0 h-100"
+            style="cursor: pointer; flex: 1;"
             icon="fas fa-upload fa-2x"
             title={$_('components.modals.install-resource.drag-here')}
             accept={$type === 'THEME'
@@ -33,8 +33,8 @@
 
           <a
             href="{base}/{$type === 'PLUGIN' ? 'addons' : 'view'}/store"
-            class="list-group-item list-group-item-action d-flex flex-column align-items-center justify-content-center w-50 text-center"
-            style="height: 250px;"
+            class="list-group-item d-flex flex-column align-items-center justify-content-center text-center h-100 text-decoration-none"
+            style="flex: 1;"
             on:click={hide}>
             <i class="fas fa-store fa-2x mb-2"></i>
             {$_('components.modals.install-resource.install-from-pano-store')}

src/lib/pages/Addons.svelte

@@ -1,5 +1,6 @@
 <InstallResourceModal />
 <AddonStartupErrorModal />
+<ConfirmActionModal />
 <div class="container vstack gap-3">
   {#if data.failedLogin}
     <FailedLoginPanoStoreAlert />
@@ -10,6 +11,27 @@
   <!-- Action Menu -->
   <PageActions middleClasses="d-lg-flex d-none" leftClasses="d-lg-flex d-none">
     <div slot="right" class="hstack gap-2">
+      <div class="btn-group">
+        <button
+          type="button"
+          class="btn btn-link"
+          aria-label={$_('buttons.enable-all-addons')}
+          use:tooltip={[$_('buttons.enable-all-addons'), { placement: 'bottom' }]}
+          on:click={enableAllAddons}
+          disabled={data.plugins.every((p) => p.status === 'STARTED')}>
+          <i class="fa-solid fa-play"></i>
+        </button>
+        <button
+          type="button"
+          class="btn btn-link"
+          aria-label={$_('buttons.disable-all-addons')}
+          use:tooltip={[$_('buttons.disable-all-addons'), { placement: 'bottom' }]}
+          on:click={disableAllAddons}
+          disabled={data.plugins.every((p) => p.status !== 'STARTED')}>
+          <i class="fa-solid fa-power-off"></i>
+        </button>
+      </div>
+
       <button
         type="button"
         class="btn btn-secondary"
@@ -220,6 +242,9 @@
     show as showConfirmEnablingAddonModal,
     setCallback as setCallbackConfirmEnablingAddonModal,
   } from '$lib/components/modals/ConfirmEnablingAddonWillCauseMoreEnableModal.svelte';
+  import ConfirmActionModal, {
+    show as showConfirmActionModal,
+  } from '$lib/components/modals/ConfirmActionModal.svelte';
 
   import NoContent from '$lib/components/NoContent.svelte';
   import VerifiedStatus from '$lib/components/VerifiedStatus.svelte';
@@ -357,4 +382,58 @@
       },
     });
   }
+
+  async function disableAllAddons() {
+    const activePlugins = data.plugins.filter((p) => p.status === 'STARTED');
+    if (activePlugins.length === 0) return;
+
+    showConfirmActionModal('pages.addons.disable-all-confirm', async () => {
+      for (const plugin of activePlugins) {
+        plugin.loading = true;
+      }
+      data.plugins = data.plugins;
+
+      await Promise.all(
+        activePlugins.map(
+          (plugin) =>
+            new Promise((resolve) => {
+              ApiUtil.put({
+                path: `/api/panel/plugins/${plugin.id}`,
+                body: { status: false },
+                handler: (body) => resolve(body),
+              });
+            }),
+        ),
+      );
+
+      await refreshData();
+    });
+  }
+
+  async function enableAllAddons() {
+    const inactivePlugins = data.plugins.filter((p) => p.status !== 'STARTED');
+    if (inactivePlugins.length === 0) return;
+
+    showConfirmActionModal('pages.addons.enable-all-confirm', async () => {
+      for (const plugin of inactivePlugins) {
+        plugin.loading = true;
+      }
+      data.plugins = data.plugins;
+
+      await Promise.all(
+        inactivePlugins.map(
+          (plugin) =>
+            new Promise((resolve) => {
+              ApiUtil.put({
+                path: `/api/panel/plugins/${plugin.id}`,
+                body: { status: true },
+                handler: (body) => resolve(body),
+              });
+            }),
+        ),
+      );
+
+      await refreshData();
+    });
+  }
 </script>