feat(frontend): add GlobalVariables management page
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude AI
243
frontend/src/pages/GlobalVariables.tsx
Normal file
243
frontend/src/pages/GlobalVariables.tsx
Normal file
@@ -0,0 +1,243 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
Button,
|
||||||
|
Modal,
|
||||||
|
Form,
|
||||||
|
Input,
|
||||||
|
Select,
|
||||||
|
Checkbox,
|
||||||
|
Space,
|
||||||
|
Typography,
|
||||||
|
Popconfirm,
|
||||||
|
message,
|
||||||
|
Tag,
|
||||||
|
} from 'antd';
|
||||||
|
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { apiClient } from '../api/client';
|
||||||
|
|
||||||
|
const { Title } = Typography;
|
||||||
|
const { TextArea } = Input;
|
||||||
|
|
||||||
|
interface GlobalVariable {
|
||||||
|
id: string;
|
||||||
|
key: string;
|
||||||
|
value: string;
|
||||||
|
value_type: 'string' | 'number' | 'boolean' | 'json';
|
||||||
|
description: string | null;
|
||||||
|
is_secret: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface VariableFormData {
|
||||||
|
key: string;
|
||||||
|
value: string;
|
||||||
|
value_type: 'string' | 'number' | 'boolean' | 'json';
|
||||||
|
description?: string;
|
||||||
|
is_secret: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function GlobalVariables() {
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
const [editingVariable, setEditingVariable] = useState<GlobalVariable | null>(null);
|
||||||
|
const [form] = Form.useForm<VariableFormData>();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const { data: variables, isLoading } = useQuery({
|
||||||
|
queryKey: ['global-variables'],
|
||||||
|
queryFn: () => apiClient.get<GlobalVariable[]>('/api/global-variables'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const createMutation = useMutation({
|
||||||
|
mutationFn: (data: VariableFormData) =>
|
||||||
|
apiClient.post('/api/global-variables', data),
|
||||||
|
onSuccess: () => {
|
||||||
|
message.success('Variable creada');
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['global-variables'] });
|
||||||
|
handleCloseModal();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const updateMutation = useMutation({
|
||||||
|
mutationFn: ({ key, data }: { key: string; data: Partial<VariableFormData> }) =>
|
||||||
|
apiClient.put(`/api/global-variables/${key}`, data),
|
||||||
|
onSuccess: () => {
|
||||||
|
message.success('Variable actualizada');
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['global-variables'] });
|
||||||
|
handleCloseModal();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteMutation = useMutation({
|
||||||
|
mutationFn: (key: string) =>
|
||||||
|
apiClient.delete(`/api/global-variables/${key}`),
|
||||||
|
onSuccess: () => {
|
||||||
|
message.success('Variable eliminada');
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['global-variables'] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleOpenCreate = () => {
|
||||||
|
setEditingVariable(null);
|
||||||
|
form.resetFields();
|
||||||
|
form.setFieldsValue({ value_type: 'string', is_secret: false });
|
||||||
|
setIsModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenEdit = (variable: GlobalVariable) => {
|
||||||
|
setEditingVariable(variable);
|
||||||
|
form.setFieldsValue({
|
||||||
|
key: variable.key,
|
||||||
|
value: variable.is_secret ? '' : variable.value,
|
||||||
|
value_type: variable.value_type,
|
||||||
|
description: variable.description || '',
|
||||||
|
is_secret: variable.is_secret,
|
||||||
|
});
|
||||||
|
setIsModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCloseModal = () => {
|
||||||
|
setIsModalOpen(false);
|
||||||
|
setEditingVariable(null);
|
||||||
|
form.resetFields();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
const values = await form.validateFields();
|
||||||
|
if (editingVariable) {
|
||||||
|
const updateData: Partial<VariableFormData> = {
|
||||||
|
value_type: values.value_type,
|
||||||
|
description: values.description,
|
||||||
|
is_secret: values.is_secret,
|
||||||
|
};
|
||||||
|
if (values.value) {
|
||||||
|
updateData.value = values.value;
|
||||||
|
}
|
||||||
|
updateMutation.mutate({ key: editingVariable.key, data: updateData });
|
||||||
|
} else {
|
||||||
|
createMutation.mutate(values);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: 'Clave',
|
||||||
|
dataIndex: 'key',
|
||||||
|
key: 'key',
|
||||||
|
render: (key: string) => <code>{key}</code>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Valor',
|
||||||
|
dataIndex: 'value',
|
||||||
|
key: 'value',
|
||||||
|
render: (value: string, record: GlobalVariable) =>
|
||||||
|
record.is_secret ? '••••••••' : value,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Tipo',
|
||||||
|
dataIndex: 'value_type',
|
||||||
|
key: 'value_type',
|
||||||
|
render: (type: string) => <Tag>{type}</Tag>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Descripcion',
|
||||||
|
dataIndex: 'description',
|
||||||
|
key: 'description',
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Secreto',
|
||||||
|
dataIndex: 'is_secret',
|
||||||
|
key: 'is_secret',
|
||||||
|
render: (isSecret: boolean) =>
|
||||||
|
isSecret ? <Tag color="red">Si</Tag> : <Tag>No</Tag>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Acciones',
|
||||||
|
key: 'actions',
|
||||||
|
render: (_: unknown, record: GlobalVariable) => (
|
||||||
|
<Space>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={<EditOutlined />}
|
||||||
|
onClick={() => handleOpenEdit(record)}
|
||||||
|
/>
|
||||||
|
<Popconfirm
|
||||||
|
title="Eliminar esta variable?"
|
||||||
|
onConfirm={() => deleteMutation.mutate(record.key)}
|
||||||
|
okText="Si"
|
||||||
|
cancelText="No"
|
||||||
|
>
|
||||||
|
<Button type="text" danger icon={<DeleteOutlined />} />
|
||||||
|
</Popconfirm>
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 24 }}>
|
||||||
|
<Title level={4} style={{ margin: 0 }}>Variables Globales</Title>
|
||||||
|
<Button type="primary" icon={<PlusOutlined />} onClick={handleOpenCreate}>
|
||||||
|
Nueva Variable
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Table
|
||||||
|
columns={columns}
|
||||||
|
dataSource={variables || []}
|
||||||
|
rowKey="id"
|
||||||
|
loading={isLoading}
|
||||||
|
pagination={false}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
title={editingVariable ? 'Editar Variable' : 'Nueva Variable'}
|
||||||
|
open={isModalOpen}
|
||||||
|
onCancel={handleCloseModal}
|
||||||
|
onOk={handleSubmit}
|
||||||
|
okText={editingVariable ? 'Guardar' : 'Crear'}
|
||||||
|
confirmLoading={createMutation.isPending || updateMutation.isPending}
|
||||||
|
>
|
||||||
|
<Form form={form} layout="vertical">
|
||||||
|
<Form.Item
|
||||||
|
name="key"
|
||||||
|
label="Clave"
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: 'Ingrese la clave' },
|
||||||
|
{ pattern: /^[A-Z_][A-Z0-9_]*$/, message: 'Use MAYUSCULAS_CON_GUIONES' },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input disabled={!!editingVariable} placeholder="API_KEY" />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
name="value"
|
||||||
|
label={editingVariable?.is_secret ? 'Nuevo Valor (dejar vacio para mantener)' : 'Valor'}
|
||||||
|
rules={editingVariable ? [] : [{ required: true, message: 'Ingrese el valor' }]}
|
||||||
|
>
|
||||||
|
<TextArea rows={2} placeholder="Valor de la variable" />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item name="value_type" label="Tipo">
|
||||||
|
<Select>
|
||||||
|
<Select.Option value="string">String</Select.Option>
|
||||||
|
<Select.Option value="number">Number</Select.Option>
|
||||||
|
<Select.Option value="boolean">Boolean</Select.Option>
|
||||||
|
<Select.Option value="json">JSON</Select.Option>
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item name="description" label="Descripcion">
|
||||||
|
<Input placeholder="Descripcion opcional" />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item name="is_secret" valuePropName="checked">
|
||||||
|
<Checkbox>Es secreto (no mostrar valor)</Checkbox>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user