d3m0k1d/HellreigN
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: remove folders & create folder

Browse Source
This commit is contained in:
nikita
2026-04-05 03:28:31 +03:00
parent 5073cfd357
commit 178c3b53f7
6 changed files with 206 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/modules/ide/IDE.tsx
+6
View File
@@ -65,6 +65,12 @@ export const IDE: React.FC<IDEProps> = ({
const initialize = useIDEStore((state) => state.initialize);
const isInitialized = useIDEStore((state) => state.isInitialized);
const fetchTree = useIDEStore((state) => state.fetchTree);
const fetchInterpreters = useIDEStore((state) => state.fetchInterpreters);
// Загружаем интерпретаторы при инициализации
useEffect(() => {
fetchInterpreters();
}, []);
// Обработка Ctrl+S
useEffect(() => {
frontend/src/modules/ide/api/scripts.api.ts
+17
View File
@@ -1,4 +1,5 @@
import { apiClient } from "@/shared/api/axios.instance";
import type { Interpreter } from "../types";
export interface ScriptNodeDto {
id: number;
@@ -32,6 +33,11 @@ export interface UpdateScriptPayload {
// apiClient уже имеет интерсептор для Authorization header
export const scriptsApi = {
getInterpreters: async (): Promise<Interpreter[]> => {
const res = await apiClient.get<Interpreter[]>("/scripts/interpreters");
return res.data;
},
getTree: async (): Promise<ScriptNodeDto[]> => {
const res = await apiClient.get<ScriptNodeDto[]>("/scripts/tree");
return res.data;
@@ -55,4 +61,15 @@ export const scriptsApi = {
deleteScript: async (id: number): Promise<void> => {
await apiClient.delete(`/scripts/${id}`);
},
createFolder: async (path: string): Promise<{ path: string }> => {
const res = await apiClient.post<{ path: string }>("/scripts/folder", {
path,
});
return res.data;
},
deleteFolder: async (path: string): Promise<void> => {
await apiClient.delete(`/scripts/folder`, { data: { path } });
},
};
frontend/src/modules/ide/components/FileExplorer.tsx
+17 -1
View File
@@ -46,6 +46,10 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
const handleEmptyContextMenu = (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
// Загружаем интерпретаторы перед открытием меню
if (store.interpreters.length === 0) {
store.fetchInterpreters();
}
store.setContextMenu({ x: e.clientX, y: e.clientY, node: null });
};
@@ -55,6 +59,13 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
store.setContextMenu({ x: e.clientX, y: e.clientY, node });
};
// Загружаем интерпретаторы при монтировании компонента
useEffect(() => {
if (store.interpreters.length === 0) {
store.fetchInterpreters();
}
}, []);
const filteredFiles = store.searchQuery
? (files.children || [])
.map((child) => filterTree(child, store.searchQuery))
@@ -320,8 +331,13 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
? store.dialog.node.name
: ""
}
onConfirm={store.handleDialogConfirm}
onConfirm={(value, interpreterId) => {
store.handleDialogConfirm(value, interpreterId);
}}
onCancel={() => store.setDialog(null)}
interpreters={
store.dialog.type === "newFile" ? store.interpreters : undefined
}
/>
)}
</div>
frontend/src/modules/ide/components/InputDialog.tsx
+55 -5
View File
@@ -1,10 +1,12 @@
import React, { useState, useRef, useEffect } from "react";
import type { Interpreter } from "../types";
interface InputDialogProps {
title: string;
initialValue?: string;
onConfirm: (value: string) => void;
onConfirm: (value: string, interpreterId?: number) => void;
onCancel: () => void;
interpreters?: Interpreter[];
}
export const InputDialog: React.FC<InputDialogProps> = ({
@@ -12,8 +14,12 @@ export const InputDialog: React.FC<InputDialogProps> = ({
initialValue = "",
onConfirm,
onCancel,
interpreters,
}) => {
const [value, setValue] = useState(initialValue);
const [interpreterId, setInterpreterId] = useState<number | undefined>(
interpreters?.[0]?.id,
);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
@@ -21,6 +27,8 @@ export const InputDialog: React.FC<InputDialogProps> = ({
inputRef.current?.select();
}, []);
const showInterpreterDropdown = interpreters && interpreters.length > 0;
return (
<div
style={{
@@ -59,7 +67,7 @@ export const InputDialog: React.FC<InputDialogProps> = ({
{title}
</h3>
<p style={{ margin: "0 0 16px 0", color: "#858585", fontSize: "12px" }}>
Enter a new name
Enter a name
</p>
<input
ref={inputRef}
@@ -67,7 +75,9 @@ export const InputDialog: React.FC<InputDialogProps> = ({
value={value}
onChange={(e) => setValue(e.target.value)}
onKeyDown={(e) =>
e.key === "Enter" && value.trim() && onConfirm(value.trim())
e.key === "Enter" &&
value.trim() &&
onConfirm(value.trim(), interpreterId)
}
style={{
width: "100%",
@@ -77,10 +87,48 @@ export const InputDialog: React.FC<InputDialogProps> = ({
borderRadius: "6px",
color: "#ccc",
fontSize: "14px",
marginBottom: "20px",
marginBottom: showInterpreterDropdown ? "12px" : "20px",
outline: "none",
}}
/>
{/* Interpreter dropdown */}
{showInterpreterDropdown && (
<div style={{ marginBottom: "20px" }}>
<label
style={{
display: "block",
fontSize: "12px",
color: "#858585",
marginBottom: "6px",
}}
>
Interpreter
</label>
<select
value={interpreterId}
onChange={(e) => setInterpreterId(Number(e.target.value))}
style={{
width: "100%",
padding: "10px",
backgroundColor: "#3c3c3c",
border: "1px solid #3e3e42",
borderRadius: "6px",
color: "#ccc",
fontSize: "14px",
outline: "none",
cursor: "pointer",
}}
>
{interpreters.map((interp) => (
<option key={interp.id} value={interp.id}>
{interp.label}
</option>
))}
</select>
</div>
)}
<div
style={{ display: "flex", gap: "12px", justifyContent: "flex-end" }}
>
@@ -99,7 +147,9 @@ export const InputDialog: React.FC<InputDialogProps> = ({
Cancel
</button>
<button
onClick={() => value.trim() && onConfirm(value.trim())}
onClick={() =>
value.trim() && onConfirm(value.trim(), interpreterId)
}
style={{
padding: "6px 16px",
backgroundColor: "#0e639c",
frontend/src/modules/ide/store/useIDEStore.ts
+101 -32
View File
@@ -1,5 +1,5 @@
import { create } from "zustand";
import type { FileNode } from "../types";
import type { FileNode, Interpreter, DialogState } from "../types";
import {
addPaths,
getAllFolderPaths,
@@ -52,13 +52,11 @@ interface IDEState {
searchQuery: string;
showSearch: boolean;
isInitialized: boolean;
interpreters: Interpreter[];
// Диалоги и контекстные меню
contextMenu: { x: number; y: number; node: FileNode | null } | null;
dialog: {
type: "newFile" | "newFolder" | "rename";
node: FileNode | null;
} | null;
dialog: DialogState | null;
tabContextMenu: { x: number; y: number; file: FileNode } | null;
// Действия с файлами
@@ -78,6 +76,9 @@ interface IDEState {
deleteRoot: () => void;
createNewProject: () => void;
// Интерпретаторы
fetchInterpreters: () => Promise<void>;
// API методы
fetchTree: () => Promise<void>;
createScript: (payload: {
@@ -85,11 +86,13 @@ interface IDEState {
interpreter_id: number;
path: string;
}) => Promise<void>;
createFolder: (path: string) => Promise<void>;
updateScript: (
id: number,
payload: { content: string; interpreter_id: number; path: string },
) => Promise<void>;
deleteScript: (id: number) => Promise<void>;
deleteFolder: (payload: { path: string }) => Promise<void>;
saveActiveFile: () => Promise<void>;
// Поиск
@@ -114,7 +117,7 @@ interface IDEState {
initialize: (initialFiles: FileNode) => void;
// Диалог подтверждения
handleDialogConfirm: (value: string) => Promise<void>;
handleDialogConfirm: (value: string, interpreterId?: number) => Promise<void>;
handleDeleteNode: (node: FileNode) => Promise<void>;
}
@@ -131,6 +134,7 @@ export const useIDEStore = create<IDEState>((set, get) => ({
contextMenu: null,
dialog: null,
tabContextMenu: null,
interpreters: [],
// Инициализация
initialize: (initialFiles: FileNode) => {
@@ -295,10 +299,21 @@ export const useIDEStore = create<IDEState>((set, get) => ({
});
},
// Интерпретаторы
fetchInterpreters: async () => {
try {
const interpreters = await scriptsApi.getInterpreters();
set({ interpreters });
} catch (e) {
console.error("Failed to fetch interpreters:", e);
}
},
// API: загрузка дерева с сервера
fetchTree: async () => {
try {
const data = await scriptsApi.getTree();
const { expandedFolders } = get();
const convertItem = (item: any): FileNode => {
const node: FileNode = {
@@ -332,7 +347,7 @@ export const useIDEStore = create<IDEState>((set, get) => ({
type: "folder",
children: roots,
},
expandedFolders: new Set(),
expandedFolders,
isInitialized: true,
});
} catch (e) {
@@ -352,6 +367,37 @@ export const useIDEStore = create<IDEState>((set, get) => ({
}
},
// API: создание папки
createFolder: async (path: string) => {
try {
await scriptsApi.createFolder(path);
await get().fetchTree();
} catch (e) {
console.error("Failed to create folder:", e);
throw e;
}
},
// API: удаление папки
deleteFolder: async ({ path }: { path: string }) => {
try {
const { openFiles } = get();
// Закрываем все файлы, которые находятся в удаляемой папке
const folderPathPrefix = path.endsWith("/") ? path : `${path}/`;
const filesToClose = openFiles.filter(
(f) => f.path === path || f.path?.startsWith(folderPathPrefix),
);
filesToClose.forEach((f) => get().closeFile(f));
await scriptsApi.deleteFolder(path);
await get().fetchTree();
} catch (e) {
console.error("Failed to delete folder:", e);
throw e;
}
},
// API: обновление скрипта
updateScript: async (id, payload) => {
try {
@@ -412,7 +458,7 @@ export const useIDEStore = create<IDEState>((set, get) => ({
setTabContextMenu: (menu) => set({ tabContextMenu: menu }),
// Подтверждение диалога
handleDialogConfirm: async (value: string) => {
handleDialogConfirm: async (value: string, interpreterId?: number) => {
const { dialog, files, toggleFolder, autoExpandPaths } = get();
if (!dialog) return;
@@ -480,31 +526,52 @@ export const useIDEStore = create<IDEState>((set, get) => ({
const savedExpandedFolders = new Set(get().expandedFolders);
try {
const result = await scriptsApi.createScript({
content: "",
interpreter_id: 1,
path: fullPath,
});
// Создание папки
if (dialog.type === "newFolder" && !isFile) {
await scriptsApi.createFolder(fullPath);
await get().fetchTree();
await get().fetchTree();
// Восстанавливаем раскрытые папки
set({ expandedFolders: savedExpandedFolders });
// Восстанавливаем раскрытые папки
set({ expandedFolders: savedExpandedFolders });
// Собираем все пути от корня до родительской папки
const allParentPaths: string[] = [];
let current = parentPath;
while (current) {
allParentPaths.push(current);
const parts = current.split("/");
parts.pop();
current = parts.join("/");
}
// Собираем все пути от корня до родительской папки
const allParentPaths: string[] = [];
let current = parentPath;
while (current) {
allParentPaths.push(current);
const parts = current.split("/");
parts.pop();
current = parts.join("/");
}
// Раскрываем родительскую цепочку
autoExpandPaths(new Set(allParentPaths));
} else {
// Создание файла
const result = await scriptsApi.createScript({
content: "",
interpreter_id: interpreterId || 0,
path: fullPath,
});
// Раскрываем родительскую цепочку
autoExpandPaths(new Set(allParentPaths));
await get().fetchTree();
// Восстанавливаем раскрытые папки
set({ expandedFolders: savedExpandedFolders });
// Собираем все пути от корня до родительской папки
const allParentPaths: string[] = [];
let current = parentPath;
while (current) {
allParentPaths.push(current);
const parts = current.split("/");
parts.pop();
current = parts.join("/");
}
// Раскрываем родительскую цепочку
autoExpandPaths(new Set(allParentPaths));
if (isFile) {
const createdNode: FileNode = {
id: result.id,
name: finalName,
@@ -529,12 +596,14 @@ export const useIDEStore = create<IDEState>((set, get) => ({
if (isRootNode) {
get().deleteRoot();
} else if (window.confirm(`Delete "${node.name}"?`)) {
if (node.id) {
try {
try {
if (node.type === "folder") {
await get().deleteFolder({ path: node.path || node.name });
} else if (node.id) {
await get().deleteScript(node.id);
} catch (e) {
console.error("Failed to delete:", e);
}
} catch (e) {
console.error("Failed to delete:", e);
}
}
},
frontend/src/modules/ide/types.ts
+10
View File
@@ -6,6 +6,15 @@ export interface FileNode {
path?: string;
}
export interface Interpreter {
id: number;
name: string;
label: string;
argv: string[];
created_at: string;
updated_at: string;
}
export interface ContextMenuState {
x: number;
y: number;
@@ -15,6 +24,7 @@ export interface ContextMenuState {
export interface DialogState {
type: "newFile" | "newFolder" | "rename";
node: FileNode | null;
interpreterId?: number;
}
export interface TabContextMenuState {