From bb0474c4c01ddc68842459d04472714ce45a5a24 Mon Sep 17 00:00:00 2001
From: JulioManoel <juliobonow@gmail.com>
Date: Tue, 9 Jul 2024 03:27:48 -0300
Subject: [PATCH 1/3] fix: Organization Create Test

---
 src/components/atoms/ButtonBack.vue           |  21 +
 src/components/atoms/CardTypeTest.vue         | 168 +++++
 src/components/atoms/CardTypeTestImage.vue    | 154 +++++
 .../dialogs/CreateTestNameDialog.vue          | 251 ++++++++
 .../dialogs/CreateTestUserDialog.vue          | 125 ++++
 src/views/admin/CreateBlankView.vue           | 574 ++----------------
 src/views/admin/DashboardView.vue             |  54 +-
 src/views/admin/ManagerView.vue               |   2 +-
 8 files changed, 791 insertions(+), 558 deletions(-)
 create mode 100644 src/components/atoms/ButtonBack.vue
 create mode 100644 src/components/atoms/CardTypeTest.vue
 create mode 100644 src/components/atoms/CardTypeTestImage.vue
 create mode 100644 src/components/dialogs/CreateTestNameDialog.vue
 create mode 100644 src/components/dialogs/CreateTestUserDialog.vue

