Refactor code and fix some styling issues

Relates to MS-781

client/src/__generated__/gql.ts

@@ -17,6 +17,7 @@ const documents = {
     "\n    mutation SetLanguage($language: String!) {\n      setLanguage(language: $language) @client {\n        language\n      }\n    }\n  ": types.SetLanguageDocument,
     "\n        query ReadOnlyQuery {\n          me {\n            readOnly\n            selectedClass {\n              readOnly\n            }\n          }\n        }\n      ": types.ReadOnlyQueryDocument,
     "\n    query ModuleFilterQuery {\n      moduleLevels {\n        name\n        id\n        filterAttributeType\n      }\n      moduleCategories {\n        name\n        id\n        filterAttributeType\n      }\n      me {\n        language @client\n      }\n    }\n  ": types.ModuleFilterQueryDocument,
+    "\n    mutation UpdateLastModuleLevelMutation($input: UpdateLastModuleLevelInput!) {\n      updateLastModuleLevel(input: $input) {\n        clientMutationId\n        user {\n          username\n          lastModuleLevel {\n            name\n            id\n          }\n        }\n      }\n    }\n  ": types.UpdateLastModuleLevelMutationDocument,
     "\n    query ModuleTitleQuery($slug: String) {\n      module(slug: $slug) {\n        title\n      }\n    }\n  ": types.ModuleTitleQueryDocument,
     "\n  fragment SnapshotListItem on SnapshotNode {\n    shared\n  }\n": types.SnapshotListItemFragmentDoc,
     "\n  fragment SnapshotTitle on SnapshotNode {\n    title\n  }\n": types.SnapshotTitleFragmentDoc,
@@ -57,6 +58,10 @@ export function graphql(source: "\n        query ReadOnlyQuery {\n          me {
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n    query ModuleFilterQuery {\n      moduleLevels {\n        name\n        id\n        filterAttributeType\n      }\n      moduleCategories {\n        name\n        id\n        filterAttributeType\n      }\n      me {\n        language @client\n      }\n    }\n  "): (typeof documents)["\n    query ModuleFilterQuery {\n      moduleLevels {\n        name\n        id\n        filterAttributeType\n      }\n      moduleCategories {\n        name\n        id\n        filterAttributeType\n      }\n      me {\n        language @client\n      }\n    }\n  "];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n    mutation UpdateLastModuleLevelMutation($input: UpdateLastModuleLevelInput!) {\n      updateLastModuleLevel(input: $input) {\n        clientMutationId\n        user {\n          username\n          lastModuleLevel {\n            name\n            id\n          }\n        }\n      }\n    }\n  "): (typeof documents)["\n    mutation UpdateLastModuleLevelMutation($input: UpdateLastModuleLevelInput!) {\n      updateLastModuleLevel(input: $input) {\n        clientMutationId\n        user {\n          username\n          lastModuleLevel {\n            name\n            id\n          }\n        }\n      }\n    }\n  "];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

client/src/__generated__/graphql.ts

@@ -2389,6 +2389,13 @@ export type ModuleFilterQueryQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type ModuleFilterQueryQuery = { __typename?: 'Query', moduleLevels?: Array<{ __typename?: 'ModuleLevelNode', name: string, id: string, filterAttributeType: ModuleLevelFilterAttributeType } | null> | null, moduleCategories?: Array<{ __typename?: 'ModuleCategoryNode', name: string, id: string, filterAttributeType: ModuleCategoryFilterAttributeType } | null> | null, me?: { __typename?: 'PrivateUserNode', language?: string | null } | null };
 
+export type UpdateLastModuleLevelMutationMutationVariables = Exact<{
+  input: UpdateLastModuleLevelInput;
+}>;
+
+
+export type UpdateLastModuleLevelMutationMutation = { __typename?: 'Mutation', updateLastModuleLevel?: { __typename?: 'UpdateLastModuleLevelPayload', clientMutationId?: string | null, user?: { __typename?: 'PrivateUserNode', username: string, lastModuleLevel?: { __typename?: 'ModuleLevelNode', name: string, id: string } | null } | null } | null };
+
 export type ModuleTitleQueryQueryVariables = Exact<{
   slug?: InputMaybe<Scalars['String']['input']>;
 }>;
@@ -2444,6 +2451,7 @@ export const LanguageQueryDocument = {"kind":"Document","definitions":[{"kind":"
 export const SetLanguageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SetLanguage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"language"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"setLanguage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"language"},"value":{"kind":"Variable","name":{"kind":"Name","value":"language"}}}],"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"}}]}}]}}]} as unknown as DocumentNode<SetLanguageMutation, SetLanguageMutationVariables>;
 export const ReadOnlyQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ReadOnlyQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"me"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"readOnly"}},{"kind":"Field","name":{"kind":"Name","value":"selectedClass"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"readOnly"}}]}}]}}]}}]} as unknown as DocumentNode<ReadOnlyQueryQuery, ReadOnlyQueryQueryVariables>;
 export const ModuleFilterQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleFilterQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"moduleLevels"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"filterAttributeType"}}]}},{"kind":"Field","name":{"kind":"Name","value":"moduleCategories"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"filterAttributeType"}}]}},{"kind":"Field","name":{"kind":"Name","value":"me"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"language"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}]}]}}]}}]} as unknown as DocumentNode<ModuleFilterQueryQuery, ModuleFilterQueryQueryVariables>;
+export const UpdateLastModuleLevelMutationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateLastModuleLevelMutation"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateLastModuleLevelInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateLastModuleLevel"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"clientMutationId"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"lastModuleLevel"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]}}]} as unknown as DocumentNode<UpdateLastModuleLevelMutationMutation, UpdateLastModuleLevelMutationMutationVariables>;
 export const ModuleTitleQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleTitleQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]}}]} as unknown as DocumentNode<ModuleTitleQueryQuery, ModuleTitleQueryQueryVariables>;
 export const ModuleEditModeQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleEditModeQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"module"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"slug"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"inEditMode"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}]},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]} as unknown as DocumentNode<ModuleEditModeQueryQuery, ModuleEditModeQueryQueryVariables>;
 export const ChapterQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ChapterQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"chapter"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}}]} as unknown as DocumentNode<ChapterQueryQuery, ChapterQueryQueryVariables>;

client/src/components/modules/ModuleFilter.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="module-filter">
-    <div class="module-filter__filterselection">
+    <div class="module-filter__filter-selection">
       <Dropdown
         class="module-filter__dropdown"
         :selected-item="selectedLevel"
@@ -15,7 +15,7 @@
         @update:selectedItem="(newItem) => (selectedCategory = newItem)"
       />
 
-      <language-switcher />
+      <language-switcher class="module-filter__language-switcher" />
     </div>
     <div class="topic__modules">
       <module-teaser
@@ -34,10 +34,11 @@ import { useQuery, useMutation } from '@vue/apollo-composable';
 import Dropdown from '@/components/ui/Dropdown.vue';
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
 import { graphql } from '@/__generated__';
