minor templates refactor

frontend/src/assets/colors.scss

@@ -1,5 +1,12 @@
-$--green-success: #1b8751;
 $--red-error: #e35448;
+$--red-wrong-answer: #ff0000ff;
+$--red-wrong-answer-background: #ff00007f;
+
+$--green-success: #1b8751;
+$--green-correct-answer: #008000ff;
+$--green-correct-answer-background: #00ff00cc;
+$--green-selected-answer-background: #0080007f;
+
 $--yellow-warning: #f6bc32;
 $--white: #ffffff;
 $--dark: #00000025;

frontend/src/feature/cards/components/CardDetailsComponent.vue

@@ -7,8 +7,7 @@
           <v-card-subtitle class="pa-2 ma-2 d-flex justify-space-between">
             <v-card-text v-text="'Tags: '"/>
             <v-list class="ma-0 pa-0 d-flex flex-row flex-wrap">
-              <v-list-item v-for="tag in card.tags" :key="tag"
-                           :title="tag"/>
+              <v-list-item v-for="tag in card.tags" :key="tag" :title="tag"/>
             </v-list>
           </v-card-subtitle>
 
@@ -33,10 +32,8 @@
 
           <v-container>
             <v-row class="pa-0 d-flex w-100 justify-space-between align-center">
-              <v-btn color="green" :disabled="!selected && !providedAnswer"
-                     @click="checkCorrectAnswer()" variant="text"
-                     border>
-                <v-icon icon="mdi-check" size="large" start/>
+              <v-btn @click="highlightCorrectAnswers()" :disabled="!selected && !providedAnswer"
+                     prepend-icon="mdi-check-circle" color="green" variant="text">
                 Check Answer
               </v-btn>
               <v-card-subtitle v-show="answerShown" v-text="showCorrectAnswer()"/>
@@ -74,12 +71,11 @@ const answerShown = ref(false);
 const selected = ref([] as string[]);
 const providedAnswer = ref('');
 
