PronounsPage/components/TranslationMode.vue

<template>
    <div v-if="$isGranted('translations')" class="scroll-btn d-print-none d-flex align-items-center">
        <template v-if="translationMode">
            <button class="btn btn-info btn-sm m-1 px-3 py-1 d-flex justify-content-center align-items-center" @click="showChanges">
                <small>Changes: {{ changesCount }}</small>
            </button>
            <div v-if="changesCount" @click.prevent="commitChanges">
                <SquareButton link="#" colour="success" aria-label="Commit changes">
                    <Icon v="check-circle"/>
                </SquareButton>
            </div>
            <div v-if="changesCount" @click.prevent="revertChanges">
                <SquareButton link="#" colour="danger" aria-label="Revert changes">
                    <Icon v="times-circle"/>
                </SquareButton>
            </div>
            <div @click.prevent="pause">
                <SquareButton link="#" colour="info" aria-label="Pause translation mode">
                    <Icon v="pause-circle"/>
                </SquareButton>
            </div>
        </template>
        <div v-else @click.prevent="startTranslating">
            <SquareButton link="#" colour="info" aria-label="Translation Mode">
                <Icon v="language"/>
            </SquareButton>
        </div>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    import Suml from 'suml';

    export default {
        data() {
            return {
            }
        },
        methods: {
            startTranslating() {
                this.$store.commit('translationInit');
            },
            async commitChanges() {
                await this.$confirm(`Do you want to commit ${this.changesCount} changes?`, 'success');
                const response = await this.$post(`/translations/propose`, {
                    changes: this.translationChanges,
                });
                this.$store.commit('translationCommit');
                this.$cookies.remove('translations');

                setTimeout(
                    () => this.$alert({header: 'Your translation proposals were saved', message: 'Thank you for contributing!'}, 'success'),
                    500,
                )
            },
            async revertChanges() {
                if (this.changesCount) {
                    await this.$confirm(`Do you want to revert ${this.changesCount} changes?`, 'danger');
                }
                this.$store.commit('translationAbort');
                this.$cookies.remove('translations');
            },
            async showChanges() {
                await this.$alert({
                    header: 'Changes overview',
                    message: '<pre>' + new Suml().dump(this.translationChanges) + '</pre>',
                    margin: false,
                    size: 'lg',
                }, 'info');
            },
            async pause() {
                this.$store.commit('translationPause');
            },
        },
        computed: {
            ...mapState([
                'translationMode',
                'translationChanges',
            ]),
            changesCount() {
                return Object.keys(this.translationChanges).length;
            },
        },
}
</script>

<style lang="scss" scoped>
    @import "assets/variables";

    .scroll-btn {
        position: fixed;
        bottom: $spacer;
        right: 2 * $spacer + $square-button-size;
        z-index: 1030;
    }
</style>