github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/shared/notifications/Success.vue (about)

     1  <template>
     2    <b-toast
     3      v-model="visible"
     4      :title="notification ? notification.title : ''"
     5      auto-hide-delay="5000"
     6      :toaster="position"
     7      variant="success"
     8    >
     9      <template v-slot:toast-title>
    10        <b-row no-gutters class="w-100">
    11          <b-col cols="2">[{{ time() }}]</b-col>
    12          <b-col cols="9"
    13            ><b>{{ notification ? notification.title : "" }}</b></b-col
    14          >
    15        </b-row>
    16      </template>
    17      <div v-html="notification ? notification.message : ''"></div>
    18    </b-toast>
    19  </template>
    20  
    21  <script lang="ts">
    22  import Vue from "vue";
    23  import Component from "vue-class-component";
    24  import { Watch } from "vue-property-decorator";
    25  import { Output } from "../logic/notifications";
    26  import { formatDateTime } from "../logic/utils";
    27  import { SuccesPosition } from "../utils";
    28  
    29  const SuccessProps = Vue.extend({
    30    props: {
    31      output: Object as () => Output,
    32      position: {
    33        type: String as () => SuccesPosition,
    34        default: SuccesPosition.BottomRight
    35      }
    36    }
    37  });
    38  
    39  @Component({})
    40  export default class Success extends SuccessProps {
    41    get visible() {
    42      return this.output.success != null;
    43    }
    44    set visible(b: boolean) {
    45      if (!b) {
    46        this.output.success = null;
    47      }
    48    }
    49  
    50    get notification() {
    51      return this.output.success;
    52    }
    53  
    54    time() {
    55      return new Date().toLocaleTimeString("fr-FR", {
    56        hour: "numeric",
    57        minute: "numeric"
    58      });
    59    }
    60  }
    61  </script>
    62  
    63  <style scoped></style>