From a9d0f109a9107df0084398cf59b292d20d7b78ca Mon Sep 17 00:00:00 2001
From: Sockenklaus <sockenklaus@gmail.com>
Date: Sun, 7 Nov 2021 15:37:08 +0100
Subject: [PATCH] implemented simpleSearch for Employees/Index.

---
 package-lock.json                             | 24 +++++++
 package.json                                  |  2 +
 .../Employees/EmployeesSimpleSearch.vue       | 64 +++++++++++++++++++
 src/stores/employees.ts                       | 36 +++++++----
 src/views/Employees/Details.vue               |  1 -
 src/views/Employees/Index.vue                 | 23 +++++--
 6 files changed, 128 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Employees/EmployeesSimpleSearch.vue

diff --git a/package-lock.json b/package-lock.json
index 2378c7f..a5c5039 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "bootstrap": "^5.1.3",
         "bootstrap-icons": "^1.6.0",
         "date-fns": "^2.25.0",
+        "lodash": "^4.17.21",
         "pinia": "^2.0.0-rc.13",
         "pinia-plugin-persist": "^0.0.92",
         "uuid": "^8.3.2",
@@ -26,6 +27,7 @@
       },
       "devDependencies": {
         "@types/bootstrap": "^5.1.6",
+        "@types/lodash": "^4.14.176",
         "@types/node": "^16.11.1",
         "@types/uuid": "^8.3.1",
         "@vitejs/plugin-vue": "^1.9.3",
@@ -122,6 +124,12 @@
         "@types/sizzle": "*"
       }
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.176",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.176.tgz",
+      "integrity": "sha512-xZmuPTa3rlZoIbtDUyJKZQimJV3bxCmzMIO2c9Pz9afyDro6kr7R79GwcB6mRhuoPmV2p1Vb66WOJH7F886WKQ==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "16.11.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.6.tgz",
@@ -1117,6 +1125,11 @@
         "promise": "^7.0.1"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -1925,6 +1938,12 @@
         "@types/sizzle": "*"
       }
     },
+    "@types/lodash": {
+      "version": "4.14.176",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.176.tgz",
+      "integrity": "sha512-xZmuPTa3rlZoIbtDUyJKZQimJV3bxCmzMIO2c9Pz9afyDro6kr7R79GwcB6mRhuoPmV2p1Vb66WOJH7F886WKQ==",
+      "dev": true
+    },
     "@types/node": {
       "version": "16.11.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.6.tgz",
@@ -2635,6 +2654,11 @@
         "promise": "^7.0.1"
       }
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
diff --git a/package.json b/package.json
index 8302a46..5083b8d 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "bootstrap": "^5.1.3",
     "bootstrap-icons": "^1.6.0",
     "date-fns": "^2.25.0",
+    "lodash": "^4.17.21",
     "pinia": "^2.0.0-rc.13",
     "pinia-plugin-persist": "^0.0.92",
     "uuid": "^8.3.2",
