koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Main.vue

   1 <template>
   2     <div v-if="_is_loading">
   3         <Dialog />
   4     </div>
   5     <div v-else-if="ERMModule">
   6         <Breadcrumb />
   7         <div class="main container-fluid">
   8             <div class="row">
   9                 <div class="col-sm-10 col-sm-push-2">
  10                     <main>
  11                         <Dialog />
  12                         <router-view />
  13                     </main>
  14                 </div>
  15
  16                 <div class="col-sm-2 col-sm-pull-10">
  17                     <aside>
  18                         <div id="navmenu">
  19                             <div id="navmenulist">
  20                                 <h5>{{ $__("E-resource management") }}</h5>
  21                                 <ul>
  22                                     <li>
  23                                         <router-link
  24                                             to="/cgi-bin/koha/erm/agreements"
  25                                         >
  26                                             <i class="fa fa-check-circle-o"></i>
  27                                             {{ $__("Agreements") }}</router-link
  28                                         >
  29                                     </li>
  30                                     <li>
  31                                         <router-link
  32                                             to="/cgi-bin/koha/erm/licenses"
  33                                         >
  34                                             <i class="fa fa-gavel"></i>
  35                                             {{ $__("Licenses") }}</router-link
  36                                         >
  37                                     </li>
  38                                     <li>
  39                                         <router-link
  40                                             to="/cgi-bin/koha/erm/eholdings"
  41                                             class="disabled"
  42                                         >
  43                                             <i class="fa fa-crosshairs"></i>
  44                                             {{ $__("eHoldings") }}
  45                                         </router-link>
  46                                     </li>
  47
  48                                     <li>
  49                                         <ul>
  50                                             <li
  51                                                 v-for="provider in erm_providers"
  52                                                 :key="provider"
  53                                             >
  54                                                 <router-link
  55                                                     v-if="provider == 'local'"
  56                                                     :to="`/cgi-bin/koha/erm/eholdings/local`"
  57                                                     class="disabled"
  58                                                 >
  59                                                     <i
  60                                                         class="fa fa-map-marker"
  61                                                     ></i>
  62                                                     {{
  63                                                         $__("Local")
  64                                                     }}</router-link
  65                                                 >
  66                                                 <router-link
  67                                                     v-else-if="
  68                                                         provider == 'ebsco'
  69                                                     "
  70                                                     :to="`/cgi-bin/koha/erm/eholdings/ebsco`"
  71                                                     class="disabled"
  72                                                 >
  73                                                     <i class="fa fa-globe"></i>
  74                                                     {{
  75                                                         $__("EBSCO")
  76                                                     }}</router-link
  77                                                 >
  78                                                 <ul>
  79                                                     <li>
  80                                                         <router-link
  81                                                             :to="`/cgi-bin/koha/erm/eholdings/${provider}/packages`"
  82                                                         >
  83                                                             <i
  84                                                                 class="fa fa-archive"
  85                                                             ></i>
  86                                                             {{
  87                                                                 $__("Packages")
  88                                                             }}</router-link
  89                                                         >
  90                                                     </li>
  91                                                     <li>
  92                                                         <router-link
  93                                                             :to="`/cgi-bin/koha/erm/eholdings/${provider}/titles`"
  94                                                         >
  95                                                             <i
  96                                                                 class="fa fa-sort-alpha-asc"
  97                                                             ></i>
  98                                                             {{
  99                                                                 $__("Titles")
 100                                                             }}</router-link
 101                                                         >
 102                                                     </li>
 103                                                 </ul>
 104                                             </li>
 105                                         </ul>
 106                                     </li>
 107                                 </ul>
 108                             </div>
 109                         </div>
 110                     </aside>
 111                 </div>
 112             </div>
 113         </div>
 114     </div>
 115     <div v-else>
 116         {{
 117             $__(
 118                 "The e-resource management module is disabled, turn on 'ERMModule' to use it"
 119             )
 120         }}
 121     </div>
 122 </template>
 123
 124 <script>
 125 import { inject } from "vue"
 126 import Breadcrumb from "../../components/Breadcrumb.vue"
 127 import Dialog from "../../components/Dialog.vue"
 128 import { APIClient } from "../../fetch/api-client.js"
 129 import "vue-select/dist/vue-select.css"
 130 import { storeToRefs } from "pinia"
 131
 132 export default {
 133     setup() {
 134         const vendorStore = inject("vendorStore")
 135
 136         const AVStore = inject("AVStore")
 137
 138         const mainStore = inject("mainStore")
 139
 140         // Note that we cannot use loading and loaded from messages
 141         // Pinia is not initiated yet there
 142         const { _is_loading } = storeToRefs(mainStore)
 143
 144         return {
 145             vendorStore,
 146             AVStore,
 147             mainStore,
 148             erm_providers,
 149             ERMModule,
 150             _is_loading,
 151         }
 152     },
 153     data() {
 154         return {
 155             component: "agreement",
 156         }
 157     },
 158     beforeCreate() {
 159         this.mainStore._is_loading = true
 160
 161         const acq_client = APIClient.acquisition
 162         acq_client.vendors.getAll().then(
 163             vendors => {
 164                 this.vendorStore.vendors = vendors
 165                 this.initialized = true
 166             },
 167             error => {}
 168         )
 169
 170         const av_client = APIClient.authorised_values
 171         const authorised_values = {
 172             av_agreement_statuses: "ERM_AGREEMENT_STATUS",
 173             av_agreement_closure_reasons: "ERM_AGREEMENT_CLOSURE_REASON",
 174             av_agreement_renewal_priorities: "ERM_AGREEMENT_RENEWAL_PRIORITY",
 175             av_user_roles: "ERM_USER_ROLES",
 176             av_license_types: "ERM_LICENSE_TYPE",
 177             av_license_statuses: "ERM_LICENSE_STATUS",
 178             av_agreement_license_statuses: "ERM_AGREEMENT_LICENSE_STATUS",
 179             av_agreement_license_location: "ERM_AGREEMENT_LICENSE_LOCATION",
 180             av_package_types: "ERM_PACKAGE_TYPE",
 181             av_package_content_types: "ERM_PACKAGE_CONTENT_TYPE",
 182             av_title_publication_types: "ERM_TITLE_PUBLICATION_TYPE",
 183         }
 184
 185         let av_cat_array = Object.keys(authorised_values).map(function (
 186             av_cat
 187         ) {
 188             return '"' + authorised_values[av_cat] + '"'
 189         })
 190
 191         av_client.values
 192             .getCategoriesWithValues(av_cat_array)
 193             .then(av_categories => {
 194                 Object.entries(authorised_values).forEach(
 195                     ([av_var, av_cat]) => {
 196                         const av_match = av_categories.find(
 197                             element => element.category_name == av_cat
 198                         )
 199                         this.AVStore[av_var] = av_match.authorised_values
 200                     }
 201                 )
 202             })
 203             .then(() => (this.mainStore._is_loading = false))
 204     },
 205     components: {
 206         Breadcrumb,
 207         Dialog,
 208     },
 209 }
 210 </script>
 211
 212 <style>
 213 #navmenulist a.router-link-active {
 214     font-weight: 700;
 215 }
 216 #menu ul ul,
 217 #navmenulist ul ul {
 218     padding-left: 2em;
 219     font-size: 100%;
 220 }
 221
 222 form .v-select {
 223     display: inline-block;
 224     background-color: white;
 225     width: 30%;
 226 }
 227
 228 .v-select,
 229 input:not([type="submit"]):not([type="search"]):not([type="button"]):not([type="checkbox"]),
 230 textarea {
 231     border-color: rgba(60, 60, 60, 0.26);
 232     border-width: 1px;
 233     border-radius: 4px;
 234     min-width: 30%;
 235 }
 236 .flatpickr-input {
 237     width: 30%;
 238 }
 239
 240 #navmenulist ul li a.disabled {
 241     color: #666;
 242     pointer-events: none;
 243     font-weight: 700;
 244 }
 245 #navmenulist ul li a.disabled.router-link-active {
 246     color: #000;
 247 }
 248 </style>