Adding support for custom actions per table

admin_ui/src/components/MessagePopup.vue

@@ -53,7 +53,7 @@ export default Vue.extend({
                 if (now - app.timeLastAppeared >= 3000) {
                     app.visible = false
                 }
-            }, 3000)
+            }, this.$store.state.apiResponseMessage.timeout ? this.$store.state.apiResponseMessage.timeout : 3000)
         }
     }
 })

admin_ui/src/interfaces.ts

@@ -8,6 +8,12 @@ export interface DeleteRow {
     rowID: number
 }
 
+export interface ExecuteAction {
+    tableName: string
+    rowIDs: number
+    actionId: number
+}
+
 export interface UpdateRow {
     tableName: string
     rowID: number
@@ -34,6 +40,7 @@ export interface FetchSingleRowConfig {
 export interface APIResponseMessage {
     contents: string
     type: string
+    timeout?: number
 }
 
 export interface SortByConfig {
@@ -143,3 +150,8 @@ export interface FormConfig {
     slug: string
     description: string
 }
+
+export interface Action {
+    actionID: number
+    actionName: string
+}

admin_ui/src/store.ts

@@ -33,7 +33,8 @@ export default new Vuex.Store({
         tableNames: [],
         formConfigs: [] as i.FormConfig[],
         user: undefined,
-        loadingStatus: false
+        loadingStatus: false,
+        actions: [] as i.Action[]
     },
     mutations: {
         updateTableNames(state, value) {
@@ -66,6 +67,9 @@ export default new Vuex.Store({
         updateSortBy(state, config: i.SortByConfig) {
             state.sortBy = config
         },
+        updateActions(state, actions) {
+            state.actions = actions
+        },
         reset(state) {
             state.sortBy = null
             state.filterParams = {}
@@ -229,6 +233,23 @@ export default new Vuex.Store({
             )
             return response
         },
+        async fetchActions(context, tableName: string) {
+            const response = await axios.get(
+                `${BASE_URL}tables/${tableName}/actions`
+            )
+            context.commit("updateActions", response.data)
+            return response
+        },
+        async executeAction(context, config: i.ExecuteAction) {
+            const response = await axios.post(
+                `${BASE_URL}tables/${config.tableName}/actions/${config.actionId}/execute`,
+                {
+                    table_name: config.tableName,
+                    row_ids: config.rowIDs
+                }
+            )
+            return response
+        },
         async updateRow(context, config: i.UpdateRow) {
             const response = await axios.patch(
                 `${BASE_URL}tables/${config.tableName}/${config.rowID}/`,

admin_ui/src/views/RowListing.vue

@@ -11,6 +11,20 @@
                         />
                     </div>
                     <div class="buttons">
+                        <a class="button" v-on:click.prevent="showActionDropDown = !showActionDropDown">
+                            <font-awesome-icon icon="angle-right" v-if="!showActionDropDown"/>
+                            <font-awesome-icon icon="angle-down" v-if="showActionDropDown"/>
+                            Actions
+                            <a class="actions-dropdown">
+                                <DropDownMenu v-if="showActionDropDown">
+                                    <li v-for="action in allActions">
+                                        <a href="#" class="button" v-on:click="executeAction(action.action_id)">
+                                            <span>{{ action.action_name }}</span>
+                                        </a>
+                                    </li>
+                                </DropDownMenu>
+                            </a>
+                        </a>
                         <a
                             class="button"
                             href="#"
@@ -27,7 +41,8 @@
                             v-if="selectedRows.length > 0"
                             v-on:triggered="deleteRows"
                         />
-
+
+
                         <router-link
                             :to="{
                                 name: 'addRow',
@@ -40,6 +55,7 @@
                             <span>{{ $t("Add Row") }}</span>
                         </router-link>
 
+
                         <a
                             class="button"
                             href="#"
@@ -397,7 +413,8 @@ export default Vue.extend({
             showUpdateModal: false,
             visibleDropdown: null,
             showMediaViewer: false,
-            mediaViewerConfig: null as MediaViewerConfig
+            mediaViewerConfig: null as MediaViewerConfig,
+            showActionDropDown: false,
         }
     },
     components: {
@@ -435,6 +452,9 @@ export default Vue.extend({
         schema() {
             return this.$store.state.schema
         },
+        allActions() {
+            return this.$store.state.actions
+        },
         rowCount() {
             return this.$store.state.rowCount
         },
@@ -538,10 +558,11 @@ export default Vue.extend({
                 this.selectedRows = []
             }
         },
-        showSuccess(contents: string) {
+        showSuccess(contents: string, timeout?: number) {
             var message: APIResponseMessage = {
                 contents: contents,
-                type: "success"
+                type: "success",
+                timeout: timeout ? timeout : 3000
             }
             this.$store.commit("updateApiResponseMessage", message)
         },
@@ -565,6 +586,30 @@ export default Vue.extend({
                 this.showSuccess("Successfully deleted row")
             }
         },
+        async executeAction(action_id) {
+            if (confirm(`Are you sure you want to run action for this row?`)) {
+                try {
+                    let response = await this.$store.dispatch("executeAction", {
+                        tableName: this.tableName,
+                        rowIDs: this.selectedRows,
+                        actionId: action_id
+                    })
+                    this.showSuccess(`Successfully ran action and got response: ${response.data}`, 10000)
+                } catch (error) {
+                    if (error.response.status == 404) {
+                        this.$store.commit("updateApiResponseMessage", {
+                            contents: "This table is not configured for any actions",
+                            type: "error"
+                        })
+                    } else {
+                        this.$store.commit("updateApiResponseMessage", {
+                            contents: "Something went wrong",
+                            type: "error"
+                        })
+                    }
+                }
+            }
+        },
         async deleteRows() {
             if (confirm(`Are you sure you want to delete the selected rows?`)) {
                 console.log("Deleting rows!")
@@ -583,6 +628,9 @@ export default Vue.extend({
         },
         async fetchSchema() {
             await this.$store.dispatch("fetchSchema", this.tableName)
+        },
+        async fetchActions() {
+            await this.$store.dispatch("fetchActions", this.tableName)
         }
     },
     watch: {
@@ -610,7 +658,7 @@ export default Vue.extend({
             this.$router.currentRoute.query
         )
 
-        await Promise.all([this.fetchRows(), this.fetchSchema()])
+        await Promise.all([this.fetchRows(), this.fetchSchema(), this.fetchActions()])
     }
 })
 </script>
@@ -687,6 +735,10 @@ div.wrapper {
                 &:first-child {
                     margin-left: 0;
                 }
+
+                a.actions-dropdown {
+                    position: relative;
+                }
             }
         }
     }

piccolo_admin/endpoints.py

@@ -152,6 +152,7 @@ async def manager_only(
                     validators=Validators(post_single=manager_only)
                 )
             )
+    :param custom_actions: Optional list of custom actions handler function
 
     """
 
@@ -164,6 +165,7 @@ async def manager_only(
     hooks: t.Optional[t.List[Hook]] = None
     media_storage: t.Optional[t.Sequence[MediaStorage]] = None
     validators: t.Optional[Validators] = None
+    custom_actions: t.Optional[t.List[t.Callable]] = None
 
     def __post_init__(self):
         if self.visible_columns and self.exclude_visible_columns:
@@ -463,6 +465,7 @@ def __init__(
                         "tags": [f"{table_class._meta.tablename.capitalize()}"]
                     },
                 ),
+                actions=table_config.custom_actions,
             )
 
         private_app.add_api_route(

piccolo_admin/example.py

@@ -43,6 +43,8 @@
 from piccolo_api.media.s3 import S3MediaStorage
 from piccolo_api.session_auth.tables import SessionsBase
 from pydantic import BaseModel, validator
+from starlette.responses import JSONResponse
+from piccolo_api.fastapi.endpoints import TableRowDataSchema
 
 from piccolo_admin.endpoints import FormConfig, TableConfig, create_admin
 from piccolo_admin.example_data import (
@@ -163,6 +165,7 @@ class Genre(int, enum.Enum):
         romance = 7
         musical = 8
 
+    id = BigInt
     name = Varchar(length=300)
     rating = Real(help_text="The rating on IMDB.")
     duration = Interval()
@@ -269,6 +272,19 @@ async def booking_endpoint(request, data):
 )
 
 
+# CUSTOM ACTIONS
+async def my_custom_action(data: TableRowDataSchema) -> JSONResponse:
+    row_ids = data.row_ids
+
+    # Use the selected row ids to fetch rows from db
+    movies = await Movie.select().where(Movie.id == row_ids[0])
+
+    # Return a JSONResponse which can be displayed back to the frontend
+    return JSONResponse(f"My API received the row_id: {row_ids}")
+
+async def custom_action_2(data) -> JSONResponse:
+    return JSONResponse("This is the second action")
+
 movie_config = TableConfig(
     table_class=Movie,
     visible_columns=[
@@ -301,6 +317,7 @@ async def booking_endpoint(request, data):
             media_path=os.path.join(MEDIA_ROOT, "movie_screenshots"),
         ),
     ),
+    custom_actions=[my_custom_action, custom_action_2]
 )
 
 director_config = TableConfig(