From 96fde3d36b8f60b6545d02799f990f003207faac Mon Sep 17 00:00:00 2001
From: Daniel Townsend <dan@dantownsend.co.uk>
Date: Sun, 2 Jul 2023 23:40:10 +0100
Subject: [PATCH] hooked up form

---
 admin_ui/src/components/Chart.vue | 50 +++++++++++++++++++++++++++----
 admin_ui/src/store.ts             | 10 +++++--
 admin_ui/src/utils.ts             |  2 +-
 piccolo_admin/example.py          |  6 ++--
 4 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/admin_ui/src/components/Chart.vue b/admin_ui/src/components/Chart.vue
index c2a12793..c96e1c77 100644
--- a/admin_ui/src/components/Chart.vue
+++ b/admin_ui/src/components/Chart.vue
@@ -36,30 +36,70 @@
             v-else-if="chartConfig.chart_type == 'Area'"
             :data="chartData"
         ></area-chart>
+
+        <form @submit.prevent="handleSubmit($event)" v-if="chartSchema">
+            <NewForm :schema="chartSchema"></NewForm>
+            <button>Apply</button>
+        </form>
     </div>
 </template>
 
 <script lang="ts">
 import Vue from "vue"
+import NewForm from "./NewForm.vue"
+import { convertFormValue } from "@/utils"
 
 export default Vue.extend({
     data() {
-        return { chartData: [], chartConfig: null, chartSchema: null }
+        return {
+            chartData: [],
+            chartConfig: null,
+            chartSchema: null,
+            chartSlug: null
+        }
+    },
+    components: { NewForm },
+    methods: {
+        async handleSubmit(event) {
+            const form = new FormData(event.target)
+
+            const json = {}
+            for (const i of form.entries()) {
+                const key = i[0]
+                let value = i[1]
+
+                json[key] = convertFormValue({
+                    key,
+                    value,
+                    schema: this.chartSchema
+                })
+            }
+
+            this.chartData = (
+                await this.$store.dispatch("fetchChartData", {
+                    chartSlug: this.chartSlug,
+                    data: json
+                })
+            ).data
+        }
     },
     async mounted() {
-        const chartSlug = this.$router.currentRoute.params.chartSlug
+        this.chartSlug = this.$router.currentRoute.params.chartSlug
 
         this.chartData = (
-            await this.$store.dispatch("fetchChartData", chartSlug)
+            await this.$store.dispatch("fetchChartData", {
+                chartSlug: this.chartSlug,
+                data: {}
+            })
         ).data
 
         this.chartConfig = (
-            await this.$store.dispatch("fetchChartConfig", chartSlug)
+            await this.$store.dispatch("fetchChartConfig", this.chartSlug)
         ).data
 
         if (this.chartConfig.has_form) {
             this.chartSchema = (
-                await this.$store.dispatch("fetchChartSchema", chartSlug)
+                await this.$store.dispatch("fetchChartSchema", this.chartSlug)
             ).data
         }
     }
diff --git a/admin_ui/src/store.ts b/admin_ui/src/store.ts
index 4acdeaf8..a261c6f3 100644
--- a/admin_ui/src/store.ts
+++ b/admin_ui/src/store.ts
@@ -127,8 +127,14 @@ export default new Vuex.Store({
         async fetchChartConfig(context, chartSlug: string) {
             return await axios.get(`${BASE_URL}charts/${chartSlug}/`)
         },
-        async fetchChartData(context, chartSlug: string) {
-            return await axios.post(`${BASE_URL}charts/${chartSlug}/data/`, {})
+        async fetchChartData(
+            context,
+            config: { chartSlug: string; data: object }
+        ) {
+            return await axios.post(
+                `${BASE_URL}charts/${config.chartSlug}/data/`,
+                config.data
+            )
         },
         async fetchChartSchema(context, chartSlug: string) {
             return await axios.get(`${BASE_URL}charts/${chartSlug}/schema/`)
diff --git a/admin_ui/src/utils.ts b/admin_ui/src/utils.ts
index dd3e058e..a265151d 100644
--- a/admin_ui/src/utils.ts
+++ b/admin_ui/src/utils.ts
@@ -119,7 +119,7 @@ export function convertFormValue(params: {
     } else if (schema?.properties[key].type == "number" && value == "") {
         value = null
     } else if (
-        schema?.properties[key].extra.foreign_key == true &&
+        schema?.properties[key].extra?.foreign_key == true &&
         value == ""
     ) {
         value = null
diff --git a/piccolo_admin/example.py b/piccolo_admin/example.py
index c4ce0f49..8f74af1f 100644
--- a/piccolo_admin/example.py
+++ b/piccolo_admin/example.py
@@ -429,9 +429,9 @@ def booking_endpoint(request: Request, data: BookingModel) -> str:
 async def get_director_movie_count():
     movies = (
         await Movie.select(
-            Movie.director.name.as_alias("director"), CountAgg(Movie.id)
+            Movie.director.name.as_alias("director"), CountAgg()
         )
-        .group_by(Movie.director)
+        .group_by(Movie.director.name)
         .order_by(Movie.director.name)
     )
 
@@ -474,7 +474,7 @@ async def get_movie_count_per_year(model: MovieCountModel):
             GROUP BY EXTRACT(year FROM release_date)
             """
 
-    movies = await Movie.raw(query, model.start_date)
+    movies = await Movie.raw(query, model.start_date.year)
 
     movies_per_year = {i["year"]: i["count"] for i in movies}