From 6cd58726c599cab5b3160c607b98521796fa14b8 Mon Sep 17 00:00:00 2001
From: Anton Schubert <ischluff@mailbox.org>
Date: Wed, 30 Aug 2017 13:35:24 +0200
Subject: [PATCH] fix vue-plugin for eslint -> it doesn't like the html plugin,
 fix eslint errors

---
 .eslintrc                       |   3 -
 package.json                    |   1 -
 src/components/my-form.vue      |   6 +-
 src/components/my-table.vue     | 172 ++++++++++++++---------------
 src/components/scroll-table.vue | 188 ++++++++++++++++----------------
 src/components/topbar.vue       |  64 +++++------
 src/views/forms/formdemo.vue    |   9 +-
 src/views/forms/login.vue       |  34 +++---
 src/views/lists/userlist.vue    |   2 +-
 9 files changed, 237 insertions(+), 242 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 71c5252..ac65579 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -9,9 +9,6 @@
         "browser": true,
         "es6": true
     },
-    "plugins": [
-        "html",
-    ],
     extends: [
         "eslint:recommended",
         "plugin:vue/recommended"
diff --git a/package.json b/package.json
index efd4952..d790eaa 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
     "css-loader": "^0.28.5",
     "eslint": "^4.5.0",
     "eslint-loader": "^1.9.0",
-    "eslint-plugin-html": "^3.2.0",
     "eslint-plugin-vue": "^3.12.0",
     "less": "^2.7.2",
     "less-loader": "^4.0.5",
diff --git a/src/components/my-form.vue b/src/components/my-form.vue
index 7f7ba2a..f9c530a 100644
--- a/src/components/my-form.vue
+++ b/src/components/my-form.vue
@@ -70,9 +70,9 @@ export default {
         },
         buttonClick(type) {
             switch(type) {
-                case 'submit':
-                    this.submit();
-                    break;
+            case 'submit':
+                this.submit();
+                break;
             }
         },
         submit() {
diff --git a/src/components/my-table.vue b/src/components/my-table.vue
index b48954b..11230eb 100644
--- a/src/components/my-table.vue
+++ b/src/components/my-table.vue
@@ -2,7 +2,7 @@
     <div class="cms_table">
 
         <!-- Header -->
-    	<div class="table_header">
+        <div class="table_header">
             <div v-for="(col, i) in columns"
                     :class="['table_cell', {['sortable']: col.orderBy, [`align-${col.align}`]: col.align}]"
                     :key="i">
@@ -11,19 +11,19 @@
                 <div @click="orderBy(col.orderBy)" v-if="col.orderBy">
                     {{ col.heading }}
 
-                	<i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
-                	<i class="icon icon-angle-circled-down" aria-hidden="true" v-else-if="currentOrderDesc"></i>
-                	<i class="icon icon-angle-circled-up" aria-hidden="true" v-else></i>
+                    <i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
+                    <i class="icon icon-angle-circled-down" aria-hidden="true" v-else-if="currentOrderDesc"></i>
+                    <i class="icon icon-angle-circled-up" aria-hidden="true" v-else></i>
                 </div>
 
                 <!-- Column without sorting -->
                 <div v-else>{{ col.heading }}</div>
             </div>
             <div class="table_cell cell_settings" v-if="actions.length"></div>
-    	</div>
+        </div>
 
         <!-- Content -->
-    	<div class="table_content" is="transition-group" name="list">
+        <div class="table_content" is="transition-group" name="list">
             <div class="table_row" v-for="(row, ri) in rows" :key="ri">
 
                 <!-- Row content -->
@@ -36,102 +36,102 @@
                 </div>
 
                 <!-- Row actions -->
-    			<div class="table_cell cell_settings" v-if="actions.length" ref="row_actions">
-					<ul class="actions_container">
-                        <li v-for="(a, i) in actions" :title="a.title" @click="a.action(row)">
+                <div class="table_cell cell_settings" v-if="actions.length" ref="row_actions">
+                    <ul class="actions_container">
+                        <li v-for="(a, i) in actions" :title="a.title" @click="a.action(row)" :key="i">
                             <i :class="['icon', a.icon]"></i>
                         </li>
-					</ul>
+                    </ul>
                     <div title="Open actions" class="actions_btn" @click="toggleActions">
                         <i class="icon icon-cog" aria-hidden="true"></i>
                     </div>
-				</div>
+                </div>
             </div>
-    	</div>
+        </div>
     </div>
 </template>
 
 <script>
-	export default {
-		name: 'My-Table',
-		props: {
-			actions: {
-				type: Array,
-				default() {
-					return [ ];
-				}
-			},
-			columns: {
-				type: Array,
-				default() {
-					return [ ];
-				}
-			},
-			rows: {
-				type: Array,
-				default() {
-					return [ ];
-				}
-			},
-			currentOrderBy: {
-				type: String
-			},
-			currentOrderDesc: {
-				type: Boolean
-			}
-		},
-		data() {
-			return {
-			}
-		},
-		methods: {
-			orderBy(col) {
-				console.log(col);
-				this.$emit('sort', {
-					orderBy: col,
-					orderDesc: false
-				});
-			},
-			getProp(row, prop) {
-				let props = prop.split('.');
-				let val = row;
-				props.forEach((p) => {
-					if (typeof val == 'object') {
-						val = val[p];
-					}
-				});
-				return val;
-			},
-            toggleActions(event) {
-                const parent = event.currentTarget.parentNode;
-                this.$refs.row_actions.forEach((item) => {
-                    if (item !== parent)
-                        item.classList.remove("open")
-                });
-                parent.classList.toggle("open");
+export default {
+    name: 'My-Table',
+    props: {
+        actions: {
+            type: Array,
+            default() {
+                return [ ];
             }
-		}
-	}
+        },
+        columns: {
+            type: Array,
+            default() {
+                return [ ];
+            }
+        },
+        rows: {
+            type: Array,
+            default() {
+                return [ ];
+            }
+        },
+        currentOrderBy: {
+            type: String
+        },
+        currentOrderDesc: {
+            type: Boolean
+        }
+    },
+    data() {
+        return {
+        }
+    },
+    methods: {
+        orderBy(col) {
+            console.log(col);
+            this.$emit('sort', {
+                orderBy: col,
+                orderDesc: false
+            });
+        },
+        getProp(row, prop) {
+            let props = prop.split('.');
+            let val = row;
+            props.forEach((p) => {
+                if (typeof val == 'object') {
+                    val = val[p];
+                }
+            });
+            return val;
+        },
+        toggleActions(event) {
+            const parent = event.currentTarget.parentNode;
+            this.$refs.row_actions.forEach((item) => {
+                if (item !== parent)
+                    item.classList.remove("open")
+            });
+            parent.classList.toggle("open");
+        }
+    }
+}
 </script>
 
 <style lang="less">
-	@import "~mixins";
+    @import "~mixins";
 
-	.list-item {
-	  display: inline-block;
-	  margin-right: 10px;
-	}
-	.list-enter-active, .list-leave-active {
-	  transition: all 0.2s;
-	}
-	.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
-	  opacity: 0;
-	  transform: translateY(30px);
-	}
+    .list-item {
+      display: inline-block;
+      margin-right: 10px;
+    }
+    .list-enter-active, .list-leave-active {
+      transition: all 0.2s;
+    }
+    .list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
+      opacity: 0;
+      transform: translateY(30px);
+    }
 
-	/*--------------------------------------------------------------
-	# Content Tables
-	--------------------------------------------------------------*/
+    /*--------------------------------------------------------------
+    # Content Tables
+    --------------------------------------------------------------*/
 
     .cms_table {
         .table_header{
diff --git a/src/components/scroll-table.vue b/src/components/scroll-table.vue
index 73b2e00..a6d82e5 100644
--- a/src/components/scroll-table.vue
+++ b/src/components/scroll-table.vue
@@ -20,131 +20,131 @@ import MyInput from './my-input.vue';
 import { ObserveVisibility } from 'vue-observe-visibility/dist/vue-observe-visibility';
 
 export default {
-	name: "ScrollTable",
-	directives: {
-		ObserveVisibility
-	},
-	components: {
-		MyTable,
-		MyInput
-	},
-	props: {
+    name: "ScrollTable",
+    directives: {
+        ObserveVisibility
+    },
+    components: {
+        MyTable,
+        MyInput
+    },
+    props: {
         actions: {
             type: Array,
             default() {
                 return [ ];
             }
         },
-		columns: {
-			type: Array,
-			default() {
-				return [ ];
-			}
-		},
-		newRows: {
-			type: Array,
-			default() {
-				return [ ];
-			}
-		},
-		offset: {
-			type: Number,
-			default: 0
-		},
-		limit: {
-			type: Number,
-			default: 10
-		},
-		orderBy: {
-			type: String
-		},
-		orderDesc: {
-			type: Boolean,
-			default: false
-		},
-		search: {
-			type: String
-		},
-		loading: {
-			type: Boolean,
-			default: false
-		},
-		hasMore: {
-			type: Boolean,
-			default: true
-		},
-		handler: {
-			type: Function,
-			default: () => {}
-		}
-	},
-	watch: {
-		newRows(rows) {
-			rows.forEach(row => {
-				this.rowsToPush.push(row);
-			});
-			this.currentOffset += rows.length;
+        columns: {
+            type: Array,
+            default() {
+                return [ ];
+            }
+        },
+        newRows: {
+            type: Array,
+            default() {
+                return [ ];
+            }
+        },
+        offset: {
+            type: Number,
+            default: 0
+        },
+        limit: {
+            type: Number,
+            default: 10
+        },
+        orderBy: {
+            type: String
+        },
+        orderDesc: {
+            type: Boolean,
+            default: false
+        },
+        search: {
+            type: String
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        hasMore: {
+            type: Boolean,
+            default: true
+        },
+        handler: {
+            type: Function,
+            default: () => {}
+        }
+    },
+    watch: {
+        newRows(rows) {
+            rows.forEach(row => {
+                this.rowsToPush.push(row);
+            });
+            this.currentOffset += rows.length;
             this.pushRows(); // for transition
         },
         loading(l) {
-        	if (!l) {
+            if (!l) {
                 // delay after loading for visibility observer
                 setTimeout(() => {
-                	this.loadingDelayed = false;
+                    this.loadingDelayed = false;
                 }, 200);
             } else {
-            	this.loadingDelayed = true;
+                this.loadingDelayed = true;
             }
         }
     },
     data() {
-    	return {
-    		rows: [ ],
-    		rowsToPush: [ ],
-    		currentOffset: this.offset,
-    		currentOrderBy: this.orderBy,
-    		currentOrderDesc: this.orderDesc,
-    		currentSearch: this.search,
-    		loadingDelayed: false,
-    		reloadTriggered: false
-    	}
+        return {
+            rows: [ ],
+            rowsToPush: [ ],
+            currentOffset: this.offset,
+            currentOrderBy: this.orderBy,
+            currentOrderDesc: this.orderDesc,
+            currentSearch: this.search,
+            loadingDelayed: false,
+            reloadTriggered: false
+        }
     },
     methods: {
-    	visibilityChanged(isVisible, entry) {
-    		if (isVisible) {
+        visibilityChanged(isVisible) {
+            if (isVisible) {
                 // infinite scrolling
                 this.reloadTriggered = false;
                 this.handler(this.currentOffset, this.limit, this.currentOrderBy, this.currentOrderDesc, this.currentSearch);
             }
         },
         pushRows() {
-        	let row = this.rowsToPush.shift();
-        	if (row) {
-        		this.rows.push(row);
-        		setTimeout(() => {
-        			this.pushRows();
-        		}, 20);
-        	}
+            let row = this.rowsToPush.shift();
+            if (row) {
+                this.rows.push(row);
+                setTimeout(() => {
+                    this.pushRows();
+                }, 20);
+            }
         },
         clear() {
-        	this.currentOffset = 0;
-        	this.rows = [];
-        	this.rowsToPush = [];
+            this.currentOffset = 0;
+            this.rows = [];
+            this.rowsToPush = [];
         },
         sort(e) {
-        	if (e.orderBy == this.currentOrderBy) {
-        		this.currentOrderDesc = !this.currentOrderDesc;
-        	} else {
-        		this.currentOrderDesc = false;
-        	}
-        	this.currentOrderBy = e.orderBy;
-        	this.reloadTriggered = true;
-        	this.clear();
+            if (e.orderBy == this.currentOrderBy) {
+                this.currentOrderDesc = !this.currentOrderDesc;
+            } else {
+                this.currentOrderDesc = false;
+            }
+            this.currentOrderBy = e.orderBy;
+            this.reloadTriggered = true;
+            this.clear();
         },
         searchChanged(e) {
-        	this.currentSearch = e;
-        	this.reloadTriggered = true;
-        	this.clear();
+            this.currentSearch = e;
+            this.reloadTriggered = true;
+            this.clear();
         }
     }
 }
diff --git a/src/components/topbar.vue b/src/components/topbar.vue
index 499aa2d..e2b63cf 100644
--- a/src/components/topbar.vue
+++ b/src/components/topbar.vue
@@ -1,7 +1,7 @@
 <template>
-	<div class="topbar">
-	    <div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
-	    <div class="name">Meine Website</div>
+    <div class="topbar">
+        <div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
+        <div class="name">Meine Website</div>
 
         <!-- User Profile -->
         <div class="user_profile" ref="user_profile">
@@ -23,7 +23,7 @@
                 </ul>
             </nav>
         </div>
-	</div>
+    </div>
 </template>
 
 <script>
@@ -38,49 +38,49 @@ export default {
 </script>
 
 <style lang="less">
-	@import "../mixins.less";
+    @import "../mixins.less";
 
-	@barHeight: 40px;
+    @barHeight: 40px;
 
     /*--------------------------------------------------------------
     # Topbar (Sitename)
     --------------------------------------------------------------*/
-	.topbar {
-		.clearfix();
-		position: fixed;
-		top: 0;
-		right: 0;
-		left: 0px;
-		background: @cms_bg_light;
-		color: white;
-		height: @barHeight;
-		z-index: 1500;
+    .topbar {
+        .clearfix();
+        position: fixed;
+        top: 0;
+        right: 0;
+        left: 0px;
+        background: @cms_bg_light;
+        color: white;
+        height: @barHeight;
+        z-index: 1500;
 
-		&>.logo {
-			display: block;
-			width: 70px;
-			height:  @barHeight;
-			float: left;
-			position: relative;
+        &>.logo {
+            display: block;
+            width: 70px;
+            height:  @barHeight;
+            float: left;
+            position: relative;
 
-			a {
-				display: block;
-				width: 100%;
-				height: 100%;
+            a {
+                display: block;
+                width: 100%;
+                height: 100%;
 
                 &:hover {
                     background: rgba(40,183,141,0.3);
                 }
-			}
+            }
 
-			img {
-				display: block;
+            img {
+                display: block;
                 width: 30px;
                 height: auto;
                 margin: 0 auto;
                 padding-top: 4px;
-			}
-		}
+            }
+        }
 
         &>.name {
             float: left;
@@ -107,7 +107,7 @@ export default {
         //         background: fade(@cms_brand_primary, 30%);
         //     }
         // }
-	}
+    }
 
     /*--------------------------------------------------------------
     # Topbar (User Profile)
diff --git a/src/views/forms/formdemo.vue b/src/views/forms/formdemo.vue
index 932121b..43331e8 100644
--- a/src/views/forms/formdemo.vue
+++ b/src/views/forms/formdemo.vue
@@ -8,13 +8,12 @@
 								</header>
 								<input type="text" value="" name="" placeholder="Titel hier eintragen">
 							</div>
-								
+
 							<div class="input_holder">
 								<header class="input_header">
 									<label for="">Permalink</label>
 									<div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div>
 								</header>
-									
 								<input type="text" value="" name="" placeholder="Permalink">
 							</div>
 
@@ -23,10 +22,10 @@
 									<label for="">Inhalt</label>
 									<div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div>
 								</header>
-									
+
 								<textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
 							</div>
-							
+
 							<!-- Fieldgroup -->
 							<div class="cms_fieldgroup fieldgroup_open">
 								<header class="cms_fieldgroup_header">Feldergruppe <div class="cms_fieldgroup_trigger"><i class="ion-chevron-down"></i></div></header>
@@ -36,7 +35,7 @@
 											<label for="">Noch ein Feld</label>
 											<!-- <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div> -->
 										</header>
-											
+
 										<input type="text" value="" name="" placeholder="Noch ein Feld">
 									</div>
 
diff --git a/src/views/forms/login.vue b/src/views/forms/login.vue
index cb97121..d7f64b6 100644
--- a/src/views/forms/login.vue
+++ b/src/views/forms/login.vue
@@ -2,7 +2,7 @@
     <div id="login_form">
         <div class="holder">
             <div class="logo">
-                <img src="assets/images/cms_logo_white.png" valid-v-on:foo="bar" alt="">
+                <img src="assets/images/cms_logo_white.png" alt="">
             </div>
 
             <div class="content">
@@ -43,25 +43,25 @@ export default {
                 }
             },
             buttons: [{
-              label: "login",
-              type: "submit"
+                label: "login",
+                type: "submit"
             }]
         }
     },
-  methods: {
-      login(formData) {
-          this.$store.dispatch("login", formData)
-            .then(user => {
-                console.log("---- user login --------");
-                console.log(user);
-                this.$router.go(-1);
-            })
-            .catch(error => {
-                console.log("---- login error -------");
-                console.log(error);
-            });
-      }
-  }
+    methods: {
+        login(formData) {
+            this.$store.dispatch("login", formData)
+                .then(user => {
+                    console.log("---- user login --------");
+                    console.log(user);
+                    this.$router.go(-1);
+                })
+                .catch(error => {
+                    console.log("---- login error -------");
+                    console.log(error);
+                });
+        }
+    }
 }
 </script>
 
diff --git a/src/views/lists/userlist.vue b/src/views/lists/userlist.vue
index ba166f8..77b3f71 100644
--- a/src/views/lists/userlist.vue
+++ b/src/views/lists/userlist.vue
@@ -66,7 +66,7 @@ export default {
             }, {
                 heading: 'Render',
                 render(row) {
-                   return 'ID:' + row.ID;
+                    return 'ID:' + row.ID;
                 }
             }],
             newRows: [ ],