73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
import React, { useState, useCallback } from 'react'
|
|
import { View, Text, FlatList, Switch, StyleSheet, ActivityIndicator, RefreshControl } from 'react-native'
|
|
import { useFocusEffect } from 'expo-router'
|
|
import { COLORS } from '../../constants/Config'
|
|
import { getAutomationRules } from '../../services/api'
|
|
|
|
export default function AutomationRulesScreen() {
|
|
const [rules, setRules] = useState<any[]>([])
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true)
|
|
try {
|
|
const r = await getAutomationRules()
|
|
setRules(r.data?.items ?? r.data ?? [])
|
|
} catch { setRules([]) }
|
|
finally { setLoading(false) }
|
|
}, [])
|
|
|
|
useFocusEffect(useCallback(() => { load() }, [load]))
|
|
|
|
const renderItem = ({ item }: { item: any }) => (
|
|
<View style={s.card}>
|
|
<View style={s.row}>
|
|
<View style={{ flex: 1 }}>
|
|
<Text style={s.title}>{item.name ?? item.rule_name ?? '규칙'}</Text>
|
|
<Text style={s.meta}>트리거: {item.trigger ?? item.condition ?? '-'}</Text>
|
|
<Text style={s.meta}>액션: {item.action ?? item.action_type ?? '-'}</Text>
|
|
</View>
|
|
<View style={s.statusCol}>
|
|
<Switch
|
|
value={item.enabled ?? item.is_active ?? false}
|
|
disabled
|
|
trackColor={{ true: COLORS.accent, false: COLORS.border }}
|
|
/>
|
|
<Text style={[s.badge, { backgroundColor: item.enabled ? COLORS.success : COLORS.muted }]}>
|
|
{item.enabled ? '활성' : '비활성'}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
|
|
return (
|
|
<View style={s.container}>
|
|
<View style={s.notice}>
|
|
<Text style={s.noticeText}>자동화 규칙 조회 전용 — 편집은 ITSM 웹에서 가능합니다.</Text>
|
|
</View>
|
|
<FlatList
|
|
data={rules}
|
|
keyExtractor={(_, i) => String(i)}
|
|
renderItem={renderItem}
|
|
refreshControl={<RefreshControl refreshing={loading} onRefresh={load} />}
|
|
ListEmptyComponent={<Text style={s.empty}>자동화 규칙이 없습니다.</Text>}
|
|
contentContainerStyle={{ padding: 12 }}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const s = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: COLORS.bg },
|
|
notice: { backgroundColor: COLORS.light, padding: 10, margin: 12, borderRadius: 8 },
|
|
noticeText:{ fontSize: 12, color: COLORS.blue },
|
|
card: { backgroundColor: '#fff', borderRadius: 10, padding: 14, marginBottom: 8, elevation: 1 },
|
|
row: { flexDirection: 'row', alignItems: 'center' },
|
|
title: { fontSize: 14, fontWeight: '700', color: COLORS.text, marginBottom: 4 },
|
|
meta: { fontSize: 12, color: COLORS.muted, marginBottom: 2 },
|
|
statusCol: { alignItems: 'center', gap: 4 },
|
|
badge: { fontSize: 10, color: '#fff', paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, fontWeight: '700' },
|
|
empty: { textAlign: 'center', color: COLORS.muted, marginTop: 40 },
|
|
})
|