-const parseOption = (index: number, option: string): string => {
-  return `${String.fromCharCode(65 + index)}. ${option}`;
-};
-
-const isCorrect = (option: string) => {
-  return getCorrectAnswer()?.includes(option);
+const parseOption = (index: number, option: string) => `${String.fromCharCode(65 + index)}. ${option}`;
+const isCorrect = (option: string) => getCorrectAnswer()?.includes(option);
+const highlightCorrectAnswers = () => answerShown.value = !answerShown.value;
+const showCorrectAnswer = () => {
+  return `Correct answer${props.card.type === CardType.MULTIPLE_CHOICE ? 's' : ''}: ${getCorrectAnswer()}`;
 };
 
 const toggleOption = (option: string) => {
@@ -95,10 +91,6 @@ const toggleOption = (option: string) => {
   }
 };
 
-const checkCorrectAnswer = () => {
-  answerShown.value = !answerShown.value;
-};
-
 const getCorrectAnswer = () => {
   const card = props.card;
   switch (card.type) {
@@ -110,29 +102,26 @@ const getCorrectAnswer = () => {
       return card.correctOptions.map(i => card.options[Number(i)]).join(", ");
   }
 };
-
-const showCorrectAnswer = () => {
-  const correctAnswer = getCorrectAnswer();
-  return `Correct answer${props.card.type === CardType.MULTIPLE_CHOICE ? 's' : ''}: ${correctAnswer}`;
-};
 </script>
 
 <style scoped lang="scss">
+@import "@/assets/colors";
+
 .correct {
-  border: 1px solid green;
+  border: 1px solid $--green-correct-answer;
   border-radius: .25rem;
-  background-color: rgb(0, 255, 0, .8);
+  background-color: $--green-correct-answer-background;
 }
 
 .selected {
-  border: 1px solid green;
+  border: 1px solid $--green-correct-answer;
   border-radius: .25rem;
-  background-color: rgb(0, 128, 0, .5);
+  background-color: $--green-selected-answer-background;
 }
 
 .error {
-  border: 1px solid red;
+  border: 1px solid $--red-wrong-answer;
   border-radius: .25rem;
-  background-color: rgb(255, 0, 0, .5);
+  background-color: $--red-wrong-answer-background;
 }
 </style>

frontend/src/feature/cards/components/CardItemScroller.vue

@@ -1,17 +1,16 @@
 <template>
-  <v-infinite-scroll :max-height="'60vh'"
-                     :items="items"
+  <v-infinite-scroll :items="items"
                      :onLoad="fetchCardsPage"
+                     :max-height="'60vh'"
                      empty-text="No more cards">
     <template v-for="(item, index) in items" :key="item">
       <div
-        :class="['pa-2', 'd-flex', 'justify-space-between', 'align-center', index % 2 === 0 ? 'bg-grey-lighten-2' : '']">
-        <v-avatar color="primary" size="large" class="mr-5">{{ index + 1 }}</v-avatar>
+        :class="['pa-2', 'd-flex', 'justify-space-between', 'align-center', {'bg-grey-lighten-2': index % 2 === 0}]">
+        <v-avatar v-text="`${index + 1}`" color="primary" size="large" class="mr-5"/>
         {{ item.title }}
-        <v-spacer></v-spacer>
-        <v-avatar color="primary" size="large" class="mr-10">{{ item.type.toUpperCase() }}</v-avatar>
-        <open-mdi-button tooltip-text="Open Card Details"
-                         :clickHandler="() => openCard(item.id)"/>
+        <v-spacer/>
+        <v-avatar v-text="item.type.toUpperCase()" color="primary" size="large" class="mr-10"/>
+        <open-mdi-button :clickHandler="() => openCard(item.id)" tooltip-text="Open Card Details"/>
       </div>
     </template>
   </v-infinite-scroll>
@@ -28,10 +27,21 @@ const props = defineProps<({
   categoryId: string,
   titleFilter: string,
 })>();
+
 const items = ref([] as CardItem[]);
 const router = useRouter();
 const pagePointer = ref({current: 0, isLast: false});
 
+watch(() => props.titleFilter, async (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    pagePointer.value = {current: 0, isLast: false}; // reset the page pointer
+    items.value = []; // clear the items array
+    await fetchCardsPage({done: () => console.log("Manual reload after filter change")});
+  }
+});
+
+const openCard = (id: string) => router.push(`/card/${props.categoryId}/${id}`);
+
 const fetchCardsPage = async ({done}: { done: Function }) => {
   if (pagePointer.value.isLast) {
     done('empty');
@@ -47,17 +57,5 @@ const fetchCardsPage = async ({done}: { done: Function }) => {
     items.value.push(cardItem);
   }
   done('ok');
-}
-
-watch(() => props.titleFilter, async (newVal, oldVal) => {
-  if (newVal !== oldVal) {
-    pagePointer.value = {current: 0, isLast: false}; // reset the page pointer
-    items.value = []; // clear the items array
-    await fetchCardsPage({done: () => console.log("Manual reload after filter change")});
-  }
-});
-
-const openCard = (id: string) => {
-  router.push(`/card/${props.categoryId}/${id}`);
-}
+};
 </script>

frontend/src/feature/cards/composables/useCardsService.ts

@@ -8,15 +8,15 @@ const useCardsService = () => {
   const getCards = async (categoryId: string, titleFilter: string, page: number) => {
     return await useApi().get<CardPage>(ENDPOINT,
       {categoryId: categoryId, page: String(page), titleFilter: titleFilter});
-  }
+  };
 
   const getCardById = async (cardId: string, categoryId: string) => {
     return await useApi().get<Card>(`${ENDPOINT}/${cardId}`, {categoryId: categoryId});
-  }
+  };
 
   const getCardCount = async (categoryId: string) => {
     return await useApi().get<number>(`${ENDPOINT}/count`, {categoryId: categoryId});
-  }
+  };
 
   return {
     getCards,

frontend/src/feature/cards/pages/CardDetailsPage.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <card-details-component :card="card"></card-details-component>
+    <card-details-component :card="card"/>
   </v-container>
 </template>
 

frontend/src/feature/cards/pages/CardOverviewPage.vue

@@ -1,18 +1,12 @@
 <template>
   <v-container>
-    <v-card class="pa-2 ma-2 mx-auto d-flex flex-column justify-space-between"
-            fill-height
-            color="containerBackground">
-      <v-card-title class="text-center text-h4">
-        Cards in {{ categoryName }}
-      </v-card-title>
+    <v-card class="pa-2 ma-2 mx-auto d-flex flex-column justify-space-between" color="containerBackground" fill-height>
+      <v-card-title v-text="`Cards in ${categoryName}`" class="text-center text-h4"/>
       <v-form @submit.prevent class="d-flex justify-space-between align-center">
-        <v-text-field label="Filter on title"
-                      prepend-inner-icon="mdi-magnify"
-                      v-model="filter.input">
-        </v-text-field>
-        <submit-mdi-button :disabled="!filter.input"
-                           :clickHandler="filterOnTitle"/>
+        <v-text-field v-model="filter.input"
+                      label="Filter on title"
+                      prepend-inner-icon="mdi-magnify"/>
+        <submit-mdi-button :clickHandler="filterOnTitle" :disabled="!filter.input"/>
       </v-form>
       <card-item-scroller :categoryId="categoryId" :titleFilter="filter.title"/>
     </v-card>
@@ -28,17 +22,17 @@ import CardItemScroller from "@/feature/cards/components/CardItemScroller.vue";
 const props = defineProps<({
   categoryId: string
 })>();
+
 const categoryName = ref("");
 const filter = ref({
   input: "",
   title: "", // more to come
 });
-const filterOnTitle = () => {
-  filter.value.title = filter.value.input;
-  console.log("Filtering on title: " + filter.value.title);
-}
+
 onMounted(async () => {
   categoryName.value = (await useCategoriesService().getCategoryById(props.categoryId)).name;
 });
+
+const filterOnTitle = () => filter.value.title = filter.value.input;
 </script>
 

frontend/src/feature/category/components/CategoryCard.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-card color="secondary" >
+  <v-card color="secondary">
     <v-card-title class="d-flex justify-space-between align-center">
-      <h4>{{ category.name }}</h4>
+      <h4 v-text="category.name"/>
       <div class="mr-n6">
         <!--  ms-n6  = negative margin 3 on sides - also ml, mr, ma, mt, mb -->
         <open-mdi-button tooltip-text="Open Category"
@@ -14,30 +14,24 @@
                            :clickHandler="deleteCategory"/>
       </div>
     </v-card-title>
-
-    <v-card-text>
-      {{ category.description || "No description given" }}
-    </v-card-text>
-
+    <v-card-text v-text="category.description || 'No description given'"/>
     <div class="px-4">
       <v-switch
         :model-value="expanded"
         :label="`Show details`"
-        :color="`${expanded ? '#43A047' : '#EEEEEE'}`"
+        :color="toggleColor"
         density="compact"
         inset
         @click="() => emit('update:expanded', !expanded)"
-      ></v-switch>
+      />
     </div>
-
-    <v-divider></v-divider>
-
+    <v-divider/>
     <v-expand-transition>
       <div v-if="expanded && !editRequested">
         <v-list density="compact" :lines="false">
-          <v-list-item :title="`🔥 Your access: ${getAccess(category)}`"></v-list-item>
-          <v-list-item :title="`🍔 #Cards in Category: ${category.numberOfCards}`"></v-list-item>
-          <v-list-item :title="`🧲 Id: ${category.id}`"></v-list-item>
+          <v-list-item :title="`🔥 Your access: ${getAccess(category)}`"/>
+          <v-list-item :title="`🍔 #Cards in Category: ${category.numberOfCards}`"/>
+          <v-list-item :title="`🧲 Id: ${category.id}`"/>
         </v-list>
       </div>
       <v-container v-if="editRequested">
@@ -56,7 +50,7 @@
 import {Category} from "@/feature/category/model/category";
 import {getAccess, getDeleteUri, getPutUri} from "@/feature/category/composables/useCategory";
 import {useRouter} from "vue-router";
-import {ref} from "vue";
+import {computed, ref} from "vue";
 import categoryService from "@/feature/category/composables/useCategoriesService";
 import OpenMdiButton from "@/shared/components/OpenMdiButton.vue";
 import DeleteMdiButton from "@/shared/components/DeleteMdiButton.vue";
@@ -67,17 +61,22 @@ const props = defineProps<({
   category: Category,
   expanded: boolean
 })>();
+
 const emit = defineEmits<{
   'update:expanded': [val: boolean]
   'reload': [val: boolean]
 }>();
 
+const router = useRouter();
 const putUri = getPutUri(props.category);
 const deleteUri = getDeleteUri(props.category);
 const editRequested = ref(false);
 const updateRequest = ref({name: "", description: ""});
 
-const router = useRouter();
+const toggleColor = computed(() => props.expanded ? '#43a047' : '#eeeeee');
+
+const resetRequests = () => editRequested.value = false;
+
 const openCategory = () => {
   resetRequests();
   router.push(`/category/${props.category.id}`);
@@ -98,8 +97,4 @@ const deleteCategory = async () => {
   await categoryService().deleteCategory(props.category.id);
   emit('reload', true);
 };
-
-const resetRequests = () => {
-  editRequested.value = false;
-}
 </script>