koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue

   1 <template>
   2     <div class="dialog message" v-if="message" v-html="message"></div>
   3     <div class="dialog alert" v-if="error" v-html="error"></div>
   4     <div class="dialog alert modal" v-if="warning">
   5         <h1 v-html="warning"></h1>
   6         <button id="close_modal" class="approve" @click="removeMessages">
   7             <i class="fa fa-fw fa-check"></i>
   8             {{ $__("Close") }}
   9         </button>
  10     </div>
  11     <div class="modal_centered" v-if="confirmation">
  12         <div class="dialog alert confirmation">
  13             <h1 v-html="confirmation.title"></h1>
  14             <p v-html="confirmation.message"></p>
  15             <button
  16                 v-if="accept_callback"
  17                 id="accept_modal"
  18                 class="approve"
  19                 @click="accept_callback"
  20             >
  21                 <i class="fa fa-fw fa-check"></i>
  22                 <span v-html="confirmation.accept_label"></span>
  23             </button>
  24             <button
  25                 id="close_modal"
  26                 class="deny"
  27                 @click="removeConfirmationMessages"
  28             >
  29                 <i class="fa fa-fw fa-remove"></i>
  30                 <span v-html="confirmation.cancel_label"></span>
  31             </button>
  32         </div>
  33     </div>
  34     <!-- Must be styled differently -->
  35
  36     <div class="modal_centered" v-if="is_submitting">
  37         <div class="spinner dialog alert">{{ $__("Submitting...") }}</div>
  38     </div>
  39     <div class="modal_centered" v-if="is_loading">
  40         <div class="spinner dialog message">{{ $__("Loading...") }}</div>
  41     </div>
  42 </template>
  43
  44 <script>
  45 import { inject } from "vue"
  46 import { storeToRefs } from "pinia"
  47 export default {
  48     setup() {
  49         const mainStore = inject("mainStore")
  50         const {
  51             message,
  52             error,
  53             warning,
  54             confirmation,
  55             accept_callback,
  56             is_submitting,
  57             is_loading,
  58         } = storeToRefs(mainStore)
  59         const { removeMessages, removeConfirmationMessages } = mainStore
  60         return {
  61             message,
  62             error,
  63             warning,
  64             confirmation,
  65             accept_callback,
  66             is_submitting,
  67             is_loading,
  68             removeMessages,
  69             removeConfirmationMessages,
  70         }
  71     },
  72 }
  73 </script>
  74
  75 <style scoped>
  76 .modal {
  77     position: fixed;
  78     z-index: 9998;
  79     display: table;
  80     transition: opacity 0.3s ease;
  81     margin: auto;
  82     padding: 20px 30px;
  83     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  84     transition: all 0.3s ease;
  85 }
  86 #close_modal {
  87     cursor: pointer;
  88 }
  89
  90 .modal_centered {
  91     position: fixed;
  92     z-index: 9998;
  93     display: table;
  94     transition: opacity 0.3s ease;
  95     left: 0px;
  96     top: 0px;
  97     width: 100%;
  98     height: 100%;
  99     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
 100 }
 101 .spinner {
 102     position: absolute;
 103     top: 50%;
 104     left: 40%;
 105     width: 10%;
 106 }
 107
 108 .confirmation {
 109     position: absolute;
 110     top: 25%;
 111     left: 40%;
 112
 113     width: 50%;
 114     min-height: 10%;
 115     margin: auto;
 116     align-items: center;
 117     justify-content: center;
 118 }
 119 </style>