skillbox/client/src/components/toggle-menu/ToggleEditing.vue

69 lines
1.3 KiB
Vue

<template>
<toggle
:checked="module.inEditMode"
data-cy="toggle-editing"
:label="`${$flavor.textModule} anpassen`"
@input="toggle"
/>
</template>
<script>
import Toggle from '@/components/ui/Toggle.vue';
// import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
import { gql } from '@apollo/client/core';
import { setModuleEditMode } from '@/graphql/cache-operations';
import { matomoTrackEvent } from '@/helpers/matomo-client';
const QUERY = gql`
query ModuleEditModeQuery($slug: String) {
module(slug: $slug) {
inEditMode @client
slug
}
}
`;
export default {
components: {
Toggle,
},
data: () => ({
module: {
inEditMode: false,
},
}),
computed: {
checked() {
return false;
},
slug() {
return this.$route.params.slug;
},
},
apollo: {
module() {
return {
query: QUERY,
variables: {
slug: this.slug,
},
};
},
},
methods: {
toggle(newChecked) {
setModuleEditMode(this.slug, newChecked);
if (newChecked) {
matomoTrackEvent('Modul Anpassen', 'Eingeschaltet', this.slug);
} else {
matomoTrackEvent('Modul Anpassen', 'Ausgeschaltet', this.slug);
}
},
},
};
</script>