Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/ts.corals.io/frontend/components/Alerts/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <b-nav-item-dropdown text="Alerts" :disabled="!alerts.length" right>
      <template slot="button-content">
        <fa icon="bell"/>
        <b-badge class="pl-0 pr-0" variant="danger" style="font-size: medium" v-if="alerts.length > 0">{{
            alerts.length
          }}
        </b-badge>
      </template>
      <b-dropdown-item v-for="alert in alerts" :key="alert.message" @click.prevent="openAlertModal(alert)">
        <div class="d-flex align-items-center">
          <fa :icon="alert.icon" class="mr-1" :class="'text-'+alert.level"/>
          <div v-html="alert.message" class="mr-1"></div>
          <small>({{ alert.data.length }})</small>
        </div>
      </b-dropdown-item>
    </b-nav-item-dropdown>

    <template>
      <b-modal hide-footer
               content-class="shadow"
               :title-html="alertData.message"
               no-close-on-backdrop
               :id="alertModalId"
               size="lg">

        <template #modal-title>
          <div class="d-flex align-items-center">
            <fa :icon="alertData.icon" size="2" class="mr-2" v-bind:class="'text-'+alertData.level"/>
            <div v-html="alertData.message"></div>
          </div>
        </template>

        <template v-for="data in alertData.data">
          <div class="d-md-flex alert-data-item mb-2">
            <div class="mr-3 alert-data-item-action" v-if="data.action.code === 'nav_to_date'">
              <!--              <nuxt-link :to="{ path: '/', query: { date: data.action.attr.date }}"-->
              <!--                         v-if="data.action.code === 'nav_to_date'">-->
              <!--                {{ data.action.attr.label || data.action.attr.date }}-->
              <!--              </nuxt-link>-->
              <a :href="`/?date=${data.action.attr.date}`" v-if="data.action.code === 'nav_to_date'">
                {{ data.action.attr.label || data.action.attr.date }}
              </a>
            </div>
            <nuxt-link :to="data.action.route" v-if="data.action.code && data.action.code ==='nav_to'"
                       @click.native="closeAlertModal" class="ml-2">
              {{ data.action.attr.label }}
            </nuxt-link>
            <div v-html="data.message" class="alert-data-item-message"></div>
          </div>
        </template>
        <nuxt-link :to="alertData.action.attr.route" v-if="alertData.action && alertData.action.code ==='nav_to'"
                   @click.native="closeAlertModal" class="ml-2">
          {{ alertData.action.attr.label }}
        </nuxt-link>
      </b-modal>
    </template>
  </div>
</template>
<script>

import {mapGetters} from 'vuex'

export default {
  name: 'alerts',
  components: {},
  middleware: 'auth',
  data() {
    return {
      alertModalId: 'alert-modal',
      alertData: '',
    }
  },
  methods: {
    openAlertModal(alert) {
      this.alertData = alert;
      this.$bvModal.show(this.alertModalId);
    },
    closeAlertModal() {
      this.$bvModal.hide(this.alertModalId);
    }
  },
  mounted() {
    this.$store.dispatch('GET_AND_SET_SETTINGS', {$axios: this.$axios});
  },
  computed: {
    ...mapGetters([
      'alerts'
    ]),
  }
}
</script>

<style>
.alert-data-item-action {
  min-width: 115px;
}

.alert-data-item:before {
  content: '-';
  padding-right: 5px;
}
</style>