@@ -26,6 +27,7 @@
   },
   "devDependencies": {
     "@types/bootstrap": "^5.1.6",
+    "@types/lodash": "^4.14.176",
     "@types/node": "^16.11.1",
     "@types/uuid": "^8.3.1",
     "@vitejs/plugin-vue": "^1.9.3",
diff --git a/src/components/Employees/EmployeesSimpleSearch.vue b/src/components/Employees/EmployeesSimpleSearch.vue
new file mode 100644
index 0000000..53cc293
--- /dev/null
+++ b/src/components/Employees/EmployeesSimpleSearch.vue
@@ -0,0 +1,64 @@
+<template>
+<div class="input-group">
+    <input 
+        type="text" 
+        class="form-control" 
+        v-model="searchQuery" 
+        placeholder="Suche nach..."
+        @keyup="search"
+    >
+    <button aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside" type="button" class="btn btn-outline-secondary dropdown-toggle">
+        Suche in...
+    </button>
+    <ul class="dropdown-menu">
+        <li v-for="(item, index) in unionColumns" :key="item">
+            <label class="dropdown-item form-check">
+                <input type="checkbox" :value="item" :id="'checkBox'+item" v-model="checkedColumns" class="form-check-input">
+                {{item}}
+            </label>
+        </li>
+    </ul>
+</div>
+
+{{ unionColumns }}
+
+</template>
+
+<script setup lang="ts">
+
+import { ref, computed} from 'vue';
+import { storeToRefs } from 'pinia'
+import { useEmployees } from '@/stores/employees';
+import { union } from 'lodash';
+
+const searchQuery = ref('')
+const checkedColumns = ref([])
+const store = useEmployees()
+const { columns, simple_search } = storeToRefs(store)
+
+const queryString = computed(() => {
+    return searchQuery.value + '(' + checkedColumns.value.join(',') + ')'
+})
+
+const unionColumns = computed(() => {
+    return union(columns.value, checkedColumns.value)
+})
+
+async function search() {
+    simple_search.value = queryString.value
+    await store.fetchFromApi()
+}
+
+</script>
+
+<style scoped>
+
+.form-check {
+    padding-left: 20px;
+}
+.form-check input {
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/stores/employees.ts b/src/stores/employees.ts
index e2df62a..f8580fb 100644
--- a/src/stores/employees.ts
+++ b/src/stores/employees.ts
@@ -2,17 +2,15 @@ import { defineStore } from 'pinia'
 import { useUser } from '@/stores/user'
 import axios from '@/axios'
 
-import emplJSON from '../sample-data/employees.json'
-
 const user = useUser()
 
 export const useEmployees = defineStore('employees', {
     state: () => {
         return { 
             /**
-            *   @type {}[]
+            *   @type any[]
              */
-            rows: Array<Object>(),
+            rows: Array<any>(),
 
             meta: {
                 current_page: NaN,
@@ -22,7 +20,12 @@ export const useEmployees = defineStore('employees', {
                 total: NaN
             },
 
-            columns: Array<string>()
+            columns: Array<string>(),
+
+            limit: 10,
+            page: 1,
+            sort_by: '',
+            simple_search: ''
         }
     },
 
@@ -33,28 +36,29 @@ export const useEmployees = defineStore('employees', {
         *   @param: {string} sortBy         - QueryString: sort_by=asc(col1),desc(col2),...
         *   @param: {string} simpleSearch   - QueryString: simple_search=query(col1,col2,...)
         **/
-        async fetchFromApi(limit?: number, page?:number, sort_by?: string, simple_search?: string) {
+        async fetchFromApi() {
             try {
-                const data : any= (await axios.get(
+                
+                const data : any = (await axios.get(
                     '/employees',
                     {
                         params: {
-                            limit,
-                            page,
-                            sort_by,
-                            simple_search
+                            limit: this.limit,
+                            page: this.page,
+                            sort_by: this.sort_by,
+                            simple_search: this.simple_search
                         },
                         headers: user.header
                     }
                 )).data
 
-                Object.assign(this.meta, data?.meta)
-                Object.assign(this.rows, data?.data)
+                Object.assign(this.meta, data.meta)
+                this.rows = data.data.map(e => e)
 
                 this.columns = this.fetchColumns()
             }
             catch(err) {
-
+                console.log(err)
             }
         },
 
@@ -63,6 +67,10 @@ export const useEmployees = defineStore('employees', {
                 return Object.keys(this.rows[0])
             }
             return []
+        },
+
+        watch(){
+
         }
     }
 })
\ No newline at end of file
diff --git a/src/views/Employees/Details.vue b/src/views/Employees/Details.vue
index 7dc3003..e94f635 100644
--- a/src/views/Employees/Details.vue
+++ b/src/views/Employees/Details.vue
@@ -1,5 +1,4 @@
 <template>
-
 <form class="text-start">
     <VProfileControls class="mb-5" :isActive="editEmployee || createUser" @save="onUpdateEmployee" @toggleEdit="onToggleEdit" />
 
diff --git a/src/views/Employees/Index.vue b/src/views/Employees/Index.vue
index fb2d23b..0c90f76 100644
--- a/src/views/Employees/Index.vue
+++ b/src/views/Employees/Index.vue
@@ -1,6 +1,8 @@
 <template>
 
-<table class="table table-hover">
+<EmployeesSimpleSearch />
+
+<table class="table table-hover mt-3">
     <thead>
         <tr>
             <th 
@@ -26,7 +28,8 @@
 
 <script setup lang="ts">
 
-import { onMounted, reactive, watch, computed } from 'vue'
+import EmployeesSimpleSearch from '@/components/Employees/EmployeesSimpleSearch.vue';
+import { onMounted, reactive, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useEmployees } from '@/stores/employees'
@@ -40,12 +43,8 @@ const sort_by = reactive({
     column: 'id'
 })
 
-watch(sort_by, () => {
-    store.fetchFromApi(undefined, undefined, (sort_by.asc ? "asc(" : "desc(")+sort_by.column+")")
-})
-
 onMounted(() => {
-    store.fetchFromApi(undefined, undefined, (sort_by.asc ? "asc(" : "desc(")+sort_by.column+")")
+    store.fetchFromApi()
 })
 
 function colIsSelected(col : string) {
@@ -57,6 +56,8 @@ function onSortBy(col : string) {
     else sort_by.asc = !sort_by.asc
 
     sort_by.column = col
+    store.sort_by = (sort_by.asc ? 'asc(' : 'desc(') + sort_by.column + ')'
+    store.fetchFromApi() 
 }
 
 const iconSort = computed(() => {
@@ -66,6 +67,13 @@ const iconSort = computed(() => {
 </script>
 
 <style scoped>
+table {
+    /* table-layout: fixed; */
+}
+
+table thead tr:first-child th:first-child {
+    width: 51px;
+}
 
 table th {
     -ms-user-select: none;
@@ -75,6 +83,7 @@ table th {
     -khtml-user-select: none;
     user-select: none;
     cursor: pointer;
+    
 }
 
 tr {