olli
3e30d958b3
- Added PasswordResetController to handle password reset requests and confirmations. - Created views for password reset request, confirmation, and invalid link scenarios. - Implemented email sending for password reset requests with security measures. - Added form validation for password reset confirmation, including password strength requirements. - Enhanced user experience with success and error messages during the password reset process.
133 lines
3.6 KiB
Vue
133 lines
3.6 KiB
Vue
<template>
|
|
<Dialog
|
|
:visible="visible"
|
|
@update:visible="$emit('update:visible', $event)"
|
|
header="Spalten anpassen"
|
|
:modal="true"
|
|
:style="{ width: '600px' }"
|
|
>
|
|
<div class="flex flex-col gap-3">
|
|
<p class="text-500 mb-2">Wählen Sie die anzuzeigenden Spalten aus und ziehen Sie sie, um die Reihenfolge zu ändern:</p>
|
|
|
|
<!-- Freeze first column option -->
|
|
<div class="flex items-center gap-2 p-3 bg-surface-50 dark:bg-surface-800 border rounded-md">
|
|
<i class="pi pi-lock text-500"></i>
|
|
<Checkbox
|
|
inputId="freeze-first"
|
|
v-model="localFreezeFirst"
|
|
:binary="true"
|
|
/>
|
|
<label for="freeze-first" class="cursor-pointer flex-1">
|
|
Erste Spalte beim horizontalen Scrollen fixieren
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<div
|
|
v-for="(column, index) in localColumns"
|
|
:key="column.key"
|
|
class="flex items-center gap-2 p-3 border rounded-md hover-row cursor-move"
|
|
draggable="true"
|
|
@dragstart="onDragStart(index)"
|
|
@dragover.prevent
|
|
@drop="onDrop(index)"
|
|
>
|
|
<i class="pi pi-bars text-500"></i>
|
|
<Checkbox
|
|
:inputId="'col-' + column.key"
|
|
v-model="localVisibility[column.key]"
|
|
:binary="true"
|
|
/>
|
|
<label :for="'col-' + column.key" class="cursor-pointer flex-1">{{ column.label }}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<Button label="Abbrechen" outlined @click="cancel" />
|
|
<Button label="Speichern" @click="save" />
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue'
|
|
import Dialog from 'primevue/dialog'
|
|
import Button from 'primevue/button'
|
|
import Checkbox from 'primevue/checkbox'
|
|
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
columns: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
visibleColumns: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
freezeFirstColumn: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:visible', 'update:columns', 'update:visibleColumns', 'update:freezeFirstColumn', 'save'])
|
|
|
|
// Local copies for editing
|
|
const localColumns = ref([...props.columns])
|
|
const localVisibility = ref({ ...props.visibleColumns })
|
|
const localFreezeFirst = ref(props.freezeFirstColumn)
|
|
|
|
// Watch for prop changes
|
|
watch(() => props.columns, (newVal) => {
|
|
localColumns.value = [...newVal]
|
|
}, { deep: true })
|
|
|
|
watch(() => props.visibleColumns, (newVal) => {
|
|
localVisibility.value = { ...newVal }
|
|
}, { deep: true })
|
|
|
|
watch(() => props.freezeFirstColumn, (newVal) => {
|
|
localFreezeFirst.value = newVal
|
|
})
|
|
|
|
// Drag and drop for column reordering
|
|
let draggedIndex = null
|
|
|
|
const onDragStart = (index) => {
|
|
draggedIndex = index
|
|
}
|
|
|
|
const onDrop = (dropIndex) => {
|
|
if (draggedIndex === null || draggedIndex === dropIndex) return
|
|
|
|
const columns = [...localColumns.value]
|
|
const draggedItem = columns[draggedIndex]
|
|
|
|
columns.splice(draggedIndex, 1)
|
|
columns.splice(dropIndex, 0, draggedItem)
|
|
|
|
localColumns.value = columns
|
|
draggedIndex = null
|
|
}
|
|
|
|
const save = () => {
|
|
emit('update:columns', localColumns.value)
|
|
emit('update:visibleColumns', localVisibility.value)
|
|
emit('update:freezeFirstColumn', localFreezeFirst.value)
|
|
emit('save')
|
|
}
|
|
|
|
const cancel = () => {
|
|
// Reset local changes
|
|
localColumns.value = [...props.columns]
|
|
localVisibility.value = { ...props.visibleColumns }
|
|
localFreezeFirst.value = props.freezeFirstColumn
|
|
emit('update:visible', false)
|
|
}
|
|
</script>
|