socrates/duty-schedule-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

implemented simpleSearch for Employees/Index.

Browse Source
This commit is contained in:
Sockenklaus
2021-11-07 15:37:08 +01:00
parent e018db9e0a
commit a9d0f109a9
6 changed files with 128 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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",

64
src/components/Employees/EmployeesSimpleSearch.vue Normal file
View File

@@ -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>

34
src/stores/employees.ts
View File

@@ -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(
'/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(){
}
}
})

1
src/views/Employees/Details.vue
View File

@@ -1,5 +1,4 @@
<template>
<form class="text-start">
<VProfileControls class="mb-5" :isActive="editEmployee || createUser" @save="onUpdateEmployee" @toggleEdit="onToggleEdit" />

23
src/views/Employees/Index.vue
View File

@@ -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 {