wip

Author: haffi96

…min_ui/src/components/CallbackButton.vue admin_ui/src/components/ActionButton.vueadmin_ui/src/components/CallbackButton.vue renamed to admin_ui/src/components/ActionButton.vue admin_ui/src/components/CallbackButton.vue renamed to admin_ui/src/components/ActionButton.vue

@@ -1,11 +1,11 @@
 <template>
     <a
     href="#"
-    id="callback"
-    title="Row callback"
+    id="action"
+    title="Row Action"
     v-on:click.prevent="$emit('triggered')"
     >
-        <span v-if="includeTitle">{{ $t("Callback") }}</span>
+        <span v-if="includeTitle">{{ $t("Action") }}</span>
 </a>
 </template>
 
@@ -36,7 +36,7 @@ export default {
     }
 }
 
-a#callback {
+a#action {
     text-decoration: none;
 
     span {

admin_ui/src/components/ActionDropDownMenu.vue

@@ -0,0 +1,37 @@
+
+<template>
+    <a
+        href="#"
+        id="actiondropdown"
+        title="Actions"
+    >
+        <!-- <DropDownMenu> -->
+                <li v-for="action in allActions">
+                    <span>{{ action.action_name }}</span>
+                </li>
+        <!-- </DropDownMenu> -->
+    </a>
+</template>
+
+<script lang="ts">
+import Vue from "vue"
+
+// import DropDownMenu from "./DropDownMenu.vue"
+
+export default Vue.extend({
+    // components: {
+    //     DropDownMenu
+    // },
+    computed: {
+        allActions() {
+            return this.$store.state.actions;
+        }
+    },
+})
+</script>
+
+<style scoped lang="less">
+#actiondropdown {
+    background-color: pink;
+}
+</style>

admin_ui/src/interfaces.ts

@@ -8,9 +8,10 @@ export interface DeleteRow {
     rowID: number
 }
 