+import { ModuleCategoryNode, ModuleLevelNode, ModuleNode, PrivateUserNode } from '@/__generated__/graphql';
 
 const props = defineProps<{
-  modules: Object[];
+  modules: ModuleNode[];
-  me: any;
+  me: PrivateUserNode;
 }>();
 
 const initialCategory = {
@@ -46,9 +47,9 @@ const initialCategory = {
   filterAttributeType: 'ALL',
 };
 
-const initialLevel = {
+const initialLevel: ModuleLevelNode = {
   name: 'Alle Lehrjahre',
-  id: null,
+  id: '',
   filterAttributeType: 'ALL',
 };
 
@@ -72,7 +73,7 @@ const { result: moduleFilterResult } = useQuery(
   `)
 );
 
-const selectedLevel = ref(initialLevel);
+const selectedLevel = ref<ModuleLevelNode>(initialLevel);
 const selectedCategory = ref(initialCategory);
 
 selectedLevel.value = loadDefaultLevel(props.me);
@@ -87,11 +88,16 @@ const filteredModules = computed(
     ) || []
 );
 
-function loadDefaultLevel(me) {
+function loadDefaultLevel(me: PrivateUserNode) {
   return me?.lastModuleLevel || initialLevel;
 }
 
-function filterModule(module: Object, selectedLevel, selectedCategory, selectedLanguage) {
+function filterModule(
+  module: ModuleNode,
+  selectedLevel: ModuleLevelNode,
+  selectedCategory: ModuleCategoryNode,
+  selectedLanguage: string
+) {
   let filterExpression = true;
 
   filterExpression =
@@ -101,27 +107,27 @@ function filterModule(module: Object, selectedLevel, selectedCategory, selectedL
   return filterExpression;
 }
 
-const updateLevel = (level) => {
+const updateLevel = (level: ModuleLevelNode) => {
   selectedLevel.value = level;
   updateLastModuleLevelUser(level);
 };
 
-const filterByLevel = (module, level) => {
+const filterByLevel = (module: ModuleNode, level: ModuleLevelNode) => {
   return level.filterAttributeType === 'ALL' || module.level?.id === level.id;
 };
 
-const filterByCategory = (module, category) => {
+const filterByCategory = (module: ModuleNode, category: ModuleCategoryNode) => {
   return category.filterAttributeType === 'ALL' || module.category?.id === category.id;
 };
 
-const filterByLanguage = (module: Object, language: Object) => {
+const filterByLanguage = (module: ModuleNode, language: string) => {
   // TODO: implement filter by language here.
   return module.language === language;
 };
 
 const { mutate: updateLastModuleLevel } = useMutation(
   graphql(`
-    mutation ($input: UpdateLastModuleLevelInput!) {
+    mutation UpdateLastModuleLevelMutation($input: UpdateLastModuleLevelInput!) {
       updateLastModuleLevel(input: $input) {
         clientMutationId
         user {
@@ -136,7 +142,7 @@ const { mutate: updateLastModuleLevel } = useMutation(
   `)
 );
 
-const updateLastModuleLevelUser = (moduleLevel: Object) => {
+const updateLastModuleLevelUser = (moduleLevel: ModuleLevelNode) => {
   updateLastModuleLevel({
     input: {
       id: moduleLevel.id,
@@ -152,20 +158,17 @@ const updateLastModuleLevelUser = (moduleLevel: Object) => {
   // TODO: how do I correcty set the with of the whole thig including the grid for the modules?
   // TODO: Farbe des Arrows für Dropdowns muss platfrom habhängig sein MS-775
 
-  width: 75%;
+  &__filter-selection {
-
-  &__filterselection {
     display: flex;
-    flex-wrap: wrap;
+    justify-content: flex-start;
-    justify-content: space-between;
+    column-gap: $medium-spacing;
   }
 
   &__dropdown {
-    margin-right: $medium-spacing;
+    width: 180px;
-    width: 300px;
   }
 
-  &__language-selection {
+  &__language-switcher {
     margin-left: auto;
   }
 }

client/src/components/modules/ModuleTeaser.vue

@@ -23,29 +23,37 @@
   </router-link>
 </template>
 
-<script>
+<script setup lang="ts">
 import Pill from '@/components/ui/Pill.vue';
+import { ModuleCategoryNode, ModuleLevelNode } from '@/__generated__/graphql';
+import { computed } from '@vue/reactivity';
 
-export default {
+export interface Props {
-  props: ['metaTitle', 'title', 'teaser', 'id', 'slug', 'heroImage', 'level', 'category', 'language'],
+  metaTitle: string;
+  title: string;
+  teaser: string;
+  id: string;
+  slug: string;
+  heroImage: string;
+  level: ModuleLevelNode;
+  category: ModuleCategoryNode;
+  language: string;
+}
 
-  components: { Pill },
+const props = defineProps<Props>();
 
-  computed: {
+const moduleLink = computed(() => {
-    moduleLink() {
+  if (props.slug) {
-      if (this.slug) {
+    return {
-        return {
+      name: 'module',
-          name: 'module',
+      params: {
-          params: {
+        slug: props.slug,
-            slug: this.slug,
+      },
-          },
+    };
-        };
+  } else {
-      } else {
+    return {};
-        return {};
+  }
-      }
+});
-    },
-  },
-};
 </script>
 
 <style scoped lang="scss">

client/src/components/ui/PillRadioButtons.vue

@@ -30,17 +30,17 @@ function updateSelectedItem(item: string) {
 .pill-radio {
   display: flex;
   overflow: hidden;
-  height: 40px;
 
   &__button {
     flex: 1;
     cursor: pointer;
     background-color: $color-silver-light;
+    text-transform: uppercase;
 
     outline: none;
-    padding-left: 1rem;
+    padding: $small-spacing $medium-spacing;
-    padding-right: 1rem;
     border: none;
+    @include small-text;
 
     &--active {
       background-color: white;

client/src/pages/topic-page.vue

@@ -168,6 +168,7 @@ export default {
   }
   grid-template-columns: 1fr;
   @include desktop {
+    max-width: 1500px; // 300px (sidebar) + 3x 380 (max width teaser) + 2x 60 (column gap)
     grid-template-columns: 300px 1fr;
   }