Use PaginatorTable for RoomList + KITMap and Adress in NetdocBldg

src/components/nd/RoomList.vue

 <template>
   <div>
-    <FilterInput v-model="filter"></FilterInput>
-    <b-pagination v-if="rooms && rooms.length > per_page && filter === ''" :total-rows="rooms.length"
-                  :per-page="per_page" v-model="current_page" align="center"></b-pagination>
     <b-card no-body class="shadow">
-      <b-table responsive :filter="filter" :per-page="filter === '' ? per_page : null"
-               :current-page="filter === '' ? current_page : null" :fields="site_list_fields" :busy="rooms === null"
-               :items="rooms" :sort-by="sort_by || default_sort_by">
+      <PaginatorTable responsive :fields="site_list_fields" :busy="rooms === null"
+               :items="rooms" :sort-by="sort_by || default_sort_by" :hide-top-pagination="rooms.length < 25"
+               :hide-filter="rooms.length < 10">
         <template v-slot:cell(name)="data">
           <b-link class="nowrap" :to="'/netdoc/sites/'+bldgs_by_nbr[data.item.bldg].site_fq_name+'/'+data.item.bldg+'/'+data.item.gpk"><b>{{ data.value }}</b></b-link>
         </template>
         <template v-slot:cell(number)="data">
           <b-link class="nowrap" :to="'/netdoc/sites/'+bldgs_by_nbr[data.item.bldg].site_fq_name+'/'+data.item.bldg+'/'+data.item.gpk"><b>{{ data.value }}</b></b-link>
         </template>
-      </b-table>
+      </PaginatorTable>
       <div v-if="rooms && rooms.length === 0" class="font-italic text-center mb-3">
         {{ $t('components.bcd_list.no_rooms_available') }}
       </div>
-      <b-pagination v-if="rooms && rooms.length > per_page && filter === ''" :total-rows="rooms.length"
-                    :per-page="per_page" v-model="current_page" align="center"></b-pagination>
     </b-card>
   </div>
 </template>
 
 <script>
-import FilterInput from '@/components/FilterInput'
 import apiutil from '@/util/apiutil'
+import PaginatorTable from '@/components/PaginatorTable.vue'
 
 export default {
   name: 'RoomList',
-  components: { FilterInput },
+  components: { PaginatorTable },
   watch: {
     filter: {
       immediate: true,
@@ -56,7 +51,7 @@ export default {
       return apiutil.dict_by_value_of_array(this.bldgs, 'number')
     },
     site_list_fields() {
-      const result = [
+      return [
         {
           label: this.$t('views.nd.room.floor'),
           key: 'floor',
@@ -78,7 +73,6 @@ export default {
           sortable: true
         },
       ]
-      return result
     }
   },
   props: {

src/views/nd/NetdocBldg.vue

@@ -2,6 +2,30 @@
   <div id="Site">
     <h1>{{ $tc('views.nd.netdoc.room', 2) }} <span v-if="bldg">in {{ bldg.number }}</span></h1>
     <LoadingPlaceholder :data="[bldg, rooms]">
+      <b-row class="mt-4">
+        <b-col cols="6">
+          <div v-if="bldg">
+            <div style="float: left;">
+              <NETVSIcon icon="geo_address" class="pr-2"></NETVSIcon>
+            </div>
+            <div style="float: left;">
+              {{ bldg.name }}
+              <br>
+              {{ bldg.street }}
+              <br>
+              {{ bldg.postal_code }}
+            </div>
+          </div>
+        </b-col>
+        <b-col cols="6">
+          <KITMap v-if="can_show_map" :center="bldg.geo_location" :zoom="17" style="height: 20vh; width: 100%;">
+            <template v-slot:map_content>
+              <l-marker :lat-lng="latLng(bldg.geo_location.lat, bldg.geo_location.lng)"
+                        :icon="icon"></l-marker>
+            </template>
+          </KITMap>
+        </b-col>
+      </b-row>
       <RoomList :rooms="rooms" :bldgs="[bldg]" />
     </LoadingPlaceholder>
   </div>
@@ -11,23 +35,37 @@
 import LoadingPlaceholder from '@/components/Loading.vue'
 import netdocService from '@/api-services/netdoc.service'
 import RoomList from '@/components/nd/RoomList.vue'
+import NETVSIcon from '@/icons/NETVSIcon.vue'
+import KITMap from '@/components/KITMap.vue'
+import {icon, latLng} from 'leaflet'
+import {LMarker} from 'vue2-leaflet'
 
 export default {
   name: 'NetdocBldg',
-  components: { RoomList, LoadingPlaceholder },
+  methods: { latLng },
+  components: { KITMap, NETVSIcon, RoomList, LoadingPlaceholder, LMarker },
   data() {
     return {
       site: null,
       bldg: null,
       rooms: null,
+
+      icon: icon({iconUrl: '/location.png', iconSize: [32, 42], iconAnchor: [16, 42]})
     }
   },
   async created() {
     const response = await netdocService.getRooms(this.$store.state, this.$route.params.site, this.$route.params.bldg)
     this.site = response.data.site_list[0]
     this.bldg = response.data.bldg_list[0]
+    console.log(this.bldg)
     this.rooms = response.data.room_list
-  }
+  },
+  computed: {
+    can_show_map: function () {
+      return this.bldg && this.bldg.geo_location && this.bldg.geo_location.lat && this.bldg.geo_location.lng
+    }
+  },
+
 }
 </script>