wibu/monitoring-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: gabungkan Settings menjadi 1 form dengan tombol Simpan Semua

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
amaliadwiy
2026-04-29 15:51:51 +08:00
parent 8bcb30a85b
commit d17b49cf8f
1 changed files with 64 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/frontend/routes/dev.tsx
View File

@@ -1482,7 +1482,7 @@ const CONFIG_DEFINITIONS: { key: string; label: string; description: string; pla
function SettingsPanel() {
const qc = useQueryClient()
const [values, setValues] = useState<Record<string, string>>({})
const [saved, setSaved] = useState<Record<string, boolean>>({})
const [saved, setSaved] = useState(false)
const { data, isLoading } = useQuery({
queryKey: ['admin', 'config'],
@@ -1500,81 +1500,86 @@ function SettingsPanel() {
setValues(initial)
}, [configs])
const saveMutation = useMutation({
mutationFn: ({ key, value }: { key: string; value: string }) =>
fetch('/api/admin/config', {
method: 'PUT',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ key, value }),
}).then((r) => r.json()),
onSuccess: (_, { key }) => {
const saveAllMutation = useMutation({
mutationFn: async (vals: Record<string, string>) => {
await Promise.all(
CONFIG_DEFINITIONS.map((def) =>
fetch('/api/admin/config', {
method: 'PUT',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ key: def.key, value: vals[def.key] ?? '' }),
})
)
)
},
onSuccess: () => {
qc.invalidateQueries({ queryKey: ['admin', 'config'] })
setSaved((prev) => ({ ...prev, [key]: true }))
setTimeout(() => setSaved((prev) => ({ ...prev, [key]: false })), 2000)
setSaved(true)
setTimeout(() => setSaved(false), 2000)
},
})
const hasUnconfigured = CONFIG_DEFINITIONS.some((def) => !configs.find((c) => c.key === def.key))
return (
<Stack>
<Title order={3}>Settings</Title>
<Text size="sm" c="dimmed">Konfigurasi runtime — perubahan langsung berlaku tanpa rebuild atau redeploy.</Text>
{isLoading ? <Center><Loader /></Center> : (
<Stack gap="md">
{CONFIG_DEFINITIONS.map((def) => {
const existing = configs.find((c) => c.key === def.key)
return (
<Paper key={def.key} withBorder p="lg" radius="md">
<Stack gap="xs">
<Group justify="space-between" align="flex-start">
<Paper withBorder p="lg" radius="md">
<Stack gap="md">
{CONFIG_DEFINITIONS.map((def) => {
const existing = configs.find((c) => c.key === def.key)
return (
<Stack key={def.key} gap={4}>
<Group justify="space-between" align="flex-end">
<div>
<Text fw={600} size="sm">{def.label}</Text>
<Text size="xs" c="dimmed" ff="monospace">{def.key}</Text>
</div>
{existing && (
<Text size="xs" c="dimmed">
Diupdate {new Date(existing.updatedAt).toLocaleString('id-ID')}
</Text>
)}
{existing
? <Text size="xs" c="dimmed">Diupdate {new Date(existing.updatedAt).toLocaleString('id-ID')}</Text>
: <Badge color="orange" variant="light" size="xs">Belum dikonfigurasi</Badge>
}
</Group>
<Text size="xs" c="dimmed">{def.description}</Text>
<Group gap="xs" align="flex-end">
<Box style={{ flex: 1 }}>
<input
type={def.secret ? 'password' : 'text'}
style={{
width: '100%',
padding: '8px 12px',
borderRadius: 6,
border: '1px solid var(--mantine-color-default-border)',
background: 'var(--mantine-color-body)',
color: 'var(--mantine-color-text)',
fontSize: 13,
fontFamily: 'monospace',
}}
value={values[def.key] ?? ''}
onChange={(e) => setValues((prev) => ({ ...prev, [def.key]: e.target.value }))}
placeholder={def.placeholder}
/>
</Box>
<Button
size="sm"
color={saved[def.key] ? 'green' : 'blue'}
loading={saveMutation.isPending && saveMutation.variables?.key === def.key}
onClick={() => saveMutation.mutate({ key: def.key, value: values[def.key] ?? '' })}
>
{saved[def.key] ? 'Tersimpan' : 'Simpan'}
</Button>
</Group>
{!existing && (
<Badge color="orange" variant="light" size="xs">Belum dikonfigurasi — data tidak akan ter-load</Badge>
)}
<input
type={def.secret ? 'password' : 'text'}
style={{
width: '100%',
padding: '8px 12px',
borderRadius: 6,
border: '1px solid var(--mantine-color-default-border)',
background: 'var(--mantine-color-body)',
color: 'var(--mantine-color-text)',
fontSize: 13,
fontFamily: 'monospace',
}}
value={values[def.key] ?? ''}
onChange={(e) => setValues((prev) => ({ ...prev, [def.key]: e.target.value }))}
placeholder={def.placeholder}
/>
</Stack>
</Paper>
)
})}
</Stack>
)
})}
{hasUnconfigured && (
<Text size="xs" c="orange">Beberapa konfigurasi belum diisi — data tidak akan ter-load sampai disimpan.</Text>
)}
<Group justify="flex-end">
<Button
color={saved ? 'green' : 'blue'}
loading={saveAllMutation.isPending}
onClick={() => saveAllMutation.mutate(values)}
>
{saved ? 'Tersimpan' : 'Simpan Semua'}
</Button>
</Group>
</Stack>
</Paper>
)}
</Stack>
)