160 lines
3.6 KiB
Vue
160 lines
3.6 KiB
Vue
<template>
|
|
<div
|
|
class="snapshot-menu"
|
|
data-cy="snapshot-menu"
|
|
>
|
|
<a
|
|
data-cy="module-snapshots-button"
|
|
class="snapshot-menu__toggle"
|
|
@click.stop="showPopover = true"
|
|
>Snapshots</a
|
|
>
|
|
<widget-popover
|
|
class="snapshot-menu__popover"
|
|
v-if="showPopover"
|
|
@hide-me="showPopover = false"
|
|
>
|
|
<a
|
|
class="popover-links__link snapshot-menu__link snapshot-menu__button snapshot-menu__button--primary"
|
|
data-cy="create-snapshot-button"
|
|
@click="createSnapshot"
|
|
>Neuen Snapshot erstellen</a
|
|
>
|
|
<router-link
|
|
:to="snapshotListRoute"
|
|
class="popover-links__link snapshot-menu__link"
|
|
>
|
|
Alle Snapshots anzeigen
|
|
</router-link>
|
|
<a
|
|
class="popover-links__link snapshot-menu__link"
|
|
href="https://myskillbox.ch/faq"
|
|
>Was ist ein Snapshot?</a
|
|
>
|
|
</widget-popover>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import WidgetPopover from '@/components/ui/WidgetPopover.vue';
|
|
import { SNAPSHOT_LIST } from '@/router/module.names';
|
|
import me from '@/mixins/me';
|
|
|
|
import CREATE_SNAPSHOT_MUTATION from '@/graphql/gql/mutations/createSnapshot.gql';
|
|
import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/queries/moduleSnapshots.gql';
|
|
import log from 'loglevel';
|
|
import { matomoTrackEvent } from '@/helpers/matomo-client';
|
|
|
|
export default {
|
|
mixins: [me],
|
|
|
|
components: {
|
|
WidgetPopover,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
snapshotListRoute: {
|
|
name: SNAPSHOT_LIST,
|
|
},
|
|
showPopover: false,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
createSnapshot() {
|
|
this.$apollo
|
|
.mutate({
|
|
mutation: CREATE_SNAPSHOT_MUTATION,
|
|
variables: {
|
|
input: {
|
|
module: this.$route.params.slug,
|
|
selectedClass: this.me.selectedClass.id,
|
|
},
|
|
},
|
|
update: (
|
|
store,
|
|
{
|
|
data: {
|
|
createSnapshot: { snapshot },
|
|
},
|
|
}
|
|
) => {
|
|
const slug = this.$route.params.slug;
|
|
const query = MODULE_SNAPSHOTS_QUERY;
|
|
const variables = {
|
|
slug,
|
|
};
|
|
const cached = store.readQuery({
|
|
query,
|
|
variables,
|
|
});
|
|
if (cached) {
|
|
const { module } = cached;
|
|
const data = {
|
|
module: {
|
|
...module,
|
|
snapshots: [snapshot, ...module.snapshots],
|
|
},
|
|
};
|
|
store.writeQuery({
|
|
query,
|
|
variables,
|
|
data,
|
|
});
|
|
}
|
|
},
|
|
})
|
|
.then(
|
|
({
|
|
data: {
|
|
createSnapshot: { snapshot },
|
|
},
|
|
}) => {
|
|
log.debug('snapshot created', snapshot);
|
|
|
|
this.showPopover = false;
|
|
this.$modal.open('snapshot-created', {
|
|
snapshot,
|
|
});
|
|
}
|
|
);
|
|
matomoTrackEvent('Modul Snapshot', 'Snapshot erstellt', this.$route.params.slug);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'styles/helpers';
|
|
|
|
.snapshot-menu {
|
|
position: relative;
|
|
|
|
&__toggle {
|
|
@include regular-text;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__popover {
|
|
box-sizing: border-box;
|
|
min-width: 300px;
|
|
height: 170px;
|
|
left: 0;
|
|
top: 35px;
|
|
padding: $medium-spacing;
|
|
}
|
|
|
|
&__link {
|
|
@include large-link;
|
|
line-height: 27px;
|
|
padding: $small-spacing 0;
|
|
}
|
|
|
|
&__button {
|
|
@include button-border;
|
|
padding: 5px $small-spacing;
|
|
}
|
|
}
|
|
</style>
|