|
|
@@ -0,0 +1,105 @@
|
|
|
+<template>
|
|
|
+ <div class="min-h-screen bg-gray-900 text-white flex">
|
|
|
+ <!-- Sidebar -->
|
|
|
+ <nav class="w-64 bg-[#08002E] p-4 space-y-6">
|
|
|
+ <div class="flex items-center gap-2 mb-8">
|
|
|
+ <h1 class="text-2xl font-bold">GenLiteX</h1>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Navigation Items -->
|
|
|
+ <div class="space-y-2">
|
|
|
+ <div class="text-sm font-semibold mb-2">Light Weight Easy Version Module</div>
|
|
|
+ <a href="#/user-stories" class="flex items-center gap-3 p-3 rounded-lg bg-[#12063A] text-white/90 hover:bg-[#12063A]/80">
|
|
|
+ <span>Generate User Stories</span>
|
|
|
+ </a>
|
|
|
+ <a href="#/test-scripts" class="flex items-center gap-3 p-3 rounded-lg bg-[#12063A] text-white/90 hover:bg-[#12063A]/80">
|
|
|
+ <span>Generate Test Scripts</span>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <div class="mt-8 mb-4 text-sm font-semibold">Smart Project Analysis Module</div>
|
|
|
+ <!-- Placeholder for future modules -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Exit Button -->
|
|
|
+ <div class="absolute bottom-4 flex items-center gap-3 p-3 text-white/70">
|
|
|
+ <button @click="logout" class="px-4 py-2 bg-red-500 rounded-lg hover:bg-red-600 transition-colors">
|
|
|
+ Exit
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+
|
|
|
+ <!-- Main Content -->
|
|
|
+ <main class="flex-1 p-6 space-y-6">
|
|
|
+ <section class="p-8 rounded-2xl bg-[#12063A]">
|
|
|
+ <h1 class="text-3xl font-bold mb-4">
|
|
|
+ Generate User Stories
|
|
|
+ </h1>
|
|
|
+ <form @submit.prevent="generateUserStories" class="space-y-4">
|
|
|
+ <div>
|
|
|
+ <label for="projectName" class="block text-sm font-medium">Project Name</label>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ id="projectName"
|
|
|
+ v-model="projectName"
|
|
|
+ placeholder="Enter project name"
|
|
|
+ class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label for="userStory" class="block text-sm font-medium">User Story</label>
|
|
|
+ <textarea
|
|
|
+ id="userStory"
|
|
|
+ v-model="userStory"
|
|
|
+ placeholder="Enter user story details"
|
|
|
+ class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
|
+ rows="4"
|
|
|
+ ></textarea>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <button
|
|
|
+ type="submit"
|
|
|
+ class="w-full py-3 rounded-lg bg-purple-500 hover:bg-purple-600 text-white font-medium transition-colors"
|
|
|
+ >
|
|
|
+ Generate User Stories
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ <div v-if="generatedStories.length > 0" class="mt-6">
|
|
|
+ <h2 class="text-2xl font-semibold mb-4">Generated User Stories</h2>
|
|
|
+ <ul class="space-y-4">
|
|
|
+ <li v-for="(story, index) in generatedStories" :key="index" class="p-4 rounded-lg bg-[#12063A]">
|
|
|
+ {{ story }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+const projectName = ref('')
|
|
|
+const userStory = ref('')
|
|
|
+const generatedStories = ref([])
|
|
|
+
|
|
|
+const generateUserStories = () => {
|
|
|
+ // Simple example of generating user stories
|
|
|
+ if (projectName.value && userStory.value) {
|
|
|
+ generatedStories.value.push(`As a user, I want ${userStory.value} so that I can ${projectName.value}.`)
|
|
|
+ projectName.value = ''
|
|
|
+ userStory.value = ''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const logout = () => {
|
|
|
+ router.push('/')
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* Add any additional styles here if needed */
|
|
|
+</style>
|
genlitex