ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Merge branch 'feature/MS-773-GrundlagenwissenRedesign' into develop

This commit is contained in:
Lorenz Padberg 2023-08-30 16:15:33 +02:00
parent b26a603e2f 7959b1e53c
commit d2734425ac
18 changed files with 194 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/__generated__/gql.ts generated
View File

@ -24,6 +24,7 @@ const documents = {
"\n query ModuleEditModeQuery($slug: String) {\n module(slug: $slug) {\n inEditMode @client\n slug\n }\n }\n": types.ModuleEditModeQueryDocument,
"\n query ChapterQuery($id: ID!) {\n chapter(id: $id) {\n path\n }\n }\n ": types.ChapterQueryDocument,
"\n query ContentBlockQuery($id: ID!) {\n contentBlock(id: $id) {\n path\n }\n }\n ": types.ContentBlockQueryDocument,
"\n query MeLanguage {\n me {\n language @client\n }\n }\n ": types.MeLanguageDocument,
"\n query ModuleSnapshotsQuery($slug: String!) {\n module(slug: $slug) {\n id\n title\n metaTitle\n slug\n topic {\n title\n }\n snapshots {\n ...SnapshotListItem\n }\n }\n }\n ": types.ModuleSnapshotsQueryDocument,
"\n query ModuleSolutions($slug: String) {\n module(slug: $slug) {\n solutionsEnabled\n slug\n }\n }\n": types.ModuleSolutionsDocument,
};
@ -86,6 +87,10 @@ export function graphql(source: "\n query ChapterQuery($id: ID!) {\n cha
* 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 ContentBlockQuery($id: ID!) {\n contentBlock(id: $id) {\n path\n }\n }\n "): (typeof documents)["\n query ContentBlockQuery($id: ID!) {\n contentBlock(id: $id) {\n path\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 query MeLanguage {\n me {\n language @client\n }\n }\n "): (typeof documents)["\n query MeLanguage {\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.
*/

7
client/src/__generated__/graphql.ts generated
View File

@ -616,6 +616,7 @@ export type InstrumentNode = Node & {
contents?: Maybe<Scalars['GenericStreamFieldType']['output']>;
id: Scalars['ID']['output'];
intro: Scalars['String']['output'];
language?: Maybe<Scalars['String']['output']>;
slug: Scalars['String']['output'];
title: Scalars['String']['output'];
type?: Maybe<InstrumentTypeNode>;
@ -2428,6 +2429,11 @@ export type ContentBlockQueryQueryVariables = Exact<{
export type ContentBlockQueryQuery = { __typename?: 'Query', contentBlock?: { __typename?: 'ContentBlockNode', path?: string | null } | null };
export type MeLanguageQueryVariables = Exact<{ [key: string]: never; }>;
export type MeLanguageQuery = { __typename?: 'Query', me?: { __typename?: 'PrivateUserNode', language?: string | null } | null };
export type ModuleSnapshotsQueryQueryVariables = Exact<{
slug: Scalars['String']['input'];
}>;
@ -2456,5 +2462,6 @@ export const ModuleTitleQueryDocument = {"kind":"Document","definitions":[{"kind
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>;
export const ContentBlockQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ContentBlockQuery"},"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":"contentBlock"},"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<ContentBlockQueryQuery, ContentBlockQueryQueryVariables>;
export const MeLanguageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"MeLanguage"},"selectionSet":{"kind":"SelectionSet","selections":[{"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<MeLanguageQuery, MeLanguageQueryVariables>;
export const ModuleSnapshotsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleSnapshotsQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NonNullType","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":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"metaTitle"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"topic"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}}]}},{"kind":"Field","name":{"kind":"Name","value":"snapshots"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"SnapshotListItem"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"SnapshotListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"SnapshotNode"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"shared"}}]}}]} as unknown as DocumentNode<ModuleSnapshotsQueryQuery, ModuleSnapshotsQueryQueryVariables>;
export const ModuleSolutionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModuleSolutions"},"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":"solutionsEnabled"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}}]}}]} as unknown as DocumentNode<ModuleSolutionsQuery, ModuleSolutionsQueryVariables>;

8
client/src/components/content-blocks/assignment/FinalSubmission.vue
View File

@ -71,7 +71,7 @@ export default {
padding: 15px;
font-size: toRem(17px);
font-family: $sans-serif-font-family;
margin-bottom: 20px;
margin-bottom: $medium-spacing;
font-weight: $font-weight-regular;
overflow-wrap: break-word;
@ -90,10 +90,10 @@ export default {
}
&__explanation-icon {
width: 40px;
height: 40px;
width: $large-icon-dimension;
height: $large-icon-dimension;
fill: $color-brand;
margin-right: 8px;
margin-right: $small-spacing;
}
&__explanation-text {

12
client/src/components/icons/SearchMagnifyingGlass.vue Normal file
View File

@ -0,0 +1,12 @@
`<template>
<svg
data-name="shape"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
>
<path
d="m82.3799,17.6201c-6.5254-6.5264-15.2012-10.1201-24.4297-10.1201s-17.9053,3.5938-24.4307,10.1201c-6.5264,6.5254-10.1201,15.2012-10.1201,24.4297,0,8.3906,2.9788,16.3176,8.4223,22.5933l-23.5893,23.5894c-.9766.9766-.9766,2.5586,0,3.5352.4883.4883,1.1279.7324,1.7676.7324s1.2793-.2441,1.7676-.7324l23.5893-23.5894c6.2757,5.4436,14.2028,8.4224,22.5933,8.4224,9.2285,0,17.9043-3.5938,24.4297-10.1201,6.5254-6.5254,10.1201-15.2021,10.1201-24.4307s-3.5938-17.9043-10.1201-24.4297Zm-3.5352,45.3252c-5.5811,5.5811-13.002,8.6553-20.8945,8.6553s-15.3145-3.0742-20.8955-8.6553-8.6553-13.002-8.6553-20.8955,3.0742-15.3135,8.6553-20.8945,13.002-8.6553,20.8955-8.6553,15.3135,3.0742,20.8945,8.6553,8.6553,13.002,8.6553,20.8945-3.0742,15.3145-8.6553,20.8955Z"
/>
</svg>
</template>
`

66
client/src/components/instruments/FilterBar.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<div class="filter-bar">
<div class="filter-bar__input-wrapper">
<input
class="filter-bar__search-input skillbox-input"
type="text"
placeholder="Suchbegriff eingeben..."
ref="searchInputRef"
v-model="searchQuery"
@input="updateSearchQuery"
/>
<search-magnifying-glass class="filter-bar__search-icon"></search-magnifying-glass>
</div>
<language-switcher class="filter-bar__language-selection" />
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import SearchMagnifyingGlass from '@/components/icons/SearchMagnifyingGlass.vue';
import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
const searchQuery = ref('');
const searchInputRef = ref(null);
const emit = defineEmits(['update:searchQuery']);
const updateSearchQuery = () => {
emit('update:searchQuery', searchQuery.value);
};
onMounted(() => {
searchInputRef.value?.focus();
});
</script>
<style scoped lang="scss">
@import 'styles/helpers';
.filter-bar {
display: flex;
margin-bottom: $large-spacing;
&__input-wrapper {
position: relative;
}
&__search-input {
width: $medium-input-width;
border: 1px solid $color-silver;
}
&__search-icon {
position: absolute;
width: $default-icon-dimension;
height: $default-icon-dimension;
right: $medium-spacing;
top: 50%;
transform: translateY(-50%);
}
&__language-selection {
margin-left: auto;
}
}
</style>

18
client/src/components/instruments/FilterGroup.vue
View File

@ -9,7 +9,7 @@
:id="category.id"
@filter="setCategoryFilter(category.id)"
/>
<div class="filter-group__children">
<div class="filter-group__children" v-if="$flavor.showInstrumentSubCategories">
<filter-entry
:data-cy="`filter-${type.type}`"
:category="type.category"
@ -26,9 +26,7 @@
<script>
import { defineComponent } from 'vue';
import FilterEntry from '@/components/instruments/FilterEntry.vue';
import SET_FILTER_MUTATION from 'gql/local/mutations/setInstrumentFilter.gql';
import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
export default defineComponent({
props: {
@ -48,20 +46,6 @@ export default defineComponent({
components: {
FilterEntry,
},
apollo: {
instrumentFilter: {
query: INSTRUMENT_FILTER_QUERY,
},
},
data() {
return {
instrumentFilter: {
currentFilter: '',
},
};
},
inheritAttrs: false,
methods: {

2
client/src/components/modules/Module.vue
View File

@ -13,7 +13,7 @@
{{ module.metaTitle }}
</h2>
<div class="module__categoryindicators">
<div class="module__categoryindicators" v-if="$flavor.showModuleFilter">
<pill :text="module.level?.name"></pill>
<pill :text="module.category?.name"></pill>
</div>

17
client/src/components/modules/ModuleFilter.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="module-filter">
<div class="module-filter__filter-selection">
<div class="module-filter__filter-selection" v-if="$flavor.showModuleFilter">
<Dropdown
class="module-filter__dropdown"
:selected-item="selectedLevel"
@ -17,6 +17,11 @@
<language-switcher class="module-filter__language-switcher" />
</div>
<info-message
class="module-filter__no-modules-text"
v-if="modules.length > 1 && filteredModules.length === 0"
>Für die ausgewählten Filtereinstellungen sind keine {{ $flavor.textModules }} vorhanden
</info-message>
<div class="topic__modules">
<module-teaser
v-for="module in filteredModules"
@ -35,6 +40,7 @@ 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';
import InfoMessage from '@/components/ui/InfoMessage.vue';
const props = defineProps<{
modules: ModuleNode[];
@ -113,15 +119,14 @@ const updateLevel = (level: ModuleLevelNode) => {
};
const filterByLevel = (module: ModuleNode, level: ModuleLevelNode) => {
return level.filterAttributeType === 'ALL' || module.level?.id === level.id;
return level.filterAttributeType === 'ALL' || module.level?.id === level.id || !module.level;
};
const filterByCategory = (module: ModuleNode, category: ModuleCategoryNode) => {
return category.filterAttributeType === 'ALL' || module.category?.id === category.id;
return category.filterAttributeType === 'ALL' || module.category?.id === category.id || !module.category;
};
const filterByLanguage = (module: ModuleNode, language: string) => {
// TODO: implement filter by language here.
return module.language === language;
};
@ -155,13 +160,11 @@ const updateLastModuleLevelUser = (moduleLevel: ModuleLevelNode) => {
@import 'styles/helpers';
.module-filter {
// 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
&__filter-selection {
display: flex;
justify-content: flex-start;
column-gap: $medium-spacing;
margin-bottom: $medium-spacing;
}
&__dropdown {

2
client/src/components/modules/ModuleTeaser.vue
View File

@ -15,7 +15,7 @@
<p class="module-teaser__description">
{{ teaser }}
</p>
<div class="module-teaser__pills">
<div class="module-teaser__pills" v-if="$flavor.showModuleFilter">
<pill :text="level?.name"></pill>
<pill :text="category?.name"></pill>
</div>

33
client/src/components/ui/InfoMessage.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="info-message">
<info-icon class="info-message__icon" />
<span class="info-message__text"><slot></slot> </span>
</div>
</template>
<script setup lang="ts">
import InfoIcon from '@/components/icons/InfoIcon.vue';
</script>
<style scoped lang="scss">
@import 'styles/helpers';
.info-message {
display: flex;
align-items: center;
&__icon {
width: $large-icon-dimension;
height: $large-icon-dimension;
fill: $color-brand;
margin-right: $small-spacing;
}
&__text {
@include regular-text;
color: $color-brand;
margin-right: $medium-spacing;
}
}
</style>

1
client/src/graphql/gql/fragments/instrumentParts.gql
View File

@ -3,6 +3,7 @@ fragment InstrumentParts on InstrumentNode {
title
intro
slug
language
bookmarks {
uuid
note {

1
client/src/graphql/gql/queries/instrumentsQuery.gql
View File

@ -4,6 +4,7 @@ query InstrumentsQuery {
title
contents
slug
language
type {
id
type

4
client/src/helpers/app-flavor.constants.ts
View File

@ -20,9 +20,11 @@ export const defaultFlavorValues: FlavorValues = {
showFooter: true,
showObjectivesTitle: true,
showInstrumentFilterSidebar: true,
showInstrumentSubCategories: true,
showPortfolio: true,
showEHB: true,
helloIllustration: 'HelloIllustration',
showModuleFilter: false,
};
export const myKvValues: FlavorValues = {
@ -46,8 +48,10 @@ export const myKvValues: FlavorValues = {
showObjectivesTitle: false,
showInstrumentFilterSidebar: true,
showPortfolio: true,
showInstrumentSubCategories: false,
showEHB: false,
helloIllustration: 'HelloMyKVIllustration',
showModuleFilter: true,
};
export const dhaValues: FlavorValues = Object.assign({}, myKvValues, {

2
client/src/helpers/types.ts
View File

@ -14,7 +14,9 @@ export interface FlavorValues {
showFooter: boolean;
showObjectivesTitle: boolean;
showInstrumentFilterSidebar: boolean;
showInstrumentSubCategories: boolean;
showPortfolio: boolean;
showEHB: boolean;
helloIllustration: string;
showModuleFilter: boolean;
}

38
client/src/pages/instrumentOverview.vue
View File

@ -10,6 +10,17 @@
v-else
/>
<div class="instrument-overview__list">
<filter-bar
:search-query="searchText"
@update:searchQuery="(val) => (searchText = val)"
></filter-bar>
<info-message
class="instrument-overview__no-instruments"
v-if="instruments.length > 1 && filteredInstruments.length === 0"
>
Für die ausgewählten Filtereinstellungen sind keine Einträge vorhanden
</info-message>
<router-link
:to="{ name: 'instrument', params: { slug: instrument.slug } }"
data-cy="instrument"
@ -27,9 +38,16 @@ import InstrumentFilter from '@/components/instruments/InstrumentFilter.vue';
import InstrumentEntry from '@/components/instruments/InstrumentEntry.vue';
import INSTRUMENTS_QUERY from '@/graphql/gql/queries/instrumentsQuery.gql';
import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
import FilterBar from '@/components/instruments/FilterBar.vue';
import { graphql } from '@/__generated__';
import InfoIcon from '@/components/icons/InfoIcon.vue';
import InfoMessage from '@/components/ui/InfoMessage.vue';
export default {
components: {
InfoMessage,
InfoIcon,
FilterBar,
InstrumentFilter,
InstrumentEntry,
},
@ -58,6 +76,15 @@ export default {
return instrumentFilter;
},
},
me: {
query: graphql(`
query MeLanguage {
me {
language @client
}
}
`),
},
},
data() {
@ -67,12 +94,20 @@ export default {
instrumentFilter: {
currentFilter: '',
},
searchText: '',
me: { language: 'de' },
};
},
computed: {
filteredInstruments() {
return this.instruments.filter((i) => this.filter(i));
// Filter by category and category type
let instruments = this.instruments.filter((i) => this.filter(i));
// Filter by language
instruments = instruments.filter((i) => i.language === this.me.language);
// Filter by search text
instruments = instruments.filter((i) => i.title.toLowerCase().includes(this.searchText.toLowerCase()));
return instruments;
},
},
@ -110,7 +145,6 @@ export default {
&__list-item {
padding: $medium-spacing 0;
@include regular-text;
@include table-row($color-silver);
}

6
client/src/styles/_variables.scss
View File

@ -83,7 +83,11 @@ $popover-default-bottom: -110px;
$footer-width: 800px;
$news-width: 550px;
$medium-input-width: 380px;
$screen-width: 1200px;
$default-icon-dimension: 25px;
$small-icon-dimension: 14px;
$default-icon-dimension: 25px;
$large-icon-dimension: 40px;

4
server/basicknowledge/queries.py
View File

@ -44,6 +44,7 @@ class InstrumentNode(DjangoObjectType):
bookmarks = graphene.List(InstrumentBookmarkNode)
type = graphene.Field(InstrumentTypeNode)
contents = GenericStreamFieldType()
language = graphene.String()
class Meta:
model = BasicKnowledge
@ -63,6 +64,9 @@ class InstrumentNode(DjangoObjectType):
instrument=self
)
def resolve_language(self, info, **kwargs):
return self.locale.language_code
class InstrumentQuery(object):
instrument = graphene.Field(InstrumentNode, slug=graphene.String(), id=graphene.ID())

1
server/schema.graphql
View File

@ -559,6 +559,7 @@ type InstrumentNode implements Node {
id: ID!
bookmarks: [InstrumentBookmarkNode]
type: InstrumentTypeNode
language: String
}
type InstrumentNodeConnection {