fix: make bulk actions state prop option and defien possible values

Author: ivictbor

adminforth/documentation/docs/tutorial/03-Customization/09-bulkActions.md

@@ -35,11 +35,11 @@ import { admin } from '../index';
 //diff-add
             confirm: 'Are you sure you want to mark all selected apartments as listed?',
 //diff-add
-            action: function ({selectedIds, adminUser }: {selectedIds: any[], adminUser: AdminUser }) {
+            action: async function ({selectedIds, adminUser }: {selectedIds: any[], adminUser: AdminUser }) {
 //diff-add
               const stmt = admin.resource('aparts').dataConnector.client.prepare(`UPDATE apartments SET listed = 1 WHERE id IN (${selectedIds.map(() => '?').join(',')})`);
 //diff-add
-              stmt.run(...selectedIds);
+              await stmt.run(...selectedIds);
 //diff-add
               return { ok: true, error: false, successMessage: `Marked ${selectedIds.length} apartments as listed` };
 //diff-add
@@ -48,7 +48,6 @@ import { admin } from '../index';
           }
 //diff-add
         ],
-//diff-add
       }
 }
 ```
@@ -80,7 +79,6 @@ bulkActions: [
   {
     label: 'Mark as listed',
     icon: 'flowbite:eye-solid',
-    state:'active',
 //diff-add
     allowed: async ({ resource, adminUser, selectedIds }) => {
 //diff-add     
@@ -95,9 +93,9 @@ bulkActions: [
     },
       // if optional `confirm` is provided, user will be asked to confirm action
     confirm: 'Are you sure you want to mark all selected apartments as listed?',
-    action: function ({selectedIds, adminUser }: {selectedIds: any[], adminUser: AdminUser }, allow) {
+    action: async function ({selectedIds, adminUser }: {selectedIds: any[], adminUser: AdminUser }, allow) {
       const stmt = admin.resource('aparts').dataConnector.client.prepare(`UPDATE apartments SET listed = 1 WHERE id IN (${selectedIds.map(() => '?').join(',')}`);
-      stmt.run(...selectedIds);
+      await stmt.run(...selectedIds);
       return { ok: true, error: false, successMessage: `Marked ${selectedIds.length} apartments as listed` };
     },
   }

adminforth/spa/src/views/ListView.vue

@@ -38,8 +38,10 @@
         :key="action.id"
         @click="startBulkAction(action.id)"
         class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
-        :class="{'bg-red-100 text-red-800 border-red-400 dark:bg-red-700 dark:text-red-400 dark:border-red-400':action.state==='danger', 'bg-green-100 text-green-800 border-green-400 dark:bg-green-700 dark:text-green-400 dark:border-green-400':action.state==='success',
-        'bg-lightPrimaryOpacity text-lightPrimary border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
+        :class="{
+          'bg-red-100 text-red-800 border-red-400 dark:bg-red-700 dark:text-red-400 dark:border-red-400':action.state==='danger',
+          'bg-green-100 text-green-800 border-green-400 dark:bg-green-700 dark:text-green-400 dark:border-green-400':action.state==='success',
+          'bg-lightPrimaryOpacity text-lightPrimary border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
         }"
       >
         <component

adminforth/types/Common.ts

@@ -94,7 +94,14 @@ export interface AdminForthBulkActionCommon {
    * Label for action button which will be displayed in the list view
    */
   label: string,
-  state: string,
+
+  /**
+   * Bulk Action button state 'danger'|success|'active',
+   *  * 'danger' - red button
+   *  * 'success' - green button
+   *  * 'active' - blue button
+   **/ 
+  state?: 'danger' | 'success' | 'active';
 
   /**
    * Icon for action button which will be displayed in the list view