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

Add NoModules and NoIntruments texts when filter leads to no result.

This commit is contained in:
Lorenz Padberg 2023-08-30 11:13:43 +02:00
parent b24c5419f1
commit acbb8b7517
2 changed files with 59 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,6 +17,10 @@
<language-switcher class="module-filter__language-switcher" />
</div>
<div class="module-filter__nomodules" v-if="modules.length > 1 && filteredModules.length === 0">
<info-icon class="module-filter__nomodules-icon" />
<span class="module-filter__nomodules-text">Für die ausgewählten Filtereinstellungen sind keine Module vorhanden</span>
</div>
<div class="topic__modules">
<module-teaser
v-for="module in filteredModules"
@ -35,6 +39,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 InfoIcon from "@/components/icons/InfoIcon.vue";
const props = defineProps<{
modules: ModuleNode[];
@ -161,6 +166,7 @@ const updateLastModuleLevelUser = (moduleLevel: ModuleLevelNode) => {
display: flex;
justify-content: flex-start;
column-gap: $medium-spacing;
margin-bottom: $medium-spacing;
}
&__dropdown {
@ -170,6 +176,25 @@ const updateLastModuleLevelUser = (moduleLevel: ModuleLevelNode) => {
&__language-switcher {
margin-left: auto;
}
&__nomodules {
display: flex;
align-items: center;
}
&__nomodules-icon {
width: 40px;
height: 40px;
fill: $color-brand;
margin-right: 8px;
}
&__nomodules-text {
color: $color-brand;
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
margin-right: $medium-spacing;
}
}
.topic {

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

@ -10,7 +10,19 @@
v-else
/>
<div class="instrument-overview__list">
<FilterBar :search-query="searchText" @update:searchQuery="val => searchText = val"></FilterBar>
<FilterBar
:search-query="searchText"
@update:searchQuery="(val) => (searchText = val)"
></FilterBar>
<div
class="instrument-overview__noinstruments"
v-if="instruments.length > 1 && filteredInstruments.length === 0"
>
<info-icon class="instrument-overview__noinstruments-icon" />
<span class="instrument-overview__noinstruments-text"
>Für die ausgewählten Filtereinstellungen sind keine Einträge vorhanden</span
>
</div>
<router-link
:to="{ name: 'instrument', params: { slug: instrument.slug } }"
data-cy="instrument"
@ -30,9 +42,11 @@ 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';
export default {
components: {
InfoIcon,
FilterBar,
InstrumentFilter,
InstrumentEntry,
@ -135,5 +149,24 @@ export default {
@include regular-text;
@include table-row($color-silver);
}
&__noinstruments {
display: flex;
align-items: center;
}
&__noinstruments-icon {
width: 40px;
height: 40px;
fill: $color-brand;
margin-right: 8px;
}
&__noinstruments-text {
color: $color-brand;
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
margin-right: $medium-spacing;
}
}
</style>