diff --git a/src/components/Employees/IndexSettingsModal.vue b/src/components/Employees/IndexSettingsModal.vue
index b86dc77..81682ea 100644
--- a/src/components/Employees/IndexSettingsModal.vue
+++ b/src/components/Employees/IndexSettingsModal.vue
@@ -39,9 +39,16 @@
-
+
+
@@ -77,13 +84,21 @@ const clickedLeft = ref('')
const clickedRight = ref('')
function moveLeft() {
- leftColumn.value.push(clickedRight.value)
- _pull(rightColumn.value, clickedRight.value)
+ if(clickedRight.value){
+ let index = rightColumn.value.indexOf(clickedRight.value)
+ leftColumn.value.push(clickedRight.value)
+ _pull(rightColumn.value, clickedRight.value)
+ clickedRight.value = rightColumn.value[index <= rightColumn.value.length ? index : rightColumn.value.length]
+ }
}
function moveRight() {
- rightColumn.value.push(clickedLeft.value)
- _pull(leftColumn.value, clickedLeft.value)
+ if(clickedLeft.value){
+ let index = leftColumn.value.indexOf(clickedLeft.value)
+ rightColumn.value.push(clickedLeft.value)
+ _pull(leftColumn.value, clickedLeft.value)
+ clickedLeft.value = leftColumn.value[index <= leftColumn.value.length ? index : leftColumn.value.length]
+ }
}
function colUp(clicked : string, array : string[]){
diff --git a/src/components/Schedule/Schedule.vue b/src/components/Schedule/Schedule.vue
index afc89e7..c45ed80 100644
--- a/src/components/Schedule/Schedule.vue
+++ b/src/components/Schedule/Schedule.vue
@@ -2,7 +2,7 @@
AddEmployeeModal(
- :searchData="store.rows"
+ :searchData="store.state.rows"
:searchFields="['first_name', 'last_name']"
:searchRow="addEmployeeRow"
:modalId="modalId"
diff --git a/src/components/VProfileControls.vue b/src/components/VProfileControls.vue
index 7bc6a51..2a69927 100644
--- a/src/components/VProfileControls.vue
+++ b/src/components/VProfileControls.vue
@@ -65,8 +65,7 @@ function onCancel() {
transition: all .1s ease-in-out
}
- &enter-from,
- &leave-to {
+ &enter-from {
@include animation-target(15px)
}
diff --git a/src/stores/employees.ts b/src/stores/employees.ts
index 8f25376..7722543 100644
--- a/src/stores/employees.ts
+++ b/src/stores/employees.ts
@@ -3,46 +3,48 @@ import { useUser } from '@/stores/user'
import axios from '@/axios'
import _cloneDeep from 'lodash/cloneDeep'
import _assign from 'lodash/assign'
-import { reactive, watch, ref, onMounted } from 'vue'
+import { reactive, watch, onMounted } from 'vue'
export default defineStore('employees', () => {
const user = useUser()
- const rows = reactive(Array())
- const columns = reactive(Array())
+ const state = reactive({
+ rows: Array(),
+ columns: Array(),
- const meta = reactive({
- current_page: NaN,
- first_page: NaN,
- last_page: NaN,
- per_page: NaN,
- total: NaN
+ meta : {
+ current_page: NaN,
+ first_page: NaN,
+ last_page: NaN,
+ per_page: NaN,
+ total: NaN
+ },
+
+ limit: 10,
+ page: 1,
+ sort_by: '',
+ simple_search: ''
})
- const limit = ref(10)
- const page = ref(1)
- const sort_by = ref('')
- const simple_search = ref('')
-
async function fetchFromApi() {
try {
const data : any = (await axios.get(
'/employees',
{
params: {
- limit: limit.value,
- page: page.value,
- sort_by: sort_by.value,
- simple_search: simple_search.value
+ limit: state.limit,
+ page: state.page,
+ sort_by: state.sort_by,
+ simple_search: state.simple_search
},
headers: user.header
}
)).data
- _assign(meta, data.meta)
- _assign(rows, data.data)
- _assign(columns, fetchColumns())
- console.log("Employees: Fetched from api")
+ Object.assign(state.meta, data.meta)
+ state.rows = _cloneDeep(data.data)
+
+ _assign(state.columns, fetchColumns())
}
catch(err) {
console.log(err)
@@ -50,29 +52,29 @@ export default defineStore('employees', () => {
}
function fetchColumns() : string[] {
- if(rows[0]){
- return Object.keys(rows[0])
+ if(state.rows[0]){
+ return Object.keys(state.rows[0])
}
return []
}
function setLimit(pLimit : number) {
- limit.value = pLimit
+ state.limit = pLimit
}
function setSortBy(pSortBy : string) {
- sort_by.value = pSortBy
+ state.sort_by = pSortBy
}
function setSimpleSearch(pSimpleSearch : string) {
- simple_search.value = pSimpleSearch
+ state.simple_search = pSimpleSearch
}
function setPage(pPage : number) {
- page.value = pPage
+ state.page = pPage
}
- watch([limit, sort_by, simple_search, page], () => {
+ watch(() => [state.limit, state.sort_by, state.simple_search, state.page], () => {
fetchFromApi()
})
@@ -81,8 +83,7 @@ export default defineStore('employees', () => {
})
return {
- rows, columns, meta,
- limit, page, sort_by, simple_search,
+ state,
fetchFromApi,
setLimit,
setSortBy,
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 129ccc9..605d61c 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -1,6 +1,4 @@
import { defineStore } from "pinia";
-import type { StateTree } from 'pinia'
-import { useEmployees } from "./employees";
import { useUser } from "./user";
import axios from '@/axios'
import _clone from "lodash/clone";
diff --git a/src/views/Employees/Index.vue b/src/views/Employees/Index.vue
index e5153c9..b99b762 100644
--- a/src/views/Employees/Index.vue
+++ b/src/views/Employees/Index.vue
@@ -1,5 +1,6 @@
+
-
-
-
-
-
- {{ col }}
-
-
-
-
-
+ {{ col }}
+
+
+
|
-
+
|
{{ employee[col] }}
|
+
+
+ |
-Keine Daten anzuzeigen...
+Keine Daten anzuzeigen...
@@ -85,10 +82,10 @@ onMounted(async () =>{
})
const columnsNotSelected = computed(() => {
- return _difference(store.columns, settings.value.employeesIndexColumnsSelected)
+ return _difference(store.state.columns, settings.value.employeesIndexColumnsSelected)
})
-function styleColSelected(col : string) : {visibility: 'visible' | 'hidden'} {
+function styleColSelected(col : string) : {visibility: 'visible' | 'hidden'} {
return {
visibility: sort_by.column === col ? 'visible' : 'hidden'
}
@@ -97,7 +94,6 @@ function styleColSelected(col : string) : {visibility: 'visible' | 'hidden'} {
function updateColumnsSelected(arr: string[]) {
settings.value.employeesIndexColumnsSelected = arr
settingsStore.persist()
-
}
function onSortBy(col : string) {
@@ -105,7 +101,7 @@ 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.state.sort_by = (sort_by.asc ? 'asc(' : 'desc(') + sort_by.column + ')'
}
const iconSort = computed(() => {