Merge pull request #29 from adrianjost/VUE-58-change-api-to-use-filte…

…r-ui-in-DataTable Change API to use vui-filter-ui in DataTable
adrianjost · Mar 12, 2020 · 2317d66 · 2317d66
2 parents 0ef150b + 1116b3d
commit 2317d66
Show file tree

Hide file tree

Showing 17 changed files with 2,817 additions and 2,691 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -10,9 +10,7 @@ script:
   - yarn build
 notifications:
   email: false
-cache:
-  directories:
-    - node_modules
+cache: yarn
 deploy:
   - provider: npm
     skip_cleanup: true

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,5 @@
+# 0.5.0
+
+- new `default` Parser that passes through the internal state
+- default inputs can now have an optional label
+- removed some dead code
diff --git a/docs/2-Configuration.md b/docs/2-Configuration.md
@@ -38,28 +38,24 @@ Option to replace the component that renders the list of currently active and ap
 
 Wrapper-Component for the dialog where the user can enter there filter settings. You can exchange the default modal by specifing your new modal here. Your custom modal must implement the [Modal specifications](./Customize/3-Modal.md).
 
-## handleUrl
-
-Every filtered page should be accessible with an unique url for shareability. If you wan't to let this module handle the url update for you, simply set this option to `true`.
-
 ## parser
 
 The parsers are used to generate the language specific query from the abstract config object. They are also used to initialy populate the ui with values from an existing query.
 To use an existing parser, you can simply import it.
 
 ```html
 <template>
-  <FilterComponent :parser="parser" />
+	<FilterComponent :parser="parser" />
 </template>
 
 <script>
-  import { parser } from "vue-filter-ui";
+	import { parser } from "vue-filter-ui";
 
-   data(){
-   	return {
-   		parser: parser.FeathersJS,
-   	}
-   }
+	data(){
+		return {
+			parser: parser.FeathersJS,
+		}
+	}
 </script>
 ```
 
@@ -121,17 +117,17 @@ There is an edge case for sorting. The query for sorting must be generated from
 
 ```js
 filter: [
-  {
-    attribute: "$year",
-    applyNegated: true,
-    operator: "=",
-    design: "Radio",
-    options: [
-      { value: 2018, label: "2018" },
-      { value: 2019, label: "2019" },
-      { value: 2020, label: "2020" }
-    ]
-  }
-  // ...
+	{
+		attribute: "$year",
+		applyNegated: true,
+		operator: "=",
+		design: "Radio",
+		options: [
+			{ value: 2018, label: "2018" },
+			{ value: 2019, label: "2019" },
+			{ value: 2020, label: "2020" }
+		]
+	}
+	// ...
 ];
 ```
diff --git a/docs/Customize/6-Parser.md b/docs/Customize/6-Parser.md
@@ -4,6 +4,7 @@ parsers are used to generate the language specific query from the abstract confi
 
 ## available Parsers
 
