ADD: visualize sort oin bcd overview

frontend/src/components/BCDList.vue

@@ -5,7 +5,7 @@
       <b-pagination v-if="bcds && bcds.length > per_page && filter === ''" :total-rows="bcds.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="bcd_list_fields" :busy="bcds === null" :items="bcds"
-                 :sort-compare="sortBCDOverview">
+                 :sort-compare="sortBCDOverview" :sort-by="sort_by">
           <template v-slot:cell(name)="data">
             <b-link class="nowrap" :to="'bcds/'+data.value"><b>{{ data.value }}</b></b-link>
           </template>
@@ -75,6 +75,7 @@ export default {
         if (this.ous !== null) {
           this.ous_by_short_name = ApiUtil.dict_by_value_of_array(this.ous, 'short_name')
         }
+        this.sort_by = this.default_sort_by
       }
     }
   },
@@ -83,10 +84,17 @@ export default {
       ous_by_short_name: {},
       filter: '',
       current_page: 1,
-      per_page: 100
+      per_page: 100,
+      sort_by: null
     }
   },
   props: {
+    default_sort_by: {
+      required: false,
+      default() {
+        return null
+      }
+    },
     bcd2vlans: {
       required: true,
       default() {

frontend/src/views/dnsvs/BCDOverview.vue

 <template>
   <div id="BCDOverview">
-    <BCDList :bcds="bcds" :bcd2subnets="bcd2subnets" :bcd2vlans="bcd2vlans" :ous="ous"></BCDList>
+    <BCDList :bcds="bcds" :bcd2subnets="bcd2subnets" :bcd2vlans="bcd2vlans" :ous="ous"
+      :default_sort_by="'name'"
+    ></BCDList>
   </div>
 </template>