summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/NotificationsSnackbars.vue
blob: f8e3ecf45a8297f6c7dc1828db437a26fe607b0a (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<i18n>
{
  "en": {
    "close": "Close"
  },
  "de": {
    "close": "Schließen"
  }
}
</i18n>

<template>
  <v-snackbar
    class="ma-4"
    v-model="showSnackbar"
    bottom
    right
    :timeout="currentSnackbar.timeout || 4000"
    :color="currentSnackbar.color"
  >
    {{ currentSnackbar.text }}
    <v-btn
      text
      @click="showSnackbar = false"
    >
      {{ $t('close') }}
    </v-btn>
  </v-snackbar>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'

export default {
  name: 'NotificationsSnackbars',
  data () {
    return {
      snackbarsInQueue: false,
      currentSnackbar: {},
      showSnackbar: false
    }
  },
  computed: {
    ...mapState('notifications', ['snackbars']),
    ...mapGetters('notifications', ['nextSnackbar'])
  },
  watch: {
    showSnackbar (value) {
      if (!value) {
        var nextSnackbar = this.nextSnackbar
        if (nextSnackbar) {
          this.shiftSnackbars()
          setTimeout(() => {
            this.currentSnackbar = nextSnackbar
            this.showSnackbar = true
          }, 500)
        } else {
          this.snackbarsInQueue = false
        }
      }
    },
    snackbars (value) {
      if (!this.snackbarsInQueue) {
        this.snackbarsInQueue = true
        this.currentSnackbar = this.nextSnackbar
        this.shiftSnackbars()
        this.showSnackbar = true
      }
    }
  },
  methods: {
    ...mapMutations('notifications', ['shiftSnackbars'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

@media (max-width: 960px) {
  .notifications {
    right: 12px;
    max-width: 100%;
  }
}

@media (min-width: 961px) {
  .notifications {
    width: 600px;

  }
}

</style>