From 598d29803af01ad99e8a397d24f926572501e489 Mon Sep 17 00:00:00 2001
From: Sockenklaus <sockenklaus@gmail.com>
Date: Sun, 7 Nov 2021 22:44:49 +0100
Subject: [PATCH] Started implementing vPaginator

---
 .../Employees/EmployeesSimpleSearch.vue       |  5 +--
 src/components/VPaginator.vue                 | 33 +++++++++++++++++++
 src/views/Employees/Index.vue                 |  8 +++--
 3 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 src/components/VPaginator.vue

diff --git a/src/components/Employees/EmployeesSimpleSearch.vue b/src/components/Employees/EmployeesSimpleSearch.vue
index 53cc293..6ac702c 100644
--- a/src/components/Employees/EmployeesSimpleSearch.vue
+++ b/src/components/Employees/EmployeesSimpleSearch.vue
@@ -17,11 +17,12 @@
                 {{item}}
             </label>
         </li>
+        <li v-show="unionColumns.length === 0">
+            <h6 class="dropdown-header">Keine Spalten auswählbar.</h6>
+        </li>
     </ul>
 </div>
 
-{{ unionColumns }}
-
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/VPaginator.vue b/src/components/VPaginator.vue
new file mode 100644
index 0000000..0cd5ae4
--- /dev/null
+++ b/src/components/VPaginator.vue
@@ -0,0 +1,33 @@
+<template>
+
+<nav aria-label="Page navigation">
+    <ul class="pagination">
+        <li class="page-item">
+            <button class="page-link text-secondary">
+                <i class="bi bi-arrow-left" />
+                Zurück
+            </button>
+        </li>
+
+        <li class="page-item">
+            <button class="page-link text-secondary">
+                Weiter
+                <i class="bi bi-arrow-right" />
+            </button>
+        </li>
+    </ul>
+</nav>
+
+</template>
+
+<script setup lang="ts">
+
+import { useEmployees } from '@/stores/employees'
+
+const store = useEmployees()
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Employees/Index.vue b/src/views/Employees/Index.vue
index 0c90f76..7e05907 100644
--- a/src/views/Employees/Index.vue
+++ b/src/views/Employees/Index.vue
@@ -24,11 +24,16 @@
 
 </table>
 
+<h5 v-show="rows.length === 0" class="text-muted">Keine Daten anzuzeigen...</h5>
+
+<VPaginator />
+
 </template>
 
 <script setup lang="ts">
 
 import EmployeesSimpleSearch from '@/components/Employees/EmployeesSimpleSearch.vue';
+import VPaginator from '@/components/VPaginator.vue';
 import { onMounted, reactive, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
@@ -67,9 +72,6 @@ const iconSort = computed(() => {
 </script>
 
 <style scoped>
-table {
-    /* table-layout: fixed; */
-}
 
 table thead tr:first-child th:first-child {
     width: 51px;