kincses/service-finder
1
0
Fork 0
Code Issues 52 Pull Requests Packages Projects 2 Releases Wiki Activity

admin_szolgáltatók_

Browse Source
This commit is contained in:
Roo
2026-07-01 02:27:38 +00:00
parent 189cbfd7ca
commit 6e627d0ebe
491 changed files with 20965 additions and 9703 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
frontend_admin/pages/gamification/point-rules.vue
View File

@@ -18,7 +18,7 @@
<!-- Error State -->
<div v-else-if="error" class="bg-rose-500/10 border border-rose-500/30 rounded-xl p-6 mb-8">
<p class="text-rose-400">{{ t('gamification.point_rules.load_error') }}</p>
<p class="text-rose-400">{{ t('gamification.point_rules.error') }}</p>
<button @click="fetchRules" class="mt-3 text-sm text-rose-300 hover:text-rose-200 underline">{{ t('gamification.point_rules.retry') }}</button>
</div>
@@ -29,7 +29,7 @@
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
{{ t('gamification.point_rules.create_btn') }}
{{ t('gamification.point_rules.create') }}
</button>
</div>
@@ -38,31 +38,117 @@
<table class="w-full">
<thead>
<tr class="border-b border-slate-700">
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('gamification.point_rules.col_id') }}</th>
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('gamification.point_rules.col_action_key') }}</th>
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('gamification.point_rules.col_points') }}</th>
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('gamification.point_rules.col_description') }}</th>
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('gamification.point_rules.col_status') }}</th>
<th class="text-right px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('gamification.point_rules.col_actions') }}</th>
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('gamification.point_rules.id') }}</th>
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('gamification.point_rules.action_key') }}</th>
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('gamification.point_rules.points') }}</th>
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('gamification.point_rules.description') }}</th>
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('gamification.point_rules.status') }}</th>
<th class="text-right px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('gamification.point_rules.actions') }}</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-700/50">
<tr v-for="rule in rules" :key="rule.id" class="hover:bg-slate-700/30 transition">
<td class="px-6 py-4 text-sm text-slate-400">{{ rule.id }}</td>
<!-- Action Key (inline editable) -->
<td class="px-6 py-4">
<code class="text-sm font-mono text-amber-300 bg-amber-500/10 px-2 py-0.5 rounded">{{ rule.action_key }}</code>
<template v-if="isEditing(rule.id, 'action_key')">
<input
ref="inlineInputRef"
v-model="editValue"
type="text"
maxlength="100"
class="w-full px-2 py-1 bg-slate-700 border border-amber-500 rounded text-sm text-white focus:outline-none focus:ring-2 focus:ring-amber-500/50"
@keyup.enter="saveEdit(rule, 'action_key')"
@keyup.escape="cancelEdit()"
@blur="saveEdit(rule, 'action_key')"
@click.stop
/>
</template>
<template v-else>
<code
class="text-sm font-mono text-amber-300 bg-amber-500/10 px-2 py-0.5 rounded cursor-pointer hover:bg-amber-500/20 transition"
@click="startEdit(rule, 'action_key')"
>{{ rule.action_key }}</code>
</template>
</td>
<!-- Points (inline editable) -->
<td class="px-6 py-4">
<span class="text-sm font-semibold" :class="rule.points >= 0 ? 'text-emerald-400' : 'text-rose-400'">
{{ rule.points >= 0 ? '+' : '' }}{{ rule.points }}
</span>
<template v-if="isEditing(rule.id, 'points')">
<input
ref="inlineInputRef"
v-model.number="editValue"
type="number"
min="-10000"
max="10000"
class="w-24 px-2 py-1 bg-slate-700 border border-amber-500 rounded text-sm text-white focus:outline-none focus:ring-2 focus:ring-amber-500/50"
@keyup.enter="saveEdit(rule, 'points')"
@keyup.escape="cancelEdit()"
@blur="saveEdit(rule, 'points')"
@click.stop
/>
</template>
<template v-else>
<span
class="text-sm font-semibold cursor-pointer hover:opacity-80 transition"
:class="rule.points >= 0 ? 'text-emerald-400' : 'text-rose-400'"
@click="startEdit(rule, 'points')"
>
{{ rule.points >= 0 ? '+' : '' }}{{ rule.points }}
</span>
</template>
</td>
<td class="px-6 py-4 text-sm text-slate-300 max-w-xs truncate">{{ rule.description || '—' }}</td>
<!-- Description (inline editable) -->
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" :class="rule.is_active ? 'bg-emerald-500/10 text-emerald-400' : 'bg-slate-500/10 text-slate-400'">
{{ rule.is_active ? t('gamification.point_rules.active') : t('gamification.point_rules.inactive') }}
</span>
<template v-if="isEditing(rule.id, 'description')">
<input
ref="inlineInputRef"
v-model="editValue"
type="text"
class="w-full px-2 py-1 bg-slate-700 border border-amber-500 rounded text-sm text-white focus:outline-none focus:ring-2 focus:ring-amber-500/50"
@keyup.enter="saveEdit(rule, 'description')"
@keyup.escape="cancelEdit()"
@blur="saveEdit(rule, 'description')"
@click.stop
/>
</template>
<template v-else>
<span
class="text-sm text-slate-300 max-w-xs truncate block cursor-pointer hover:text-white transition"
@click="startEdit(rule, 'description')"
>{{ rule.description || '—' }}</span>
</template>
</td>
<!-- Status (inline toggle) -->
<td class="px-6 py-4">
<template v-if="isEditing(rule.id, 'is_active')">
<div class="flex items-center gap-2" @click.stop>
<button
@click="editValue = true; saveEdit(rule, 'is_active')"
class="px-2 py-1 text-xs font-medium rounded transition"
:class="editValue ? 'bg-emerald-500/20 text-emerald-400 ring-1 ring-emerald-500/50' : 'bg-slate-700 text-slate-400 hover:bg-slate-600'"
>{{ t('gamification.point_rules.active') }}</button>
<button
@click="editValue = false; saveEdit(rule, 'is_active')"
class="px-2 py-1 text-xs font-medium rounded transition"
:class="!editValue ? 'bg-rose-500/20 text-rose-400 ring-1 ring-rose-500/50' : 'bg-slate-700 text-slate-400 hover:bg-slate-600'"
>{{ t('gamification.point_rules.inactive') }}</button>
</div>
</template>
<template v-else>
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium cursor-pointer hover:ring-2 hover:ring-amber-500/50 transition"
:class="rule.is_active ? 'bg-emerald-500/10 text-emerald-400' : 'bg-slate-500/10 text-slate-400'"
@click="startEdit(rule, 'is_active')"
>
{{ rule.is_active ? t('gamification.point_rules.active') : t('gamification.point_rules.inactive') }}
</span>
</template>
</td>
<td class="px-6 py-4 text-right">
<div class="flex items-center justify-end gap-2">
<button @click="openEditModal(rule)" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-700 transition" :title="t('gamification.point_rules.edit')">
@@ -80,7 +166,7 @@
</tr>
<tr v-if="rules.length === 0">
<td colspan="6" class="px-6 py-12 text-center text-sm text-slate-500">
{{ t('gamification.point_rules.empty') }}
{{ t('gamification.point_rules.no_items') }}
</td>
</tr>
</tbody>
@@ -140,7 +226,7 @@
id="is_active"
class="w-4 h-4 rounded bg-slate-700 border-slate-600 text-amber-500 focus:ring-amber-500/50"
/>
<label for="is_active" class="text-sm text-slate-300">{{ t('gamification.point_rules.active_label') }}</label>
<label for="is_active" class="text-sm text-slate-300">{{ t('gamification.point_rules.is_active') }}</label>
</div>
<!-- Error Message -->
@@ -165,9 +251,9 @@
<!-- Delete Confirmation Modal -->
<div v-if="showDeleteModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showDeleteModal = false">
<div class="bg-slate-800 rounded-xl border border-slate-700 p-6 w-full max-w-md mx-4 shadow-2xl">
<h2 class="text-lg font-semibold text-white mb-2">{{ t('gamification.point_rules.delete_confirm_title') }}</h2>
<h2 class="text-lg font-semibold text-white mb-2">{{ t('gamification.point_rules.delete_title') }}</h2>
<p class="text-sm text-slate-400 mb-6">
{{ t('gamification.point_rules.delete_confirm_body', { action_key: deletingRule?.action_key }) }}
{{ t('gamification.point_rules.delete_confirm', { name: deletingRule?.action_key }) }}
</p>
<div class="flex justify-end gap-3">
<button @click="showDeleteModal = false" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition">{{ t('gamification.point_rules.cancel') }}</button>
@@ -189,6 +275,8 @@
</template>
<script setup lang="ts">
import { nextTick, ref, reactive, onMounted } from 'vue'
definePageMeta({
middleware: 'auth',
})
@@ -203,6 +291,11 @@ interface PointRule {
is_active: boolean
}
interface EditingCell {
id: number
field: string
}
const loading = ref(true)
const error = ref(false)
const rules = ref<PointRule[]>([])
@@ -214,6 +307,12 @@ const saving = ref(false)
const formError = ref('')
const toast = ref('')
// Inline editing state
const editingCell = ref<EditingCell | null>(null)
const editValue = ref<string | number | boolean>('')
const inlineInputRef = ref<HTMLInputElement | null>(null)
const inlineSaving = ref(false)
const form = reactive({
action_key: '',
points: 0,
@@ -313,7 +412,7 @@ async function saveRule() {
await fetchRules()
} catch (e: any) {
if (e?.response?.status === 409) {
formError.value = t('gamification.point_rules.duplicate_error')
formError.value = t('gamification.point_rules.duplicate_key')
} else {
formError.value = t('gamification.point_rules.save_error')
}
@@ -342,6 +441,92 @@ async function deleteRule() {
}
}
// --- Inline Editing Methods ---
function isEditing(ruleId: number, field: string): boolean {
return editingCell.value?.id === ruleId && editingCell.value?.field === field
}
async function startEdit(rule: PointRule, field: string) {
if (inlineSaving.value) return
editingCell.value = { id: rule.id, field }
// Set the initial edit value based on field type
if (field === 'is_active') {
editValue.value = rule.is_active
} else if (field === 'points') {
editValue.value = rule.points
} else if (field === 'description') {
editValue.value = rule.description || ''
} else {
editValue.value = rule.action_key
}
// Focus the input after DOM update
await nextTick()
if (inlineInputRef.value) {
inlineInputRef.value.focus()
}
}
function cancelEdit() {
editingCell.value = null
editValue.value = ''
}
async function saveEdit(rule: PointRule, field: string) {
if (!editingCell.value || inlineSaving.value) return
// Build the partial payload
const payload: Record<string, any> = {}
let newValue = editValue.value
// Type coercion
if (field === 'points') {
newValue = Number(newValue)
if (isNaN(newValue as number)) return
} else if (field === 'is_active') {
newValue = Boolean(newValue)
} else if (field === 'description') {
newValue = (newValue as string) || null
} else {
newValue = String(newValue).trim()
if (!newValue) return // don't save empty action_key
}
// Check if value actually changed
const oldValue = (rule as any)[field]
if (newValue === oldValue) {
cancelEdit()
return
}
payload[field] = newValue
inlineSaving.value = true
try {
await $fetch(`/api/v1/admin/gamification/point-rules/${rule.id}`, {
method: 'PUT',
headers: getHeaders(),
body: payload,
})
// Update local state optimistically
;(rule as any)[field] = newValue
showToast(t('gamification.point_rules.updated'))
cancelEdit()
} catch (e: any) {
console.error('Failed to save inline edit:', e)
if (e?.response?.status === 409) {
formError.value = t('gamification.point_rules.duplicate_key')
// Show error briefly
setTimeout(() => { formError.value = '' }, 3000)
}
cancelEdit()
} finally {
inlineSaving.value = false
}
}
onMounted(() => {
fetchRules()
})