added filter columns for UI (#103)

* added filter columns for UI * added images, and renamed to `visible_filters` Co-authored-by: Daniel Townsend <dan@dantownsend.co.uk>
piccolo-orm · Oct 27, 2021 · 5f481ef · 5f481ef
1 parent 4d8d79f
commit 5f481ef
Show file tree

Hide file tree

Showing 11 changed files with 208 additions and 130 deletions.
diff --git a/admin_ui/src/components/RowFilter.vue b/admin_ui/src/components/RowFilter.vue
@@ -7,7 +7,7 @@
         </a>
 
         <form ref="form" v-on:submit.prevent="submitForm($event)">
-            <RowFormSearch v-bind:isFilter="true" v-bind:schema="schema" />
+            <RowFormSearch v-bind:schema="schema" />
             <button>Apply</button>
         </form>
         <button v-on:click.prevent="clearFilters">Clear filters</button>
@@ -31,9 +31,6 @@ export default Vue.extend({
         schema() {
             return this.$store.state.schema
         },
-        tableName() {
-            return this.$store.state.currentTableName
-        },
     },
     methods: {
         closeSideBar() {

diff --git a/admin_ui/src/components/RowFormSearch.vue b/admin_ui/src/components/RowFormSearch.vue
@@ -1,68 +1,41 @@
 <template>
     <div>
-        <div
-            v-bind:key="property.title"
-            v-for="(property, keyName) in schema.properties"
-        >
-            <template v-if="property.extra.foreign_key">
-                <label>
-                    {{ property.title }}
-                    <span class="required" v-if="isRequired(keyName)">*</span>
+        <template v-for="(property, keyName) in schema.properties">
+            <div
+                v-bind:key="property.title"
+                v-if="schema.visible_filter_names.includes(keyName)"
+            >
+                <template v-if="property.extra.foreign_key">
+                    <label>
+                        {{ property.title }}
+                    </label>
+                    <KeySearch
+                        v-bind:fieldName="property.title.toLowerCase()"
+                        v-bind:key="getValue(property.title)"
+                        v-bind:readable="getValue(property.title)"
+                        v-bind:rowID="getKeySelectID(property.title)"
+                        v-bind:tableName="property.extra.to"
+                    />
+                </template>
+                <template v-else-if="property.format !== 'json'">
+                    <label>
+                        {{ property.title }}
+                    </label>
 
-                    <router-link
-                        :to="{
-                            name: 'addRow',
-                            params: { tableName: property.extra.to },
-                        }"
-                        class="add"
-                        target="_blank"
-                        v-if="!isFilter"
-                    >
-                        <font-awesome-icon icon="plus" />
-                    </router-link>
-
-                    <router-link
-                        :to="{
-                            name: 'editRow',
-                            params: {
-                                tableName: property.extra.to,
-                                rowID: getKeySelectID(property.title),
-                            },
-                        }"
-                        class="add"
-                        target="_blank"
-                        v-if="!isFilter"
-                    >
-                        <font-awesome-icon icon="edit" />
-                    </router-link>
-                </label>
-                <KeySearch
-                    v-bind:fieldName="property.title.toLowerCase()"
-                    v-bind:key="getValue(property.title)"
-                    v-bind:tableName="property.extra.to"
-                    v-bind:rowID="getKeySelectID(property.title)"
-                    v-bind:readable="getValue(property.title)"
-                />
-            </template>
-            <template v-else>
-                <label>
-                    {{ property.title }}
-                    <span class="required" v-if="isRequired(keyName)">*</span>
-                </label>
-
-                <InputField
-                    v-bind:format="property.format"
-                    v-bind:isFilter="isFilter"
-                    v-bind:isNullable="property.nullable"
-                    v-bind:key="property.title"
-                    v-bind:required="isRequired(keyName)"
-                    v-bind:title="property.title"
-                    v-bind:type="property.type || property.anyOf[0].type"
-                    v-bind:value="getValue(property.title)"
-                    v-bind:choices="property.extra.choices"
-                />
-            </template>
-        </div>
+                    <InputField
+                        v-bind:choices="property.extra.choices"
+                        v-bind:format="property.format"
+                        v-bind:isFilter="true"
+                        v-bind:isNullable="property.nullable"
+                        v-bind:key="property.title"
+                        v-bind:required="isRequired(keyName)"
+                        v-bind:title="property.title"
+                        v-bind:type="property.type || property.anyOf[0].type"
+                        v-bind:value="getValue(property.title)"
+                    />
+                </template>
+            </div>
+        </template>
     </div>
 </template>
 
@@ -76,20 +49,11 @@ export default Vue.extend({
     props: {
         row: Object,
         schema: Object,
-        isFilter: {
-            type: Boolean,
-            default: false,
-        },
     },
     components: {
         InputField,
         KeySearch,
     },
-    data() {
-        return {
-            keySelectIDs: {},
-        }
-    },
     methods: {
         getValue(propertyTitle: string) {
             let value = this.row
@@ -109,14 +73,3 @@ export default Vue.extend({
     },
 })
 </script>
-
-<style scoped lang="less">
-.add {
-    float: right;
-}
-
-span.required {
-    opacity: 0.5;
-    padding-left: 0.05rem;
-}
-</style>
diff --git a/admin_ui/src/main.less b/admin_ui/src/main.less
@@ -1,4 +1,4 @@
-@import "./vars.less";
+@import './vars.less';
 
 html {
     height: 100%;
@@ -10,7 +10,7 @@ body {
     min-height: 100%;
     margin: 0;
     position: relative;
-    font-family: "Avenir", Helvetica, Arial, sans-serif;
+    font-family: 'Avenir', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
@@ -165,15 +165,20 @@ body {
     min-height: 100%;
 }
 
+h1 {
+    font-size: 1.6rem;
+    font-weight: bold;
+}
+
 label {
     display: block;
     padding-bottom: 0.2rem;
     padding-top: 0.8rem;
 }
 
-input[type="text"],
-input[type="number"],
-input[type="password"],
+input[type='text'],
+input[type='number'],
+input[type='password'],
 select,
 textarea {
     box-sizing: border-box;
@@ -182,9 +187,9 @@ textarea {
     margin-bottom: 0.5rem;
 }
 
-input[type="text"],
-input[type="number"],
-input[type="password"],
+input[type='text'],
+input[type='number'],
+input[type='password'],
 button,
 select,
 textarea {
@@ -200,7 +205,7 @@ textarea {
 select {
     appearance: none;
     -webkit-appearance: none;
-    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
     background-repeat: no-repeat, repeat;
     background-position: right 0.7em top 50%, 0 0;
     background-size: 0.65em auto, 100%;
@@ -241,4 +246,3 @@ a {
 svg {
     padding-right: 0.3rem;
 }
-
diff --git a/...table_config/images/with_table_config.jpg → ...le_config/images/with_visible_columns.jpg b/...table_config/images/with_table_config.jpg → ...le_config/images/with_visible_columns.jpg
diff --git a/docs/source/table_config/images/with_visible_filters.jpg b/docs/source/table_config/images/with_visible_filters.jpg
diff --git a/...le_config/images/without_table_config.jpg → ...config/images/without_visible_columns.jpg b/...le_config/images/without_table_config.jpg → ...config/images/without_visible_columns.jpg
diff --git a/docs/source/table_config/images/without_visible_filters.jpg b/docs/source/table_config/images/without_visible_filters.jpg
diff --git a/docs/source/table_config/index.rst b/docs/source/table_config/index.rst
@@ -13,8 +13,16 @@ Alternatively, you can pass in ``TableConfig`` instances (or mix and match
 them).
 
 By passing in a ``TableConfig`` you have extra control over how the UI behaves
-for that table. For example, we can set which columns are visible in the list
-view:
+for that table. This is particularly useful when you have a ``Table`` with lots
+of columns.
+
+In the future, ``TableConfig`` will be extended to allow finer grained control
+over the UI.
+
+visible_columns
+---------------
+
+We can set which columns are visible in the list view:
 
 .. code-block:: python
 
@@ -26,17 +34,36 @@ view:
 
 Here is the UI when just passing in a ``Table``:
 
-.. image:: ./images/without_table_config.jpg
+.. image:: ./images/without_visible_columns.jpg
 
-Here is the UI when just passing in a ``TableConfig`` instance instead (less
+Here is the UI when just passing in a ``TableConfig`` instance instead (fewer
 columns are visible):
 
-.. image:: ./images/with_table_config.jpg
+.. image:: ./images/with_visible_columns.jpg
 
-This is really useful when you have a ``Table`` with lots of columns.
+visible_filters
+---------------
 
-In the future, ``TableConfig`` will be extended to allow finer grained control
-over the UI.
+We can set which columns are visible in the filter sidebar:
+
+.. code-block:: python
+
+    from piccolo_admin.endpoints import TableConfig
+
+    movie_config = TableConfig(Movie, visible_filters=[
+        Movie.name, Movie.rating, Movie.director,
+    ])
+
+    create_admin(Director, movie_config)
+
+Here is the UI when just passing in a ``Table``:
+
+.. image:: ./images/without_visible_filters.jpg
+
+Here is the UI when just passing in a ``TableConfig`` instance instead (fewer
+filters are visible in the sidebar):
+
+.. image:: ./images/with_visible_filters.jpg
 
 Source
 ------