demo form

conf/init.json

@@ -25,6 +25,18 @@
             "icon": "icon-contacts",
             "content": "<userlist></userlist>"
         },
+        {
+            "name": "Domainlist",
+            "to": "/domainlist",
+            "icon": "icon-contacts",
+            "content": "<domainlist></domainlist>"
+        },
+        {
+            "name": "FormDemo",
+            "to": "/formdemo",
+            "icon": "icon-contacts",
+            "content": "<form-demo></form-demo>"
+        },
         {
             "name": "Logout",
             "to": "/logout",

src/components/my-input.vue

@@ -1,9 +1,10 @@
 <template>
     <div class="input_holder">
-        <div class="input_header" v-if="label">
-            <label :for="name">{{ label }}</label>
-        </div>
+        <div class="input_header" v-if="label || description">
+            <label :for="name" v-if="label">{{ label }}</label>
             <div class="input_description" v-if="description">{{ description }}</div>
+        </div>
+        
         <input type="text" v-if="type == 'text'"
             v-model="currentValue"
             :name="name"

src/views/forms/form-demo.vue

@@ -1,13 +1,10 @@
-<div class="cms_content_form">
+<template>
+			<div class="cms_content_form">
 				<form action="">
 					<div class="row">
 						<div class="tab8">
-							<div class="input_holder">
-								<header class="input_header">
-									<label for="">Titel</label>
-								</header>
-								<input type="text" value="" name="" placeholder="Titel hier eintragen">
-							</div>
+								
+							<my-input type="text" value="" v-model="titel" placeholder="Titel hier eintragen" label="Titel" description="Text .."></my-input>
 							
 							<div class="input_holder">
 								<header class="input_header">
@@ -87,3 +84,23 @@
 					
 				</form>
 			</div>
+
+</template>
+
+
+
+<script>
+import MyInput from "components/my-input.vue";
+
+export default {
+    name: "DemoForm",
+    components: {
+        MyInput
+    },
+    data() {
+        return {
+        	titel: "plapla"
+        }
+    }
+}
+</script>

src/views/lists/domainlist.vue

@@ -0,0 +1,85 @@
+<template>
+    <div class="Domainlist">
+        <h1>Domainlist</h1>
+        <scroll-table :actions="actions" :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="Name" :orderDesc="false" :limit="50"></scroll-table>
+    </div>
+</template>
+
+<script>
+import ScrollTable from '../../components/scroll-table.vue';
+
+export default {
+    name: "Domainlist",
+    components: {
+        ScrollTable
+    },
+    data() {
+        return {
+            actions: [{
+                title: 'Edit',
+                icon: 'icon-pencil',
+                action(row) {
+                    console.log("yay edit", row);
+                }
+            }, {
+                title: 'Duplicate',
+                icon: 'icon-docs',
+                action(row) {
+                    console.log("yay duplicate", row);
+                }
+            }, {
+                title: 'Hide',
+                icon: 'icon-eye-off',
+                action(row) {
+                    console.log("yay hide", row);
+                }
+            }],
+            columns: [{
+                heading: 'ID',
+                prop: 'ID',
+                orderBy: 'id',
+                align: 'right'
+            }, {
+                heading: 'TLD',
+                prop: 'TLD',
+                orderBy: 'tld',
+                align: 'left'
+            }, {
+                heading: 'Domain',
+                prop: 'Name',
+                orderBy: 'name'
+            }],
+            newRows: [ ],
+            hasMore: true,
+            loading: false
+        }
+    },
+    methods: {
+        more(offset, limit, orderBy, orderDesc, search) {
+            this.loading = true;
+            this.$store.dispatch('apiRequest', {
+                endpoint: 'domains',
+                params: {
+                    start: offset,
+                    length: limit,
+                    orderBy,
+                    orderDesc,
+                    search
+                }
+            })
+                .then(rows => {
+                    this.hasMore = (rows.length >= limit);
+                    this.newRows = rows;
+                    this.loading = false;
+                })
+                .catch(error => {
+                    this.loading = false;
+                    this.hasMore = false;
+
+                    console.log(error);
+                });
+
+        }
+    }
+}
+</script>

src/views/lists/userlist.vue

@@ -66,7 +66,7 @@ export default {
             }, {
                 heading: 'Render',
                 render(row) {
-                    return 'ID:' + row.ID;
+                    return '<b>ID:</b>' + row.ID;
                 }
             }],
             newRows: [ ],

src/views/views.js

@@ -2,10 +2,14 @@ import Dashboard from './dashboard.vue';
 import LoginForm from './forms/login.vue';
 import Logout from './forms/logout.vue';
 import Userlist from './lists/userlist.vue';
+import Domainlist from './lists/domainlist.vue';
+import FormDemo from './forms/form-demo.vue';
 
 export default {
     Dashboard,
     LoginForm,
     Logout,
-    Userlist
+    Userlist,
+    Domainlist,
+    FormDemo
 }