From 960f58be06a21c8fb9e96be6307dc2c7cdd922c4 Mon Sep 17 00:00:00 2001
From: Vladimir Zagainov <mrixs@mrixs.ru>
Date: Wed, 18 Jun 2025 18:26:11 +0300
Subject: [PATCH] feat(admin): add modpack import page

---
 src/router/index.ts              |   5 ++
 src/views/admin/AdminLayout.vue  |   3 +
 src/views/admin/ModpacksView.vue | 148 +++++++++++++++++++++++++++++++
 3 files changed, 156 insertions(+)
 create mode 100644 src/views/admin/ModpacksView.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index db6f866..2408f07 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -45,6 +45,11 @@ const routes = [
         name: "admin-users",
         component: () => import("../views/admin/UsersView.vue"),
       },
+      {
+        path: "modpacks",
+        name: "admin-modpacks",
+        component: () => import("../views/admin/ModpacksView.vue"),
+      },
     ],
   },
 ];
diff --git a/src/views/admin/AdminLayout.vue b/src/views/admin/AdminLayout.vue
index 8108f66..a954131 100644
--- a/src/views/admin/AdminLayout.vue
+++ b/src/views/admin/AdminLayout.vue
@@ -5,6 +5,7 @@
             <nav>
                 <router-link :to="{ name: 'admin-dashboard' }">Дашборд</router-link>
                 <router-link :to="{ name: 'admin-users' }">Пользователи</router-link>
+                <router-link :to="{ name: 'admin-modpacks' }">Модпаки</router-link>
             </nav>
         </aside>
         <main class="admin-content">
@@ -13,6 +14,8 @@
     </div>
 </template>
 
+<script setup lang="ts"></script>
+
 <style scoped>
 .admin-layout {
     display: flex;
diff --git a/src/views/admin/ModpacksView.vue b/src/views/admin/ModpacksView.vue
new file mode 100644
index 0000000..4cdd6d3
--- /dev/null
+++ b/src/views/admin/ModpacksView.vue
@@ -0,0 +1,148 @@
+<template>
+    <div>
+        <h1>Управление модпаками</h1>
+
+        <div class="import-section">
+            <h2>Импорт нового модпака</h2>
+            <form @submit.prevent="handleImport" class="import-form">
+                <div class="form-group">
+                    <label for="name">Системное имя (латиница, без пробелов)</label>
+                    <input id="name" v-model="form.name" type="text" required pattern="^[a-zA-Z0-9_]+$" />
+                </div>
+
+                <div class="form-group">
+                    <label for="displayName">Отображаемое имя</label>
+                    <input id="displayName" v-model="form.displayName" type="text" required />
+                </div>
+
+                <div class="form-group">
+                    <label for="mcVersion">Версия Minecraft</label>
+                    <input id="mcVersion" v-model="form.mcVersion" type="text" required />
+                </div>
+
+                <div class="form-group">
+                    <label for="modpack-file">Файл модпака (.zip)</label>
+                    <input id="modpack-file" type="file" @change="onFileSelected" required accept=".zip" />
+                </div>
+
+                <div v-if="error" class="error-message">{{ error }}</div>
+                <div v-if="successMessage" class="success-message">{{ successMessage }}</div>
+
+                <button type="submit" :disabled="isLoading">
+                    {{ isLoading ? "Импорт..." : "Импортировать" }}
+                </button>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import apiClient from "@/api/axios";
+
+const form = reactive({
+    name: "",
+    displayName: "",
+    mcVersion: "",
+    file: null as File | null,
+});
+
+const isLoading = ref(false);
+const error = ref<string | null>(null);
+const successMessage = ref<string | null>(null);
+
+const onFileSelected = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    if (target.files && target.files[0]) {
+        form.file = target.files[0];
+    }
+};
+
+const handleImport = async () => {
+    if (!form.file) {
+        error.value = "Пожалуйста, выберите файл для импорта.";
+        return;
+    }
+
+    isLoading.value = true;
+    error.value = null;
+    successMessage.value = null;
+
+    const formData = new FormData();
+    formData.append("name", form.name);
+    formData.append("displayName", form.displayName);
+    formData.append("mcVersion", form.mcVersion);
+    formData.append("file", form.file);
+
+    try {
+        const response = await apiClient.post("/admin/modpacks/import", formData, {
+            headers: {
+                "Content-Type": "multipart/form-data",
+            },
+        });
+        successMessage.value = response.data;
+    } catch (e: any) {
+        error.value = e.response?.data || "Произошла ошибка при импорте.";
+    } finally {
+        isLoading.value = false;
+    }
+};
+</script>
+
+<style scoped>
+.import-section {
+    max-width: 600px;
+    margin-top: 2rem;
+    padding: 2rem;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+}
+
+.import-form .form-group {
+    margin-bottom: 1rem;
+}
+
+.import-form label {
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+.import-form input {
+    width: 100%;
+    padding: 0.5rem;
+    box-sizing: border-box;
+}
+
+.error-message,
+.success-message {
+    margin-top: 1rem;
+    padding: 0.75rem;
+    border-radius: 4px;
+    text-align: center;
+}
+
+.error-message {
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+}
+
+.success-message {
+    background-color: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+}
+
+button {
+    padding: 0.75rem 1.5rem;
+    background-color: #42b983;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+button:disabled {
+    background-color: #ccc;
+}
+</style>