ADD: basic oe overview

frontend/src/api-services/ou.service.js

+import TransactionService from './transaction.service'
+
+export default {
+  list (config, own) {
+    const ta = [
+      { name: 'cntl.mgr2ou.list', old: { is_own: own } },
+      { name: 'org.unit.list', join: { 0: 'api_fkey_cntl_mgr2ou_ou' } },
+      { name: 'cntl.mgr2ou.list', join: { 1: 'api_fkey_cntl_mgr2ou_ou'} },
+      { name: 'cntl.mgr.list', join: { 2: 'api_fkey_cntl_mgr2ou_mgr'} }
+    ]
+    return TransactionService.execute(config, ta)
+  }
+}

frontend/src/components/Navbar.vue

@@ -38,6 +38,20 @@
           Geplante Aktionen
           <b-badge variant="primary">{{ $store.state.ta_list ? $store.state.ta_list.length : 0 }}</b-badge>
         </b-nav-item>
+        <b-nav-item-dropdown v-if="$store.state.user" right
+                             :toggle-class="$route.path.startsWith('/cntl/')?'active':''">
+          <template slot="button-content">
+          <font-awesome-icon :icon="['fas', 'users-cog']"></font-awesome-icon> Organisation
+          </template>
+          <b-dropdown-item to="/cntl/ou" :active="$route.path === '/cntl/ou'">
+            <font-awesome-icon fixed-width :icon="['fas', 'building']"/>
+            Organisationseinheiten
+          </b-dropdown-item>
+          <b-dropdown-item to="/cntl/groups" :active="$route.path === '/cntl/groups'">
+            <font-awesome-icon fixed-width :icon="['fas', 'users']"/>
+            Gruppen
+          </b-dropdown-item>
+        </b-nav-item-dropdown>
         <b-nav-item-dropdown v-if="$store.state.user" right
                              :toggle-class="$route.path.startsWith('/user/')?'active':''">
           <template slot="button-content">
@@ -46,19 +60,19 @@
           </template>
           <template v-if="$store.state.user">
             <b-dropdown-item to="/user/tokens" :active="$route.path === '/user/tokens'">
-              <font-awesome-icon :icon="['fas', 'code']"/>
+              <font-awesome-icon dixed-width :icon="['fas', 'code']"/>
               Unterkonten & API-Tokens
             </b-dropdown-item>
             <b-dropdown-divider/>
             <b-dropdown-item @click="logout">
-              <font-awesome-icon :icon="['fas', 'sign-out-alt']"/>
+              <font-awesome-icon fixed-width :icon="['fas', 'sign-out-alt']"/>
               Abmelden
             </b-dropdown-item>
           </template>
         </b-nav-item-dropdown>
         <b-nav-item v-else to="/login">
           <font-awesome-icon :icon="['fas', 'sign-in-alt']"/>
-          <span>Anmelden</span>
+          <span> Anmelden</span>
         </b-nav-item>
       </b-navbar-nav>
     </b-collapse><!-- /.navbar-collapse -->

frontend/src/icons.js

@@ -34,7 +34,11 @@ import {
   faLink,
   faQuestion,
   faTimes,
-  faChevronLeft
+  faChevronLeft,
+  faUsersCog,
+  faBuilding,
+  faUsers,
+  faDumpsterFire
 } from '@fortawesome/free-solid-svg-icons'
 
 import {
@@ -89,5 +93,9 @@ library.add(
   faLink,
   faQuestion,
   faTimes,
-  faChevronLeft
+  faChevronLeft,
+  faUsersCog,
+  faBuilding,
+  faUsers,
+  faDumpsterFire
 )

frontend/src/router.js

@@ -20,6 +20,16 @@ export default new Router({
         }
       }
     },
+    {
+      path: '/cntl/ou',
+      name: 'ous',
+      component: () => import('./views/cntl/OU'),
+      meta: {
+        resolveName: function () {
+          return 'Organisationseinheiten'
+        }
+      }
+    },
     {
       path: '/login',
       name: 'login',

frontend/src/views/cntl/OU.vue

+<template>
+  <div class="oe-overview">
+    <h1>Organisationseinheiten</h1>
+    <b-checkbox :value="true" :unchecked-value="false" v-model="only_own_oe" switch>Nur eigene Organistaionseinheiten anzeigen
+    </b-checkbox>
+    <hr/>
+    <Loading :data="[ous, mgrs]">
+      <template v-for="ou in ous">
+        <b-card no-body :key="'card-account-' + ou.short_name" class="mb-4 shadow">
+          <template v-slot:header>
+            <b-row>
+              <b-col lg="3">
+                <h4>
+                  {{ ou.name }} ({{ ou.short_name }})
+                </h4>
+                <p class="text-muted">Organisationseinheit</p>
+              </b-col>
+            </b-row>
+          </template>
+          <b-button block squared variant="outline-secondary" v-b-toggle="ou.short_name + '-collapse'">
+            OE-Betreuer<br/>
+            <font-awesome-icon class="collapse-icon" :icon="['fas','chevron-down']"/>
+          </b-button>
+          <b-collapse :id="ou.short_name + '-collapse'">
+            <b-table :items="mgrs2ou[ou.short_name]" :fields="ou_list_fields">
+              <template v-slot:cell(first_name)="data">
+                {{ mgrs[data.item.mgr_login_name].first_name }}
+              </template>
+              <template v-slot:cell(last_name)="data">
+                {{ mgrs[data.item.mgr_login_name].last_name }}
+              </template>
+              <template v-slot:cell(email)="data">
+                <b-link :href="'mailto:'+mgrs[data.item.mgr_login_name].email">
+                  {{ mgrs[data.item.mgr_login_name].email }}
+                </b-link>
+              </template>
+            </b-table>
+          </b-collapse>
+        </b-card>
+      </template>
+    </Loading>
+  </div>
+</template>
+
+<script>
+import OUService from '@/api-services/ou.service'
+import Loading from '@/components/Loading'
+import apiutil from '@/util/apiutil'
+
+export default {
+  name: 'OE',
+  components: {Loading},
+  watch: {
+    only_own_oe: {
+      immediate: true,
+      async handler() {
+        await this.refresh()
+      }
+    }
+  },
+  data() {
+    return {
+      only_own_oe: true,
+      mgrs2ou: null,
+      mgrs: null,
+      ous: null,
+      ou_list_fields: [
+        {
+          key: 'mgr_login_name',
+          label: 'Login Name',
+          sortable: false
+        },
+        {
+          key: 'first_name',
+          label: 'Vorname',
+          sortable: false
+        },
+        {
+          key: 'last_name',
+          label: 'Nachname',
+          sortable: false
+        },
+        {
+          key: 'email',
+          label: 'E-Mail',
+          sortable: false
+        },
+        {
+          key: 'actions',
+          label: 'Aktionen',
+          sortable: false
+        }
+      ]
+    }
+  },
+  methods: {
+    async refresh() {
+      this.mgrs = this.mgrs2ou = this.ous = null
+      const res = (await OUService.list(this.$store.state.netdb_axios_config, this.only_own_oe)).data
+      this.mgrs2ou = apiutil.dict_of_lists_by_value_of_array(res[2], 'ou_short_name')
+      this.mgrs = apiutil.dict_by_value_of_array(res[3], 'login_name')
+      this.ous = res[1]
+    }
+  },
+  async mounted() {
+    await this.refresh()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>