+- default (passes through internal state without modifications)
 - [FeathersJS](https://feathersjs.com/)
 
 ## extend a parser

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "vue-filter-ui",
-	"version": "0.4.1",
+	"version": "0.5.0",
 	"author": "Adrian Jost <[email protected]> (https://adrianjost.dev)",
 	"scripts": {
 		"build": "run-s build:*",

diff --git a/src/components/Demo.vue b/src/components/Demo.vue
@@ -2,43 +2,31 @@
 	<div class="wrapper">
 		<search-filter
 			ref="filtercomponent"
-			v-model="apiQuery"
+			v-model="query"
 			:label-add="config.addLabel"
 			:label-apply="config.applyLabel"
 			:label-cancle="config.cancleLabel"
 			:label-remove="config.removeLabel"
-			:handle-url="config.handleUrl"
 			:save-state="config.saveState"
 			:consistent-order="config.consistentOrder"
 			:filter="config.filter"
 			:parser="parser"
-			@newQuery="/* updateQuery */"
 		/>
 		<hr />
 		<DemoConfig v-model="config" />
 		<hr />
-		<table width="100%">
-			<tr>
-				<th>FeathersJS</th>
-				<th>URLQuery</th>
-			</tr>
-			<tr>
-				<td>
-					<pre>{{ JSON.stringify(apiQuery, null, 2) }}</pre>
-				</td>
-				<td>
-					<pre>{{ JSON.stringify(urlQuery, null, 2) }}</pre>
-				</td>
-			</tr>
-		</table>
+		<div>
+			<h4>Filter Query</h4>
+			<pre>{{ JSON.stringify(query, null, "\t") }}</pre>
+		</div>
 	</div>
 </template>
 
 <script>
 import DemoConfig from "./DemoConfig.vue";
 import Filter from "./Filter.vue";
 
-import parser from "../parser/FeathersJS";
+import parser from "../parser/default";
 
 export default {
 	components: {
@@ -53,26 +41,34 @@ export default {
 					filter: [],
 					applyLabel: undefined,
 					cancleLabel: undefined,
-					handleUrl: true,
-					saveState: false,
-					consistentOrder: true,
 			  };
 		config.filter = [];
 		return {
 			parser,
 			toggle: false,
-			apiQuery: {
-				$sort: {
-					true: false,
+			query: [
+				{
+					attribute: "$sort",
+					value: "true",
+					operator: "=",
 				},
-				isTemp: {
-					$ne: true,
+				{
+					attribute: "isTemp",
+					value: "true",
+					operator: "=",
+					applyNegated: true,
 				},
-				isCool: ["YES YES", "nope :("],
-				isDaddy: true,
-				isMultiDaddy: ["daddy", "no daddy"],
-			},
-			urlQuery: {},
+				{
+					attribute: "isCool",
+					value: "YES YES",
+					operator: "=",
+				},
+				{
+					attribute: "isDaddy",
+					value: "no daddy",
+					operator: "=",
+				},
+			],
 			nativeEvents: [],
 			config,
 		};
@@ -87,7 +83,7 @@ export default {
 	},
 	mounted() {
 		// test native event handling
-		const events = ["newFilter", "newUrlQuery", "reset"];
+		const events = ["newFilter", "newQuery", "reset"];
 		window.addEventListener("load", () => {
 			const filter = this.$refs["filtercomponent"].$el;
 			events.forEach((event) => {
@@ -97,81 +93,31 @@ export default {
 			});
 		});
 	},
-	/*
-	methods: {
-		updateQuery(query) {
-			this.apiQuery = query;
-		},
-	},
-	*/
 };
 </script>
 
-<!-- CUSTOM MODAL -->
-<style lang="scss" scoped>
-.custom-modal-wrapper {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, 0.2);
-}
-.custom-modal {
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	background: white;
-	padding: 2rem;
-	border: 5px solid green;
-	box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
-}
-</style>
-
-<!-- DEMO STYLES -->
 <style lang="scss" scoped>
 .wrapper {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-
-pre {
-	background: #eee;
-}
-.wrapper {
 	margin: 25px;
 	padding: 25px;
 	border: 1px dashed lightgrey;
 	border-radius: 5px;
-}
-hr {
-	border: none;
-	background: transparent;
-	border-bottom: 1px dashed lightgrey;
-	margin: 1rem 0;
-}
-table {
-	display: table;
-	margin-top: 25px;
-	width: 100%;
-	text-align: left;
-	word-break: break-all;
-	word-break: break-word;
-}
-.pre {
-	overflow: auto;
-}
-.events {
-	max-height: 350px;
-	overflow-y: auto;
-	.event {
-		margin: 0;
+	hr {
+		border: none;
+		background: transparent;
+		border-bottom: 1px dashed lightgrey;
+		margin: 1rem 0;
+	}
+	pre {
 		padding: 8px;
-		background-color: rgba(0, 0, 0, 0.05);
-		&:nth-of-type(2n) {
-			background-color: rgba(0, 0, 0, 0.25);
-		}
+		border-radius: 4px;
+		tab-size: 2;
+		max-height: 350px;
+		overflow: auto;
+		color: #fff;
+		background-color: #282c34;
 	}
 }
 </style>
diff --git a/src/components/DemoConfig.vue b/src/components/DemoConfig.vue
@@ -17,29 +17,16 @@
 				<b>removeLabel:</b>
 				<input v-model="config.removeLabel" type="text" />
 			</label>
-			<label>
-				<b>handleUrl:</b>
-				<input v-model="config.handleUrl" type="checkbox" />
-			</label>
-			<!--
-      <label>
-        <b>saveState:</b>
-        <input v-model="config.saveState" type="checkbox" />
-      </label>
-      <label>
-        <b>consistentOrder:</b>
-        <input v-model="config.consistentOrder" type="checkbox" />
-      </label>
-      -->
 			<label style="width: 100%">
 				<b>filter:</b>
 				<textarea v-model="filters" />
 			</label>
-			<button @click="reset">
-				Reset
-			</button>
+			<button @click="reset">Reset</button>
 		</div>
-		<p v-if="configError" style="color: red"><b>Error:</b> {{ configError }}</p>
+		<p v-if="configError" style="color: red">
+			<b>Error:</b>
+			{{ configError }}
+		</p>
 	</section>
 </template>
 
@@ -57,16 +44,18 @@ const defaultFilter = `[
         attribute: "$sort-attribute",
         //applyNegated: false,
         //operator: "=",
+        label: "Sortier-Attribut",
 
         // UI options
-        options: undefined,
+
         input: inputs.TriSwitch
       },
       {
         // Query data
         attribute: "$sort-order",
         //applyNegated: false,
         //operator: "=",
+        label: "Sortierreihenfolge",
 
         // UI options
         options: undefined,
@@ -83,6 +72,7 @@ const defaultFilter = `[
         attribute: "isPublished",
         applyNegated: false,
         operator: "=",
+        label: "Veröffentlicht?",
 
         // UI options
         options: undefined,
@@ -100,6 +90,7 @@ const defaultFilter = `[
         attribute: "isTemp",
         applyNegated: true,
         operator: "=",
+        label: "isTemp",
 
         // UI options
         options: [
@@ -122,6 +113,7 @@ const defaultFilter = `[
         // Query data
         attribute: "isCool",
         operator: "=",
+        label: "isCool",
 
         // UI options
         options: [