-export interface ExecuteCallback {
+export interface ExecuteAction {
     tableName: string
     rowID: number
+    actionId: number
 }
 
 export interface UpdateRow {
@@ -149,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,9 +233,16 @@ export default new Vuex.Store({
             )
             return response
         },
-        async executeCallback(context, config: i.ExecuteCallback) {
+        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}/callback/execute`,
+                `${BASE_URL}tables/${config.tableName}/actions/${config.actionId}/execute`,
                 {
                     table_name: config.tableName,
                     row_id: config.rowID

admin_ui/src/views/RowListing.vue

@@ -27,7 +27,9 @@
                             v-if="selectedRows.length > 0"
                             v-on:triggered="deleteRows"
                         />
-
+                        
+                        <ActionDropDownMenu class="button" v-on:triggered="executeAction"/>
+                        
                         <router-link
                             :to="{
                                 name: 'addRow',
@@ -40,6 +42,7 @@
                             <span>{{ $t("Add Row") }}</span>
                         </router-link>
 
+
                         <a
                             class="button"
                             href="#"
@@ -300,14 +303,10 @@
                                                         />
                                                     </li>
                                                     <li>
-                                                        <CallbackButton
+                                                        <ActionButton
                                                             :includeTitle="true"
                                                             class=""
-                                                            v-on:triggered="
-                                                                executeCallback(
-                                                                    row[pkName]
-                                                                )
-                                                            "
+                                                            v-on:triggered="executeAction"
                                                         />
                                                     </li>
                                                 </DropDownMenu>
@@ -381,7 +380,8 @@ import BulkUpdateModal from "../components/BulkUpdateModal.vue"
 import BulkDeleteButton from "../components/BulkDeleteButton.vue"
 import CSVButton from "../components/CSVButton.vue"
 import DeleteButton from "../components/DeleteButton.vue"
-import CallbackButton from "../components/CallbackButton.vue"
+import ActionButton from "../components/ActionButton.vue"
+import ActionDropDownMenu from "../components/ActionDropDownMenu.vue"
 import DropDownMenu from "../components/DropDownMenu.vue"
 import ChangePageSize from "../components/ChangePageSize.vue"
 import MediaViewer from "../components/MediaViewer.vue"
@@ -420,7 +420,8 @@ export default Vue.extend({
         ChangePageSize,
         CSVButton,
         DeleteButton,
-        CallbackButton,
+        ActionButton,
+        ActionDropDownMenu,
         DropDownMenu,
         MediaViewer,
         Pagination,
@@ -448,6 +449,9 @@ export default Vue.extend({
         schema() {
             return this.$store.state.schema
         },
+        actions() {
+            return this.$store.state.actions
+        },
         rowCount() {
             return this.$store.state.rowCount
         },
@@ -579,20 +583,25 @@ export default Vue.extend({
                 this.showSuccess("Successfully deleted row")
             }
         },
-        async executeCallback(rowID) {
-            if (confirm(`Are you sure you want to run callback for this row?`)) {
-                console.log("Requesting to run callback!")
+        async executeAction() {
+            console.log("RUNNING");
+            
+            if (confirm(`Are you sure you want to run action for this row?`)) {
+                console.log("Requesting to run action!")
                 try {
-                    let response = await this.$store.dispatch("executeCallback", {
-                        tableName: this.tableName,
-                        rowID
-                    })
-                    this.showSuccess(`Successfully ran callback and got response: ${response.data}`, 10000)
+                    for (let i = 0; i < this.selectedRows.length; i++) {
+                        let response = await this.$store.dispatch("executeAction", {
+                            tableName: this.tableName,
+                            rowID: this.selectedRows[i],
+                            actionId: 1
+                        })
+                        this.showSuccess(`Successfully ran action and got response: ${response.data}`, 10000)
+                    }  
                 } catch (error) {
                     if (error.response.status == 404) {
                         console.log(error.response.status)
                         this.$store.commit("updateApiResponseMessage", {
-                            contents: "This table is not configured for callback action",
+                            contents: "This table is not configured for any actions",
                             type: "error"
                         })
                     } else {
@@ -623,6 +632,9 @@ export default Vue.extend({
         },
         async fetchSchema() {
             await this.$store.dispatch("fetchSchema", this.tableName)
+        },
+        async fetchActions() {
+            await this.$store.dispatch("fetchActions", this.tableName)
         }
     },
     watch: {
@@ -650,7 +662,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>

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,7 +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_callback: t.Optional[t.Callable] = None
+    custom_actions: t.Optional[t.List[t.Callable]] = None
 
     def __post_init__(self):
         if self.visible_columns and self.exclude_visible_columns:
@@ -464,7 +465,7 @@ def __init__(
                         "tags": [f"{table_class._meta.tablename.capitalize()}"]
                     },
                 ),
-                callback=table_config.custom_callback,
+                actions=table_config.custom_actions,
             )
 
         private_app.add_api_route(

piccolo_admin/example.py

@@ -259,12 +259,16 @@ async def booking_endpoint(request, data):
 
     return "Booking complete"
 
-async def my_callback_fn(**kwargs) -> JSONResponse:
+async def my_custom_action(**kwargs) -> JSONResponse:
+    print(kwargs)
     request_data = kwargs['request_params']
     table_name = request_data['table_name']
     row_id = request_data['row_id']
     return JSONResponse(f"My API received the row_id: {row_id} from table: {table_name}")
 
+async def custom_action_2(**kwargs) -> JSONResponse:
+    return JSONResponse("This is the second action")
+
 TABLE_CLASSES: t.Tuple[t.Type[Table], ...] = (
     Director,
     Movie,
@@ -307,7 +311,7 @@ async def my_callback_fn(**kwargs) -> JSONResponse:
             media_path=os.path.join(MEDIA_ROOT, "movie_screenshots"),
         ),
     ),
-    custom_callback=my_callback_fn
+    custom_actions=[my_custom_action, custom_action_2]
 )
 
 director_config = TableConfig(