Refactor code and fix some styling issues
Relates to MS-781
This commit is contained in:
parent
2e5fa555d6
commit
9837686319
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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>;
|
||||
|
|
|
|||
|
|
@ -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[];
|
||||
me: any;
|
||||
modules: ModuleNode[];
|
||||
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%;
|
||||
|
||||
&__filterselection {
|
||||
&__filter-selection {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
column-gap: $medium-spacing;
|
||||
}
|
||||
|
||||
&__dropdown {
|
||||
margin-right: $medium-spacing;
|
||||
width: 300px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
&__language-selection {
|
||||
&__language-switcher {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
props: ['metaTitle', 'title', 'teaser', 'id', 'slug', 'heroImage', 'level', 'category', 'language'],
|
||||
export interface Props {
|
||||
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: {
|
||||
moduleLink() {
|
||||
if (this.slug) {
|
||||
return {
|
||||
name: 'module',
|
||||
params: {
|
||||
slug: this.slug,
|
||||
},
|
||||
};
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
const moduleLink = computed(() => {
|
||||
if (props.slug) {
|
||||
return {
|
||||
name: 'module',
|
||||
params: {
|
||||
slug: props.slug,
|
||||
},
|
||||
};
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -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-right: 1rem;
|
||||
padding: $small-spacing $medium-spacing;
|
||||
border: none;
|
||||
@include small-text;
|
||||
|
||||
&--active {
|
||||
background-color: white;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue