400 Be able to select which columns are included in the CSV file (#401)

* initial prototype

* use a table for columns

* improve styles

* hook up columns to API

* make sure the primary key is in the list of columns

* make column table hideable

* add code comments

* add a warning if the number of rows being downloaded is high

* fix playwright test

* fix `for` attributes

Author: dantownsend

admin_ui/src/components/CSVModal.vue

@@ -9,6 +9,63 @@
                 <option value=";">{{ $t("Semicolon") }}</option>
             </select>
 
+            <p id="column_header">
+                <a href="#" @click.prevent="showColumnTable = !showColumnTable">
+                    <font-awesome-icon
+                        :icon="showColumnTable ? 'angle-down' : 'angle-right'"
+                    />
+                    Columns</a
+                ><a
+                    id="toggle_all"
+                    href="#"
+                    @click.prevent="toggleAll()"
+                    v-show="showColumnTable"
+                    >Toggle all</a
+                >
+            </p>
+
+            <table class="column_list" v-show="showColumnTable">
+                <tbody>
+                    <tr v-for="columnName in allColumnNames">
+                        <td>
+                            <label :for="'csv_' + columnName">{{
+                                columnName
+                            }}</label>
+
+                            <input
+                                type="checkbox"
+                                :id="'csv_' + columnName"
+                                :checked="
+                                    selectedColumns.indexOf(columnName) != -1
+                                "
+                                @change="
+                                    toggleValue(
+                                        ($event.target as HTMLInputElement)
+                                            .checked,
+                                        columnName
+                                    )
+                                "
+                            />
+                        </td>
+                    </tr>
+                </tbody>
+
+                <tfoot>
+                    <tr>
+                        <td>
+                            <label for="include_readable"
+                                >Include readable</label
+                            >
+                            <input
+                                type="checkbox"
+                                id="include_readable"
+                                v-model="includeReadable"
+                            />
+                        </td>
+                    </tr>
+                </tfoot>
+            </table>
+
             <button
                 data-uitest="download_csv_button"
                 :disabled="buttonDisabled"
@@ -25,10 +82,10 @@
 
 <script setup lang="ts">
 import axios from "axios"
-import { ref, inject } from "vue"
+import { ref, inject, computed, onMounted, watch } from "vue"
 import type { I18n } from "vue-i18n"
 
-import type { RowCountAPIResponse } from "../interfaces"
+import type { RowCountAPIResponse, Schema } from "../interfaces"
 import { getOrderByString } from "@/utils"
 import Modal from "./Modal.vue"
 import { useStore } from "vuex"
@@ -44,6 +101,58 @@ const i18n = inject<I18n>("i18n")
 
 /*****************************************************************************/
 
+const schema = computed((): Schema => {
+    return store.state.schema
+})
+
+/*****************************************************************************/
+
+const showColumnTable = ref<boolean>(false)
+
+/*****************************************************************************/
+
+const selectedColumns = ref<string[]>([])
+const includeReadable = ref<boolean>(true)
+
+const toggleAll = () => {
+    if (selectedColumns.value.length == 0) {
+        selectedColumns.value = allColumnNames.value
+    } else {
+        selectedColumns.value = []
+    }
+}
+
+const toggleValue = (checked: boolean, columnName: string) => {
+    if (checked) {
+        selectedColumns.value.push(columnName)
+    } else {
+        selectedColumns.value = selectedColumns.value.filter(
+            (i) => i != columnName
+        )
+    }
+}
+
+const allColumnNames = computed(() => {
+    let columnNames = Object.keys(schema.value.properties)
+    const primaryKeyName = schema.value.extra.primary_key_name
+
+    if (columnNames.indexOf(primaryKeyName) == -1) {
+        columnNames = [primaryKeyName, ...columnNames]
+    }
+
+    return columnNames
+})
+
+const setupInitialColumns = () => {
+    selectedColumns.value = schema.value.extra.visible_column_names
+}
+
+watch(schema, setupInitialColumns)
+
+onMounted(setupInitialColumns)
+
+/*****************************************************************************/
+
 // Just in case `replaceAll` isn't supported by the browser, provide a
 // fallback.
 const replaceAll = (input: string, value: string, newValue: string): string => {
@@ -64,38 +173,84 @@ const translate = (term: string): string => {
 
 /*****************************************************************************/
 
+// We allow the user to download more than this number of rows, but we ask them
+// to confirm first.
+const softRowLimit = 10000
+
 const fetchExportedRows = async () => {
     buttonDisabled.value = true
 
     const params = store.state.filterParams
-    const orderBy = store.state.orderBy
     const tableName = store.state.currentTableName
 
-    if (orderBy && orderBy.length > 0) {
-        params["__order"] = getOrderByString(orderBy)
-    }
-    // Get the row counts:
+    /*************************************************************************/
+    // Get the row count
+
     const response = await axios.get(`api/tables/${tableName}/count/`, {
         params
     })
     const data = response.data as RowCountAPIResponse
+    const rowCount = data.count
+
+    if (
+        rowCount > softRowLimit &&
+        !confirm(
+            `There are more than ${softRowLimit}, are you sure you want to continue?`
+        )
+    ) {
+        return
+    }
+
+    /*************************************************************************/
+    // Work out how many requests we need to make (based on the row count).
+    // If there are lots of rows, we need to make multiple requests.
+
     const localParams = { ...params }
 
-    localParams["__page"] = data.count
     // Set higher __page_size param to have fewer requests to the API:
     localParams["__page_size"] = 1000
-    const pages = Math.ceil(data.count / localParams["__page_size"])
+
+    const pages = Math.ceil(rowCount / localParams["__page_size"])
+
+    /*************************************************************************/
+    // Make sure orderBy is included in the query, so it matches how the
+    // results are currently displayed.
+
+    const orderBy = store.state.orderBy
+
+    if (orderBy && orderBy.length > 0) {
+        localParams["__order"] = getOrderByString(orderBy)
+    }
+
+    /*************************************************************************/
+    // Work out which columns to fetch
+
+    if (selectedColumns.value.length == 0) {
+        alert("Please select at least one column.")
+        return
+    }
+
+    if (selectedColumns.value.length != allColumnNames.value.length) {
+        // If only some columns are selected, we need to filter which are
+        // returned.
+        localParams["__visible_fields"] = selectedColumns.value.join(",")
+    }
+
+    /*************************************************************************/
+    // Add readable if required
+
+    localParams["__readable"] = true
+
+    /*************************************************************************/
+
     const exportedRows = []
 
     try {
         for (let i = 1; i < pages + 1; i++) {
             localParams["__page"] = i
-            const response = await axios.get(
-                `api/tables/${tableName}/?__readable=true`,
-                {
-                    params: localParams
-                }
-            )
+            const response = await axios.get(`api/tables/${tableName}/`, {
+                params: localParams
+            })
             exportedRows.push(...response.data.rows)
         }
         let data: string = ""
@@ -138,4 +293,50 @@ const fetchExportedRows = async () => {
 p.note {
     font-size: 0.85em;
 }
+
+p#column_header {
+    margin-bottom: 0;
+
+    a {
+        text-decoration: none;
+
+        &#toggle_all {
+            text-decoration: none;
+            font-size: 0.8em;
+            float: right;
+        }
+    }
+}
+
+table.column_list {
+    width: 100%;
+
+    tr {
+        td {
+            box-sizing: border-box;
+            padding: 0.5rem;
+            display: flex;
+            flex-direction: row;
+
+            label {
+                flex-grow: 1;
+                padding: 0;
+            }
+
+            input {
+                flex-grow: 0;
+            }
+
+            a {
+                text-decoration: none;
+            }
+        }
+    }
+
+    tfoot {
+        td {
+            margin-top: 1rem;
+        }
+    }
+}
 </style>

e2e/test_codegen.py

@@ -20,12 +20,13 @@ def test_row_listing_filter(playwright: Playwright, dev_server) -> None:
     page.locator('input[name="password"]').press("Enter")
     page.get_by_role("link", name="director").click()
     page.get_by_role("link", name="Show filters").click()
-    page.locator('input[name="name"]').click()
-    page.locator('input[name="name"]').fill("Howard")
-    page.locator('input[name="name"]').press("Enter")
+    name_input = page.locator('.filter_wrapper input[name="name"]')
+    name_input.click()
+    name_input.fill("Howard")
+    name_input.press("Enter")
     page.get_by_role("button", name="Clear filters").click()
-    page.locator('input[name="name"]').click()
-    page.locator('input[name="name"]').fill("ron")
+    name_input.click()
+    name_input.fill("ron")
     page.get_by_role("button", name="Apply").click()
     page.get_by_role("button", name="Clear filters").click()
     page.get_by_text("Close").click()