feat(web): enhance module management UI with new localization and state handling

- Added new utility functions for module state representation in Russian, improving localization. - Introduced derived states for counting enabled and disabled modules, enhancing user insights. - Updated module management components to display last updated timestamps and improved descriptions. - Refactored imports to utilize core UI components for better maintainability and consistency.
2026-05-20 12:23:16 +07:00
parent ab8660ac42
commit 0c11ecfa48
17 changed files with 2945 additions and 2095 deletions
@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { apiMutate } from '$lib/api/client.js';
+	import type { BgpCommunity, IpRangeEntry, IpRangeEntryCreate } from '$lib/api/types.js';
+	import { communityLabel, communityOptionLabel } from '$lib/components/modules/module-helpers.js';
+	import { Button } from '$lib/ui/core/button/index.js';
+	import { Input } from '$lib/ui/core/input/index.js';
+	import { Label } from '$lib/ui/core/label/index.js';
+	import {
+		Dialog,
+		DialogContent,
+		DialogHeader,
+		DialogTitle,
+		DialogFooter
+	} from '$lib/ui/core/dialog/index.js';
+	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
+
+	type Props = {
+		open: boolean;
+		moduleId: string;
+		edit: IpRangeEntry | null;
+		communities: BgpCommunity[];
+		onSaved: () => void | Promise<void>;
+		onClose: () => void;
+	};
+
+	let { open = $bindable(), moduleId, edit, communities, onSaved, onClose }: Props = $props();
+
+	let saving = $state(false);
+	let form = $state<IpRangeEntryCreate>({ prefix: '', community_id: '' });
+
+	$effect(() => {
+		if (open) {
+			form = edit
+				? { prefix: edit.prefix, community_id: edit.community_id }
+				: { prefix: '', community_id: '' };
+		}
+	});
+
+	async function save() {
+		saving = true;
+		try {
+			if (edit) {
+				await apiMutate(`/v1/modules/${moduleId}/ip-range-entries/${edit.id}`, 'PATCH', form);
+				notify.success('Диапазон обновлён');
+			} else {
+				await apiMutate(`/v1/modules/${moduleId}/ip-range-entries`, 'POST', form);
+				notify.success('Диапазон добавлен');
+			}
+			open = false;
+			await onSaved();
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			saving = false;
+		}
+	}
+
+	function handleOpenChange(next: boolean) {
+		open = next;
+		if (!next) onClose();
+	}
+</script>
+
+<Dialog {open} onOpenChange={handleOpenChange}>
+	<DialogContent class="sm:max-w-sm">
+		<DialogHeader>
+			<DialogTitle>{edit ? 'Редактировать диапазон' : 'Новый IP-диапазон'}</DialogTitle>
+		</DialogHeader>
+		<div class="space-y-4 py-2">
+			<div class="space-y-1.5">
+				<Label for="ip-prefix">Префикс (CIDR)</Label>
+				<Input id="ip-prefix" placeholder="203.0.113.0/24" bind:value={form.prefix} />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="ip-comm">Community (обязательно)</Label>
+				<Select
+					type="single"
+					value={form.community_id}
+					onValueChange={(v) => {
+						form.community_id = v;
+					}}
+				>
+					<SelectTrigger id="ip-comm" class="w-full">
+						{form.community_id
+							? communityLabel(form.community_id, communities)
+							: 'Выберите community'}
+					</SelectTrigger>
+					<SelectContent>
+						{#each communities as c (c.id)}
+							<SelectItem value={c.id}>{communityOptionLabel(c)}</SelectItem>
+						{/each}
+					</SelectContent>
+				</Select>
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => handleOpenChange(false)}>Отмена</Button>
+			<Button onclick={save} disabled={saving}>
+				{saving ? 'Сохранение…' : edit ? 'Сохранить' : 'Добавить'}
+			</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>