From 2b4dbb569dba9fcec104d2bec55936b942b2f8b7 Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Tue, 21 May 2024 22:01:02 +0200
Subject: [PATCH] create project styling

---
 .../body/projects/SubjectProjectPage.vue      | 25 +++++++++-
 frontend/src/i18n/locales/en.ts               |  2 +-
 frontend/src/i18n/locales/nl.ts               |  2 +-
 frontend/src/views/CreateProjectView.vue      | 48 +++++++++----------
 4 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
index b5c94b5a..045e71ab 100644
--- a/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
+++ b/frontend/src/components/subject/subjectview/body/projects/SubjectProjectPage.vue
@@ -22,6 +22,7 @@
                 {{ $d(project.deadline, "long") }}
             </v-card-text>
             <v-card-text>
+                <!--<h2 v-if="project.capacity > 1  && isInGroup " class="group"> {{ $t("project.group", { number: 1}) }}</h2> -->
                 <h2>{{ $t("subject.project.assignment") }}</h2>
                 <div
                     v-if="project.description && project.description.length <= assignmentLength"
@@ -66,8 +67,9 @@
 
 <script setup lang="ts">
 import type Project from "@/models/Project";
-import { ref } from "vue";
+import {computed, ref} from "vue";
 import { Quill } from "@vueup/vue-quill";
+import {getUserGroups} from "@/services/group";
 
 defineProps<{
     selectedTab: number;
@@ -82,6 +84,23 @@ const renderQuillContent = (content: string) => {
     quill.root.innerHTML = content;
     return quill.root.innerHTML;
 };
+
+/*const { data: groups, isLoading, isError} = getUserGroups()
+
+const projectGroup = ref()
+
+const isInGroup = computed(() => {
+    if (!groups.value) return false;
+    return groups.value.some((groupelem) => {
+        if(groupelem.project_id === project.id){
+            projectGroup.value = groupelem;
+            return true;
+        }
+        return false;
+    });
+});
+*/
+
 </script>
 
 <style scoped>
@@ -148,4 +167,8 @@ const renderQuillContent = (content: string) => {
 .title-col::-webkit-scrollbar {
     width: 0; /* For Chrome, Safari, and Opera */
 }
+
+.group {
+    margin-bottom: 25px;
+}
 </style>
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index cc0c94b6..e2f2f539 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -27,7 +27,7 @@ export default {
         logout: "Logout",
     },
     submit: {
-        submit_title: "Submit solution",
+        submit_title: "Submit title",
         submit_button: "Submit",
         remarks: "Remarks",
         files: "Files",
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index 0cd597de..8539be45 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -26,7 +26,7 @@ export default {
         logout: "Uitloggen",
     },
     submit: {
-        submit_title: "Oplossing indienen",
+        submit_title: "Kies een titel",
         submit_button: "Indienen",
         remarks: "Opmerkingen",
         files: "Bestanden",
diff --git a/frontend/src/views/CreateProjectView.vue b/frontend/src/views/CreateProjectView.vue
index 52bf5817..1573b69e 100644
--- a/frontend/src/views/CreateProjectView.vue
+++ b/frontend/src/views/CreateProjectView.vue
@@ -8,7 +8,7 @@
             {{ $t("project.not_found") }}
         </h1>
         <div v-else class="projectInfo">
-            <v-row>
+            <v-row class="createproject">
                 <v-col cols="12" md="6">
                     <v-text-field
                         v-model="project_title"
@@ -16,10 +16,6 @@
                         required
                         :placeholder="$t('submit.submit_title')"
                     />
-                </v-col>
-            </v-row>
-            <v-row>
-                <v-col cols="12" md="6">
                     <v-select
                         v-if="!isEditMode"
                         v-model="selectedSubject"
@@ -30,6 +26,17 @@
                         required
                         :placeholder="$t('submit.submit_title')"
                     />
+                    <DatePicker
+                        :modelValue="deadlineModel"
+                        @update:modelValue="updateDeadline"
+                        :label="$t('project.deadline')"
+                    />
+                    <DatePicker
+                        :modelValue="publishDateModel"
+                        @update:modelValue="updatePublishDate"
+                        :label="$t('project.publish_date')"
+                        required
+                    />
                 </v-col>
                 <v-col cols="12" md="6">
                     <v-alert v-if="!isEditMode" dense text class="custom-alert">
@@ -45,21 +52,7 @@
                         @update:capacity="handleCapacityChange"
                         @update:selected-option="handleOptionChange"
                         required
-                    />
-                </v-col>
-            </v-row>
-            <v-row>
-                <v-col cols="12" md="6">
-                    <DatePicker
-                        :modelValue="deadlineModel"
-                        @update:modelValue="updateDeadline"
-                        :label="$t('project.deadline')"
-                    />
-                    <DatePicker
-                        :modelValue="publishDateModel"
-                        @update:modelValue="updatePublishDate"
-                        :label="$t('project.publish_date')"
-                        required
+                        class="radiolist"
                     />
                 </v-col>
             </v-row>
@@ -112,11 +105,7 @@
                     />
                 </v-col>
             </v-row>
-            <v-row>
-                <v-col cols="12" class="text-right">
-                    <v-btn @click="submitForm">{{ $t("submit.submit_button") }}</v-btn>
-                </v-col>
-            </v-row>
+            <v-btn color="primary" @click="submitForm">{{ $t("submit.submit_button") }}</v-btn>
             <v-alert v-model="showErrorAlert" type="error" dense dismissible :value="true">
                 {{ errorMessage }}
             </v-alert>
@@ -475,4 +464,13 @@ function divideStudentsIntoGroups(students: User[], capacity: number) {
 .alert-bottom-margin {
     margin-bottom: 15px;
 }
+
+.createproject {
+    border-radius: 3px;
+    margin-top: 25px;
+}
+
+.radiolist {
+    padding: 5px;
+}
 </style>