diff --git a/src/components/atoms/ButtonBack.vue b/src/components/atoms/ButtonBack.vue
new file mode 100644
index 00000000..61c22710
--- /dev/null
+++ b/src/components/atoms/ButtonBack.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <v-btn
+      icon
+      dark
+      fab
+      color="red"
+      fixed
+      right
+      class="mt-6 mr-2"
+      @click="$emit('click')"
+    >
+      <v-icon x-large>
+        mdi-arrow-u-left-bottom
+      </v-icon>
+    </v-btn>
+  </div>
+</template>
+
+<script>
+</script>
\ No newline at end of file
diff --git a/src/components/atoms/CardTypeTest.vue b/src/components/atoms/CardTypeTest.vue
new file mode 100644
index 00000000..5469ea81
--- /dev/null
+++ b/src/components/atoms/CardTypeTest.vue
@@ -0,0 +1,168 @@
+<template>
+  <div>
+    <v-card
+      hover
+      color="white"
+      class="cards ml-5 mr-5"
+      height="350"
+      @click="$emit('click', segundType)"
+    >
+      <v-row>
+        <v-sheet
+          class="ml-8 mt-6 mb-10 insideCards"
+          height="50"
+          width="50"
+        >
+          <v-img
+            class="ma-2"
+            :src="img"
+          />
+        </v-sheet>
+
+        <div class="mt-6">
+          <span class="cardsTitle ml-4">{{ title }}</span>
+          <p class="cardSubtitle ml-4">
+            {{ type }}
+          </p>
+        </div>
+      </v-row>
+
+      <v-divider />
+
+      <div class="mt-1">
+        <v-row v-for="text in texts" :key="text" class="ml-6 mt-6 mb-6">
+          <v-sheet class="circle" />
+          <span class="cardInternTitles ml-3">{{ text }}</span>
+        </v-row>
+      </div>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+      require: true,
+    },
+
+    type: {
+      type: String,
+      default: '',
+      require: true,
+    },
+
+    img: {
+      type: String,
+      default: '',
+      require: true,
+    },
+
+    segundType: {
+      type: String,
+      default: '',
+      require: true,
+    },
+
+    texts: {
+      type: Array,
+      default: () => ([]),
+      require: true,
+    },
+  },
+}
+</script>
+
+<style scoped>
+.cards {
+  border-radius: 20px !important;
+}
+
+.cards :hover {
+  cursor: pointer;
+  transition: box-shadow 0.6s cubic-bezier(0.55, 0.9, 0.55, 2);
+}
+
+.insideCards {
+  border-radius: 14px;
+  background: linear-gradient(
+    90deg,
+    rgba(236, 62, 27, 0.404) 1%,
+    rgba(240, 152, 25, 0.3) 97.63%
+  );
+}
+
+.cardsTitle {
+  font-size: 24px;
+  font-weight: 600;
+  background-color: #f99726;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.cardSubtitle {
+  color: #8b959c;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.cardInternTitles {
+  max-width: 270px;
+  color: #626e76;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.circle {
+  height: 20px;
+  width: 20px;
+  border-radius: 24px;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 80, 45, 0.514) 1%,
+    rgba(240, 150, 25, 0.432) 97.63%
+  );
+}
+
+@media (max-width: 600px) {
+  .cards {
+    height: 250px; /* Adjust card height for smaller screens */
+  }
+
+  .cardsTitle {
+    font-size: 16 px;
+  }
+
+  .cardSubtitle {
+    font-size: 15px;
+  }
+
+  .circle {
+    height: 10px;
+    width: 10px;
+  }
+
+  .cardInternTitles {
+    max-width: 270px;
+    font-size: 15px;
+  }
+}
+
+@media (min-width: 601px) and (max-width: 1160px) {
+  .cards {
+    height: 300px; /* Adjust card height for medium screens */
+    width: 100%;
+  }
+}
+
+@media (min-width: 1160px) {
+  .cards {
+    height: 350px; /* Adjust card height for larger screens */
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/atoms/CardTypeTestImage.vue b/src/components/atoms/CardTypeTestImage.vue
new file mode 100644
index 00000000..17a1e641
--- /dev/null
+++ b/src/components/atoms/CardTypeTestImage.vue
@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <v-card
+      hover
+      color="white"
+      class="cards ml-5 mr-5"
+      height="520"
+      @click="$emit('click', type)"
+    >
+      <v-row>
+        <div class="mt-6 ml-10">
+          <span class="titles">{{ title }}</span>
+          <p class="cardSubtitle2">
+            {{ type }}
+          </p>
+        </div>
+      </v-row>
+
+      <img
+        style="margin-left: 80px"
+        class="mt-5 mb-2"
+        height="230"
+        :src="img"
+        alt="Test Creation image"
+      >
+
+      <div class="mt-1">
+        <v-row v-for="text in texts" :key="text">
+          <v-sheet class="ml-10 mb-8 circle" />
+          <span class="cardInternTitles ml-3">{{ text }}</span>
+        </v-row>
+      </div>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+      require: true,
+    },
+
+    type: {
+      type: String,
+      default: '',
+      require: true,
+    },
+
+    img: {
+      type: String,
+      default: '',
+      require: true,
+    },
+
+    texts: {
+      type: Array,
+      default: () => ([]),
+      require: true,
+    },
+  },
+}
+</script>
+
+<style scoped>
+.titles {
+  font-size: 38px;
+  text-align: center;
+  font-weight: 600;
+  color: #f99726;
+}
+
+.card {
+  margin: auto;
+}
+
+.cards {
+  border-radius: 20px !important;
+}
+.cards :hover {
+  cursor: pointer;
+  transition: box-shadow 0.6s cubic-bezier(0.55, 0.9, 0.55, 2);
+}
+
+.cardSubtitle2 {
+  color: rgba(139, 149, 156, 0.64);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.circle {
+  height: 20px;
+  width: 20px;
+  border-radius: 24px;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 80, 45, 0.514) 1%,
+    rgba(240, 150, 25, 0.432) 97.63%
+  );
+}
+
+.cardInternTitles {
+  color: #626e76;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+@media (max-width: 600px) {
+  .titles {
+    font-size: 28px; /* Adjust font size for smaller screens */
+  }
+
+  .cards {
+    height: 250px; /* Adjust card height for smaller screens */
+  }
+
+  .cardSubtitle2 {
+    font-size: 16px;
+  }
+
+  .circle {
+    height: 10px;
+    width: 10px;
+  }
+
+  .cardInternTitles {
+    max-width: 270px;
+    font-size: 15px;
+  }
+}
+
+@media (min-width: 601px) and (max-width: 1160px) {
+  .titles {
+    font-size: 32px; /* Adjust font size for medium screens */
+  }
+
+  .cards {
+    height: 300px; /* Adjust card height for medium screens */
+    width: 100%;
+  }
+}
+
+@media (min-width: 1160px) {
+  .titles {
+    font-size: 38px; /* Adjust font size for larger screens */
+  }
+
+  .cards {
+    height: 350px; /* Adjust card height for larger screens */
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/dialogs/CreateTestNameDialog.vue b/src/components/dialogs/CreateTestNameDialog.vue
new file mode 100644
index 00000000..3333da3b
--- /dev/null
+++ b/src/components/dialogs/CreateTestNameDialog.vue
@@ -0,0 +1,251 @@
+<template>
+  <div>
+    <v-dialog v-model="isOpen" fullscreen persistent transition="dialog-bottom-transition">
+      <v-card color="#f9f5f0">
+        <ButtonBack @click="$emit('close')" />
+
+        <v-col lg="9" md="8" sm="12" class="ml-auto mr-auto pt-10">
+          <p class="titles ml-5">
+            Test Creation
+          </p>
+          <p class="cardSubtitle ml-5">
+            Add a name to your test!
+          </p>
+        </v-col>
+
+        <v-row align="center" justify="center" class="cardRow ma-0 pa-0">
+          <v-col class="ml-auto mr-auto" sm="10" md="8" lg="4">
+            <v-card
+              color="white"
+              class="pb-5"
+              style="border-radius: 20px !important"
+            >
+              <v-col cols="11" class="ml-6">
+                <p class="cardInternTitles mt-4">
+                  Test Name
+                </p>
+                <v-text-field
+                  v-model="test.title"
+                  class="mt-3"
+                  label="Test Name"
+                  outlined
+                  color="orange"
+                  @change="$store.commit('SET_LOCAL_CHANGES', true)"
+                />
+
+                <p class="cardInternTitles">
+                  Test Description
+                </p>
+                <v-textarea
+                  v-model="test.description"
+                  outlined
+                  color="orange"
+                  class="mt-3"
+                  label="Test Description"
+                  @change="$store.commit('SET_LOCAL_CHANGES', true)"
+                />
+
+                <v-row>
+                  <v-checkbox
+                    v-model="test.isPublic"
+                    class="ml-4 mt-4"
+                    color="orange"
+                    label="Test public to all users"
+                  />
+                  <v-btn
+                    dark
+                    fab
+                    depressed
+                    color="orange"
+                    class="ml-auto mr-2 circleOrange"
+                    @click="validate"
+                  >
+                    <v-icon x-large>
+                      mdi-arrow-right
+                    </v-icon>
+                  </v-btn>
+                </v-row>
+              </v-col>
+            </v-card>
+          </v-col>
+
+          <v-col
+            v-if="!$vuetify.breakpoint.mdAndDown"
+            cols="5"
+            class="imageColumn"
+          >
+            <img
+              height="500"
+              src="../../../public/createSVG.svg"
+              alt="Test Creation image"
+            />
+          </v-col>
+        </v-row>
+      </v-card>
+    </v-dialog>
+
+    <CreateTestUserDialog 
+      :is-open="userDialog"
+      @setUser="; (test = { ...test, ...$event}), (userDialog = false), submit()"
+      @close="userDialog = false"
+    />
+  </div>
+</template>
+
+<script>
+import Test from '@/models/Test'
+import TestAdmin from '@/models/TestAdmin'
+import ButtonBack from '@/components/atoms/ButtonBack.vue'
+import CreateTestUserDialog from '@/components/dialogs/CreateTestUserDialog.vue'
+
+export default {
+  components: {
+    ButtonBack,
+    CreateTestUserDialog,
+  },
+
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: false,
+      require: true,
+    },
+
+    testType: {
+      type: String,
+      default: '',
+      require: true,
+    },
+  },
+
+  data: () => ({
+    userDialog: false,
+    test: {
+      title: '',
+      description: '',
+      isPublic: false,
+      userTestType: '',
+      userTestStatus: {}
+    },
+  }),
+
+  computed: {
+    user() {
+      return this.$store.getters.user
+    },
+  },
+
+  methods: {
+    validate() {
+      if (this.test.title.length === 0) return this.$toast.warning('Enter a Title')
+      if (this.test.title.length > 200) return this.$toast.warning('Title cannot exceed 200 characters')
+      if (this.test.description.length > 600) return this.$toast.warning('Description cannot exceed 600 characters')
+
+      this.handleTestType()
+    },
+
+    handleTestType() {
+      if (this.testType === 'User') return this.userDialog = true
+      if (this.testType === 'HEURISTICS') return this.submit()
+    },
+
+    async submit() {
+      const test = new Test({
+        id: null,
+        testTitle: this.test.title,
+        testDescription: this.test.description,
+        testType: this.testType,
+        isPublic: this.test.isPublic,
+        userTestType: this.test.userTestType,
+        userTestStatus: this.test.userTestStatus,
+        testAdmin: new TestAdmin({
+          userDocId: this.user.id,
+          email: this.user.email,
+        }),
+        creationDate: Date.now(),
+        updateDate: Date.now(),
+      })
+
+      const testId = await this.$store.dispatch('createNewTest', test)
+      this.$router.push(`/managerview/${testId}`)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.titles {
+  font-size: 38px;
+  font-weight: 600;
+  color: #f99726
+}
+
+.cardSubtitle {
+  color: #8b959c;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.cardRow {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.cardInternTitles {
+  max-width: 270px;
+  color: #626e76;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.imageColumn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  padding-right: 30vh;
+}
+
+@media (max-width: 600px) {
+  .titles {
+    font-size: 28px; /* Adjust font size for smaller screens */
+  }
+
+  .cardSubtitle {
+    font-size: 15px;
+  }
+
+  .cardRow {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .cardInternTitles {
+    max-width: 270px;
+    font-size: 15px;
+  }
+
+  .circleOrange {
+    margin-top: 10px;
+  }
+}
+
+@media (min-width: 601px) and (max-width: 1160px) {
+  .titles {
+    font-size: 32px; /* Adjust font size for medium screens */
+  }
+
+  .cardRow {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+@media (min-width: 1160px) {
+  .titles {
+    font-size: 38px; /* Adjust font size for larger screens */
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/dialogs/CreateTestUserDialog.vue b/src/components/dialogs/CreateTestUserDialog.vue
new file mode 100644
index 00000000..19aac21f
--- /dev/null
+++ b/src/components/dialogs/CreateTestUserDialog.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <v-dialog v-model="isOpen" fullscreen transition="dialog-bottom-transition">
+      <v-card color="#f9f5f0">
+        <ButtonBack @click="$emit('close')" />
+
+        <v-col cols="12">
+          <v-row justify="center">
+            <span class="titles mt-8 mb-8">
+              What type of test are you looking to start?
+            </span>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12">
+          <v-row class="cardsContainer">
+            <v-col cols="12" md="4" sm="10" class="card">
+              <CardTypeTestImage 
+                title="SelfTest"
+                type="UNMODERATED"
+                :img="require('../../../public/SelfTest.svg')"
+                :texts="['Answer on free time', 'Enhanced answer analysis', 'Task Customization']"
+                @click="setType"
+              />
+            </v-col>
+
+            <v-col cols="12" md="4" sm="10" class="card">
+              <CardTypeTestImage 
+                title="LiveTest"
+                type="MODERATED"
+                :img="require('../../../public/LiveTest.svg')"
+                :texts="['Webcam, audio & screen record', 'Enhanced answer analysis', 'Moderated live test']"
+                @click="setType"
+              />
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import ButtonBack from '@/components/atoms/ButtonBack.vue'
+import CardTypeTestImage from '@/components/atoms/CardTypeTestImage.vue'
+
+export default {
+  components: {
+    ButtonBack,
+    CardTypeTestImage,
+  },
+
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: false,
+      require: true,
+    },
+  },
+
+  methods: {
+    setType(type) {
+      const test = {}
+      if (type === 'UNMODERATED') test.userTestType = type.toLowerCase()
+      if (type === 'MODERATED') {
+        test.userTestType = 'moderated'
+        test.userTestStatus = {
+          user: false,
+          moderator: false,
+          consentStatus: 'open',
+          preTestStatus: 'closed',
+          postTestStatus: 'closed',
+        }
+      }
+      
+      this.$emit('setUser', test)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.titles {
+  font-size: 38px;
+  text-align: center;
+  font-weight: 600;
+  color: #f99726;
+}
+
+.cardsContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.card {
+  margin: auto;
+}
+
+@media (max-width: 600px) {
+  .titles {
+    font-size: 28px; /* Adjust font size for smaller screens */
+  }
+
+  .cardsContainer {
+    flex-direction: column;
+  }
+}
+
+@media (min-width: 601px) and (max-width: 1160px) {
+  .titles {
+    font-size: 32px; /* Adjust font size for medium screens */
+  }
+
+  .cardsContainer {
+    flex-direction: column;
+  }
+}
+
+@media (min-width: 1160px) {
+  .titles {
+    font-size: 38px; /* Adjust font size for larger screens */
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/admin/CreateBlankView.vue b/src/views/admin/CreateBlankView.vue
index a6a4b822..a44d8527 100644
--- a/src/views/admin/CreateBlankView.vue
+++ b/src/views/admin/CreateBlankView.vue
@@ -2,396 +2,65 @@
   <div class="outermost">
     <v-col cols="12">
       <v-row justify="center">
-        <span class="Titles ma-16"
-          >What kind of test are you looking to start?</span
-        >
+        <p class="titles ma-16">
+          What kind of test are you looking to start?
+        </p>
       </v-row>
     </v-col>
+
     <v-col cols="12" class="mt-6">
-      <v-row class="cardsContainer">
-        <!-- <v-col cols="1"></v-col> -->
+      <v-row>
         <v-col cols="10" md="5" sm="10" class="card">
-          <v-card
-            hover
-            color="white"
-            class="cards ml-5 mr-5 group"
-            height="350"
-            @click=";(test.testType = 'HEURISTICS'), (dialog = true)"
-          >
-            <v-row>
-              <v-sheet
-                class="ml-8 mt-6 mb-10 insideCards"
-                height="50"
-                width="50"
-              >
-                <v-img
-                  class="ma-2"
-                  style="z-index: 0"
-                  src="../../../public/specialist.png"
-                />
-              </v-sheet>
-              <div class="mt-6">
-                <span class="cardsTitle ml-4">Usability Heuristic</span>
-                <br />
-                <span class="cardSubtitle ml-4"> Test </span>
-              </div>
-            </v-row>
-            <v-divider />
-            <v-row class="mt-1">
-              <v-sheet class="ml-10 mt-8 mb-8 circle" />
-              <span class="cardInternTitles ml-3 mt-8"
-                >Usability Percentage</span
-              >
-            </v-row>
-            <v-row>
-              <v-sheet class="ml-10 mb-8 circle" />
-              <span class="cardInternTitles ml-3">Final Report PDF</span>
-            </v-row>
-            <v-row>
-              <v-sheet class="ml-10 mb-8 circle" />
-              <span class="cardInternTitles ml-3"
-                >Invite specialists to evaluate your application</span
-              >
-            </v-row>
-          </v-card>
+          <CardTypeTest
+            :img="require('../../../public/specialist.png')"
+            title="Usability Heuristic"
+            type="Test"
+            segund-type="HEURISTICS"
+            :texts="['Usability Percentage', 'Final Report PDF', 'Invite specialists to evaluate your application']"
+            @click="setTestType"
+          />
         </v-col>
-        <!-- <v-col cols="1"></v-col> -->
+
         <v-col cols="12" md="5" sm="10" class="card">
-          <v-card
-            hover
-            color="white"
-            class="cards ml-5 mr-5"
-            height="350"
-            @click=";(test.testType = 'User'), (dialog = true)"
-          >
-            <v-row>
-              <v-sheet
-                class="ml-8 mt-6 mb-10 insideCards"
-                height="50"
-                width="50"
-              >
-                <v-img
-                  class="ma-3"
-                  style="z-index: 0"
-                  src="../../../public/user.png"
-                />
-              </v-sheet>
-              <div class="mt-6">
-                <span class="cardsTitle ml-4">Usability User</span>
-                <br />
-                <span class="cardSubtitle ml-4"> Test </span>
-              </div>
-            </v-row>
-            <v-divider />
-            <v-row class="mt-1">
-              <v-sheet class="ml-10 mt-8 mb-8 circle" />
-              <span class="cardInternTitles ml-3 mt-8"
-                >Webcam, audio & screen record</span
-              >
-            </v-row>
-            <v-row>
-              <v-sheet class="ml-10 mb-8 circle" />
-              <span class="cardInternTitles ml-3"
-                >Enhanced answer analysis</span
-              >
-            </v-row>
-            <v-row>
-              <v-sheet class="ml-10 mb-8 circle" />
-              <span class="cardInternTitles ml-3"
-                >Moderated or non moderated tests</span
-              >
-            </v-row>
-          </v-card>
+          <CardTypeTest
+            :img="require('../../../public/user.png')"
+            title="Usability User"
+            type="Test"
+            segund-type="User"
+            :texts="['Webcam, audio & screen record', 'Enhanced answer analysis', 'Moderated or non moderated tests']"
+            @click="setTestType"
+          />
         </v-col>
-        <!-- <v-col cols="1"></v-col> -->
       </v-row>
     </v-col>
-    <v-dialog v-model="dialog" fullscreen transition="dialog-bottom-transition">
-      <v-card color="#f9f5f0" class="ma-0">
-        <v-btn
-          icon
-          dark
-          fab
-          color="red"
-          fixed
-          right
-          class="mt-6 mr-2 arrowBack"
-          @click="dialog = false"
-        >
-          <v-icon x-large>
-            mdi-arrow-u-left-bottom
-          </v-icon>
-        </v-btn>
-        <v-col lg="9" md="8" sm="12" class="ml-auto mr-auto pt-10">
-          <span class="Titles ml-5 ">Test Creation</span>
-          <br />
-          <span class="cardSubtitle ml-5">Add a name to your test!</span>
-        </v-col>
-        <v-row align="center" justify="center" class="cardRow ma-0 pa-0">
-          <v-col class="ml-auto mr-auto" sm="10" md="8" lg="4">
-            <v-card
-              color="white"
-              class="pb-5"
-              style="border-radius: 20px !important"
-            >
-              <v-col cols="11">
-                <div class="mt-4">
-                  <span class="cardInternTitles ml-6">Test Name</span>
-                </div>
-                <v-text-field
-                  v-model="test.testTitle"
-                  class="ml-6 mt-3"
-                  label="Test Name"
-                  outlined
-                  color="orange"
-                  @change="$store.commit('SET_LOCAL_CHANGES', true)"
-                />
-                <span class="cardInternTitles ml-6">Test Description</span>
-                <v-textarea
-                  v-model="test.testDescription"
-                  outlined
-                  color="orange"
-                  class="ml-6 mt-3"
-                  label="Test Description"
-                  @change="$store.commit('SET_LOCAL_CHANGES', true)"
-                />
-                <v-row>
-                  <v-checkbox
-                    v-model="test.isPublic"
-                    class="ml-10 mt-4"
-                    color="orange"
-                    label="Test public to all users"
-                  />
-                  <v-btn
-                    dark
-                    fab
-                    depressed
-                    color="orange"
-                    class="ml-auto mr-2 circleOrange"
-                    @click="validate()"
-                    data-testid="add-name-test-creation-btn"
-                  >
-                    <v-icon x-large>
-                      mdi-arrow-right
-                    </v-icon>
-                  </v-btn>
-                </v-row>
-              </v-col>
-            </v-card>
-          </v-col>
-          <v-col
-            v-if="!$vuetify.breakpoint.mdAndDown"
-            cols="5"
-            class="imageColumn"
-          >
-            <img
-              height="500"
-              draggable="false"
-              src="../../../public/createSVG.svg"
-              alt="Test Creation image"
-            />
-          </v-col>
-        </v-row>
-      </v-card>
-    </v-dialog>
-
-    <!-- DIALOG USER -->
 
-    <v-dialog
-      v-model="dialogUser"
-      fullscreen
-      transition="dialog-bottom-transition"
-    >
-      <v-card color="#f9f5f0">
-        <v-btn
-          icon
-          dark
-          fab
-          color="red"
-          fixed
-          right
-          class="mt-6 mr-2"
-          @click="dialogUser = false"
-        >
-          <v-icon x-large>
-            mdi-arrow-u-left-bottom
-          </v-icon>
-        </v-btn>
-        <v-col cols="12">
-          <v-row justify="center">
-            <span class="Titles mt-8 mb-8"
-              >What type of test are you looking to start?</span
-            >
-          </v-row>
-        </v-col>
-        <v-col cols="12" class="mt-6">
-          <v-row class="cardsContainer">
-            <v-col cols="1"></v-col>
-            <v-col cols="10" md="4" sm="10" class="card">
-              <v-card
-                hover
-                color="white"
-                class="cards ml-5 mr-5 group"
-                height="520"
-                @click=";(test.userTestType = 'unmoderated'), validate()"
-              >
-                <v-row>
-                  <div class="mt-6">
-                    <span class="Titles ml-10">SelfTest</span>
-                    <br />
-                    <span class="cardSubtitle2 ml-10"> UNMODERATED </span>
-                  </div>
-                </v-row>
-                <img
-                  style="margin-left: 80px"
-                  class="mt-5 mb-2"
-                  height="230"
-                  draggable="false"
-                  src="../../../public/SelfTest.svg"
-                  alt="Test Creation image"
-                />
-                <v-row class="mt-1">
-                  <v-sheet class="ml-13 mb-8 circle" height="20" width="20" />
-                  <span class="cardInternTitles ml-3">Answer on free time</span>
-                </v-row>
-                <v-row>
-                  <v-sheet class="ml-13 mb-8 circle" height="20" width="20" />
-                  <span class="cardInternTitles ml-3"
-                    >Enhanced answer analysis</span
-                  >
-                </v-row>
-                <v-row>
-                  <v-sheet class="ml-13 mb-8 circle" height="20" width="20" />
-                  <span class="cardInternTitles ml-3">Task Customization</span>
-                </v-row>
-              </v-card>
-            </v-col>
-            <v-col cols="12" md="4" sm="10" class="card">
-              <v-card
-                hover
-                color="white"
-                class="cards ml-5 mr-5"
-                height="520"
-                @click="chooseUserModerated()"
-              >
-                <v-row>
-                  <div class="mt-6">
-                    <span class="Titles ml-10">LiveTest </span>
-                    <br />
-                    <span class="cardSubtitle2 ml-10"> MODERATED</span>
-                  </div>
-                </v-row>
-                <img
-                  v-if="!$vuetify.breakpoint.mdAndDown"
-                  style="margin-left: 80px"
-                  class="mt-5 mb-2"
-                  height="230"
-                  draggable="false"
-                  src="../../../public/LiveTest.svg"
-                  alt="Test Creation image"
-                />
-                <v-row class="mt-1">
-                  <v-sheet class="ml-13 mb-8 circle" height="20" width="20" />
-                  <span class="cardInternTitles ml-3"
-                    >Webcam, audio & screen record</span
-                  >
-                </v-row>
-                <v-row>
-                  <v-sheet class="ml-13 mb-8 circle" height="20" width="20" />
-                  <span class="cardInternTitles ml-3"
-                    >Enhanced answer analysis</span
-                  >
-                </v-row>
-                <v-row>
-                  <v-sheet class="ml-13 mb-8 circle" height="20" width="20" />
-                  <span class="cardInternTitles ml-3">Moderated live test</span>
-                </v-row>
-              </v-card>
-            </v-col>
-            <v-col cols="1" />
-          </v-row>
-        </v-col>
-      </v-card>
-    </v-dialog>
+    <CreateTestNameDialog
+      :is-open="nameDialog"
+      :test-type="testType"
+      @close="nameDialog = false"
+    />
   </div>
 </template>
 
 <script>
-import TestAdmin from '@/models/TestAdmin'
-import Test from '@/models/Test'
+import CardTypeTest from '@/components/atoms/CardTypeTest'
+import CreateTestNameDialog from '@/components/dialogs/CreateTestNameDialog.vue'
 
 export default {
-  data: () => ({
-    dialog: false,
-    dialogUser: false,
-    object: {},
-    test: {
-      testTitle: '',
-      testDescription: '',
-      testType: '',
-      userTestType: '',
-      userTestStatus: {},
-    },
-    testID: null,
-  }),
-  computed: {
-    user() {
-      return this.$store.getters.user
-    },
+  components: {
+    CardTypeTest,
+    CreateTestNameDialog,
   },
-  methods: {
-    pushToFromTemplate() {
-      this.$router.push('/fromtemplate')
-    },
-    chooseUserModerated() {
-      this.test.userTestType = 'moderated'
-      this.test.userTestStatus = {
-        user: false,
-        moderator: false,
-        consentStatus: 'open',
-        preTestStatus: 'closed',
-        postTestStatus: 'closed',
-      }
-      this.validate()
-    },
-    async submit() {
-      const test = new Test({
-        ...this.test,
-        id: null,
-        testAdmin: new TestAdmin({
-          userDocId: this.user.id,
-          email: this.user.email,
-        }),
-        creationDate: Date.now(),
-        updateDate: Date.now(),
-      })
 
-      const testId = await this.$store.dispatch('createNewTest', test)
+  data: () => ({
+    nameDialog: false,
+    testType: '',
+  }),
 
-      this.sendManager(testId)
-    },
-    sendManager(id) {
-      this.$router.push(`/managerview/${id}`)
-    },
-    validate() {
-      if (this.test.testTitle.length > 0 && this.test.testTitle.length <= 200) {
-        if (this.test.testDescription.length <= 600) {
-          if (this.test.testType == 'User' && this.dialogUser == false) {
-            this.dialog = false
-            this.dialogUser = true
-          } else if (this.test.testType == 'User' && this.dialogUser == true) {
-            this.submit()
-          } else if (this.test.testType == 'HEURISTICS') {
-            this.submit()
-          }
-        } else {
-          this.$toast.warning('Description cannot exceed 600 characters')
-        }
-      } else {
-        if (this.test.testTitle.length > 0)
-          this.$toast.warning('Title cannot exceed 200 characters')
-        else this.$toast.warning('Enter a Title')
-      }
+  methods: {
+    setTestType(type) {
+      this.testType = type
+      this.nameDialog = true
     },
   },
 }
@@ -402,184 +71,37 @@ export default {
   height: 93vh;
   background-color: #f9f5f0;
 }
-.circle {
-  height: 20px;
-  width: 20px;
-}
-.Titles {
+
+.titles {
   font-size: 38px;
-  font-style: normal;
   text-align: center;
   font-weight: 600;
-  line-height: initial;
-  background: #f99726;
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.cardRow {
-  display: flex;
-  flex-wrap: wrap;
+  color: #f99726;
 }
 
-.imageColumn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  padding-right: 30vh;
-}
 .card {
   margin: auto;
 }
-.cardsContainer {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-.cardsTitle {
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
-  max-height: 23px;
-  background-color: #f99726;
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.cardSubtitle {
-  color: #8b959c;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
-}
-.cardSubtitle2 {
-  color: rgba(139, 149, 156, 0.64);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
-}
-.cardInternTitles {
-  max-width: 270px;
-  color: #626e76;
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-}
-.cards {
-  border-radius: 20px !important;
-}
-.cards :hover {
-  cursor: pointer;
-  transition: box-shadow 0.6s cubic-bezier(0.55, 0.9, 0.55, 2);
-}
-.insideCards {
-  border-radius: 14px;
-  background: linear-gradient(
-    90deg,
-    rgba(236, 62, 27, 0.404) 1%,
-    rgba(240, 152, 25, 0.3) 97.63%
-  );
-  z-index: 10;
-}
-.circle {
-  border-radius: 24px;
-  background: linear-gradient(
-    90deg,
-    rgba(255, 80, 45, 0.514) 1%,
-    rgba(240, 150, 25, 0.432) 97.63%
-  );
-}
 
-/* Responsive styles */
 @media (max-width: 600px) {
-  .Titles {
+  .titles {
     font-size: 28px; /* Adjust font size for smaller screens */
   }
-  .cardRow {
-    flex-direction: column;
-    align-items: center;
-  }
-  .cardsContainer {
-    flex-direction: column;
-  }
-  .cardsTitle {
-    font-size: 16 px;
-  }
-  .cardSubtitle {
-    font-size: 15px;
-  }
-  .cardSubtitle2 {
-    font-size: 16px;
-  }
-  .cardInternTitles {
-    max-width: 270px;
-    font-size: 15px;
-  }
-  .circle {
-    height: 10px;
-    width: 10px;
-  }
-  .circleOrange {
-    margin-top: 10px;
-  }
-
-  .cards {
-    height: 250px; /* Adjust card height for smaller screens */
-  }
-
-  .mt-6 {
-    margin-top: 30px; /* Adjust margin for smaller screens */
-  }
 }
 
 @media (min-width: 601px) and (max-width: 1160px) {
-  .cardRow {
-    flex-direction: column;
-    align-items: center;
-  }
   .outermost {
     height: auto;
   }
-  .Titles {
-    font-size: 32px; /* Adjust font size for medium screens */
-  }
-  .cardsContainer {
-    flex-direction: column;
-  }
-
-  .cards {
-    height: 300px; /* Adjust card height for medium screens */
-    width: 100%;
-  }
 
-  .mt-6 {
-    margin-top: 40px; /* Adjust margin for medium screens */
+  .titles {
+    font-size: 32px; /* Adjust font size for medium screens */
   }
 }
 
 @media (min-width: 1160px) {
-  .Titles {
+  .titles {
     font-size: 38px; /* Adjust font size for larger screens */
   }
-
-  .cards {
-    height: 350px; /* Adjust card height for larger screens */
-  }
-
-  .mt-6 {
-    margin-top: 50px; /* Adjust margin for larger screens */
-  }
-}
-</style>
-
-<style scoped>
-.v-text-field--outlined >>> fieldset {
-  border-radius: 8px;
-  border: 1px solid #ffceb2;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/admin/DashboardView.vue b/src/views/admin/DashboardView.vue
index 83103d8d..05a2f615 100644
--- a/src/views/admin/DashboardView.vue
+++ b/src/views/admin/DashboardView.vue
@@ -240,13 +240,9 @@ export default {
     },
 
     filteredTests() {
-      let arr = null
-
-      arr = this.tests?.filter((test) => {
+      return this.tests?.filter(test => {
         return test.testTitle.toLowerCase().includes(this.search.toLowerCase())
-      })
-
-      return arr ?? this.tests
+      }) ?? this.tests
     },
 
     templates() {
@@ -254,11 +250,9 @@ export default {
     },
 
     filteredTemplates() {
-      return this.templates.filter((temp) =>
-        temp.header.templateTitle
-          .toLowerCase()
-          .includes(this.search.toLowerCase()),
-      )
+      return this.templates.filter(temp => {
+        return temp.header.templateTitle.toLowerCase().includes(this.search.toLowerCase())
+      })
     },
 
     loading() {
@@ -306,6 +300,7 @@ export default {
     async cleanTestStore() {
       await this.$store.dispatch('cleanTest')
     },
+    
     async getMyPersonalTests() {
       await this.$store.dispatch('getTestsAdminByUser')
     },
@@ -331,33 +326,30 @@ export default {
     },
 
     goTo(test) {
-      // if it is from the my tests tab
-      if (this.mainIndex === 0) {
-        if (this.subIndex === 0) {
+      if (this.subIndex === 0) {
+        this.$router.push({
+          name: 'ManagerView',
+          params: { id: test.testDocId },
+        })
+      }
+      // if it is the shared with me tests
+      else if (this.subIndex === 1) {
+        if (test.accessLevel >= 2) {
           this.$router.push({
-            name: 'ManagerView',
+            name: 'TestView',
             params: { id: test.testDocId },
           })
-        }
-        // if it is the shared with me tests
-        else if (this.subIndex === 1) {
-          if (test.accessLevel >= 2) {
-            this.$router.push({
-              name: 'TestView',
-              params: { id: test.testDocId },
-            })
-          } else {
-            this.$router.push({
-              name: 'ManagerView',
-              params: { id: test.testDocId },
-            })
-          }
-        } else if (this.subIndex === 2) {
+        } else {
           this.$router.push({
             name: 'ManagerView',
-            params: { id: test.id },
+            params: { id: test.testDocId },
           })
         }
+      } else if (this.subIndex === 2) {
+        this.$router.push({
+          name: 'ManagerView',
+          params: { id: test.id },
+        })
       }
     },
 
diff --git a/src/views/admin/ManagerView.vue b/src/views/admin/ManagerView.vue
index a871dd7d..f64baa03 100644
--- a/src/views/admin/ManagerView.vue
+++ b/src/views/admin/ManagerView.vue
@@ -406,7 +406,7 @@ export default {
     await this.$store.dispatch('getTest', { id: this.$route.params.id })
     await this.$store.dispatch('getCurrentTestAnswerDoc')
     if (this.accessLevel == 2) {
-      this.$toast.warning("You don't have permission to access this test!")
+      this.$toast.warning('You don\'t have permission to access this test!')
       this.$router.push('/testslist')
     }
   },

From de0caae8806c8fa5514efc40cfb77984207c3179 Mon Sep 17 00:00:00 2001
From: JulioManoel <juliobonow@gmail.com>
Date: Tue, 9 Jul 2024 05:36:32 -0300
Subject: [PATCH 2/3] fix: organization managerview

---
 src/views/admin/ManagerView.vue | 195 ++++++++------------------------
 1 file changed, 49 insertions(+), 146 deletions(-)

diff --git a/src/views/admin/ManagerView.vue b/src/views/admin/ManagerView.vue
index a871dd7d..fd46249c 100644
--- a/src/views/admin/ManagerView.vue
+++ b/src/views/admin/ManagerView.vue
@@ -38,22 +38,28 @@
 
     <v-row v-if="test" class="nav pa-0 ma-0" dense>
       <Drawer :user-access-level-on-test="[accessLevel]" />
+
       <!-- View -->
       <v-col class="background pa-0 ma-0">
         <div v-if="this.$route.path.includes('manager')">
           <div class="back-gradient">
             <v-row align="center" justify="center" style="height: 100%">
               <v-col class="text-div">
-                <div
-                  v-if="accessLevel == 0"
-                  class="mt-7 mb-4 white--text mobile-center"
-                  style="font-size: 58px; font-weight: 500"
-                >
-                  {{ $t('titles.manager') }}
+                <div v-if="accessLevel == 0" class="white--text">
+                  <p 
+                    class="mobile-center"
+                    style="font-size: 58px; font-weight: 500"
+                  >
+                    {{ $t('titles.manager') }}
+                  </p>
+                  <p
+                    style="font-size: 22px"
+                    class="mobile-center"
+                  >{{ test.testTitle }}</p>
                 </div>
                 <div
                   v-else
-                  class="mb-4 white--text mobile-center"
+                  class="white--text mobile-center"
                   style="font-size: 58px; font-weight: 500"
                 >
                   {{ test.testTitle }}
@@ -64,12 +70,6 @@
                   contain
                   src="@/assets/manager/IntroManager.svg"
                 />
-                <div
-                  style="font-size: 22px"
-                  class="white--text mb-4 mobile-center"
-                >
-                  {{ test.title }}
-                </div>
               </v-col>
               <v-img
                 class="hidden-sm-and-down"
@@ -169,7 +169,7 @@
                     </v-row>
 
                     <div
-                      class="white--text text-justification pl-4"
+                      class="white--text pa-1 pl-4"
                       :style="{
                         height: '90px',
                         position: 'absolute',
@@ -191,7 +191,7 @@
             </v-container>
           </div>
         </div>
-        <router-view v-else @goToCoops="go(items[6])" />
+        <router-view v-else />
       </v-col>
     </v-row>
   </v-container>
@@ -206,6 +206,7 @@ export default {
   components: {
     Drawer,
   },
+
   data: () => ({
     selected: true,
     flagUser: false,
@@ -213,12 +214,10 @@ export default {
     flagNewUser: false,
     logined: false,
 
-    tests: [],
-
-    isCoops: null,
     selectedTest: null,
     item: 0,
   }),
+
   computed: {
     test() {
       this.$store.dispatch('processStatistics', {
@@ -229,66 +228,10 @@ export default {
       return this.$store.getters.test
     },
 
-    items() {
-      let items
-      if (this.test) {
-        items = [
-          {
-            title: i18n.t('titles.manager'),
-            icon: 'mdi-home',
-            path: `/managerview/${this.test.id}`,
-            id: 0,
-          },
-          {
-            title: i18n.t('titles.test'),
-            icon: 'mdi-file-document-edit',
-            path: `/edittest/${this.test.id}`,
-            id: 1,
-          },
-          {
-            title: i18n.t('titles.preview'),
-            icon: 'mdi-file-eye',
-            path: `/testview/${this.test.id}`,
-            id: 2,
-          },
-          {
-            title: i18n.t('titles.reports'),
-            icon: 'mdi-book-multiple',
-            path: `/reportview/${this.test.answersDocId}`,
-            id: 3,
-          },
-          {
-            title: i18n.t('titles.answers'),
-            icon: 'mdi-order-bool-ascending-variant',
-            path: `/answerview/${this.test.answersDocId}`,
-            id: 4,
-          },
-        ]
-
-        if (this.accessLevel == 0) {
-          items.push({
-            title: i18n.t('titles.cooperators'),
-            icon: 'mdi-account-group',
-            path: `/cooperators/${this.test.cooperators}`,
-            id: 6,
-          })
-        }
-
-        if (this.test.template) {
-          items.push({
-            title: i18n.t('titles.template'),
-            icon: 'mdi-file-compare',
-            path: `/templateview/${this.test.template.id}`,
-            id: 7,
-          })
-        }
-      }
-
-      return items
-    },
     isSettings() {
       return this.$route.path.includes('/settings')
     },
+
     topCards() {
       return [
         {
@@ -313,6 +256,7 @@ export default {
         },
       ]
     },
+
     bottomCards() {
       const bottomCards = [
         {
@@ -350,43 +294,37 @@ export default {
       }
       return bottomCards
     },
+
     user() {
-      if (this.$store.getters.user) {
-        this.setFlag('flagUser', true)
-      }
+      if (this.$store.getters.user) this.setFlag('flagUser', true)
       return this.$store.getters.user
     },
+
     cooperators() {
       return this.$store.getters.cooperators
     },
+
     loading() {
       return this.$store.getters.loading
     },
+
     accessLevel() {
+      // Check if the user is defined
+      if (!this.user) return 1
+
       // If the user is a superadmin
-      if (this.user) {
-        if (this.user.accessLevel == 0) return 0
-        // Check if the user is a collaborator or owner
-        const isTestOwner = this.test.testAdmin?.userDocId === this.user.id
-        if (isTestOwner) return 0
+      if (this.user.accessLevel === 0) return 0
 
-        const answers = []
-        const answersEntries = Object.entries(this.user.myAnswers)
-        answersEntries.forEach((answer) => {
-          answers.push(answer[1])
-        })
-        if (this.test.cooperators) {
-          const coopsInfo = this.test.cooperators.find(
-            (coops) => coops.userDocId === this.user.id,
-          )
-          if (coopsInfo) {
-            return coopsInfo.accessLevel
-          }
-        }
-        if (this.test.isPublic) return 1
-        else return 2
-      }
-      return 1
+      // Check if the user is a collaborator or owner
+      const isTestOwner = this.test.testAdmin?.userDocId === this.user.id
+      if (isTestOwner) return 0
+
+      // Check if the user is a cooperator and get their access level
+      const coopsInfo = this.test.cooperators?.find((coops) => coops.userDocId === this.user.id)
+      if (coopsInfo) return coopsInfo.accessLevel
+
+      // Check if the test is public
+      return this.test.isPublic ? 1 : 2
     },
   },
 
@@ -406,28 +344,12 @@ export default {
     await this.$store.dispatch('getTest', { id: this.$route.params.id })
     await this.$store.dispatch('getCurrentTestAnswerDoc')
     if (this.accessLevel == 2) {
-      this.$toast.warning("You don't have permission to access this test!")
+      this.$toast.warning('You don\'t have permission to access this test!')
       this.$router.push('/testslist')
     }
   },
-  methods: {
-    standardDeviation(array) {
-      const average = array.reduce(
-        (total, value) => total + value / array.length,
-        0,
-      )
-      return Math.sqrt(
-        array.reduce(
-          (total, valor) => total + Math.pow(average - valor, 2) / array.length,
-          0,
-        ),
-      )
-    },
 
-    pushToTest() {
-      this.$router.push('/managerview/' + this.selectedTest).catch(() => {})
-      this.index = 0
-    },
+  methods: {
     go(item) {
       if (item.id === undefined) this.$router.push(item).catch(() => {})
       else {
@@ -435,17 +357,17 @@ export default {
         else this.$router.push(item.path).catch(() => {})
       }
     },
-    setIsCoops(payload) {
-      this.isCoops = payload
-    },
+
     setFlag(flag, value) {
       this[flag] = value
     },
+
     signOut() {
       this.$store.dispatch('logout').then(() => {
         this.setFlag('flagUser', false)
       })
     },
+
     async setTest() {
       if (this.user.myAnswers && this.test) {
         const answers = []
@@ -495,6 +417,7 @@ export default {
       }
     },
   },
+
   beforeRouteEnter(to, from, next) {
     if (to.params.token)
       next((vm) => {
@@ -517,6 +440,7 @@ export default {
   height: 100vh;
   overflow: hidden;
 }
+
 .background::-webkit-scrollbar {
   display: none;
 }
@@ -530,42 +454,23 @@ export default {
   text-shadow: 2px 2px rgba(0, 0, 0, 0.5);
   color: #ffffff;
 }
-.footer {
-  background-color: #343344;
-  height: 8%;
-  width: 100%;
-  display: flex;
-  align-items: center;
 
-  position: absolute;
-  bottom: 49px;
-}
-.header {
-  background-color: #343344;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-}
-.idText {
-  color: rgba(255, 255, 255, 0.28);
-  font-size: 12px;
-  margin-left: 15px;
-  padding: 0px;
-  margin-bottom: 0px;
-  margin-top: 20px;
-  align-items: flex-end;
-}
 .presentation-text {
   color: rgb(87, 84, 100);
   font-weight: 700;
   font-size: 22px;
   margin-bottom: 20px;
 }
+
 .back-gradient {
   height: 60vh;
   background-image: radial-gradient(circle at top right, #f6cd3d, #fca326);
 }
+
 .text-div {
   max-width: 45%;
 }
+
 .card-container {
   width: 70%;
 }
@@ -600,10 +505,8 @@ export default {
   box-shadow: 0;
   transition: box-shadow 0.5s;
 }
+
 .cards-animation:hover {
   box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.7) !important;
 }
-.text-justification {
-  padding: 2px;
-}
 </style>

From 0168d37b77f035fa0eabbb2d966ced359b4272ee Mon Sep 17 00:00:00 2001
From: JulioManoel <juliobonow@gmail.com>
Date: Tue, 9 Jul 2024 10:59:15 -0300
Subject: [PATCH 3/3] fix: Remove variaveis not usable and improve drawer
 componentization

---
 src/components/atoms/Drawer.vue               | 185 +++---------------
 .../organisms/HeuristicsTestAnswer.vue        |  23 ---
 src/views/admin/AnswerView.vue                |   3 -
 src/views/admin/EditTestView.vue              | 103 ++++------
 src/views/admin/FinalReportView.vue           |  37 +---
 src/views/admin/ManagerView.vue               |  58 ++++--
 6 files changed, 114 insertions(+), 295 deletions(-)

diff --git a/src/components/atoms/Drawer.vue b/src/components/atoms/Drawer.vue
index 92e000de..8be05a1c 100644
--- a/src/components/atoms/Drawer.vue
+++ b/src/components/atoms/Drawer.vue
@@ -1,13 +1,13 @@
 <template>
-  <v-navigation-drawer v-model="drawer" clipped :mini-variant="mini" permanent color="#3F3D56" class="hidden-sm-and-down">
+  <v-navigation-drawer clipped :mini-variant="mini" permanent color="#3F3D56" class="hidden-sm-and-down">
     <!-- Navigation header -->
-    <div v-if="!mini" class="header">
+    <div v-if="!mini">
       <!--- CHANGE CURRENT TEST SELECTOR -->
       <v-list-item>
         <v-row dense>
           <v-col class="pa-0 ma-0">
             <v-overflow-btn class="pa-0 ma-0" dark dense item-text="testTitle" :items="testsList" :label="test.testTitle"
-                            background-color="#343344" style="max-width: 240px" @change="changeTest"
+              background-color="#343344" style="max-width: 240px" @change="changeTest"
             />
           </v-col>
         </v-row>
@@ -19,18 +19,16 @@
       <div v-if="mini">
         <v-tooltip v-for="(item, n) in items" :key="n" right>
           <template v-slot:activator="{ on, attrs }">
-            <v-list-item v-bind="attrs" @click="; (currentIndexSelect = n), go(item)" v-on="on">
+            <v-list-item v-bind="attrs" @click="go(item)" v-on="on">
               <v-list-item-icon>
-                <v-icon :color="currentIndexSelect == item.id ? '#fca326' : '#bababa'">
+                <v-icon :color="$route.path == item.path ? '#fca326' : '#bababa'">
                   {{ item.icon }}
                 </v-icon>
               </v-list-item-icon>
 
               <v-list-item-content>
-                <v-list-item-title :style="currentIndexSelect == item.id
-                  ? 'color: #fca326'
-                  : 'color:#bababa'
-                "
+                <v-list-item-title 
+                  :style="$route.path == item.path ? 'color: #fca326' : 'color:#bababa'"
                 >
                   {{ $t(`titles.drawer.${item.title}`) }}
                 </v-list-item-title>
@@ -42,18 +40,16 @@
       </div>
 
       <div v-else>
-        <v-list-item v-for="(item, n) in items" :key="n" @click="; (currentIndexSelect = n), go(item)">
+        <v-list-item v-for="(item, n) in items" :key="n" @click="go(item)">
           <v-list-item-icon>
-            <v-icon :color="currentIndexSelect == item.id ? '#fca326' : '#bababa'">
+            <v-icon :color="$route.path == item.path ? '#fca326' : '#bababa'">
               {{ item.icon }}
             </v-icon>
           </v-list-item-icon>
 
           <v-list-item-content>
-            <v-list-item-title :style="currentIndexSelect == item.id
-              ? 'color: #fca326'
-              : 'color:#bababa'
-            "
+            <v-list-item-title 
+              :style="$route.path == item.path ? 'color: #fca326' : 'color:#bababa'"
             >
               {{ $t(`titles.drawer.${item.title}`) }}
             </v-list-item-title>
@@ -64,26 +60,15 @@
 
     <!-- Navigation footer -->
     <div v-if="!mini" class="footer">
-      <v-btn v-if="userAccessLevelOnTest == 0" icon class="ml-3" @click="go(`/settingsview/${test.id}`)">
-        <v-icon :color="isSettingsBtnActive ? '#fca326' : 'white'">
-          mdi-cog
-        </v-icon>
-      </v-btn>
-      <v-spacer />
       <v-btn icon class="mr-2" @click.stop="mini = !mini">
         <v-icon color="white">
           mdi-chevron-left
         </v-icon>
       </v-btn>
     </div>
-
-    <div v-else class="footer" :style="userAccessLevelOnTest == 0 ? 'height:16%' : ''">
+    
+    <div v-else class="footer">
       <v-col>
-        <v-btn v-if="userAccessLevelOnTest == 0" icon @click="go(`/settingsview/${test.id}`)">
-          <v-icon :color="isSettingsBtnActive ? '#fca326' : 'white'">
-            mdi-cog
-          </v-icon>
-        </v-btn>
         <v-btn icon class="mt-2" @click.stop="mini = !mini">
           <v-icon color="white">
             mdi-chevron-right
@@ -95,138 +80,27 @@
 </template>
 <script>
 export default {
-  props: { userAccessLevelOnTest: { type: Array, default: () => [2] } },
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+
   data: () => ({
-    drawer: true,
     mini: true,
-    isSettingsBtnActive: false,
   }),
+
   computed: {
     test() {
       return this.$store.state.Tests.Test
     },
-    testsList() {
-      const tests = []
-
-      const testsEntries = Object.entries(this.$store.getters.user.myTests)
-      testsEntries.forEach((a) => {
-        tests.push(a[1])
-      })
-      return tests
-    },
-    currentIndexSelect: {
-      get() {
-        if (this.items) {
-          return this.items.indexOf(
-            this.items.find((item) =>
-              item.path.split('/').includes(this.$route.path.split('/')[1]),
-            ),
-          )
-        }
-        return 0
-      },
-      set(item) {
-        return item
-      },
-    },
-    items() {
-      let items
-      if (this.test) {
-        items = [
-          {
-            title: 'Manager',
-            icon: 'mdi-home',
-            path: `/managerview/${this.test.id}`,
-            id: 0,
-          },
-        ]
-
-        if (this.userAccessLevelOnTest <= 2) {
-          if (this.userAccessLevelOnTest == 0) {
-            items.push(
-              {
-                title: 'Test',
-                icon: 'mdi-file-document-edit',
-                path: `/edittest/${this.test.id}`,
-                id: 1,
-              },
-              {
-                title: 'Preview',
-                icon: 'mdi-file-eye',
-                path: `/testview/${this.test.id}`,
-                id: 2,
-              },
-            )
-          } else if (this.userAccessLevelOnTest == 1) {
-            items.push({
-              title: 'Answer Test',
-              icon: 'mdi-file-document',
-              path: `/testview/${this.test.id}`,
-              id: 1,
-            })
-          }
-        }
-        if (this.userAccessLevelOnTest == 0) {
-          items.push(
-            {
-              title: 'Reports',
-              icon: 'mdi-book-multiple',
-              path: `/reportview/${this.test.id}`,
-              id: 3,
-            },
-            {
-              title: 'Answers',
-              icon: 'mdi-order-bool-ascending-variant',
-              path: `/answerview/${this.test.id}`,
-              id: 4,
-            },
-          )
-        } else if (this.userAccessLevelOnTest == 1) {
-          items.push(
-            {
-              title: 'Reports',
-              icon: 'mdi-book-multiple',
-              path: `/reportview/${this.test.id}`,
-              id: 2,
-            },
-            {
-              title: 'Answers',
-              icon: 'mdi-order-bool-ascending-variant',
-              path: `/answerview/${this.test.id}`,
-              id: 3,
-            },
-          )
-        }
-        if (this.userAccessLevelOnTest == 0) {
-          items.push(
-            {
-              title: 'Final Report',
-              icon: 'mdi-file-document',
-              path: `/finalreportview/${this.test.id}`,
-              id: 5,
-            },
-            {
-              title: 'Cooperators',
-              icon: 'mdi-account-group',
-              path: `/cooperators/${this.test.id}`,
-              id: 6,
-            },
-          )
-        }
-
-        if (this.test.template) {
-          items.push({
-            title: 'Template',
-            icon: 'mdi-file-compare',
-            path: `/templateview/${this.test.template.id}`,
-            id: 7,
-          })
-        }
-      }
 
-      return items
-    },
+    testsList() {
+      return Object.values(this.$store.getters.user.myTests)  
+    },  
   },
+
   methods: {
     async changeTest(testName) {
       const testId = this.testsList.find(
@@ -235,12 +109,11 @@ export default {
       await this.$store.dispatch('getTest', { id: testId })
       this.$router.replace({ name: 'ManagerView', params: { id: testId } })
     },
+
     go(item) {
-      if (item.id == undefined) this.$router.push(item).catch(() => { })
-      else {
-        if (item.path == `/testview/${this.test.id}`) window.open(item.path)
-        else this.$router.push(item.path).catch(() => { })
-      }
+      if (this.$route.path === item.path) return
+      if (item.path === `/testview/${this.test.id}`) return window.open(item.path)
+      return this.$router.push(item.path)
     },
   },
 }
diff --git a/src/components/organisms/HeuristicsTestAnswer.vue b/src/components/organisms/HeuristicsTestAnswer.vue
index 79195d89..3a2e40c5 100644
--- a/src/components/organisms/HeuristicsTestAnswer.vue
+++ b/src/components/organisms/HeuristicsTestAnswer.vue
@@ -511,9 +511,6 @@ export default {
     testWeights() {
       return this.$store.state.Tests.Test.testWeights
     },
-    scoresPercentageHTA() {
-      return this.$store.state.Tests.scoresPercentage
-    },
     heuristicsEvaluator() {
       const table = {
         header: [],
@@ -621,10 +618,6 @@ export default {
       return table
     },
 
-    testAll() {
-      return this.$store.state.Tests.Test
-    },
-
     heuristics() {
       return this.testAll.testStructure || []
     },
@@ -863,11 +856,6 @@ export default {
   border: 0.2px solid rgba(0, 0, 0, 0.25);
 }
 
-.cardAnswers {
-  background: #e6e4e4;
-  border-radius: 34px;
-}
-
 .tab-text {
   font-style: normal;
   font-weight: 200;
@@ -876,12 +864,6 @@ export default {
   color: #000000;
 }
 
-.container {
-  height: 400px;
-  padding: 0px;
-  margin: 0px 10px 0px;
-}
-
 .list-scroll {
   height: 508px;
   overflow: auto;
@@ -916,11 +898,6 @@ export default {
   width: 950px;
 }
 
-.weightsStatisticsRadar {
-  border-radius: 20px;
-  border: 0.2px solid #fca326;
-}
-
 .radar {
   background: #fff;
 }
diff --git a/src/views/admin/AnswerView.vue b/src/views/admin/AnswerView.vue
index 1e4b7c29..11a4defa 100644
--- a/src/views/admin/AnswerView.vue
+++ b/src/views/admin/AnswerView.vue
@@ -20,9 +20,6 @@ export default {
   },
 
   computed: {
-    showFinalResult() {
-      return finalResult()
-    },
     testAnswerDocument() {
       return this.$store.state.Answer.testAnswerDocument
     },
diff --git a/src/views/admin/EditTestView.vue b/src/views/admin/EditTestView.vue
index 89da0482..ca3ec64a 100644
--- a/src/views/admin/EditTestView.vue
+++ b/src/views/admin/EditTestView.vue
@@ -70,23 +70,9 @@
       </div>
     </v-overlay>
 
-    <!--
-        <IntroEdit v-if="test && intro == true" @closeIntro="intro = false" />
-          <IntroEdit v-if="test.testStructure" @closeIntro="intro = false" />  -->
-
-    <!--
-        <ShowInfo v-if="test" title="Test Edit">  -->
-    <!-- Heuristics tests -->
-    <!--TODO: change hard coded type
-            <EditHeuristicsTest
-                v-if="test.testType == "HEURISTICS""
-                type="tabs"
-                @tabClicked="setIndex"
-                slot="top"
-            />
-        -->
     <v-row>
       <v-col cols="12" class="pb-0">
+        <!-- Heuristic Tests -->
         <EditHeuristicsTest
           v-if="test.testType === 'HEURISTICS'"
           slot="content"
@@ -113,6 +99,7 @@
           type="content"
           @valForm="validate"
         />
+
         <!-- Moderated User tests -->
         <EditModeratedUserTest
           v-if="test.testType === 'User' && test.userTestType === 'moderated'"
@@ -153,8 +140,9 @@ export default {
     EditUserTest,
     EditModeratedUserTest,
   },
-  // eslint-disable-next-line vue/require-prop-types
+
   props: ['id'],
+
   data: () => ({
     index: 0,
     object: {},
@@ -163,22 +151,25 @@ export default {
     dialog: false,
     intro: false,
   }),
+
   computed: {
     accessLevel() {
-      // If user is superadmin
-      if (this.user) {
-        if (this.user.accessLevel == 0) return 0
-        // Check if user is collaborator or owner
-        const isTestOwner = this.test.testAdmin.userDocId === this.user.id
-        if (isTestOwner) return 0
-        const isCooperator = this.test.cooperators.find((a) => a.userDocId === this.user.id)
-        if (isCooperator) {
-          return isCooperator.accessLevel
-        }
-      }
+      // Check if the user is defined
+      if (!this.user) return 1
+
+      // If the user is a superadmin
+      if (this.user.accessLevel === 0) return 0
+
+      // Check if the user is a collaborator or owner
+      const isTestOwner = this.test.testAdmin?.userDocId === this.user.id
+      if (isTestOwner) return 0
 
+      // Check if the user is a cooperator and get their access level
+      const coopsInfo = this.test.cooperators?.find((coops) => coops.userDocId === this.user.id)
+      if (coopsInfo) return coopsInfo.accessLevel
       return 1
     },
+
     testAnswerDocLength() {
       if (!this.$store.getters.testAnswerDocument) {
         return 0
@@ -189,18 +180,23 @@ export default {
 
       return heuristicAnswersCount
     },
+
     loading() {
       return this.$store.getters.loading
     },
+
     user() {
       return this.$store.getters.user
     },
+
     test() {
       return this.$store.getters.test
     },
+
     answers() {
       return this.$store.getters.answers || []
     },
+
     totalQuestions() {
       let result = 0
       if (this.object?.heuristics) {
@@ -216,6 +212,7 @@ export default {
       return result
     },
   },
+
   watch: {
     test: async function() {
       if (this.test !== null && this.test !== undefined) {
@@ -223,18 +220,20 @@ export default {
       }
     },
   },
-  async created() {
-    await this.$store.dispatch('getCurrentTestAnswerDoc')
-  },
+
   async created() {
     await this.$store.dispatch('getTest', { id: this.id })
+    await this.$store.dispatch('getCurrentTestAnswerDoc')
   },
+
   beforeMount() {
     window.addEventListener('beforeunload', this.preventNav)
   },
+
   beforeDestroy() {
     window.removeEventListener('beforeunload', this.preventNav)
   },
+
   methods: {
     async submit() {
       this.object.testStructure = this.$store.state.Tests.Test.testStructure
@@ -254,64 +253,30 @@ export default {
       this.$store.dispatch('updateTest', auxT)
     },
 
-    mountAnswerSheet() {
-      const aux = {
-        heuristics: [],
-        tasks: [],
-        progress: 0,
-        total: this.totalQuestions,
-      }
-
-      if (this.object?.heuristics) {
-        this.object.heuristics.forEach((heuris) => {
-          const questions = Array.from(heuris.questions)
-          const arrayQuestions = []
-
-          questions.forEach((el) => {
-            arrayQuestions.push(
-              Object.assign({}, { id: el.id, res: '', com: '', imgUrl: '' }),
-            )
-          })
-
-          aux.heuristics.push(
-            Object.assign(
-              {},
-              {
-                id: heuris.id,
-                total: heuris.total,
-                questions: arrayQuestions,
-              },
-            ),
-          )
-        })
-
-        delete aux.tasks
-      } else if (this.object?.tasks) {
-        aux.tasks = [...this.object.tasks]
-        delete aux.heuristics
-      }
-
-      return aux
-    },
     validate(valid, index) {
       this.valids[index] = valid
     },
+
     validateAll() {
       this.submit()
       this.change=false
     },
+
     preventNav(event) {
       if (!this.change) return
       event.preventDefault()
       event.returnValue = ''
     },
+
     async setIntro() {
       this.object = await Object.assign(this.object, this.test)
     },
+
     setIndex(ind) {
       this.index = ind
     },
   },
+
   beforeRouteLeave(to, from, next) {
     if (this.change) {
       this.dialog = true
diff --git a/src/views/admin/FinalReportView.vue b/src/views/admin/FinalReportView.vue
index f1e86d40..a462a410 100644
--- a/src/views/admin/FinalReportView.vue
+++ b/src/views/admin/FinalReportView.vue
@@ -84,24 +84,25 @@ import TextControls from '@/components/atoms/FinalReportControls.vue'
 import FinalReportSelectionBox from '@/components/atoms/FinalReportSelectionBox.vue'
 import ShowInfo from '@/components/organisms/ShowInfo.vue'
 
-import i18n from '@/i18n'
-
 export default {
-  components: { TextControls, FinalReportSelectionBox, ShowInfo },
+  components: {
+    TextControls,
+    FinalReportSelectionBox,
+    ShowInfo,
+  },
+
   data: () => ({
     title: 'Final report',
-    inputText: '',
     object: {},
-    textIsDone: false,
     step: 1,
-    selectedTestElements: null,
   }),
+
   computed: {
     test() {
       return this.$store.getters.test
     },
   },
-  watch: {},
+
   mounted() {
     this.setInnerHtml()
   },
@@ -126,32 +127,18 @@ export default {
 </script>
 
 <style scoped>
-/* * {
-  padding: 0;
-} */
 .teste {
   position: fixed;
   right: 8%;
   bottom: 10%;
 }
-.teste2 {
-  position: fixed;
-  left: 13%;
-  bottom: 5.5%;
-}
-.cloud-button {
-  padding: 10px;
-}
-.left {
-  justify-items: right;
-}
 
 .final-report-box {
   background-color: whitesmoke;
   width: 100%;
-
   padding: 0;
 }
+
 .form-control {
   background-color: white;
   box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2),
@@ -164,10 +151,4 @@ export default {
   overflow: auto;
   font-size: small;
 }
-
-.text-editor {
-  display: flex;
-  gap: 10px;
-  margin-top: 10px;
-}
 </style>
diff --git a/src/views/admin/ManagerView.vue b/src/views/admin/ManagerView.vue
index fd46249c..50ab4b50 100644
--- a/src/views/admin/ManagerView.vue
+++ b/src/views/admin/ManagerView.vue
@@ -37,7 +37,7 @@
     </v-dialog>
 
     <v-row v-if="test" class="nav pa-0 ma-0" dense>
-      <Drawer :user-access-level-on-test="[accessLevel]" />
+      <Drawer :items="navigator" />
 
       <!-- View -->
       <v-col class="background pa-0 ma-0">
@@ -46,7 +46,7 @@
             <v-row align="center" justify="center" style="height: 100%">
               <v-col class="text-div">
                 <div v-if="accessLevel == 0" class="white--text">
-                  <p 
+                  <p
                     class="mobile-center"
                     style="font-size: 58px; font-weight: 500"
                   >
@@ -55,7 +55,9 @@
                   <p
                     style="font-size: 22px"
                     class="mobile-center"
-                  >{{ test.testTitle }}</p>
+                  >
+                    {{ test.testTitle }}
+                  </p>
                 </div>
                 <div
                   v-else
@@ -208,14 +210,10 @@ export default {
   },
 
   data: () => ({
-    selected: true,
     flagUser: false,
     flagToken: false,
     flagNewUser: false,
     logined: false,
-
-    selectedTest: null,
-    item: 0,
   }),
 
   computed: {
@@ -228,10 +226,6 @@ export default {
       return this.$store.getters.test
     },
 
-    isSettings() {
-      return this.$route.path.includes('/settings')
-    },
-
     topCards() {
       return [
         {
@@ -326,6 +320,40 @@ export default {
       // Check if the test is public
       return this.test.isPublic ? 1 : 2
     },
+
+    navigator() {
+      if (!this.test) return []
+
+      const items = [
+        { title: 'Manager', icon: 'mdi-home', path: `/managerview/${this.test.id}` }, 
+      ]
+
+      if (this.test.template) {
+        items.push({ title: 'Template', icon: 'mdi-file-compare', path: `/templateview/${this.test.template.id}` })
+      }
+
+      if (this.accessLevel == 0) {
+        items.push(
+          { title: 'Test', icon: 'mdi-file-document-edit', path: `/edittest/${this.test.id}` },
+          { title: 'Preview', icon: 'mdi-file-eye', path: `/testview/${this.test.id}` },
+          { title: 'Reports', icon: 'mdi-book-multiple', path: `/reportview/${this.test.id}` },
+          { title: 'Answers', icon: 'mdi-order-bool-ascending-variant', path: `/answerview/${this.test.id}` },
+          { title: 'Final Report', icon: 'mdi-file-document', path: `/finalreportview/${this.test.id}` },
+          { title: 'Cooperators', icon: 'mdi-account-group', path: `/cooperators/${this.test.id}` },
+          { title: 'Settings', icon: 'mdi-cog', path: `/settingsview/${this.test.id}` },
+        )
+      }
+      
+      if (this.accessLevel == 1) {
+        items.push(
+          { title: 'Answer Test', icon: 'mdi-file-document', path: `/testview/${this.test.id}` },
+          { title: 'Reports', icon: 'mdi-book-multiple', path: `/reportview/${this.test.id}` },
+          { title: 'Answers', icon: 'mdi-order-bool-ascending-variant', path: `/answerview/${this.test.id}` },
+        )
+      }
+
+      return items
+    },
   },
 
   watch: {
@@ -351,11 +379,9 @@ export default {
 
   methods: {
     go(item) {
-      if (item.id === undefined) this.$router.push(item).catch(() => {})
-      else {
-        if (item.id === 2) window.open(item.path)
-        else this.$router.push(item.path).catch(() => {})
-      }
+      if (item.id === undefined) return this.$router.push(item).catch(() => {})
+      if (item.id === 2) return window.open(item.path)
+      return this.$router.push(item.path).catch(() => {})
     },
 
     setFlag(flag, value) {