104 lines
2.1 KiB
Vue
104 lines
2.1 KiB
Vue
<template>
|
|
<div
|
|
class="read-only-banner"
|
|
data-cy="read-only-banner"
|
|
v-if="isReadOnly"
|
|
>
|
|
<div class="read-only-banner__content">
|
|
<p class="read-only-banner__text">{{ readOnlyText }} Sie können Inhalte lesen, aber nicht bearbeiten.</p>
|
|
<div class="read-only-banner__buttons">
|
|
<router-link
|
|
:to="licenseActivationLink"
|
|
data-cy="license-activation-link"
|
|
class="read-only-banner__link button button--primary"
|
|
v-if="me.readOnly"
|
|
>
|
|
Neuen Lizenzcode eingeben
|
|
</router-link>
|
|
<a
|
|
target="_blank"
|
|
href="https://myskillbox.ch/lesemodus"
|
|
class="button button--secondary"
|
|
>Mehr Informationen zum Lesemodus</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { graphql } from '@/__generated__';
|
|
import { LICENSE_ACTIVATION } from '@/router/auth.names';
|
|
import { useQuery } from '@vue/apollo-composable';
|
|
import { computed } from 'vue';
|
|
|
|
const query = graphql(`
|
|
query ReadOnlyQuery {
|
|
me {
|
|
readOnly
|
|
selectedClass {
|
|
readOnly
|
|
}
|
|
}
|
|
}
|
|
`);
|
|
|
|
const { result } = useQuery(query, null, {
|
|
fetchPolicy: 'cache-only',
|
|
});
|
|
|
|
const me = computed(() => {
|
|
const me = result.value?.me;
|
|
return (
|
|
me || {
|
|
readOnly: false,
|
|
selectedClass: {
|
|
readOnly: false,
|
|
},
|
|
}
|
|
);
|
|
});
|
|
|
|
const isReadOnly = computed(() => {
|
|
return me.value.readOnly || me.value.selectedClass?.readOnly;
|
|
});
|
|
|
|
const readOnlyText = computed(() => {
|
|
return me.value.readOnly ? 'Sie besitzen keine aktive Lizenz.' : 'Sie sind in dieser Klasse nicht mehr aktiv.';
|
|
});
|
|
|
|
const licenseActivationLink = {
|
|
name: LICENSE_ACTIVATION,
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'styles/helpers';
|
|
|
|
.read-only-banner {
|
|
background-color: $color-brand-light;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: $small-spacing 0;
|
|
|
|
&__content {
|
|
max-width: $screen-width;
|
|
}
|
|
|
|
&__text {
|
|
padding: 0;
|
|
@include regular-text;
|
|
margin-bottom: $small-spacing;
|
|
}
|
|
|
|
&__buttons {
|
|
display: flex;
|
|
gap: $small-spacing;
|
|
}
|
|
|
|
&__link {
|
|
@include default-link;
|
|
}
|
|
}
|
|
</style>
|