From c42ecfb2fdd483ead6af6dc3fbd240b428f073b8 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 6 May 2021 08:48:29 -0400
Subject: [PATCH 01/72] add router composable

---
 .../root/src/composables/useRouter.js         | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 html/pfappserver/root/src/composables/useRouter.js

diff --git a/html/pfappserver/root/src/composables/useRouter.js b/html/pfappserver/root/src/composables/useRouter.js
new file mode 100644
index 000000000000..6ded82cf2fa1
--- /dev/null
+++ b/html/pfappserver/root/src/composables/useRouter.js
@@ -0,0 +1,22 @@
+import { customRef } from '@vue/composition-api'
+
+export const useRouterQueryParam = (context, _param = 'query') => {
+  const { root: { $router } = {} } = context
+  return customRef((track, trigger) => ({
+    get() {
+      track()
+      const { currentRoute: { query: { [_param]: value } = {} } = {} } = $router
+      if (value && ![false, null].includes(value))
+        return JSON.parse(value)
+      else
+        return undefined
+    },
+    set(newValue) {
+      const { currentRoute } = $router
+      const value = JSON.stringify(newValue)
+      $router.replace({ ...currentRoute, query: { [_param]: value } })
+        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
+        .finally(() => trigger())
+    }
+  }))
+}
\ No newline at end of file

From 89f3bd18dc05da77945c24a081390c3d8dd45d8e Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 6 May 2021 08:49:33 -0400
Subject: [PATCH 02/72] abstract basic/advanced search

---
 .../Configuration/_composables/useSearch.js   | 80 +++++++++++++++++--
 .../roles/_components/TheList.vue             | 66 ++-------------
 .../roles/_composables/useCollection.js       | 22 +++--
 .../tenants/_components/TheList.vue           | 69 ----------------
 .../tenants/_composables/useCollection.js     | 23 +++---
 5 files changed, 101 insertions(+), 159 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/_composables/useSearch.js b/html/pfappserver/root/src/views/Configuration/_composables/useSearch.js
index 017f59a3a2bf..4d3ecda8f57b 100644
--- a/html/pfappserver/root/src/views/Configuration/_composables/useSearch.js
+++ b/html/pfappserver/root/src/views/Configuration/_composables/useSearch.js
@@ -1,4 +1,5 @@
-import { computed, ref, watch } from '@vue/composition-api'
+import { computed, onMounted, ref, watch } from '@vue/composition-api'
+import { useRouterQueryParam } from '@/composables/useRouter'
 import i18n from '@/utils/locale'
 
 const useColumns = (columns) => {
@@ -29,25 +30,29 @@ export const useString = (searchString, columns) => {
 export const useCondition = (searchCondition) => {
   return {
     op: 'and',
-    values: searchCondition.map(and => {
+    values: searchCondition.map(or => {
       return {
         op: 'or',
-        values: and.values
+        values: or.values
       }
     })
   }
 }
 
-export const useSearch = (api, options) => {
-
+export const useSearch = (props, context, options) => {
   const config = {
     // defaults
+    api: {
+      list: (new Promise(r => r())),
+      search: (new Promise(r => r()))
+    },
     columns: [],
     fields: [],
     sortBy: 'id',
     sortDesc: false,
     limit: 25,
     limits: [25, 50, 100, 200, 500, 1000],
+    defaultCondition: () => ([{ values: [] }]),
     requestInterceptor: (request) => request,
     responseInterceptor: (response) => response,
     errorInterceptor: (error) => { throw (error) },
@@ -96,7 +101,7 @@ export const useSearch = (api, options) => {
       cursor: ((page.value * limit.value) - limit.value)
     }
     isLoading.value = true
-    api.list(params)
+    config.api.list(params)
       .then(_response => {
         const response = config.responseInterceptor(_response)
         const { items: _items = [], total_count } = response
@@ -140,7 +145,7 @@ export const useSearch = (api, options) => {
     }
     const body = config.requestInterceptor(_body)
     isLoading.value = true
-    api.search(body)
+    config.api.search(body)
       .then(_response => {
         const response = config.responseInterceptor(_response)
         const { items: _items = [], total_count } = response
@@ -187,6 +192,58 @@ export const useSearch = (api, options) => {
   // when columns are mutated (deep)
   watch(columns, () => reSearch(), { deep: true })
 
+  // ref(router ?query=...)
+  const routerQueryParam = useRouterQueryParam(context, 'query')
+
+  const advancedMode = ref(false)
+  const conditionBasic = ref(null)
+  const conditionAdvanced = ref(config.defaultCondition()) // default
+
+  onMounted(() => {
+    if (routerQueryParam.value) {
+      switch(routerQueryParam.value.constructor) {
+        case Array: // advanced search
+          conditionAdvanced.value = routerQueryParam.value
+          advancedMode.value = true
+          doSearchCondition(conditionAdvanced.value)
+          break
+        case String: // basic search
+        default:
+          conditionBasic.value = routerQueryParam.value
+          advancedMode.value = false
+          doSearchString(conditionBasic.value)
+          break
+      }
+    }
+    else
+      doReset()
+  })
+
+  const onSearchBasic = () => {
+    if (conditionBasic.value) {
+      doSearchString(conditionBasic.value)
+      routerQueryParam.value = conditionBasic.value
+    }
+    else
+      doReset()
+  }
+
+  const onSearchAdvanced = () => {
+    if (conditionAdvanced.value) {
+      doSearchCondition(conditionAdvanced.value)
+      routerQueryParam.value = conditionAdvanced.value
+    }
+    else
+      doReset()
+  }
+
+  const onSearchReset = () => {
+    conditionBasic.value = null
+    conditionAdvanced.value = config.defaultCondition() // dereference
+    routerQueryParam.value = undefined
+    doReset()
+  }
+
   return {
     columns,
     visibleColumns,
@@ -204,7 +261,14 @@ export const useSearch = (api, options) => {
     doSearch,
     reSearch,
     isLoading,
-    items
+    items,
+
+    advancedMode,
+    conditionBasic,
+    conditionAdvanced,
+    onSearchBasic,
+    onSearchAdvanced,
+    onSearchReset
   }
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_components/TheList.vue b/html/pfappserver/root/src/views/Configuration/roles/_components/TheList.vue
index a7c2ed600067..3f5d7dd817da 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_components/TheList.vue
+++ b/html/pfappserver/root/src/views/Configuration/roles/_components/TheList.vue
@@ -199,86 +199,39 @@ const components = {
   pfEmptyTable
 }
 
-import { computed, onMounted, ref } from '@vue/composition-api'
+import { computed, ref } from '@vue/composition-api'
 import { useSearch, useRouter } from '../_composables/useCollection'
 import { useNodeInheritance } from '../_composables/useNodeInheritance'
 import { reasons } from '../config'
 
-const defaultCondition = () => ([{ values: [{ field: 'parent_id', op: 'equals', value: null }] }])
-
 const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
-  const advancedMode = ref(false)
-  const conditionBasic = ref(null)
-  const conditionAdvanced = ref(defaultCondition()) // default
   const search = useSearch(props, context)
   const {
-    doReset,
-    doSearchString,
-    doSearchCondition,
     reSearch,
     items,
     sortBy,
-    sortDesc
+    sortDesc,
+    onSearchBasic: _onSearchBasic,
+    onSearchAdvanced: _onSearchAdvanced,
+    onSearchReset: _onSearchReset
   } = search
 
-  onMounted(() => {
-    const { currentRoute: { query: { query } = {} } = {} } = $router
-    if (query) {
-      const parsedQuery = JSON.parse(query)
-      switch(parsedQuery.constructor) {
-        case Array: // advanced search
-          conditionAdvanced.value = parsedQuery
-          advancedMode.value = true
-          doSearchCondition(conditionAdvanced.value)
-          break
-        case String: // basic search
-        default:
-          conditionBasic.value = parsedQuery
-          advancedMode.value = false
-          doSearchString(conditionBasic.value)
-          break
-      }
-    }
-    else
-      doReset()
-  })
-
-  const _setQueryParam = query => {
-    const { currentRoute } = $router
-    $router.replace({ ...currentRoute, query: { query } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
-  }
-  const _clearQueryParam = () => _setQueryParam()
-
   const onSearchBasic = () => {
     clearExpandedNodes()
-    if (conditionBasic.value) {
-      doSearchString(conditionBasic.value)
-      _setQueryParam(JSON.stringify(conditionBasic.value))
-    }
-    else
-      doReset()
+    return _onSearchBasic()
   }
 
   const onSearchAdvanced = () => {
     clearExpandedNodes()
-    if (conditionAdvanced.value) {
-      doSearchCondition(conditionAdvanced.value)
-      _setQueryParam(JSON.stringify(conditionAdvanced.value))
-    }
-    else
-      doReset()
+    return _onSearchAdvanced()
   }
 
   const onSearchReset = () => {
-    conditionBasic.value = null
-    conditionAdvanced.value = defaultCondition() // dereference
-    _clearQueryParam()
     clearExpandedNodes()
-    doReset()
+    return _onSearchReset()
   }
 
   const onRowClicked = item => {
@@ -345,10 +298,7 @@ const setup = (props, context) => {
   } = useNodeInheritance(items, sortBy, sortDesc)
 
   return {
-    advancedMode,
-    conditionBasic,
     onSearchBasic,
-    conditionAdvanced,
     onSearchAdvanced,
     onSearchReset,
     onRowClicked,
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js
index b4632a8477b7..a178645f5373 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js
@@ -58,23 +58,21 @@ const useStore = (props, context, form) => {
   }
 }
 
-import {
-  useSearch as useConfigurationSearch
-} from '@/views/Configuration/_composables/useSearch'
+import { useSearch as useConfigurationSearch } from '@/views/Configuration/_composables/useSearch'
 import api from '../_api'
 import {
   columns,
   fields
 } from '../config'
-export const useSearch = (props, context, options) => {
-  return useConfigurationSearch(api, { 
-    name: 'roles', // localStorage prefix
-    columns,
-    fields,
-    sortBy: 'id',
-    ...options,
-  })
-}
+export const useSearch = (props, context, options) => useConfigurationSearch(props, context, {
+  id: 'roles',
+  api,
+  columns,
+  fields,
+  sortBy: 'id',
+  defaultCondition: () => ([{ values: [{ field: 'parent_id', op: 'equals', value: null }] }]),
+  ...options,
+})
 
 export default {
   useItemDefaults,
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheList.vue b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheList.vue
index b6c0ee300a25..d247af67dcb2 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheList.vue
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheList.vue
@@ -148,80 +148,17 @@ const components = {
   pfEmptyTable
 }
 
-import { onMounted, ref } from '@vue/composition-api'
 import { useSearch, useRouter } from '../_composables/useCollection'
 
-const defaultCondition = () => ([{ values: [{ field: 'name', op: 'contains', value: null }] }])
-
 const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
-  const advancedMode = ref(false)
-  const conditionBasic = ref(null)
-  const conditionAdvanced = ref(defaultCondition()) // default
   const search = useSearch(props, context)
   const {
-    doReset,
-    doSearchString,
-    doSearchCondition,
     reSearch
   } = search
 
-  onMounted(() => {
-    const { currentRoute: { query: { query } = {} } = {} } = $router
-    if (query) {
-      const parsedQuery = JSON.parse(query)
-      switch(parsedQuery.constructor) {
-        case Array: // advanced search
-          conditionAdvanced.value = parsedQuery
-          advancedMode.value = true
-          doSearchCondition(conditionAdvanced.value)
-          break
-        case String: // basic search
-        default:
-          conditionBasic.value = parsedQuery
-          advancedMode.value = false
-          doSearchString(conditionBasic.value)
-          break
-      }
-    }
-    else
-      doReset()
-  })
-
-  const _setQueryParam = query => {
-    const { currentRoute } = $router
-    $router.replace({ ...currentRoute, query: { query } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
-  }
-  const _clearQueryParam = () => _setQueryParam()
-
-  const onSearchBasic = () => {
-    if (conditionBasic.value) {
-      doSearchString(conditionBasic.value)
-      _setQueryParam(JSON.stringify(conditionBasic.value))
-    }
-    else
-      doReset()
-  }
-
-  const onSearchAdvanced = () => {
-    if (conditionAdvanced.value) {
-      doSearchCondition(conditionAdvanced.value)
-      _setQueryParam(JSON.stringify(conditionAdvanced.value))
-    }
-    else
-      doReset()
-  }
-
-  const onSearchReset = () => {
-    conditionBasic.value = null
-    conditionAdvanced.value = defaultCondition() // dereference
-    _clearQueryParam()
-    doReset()
-  }
-
   const onRowClicked = item => {
     const {
       goToItem
@@ -239,12 +176,6 @@ const setup = (props, context) => {
   }
 
   return {
-    advancedMode,
-    conditionBasic,
-    onSearchBasic,
-    conditionAdvanced,
-    onSearchAdvanced,
-    onSearchReset,
     onRowClicked,
     onClone,
     onRemove,
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
index 74f3aab247f3..2c9ab6453f25 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
@@ -61,23 +61,22 @@ const useStore = (props, context, form) => {
   }
 }
 
-import {
-  useSearch as useConfigurationSearch
-} from '@/views/Configuration/_composables/useSearch'
+import { useSearch as useConfigurationSearch } from '@/views/Configuration/_composables/useSearch'
 import api from '../_api'
 import {
   columns,
   fields
 } from '../config'
-export const useSearch = (props, context, options) => {
-  return useConfigurationSearch(api, {
-    name: 'tenants', // localStorage prefix
-    columns,
-    fields,
-    sortBy: 'id',
-    ...options,
-  })
-}
+export const useSearch = (props, context, options) => useConfigurationSearch(props, context, {
+  id: 'tenants',
+  api,
+  columns,
+  fields,
+  sortBy: 'id',
+  defaultCondition: () => ([{ values: [{ field: 'name', op: 'contains', value: null }] }]),
+  ...options,
+})
+
 
 export default {
   useItemDefaults,

From f26fe95f4aa454b3ea3cddb1ac58b7f2c24dddc8 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Mon, 10 May 2021 17:14:59 -0400
Subject: [PATCH 03/72] improve collection and resource exports, move router
 composables

---
 .../root/src/composables/useMeta.js           |  20 +++
 .../_composables/useViewCollectionItem.js     |  18 ++-
 .../_composables/useResource.js               |   9 +-
 .../activeActive/_composables/useResource.js  |   9 +-
 .../_components/TheList.vue}                  |   0
 .../adminRoles/_components/TheView.js         |   2 +-
 .../adminRoles/_composables/useCollection.js  |  45 +++---
 .../views/Configuration/adminRoles/_router.js |  12 +-
 .../adminRole.js => adminRoles/config.js}     |   0
 .../advanced/_composables/useResource.js      |   9 +-
 .../alerting/_composables/useResource.js      |   9 +-
 .../billingTiers/_components/TheView.js       |   2 +-
 .../_composables/useCollection.js             |  28 +---
 .../Configuration/billingTiers/_router.js     |  10 ++
 .../captivePortal/_composables/useResource.js |   9 +-
 .../connectionProfiles/_components/TheView.js |   4 +-
 .../_composables/useCollection.js             |  28 +---
 .../connectionProfiles/_router.js             |  10 ++
 .../advanced/_composables/useResource.js      |   9 +-
 .../general/_composables/useResource.js       |   9 +-
 .../dns/_composables/useResource.js           |   9 +-
 .../domains/_components/TheView.js            |   2 +-
 .../domains/_composables/useCollection.js     |  33 +---
 .../views/Configuration/domains/_router.js    |  15 ++
 .../filterEngines/_components/TheView.js      |   4 +-
 .../_composables/useCollection.js             |  30 +---
 .../Configuration/filterEngines/_router.js    |  10 ++
 .../combinations/_components/TheView.js       |   6 +-
 .../_composables/useCollection.js             |  27 +---
 .../fingerbank/combinations/_router.js        |  10 ++
 .../_composables/useResource.js               |  10 +-
 .../fingerbank/devices/_components/TheView.js |   6 +-
 .../devices/_composables/useCollection.js     |  27 +---
 .../fingerbank/devices/_router.js             |  15 ++
 .../dhcpFingerprints/_components/TheView.js   |   6 +-
 .../_composables/useCollection.js             |  27 +---
 .../fingerbank/dhcpFingerprints/_router.js    |  14 ++
 .../dhcpVendors/_components/TheView.js        |   6 +-
 .../dhcpVendors/_composables/useCollection.js |  27 +---
 .../fingerbank/dhcpVendors/_router.js         |  14 ++
 .../dhcpv6Enterprises/_components/TheView.js  |   6 +-
 .../_composables/useCollection.js             |  27 +---
 .../fingerbank/dhcpv6Enterprises/_router.js   |  14 ++
 .../dhcpv6Fingerprints/_components/TheView.js |   6 +-
 .../_composables/useCollection.js             |  27 +---
 .../fingerbank/dhcpv6Fingerprints/_router.js  |  14 ++
 .../_composables/useResource.js               |   9 +-
 .../macVendors/_components/TheView.js         |   6 +-
 .../macVendors/_composables/useCollection.js  |  27 +---
 .../fingerbank/macVendors/_router.js          |  14 ++
 .../userAgents/_components/TheView.js         |   6 +-
 .../userAgents/_composables/useCollection.js  |  27 +---
 .../fingerbank/userAgents/_router.js          |  14 ++
 .../firewalls/_components/TheView.js          |   4 +-
 .../firewalls/_composables/useCollection.js   |  35 +----
 .../views/Configuration/firewalls/_router.js  |  10 ++
 .../floatingDevices/_components/TheView.js    |   2 +-
 .../_composables/useCollection.js             |  28 +---
 .../Configuration/floatingDevices/_router.js  |  10 ++
 .../general/_composables/useResource.js       |   9 +-
 .../maintenanceTasks/_components/TheView.js   |   2 +-
 .../_composables/useCollection.js             |  24 +--
 .../Configuration/maintenanceTasks/_router.js |   9 ++
 .../_components/TheView.js                    |   2 +-
 .../_composables/useCollection.js             |  31 +---
 .../networkBehaviorPolicy/_router.js          |  10 ++
 .../fencing/_composables/useResource.js       |   9 +-
 .../inline/_composables/useResource.js        |  12 +-
 .../interfaces/_components/TheView.js         |   4 +-
 .../interfaces/_composables/useCollection.js  |  35 +----
 .../networks/interfaces/_router.js            |  22 +++
 .../layer2Networks/_components/TheView.js     |   2 +-
 .../_composables/useCollection.js             |  27 +---
 .../networks/layer2Networks/_router.js        |   9 ++
 .../network/_composables/useResource.js       |   9 +-
 .../parking/_composables/useResource.js       |  12 +-
 .../routedNetworks/_components/TheView.js     |   2 +-
 .../_composables/useCollection.js             |  28 +---
 .../networks/routedNetworks/_router.js        |  10 ++
 .../_components/TheView.js                    |   2 +-
 .../_composables/useCollection.js             |  32 +---
 .../trafficShapingPolicies/_router.js         |   9 ++
 .../src/views/Configuration/pki/_router.js    | 147 ++----------------
 .../pki/cas/_components/TheView.js            |   4 +-
 .../pki/cas/_composables/useCollection.js     |  24 +--
 .../views/Configuration/pki/cas/_router.js    |  62 ++++++++
 .../pki/certs/_components/TheView.js          |   4 +-
 .../pki/certs/_composables/useCollection.js   |  27 +---
 .../views/Configuration/pki/certs/_router.js  |  62 ++++++++
 .../pki/profiles/_components/TheView.js       |   4 +-
 .../profiles/_composables/useCollection.js    |  27 +---
 .../Configuration/pki/profiles/_router.js     |  62 ++++++++
 .../pki/revokedCerts/_components/TheView.js   |   4 +-
 .../_composables/useCollection.js             |  19 +--
 .../Configuration/pki/revokedCerts/_router.js |  41 +++++
 .../pkiProviders/_components/TheView.js       |   4 +-
 .../_composables/useCollection.js             |  35 +----
 .../Configuration/pkiProviders/_router.js     |  10 ++
 .../portalModules/_components/TheView.js      |   4 +-
 .../_composables/useCollection.js             |  35 +----
 .../Configuration/portalModules/_router.js    |  10 ++
 .../provisioners/_components/TheView.js       |   4 +-
 .../_composables/useCollection.js             |  35 +----
 .../Configuration/provisioners/_router.js     |  10 ++
 .../radius/eap/_components/TheView.js         |   2 +-
 .../radius/eap/_composables/useCollection.js  |  28 +---
 .../views/Configuration/radius/eap/_router.js |  10 ++
 .../radius/fast/_components/TheView.js        |   2 +-
 .../radius/fast/_composables/useCollection.js |  28 +---
 .../Configuration/radius/fast/_router.js      |  10 ++
 .../general/_composables/useResource.js       |   9 +-
 .../radius/ocsp/_components/TheView.js        |   2 +-
 .../radius/ocsp/_composables/useCollection.js |  28 +---
 .../Configuration/radius/ocsp/_router.js      |  10 ++
 .../radius/ssl/_components/TheView.js         |   2 +-
 .../radius/ssl/_composables/useCollection.js  |  28 +---
 .../views/Configuration/radius/ssl/_router.js |  10 ++
 .../radius/tls/_components/TheView.js         |   2 +-
 .../radius/tls/_composables/useCollection.js  |  28 +---
 .../views/Configuration/radius/tls/_router.js |  10 ++
 .../realms/_components/TheView.js             |   2 +-
 .../realms/_composables/useCollection.js      |  32 +---
 .../src/views/Configuration/realms/_router.js |  20 +++
 .../roles/_components/TheView.js              |   2 +-
 .../roles/_composables/useCollection.js       |  29 +---
 .../src/views/Configuration/roles/_router.js  |  10 ++
 .../scanEngines/_components/TheView.js        |   4 +-
 .../scanEngines/_composables/useCollection.js |  37 +----
 .../Configuration/scanEngines/_router.js      |  10 ++
 .../securityEvents/_components/TheView.js     |   2 +-
 .../_composables/useCollection.js             |  28 +---
 .../Configuration/securityEvents/_router.js   |  10 ++
 .../selfServices/_components/TheView.js       |   2 +-
 .../_composables/useCollection.js             |  28 +---
 .../Configuration/selfServices/_router.js     |  10 ++
 .../services/_composables/useResource.js      |   9 +-
 .../snmpTraps/_composables/useResource.js     |  12 +-
 .../sources/_components/TheView.js            |   4 +-
 .../sources/_composables/useCollection.js     |  35 +----
 .../views/Configuration/sources/_router.js    |  10 ++
 .../sslCertificates/_components/TheForm.vue   |   2 +-
 .../_composables/useCollection.js             |   9 +-
 .../switchGroups/_components/TheView.js       |   4 +-
 .../_composables/useCollection.js             |  33 +---
 .../Configuration/switchGroups/_router.js     |  10 ++
 .../switchTemplates/_components/TheView.js    |   2 +-
 .../_composables/useCollection.js             |  28 +---
 .../Configuration/switchTemplates/_router.js  |  10 ++
 .../switches/_components/TheView.js           |   4 +-
 .../switches/_composables/useCollection.js    |  31 +---
 .../views/Configuration/switches/_router.js   |  10 ++
 .../syslogForwarders/_components/TheView.js   |   4 +-
 .../_composables/useCollection.js             |  35 +----
 .../Configuration/syslogForwarders/_router.js |  10 ++
 .../syslogParsers/_components/TheView.js      |   4 +-
 .../_composables/useCollection.js             |  35 +----
 .../Configuration/syslogParsers/_router.js    |  10 ++
 .../tenants/_components/TheView.js            |   2 +-
 .../tenants/_composables/useCollection.js     |  30 +---
 .../views/Configuration/tenants/_router.js    |  10 ++
 .../webServices/_composables/useResource.js   |   9 +-
 .../wmiRules/_components/TheView.js           |   2 +-
 .../wmiRules/_composables/useCollection.js    |  28 +---
 .../views/Configuration/wmiRules/_router.js   |  10 ++
 .../Configuration/wrix/_components/TheView.js |   2 +-
 .../wrix/_composables/useCollection.js        |  28 +---
 .../src/views/Configuration/wrix/_router.js   |  10 ++
 .../views/Nodes/_components/TheFormCreate.vue |   9 +-
 .../views/Nodes/_components/TheFormUpdate.vue |   7 +-
 169 files changed, 1095 insertions(+), 1569 deletions(-)
 rename html/pfappserver/root/src/views/Configuration/{_components/AdminRolesList.vue => adminRoles/_components/TheList.vue} (100%)
 rename html/pfappserver/root/src/views/Configuration/{_config/adminRole.js => adminRoles/config.js} (100%)
 create mode 100644 html/pfappserver/root/src/views/Configuration/pki/cas/_router.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/pki/certs/_router.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/pki/profiles/_router.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_router.js

diff --git a/html/pfappserver/root/src/composables/useMeta.js b/html/pfappserver/root/src/composables/useMeta.js
index 738b62daf452..5c8f9822f2be 100644
--- a/html/pfappserver/root/src/composables/useMeta.js
+++ b/html/pfappserver/root/src/composables/useMeta.js
@@ -201,3 +201,23 @@ export const useFormMetaSchema = (meta, schema) => {
     }
   })
 }
+
+export const useDefaultsFromMeta = (meta = {}) => {
+  let defaults = {}
+  Object.keys(meta).forEach(key => {
+    if ('properties' in meta[key]) { // handle dot-notation keys ('.')
+      Object.keys(meta[key].properties).forEach(property => {
+        if (!(key in defaults)) {
+          defaults[key] = {}
+        }
+        // default w/ object
+        defaults[key][property] = meta[key].properties[property].default
+      })
+    } else {
+      defaults[key] = meta[key].default
+    }
+  })
+  return defaults
+}
+
+
diff --git a/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItem.js b/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItem.js
index 12aafb8a5136..dcab0ef24eae 100644
--- a/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItem.js
+++ b/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItem.js
@@ -3,6 +3,7 @@ import { useDebouncedWatchHandler } from '@/composables/useDebounce'
 import useEventActionKey from '@/composables/useEventActionKey'
 import useEventEscapeKey from '@/composables/useEventEscapeKey'
 import useEventJail from '@/composables/useEventJail'
+import { useDefaultsFromMeta } from '@/composables/useMeta'
 
 export const useViewCollectionItemProps = {
   id: {
@@ -22,7 +23,7 @@ export const useViewCollectionItemProps = {
 export const useViewCollectionItem = (collection, props, context) => {
 
   const {
-    useItemDefaults = () => ({}), // {}
+    useItemDefaults = useDefaultsFromMeta, // {}
     useItemTitle = () => {},
     useItemTitleBadge = () => {},
     useRouter = () => {},
@@ -73,11 +74,12 @@ export const useViewCollectionItem = (collection, props, context) => {
     return !!updateItem
   })
 
+  const { root: { $router } = {} } = context
   const {
     goToCollection,
     goToItem,
     goToClone,
-  } = useRouter(props, context, form)
+  } = useRouter($router)
 
   const isCloneable = computed(() => !!goToClone)
 
@@ -137,11 +139,11 @@ export const useViewCollectionItem = (collection, props, context) => {
       return updateItem()
   }
 
-  const onClose = () => goToCollection()
+  const onClose = () => goToCollection(form.value, props, false)
 
-  const onClone = () => goToClone()
+  const onClone = () => goToClone(form.value, props)
 
-  const onRemove = () => deleteItem().then(() => goToCollection())
+  const onRemove = () => deleteItem().then(() => goToCollection(form.value, props, false))
 
   const onReset = () => init().then(() => isModified.value = false)
 
@@ -151,16 +153,16 @@ export const useViewCollectionItem = (collection, props, context) => {
     const closeAfter = actionKey.value
     save().then(response => {
       if (closeAfter) // [CTRL] key pressed
-        goToCollection(true)
+        goToCollection(form.value, props, true)
       else {
         form.value = { ...form.value, ...response } // merge form w/ newly inserted IDs
-        goToItem(form.value).then(() => init()) // re-init
+        goToItem(form.value, props).then(() => init()) // re-init
       }
     })
   }
 
   const escapeKey = useEventEscapeKey(rootRef)
-  watch(escapeKey, () => goToCollection())
+  watch(escapeKey, () => goToCollection(form.value, props, false))
 
   watch(props, () => init(), { deep: true, immediate: true })
 
diff --git a/html/pfappserver/root/src/views/Configuration/accessDurations/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/accessDurations/_composables/useResource.js
index 67b6beed4c03..974f3593cb4f 100644
--- a/html/pfappserver/root/src/views/Configuration/accessDurations/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/accessDurations/_composables/useResource.js
@@ -5,9 +5,9 @@ import {
   serializeDuration
 } from '../config'
 
-const useTitle = () => i18n.t('Access Duration')
+export const useTitle = () => i18n.t('Access Duration')
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -26,8 +26,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useTitle,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/activeActive/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/activeActive/_composables/useResource.js
index b1c038bcc1bc..42bf2071af0e 100644
--- a/html/pfappserver/root/src/views/Configuration/activeActive/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/activeActive/_composables/useResource.js
@@ -1,9 +1,9 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('Active Active')
+export const useTitle = () => i18n.t('Active Active')
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -14,8 +14,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useTitle,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_components/AdminRolesList.vue b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheList.vue
similarity index 100%
rename from html/pfappserver/root/src/views/Configuration/_components/AdminRolesList.vue
rename to html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheList.vue
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheView.js
index 83c6098d21fa..e3baafaa9c98 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
 
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
index 584deb5b4adb..fe8215f49895 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,21 +19,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'admin_roles' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'admin_role', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneAdminRole', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -58,9 +43,21 @@ const useStore = (props, context, form) => {
   }
 }
 
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
+import { useSearch as useConfigurationSearch } from '@/views/Configuration/_composables/useSearch'
+import api from '../_api'
+import {
+  columns,
+  fields
+} from '../config'
+export const useSearch = (props, context, options) => useConfigurationSearch(props, context, {
+  id: 'adminRoles',
+  api,
+  columns,
+  fields,
+  sortBy: 'id',
+  defaultCondition: () => ([{ values: [
+    { field: 'id', op: 'contains', value: null },
+    { field: 'description', op: 'contains', value: null }
+  ] }]),
+  ...options,
+})
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_router.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_router.js
index 30111a11cc64..c6a012635a91 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_router.js
@@ -1,7 +1,17 @@
 import store from '@/store'
 import StoreModule from './_store'
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/AdminRolesList')
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'admin_roles' }),
+    goToItem: params => $router
+      .push({ name: 'admin_role', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneAdminRole', params }),
+  }
+}
+
+const TheList = () => import(/* webpackChunkName: "Configuration" */ './_components/TheList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const beforeEnter = (to, from, next = () => {}) => {
diff --git a/html/pfappserver/root/src/views/Configuration/_config/adminRole.js b/html/pfappserver/root/src/views/Configuration/adminRoles/config.js
similarity index 100%
rename from html/pfappserver/root/src/views/Configuration/_config/adminRole.js
rename to html/pfappserver/root/src/views/Configuration/adminRoles/config.js
diff --git a/html/pfappserver/root/src/views/Configuration/advanced/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/advanced/_composables/useResource.js
index 1270ce15ecc9..27aa4ca5e93a 100644
--- a/html/pfappserver/root/src/views/Configuration/advanced/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/advanced/_composables/useResource.js
@@ -1,9 +1,9 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('Advanced')
+export const useTitle = () => i18n.t('Advanced')
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -12,8 +12,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_bases/updateAdvanced', form.value)
   }
 }
-
-export default {
-  useTitle,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/alerting/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/alerting/_composables/useResource.js
index 6a2ec6e8623d..d337b162e176 100644
--- a/html/pfappserver/root/src/views/Configuration/alerting/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/alerting/_composables/useResource.js
@@ -1,9 +1,9 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('Alerting')
+export const useTitle = () => i18n.t('Alerting')
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -14,8 +14,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useTitle,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheView.js
index 1510aaa64485..b067861f2a36 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheView.js
@@ -23,7 +23,7 @@ const props = {
   }
 }
 
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
index d5f2fb5e1097..29f9705e7073 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,21 +19,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'billing_tiers' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'billing_tier', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneBillingTier', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -57,10 +42,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_billing_tiers/updateBillingTier', form.value)
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_router.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_router.js
index 5e3874350f4c..622c53572246 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_router.js
@@ -1,6 +1,16 @@
 import store from '@/store'
 import StoreModule from './_store'
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'billing_tiers' }),
+    goToItem: params => $router
+      .push({ name: 'billing_tier', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneBillingTier', params }),
+  }
+}
+
 const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/BillingTiersList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
diff --git a/html/pfappserver/root/src/views/Configuration/captivePortal/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/captivePortal/_composables/useResource.js
index a8947dd918a0..a56a3ba489a9 100644
--- a/html/pfappserver/root/src/views/Configuration/captivePortal/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/captivePortal/_composables/useResource.js
@@ -1,9 +1,9 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('Captive Portal')
+export const useTitle = () => i18n.t('Captive Portal')
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -14,8 +14,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useTitle,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheView.js
index 3d90a6e354d5..612e780e90fb 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheView.js
@@ -13,11 +13,11 @@ const components = {
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => {
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js
index 417887fe2f83..d5c8943dc2ed 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js
@@ -1,8 +1,5 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../_config/'
 
 export const useItemProps = {
   id: {
@@ -10,7 +7,7 @@ export const useItemProps = {
   }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -28,21 +25,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'connection_profiles' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'connection_profile', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneConnectionProfile', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -63,10 +48,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_connection_profiles/updateConnectionProfile', form.value)
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_router.js b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_router.js
index 00c9af1cf70d..81e6505cb8eb 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_router.js
@@ -1,6 +1,16 @@
 import store from '@/store'
 import StoreModule from './_store'
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'connection_profiles' }),
+    goToItem: params => $router
+      .push({ name: 'connection_profile', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneConnectionProfile', params }),
+  }
+}
+
 const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/ConnectionProfilesList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
diff --git a/html/pfappserver/root/src/views/Configuration/database/advanced/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/database/advanced/_composables/useResource.js
index ff1951cba7b7..d82acbbb3f08 100644
--- a/html/pfappserver/root/src/views/Configuration/database/advanced/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/database/advanced/_composables/useResource.js
@@ -1,9 +1,9 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('Database Advanced')
+export const useTitle = () => i18n.t('Database Advanced')
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -14,8 +14,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useTitle,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/database/general/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/database/general/_composables/useResource.js
index 0e6152f83815..f10dfcca3f3a 100644
--- a/html/pfappserver/root/src/views/Configuration/database/general/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/database/general/_composables/useResource.js
@@ -1,9 +1,9 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('Database General')
+export const useTitle = () => i18n.t('Database General')
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -14,8 +14,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useTitle,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/dns/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/dns/_composables/useResource.js
index 5d6e7ff256e2..84f362d9b64d 100644
--- a/html/pfappserver/root/src/views/Configuration/dns/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/dns/_composables/useResource.js
@@ -1,9 +1,9 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('DNS Configuration')
+export const useTitle = () => i18n.t('DNS Configuration')
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -14,8 +14,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useTitle,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/domains/_components/TheView.js
index bba07bbc7fa2..0c8b751c4b42 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/domains/_components/TheView.js
@@ -22,7 +22,7 @@ const props = {
   }
 }
 
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
index 3ca99dc0b2da..35a12d7be712 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,26 +19,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: (autoJoinDomain) => {
-      if (autoJoinDomain)
-        $router.push({ name: 'domains', params: { autoJoinDomain: form.value } })
-      else
-        $router.push({ name: 'domains' })
-    },
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'domain', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneDomain', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -55,10 +35,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_domains/updateDomain', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_router.js b/html/pfappserver/root/src/views/Configuration/domains/_router.js
index 1e37076583fa..e8d041797eda 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/domains/_router.js
@@ -2,6 +2,21 @@ import store from '@/store'
 import DomainsStoreModule from './_store'
 import RealmsStoreModule from '../realms/_store'
 
+export const useRouter = $router => {
+  return {
+    goToCollection: (params, props, autoJoinDomain) => {
+      if (autoJoinDomain)
+        $router.push({ name: 'domains', params: { autoJoinDomain: params } })
+      else
+        $router.push({ name: 'domains' })
+    },
+    goToItem: params => $router
+      .push({ name: 'domain', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneDomain', params }),
+  }
+}
+
 export const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../_components/DomainsTabs')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheView.js
index 8dade56b0746..d006b2277d8d 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheView.js
@@ -10,11 +10,11 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
index bce15c8c447c..28773484674d 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
@@ -1,6 +1,5 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import { defaultsFromMeta as useItemDefaults } from '../../_config/'
 
 export const useItemProps = {
   collection: {
@@ -11,7 +10,7 @@ export const useItemProps = {
   },
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -29,7 +28,7 @@ const useItemTitle = (props) => {
   })
 }
 
-const useItemTitleBadge = (props, context) => {
+export const useItemTitleBadge = (props, context) => {
   const {
     collection
   } = toRefs(props)
@@ -37,21 +36,9 @@ const useItemTitleBadge = (props, context) => {
   return computed(() => $store.getters['$_filter_engines/collectionToName'](collection.value))
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    collection
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'filterEnginesCollection', params: { collection: collection.value } }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'filter_engine', params: { collection: collection.value, id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneFilterEngine', params: { collection: collection.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     collection,
     id,
@@ -74,12 +61,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_filter_engines/updateFilterEngine', { collection: collection.value, id: id.value, data: form.value }),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemProps,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_router.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_router.js
index 3fde2a2ff6f3..7f5e294d9383 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_router.js
@@ -1,6 +1,16 @@
 import store from '@/store'
 import StoreModule from './_store'
 
+export const useRouter = $router => {
+  return {
+    goToCollection: params => $router.push({ name: 'filterEnginesCollection', params }),
+    goToItem: params => $router
+      .push({ name: 'filter_engine', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneFilterEngine', params }),
+  }
+}
+
 const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/FilterEnginesList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheView.js
index 0a74c1e5d1ac..219827091df9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheView.js
@@ -11,18 +11,18 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
-import collection, { useItemProps, useItemTitleBadge } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => {
 
   const viewCollectionItem = useViewCollectionItem(collection, props, context)
 
-  const titleBadge = useItemTitleBadge(props)
+  const titleBadge = collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
index accfbb559e31..0c676fb394f5 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
@@ -10,7 +10,7 @@ export const useItemProps = {
   }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -30,22 +30,9 @@ const useItemTitle = (props) => {
 
 export const useItemTitleBadge = props => props.scope
 
-const useRouter = (props, context, form) => {
-  const {
-    id,
-    scope
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'fingerbankCombinations' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'fingerbankCombination', params: { id: item.id, scope: scope.value } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneFingerbankCombination', params: { id: form.value.id || id.value, scope: 'local' } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -58,11 +45,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/updateCombination', form.value),
   }
 }
-
-export default {
-  useItemProps,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_router.js
index 16077bf56faf..7838acf2865c 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_router.js
@@ -1,6 +1,16 @@
 import store from '@/store'
 import { TheTabs } from '../_components/'
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'fingerbankCombinations' }),
+    goToItem: params => $router
+      .push({ name: 'fingerbankCombination', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneFingerbankCombination', params }),
+  }
+}
+
 const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
 
 export default [
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_composables/useResource.js
index 22f513b17e55..ab6354df9fcc 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_composables/useResource.js
@@ -1,9 +1,9 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('Fingerbank device change detection')
+export const useTitle = () => i18n.t('Fingerbank device change detection')
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -12,9 +12,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_bases/updateFingerbankDeviceChange', form.value)
   }
 }
-
-export default {
-  useTitle,
-  useStore,
-}
-
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheView.js
index 0a74c1e5d1ac..219827091df9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheView.js
@@ -11,18 +11,18 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
-import collection, { useItemProps, useItemTitleBadge } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => {
 
   const viewCollectionItem = useViewCollectionItem(collection, props, context)
 
-  const titleBadge = useItemTitleBadge(props)
+  const titleBadge = collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
index 20713c8f2655..a088a674b689 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
@@ -10,7 +10,7 @@ export const useItemProps = {
   }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -30,22 +30,9 @@ const useItemTitle = (props) => {
 
 export const useItemTitleBadge = props => props.scope
 
-const useRouter = (props, context, form) => {
-  const {
-    id,
-    scope
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'fingerbankDevices' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'fingerbankDevice', params: { id: item.id, scope: scope.value } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneFingerbankDevice', params: { id: form.value.id || id.value, scope: 'local' } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -58,11 +45,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/updateDevice', form.value),
   }
 }
-
-export default {
-  useItemProps,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_router.js
index cc371f8083aa..ebc52d5ca807 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_router.js
@@ -1,4 +1,19 @@
+import { toRefs } from '@vue/composition-api'
 import store from '@/store'
+
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'fingerbankDevices' }),
+    goToItem: (params, props) => {
+      const { scope } = toRefs(props)
+      $router
+        .push({ name: 'fingerbankDevice', params: { ...params, scope: scope.value } })
+        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
+    },
+    goToClone: params => $router.push({ name: 'cloneFingerbankDevice', params: { ...params, scope: 'local' } })
+  }
+}
+
 import { TheTabs } from '../_components/'
 const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
 
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheView.js
index 0a74c1e5d1ac..219827091df9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheView.js
@@ -11,18 +11,18 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
-import collection, { useItemProps, useItemTitleBadge } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => {
 
   const viewCollectionItem = useViewCollectionItem(collection, props, context)
 
-  const titleBadge = useItemTitleBadge(props)
+  const titleBadge = collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
index 9097853eb20c..493eb358d016 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
@@ -10,7 +10,7 @@ export const useItemProps = {
   }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -30,22 +30,9 @@ const useItemTitle = (props) => {
 
 export const useItemTitleBadge = props => props.scope
 
-const useRouter = (props, context, form) => {
-  const {
-    id,
-    scope
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'fingerbankDhcpFingerprints' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'fingerbankDhcpFingerprint', params: { id: item.id, scope: scope.value } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneFingerbankDhcpFingerprint', params: { id: form.value.id || id.value, scope: 'local' } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -58,11 +45,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/updateDhcpFingerprint', form.value),
   }
 }
-
-export default {
-  useItemProps,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_router.js
index 50e1ea54c4b8..3c09f97c4d19 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_router.js
@@ -1,7 +1,21 @@
+import { toRefs } from '@vue/composition-api'
 import store from '@/store'
 import { TheTabs } from '../_components/'
 const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'fingerbankDhcpFingerprints' }),
+    goToItem: (params, props) => {
+      const { scope } = toRefs(props)
+      $router
+        .push({ name: 'fingerbankDhcpFingerprint', params: { ...params, scope: scope.value } })
+        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
+    },
+    goToClone: params => $router.push({ name: 'cloneFingerbankDhcpFingerprint', params: { ...params, scope: 'local' } })
+  }
+}
+
 export default [
   {
     path: 'fingerbank/dhcp_fingerprints',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheView.js
index 0a74c1e5d1ac..219827091df9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheView.js
@@ -11,18 +11,18 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
-import collection, { useItemProps, useItemTitleBadge } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => {
 
   const viewCollectionItem = useViewCollectionItem(collection, props, context)
 
-  const titleBadge = useItemTitleBadge(props)
+  const titleBadge = collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
index fb478e4dd11f..30864046475c 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
@@ -10,7 +10,7 @@ export const useItemProps = {
   }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -30,22 +30,9 @@ const useItemTitle = (props) => {
 
 export const useItemTitleBadge = props => props.scope
 
-const useRouter = (props, context, form) => {
-  const {
-    id,
-    scope
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'fingerbankDhcpVendors' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'fingerbankDhcpVendor', params: { id: item.id, scope: scope.value } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneFingerbankDhcpVendor', params: { id: form.value.id || id.value, scope: 'local' } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -58,11 +45,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/updateDhcpVendor', form.value),
   }
 }
-
-export default {
-  useItemProps,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_router.js
index 858eaa680abd..bbecb496a0c1 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_router.js
@@ -1,7 +1,21 @@
+import { toRefs } from '@vue/composition-api'
 import store from '@/store'
 import { TheTabs } from '../_components/'
 const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'fingerbankDhcpVendors' }),
+    goToItem: (params, props) => {
+      const { scope } = toRefs(props)
+      $router
+        .push({ name: 'fingerbankDhcpVendor', params: { ...params, scope: scope.value } })
+        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
+    },
+    goToClone: params => $router.push({ name: 'cloneFingerbankDhcpVendor', params: { ...params, scope: 'local' } })
+  }
+}
+
 export default [
   {
     path: 'fingerbank/dhcp_vendors',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheView.js
index 0a74c1e5d1ac..219827091df9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheView.js
@@ -11,18 +11,18 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
-import collection, { useItemProps, useItemTitleBadge } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => {
 
   const viewCollectionItem = useViewCollectionItem(collection, props, context)
 
-  const titleBadge = useItemTitleBadge(props)
+  const titleBadge = collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
index e96eee5a94a6..c928213671ee 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
@@ -10,7 +10,7 @@ export const useItemProps = {
   }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -30,22 +30,9 @@ const useItemTitle = (props) => {
 
 export const useItemTitleBadge = props => props.scope
 
-const useRouter = (props, context, form) => {
-  const {
-    id,
-    scope
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'fingerbankDhcpv6Enterprises' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'fingerbankDhcpv6Enterprise', params: { id: item.id, scope: scope.value } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneFingerbankDhcpv6Enterprise', params: { id: form.value.id || id.value, scope: 'local' } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -58,11 +45,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/updateDhcpv6Enterprise', form.value),
   }
 }
-
-export default {
-  useItemProps,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_router.js
index 8d56ab8ca93e..f980af924105 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_router.js
@@ -1,7 +1,21 @@
+import { toRefs } from '@vue/composition-api'
 import store from '@/store'
 import { TheTabs } from '../_components/'
 const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'fingerbankDhcpv6Enterprises' }),
+    goToItem: (params, props) => {
+      const { scope } = toRefs(props)
+      $router
+        .push({ name: 'fingerbankDhcpv6Enterprise', params: { ...params, scope: scope.value } })
+        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
+    },
+    goToClone: params => $router.push({ name: 'cloneFingerbankDhcpv6Enterprise', params: { ...params, scope: 'local' } })
+  }
+}
+
 export default [
   {
     path: 'fingerbank/dhcpv6_enterprises',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheView.js
index 0a74c1e5d1ac..219827091df9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheView.js
@@ -11,18 +11,18 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
-import collection, { useItemProps, useItemTitleBadge } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => {
 
   const viewCollectionItem = useViewCollectionItem(collection, props, context)
 
-  const titleBadge = useItemTitleBadge(props)
+  const titleBadge = collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
index a043ecf82b16..1bf1d7694f46 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
@@ -10,7 +10,7 @@ export const useItemProps = {
   }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -30,22 +30,9 @@ const useItemTitle = (props) => {
 
 export const useItemTitleBadge = props => props.scope
 
-const useRouter = (props, context, form) => {
-  const {
-    id,
-    scope
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'fingerbankDhcpv6Fingerprints' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'fingerbankDhcpv6Fingerprint', params: { id: item.id, scope: scope.value } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneFingerbankDhcpv6Fingerprint', params: { id: form.value.id || id.value, scope: 'local' } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -58,11 +45,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/updateDhcpv6Fingerprint', form.value),
   }
 }
-
-export default {
-  useItemProps,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_router.js
index a347ed48394f..a4d0b481f4f8 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_router.js
@@ -1,7 +1,21 @@
+import { toRefs } from '@vue/composition-api'
 import store from '@/store'
 import { TheTabs } from '../_components/'
 const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'fingerbankDhcpv6Fingerprints' }),
+    goToItem: (params, props) => {
+      const { scope } = toRefs(props)
+      $router
+        .push({ name: 'fingerbankDhcpv6Fingerprint', params: { ...params, scope: scope.value } })
+        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
+    },
+    goToClone: params => $router.push({ name: 'cloneFingerbankDhcpv6Fingerprint', params: { ...params, scope: 'local' } }),
+  }
+}
+
 export default [
   {
     path: 'fingerbank/dhcpv6_fingerprints',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_composables/useResource.js
index 3cec17f0a67e..c02da3d30166 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_composables/useResource.js
@@ -1,9 +1,9 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('General Settings')
+export const useTitle = () => i18n.t('General Settings')
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_fingerbank/isGeneralSettingsLoading']),
@@ -12,8 +12,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/setGeneralSettings', form.value)
   }
 }
-
-export default {
-  useTitle,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheView.js
index 0a74c1e5d1ac..219827091df9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheView.js
@@ -11,18 +11,18 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
-import collection, { useItemProps, useItemTitleBadge } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => {
 
   const viewCollectionItem = useViewCollectionItem(collection, props, context)
 
-  const titleBadge = useItemTitleBadge(props)
+  const titleBadge = collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
index efe10ba47835..99157ea2fb32 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
@@ -10,7 +10,7 @@ export const useItemProps = {
   }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -30,22 +30,9 @@ const useItemTitle = (props) => {
 
 export const useItemTitleBadge = props => props.scope
 
-const useRouter = (props, context, form) => {
-  const {
-    id,
-    scope
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'fingerbankMacVendors' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'fingerbankMacVendor', params: { id: item.id, scope: scope.value } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneFingerbankMacVendor', params: { id: form.value.id || id.value, scope: 'local' } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -58,11 +45,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/updateMacVendor', form.value),
   }
 }
-
-export default {
-  useItemProps,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_router.js
index 453359a60f35..f23d2a7094e7 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_router.js
@@ -1,7 +1,21 @@
+import { toRefs } from '@vue/composition-api'
 import store from '@/store'
 import { TheTabs } from '../_components/'
 const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'fingerbankMacVendors' }),
+    goToItem: (params, props) => {
+      const { scope } = toRefs(props)
+      $router
+        .push({ name: 'fingerbankMacVendor', params: { ...params, scope: scope.value } })
+        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
+    },
+    goToClone: params => $router.push({ name: 'cloneFingerbankMacVendor', params: { ...params, scope: 'local' } })
+  }
+}
+
 export default [
   {
     path: 'fingerbank/mac_vendors',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheView.js
index 0a74c1e5d1ac..219827091df9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheView.js
@@ -11,18 +11,18 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
-import collection, { useItemProps, useItemTitleBadge } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => {
 
   const viewCollectionItem = useViewCollectionItem(collection, props, context)
 
-  const titleBadge = useItemTitleBadge(props)
+  const titleBadge = collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
index 7bfc2a51e4f5..b1c36517b8ae 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
@@ -10,7 +10,7 @@ export const useItemProps = {
   }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -30,22 +30,9 @@ const useItemTitle = (props) => {
 
 export const useItemTitleBadge = props => props.scope
 
-const useRouter = (props, context, form) => {
-  const {
-    id,
-    scope
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'fingerbankUserAgents' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'fingerbankUserAgent', params: { id: item.id, scope: scope.value } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneFingerbankUserAgent', params: { id: form.value.id || id.value, scope: 'local' } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -58,11 +45,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/updateUserAgent', form.value),
   }
 }
-
-export default {
-  useItemProps,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_router.js
index 933ceae347ed..a6cf71d07b0c 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_router.js
@@ -1,7 +1,21 @@
+import { toRefs } from '@vue/composition-api'
 import store from '@/store'
 import { TheTabs } from '../_components/'
 const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'fingerbankUserAgents' }),
+    goToItem: (params, props) => {
+      const { scope } = toRefs(props)
+      $router
+        .push({ name: 'fingerbankUserAgent', params: { ...params, scope: scope.value } })
+        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
+    },
+    goToClone: params => $router.push({ name: 'cloneFingerbankUserAgent', params: { ...params, scope: 'local' } })
+  }
+}
+
 export default [
   {
     path: 'fingerbank/user_agents',
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheView.js
index 81beaa05eb08..e35e28224e69 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheView.js
@@ -11,11 +11,11 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
index b2d078284483..189f87ad8a51 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
@@ -1,6 +1,5 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import { defaultsFromMeta } from '../../_config/'
 
 export const useItemProps = {
   id: {
@@ -11,14 +10,15 @@ export const useItemProps = {
   }
 }
 
-const useItemDefaults = (meta, props) => {
+import { useDefaultsFromMeta } from '@/composables/useMeta'
+export const useItemDefaults = (meta, props) => {
   const {
     firewallType
   } = toRefs(props)
-  return { ...defaultsFromMeta(meta), type: firewallType.value }
+  return { ...useDefaultsFromMeta(meta), type: firewallType.value }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -36,28 +36,16 @@ const useItemTitle = (props) => {
   })
 }
 
-const useItemTitleBadge = (props, context, form) => {
+export const useItemTitleBadge = (props, context, form) => {
   const {
     firewallType
   } = toRefs(props)
   return computed(() => (firewallType.value || form.value.type))
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'firewalls' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'firewall', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneFirewall', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone,
@@ -85,12 +73,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_firewalls/updateFirewall', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemProps,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_router.js b/html/pfappserver/root/src/views/Configuration/firewalls/_router.js
index af6ff14e0619..61f3d3a21e1f 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_router.js
@@ -4,6 +4,16 @@ import StoreModule from './_store'
 const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/FirewallsList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'firewalls' }),
+    goToItem: params => $router
+      .push({ name: 'firewall', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneFirewall', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_firewalls) {
     store.registerModule('$_firewalls', StoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheView.js
index 1510aaa64485..b067861f2a36 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheView.js
@@ -23,7 +23,7 @@ const props = {
   }
 }
 
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
index 4f409ea0a00d..0aa77a15810f 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,21 +19,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'floating_devices' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'floating_device', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneFloatingDevice', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -57,10 +42,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_floatingdevices/updateFloatingDevice', form.value)
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_router.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/_router.js
index 0319813518e9..bb5b05249058 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_router.js
@@ -4,6 +4,16 @@ import StoreModule from './_store'
 const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/FloatingDevicesList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'floating_devices' }),
+    goToItem: params => $router
+      .push({ name: 'floating_device', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneFloatingDevice', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_floatingdevices)
     store.registerModule('$_floatingdevices', StoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/general/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/general/_composables/useResource.js
index cb449f772388..e90e0d1375b8 100644
--- a/html/pfappserver/root/src/views/Configuration/general/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/general/_composables/useResource.js
@@ -1,9 +1,9 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('General')
+export const useTitle = () => i18n.t('General')
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -14,8 +14,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useTitle,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheView.js
index 68cf6b905cc7..acbb9567d7ed 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheView.js
@@ -13,7 +13,7 @@ const components = {
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js
index c84b3b807327..b72734dafe63 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js
@@ -1,27 +1,16 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id
   } = toRefs(props)
   return computed(() => i18n.t('Maintenance Task <code>{id}</code>', { id: id.value }))
 }
 
-const useRouter = (props, context, form) => {
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'maintenance_tasks' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'maintenance_task', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -34,10 +23,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_maintenance_tasks/updateMaintenanceTask', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_router.js b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_router.js
index 822cd9a07f54..865f6471a849 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_router.js
@@ -4,6 +4,15 @@ import StoreModule from './_store'
 const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../_components/MainTabs')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'maintenance_tasks' }),
+    goToItem: params => $router
+      .push({ name: 'maintenance_task', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_maintenance_tasks)
     store.registerModule('$_maintenance_tasks', StoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheView.js
index 68cf6b905cc7..acbb9567d7ed 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheView.js
@@ -13,7 +13,7 @@ const components = {
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js
index a7ae5fa17716..acd49ddc324b 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js
@@ -1,12 +1,10 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta
-} from '../../_config/'
 
-const useItemDefaults = (meta) => ({ ...defaultsFromMeta(meta), actions: [] })
+import { useDefaultsFromMeta } from '@/composables/useMeta'
+export const useItemDefaults = (meta) => ({ ...useDefaultsFromMeta(meta), actions: [] })
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -24,21 +22,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'network_behavior_policies' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'network_behavior_policy', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneNetworkBehaviorPolicy', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -59,10 +45,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_network_behavior_policies/updateNetworkBehaviorPolicy', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_router.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_router.js
index e2c2adbb7412..aec704a9e004 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_router.js
@@ -5,6 +5,16 @@ import NetworkBehaviorPolicyStoreModule from './_store'
 const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/NetworkBehaviorPoliciesList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'network_behavior_policies' }),
+    goToItem: $params => $router
+      .push({ name: 'network_behavior_policy', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneNetworkBehaviorPolicy', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_fingerbank)
     store.registerModule('$_fingerbank', FingerbankStoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/networks/fencing/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/networks/fencing/_composables/useResource.js
index ad9c003c45f7..b82c5c89dea0 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/fencing/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/fencing/_composables/useResource.js
@@ -1,9 +1,9 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('Fencing')
+export const useTitle = () => i18n.t('Fencing')
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -14,8 +14,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useTitle,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/networks/inline/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/networks/inline/_composables/useResource.js
index 7678d72cd73b..2d92e556dda2 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/inline/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/inline/_composables/useResource.js
@@ -1,11 +1,11 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('Inline')
+export const useTitle = () => i18n.t('Inline')
 
-const useTitleHelp = () => 'PacketFence_Installation_Guide.html#_technical_introduction_to_inline_enforcement'
+export const useTitleHelp = () => 'PacketFence_Installation_Guide.html#_technical_introduction_to_inline_enforcement'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -16,9 +16,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useTitle,
-  useTitleHelp,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/TheView.js
index b15a871064d7..2ec391ad55c9 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/TheView.js
@@ -11,11 +11,11 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
diff --git a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_composables/useCollection.js
index 7b0a3e992bfd..197be1d59c65 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_composables/useCollection.js
@@ -8,14 +8,14 @@ export const useItemProps = {
   }
 }
 
-const useItemDefaults = (_, props) => {
+export const useItemDefaults = (_, props) => {
   const {
     id
   } = toRefs(props)
   return { id: id.value, type: 'none' }
 }
 
-const useItemTitle = (props, context, form) => {
+export const useItemTitle = (props, context, form) => {
   const {
     id,
     isClone,
@@ -34,7 +34,7 @@ const useItemTitle = (props, context, form) => {
   })
 }
 
-const useItemTitleBadge = (props, context, form) => {
+export const useItemTitleBadge = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -48,26 +48,9 @@ const useItemTitleBadge = (props, context, form) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id,
-    prefixRouteName
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: `${prefixRouteName.value}interfaces` }),
-    goToItem: () => {
-      let { id = id.value, vlan } = form.value
-      if (id.indexOf('.') === -1 && vlan) // if `id` omits `vlan` and `vlan` is defined
-        id += `.${vlan}` // append `vlan` to `id`
-      return $router.push({ name: `${prefixRouteName.value}interface`, params: { id } })
-        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
-    },
-    goToClone: () => $router.push({ name: `${prefixRouteName.value}cloneInterface`, params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -87,11 +70,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_interfaces/updateInterface', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_router.js b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_router.js
index 56044e29eba2..6458b936be42 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_router.js
@@ -1,7 +1,29 @@
+import { toRefs } from '@vue/composition-api'
 import store from '@/store'
 const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../../_components/NetworksTabs')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: (params, props) => {
+      const { prefixRouteName } = toRefs(props)
+      return $router.push({ name: `${prefixRouteName.value}interfaces` })
+    },
+    goToItem: (params, props) => {
+      const { prefixRouteName } = toRefs(props)
+      let { id, vlan } = params
+      if (id.indexOf('.') === -1 && vlan) // if `id` omits `vlan` and `vlan` is defined
+        id += `.${vlan}` // append `vlan` to `id`
+      return $router.push({ name: `${prefixRouteName.value}interface`, params: { id } })
+        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
+    },
+    goToClone: (params, props) => {
+      const { prefixRouteName } = toRefs(props)
+      return $router.push({ name: `${prefixRouteName.value}cloneInterface`, params })
+    }
+  }
+}
+
 export default [
   {
     path: 'interfaces',
diff --git a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/TheView.js
index 21403415abaf..27fa8ac8e8dc 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/TheView.js
@@ -13,7 +13,7 @@ const components = {
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_composables/useCollection.js
index 576f63a39e96..5b8cf3562fee 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_composables/useCollection.js
@@ -1,29 +1,19 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta
-} from '../../../_config/'
 
-const useItemDefaults = (meta) => ({ ...defaultsFromMeta(meta), actions: [] })
+import { useDefaultsFromMeta } from '@/composables/useMeta'
+export const useItemDefaults = (meta) => ({ ...useDefaultsFromMeta(meta), actions: [] })
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id
   } = toRefs(props)
   return computed(() => i18n.t('Layer 2 Network <code>{id}</code>', { id: id.value }))
 }
 
-const useRouter = (props, context, form) => {
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'interfaces' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'layer2_network', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -35,10 +25,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_layer2_networks/updateLayer2Network', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_router.js b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_router.js
index 5f66390e6cd2..d3e21041f7d5 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_router.js
@@ -1,6 +1,15 @@
 import store from '@/store'
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'interfaces' }),
+    goToItem: params => $router
+      .push({ name: 'layer2_network', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+  }
+}
+
 export default [
   {
     path: 'interfaces/layer2_network/:id',
diff --git a/html/pfappserver/root/src/views/Configuration/networks/network/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/networks/network/_composables/useResource.js
index 2475a8b56c3c..466129e93561 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/network/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/network/_composables/useResource.js
@@ -1,9 +1,9 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('Networking')
+export const useTitle = () => i18n.t('Networking')
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -14,8 +14,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useTitle,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/networks/parking/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/networks/parking/_composables/useResource.js
index 7569af97469f..9680022d3339 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/parking/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/parking/_composables/useResource.js
@@ -1,11 +1,11 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('Parking')
+export const useTitle = () => i18n.t('Parking')
 
-const useTitleHelp = () => 'PacketFence_Installation_Guide.html#_parked_devices'
+export const useTitleHelp = () => 'PacketFence_Installation_Guide.html#_parked_devices'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -16,9 +16,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useTitle,
-  useTitleHelp,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/TheView.js
index e864b3b18c7b..84708dfa1014 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/TheView.js
@@ -13,7 +13,7 @@ const components = {
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_composables/useCollection.js
index 0dcae38c5e95..e42a59698db1 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,21 +19,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'interfaces' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'routed_network', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneRoutedNetwork', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -50,10 +35,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_routed_networks/updateRoutedNetwork', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_router.js b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_router.js
index 76415ec4b3f9..0ab6b1001683 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_router.js
@@ -1,6 +1,16 @@
 import store from '@/store'
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'interfaces' }),
+    goToItem: params => $router
+      .push({ name: 'routed_network', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneRoutedNetwork', params }),
+  }
+}
+
 export default [
   {
     path: 'interfaces/routed_networks/new',
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheView.js
index c309c9664267..f1075460793c 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheView.js
@@ -20,7 +20,7 @@ const props = {
   }
 }
 
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js
index bf16fc63229d..2fe084c918a7 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js
@@ -1,17 +1,15 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta
-} from '../../../_config/'
 
-const useItemDefaults = (meta, props) => {
+import { useDefaultsFromMeta } from '@/composables/useMeta'
+export const useItemDefaults = (meta, props) => {
   const {
     role
   } = toRefs(props)
-  return { ...defaultsFromMeta(meta), id: role.value }
+  return { ...useDefaultsFromMeta(meta), id: role.value }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isNew
@@ -26,24 +24,16 @@ const useItemTitle = (props) => {
   })
 }
 
-const useItemTitleBadge = (props) => {
+export const useItemTitleBadge = (props) => {
   const {
     role
   } = toRefs(props)
   return role
 }
 
-const useRouter = (props, context, form) => {
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'traffic_shapings' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'traffic_shaping', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -57,11 +47,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_traffic_shaping_policies/updateTrafficShapingPolicy', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_router.js b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_router.js
index 63e8c5c26b75..78caaa90d5ac 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_router.js
@@ -2,6 +2,15 @@ import store from '@/store'
 const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../../_components/NetworksTabs')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'traffic_shapings' }),
+    goToItem: params => $router
+      .push({ name: 'traffic_shaping', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
+  }
+}
+
 export default [
   {
     path: 'traffic_shapings',
diff --git a/html/pfappserver/root/src/views/Configuration/pki/_router.js b/html/pfappserver/root/src/views/Configuration/pki/_router.js
index 47771d36a62c..7977406ae36e 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/_router.js
@@ -2,12 +2,12 @@ import store from '@/store'
 import StoreModule from './_store'
 
 const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../_components/PkisTabs')
-const PkiCaView = () => import(/* webpackChunkName: "Configuration" */ './cas/_components/TheView')
-const PkiProfileView = () => import(/* webpackChunkName: "Configuration" */ './profiles/_components/TheView')
-const PkiCertView = () => import(/* webpackChunkName: "Configuration" */ './certs/_components/TheView')
-const PkiRevokedCertView = () => import(/* webpackChunkName: "Configuration" */ './revokedCerts/_components/TheView')
+import CasRoutes from './cas/_router'
+import CertsRoutes from './certs/_router'
+import ProfilesRoutes from './profiles/_router'
+import RevokedCertsRoutes from './revokedCerts/_router'
 
-export const beforeEnter = (to, from, next = () => {}) => {
+export const beforeEnter = (to, from, next = () => { }) => {
   if (!store.state.$_pkis)
     store.registerModule('$_pkis', StoreModule)
   next()
@@ -21,137 +21,8 @@ export default [
     props: (route) => ({ tab: 'pkiCas', query: route.query.query }),
     beforeEnter
   },
-  {
-    path: 'pki/cas',
-    name: 'pkiCas',
-    component: TheTabs,
-    props: (route) => ({ tab: 'pkiCas', query: route.query.query }),
-    beforeEnter
-  },
-  {
-    path: 'pki/cas/new',
-    name: 'newPkiCa',
-    component: PkiCaView,
-    props: () => ({ isNew: true }),
-    beforeEnter
-  },
-  {
-    path: 'pki/ca/:id',
-    name: 'pkiCa',
-    component: PkiCaView,
-    props: (route) => ({ id: String(route.params.id).toString() }),
-    beforeEnter: (to, from, next) => {
-      beforeEnter()
-      store.dispatch('$_pkis/getCa', to.params.id).then(() => {
-        next()
-      })
-    }
-  },
-  {
-    path: 'pki/ca/:id/clone',
-    name: 'clonePkiCa',
-    component: PkiCaView,
-    props: (route) => ({ id: String(route.params.id).toString(), isClone: true }),
-    beforeEnter: (to, from, next) => {
-      beforeEnter()
-      store.dispatch('$_pkis/getCa', to.params.id).then(() => {
-        next()
-      })
-    }
-  },
-  {
-    path: 'pki/profiles',
-    name: 'pkiProfiles',
-    component: TheTabs,
-    props: (route) => ({ tab: 'pkiProfiles', query: route.query.query }),
-    beforeEnter
-  },
-  {
-    path: 'pki/ca/:ca_id/profiles/new',
-    name: 'newPkiProfile',
-    component: PkiProfileView,
-    props: (route) => ({ ca_id: String(route.params.ca_id).toString(), isNew: true }),
-    beforeEnter
-  },
-  {
-    path: 'pki/profile/:id',
-    name: 'pkiProfile',
-    component: PkiProfileView,
-    props: (route) => ({ id: String(route.params.id).toString() }),
-    beforeEnter: (to, from, next) => {
-      beforeEnter()
-      store.dispatch('$_pkis/getProfile', to.params.id).then(() => {
-        next()
-      })
-    }
-  },
-  {
-    path: 'pki/profile/:id/clone',
-    name: 'clonePkiProfile',
-    component: PkiProfileView,
-    props: (route) => ({ id: String(route.params.id).toString(), isClone: true }),
-    beforeEnter: (to, from, next) => {
-      beforeEnter()
-      store.dispatch('$_pkis/getProfile', to.params.id).then(() => {
-        next()
-      })
-    }
-  },
-  {
-    path: 'pki/certs',
-    name: 'pkiCerts',
-    component: TheTabs,
-    props: (route) => ({ tab: 'pkiCerts', query: route.query.query }),
-    beforeEnter
-  },
-  {
-    path: 'pki/profile/:profile_id/certs/new',
-    name: 'newPkiCert',
-    component: PkiCertView,
-    props: (route) => ({ profile_id: String(route.params.profile_id).toString(), isNew: true }),
-    beforeEnter
-  },
-  {
-    path: 'pki/cert/:id',
-    name: 'pkiCert',
-    component: PkiCertView,
-    props: (route) => ({ id: String(route.params.id).toString() }),
-    beforeEnter: (to, from, next) => {
-      beforeEnter()
-      store.dispatch('$_pkis/getCert', to.params.id).then(() => {
-        next()
-      })
-    }
-  },
-  {
-    path: 'pki/cert/:id/clone',
-    name: 'clonePkiCert',
-    component: PkiCertView,
-    props: (route) => ({ id: String(route.params.id).toString(), isClone: true }),
-    beforeEnter: (to, from, next) => {
-      beforeEnter()
-      store.dispatch('$_pkis/getCert', to.params.id).then(() => {
-        next()
-      })
-    }
-  },
-  {
-    path: 'pki/revokedcerts',
-    name: 'pkiRevokedCerts',
-    component: TheTabs,
-    props: (route) => ({ tab: 'pkiRevokedCerts', query: route.query.query }),
-    beforeEnter
-  },
-  {
-    path: 'pki/revokedcert/:id',
-    name: 'pkiRevokedCert',
-    component: PkiRevokedCertView,
-    props: (route) => ({ id: String(route.params.id).toString() }),
-    beforeEnter: (to, from, next) => {
-      beforeEnter()
-      store.dispatch('$_pkis/getRevokedCert', to.params.id).then(() => {
-        next()
-      })
-    }
-  }
+  ...CasRoutes,
+  ...CertsRoutes,
+  ...ProfilesRoutes,
+  ...RevokedCertsRoutes
 ]
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheView.js
index b15a871064d7..2ec391ad55c9 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheView.js
@@ -11,11 +11,11 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js
index 597474c89c95..b832287a277b 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js
@@ -11,7 +11,7 @@ export const useItemProps = {
   }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -29,21 +29,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'pkiCas' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'pkiCa', params: { id: item.ID } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'clonePkiCa', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -54,9 +42,3 @@ const useStore = (props, context, form) => {
     getItem: () => $store.dispatch('$_pkis/getCa', id.value).then(item => decomposeCa(item))
   }
 }
-
-export default {
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_router.js b/html/pfappserver/root/src/views/Configuration/pki/cas/_router.js
new file mode 100644
index 000000000000..1f31a818997a
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_router.js
@@ -0,0 +1,62 @@
+import store from '@/store'
+import StoreModule from '../_store'
+
+const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../../_components/PkisTabs')
+const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
+
+const beforeEnter = (to, from, next = () => { }) => {
+  if (!store.state.$_pkis)
+    store.registerModule('$_pkis', StoreModule)
+  next()
+}
+
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'pkiCas' }),
+    goToItem: params => $router
+      .push({ name: 'pkiCa', params: { ...params, id: params.ID } })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'clonePkiCa', params }),
+  }
+}
+
+export default [
+  {
+    path: 'pki/cas',
+    name: 'pkiCas',
+    component: TheTabs,
+    props: (route) => ({ tab: 'pkiCas', query: route.query.query }),
+    beforeEnter
+  },
+  {
+    path: 'pki/cas/new',
+    name: 'newPkiCa',
+    component: TheView,
+    props: () => ({ isNew: true }),
+    beforeEnter
+  },
+  {
+    path: 'pki/ca/:id',
+    name: 'pkiCa',
+    component: TheView,
+    props: (route) => ({ id: String(route.params.id).toString() }),
+    beforeEnter: (to, from, next) => {
+      beforeEnter()
+      store.dispatch('$_pkis/getCa', to.params.id).then(() => {
+        next()
+      })
+    }
+  },
+  {
+    path: 'pki/ca/:id/clone',
+    name: 'clonePkiCa',
+    component: TheView,
+    props: (route) => ({ id: String(route.params.id).toString(), isClone: true }),
+    beforeEnter: (to, from, next) => {
+      beforeEnter()
+      store.dispatch('$_pkis/getCa', to.params.id).then(() => {
+        next()
+      })
+    }
+  }
+]
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheView.js
index cf15d5a3729a..2705a5affbac 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheView.js
@@ -14,11 +14,11 @@ const components = {
 
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js
index 286f7df83f77..e30df287ff0e 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js
@@ -10,14 +10,14 @@ export const useItemProps = {
   }
 }
 
-const useItemDefaults = (meta, props) => {
+export const useItemDefaults = (meta, props) => {
   const {
     profile_id
   } = toRefs(props)
   return { profile_id: profile_id.value }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -35,21 +35,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'pkiCerts' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'pkiCert', params: { id: item.ID } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'clonePkiCert', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     profile_id
@@ -61,10 +49,3 @@ const useStore = (props, context, form) => {
     getItem: () => $store.dispatch('$_pkis/getCert', id.value)
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_router.js b/html/pfappserver/root/src/views/Configuration/pki/certs/_router.js
new file mode 100644
index 000000000000..7b9f0249da96
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_router.js
@@ -0,0 +1,62 @@
+import store from '@/store'
+import StoreModule from '../_store'
+
+const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../../_components/PkisTabs')
+const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
+
+const beforeEnter = (to, from, next = () => {}) => {
+  if (!store.state.$_pkis)
+    store.registerModule('$_pkis', StoreModule)
+  next()
+}
+
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'pkiCerts' }),
+    goToItem: params => $router
+      .push({ name: 'pkiCert', params: { ...params, id: params.ID } })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'clonePkiCert', params }),
+  }
+}
+
+export default [
+  {
+    path: 'pki/certs',
+    name: 'pkiCerts',
+    component: TheTabs,
+    props: (route) => ({ tab: 'pkiCerts', query: route.query.query }),
+    beforeEnter
+  },
+  {
+    path: 'pki/profile/:profile_id/certs/new',
+    name: 'newPkiCert',
+    component: TheView,
+    props: (route) => ({ profile_id: String(route.params.profile_id).toString(), isNew: true }),
+    beforeEnter
+  },
+  {
+    path: 'pki/cert/:id',
+    name: 'pkiCert',
+    component: TheView,
+    props: (route) => ({ id: String(route.params.id).toString() }),
+    beforeEnter: (to, from, next) => {
+      beforeEnter()
+      store.dispatch('$_pkis/getCert', to.params.id).then(() => {
+        next()
+      })
+    }
+  },
+  {
+    path: 'pki/cert/:id/clone',
+    name: 'clonePkiCert',
+    component: TheView,
+    props: (route) => ({ id: String(route.params.id).toString(), isClone: true }),
+    beforeEnter: (to, from, next) => {
+      beforeEnter()
+      store.dispatch('$_pkis/getCert', to.params.id).then(() => {
+        next()
+      })
+    }
+  }
+]
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheView.js
index b15a871064d7..2ec391ad55c9 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheView.js
@@ -11,11 +11,11 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js
index d352da12eb80..672432d1cb6c 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js
@@ -14,7 +14,7 @@ export const useItemProps = {
   }
 }
 
-const useItemDefaults = (meta, props) => {
+export const useItemDefaults = (meta, props) => {
   const {
     ca_id
   } = toRefs(props)
@@ -24,7 +24,7 @@ const useItemDefaults = (meta, props) => {
   }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -42,21 +42,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'pkiProfiles' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'pkiProfile', params: { id: item.ID } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'clonePkiProfile', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -67,10 +55,3 @@ const useStore = (props, context, form) => {
     getItem: () => $store.dispatch('$_pkis/getProfile', id.value).then(item => decomposeProfile(item))
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_router.js b/html/pfappserver/root/src/views/Configuration/pki/profiles/_router.js
new file mode 100644
index 000000000000..8bc1cb1cafe3
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_router.js
@@ -0,0 +1,62 @@
+import store from '@/store'
+import StoreModule from '../_store'
+
+const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../../_components/PkisTabs')
+const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
+
+const beforeEnter = (to, from, next = () => {}) => {
+  if (!store.state.$_pkis)
+    store.registerModule('$_pkis', StoreModule)
+  next()
+}
+
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'pkiProfiles' }),
+    goToItem: params => $router
+      .push({ name: 'pkiProfile', params: { ...params, id: params.ID } })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'clonePkiProfile', params }),
+  }
+}
+
+export default [
+  {
+    path: 'pki/profiles',
+    name: 'pkiProfiles',
+    component: TheTabs,
+    props: (route) => ({ tab: 'pkiProfiles', query: route.query.query }),
+    beforeEnter
+  },
+  {
+    path: 'pki/ca/:ca_id/profiles/new',
+    name: 'newPkiProfile',
+    component: TheView,
+    props: (route) => ({ ca_id: String(route.params.ca_id).toString(), isNew: true }),
+    beforeEnter
+  },
+  {
+    path: 'pki/profile/:id',
+    name: 'pkiProfile',
+    component: TheView,
+    props: (route) => ({ id: String(route.params.id).toString() }),
+    beforeEnter: (to, from, next) => {
+      beforeEnter()
+      store.dispatch('$_pkis/getProfile', to.params.id).then(() => {
+        next()
+      })
+    }
+  },
+  {
+    path: 'pki/profile/:id/clone',
+    name: 'clonePkiProfile',
+    component: TheView,
+    props: (route) => ({ id: String(route.params.id).toString(), isClone: true }),
+    beforeEnter: (to, from, next) => {
+      beforeEnter()
+      store.dispatch('$_pkis/getProfile', to.params.id).then(() => {
+        next()
+      })
+    }
+  }
+]
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheView.js
index b15a871064d7..2ec391ad55c9 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheView.js
@@ -11,11 +11,11 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
index 379ae5d3b1fc..d9e14de642b1 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
@@ -7,23 +7,16 @@ export const useItemProps = {
   }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id
   } = toRefs(props)
   return computed(() => i18n.t('Revoked Certificate <code>{id}</code>', { id: id.value }))
 }
 
-const useRouter = (props, context, form) => {
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'pkiRevokedCerts' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'pkiRevokedCert', params: { id: item.ID } })
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context) => {
+export const useStore = (props, context) => {
   const {
     id
   } = toRefs(props)
@@ -34,9 +27,3 @@ const useStore = (props, context) => {
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
   }
 }
-
-export default {
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_router.js b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_router.js
new file mode 100644
index 000000000000..accdf0db2094
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_router.js
@@ -0,0 +1,41 @@
+import store from '@/store'
+import StoreModule from '../_store'
+
+const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../../_components/PkisTabs')
+const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
+
+const beforeEnter = (to, from, next = () => {}) => {
+  if (!store.state.$_pkis)
+    store.registerModule('$_pkis', StoreModule)
+  next()
+}
+
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'pkiRevokedCerts' }),
+    goToItem: params => $router
+      .push({ name: 'pkiRevokedCert', params: { ...params, id: params.ID } })
+  }
+}
+
+export default [
+  {
+    path: 'pki/revokedcerts',
+    name: 'pkiRevokedCerts',
+    component: TheTabs,
+    props: (route) => ({ tab: 'pkiRevokedCerts', query: route.query.query }),
+    beforeEnter
+  },
+  {
+    path: 'pki/revokedcert/:id',
+    name: 'pkiRevokedCert',
+    component: TheView,
+    props: (route) => ({ id: String(route.params.id).toString() }),
+    beforeEnter: (to, from, next) => {
+      beforeEnter()
+      store.dispatch('$_pkis/getRevokedCert', to.params.id).then(() => {
+        next()
+      })
+    }
+  }
+]
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheView.js
index 81beaa05eb08..e35e28224e69 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheView.js
@@ -11,11 +11,11 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
index 471012067d7c..e918f0e0291b 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
@@ -1,6 +1,5 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import { defaultsFromMeta } from '../../_config/'
 
 export const useItemProps = {
   id: {
@@ -11,14 +10,15 @@ export const useItemProps = {
   }
 }
 
-const useItemDefaults = (meta, props) => {
+import { useDefaultsFromMeta } from '@/composables/useMeta'
+export const useItemDefaults = (meta, props) => {
   const {
     providerType
   } = toRefs(props)
-  return { ...defaultsFromMeta(meta), type: providerType.value }
+  return { ...useDefaultsFromMeta(meta), type: providerType.value }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -36,28 +36,16 @@ const useItemTitle = (props) => {
   })
 }
 
-const useItemTitleBadge = (props, context, form) => {
+export const useItemTitleBadge = (props, context, form) => {
   const {
     providerType
   } = toRefs(props)
   return computed(() => (providerType.value || form.value.type))
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'pki_providers' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'pki_provider', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'clonePkiProvider', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone,
@@ -85,12 +73,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_pki_providers/updatePkiProvider', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemProps,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_router.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/_router.js
index 1570e71c5f0b..87c8561a9378 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_router.js
@@ -5,6 +5,16 @@ import PkisStoreModule from '../pki/_store'
 const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/PkiProvidersList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'pki_providers' }),
+    goToItem: params => $router
+      .push({ name: 'pki_provider', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'clonePkiProvider', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_pki_providers)
     store.registerModule('$_pki_providers', PkiProvidersStoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/portalModules/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/portalModules/_components/TheView.js
index 81beaa05eb08..e35e28224e69 100644
--- a/html/pfappserver/root/src/views/Configuration/portalModules/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/portalModules/_components/TheView.js
@@ -11,11 +11,11 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
diff --git a/html/pfappserver/root/src/views/Configuration/portalModules/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/portalModules/_composables/useCollection.js
index 917792d302ee..b5040bb9829c 100644
--- a/html/pfappserver/root/src/views/Configuration/portalModules/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/portalModules/_composables/useCollection.js
@@ -1,6 +1,5 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import { defaultsFromMeta } from '../../_config/'
 
 export const useItemProps = {
   id: {
@@ -11,14 +10,15 @@ export const useItemProps = {
   }
 }
 
-const useItemDefaults = (meta, props) => {
+import { useDefaultsFromMeta } from '@/composables/useMeta'
+export const useItemDefaults = (meta, props) => {
   const {
     moduleType
   } = toRefs(props)
-  return { ...defaultsFromMeta(meta), type: moduleType.value }
+  return { ...useDefaultsFromMeta(meta), type: moduleType.value }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -36,28 +36,16 @@ const useItemTitle = (props) => {
   })
 }
 
-const useItemTitleBadge = (props, context, form) => {
+export const useItemTitleBadge = (props, context, form) => {
   const {
     moduleType
   } = toRefs(props)
   return computed(() => (moduleType.value || form.value.type))
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'portal_modules' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'portal_module', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'clonePortalModule', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone,
@@ -85,12 +73,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_portalmodules/updatePortalModule', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemProps,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/portalModules/_router.js b/html/pfappserver/root/src/views/Configuration/portalModules/_router.js
index ed7e5969b971..5d9a3ccf6781 100644
--- a/html/pfappserver/root/src/views/Configuration/portalModules/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/portalModules/_router.js
@@ -4,6 +4,16 @@ import StoreModule from './_store'
 const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/PortalModulesList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'portal_modules' }),
+    goToItem: params => $router
+      .push({ name: 'portal_module', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'clonePortalModule', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_portalmodules)
     store.registerModule('$_portalmodules', StoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheView.js
index 81beaa05eb08..e35e28224e69 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheView.js
@@ -11,11 +11,11 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js
index a54e9de0fa45..95d8b8404f14 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js
@@ -1,7 +1,6 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 import { provisioningTypes } from '../config'
-import { defaultsFromMeta } from '../../_config/'
 
 export const useItemProps = {
   id: {
@@ -12,14 +11,15 @@ export const useItemProps = {
   }
 }
 
-const useItemDefaults = (meta, props) => {
+import { useDefaultsFromMeta } from '@/composables/useMeta'
+export const useItemDefaults = (meta, props) => {
   const {
     provisioningType
   } = toRefs(props)
-  return { ...defaultsFromMeta(meta), type: provisioningType.value }
+  return { ...useDefaultsFromMeta(meta), type: provisioningType.value }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -37,28 +37,16 @@ const useItemTitle = (props) => {
   })
 }
 
-const useItemTitleBadge = (props, context, form) => {
+export const useItemTitleBadge = (props, context, form) => {
   const {
     provisioningType
   } = toRefs(props)
   return computed(() => provisioningTypes[provisioningType.value || form.value.type])
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'provisionings' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'provisioning', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneProvisioning', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone,
@@ -86,12 +74,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_provisionings/updateProvisioning', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemProps,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_router.js b/html/pfappserver/root/src/views/Configuration/provisioners/_router.js
index f593eb8e3b67..6df1e2810a55 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_router.js
@@ -4,6 +4,16 @@ import StoreModule from './_store'
 const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/ProvisioningsList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'provisionings' }),
+    goToItem: params => $router
+      .push({ name: 'provisioning', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneProvisioning', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_provisionings) {
     store.registerModule('$_provisionings', StoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheView.js
index 6fb97a07974c..4722795d7ab2 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheView.js
@@ -13,7 +13,7 @@ const components = {
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js
index a5f7e7fdee92..f808ed52297a 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,21 +19,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'radiusEaps' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'radiusEap', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneRadiusEap', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -62,10 +47,3 @@ const useStore = (props, context, form) => {
     )
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_router.js b/html/pfappserver/root/src/views/Configuration/radius/eap/_router.js
index 41ba51fac00d..88bc5f36a305 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_router.js
@@ -4,6 +4,16 @@ import RadiusEapStoreModule from './_store'
 const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../../_components/RadiusTabs')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'radiusEaps' }),
+    goToItem: params => $router
+      .push({ name: 'radiusEap', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneRadiusEap', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_radius_eap)
     store.registerModule('$_radius_eap', RadiusEapStoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheView.js
index 6fb97a07974c..4722795d7ab2 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheView.js
@@ -13,7 +13,7 @@ const components = {
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js
index 24d022aeca33..049849107135 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,21 +19,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'radiusFasts' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'radiusFast', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneRadiusFast', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -62,10 +47,3 @@ const useStore = (props, context, form) => {
     )
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_router.js b/html/pfappserver/root/src/views/Configuration/radius/fast/_router.js
index f1cee49088f0..4c6a10f4bbfc 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_router.js
@@ -4,6 +4,16 @@ import RadiusFastStoreModule from './_store'
 const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../../_components/RadiusTabs')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'radiusFasts' }),
+    goToItem: params => $router
+      .push({ name: 'radiusFast', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneRadiusFast', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_radius_fast)
     store.registerModule('$_radius_fast', RadiusFastStoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/radius/general/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/radius/general/_composables/useResource.js
index 949b92b24127..969c4ef5ea38 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/general/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/general/_composables/useResource.js
@@ -1,9 +1,9 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('General Configuration')
+export const useTitle = () => i18n.t('General Configuration')
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -14,8 +14,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useTitle,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheView.js
index 6fb97a07974c..4722795d7ab2 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheView.js
@@ -13,7 +13,7 @@ const components = {
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js
index 52ec9716d19c..322e99fda482 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,21 +19,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'radiusOcsps' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'radiusOcsp', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneRadiusOcsp', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -62,10 +47,3 @@ const useStore = (props, context, form) => {
     )
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_router.js b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_router.js
index ade72c8e4bb3..6b4f9f7d3b69 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_router.js
@@ -4,6 +4,16 @@ import RadiusOcspStoreModule from './_store'
 const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../../_components/RadiusTabs')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'radiusOcsps' }),
+    goToItem: params => $router
+      .push({ name: 'radiusOcsp', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneRadiusOcsp', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_radius_ocsp)
     store.registerModule('$_radius_ocsp', RadiusOcspStoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheView.js
index 6fb97a07974c..4722795d7ab2 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheView.js
@@ -13,7 +13,7 @@ const components = {
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js
index da20995dce3f..2c5f241b7b1b 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,21 +19,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'radiusSsls' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'radiusSsl', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneRadiusSsl', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -57,10 +42,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_radius_ssl/updateRadiusSsl', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_router.js b/html/pfappserver/root/src/views/Configuration/radius/ssl/_router.js
index c68b0b76dbb6..11e4e9f8c997 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_router.js
@@ -4,6 +4,16 @@ import RadiusSslStoreModule from './_store'
 const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../../_components/RadiusTabs')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'radiusSsls' }),
+    goToItem: params => $router
+      .push({ name: 'radiusSsl', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneRadiusSsl', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_radius_ssl)
     store.registerModule('$_radius_ssl', RadiusSslStoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheView.js
index 6fb97a07974c..4722795d7ab2 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheView.js
@@ -13,7 +13,7 @@ const components = {
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js
index 3d5b8abe61ae..c0664ae29849 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,21 +19,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'radiusTlss' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'radiusTls', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneRadiusTls', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -57,10 +42,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_radius_tls/updateRadiusTls', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_router.js b/html/pfappserver/root/src/views/Configuration/radius/tls/_router.js
index 085c5e206b4e..c5aca6e3d28e 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_router.js
@@ -4,6 +4,16 @@ import RadiusTlsStoreModule from './_store'
 const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../../_components/RadiusTabs')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'radiusTlss' }),
+    goToItem: params => $router
+      .push({ name: 'radiusTls', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneRadiusTls', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_radius_tls)
     store.registerModule('$_radius_tls', RadiusTlsStoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/realms/_components/TheView.js
index 1510aaa64485..b067861f2a36 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/realms/_components/TheView.js
@@ -23,7 +23,7 @@ const props = {
   }
 }
 
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
index 71c8f484a7d6..5d5e332d90be 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,7 +19,7 @@ const useItemTitle = (props) => {
   })
 }
 
-const useItemTitleBadge = (props, context) => {
+export const useItemTitleBadge = (props, context) => {
   const {
     tenantId
   } = toRefs(props)
@@ -31,22 +28,9 @@ const useItemTitleBadge = (props, context) => {
   return tenantName
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id,
-    tenantId
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'realms', params: { tenantId: tenantId.value } }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'realm', params: { id: item.id, tenantId: tenantId.value } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneRealm', params: { id: id.value, tenantId: tenantId.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     tenantId,
@@ -68,11 +52,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_realms/updateRealm', { item: form.value, tenantId: tenantId.value }),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_router.js b/html/pfappserver/root/src/views/Configuration/realms/_router.js
index 9b89736fb20e..ef39d6531261 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/realms/_router.js
@@ -1,3 +1,4 @@
+import { toRefs } from '@vue/composition-api'
 import store from '@/store'
 import DomainsStoreModule from '../domains/_store'
 import RealmsStoreModule from './_store'
@@ -5,6 +6,25 @@ import RealmsStoreModule from './_store'
 export const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../_components/DomainsTabs')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: (params, props) => {
+      const { tenantId } = toRefs(props)
+      return $router.push({ name: 'realms', params: { tenantId: tenantId.value } })
+    },
+    goToItem: (params, props) => {
+      const { tenantId } = toRefs(props)
+      return $router
+        .push({ name: 'realm', params: { ...params, tenantId: tenantId.value } })
+        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
+    },
+    goToClone: (params, props) => {
+      const { tenantId } = toRefs(props)
+      return $router.push({ name: 'cloneRealm', params: { ...params, tenantId: tenantId.value } })
+    }
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_domains)
     store.registerModule('$_domains', DomainsStoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/roles/_components/TheView.js
index 83c6098d21fa..e3baafaa9c98 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/roles/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
 
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js
index a178645f5373..c0f85b14437a 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,21 +19,9 @@ const useItemTitle = (props) => {
   })
 }
 
-export const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'roles' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'role', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneRole', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -73,11 +58,3 @@ export const useSearch = (props, context, options) => useConfigurationSearch(pro
   defaultCondition: () => ([{ values: [{ field: 'parent_id', op: 'equals', value: null }] }]),
   ...options,
 })
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-  useSearch
-}
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_router.js b/html/pfappserver/root/src/views/Configuration/roles/_router.js
index 13b44adec801..386dd8399348 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/roles/_router.js
@@ -5,6 +5,16 @@ import TrafficShapingPoliciesStoreModule from '../networks/trafficShapingPolicie
 const TheList = () => import(/* webpackChunkName: "Configuration" */ './_components/TheList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'roles' }),
+    goToItem: params => $router
+      .push({ name: 'role', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneRole', params })
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_roles)
     store.registerModule('$_roles', RolesStoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheView.js
index 81beaa05eb08..e35e28224e69 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheView.js
@@ -11,11 +11,11 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js
index 749507a5be89..250a6e39d713 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js
@@ -1,8 +1,5 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta
-} from '../../_config/'
 
 export const useItemProps = {
   id: {
@@ -13,14 +10,15 @@ export const useItemProps = {
   }
 }
 
-const useItemDefaults = (meta, props) => {
+import { useDefaultsFromMeta } from '@/composables/useMeta'
+export const useItemDefaults = (meta, props) => {
   const {
     scanType
   } = toRefs(props)
-  return { ...defaultsFromMeta(meta), type: scanType.value }
+  return { ...useDefaultsFromMeta(meta), type: scanType.value }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -38,7 +36,7 @@ const useItemTitle = (props) => {
   })
 }
 
-const useItemTitleBadge = (props, context, form) => {
+export const useItemTitleBadge = (props, context, form) => {
   const {
     scanType
   } = toRefs(props)
@@ -48,21 +46,9 @@ const useItemTitleBadge = (props, context, form) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'scanEngines' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'scanEngine', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneScanEngine', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone,
@@ -90,12 +76,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_scans/updateScanEngine', form.value),
   }
 }
-
-export default {
-  useItemProps,
-  useItemDefaults,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_router.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_router.js
index b75c7588d2b6..1c84ad85cc4c 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_router.js
@@ -4,6 +4,16 @@ import StoreModule from './_store'
 export const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../_components/ScansTabs')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'scanEngines' }),
+    goToItem: params => $router
+      .push({ name: 'scanEngine', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneScanEngine', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_scans)
     store.registerModule('$_scans', StoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheView.js
index 83c6098d21fa..e3baafaa9c98 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
 
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js
index 857957ae31cf..bd68ecf717f4 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,21 +19,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'security_events' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'security_event', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneSecurityEvent', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -57,10 +42,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_security_events/updateSecurityEvent', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_router.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_router.js
index 2762f82f0555..fda01ef8b179 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_router.js
@@ -6,6 +6,16 @@ import NetworkBehaviorPoliciesStoreModule from '../networkBehaviorPolicy/_store'
 const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/SecurityEventsList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'security_events' }),
+    goToItem: params => $router
+      .push({ name: 'security_event', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneSecurityEvent', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_security_events)
     store.registerModule('$_security_events', SecurityEventsStoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheView.js
index 83c6098d21fa..e3baafaa9c98 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
 
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js
index 53b88df7e403..0f42548d0a72 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,21 +19,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'self_services' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'self_service', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneSelfService', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -57,10 +42,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_self_services/updateSelfService', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_router.js b/html/pfappserver/root/src/views/Configuration/selfServices/_router.js
index 0d8464aaf981..2d228a9d10df 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_router.js
@@ -4,6 +4,16 @@ import StoreModule from './_store'
 const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/SelfServicesList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'self_services' }),
+    goToItem: params => $router
+      .push({ name: 'self_service', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneSelfService', params })
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_self_services)
     store.registerModule('$_self_services', StoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/services/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/services/_composables/useResource.js
index 7926a9386b67..e3950220f4f9 100644
--- a/html/pfappserver/root/src/views/Configuration/services/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/services/_composables/useResource.js
@@ -1,9 +1,9 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('Services')
+export const useTitle = () => i18n.t('Services')
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -14,8 +14,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useTitle,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/snmpTraps/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/snmpTraps/_composables/useResource.js
index 1ab854daf429..a71c28d00b65 100644
--- a/html/pfappserver/root/src/views/Configuration/snmpTraps/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/snmpTraps/_composables/useResource.js
@@ -1,11 +1,11 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('SNMP')
+export const useTitle = () => i18n.t('SNMP')
 
-const useTitleHelp = () => 'PacketFence_Installation_Guide.html#_snmp_traps_limit'
+export const useTitleHelp = () => 'PacketFence_Installation_Guide.html#_snmp_traps_limit'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -16,9 +16,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useTitle,
-  useTitleHelp,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/sources/_components/TheView.js
index 6817a0517fcd..3c311e44c931 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/TheView.js
@@ -13,11 +13,11 @@ const components = {
 import { computed, toRefs } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js
index a870c53599f2..2372a014c4e7 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js
@@ -1,6 +1,5 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import { defaultsFromMeta } from '../../_config/'
 
 export const useItemProps = {
   id: {
@@ -11,14 +10,15 @@ export const useItemProps = {
   }
 }
 
-const useItemDefaults = (meta, props) => {
+import { useDefaultsFromMeta } from '@/composables/useMeta'
+export const useItemDefaults = (meta, props) => {
   const {
     sourceType
   } = toRefs(props)
-  return { ...defaultsFromMeta(meta), type: sourceType.value }
+  return { ...useDefaultsFromMeta(meta), type: sourceType.value }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -36,28 +36,16 @@ const useItemTitle = (props) => {
   })
 }
 
-const useItemTitleBadge = (props, context, form) => {
+export const useItemTitleBadge = (props, context, form) => {
   const {
     sourceType
   } = toRefs(props)
   return computed(() => (sourceType.value || form.value.type))
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'sources' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'source', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneAuthenticationSource', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone,
@@ -85,12 +73,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_sources/updateAuthenticationSource', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemProps,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_router.js b/html/pfappserver/root/src/views/Configuration/sources/_router.js
index ae4fb2c70fa9..72af5cbbd34e 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/_router.js
@@ -4,6 +4,16 @@ import StoreModule from './_store'
 const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/AuthenticationSourcesList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'sources' }),
+    goToItem: params => $router
+      .push({ name: 'source', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneAuthenticationSource', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_sources)
     store.registerModule('$_sources', StoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/sslCertificates/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/sslCertificates/_components/TheForm.vue
index 31f1e6f3aefd..4f3a670e399e 100644
--- a/html/pfappserver/root/src/views/Configuration/sslCertificates/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/sslCertificates/_components/TheForm.vue
@@ -197,7 +197,7 @@ const components = {
 }
 import { useForm, useFormProps } from '../_composables/useForm'
 import { useViewCollectionItemFixed, useViewCollectionItemFixedProps } from '../../_composables/useViewCollectionItemFixed'
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useFormProps,
diff --git a/html/pfappserver/root/src/views/Configuration/sslCertificates/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/sslCertificates/_composables/useCollection.js
index 273249937112..63737c0beefd 100644
--- a/html/pfappserver/root/src/views/Configuration/sslCertificates/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/sslCertificates/_composables/useCollection.js
@@ -1,14 +1,14 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id
   } = toRefs(props)
   return computed(() => id.value.toUpperCase())
 }
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id
   } = toRefs(props)
@@ -46,8 +46,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useItemTitle,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheView.js
index 5b3b825af920..4935894fc140 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheView.js
@@ -12,11 +12,11 @@ const components = {
 
 import { computed, toRefs } from '@vue/composition-api'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => {
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js
index 8fb4c063345b..8d0d1a6dd775 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js
@@ -1,7 +1,6 @@
- 
+
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import { defaultsFromMeta } from '../../_config/'
 
 export const useItemProps = {
   id: {
@@ -12,14 +11,15 @@ export const useItemProps = {
   }
 }
 
-const useItemDefaults = (meta, props) => {
+import { useDefaultsFromMeta } from '@/composables/useMeta'
+export const useItemDefaults = (meta, props) => {
   const {
     switchGroup
   } = toRefs(props)
-  return { ...defaultsFromMeta(meta), group: switchGroup.value }
+  return { ...useDefaultsFromMeta(meta), group: switchGroup.value }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -37,21 +37,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'switch_groups' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'switch_group', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneSwitchGroup', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     isNew,
     id
@@ -71,10 +59,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_switch_groups/updateSwitchGroup', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_router.js b/html/pfappserver/root/src/views/Configuration/switchGroups/_router.js
index 4c28e62bf64c..97885d32896c 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_router.js
@@ -6,6 +6,16 @@ import SwitchGroupsStoreModule from './_store'
 const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../_components/NetworkDevicesTabs')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'switch_groups' }),
+    goToItem: params => $router
+      .push({ name: 'switch_group', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneSwitchGroup', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_roles)
     store.registerModule('$_roles', RolesStoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheView.js
index 83c6098d21fa..e3baafaa9c98 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
 
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js
index dee01d62a4fc..9a62458ff892 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,21 +19,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'switchTemplates' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'switchTemplate', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneSwitchTemplate', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -57,10 +42,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_switch_templates/updateSwitchTemplate', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_router.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_router.js
index 4ef1d96cd588..b21ed9549630 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_router.js
@@ -4,6 +4,16 @@ import StoreModule from './_store'
 const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/SwitchTemplatesList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'switchTemplates' }),
+    goToItem: params => $router
+      .push({ name: 'switchTemplate', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneSwitchTemplate', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_switch_templates)
     store.registerModule('$_switch_templates', StoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/switches/_components/TheView.js
index 5b3b825af920..4935894fc140 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/switches/_components/TheView.js
@@ -12,11 +12,11 @@ const components = {
 
 import { computed, toRefs } from '@vue/composition-api'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => {
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js
index 029e327e6c57..0d769128d914 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js
@@ -1,6 +1,5 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import { defaultsFromMeta } from '../../_config/'
 
 export const useItemProps = {
   id: {
@@ -11,14 +10,15 @@ export const useItemProps = {
   }
 }
 
-const useItemDefaults = (meta, props) => {
+import { useDefaultsFromMeta } from '@/composables/useMeta'
+export const useItemDefaults = (meta, props) => {
   const {
     switchGroup
   } = toRefs(props)
-  return { ...defaultsFromMeta(meta), group: switchGroup.value }
+  return { ...useDefaultsFromMeta(meta), group: switchGroup.value }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -36,21 +36,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'switches' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'switch', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneSwitch', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isNew,
@@ -71,10 +59,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_switches/updateSwitch', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_router.js b/html/pfappserver/root/src/views/Configuration/switches/_router.js
index 344a5089c524..5cdd88bf04b2 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/switches/_router.js
@@ -7,6 +7,16 @@ const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../_compon
 const TheCsvImport = () => import(/* webpackChunkName: "Import" */ './_components/TheCsvImport')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'switches' }),
+    goToItem: params => $router
+      .push({ name: 'switch', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneSwitch', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_roles)
     store.registerModule('$_roles', RolesStoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheView.js
index 81beaa05eb08..e35e28224e69 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheView.js
@@ -11,11 +11,11 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
index 750900f70718..14c2e5c55601 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
@@ -1,6 +1,5 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import { defaultsFromMeta } from '../../_config/'
 
 export const useItemProps = {
   id: {
@@ -11,14 +10,15 @@ export const useItemProps = {
   }
 }
 
-const useItemDefaults = (meta, props) => {
+import { useDefaultsFromMeta } from '@/composables/useMeta'
+export const useItemDefaults = (meta, props) => {
   const {
     syslogForwarderType
   } = toRefs(props)
-  return { ...defaultsFromMeta(meta), type: syslogForwarderType.value }
+  return { ...useDefaultsFromMeta(meta), type: syslogForwarderType.value }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -36,28 +36,16 @@ const useItemTitle = (props) => {
   })
 }
 
-const useItemTitleBadge = (props, context, form) => {
+export const useItemTitleBadge = (props, context, form) => {
   const {
     syslogForwarderType
   } = toRefs(props)
   return computed(() => (syslogForwarderType.value || form.value.type))
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'syslogForwarders' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'syslogForwarder', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneSyslogForwarder', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone,
@@ -85,12 +73,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_syslog_forwarders/updateSyslogForwarder', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemProps,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_router.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_router.js
index 8c9360ddf998..71020fee27bc 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_router.js
@@ -4,6 +4,16 @@ import StoreModule from './_store'
 const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/SyslogForwardersList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'syslogForwarders' }),
+    goToItem: params => $router
+      .push({ name: 'syslogForwarder', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneSyslogForwarder', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_syslog_forwarders)
     store.registerModule('$_syslog_forwarders', StoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheView.js
index 81beaa05eb08..e35e28224e69 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheView.js
@@ -11,11 +11,11 @@ const components = {
 }
 
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
-import collection, { useItemProps } from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 
 const props = {
   ...useViewCollectionItemProps,
-  ...useItemProps
+  ...collection.useItemProps
 }
 
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js
index 9d0f5daf1e4f..6424b02175e9 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js
@@ -1,6 +1,5 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import { defaultsFromMeta } from '../../_config/'
 
 export const useItemProps = {
   id: {
@@ -11,14 +10,15 @@ export const useItemProps = {
   }
 }
 
-const useItemDefaults = (meta, props) => {
+import { useDefaultsFromMeta } from '@/composables/useMeta'
+export const useItemDefaults = (meta, props) => {
   const {
     syslogParserType
   } = toRefs(props)
-  return { ...defaultsFromMeta(meta), type: syslogParserType.value }
+  return { ...useDefaultsFromMeta(meta), type: syslogParserType.value }
 }
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -36,28 +36,16 @@ const useItemTitle = (props) => {
   })
 }
 
-const useItemTitleBadge = (props, context, form) => {
+export const useItemTitleBadge = (props, context, form) => {
   const {
     syslogParserType
   } = toRefs(props)
   return computed(() => (syslogParserType.value || form.value.type))
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'syslogParsers' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'syslogParser', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneSyslogParser', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone,
@@ -85,12 +73,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_syslog_parsers/updateSyslogParser', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemProps,
-  useItemTitle,
-  useItemTitleBadge,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_router.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_router.js
index bfad3b55a7a4..21f0e5a03a0c 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_router.js
@@ -4,6 +4,16 @@ import StoreModule from './_store'
 const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/SyslogParsersList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+ return {
+    goToCollection: () => $router.push({ name: 'syslogParsers' }),
+    goToItem: params => $router
+      .push({ name: 'syslogParser', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneSyslogParser', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_syslog_parsers)
     store.registerModule('$_syslog_parsers', StoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheView.js
index 83c6098d21fa..e3baafaa9c98 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
 
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
index 2c9ab6453f25..8166a7eaaed8 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../_config/'
 
-const useItemTitle = (props, context) => {
+export const useItemTitle = (props, context) => {
   const {
     id,
     isClone,
@@ -24,21 +21,9 @@ const useItemTitle = (props, context) => {
   })
 }
 
-export const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'tenants' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'tenant', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneTenant', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -76,12 +61,3 @@ export const useSearch = (props, context, options) => useConfigurationSearch(pro
   defaultCondition: () => ([{ values: [{ field: 'name', op: 'contains', value: null }] }]),
   ...options,
 })
-
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-  useSearch
-}
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_router.js b/html/pfappserver/root/src/views/Configuration/tenants/_router.js
index 2dc5aefcbfc5..62e1f917657a 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_router.js
@@ -4,6 +4,16 @@ import StoreModule from './_store'
 const TheList = () => import(/* webpackChunkName: "Configuration" */ './_components/TheList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'tenants' }),
+    goToItem: params => $router
+      .push({ name: 'tenant', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneTenant', params })
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_tenants)
     store.registerModule('$_tenants', StoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/webServices/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/webServices/_composables/useResource.js
index a93c827fb755..069c9b1f71ed 100644
--- a/html/pfappserver/root/src/views/Configuration/webServices/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/webServices/_composables/useResource.js
@@ -1,9 +1,9 @@
 import { computed } from '@vue/composition-api'
 import i18n from '@/utils/locale'
 
-const useTitle = () => i18n.t('Web Services')
+export const useTitle = () => i18n.t('Web Services')
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const { root: { $store } = {} } = context
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
@@ -14,8 +14,3 @@ const useStore = (props, context, form) => {
     }
   }
 }
-
-export default {
-  useTitle,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheView.js
index 83c6098d21fa..e3baafaa9c98 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
 
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js
index 3171962e3371..b9dbfcffcfbf 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,21 +19,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'wmiRules' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'wmiRule', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneWmiRule', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -57,10 +42,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_wmi_rules/updateWmiRule', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_router.js b/html/pfappserver/root/src/views/Configuration/wmiRules/_router.js
index ceb4c95835ce..93c720c3d624 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_router.js
@@ -4,6 +4,16 @@ import StoreModule from './_store'
 const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../_components/ScansTabs')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'wmiRules' }),
+    goToItem: params => $router
+      .push({ name: 'wmiRule', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneWmiRule', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_wmi_rules)
     store.registerModule('$_wmi_rules', StoreModule)
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheView.js
index 83c6098d21fa..e3baafaa9c98 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
 
-import collection from '../_composables/useCollection'
+import * as collection from '../_composables/useCollection'
 const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js
index 9fbab7707996..e25c72848028 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js
@@ -1,10 +1,7 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  defaultsFromMeta as useItemDefaults
-} from '../../_config/'
 
-const useItemTitle = (props) => {
+export const useItemTitle = (props) => {
   const {
     id,
     isClone,
@@ -22,21 +19,9 @@ const useItemTitle = (props) => {
   })
 }
 
-const useRouter = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'wrixLocations' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'wrixLocation', params: { id: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: () => $router.push({ name: 'cloneWrixLocation', params: { id: id.value } }),
-  }
-}
+export { useRouter } from '../_router'
 
-const useStore = (props, context, form) => {
+export const useStore = (props, context, form) => {
   const {
     id,
     isClone
@@ -56,10 +41,3 @@ const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_wrix_locations/updateWrixLocation', form.value),
   }
 }
-
-export default {
-  useItemDefaults,
-  useItemTitle,
-  useRouter,
-  useStore,
-}
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_router.js b/html/pfappserver/root/src/views/Configuration/wrix/_router.js
index 038a6cd24841..ca16859579c3 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_router.js
@@ -4,6 +4,16 @@ import StoreModule from './_store'
 const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/WrixLocationsList')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'wrixLocations' }),
+    goToItem: params => $router
+      .push({ name: 'wrixLocation', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneWrixLocation', params }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_wrix_locations)
     store.registerModule('$_wrix_locations', StoreModule)
diff --git a/html/pfappserver/root/src/views/Nodes/_components/TheFormCreate.vue b/html/pfappserver/root/src/views/Nodes/_components/TheFormCreate.vue
index 8c332307e7ae..e8522fe3ee26 100644
--- a/html/pfappserver/root/src/views/Nodes/_components/TheFormCreate.vue
+++ b/html/pfappserver/root/src/views/Nodes/_components/TheFormCreate.vue
@@ -37,7 +37,7 @@
             @save="onCreate"
           />
         </div>
-      </div>            
+      </div>
     </base-form>
   </b-form>
 </template>
@@ -79,7 +79,7 @@ const setup = (props, context) => {
   const rootRef = ref(null)
   const form = ref({ ...defaults }) // dereferenced
   const schema = computed(() => schemaFn(props, form.value))
-  
+
   const isValid = useDebouncedWatchHandler(
     [form],
     () => (
@@ -95,12 +95,13 @@ const setup = (props, context) => {
     createItem
   } = useStore(props, context, form)
 
+  const { root: { $router } = {} } = context
   const {
     goToCollection,
     goToItem,
-  } = useRouter(props, context, form)
+  } = useRouter($router)
 
-  const onClose = () => goToCollection()
+  const onClose = () => goToCollection(false)
 
   const onCreate = () => {
     if (!isValid.value)
diff --git a/html/pfappserver/root/src/views/Nodes/_components/TheFormUpdate.vue b/html/pfappserver/root/src/views/Nodes/_components/TheFormUpdate.vue
index a1b42684ef00..920ec385e433 100644
--- a/html/pfappserver/root/src/views/Nodes/_components/TheFormUpdate.vue
+++ b/html/pfappserver/root/src/views/Nodes/_components/TheFormUpdate.vue
@@ -150,10 +150,11 @@ const {
     reevaluateAccess
   } = useStore(props, context, form)
 
+  const { root: { $router } = {} } = context
   const {
     goToCollection,
     goToItem,
-  } = useRouter(props, context, form)
+  } = useRouter($router)
 
   const isDeletable = computed(() => {
     const { not_deletable: notDeletable = false } = form.value || {}
@@ -178,9 +179,9 @@ const {
 
   const onRefresh = () => reloadItem()
 
-  const onClose = () => goToCollection()
+  const onClose = () => goToCollection(false)
 
-  const onRemove = () => deleteItem().then(() => goToCollection())
+  const onRemove = () => deleteItem().then(() => goToCollection(false))
 
   const onReset = () => init()
 

From 7c2d14f78a8d50d48af47ca58a444ffae6fb2064 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Mon, 10 May 2021 17:24:10 -0400
Subject: [PATCH 04/72] adjust resource imports

---
 .../src/views/Configuration/_config/index.js  | 20 -------------------
 .../accessDurations/_components/TheView.js    |  2 +-
 .../activeActive/_components/TheView.js       |  2 +-
 .../advanced/_components/TheView.js           |  2 +-
 .../alerting/_components/TheView.js           |  2 +-
 .../captivePortal/_components/TheView.js      |  2 +-
 .../database/advanced/_components/TheView.js  |  2 +-
 .../database/general/_components/TheView.js   |  2 +-
 .../Configuration/dns/_components/TheView.js  |  2 +-
 .../_components/TheView.js                    |  2 +-
 .../generalSettings/_components/TheView.js    |  2 +-
 .../general/_components/TheView.js            |  2 +-
 .../networks/fencing/_components/TheView.js   |  2 +-
 .../networks/inline/_components/TheView.js    |  2 +-
 .../networks/network/_components/TheView.js   |  2 +-
 .../networks/parking/_components/TheView.js   |  2 +-
 .../radius/general/_components/TheView.js     |  2 +-
 .../services/_components/TheView.js           |  2 +-
 .../snmpTraps/_components/TheView.js          |  2 +-
 .../webServices/_components/TheView.js        |  2 +-
 20 files changed, 19 insertions(+), 39 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/index.js

diff --git a/html/pfappserver/root/src/views/Configuration/_config/index.js b/html/pfappserver/root/src/views/Configuration/_config/index.js
deleted file mode 100644
index 5613f8e7c762..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export const defaultsFromMeta = (meta = {}) => {
-  let defaults = {}
-  Object.keys(meta).forEach(key => {
-    if ('properties' in meta[key]) { // handle dot-notation keys ('.')
-      Object.keys(meta[key].properties).forEach(property => {
-        if (!(key in defaults)) {
-          defaults[key] = {}
-        }
-        // default w/ object
-        defaults[key][property] = meta[key].properties[property].default
-      })
-    } else {
-      defaults[key] = meta[key].default
-    }
-  })
-  return defaults
-}
-
-
-
diff --git a/html/pfappserver/root/src/views/Configuration/accessDurations/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/accessDurations/_components/TheView.js
index f808aff34b51..4b2bb2b13c42 100644
--- a/html/pfappserver/root/src/views/Configuration/accessDurations/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/accessDurations/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewResource, useViewResourceProps as props } from '../../_composables/useViewResource'
 
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 const setup = (props, context) => useViewResource(resource, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/activeActive/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/activeActive/_components/TheView.js
index f808aff34b51..4b2bb2b13c42 100644
--- a/html/pfappserver/root/src/views/Configuration/activeActive/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/activeActive/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewResource, useViewResourceProps as props } from '../../_composables/useViewResource'
 
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 const setup = (props, context) => useViewResource(resource, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/advanced/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/advanced/_components/TheView.js
index 881509ee126a..6fd97ba6c867 100644
--- a/html/pfappserver/root/src/views/Configuration/advanced/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/advanced/_components/TheView.js
@@ -13,7 +13,7 @@ const components = {
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewResource, useViewResourceProps as props } from '../../_composables/useViewResource'
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Configuration/alerting/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/alerting/_components/TheView.js
index f808aff34b51..4b2bb2b13c42 100644
--- a/html/pfappserver/root/src/views/Configuration/alerting/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/alerting/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewResource, useViewResourceProps as props } from '../../_composables/useViewResource'
 
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 const setup = (props, context) => useViewResource(resource, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/captivePortal/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/captivePortal/_components/TheView.js
index 881509ee126a..6fd97ba6c867 100644
--- a/html/pfappserver/root/src/views/Configuration/captivePortal/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/captivePortal/_components/TheView.js
@@ -13,7 +13,7 @@ const components = {
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewResource, useViewResourceProps as props } from '../../_composables/useViewResource'
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Configuration/database/advanced/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/database/advanced/_components/TheView.js
index a52e97a0fb5b..e6080896ae92 100644
--- a/html/pfappserver/root/src/views/Configuration/database/advanced/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/database/advanced/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewResource, useViewResourceProps as props } from '../../../_composables/useViewResource'
 
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 const setup = (props, context) => useViewResource(resource, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/database/general/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/database/general/_components/TheView.js
index a52e97a0fb5b..e6080896ae92 100644
--- a/html/pfappserver/root/src/views/Configuration/database/general/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/database/general/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewResource, useViewResourceProps as props } from '../../../_composables/useViewResource'
 
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 const setup = (props, context) => useViewResource(resource, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/dns/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/dns/_components/TheView.js
index 563a811ea114..111cc5fa7f8c 100644
--- a/html/pfappserver/root/src/views/Configuration/dns/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/dns/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewResource, useViewResourceProps as props } from '../../_composables/useViewResource'
 
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 const setup = (props, context) => useViewResource(resource, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_components/TheView.js
index 1905b6d2aaaa..8e86b56c7641 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewResource, useViewResourceProps as props } from '../../../_composables/useViewResource'
 
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 const setup = (props, context) => useViewResource(resource, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_components/TheView.js
index 61d21836aa02..4c6da169d91b 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_components/TheView.js
@@ -14,7 +14,7 @@ const components = {
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewResource, useViewResourceProps as props } from '../../../_composables/useViewResource'
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Configuration/general/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/general/_components/TheView.js
index 767c8383284e..60ccea23bf36 100644
--- a/html/pfappserver/root/src/views/Configuration/general/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/general/_components/TheView.js
@@ -13,7 +13,7 @@ const components = {
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewResource, useViewResourceProps as props } from '../../_composables/useViewResource'
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 
 const setup = (props, context) => {
 
diff --git a/html/pfappserver/root/src/views/Configuration/networks/fencing/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networks/fencing/_components/TheView.js
index a52e97a0fb5b..e6080896ae92 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/fencing/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/fencing/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewResource, useViewResourceProps as props } from '../../../_composables/useViewResource'
 
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 const setup = (props, context) => useViewResource(resource, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/networks/inline/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networks/inline/_components/TheView.js
index a52e97a0fb5b..e6080896ae92 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/inline/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/inline/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewResource, useViewResourceProps as props } from '../../../_composables/useViewResource'
 
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 const setup = (props, context) => useViewResource(resource, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/networks/network/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networks/network/_components/TheView.js
index a52e97a0fb5b..e6080896ae92 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/network/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/network/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewResource, useViewResourceProps as props } from '../../../_composables/useViewResource'
 
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 const setup = (props, context) => useViewResource(resource, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/networks/parking/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networks/parking/_components/TheView.js
index a52e97a0fb5b..e6080896ae92 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/parking/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/parking/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewResource, useViewResourceProps as props } from '../../../_composables/useViewResource'
 
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 const setup = (props, context) => useViewResource(resource, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/radius/general/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/radius/general/_components/TheView.js
index 87e4f72d9c32..bbe178792b71 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/general/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/general/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewResource, useViewResourceProps as props } from '../../../_composables/useViewResource'
 
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 const setup = (props, context) => useViewResource(resource, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/services/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/services/_components/TheView.js
index f808aff34b51..4b2bb2b13c42 100644
--- a/html/pfappserver/root/src/views/Configuration/services/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/services/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewResource, useViewResourceProps as props } from '../../_composables/useViewResource'
 
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 const setup = (props, context) => useViewResource(resource, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/snmpTraps/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/snmpTraps/_components/TheView.js
index 563a811ea114..111cc5fa7f8c 100644
--- a/html/pfappserver/root/src/views/Configuration/snmpTraps/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/snmpTraps/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewResource, useViewResourceProps as props } from '../../_composables/useViewResource'
 
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 const setup = (props, context) => useViewResource(resource, props, context)
 
 // @vue/component
diff --git a/html/pfappserver/root/src/views/Configuration/webServices/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/webServices/_components/TheView.js
index f808aff34b51..4b2bb2b13c42 100644
--- a/html/pfappserver/root/src/views/Configuration/webServices/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/webServices/_components/TheView.js
@@ -12,7 +12,7 @@ const components = {
 
 import { useViewResource, useViewResourceProps as props } from '../../_composables/useViewResource'
 
-import resource from '../_composables/useResource'
+import * as resource from '../_composables/useResource'
 const setup = (props, context) => useViewResource(resource, props, context)
 
 // @vue/component

From 0401530f68ff5c100af249a7b2fa9b846c129607 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 12 May 2021 10:54:51 -0400
Subject: [PATCH 05/72] add pinia

---
 html/pfappserver/root/package.json | 1 +
 html/pfappserver/root/src/main.js  | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/html/pfappserver/root/package.json b/html/pfappserver/root/package.json
index a8e43e3ff34b..c2b920c5afdb 100644
--- a/html/pfappserver/root/package.json
+++ b/html/pfappserver/root/package.json
@@ -20,6 +20,7 @@
     "messageformat": "^2.3.0",
     "mime-types": "^2.1.30",
     "papaparse": "5.3.0",
+    "pinia": "^0.4.1",
     "plotly.js-basic-dist-min": "^1.58.2",
     "promised-debounce": "^0.4.2",
     "typeface-b612-mono": "1.1.13",
diff --git a/html/pfappserver/root/src/main.js b/html/pfappserver/root/src/main.js
index 160c3ffa857e..432e7eb03195 100644
--- a/html/pfappserver/root/src/main.js
+++ b/html/pfappserver/root/src/main.js
@@ -97,6 +97,8 @@ import 'vue-awesome/icons/retweet'
 import 'vue-awesome/icons/ruler-combined'
 import 'vue-awesome/icons/save'
 import 'vue-awesome/icons/search'
+import 'vue-awesome/icons/search-minus'
+import 'vue-awesome/icons/search-plus'
 import 'vue-awesome/icons/server'
 import 'vue-awesome/icons/shield-alt'
 import 'vue-awesome/icons/sign-in-alt'
@@ -140,6 +142,7 @@ Icon.register(pfIcons)
 
 import './directives/focus'
 
+import { createPinia, PiniaPlugin } from 'pinia'
 import store from './store'
 import router from './router'
 import filters from './utils/filters'
@@ -168,6 +171,8 @@ Vue.component('icon', Icon)
 Vue.use(BootstrapVue)
 Vue.use(CompositionApi)
 Vue.use(pfTemplatePlugin)
+Vue.use(PiniaPlugin)
+const pinia = createPinia()
 
 // Register global filters
 for (const filter of Object.keys(filters)) {
@@ -179,6 +184,7 @@ const app = new Vue({
   router,
   store,
   i18n,
+  pinia,
 
   mounted () {
     store.dispatch('events/bind')

From 2fc12d1368e788f15fc2b5922967239de6a4261e Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Fri, 14 May 2021 10:53:45 -0400
Subject: [PATCH 06/72] prototype composable search w/ pinia

---
 .../src/components/new/BaseButtonHelp.vue     |   2 +-
 .../components/new/BaseButtonSaveSearch.vue   |   2 +-
 .../root/src/components/new/BaseSearch.vue    | 194 ++++++++++++++++++
 .../components/new/BaseSearchInputBasic.vue   |   8 +-
 .../components/new/BaseSearchInputColumns.vue |   9 +-
 .../components/new/BaseSearchInputLimit.vue   |   6 +-
 .../components/new/BaseSearchInputPage.vue    |   8 +-
 .../root/src/components/new/index.js          |   6 +-
 .../root/src/composables/useRouter.js         |   7 +-
 .../src/views/Configuration/_store/search.js  | 189 +++++++++++++++++
 .../views/Configuration/adminRoles/_api.js    |  19 +-
 .../adminRoles/_components/TheList.vue        | 165 ++++++++++-----
 .../adminRoles/_composables/useCollection.js  |  63 ++++--
 .../views/Configuration/adminRoles/_store.js  |  14 +-
 .../views/Configuration/adminRoles/config.js  |  79 -------
 15 files changed, 585 insertions(+), 186 deletions(-)
 create mode 100644 html/pfappserver/root/src/components/new/BaseSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/_store/search.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/adminRoles/config.js

diff --git a/html/pfappserver/root/src/components/new/BaseButtonHelp.vue b/html/pfappserver/root/src/components/new/BaseButtonHelp.vue
index bae6040c2df3..176623142999 100644
--- a/html/pfappserver/root/src/components/new/BaseButtonHelp.vue
+++ b/html/pfappserver/root/src/components/new/BaseButtonHelp.vue
@@ -1,7 +1,7 @@
 <template>
   <span @click="onClick" class="align-items-center">
     <icon name="regular/question-circle" scale="1.25"
-      class="base-button-help text-secondary"
+      class="base-button-help"
       :title="$i18n.t('Click to view {documentName}', { documentName })" v-b-tooltip.hover.top.d300
     ></icon>
   </span>
diff --git a/html/pfappserver/root/src/components/new/BaseButtonSaveSearch.vue b/html/pfappserver/root/src/components/new/BaseButtonSaveSearch.vue
index 2e8cac36d80b..67e021b219e7 100644
--- a/html/pfappserver/root/src/components/new/BaseButtonSaveSearch.vue
+++ b/html/pfappserver/root/src/components/new/BaseButtonSaveSearch.vue
@@ -134,7 +134,7 @@ const setup = (props, context) => {
   const keyUpSaveSearchInput = event => {
     switch (event.keyCode) {
       case 13: // [ENTER] submits
-        if (saveSearchString.value.length > 0) 
+        if (saveSearchString.value.length > 0)
           onSave()
         break
     }
diff --git a/html/pfappserver/root/src/components/new/BaseSearch.vue b/html/pfappserver/root/src/components/new/BaseSearch.vue
new file mode 100644
index 000000000000..64450de5b412
--- /dev/null
+++ b/html/pfappserver/root/src/components/new/BaseSearch.vue
@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <transition name="fade" mode="out-in">
+      <div v-if="advancedMode">
+        <b-form @submit.prevent="onSearchAdvanced" @reset.prevent="onSearchReset">
+          <base-search-input-advanced
+            v-model="conditionAdvanced"
+            :disabled="isLoading"
+            :fields="fields"
+            @reset="onSearchReset"
+            @search="onSearchAdvanced"
+          />
+          <b-container fluid class="text-right mt-3 px-0">
+            <b-button class="ml-1" type="reset" variant="secondary" :disabled="isLoading">{{ $t('Clear') }}</b-button>
+            <base-button-save-search
+              save-search-namespace="tenants-advanced"
+              class="ml-1"
+              v-model="conditionAdvanced"
+              :disabled="isLoading"
+              @search="onSearchAdvanced"
+            />
+            <b-button class="ml-1" variant="outline-primary" @click="advancedMode = false"
+              v-b-tooltip.hover.top.d300 :title="$t('Switch to basic search.')">
+              <icon name="search-minus" />
+            </b-button>
+          </b-container>
+        </b-form>
+      </div>
+      <div class="d-flex" v-else>
+        <base-search-input-basic class="flex-grow-1"
+          save-search-namespace="tenants-basic"
+          v-model="conditionBasic"
+          :disabled="isLoading"
+          :placeholder="$t('Search by name or description')"
+          @reset="onSearchReset"
+          @search="onSearchBasic"
+        />
+        <b-button class="ml-1" variant="outline-primary" @click="advancedMode = true"
+          v-b-tooltip.hover.top.d300 :title="$t('Switch to advanced search.')">
+          <icon name="search-plus" />
+        </b-button>
+      </div>
+    </transition>
+    <b-row align-h="end" align-v="center">
+      <b-col cols="auto" class="mr-auto my-3">
+        <slot />
+      </b-col>
+      <b-col cols="auto" class="my-3">
+        <b-container fluid>
+          <b-row align-v="center">
+            <base-search-input-limit
+              v-model="limit"
+              size="md"
+              :limits="limits"
+              :disabled="isLoading"
+            />
+            <base-search-input-page
+              v-model="page"
+              class="ml-3"
+              :limit="limit"
+              :total-rows="totalRows"
+              :disabled="isLoading"
+            />
+            <base-button-export-csv
+              size="md" class="ml-3"
+              :filename="`${$route.path.slice(1).replace('/', '-')}.csv`"
+              :disabled="isLoading"
+              :columns="columns" :data="items"
+            />
+          </b-row>
+        </b-container>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+import BaseButtonConfirm from './BaseButtonConfirm'
+import BaseButtonExportCsv from './BaseButtonExportCsv'
+import BaseButtonSaveSearch from './BaseButtonSaveSearch'
+import BaseInputToggleAdvancedMode from './BaseInputToggleAdvancedMode'
+import BaseSearchInputBasic from './BaseSearchInputBasic'
+import BaseSearchInputAdvanced from './BaseSearchInputAdvanced'
+import BaseSearchInputLimit from './BaseSearchInputLimit'
+import BaseSearchInputPage from './BaseSearchInputPage'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonExportCsv,
+  BaseButtonSaveSearch,
+  BaseInputToggleAdvancedMode,
+  BaseSearchInputBasic,
+  BaseSearchInputAdvanced,
+  BaseSearchInputLimit,
+  BaseSearchInputPage
+}
+
+const props = {
+  useSearch: {
+    type: Function
+  }
+}
+
+import { onMounted, ref, toRefs } from '@vue/composition-api'
+import { useRouterQueryParam } from '@/composables/useRouter'
+
+const setup = (props, context) => {
+
+  const {
+    useSearch
+  } = toRefs(props)
+
+  const search = useSearch.value()
+
+  const {
+    defaultCondition,
+    doSearchCondition,
+    doSearchString,
+    doReset
+  } = search
+
+  // ref(router ?query=...)
+  const { root: { $router } = {} } = context
+  const routerQueryParam = useRouterQueryParam($router, 'query')
+
+  const advancedMode = ref(false)
+  const conditionBasic = ref(null)
+  const conditionAdvanced = ref(defaultCondition()) // default
+
+  onMounted(() => {
+    if (routerQueryParam.value) {
+      switch(routerQueryParam.value.constructor) {
+        case Array: // advanced search
+          conditionAdvanced.value = routerQueryParam.value
+          advancedMode.value = true
+          doSearchCondition(conditionAdvanced.value)
+          break
+        case String: // basic search
+        default:
+          conditionBasic.value = routerQueryParam.value
+          advancedMode.value = false
+          doSearchString(conditionBasic.value)
+          break
+      }
+    }
+    else
+      doReset()
+  })
+
+  const onSearchBasic = () => {
+    if (conditionBasic.value) {
+      doSearchString(conditionBasic.value)
+      routerQueryParam.value = conditionBasic.value
+    }
+    else
+      doReset()
+  }
+
+  const onSearchAdvanced = () => {
+    if (conditionAdvanced.value) {
+      doSearchCondition(conditionAdvanced.value)
+      routerQueryParam.value = conditionAdvanced.value
+    }
+    else
+      doReset()
+  }
+
+  const onSearchReset = () => {
+    conditionBasic.value = null
+    conditionAdvanced.value = defaultCondition()
+    routerQueryParam.value = undefined
+    doReset()
+  }
+
+  return {
+    advancedMode,
+    conditionBasic,
+    conditionAdvanced,
+    onSearchBasic,
+    onSearchAdvanced,
+    onSearchReset,
+
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'base-search',
+  inheritAttrs: false,
+  components,
+  props,
+  setup
+}
+</script>
\ No newline at end of file
diff --git a/html/pfappserver/root/src/components/new/BaseSearchInputBasic.vue b/html/pfappserver/root/src/components/new/BaseSearchInputBasic.vue
index a04343147d34..b5271e640633 100644
--- a/html/pfappserver/root/src/components/new/BaseSearchInputBasic.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearchInputBasic.vue
@@ -10,7 +10,7 @@
       <base-button-save-search v-if="saveSearchNamespace"
         :value="value" @input="onInput" class="ml-1"
         :disabled="disabled"
-        :save-search-namespace="saveSearchNamespace" 
+        :save-search-namespace="saveSearchNamespace"
         @search="onSearch"
       />
       <!-- normal button -->
@@ -56,11 +56,13 @@ const setup = (props, context) => {
   const onInput = value => emit('input', value)
   const onReset = () => emit('reset', true)
   const onSearch = () => emit('search', value.value)
+  const onMode = () => emit('mode', true)
 
-  return { 
+  return {
     onInput,
     onReset,
-    onSearch 
+    onSearch,
+    onMode
   }
 }
 
diff --git a/html/pfappserver/root/src/components/new/BaseSearchInputColumns.vue b/html/pfappserver/root/src/components/new/BaseSearchInputColumns.vue
index b5dbfeac7b98..449cb34a59fd 100644
--- a/html/pfappserver/root/src/components/new/BaseSearchInputColumns.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearchInputColumns.vue
@@ -1,9 +1,10 @@
 <template>
-  <b-dropdown size="sm" variant="link" no-caret
+  <b-dropdown size="sm" variant="link" no-caret right lazy
     @hidden="onCommit"
   >
     <template v-slot:button-content>
-      <icon name="columns" v-b-tooltip.hover.top.d300.window :title="$t('Visible Columns')"></icon>
+      <icon name="columns"
+        v-b-tooltip.hover.top.d300.window :title="$t('Visible Columns')"></icon>
     </template>
     <template v-for="column in columns">
       <template v-if="column.label">
@@ -13,7 +14,7 @@
           <span class="ml-4">{{ $t(column.label) }}</span>
         </b-dropdown-item>
         <a v-else
-          href="javascript:void(0)" class="dropdown-item" 
+          href="javascript:void(0)" class="dropdown-item"
           :disabled="disabled || column.locked" :key="column.key"
           @click.stop="onToggle(column)"
         >
@@ -40,7 +41,7 @@ const setup = (props, context) => {
   const {
     value
   } = toRefs(props)
-  
+
   const { emit } = context
 
   const columns = ref(value.value.reduce((columns, column) => {
diff --git a/html/pfappserver/root/src/components/new/BaseSearchInputLimit.vue b/html/pfappserver/root/src/components/new/BaseSearchInputLimit.vue
index fdf6ba2704cc..b4422f6fb0d0 100644
--- a/html/pfappserver/root/src/components/new/BaseSearchInputLimit.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearchInputLimit.vue
@@ -1,7 +1,7 @@
 <template>
-  <b-form inline class="mb-0">
-    <b-form-select class="mb-3 mr-3" :size="size" 
-      :options="limits" 
+  <b-form inline>
+    <b-form-select :size="size"
+      :options="limits"
       :disabled="disabled"
       :value="value" @input="onInput"
     />
diff --git a/html/pfappserver/root/src/components/new/BaseSearchInputPage.vue b/html/pfappserver/root/src/components/new/BaseSearchInputPage.vue
index 63fc73f47991..7f6740c97911 100644
--- a/html/pfappserver/root/src/components/new/BaseSearchInputPage.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearchInputPage.vue
@@ -1,10 +1,10 @@
 <template>
-  <b-pagination class="mr-3" align="right" 
-    :per-page="limit" 
-    :total-rows="totalRows" 
+  <b-pagination class="mb-0" align="right"
+    :per-page="limit"
+    :total-rows="totalRows"
     :value="value"
     :disabled="disabled"
-    @change="onInput" 
+    @change="onInput"
   />
 </template>
 <script>
diff --git a/html/pfappserver/root/src/components/new/index.js b/html/pfappserver/root/src/components/new/index.js
index d7d13bfd9fbc..4e5cdc567253 100644
--- a/html/pfappserver/root/src/components/new/index.js
+++ b/html/pfappserver/root/src/components/new/index.js
@@ -58,6 +58,7 @@ import BaseInputRange from './BaseInputRange'
 import BaseInputToggle, { props as BaseInputToggleProps } from './BaseInputToggle'
 import BaseInputToggleAdvancedMode from './BaseInputToggleAdvancedMode'
 import BaseInputToggleFalseTrue from './BaseInputToggleFalseTrue'
+import BaseSearch from './BaseSearch'
 import BaseSearchInputBasic from './BaseSearchInputBasic'
 import BaseSearchInputAdvanced from './BaseSearchInputAdvanced'
 import BaseSearchInputColumns from './BaseSearchInputColumns'
@@ -120,7 +121,7 @@ export {
   BaseInputToggle, BaseInputToggleProps,
   BaseInputToggleAdvancedMode,
   BaseInputToggleFalseTrue,
-  
+
   // bootstrap wrappers
   BaseInputGroupDate,
   BaseInputGroupDateTime,
@@ -145,8 +146,9 @@ export {
 
   // containers
   BaseContainerLoading,
-  
+
   // search
+  BaseSearch,
   BaseSearchInputBasic,
   BaseSearchInputAdvanced,
   BaseSearchInputColumns,
diff --git a/html/pfappserver/root/src/composables/useRouter.js b/html/pfappserver/root/src/composables/useRouter.js
index 6ded82cf2fa1..1a9cf92567fe 100644
--- a/html/pfappserver/root/src/composables/useRouter.js
+++ b/html/pfappserver/root/src/composables/useRouter.js
@@ -1,11 +1,10 @@
 import { customRef } from '@vue/composition-api'
 
-export const useRouterQueryParam = (context, _param = 'query') => {
-  const { root: { $router } = {} } = context
+export const useRouterQueryParam = ($router, param = 'query') => {
   return customRef((track, trigger) => ({
     get() {
       track()
-      const { currentRoute: { query: { [_param]: value } = {} } = {} } = $router
+      const { currentRoute: { query: { [param]: value } = {} } = {} } = $router
       if (value && ![false, null].includes(value))
         return JSON.parse(value)
       else
@@ -14,7 +13,7 @@ export const useRouterQueryParam = (context, _param = 'query') => {
     set(newValue) {
       const { currentRoute } = $router
       const value = JSON.stringify(newValue)
-      $router.replace({ ...currentRoute, query: { [_param]: value } })
+      $router.replace({ ...currentRoute, query: { [param]: value } })
         .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
         .finally(() => trigger())
     }
diff --git a/html/pfappserver/root/src/views/Configuration/_store/search.js b/html/pfappserver/root/src/views/Configuration/_store/search.js
new file mode 100644
index 000000000000..016f931d4ba7
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/_store/search.js
@@ -0,0 +1,189 @@
+import { defineStore } from 'pinia'
+import i18n from '@/utils/locale'
+
+const useColumns = (columns) => {
+  return columns
+    .filter(column => column.searchable)
+}
+
+const useFields = (columns) => {
+  return columns
+    .filter(column => (column.required || column.visible) && !column.locked)
+    .map(column => column.key)
+}
+
+export const useString = (searchString, columns) => {
+  return {
+    op: 'and',
+    values: [{
+      op: 'or',
+      values: columns.map(column => ({
+        field: column.key,
+        op: 'contains',
+        value: searchString.trim()
+      }))
+    }]
+  }
+}
+
+export const useCondition = (searchCondition) => {
+  return {
+    op: 'and',
+    values: searchCondition.map(or => {
+      return {
+        op: 'or',
+        values: or.values
+      }
+    })
+  }
+}
+
+const factory = (id, options = {}) => defineStore({
+  id,
+  state() {
+    return {
+      // defaults
+      api: {
+        list: (new Promise(r => r())),
+        search: (new Promise(r => r()))
+      },
+      columns: [],
+      fields: [],
+      page: 1,
+      sortBy: 'id',
+      sortDesc: false,
+      limit: 25,
+      limits: [25, 50, 100, 200, 500, 1000],
+      defaultCondition: () => ([{ values: [] }]),
+      requestInterceptor: (request) => request,
+      responseInterceptor: (response) => response,
+      errorInterceptor: (error) => { throw (error) },
+      useColumns,
+      useFields,
+      useString,
+      useCondition,
+
+      // overload defaults
+      ...options,
+
+      // custom
+      isLoading: false,
+      lastQuery: null,
+      items: [],
+      totalRows: 0
+    }
+  },
+  getters: {
+    visibleColumns: state => state.columns
+      .filter(column => (column.locked || column.visible))
+      .map(column => ({ ...column, label: i18n.t(column.label) })), // transliterate label
+  },
+  actions: {
+    setColumns(columns) {
+      this.columns = columns
+      this.reSearch()
+    },
+    setLimit(limit) {
+      this.limit = limit
+      this.reSearch()
+    },
+    setPage(page) {
+      this.page = page
+      this.reSearch()
+    },
+    setSort(sort) {
+      const { sortBy, sortDesc } = sort
+      this.sortBy = sortBy
+      this.sortDesc = sortDesc
+      this.reSearch()
+    },
+    doReset() {
+      const fields = this.useFields(this.columns).join(',')
+      const params = {
+        fields,
+        sort: ((this.sortDesc)
+          ? `${this.sortBy} DESC`
+          : `${this.sortBy}`
+        ),
+        limit: this.limit,
+        cursor: ((this.page * this.limit) - this.limit)
+      }
+      this.isLoading = true
+      this.api.list(params)
+        .then(_response => {
+          const response = this.responseInterceptor(_response)
+          const { items = [], total_count } = response
+          this.items = items
+          this.totalRows = total_count
+          this.lastQuery = null
+        })
+        .catch(() => {
+          this.page = 1
+          this.items = []
+          this.totalRows = 0
+          this.lastQuery = null
+        })
+        .finally(() => {
+          this.isLoading = false
+        })
+    },
+    doSearchString(string) {
+      const columns = this.useColumns(this.columns)
+      const query = this.useString(string, columns)
+      return this.doSearch(query)
+    },
+    doSearchCondition(condition) {
+      const columns = this.useColumns(this.columns)
+      const query = this.useCondition(condition, columns)
+      return this.doSearch(query)
+    },
+    doSearch(query) {
+      const fields = this.useFields(this.columns)
+      const _body = {
+        fields,
+        query,
+        sort: ((this.sortDesc)
+          ? [`${this.sortBy} DESC`]
+          : [`${this.sortBy}`]
+        ),
+        limit: this.limit,
+        cursor: ((this.page * this.limit) - this.limit)
+      }
+      const body = this.requestInterceptor(_body)
+      this.isLoading = true
+      this.api.search(body)
+        .then(_response => {
+          const response = this.responseInterceptor(_response)
+          const { items = [], total_count } = response
+          this.page = 1
+          this.items = items
+          this.totalRows = total_count
+          this.lastQuery = query
+        })
+        .catch(() => {
+          this.page = 1
+          this.items = []
+          this.totalRows = 0
+          this.lastQuery = null
+        })
+        .finally(() => {
+          this.isLoading = false
+        })
+    },
+    reSearch() {
+      const visibleSortBy = this.columns.find(c => c.visible && c.key == this.sortBy)
+      if (!visibleSortBy) {
+        this.setSort({
+          sortBy: this.columns.find(c => c.required)['key'],
+          sortDesc: false
+        })
+      }
+      if (this.lastQuery) // last query good
+        this.doSearch(this.lastQuery) // re-perform search w/ last query
+      else
+        this.doReset()
+    }
+  }
+})
+
+export default factory
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_api.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_api.js
index 6c201fa96f89..499aac4624ae 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_api.js
@@ -1,37 +1,42 @@
 import apiCall from '@/utils/api'
 
 export default {
-  adminRoles: params => {
+  list: params => {
     return apiCall.get('config/admin_roles', { params }).then(response => {
       return response.data
     })
   },
-  adminRolesOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/admin_roles').then(response => {
       return response.data
     })
   },
-  adminRole: id => {
+  item: id => {
     return apiCall.get(['config', 'admin_role', id]).then(response => {
       return response.data.item
     })
   },
-  adminRoleOptions: id => {
+  itemOptions: id => {
     return apiCall.options(['config', 'admin_role', id]).then(response => {
       return response.data
     })
   },
-  createAdminRole: data => {
+  create: data => {
     return apiCall.post('config/admin_roles', data).then(response => {
       return response.data
     })
   },
-  updateAdminRole: data => {
+  update: data => {
     return apiCall.patch(['config', 'admin_role', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteAdminRole: id => {
+  delete: id => {
     return apiCall.delete(['config', 'admin_role', id])
+  },
+  search: data => {
+    return apiCall.post('config/admin_roles/search', data).then(response => {
+      return response.data
+    })
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheList.vue b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheList.vue
index 542a96dbd38d..253c4e06670a 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheList.vue
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheList.vue
@@ -1,69 +1,120 @@
 <template>
   <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-3">
-            {{ $t('Admin Roles') }}
-            <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_admin_access" />
-          </h4>
-          <p class="mb-0" v-t="'Define roles with specific access rights to the Web administration interface. Roles are assigned to users depending on their authentication source.'"></p>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
+    <b-card-header>
+      <h4 class="d-flex align-items-center mb-3">
+        {{ $t('Admin Roles') }}
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_admin_access" />
+      </h4>
+      <p class="mb-0" v-t="'Define roles with specific access rights to the Web administration interface. Roles are assigned to users depending on their authentication source.'"></p>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
         <b-button variant="outline-primary" :to="{ name: 'newAdminRole' }">{{ $t('New Admin Role') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No admin roles found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Admin Role?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
+      </base-search>
+      <b-table
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        show-empty
+
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template v-slot:head(buttons)>
+          <base-search-input-columns
+            v-model="columns"
+            :disabled="isLoading"
+          />
+        </template>
+        <template v-slot:cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Role?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+    </div>
   </b-card>
 </template>
-
 <script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonHelp from '@/components/pfButtonHelp'
-import pfConfigList from '@/components/pfConfigList'
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
 import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/adminRole'
 
-export default {
-  name: 'admin-roles-list',
-  components: {
-    pfButtonDelete,
-    pfButtonHelp,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this) // ../_config/adminRole
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_admin_roles/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneAdminRole', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_admin_roles/deleteAdminRole', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { computed, ref, toRefs } from '@vue/composition-api'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    $id: storeId,
+    reSearch
+  } = search
+
+console.log('1', {storeId, search})
+
+  const { root: { $router, $store } = {} } = context
+
+  const {
+    goToItem,
+    goToClone
+  } = useRouter($router)
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
       })
-    }
   }
+
+  return {
+    useSearch,
+    goToItem,
+    goToClone,
+    onRemove,
+
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-list',
+  inheritAttrs: false,
+  components,
+  setup
 }
 </script>
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
index fe8215f49895..a7660db56eaf 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
@@ -1,4 +1,5 @@
 import { computed, toRefs } from '@vue/composition-api'
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import i18n from '@/utils/locale'
 
 export const useItemTitle = (props) => {
@@ -43,21 +44,55 @@ export const useStore = (props, context, form) => {
   }
 }
 
-import { useSearch as useConfigurationSearch } from '@/views/Configuration/_composables/useSearch'
+import useSearchFactory from '@/views/Configuration/_store/search'
 import api from '../_api'
-import {
-  columns,
-  fields
-} from '../config'
-export const useSearch = (props, context, options) => useConfigurationSearch(props, context, {
-  id: 'adminRoles',
+export const useSearch = useSearchFactory('$_admin_roles_search', {
   api,
-  columns,
-  fields,
+  columns: [
+    {
+      key: 'id',
+      label: 'Role Name', // i18n defer
+      required: true,
+      sortable: true,
+      visible: true,
+      searchable: true
+    },
+    {
+      key: 'description',
+      label: 'Description', // i18n defer
+      sortable: true,
+      visible: true,
+      searchable: true
+    },
+    {
+      key: 'buttons',
+      label: '',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Role Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'description',
+      text: i18n.t('Description'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
   sortBy: 'id',
-  defaultCondition: () => ([{ values: [
-    { field: 'id', op: 'contains', value: null },
-    { field: 'description', op: 'contains', value: null }
-  ] }]),
-  ...options,
+  defaultCondition: () => ([{
+    values: [
+      { field: 'id', op: 'contains', value: null },
+      { field: 'description', op: 'contains', value: null }
+    ]
+  }]),
+  responseInterceptor: response => { // strip NONE, ALL, ALL_PF_ONLY from results items
+    let { items = [], ...rest } = response
+    items = items.filter(({ id }) => !['NONE', 'ALL', 'ALL_PF_ONLY'].includes(id))
+    return { items, ...rest }
+  }
 })
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_store.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_store.js
index d58ac2f17d85..168727655a47 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_store.js
@@ -31,14 +31,14 @@ const actions = {
       sort: 'id',
       fields: ['id'].join(',')
     }
-    return api.adminRoles(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.adminRoleOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -46,7 +46,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.adminRolesOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -60,7 +60,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.adminRole(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -70,7 +70,7 @@ const actions = {
   },
   createAdminRole: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createAdminRole(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -80,7 +80,7 @@ const actions = {
   },
   updateAdminRole: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateAdminRole(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -90,7 +90,7 @@ const actions = {
   },
   deleteAdminRole: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteAdminRole(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/config.js b/html/pfappserver/root/src/views/Configuration/adminRoles/config.js
deleted file mode 100644
index 81f16d79a654..000000000000
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/config.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Role Name', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'description',
-    label: 'Description', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Role Name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'description',
-    text: i18n.t('Description'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'admin_role', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by name or description'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/admin_roles',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'description', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'admin_roles' },
-      resultsFilter: (adminRoles) => { // do not show protected defaults
-        return adminRoles.filter(adminRole => !['ALL', 'ALL_PF_ONLY', 'NONE'].includes(adminRole.id))
-      }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'description', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}

From 3ae0f6b6bcadc3f83e6962067b4ab80eb9b7b3fa Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 20 May 2021 14:10:38 -0400
Subject: [PATCH 07/72] improve search composable

---
 .../components/new/BaseButtonExportCsv.vue    |  55 +----
 .../root/src/components/new/BaseSearch.vue    | 133 ++++++-----
 .../components/new/BaseSearchInputColumns.vue |  22 +-
 .../components/new/BaseSearchInputPage.vue    |   2 +-
 .../root/src/composables/useCsv.js            |  34 +++
 .../root/src/composables/useDownload.js       |  14 ++
 .../root/src/composables/useRouter.js         |   4 +-
 html/pfappserver/root/src/utils/strings.js    |  21 +-
 .../Configuration/_store/factory/search.js    | 214 ++++++++++++++++++
 .../views/Configuration/_store/preferences.js | 127 +++++++++++
 .../src/views/Configuration/_store/search.js  | 189 ----------------
 .../adminRoles/_components/TheList.vue        | 120 ----------
 .../adminRoles/_components/TheSearch.vue      | 191 ++++++++++++++++
 .../adminRoles/_composables/useCollection.js  |  22 +-
 .../views/Configuration/adminRoles/_router.js |   4 +-
 .../networkBehaviorPolicy/_router.js          |   2 +-
 .../roles/_components/TheList.vue             |   2 +-
 .../tenants/_components/TheList.vue           |   2 +-
 18 files changed, 720 insertions(+), 438 deletions(-)
 create mode 100644 html/pfappserver/root/src/composables/useCsv.js
 create mode 100644 html/pfappserver/root/src/composables/useDownload.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/_store/factory/search.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/_store/preferences.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_store/search.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/components/new/BaseButtonExportCsv.vue b/html/pfappserver/root/src/components/new/BaseButtonExportCsv.vue
index 5419995ea1e4..3d923ced9cfb 100644
--- a/html/pfappserver/root/src/components/new/BaseButtonExportCsv.vue
+++ b/html/pfappserver/root/src/components/new/BaseButtonExportCsv.vue
@@ -34,64 +34,25 @@ const props = {
 }
 
 import { computed, toRefs } from '@vue/composition-api'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
 
 const setup = (props) => {
-  
+
   const {
     columns,
     data,
     filename
   } = toRefs(props)
-  
+
   const visibleColumns = computed(() => columns.value.filter(column => !column.locked && column.visible))
-  
-  const _getContents = () => {
-    let formatters = {}
-    visibleColumns.value.forEach(column => {
-      if (column.formatter) formatters[column.key] = column.formatter
-    })
-    const header = visibleColumns.value.map(column => column.key)
-    let keyMap = {} // build map to sort data same as header
-    Object.keys(data.value[0]).forEach(key => {
-      const idx = header.findIndex(column => column === key)
-      if (idx >= 0) keyMap[key] = idx
-    })
-    const body = data.value.map(row => {
-      return Object.entries(row).filter(col => header.includes(col[0])).sort((a, b) => {
-        return keyMap[a[0]] - keyMap[b[0]]
-      }).map(_row => {
-        const [ key, value ] = _row
-        if (key in formatters) {
-          return formatters[key](value, key, row) || ''
-        }
-        return value || ''
-      })
-    })
-    return [ header, ...body ]
-  }
-  
+
   const onDownload = () => {
-    let csvContentArray = []
-    _getContents().forEach(rowArray => {
-      let row = rowArray.map(col => `"${col.toString().replace('"', '\\"')}"`).join(',')
-      csvContentArray.push(row)
-    })
-    // window.open(encodeURI(`data:text/csv;charset=utf-8,${csvContentArray.join('\r\n')}`)) // doesn't allow naming
-    var blob = new Blob([csvContentArray.join('\r\n')], { type: 'text/csv' })
-    if (window.navigator.msSaveOrOpenBlob) {
-      window.navigator.msSaveBlob(blob, filename.value)
-    } else {
-      var elem = window.document.createElement('a')
-      elem.href = window.URL.createObjectURL(blob)
-      elem.download = filename.value
-      document.body.appendChild(elem)
-      elem.click()
-      document.body.removeChild(elem)
-    }
+    const csv = useTableColumnsItems(visibleColumns.value, data.value)
+    useDownload(filename.value, csv, 'text/csv')
   }
-  
+
   return {
-    visibleColumns,
     onDownload
   }
 }
diff --git a/html/pfappserver/root/src/components/new/BaseSearch.vue b/html/pfappserver/root/src/components/new/BaseSearch.vue
index 64450de5b412..2312c1e76cb4 100644
--- a/html/pfappserver/root/src/components/new/BaseSearch.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearch.vue
@@ -11,7 +11,7 @@
             @search="onSearchAdvanced"
           />
           <b-container fluid class="text-right mt-3 px-0">
-            <b-button class="ml-1" type="reset" variant="secondary" :disabled="isLoading">{{ $t('Clear') }}</b-button>
+            <b-button class="ml-1" type="reset" variant="secondary" :disabled="isLoading">{{ $t('Reset') }}</b-button>
             <base-button-save-search
               save-search-namespace="tenants-advanced"
               class="ml-1"
@@ -31,7 +31,7 @@
           save-search-namespace="tenants-basic"
           v-model="conditionBasic"
           :disabled="isLoading"
-          :placeholder="$t('Search by name or description')"
+          :placeholder="placeholderBasic"
           @reset="onSearchReset"
           @search="onSearchBasic"
         />
@@ -41,41 +41,30 @@
         </b-button>
       </div>
     </transition>
-    <b-row align-h="end" align-v="center">
+    <b-row align-h="end">
       <b-col cols="auto" class="mr-auto my-3">
         <slot />
       </b-col>
-      <b-col cols="auto" class="my-3">
-        <b-container fluid>
-          <b-row align-v="center">
-            <base-search-input-limit
-              v-model="limit"
-              size="md"
-              :limits="limits"
-              :disabled="isLoading"
-            />
-            <base-search-input-page
-              v-model="page"
-              class="ml-3"
-              :limit="limit"
-              :total-rows="totalRows"
-              :disabled="isLoading"
-            />
-            <base-button-export-csv
-              size="md" class="ml-3"
-              :filename="`${$route.path.slice(1).replace('/', '-')}.csv`"
-              :disabled="isLoading"
-              :columns="columns" :data="items"
-            />
-          </b-row>
-        </b-container>
+      <b-col cols="auto" class="my-3 align-self-end d-flex">
+        <base-search-input-limit
+          :value="limit" @input="setLimit"
+          size="md"
+          :limits="limits"
+          :disabled="isLoading"
+        />
+        <base-search-input-page
+          :value="page" @input="setPage"
+          class="ml-3"
+          :limit="limit"
+          :total-rows="totalRows"
+          :disabled="isLoading"
+        />
       </b-col>
     </b-row>
   </div>
 </template>
 <script>
 import BaseButtonConfirm from './BaseButtonConfirm'
-import BaseButtonExportCsv from './BaseButtonExportCsv'
 import BaseButtonSaveSearch from './BaseButtonSaveSearch'
 import BaseInputToggleAdvancedMode from './BaseInputToggleAdvancedMode'
 import BaseSearchInputBasic from './BaseSearchInputBasic'
@@ -85,7 +74,6 @@ import BaseSearchInputPage from './BaseSearchInputPage'
 
 const components = {
   BaseButtonConfirm,
-  BaseButtonExportCsv,
   BaseButtonSaveSearch,
   BaseInputToggleAdvancedMode,
   BaseSearchInputBasic,
@@ -100,56 +88,85 @@ const props = {
   }
 }
 
-import { onMounted, ref, toRefs } from '@vue/composition-api'
-import { useRouterQueryParam } from '@/composables/useRouter'
+import { onMounted, ref, toRefs, watch } from '@vue/composition-api'
+import { toKebabCase } from '@/utils/strings'
+import { usePreference } from '@/views/Configuration/_store/preferences'
 
-const setup = (props, context) => {
+const setup = (props) => {
 
   const {
     useSearch
-  } = toRefs(props)
-
-  const search = useSearch.value()
+  } = props
+  const search = useSearch()
 
   const {
+    uuid,
+    setUp,
+    setPage,
     defaultCondition,
     doSearchCondition,
     doSearchString,
     doReset
   } = search
 
-  // ref(router ?query=...)
-  const { root: { $router } = {} } = context
-  const routerQueryParam = useRouterQueryParam($router, 'query')
+  const {
+    columns,
+    page,
+    limit,
+    sortBy,
+    sortDesc
+  } = toRefs(search)
+
+  const saveSearch = usePreference(`search::${toKebabCase(uuid)}`)
+
+  watch([columns, page, limit, sortBy, sortDesc], () => {
+    Promise.resolve(saveSearch.value).then(_saveSearch => {
+      saveSearch.value = {
+        ..._saveSearch,
+        columns: columns.value.filter(c => c.visible).map(c => c.key),
+        page: page.value,
+        limit: limit.value,
+        sortBy: sortBy.value,
+        sortDesc: sortDesc.value
+      }
+    })
+  })
 
   const advancedMode = ref(false)
   const conditionBasic = ref(null)
   const conditionAdvanced = ref(defaultCondition()) // default
 
   onMounted(() => {
-    if (routerQueryParam.value) {
-      switch(routerQueryParam.value.constructor) {
-        case Array: // advanced search
-          conditionAdvanced.value = routerQueryParam.value
+    Promise.resolve(saveSearch.value).then(value => {
+      if (value) {
+        const {
+          conditionAdvanced: _conditionAdvanced,
+          conditionBasic: _conditionBasic
+        } = value
+        setUp(value)
+        if (_conditionAdvanced) {
+          conditionAdvanced.value = _conditionAdvanced
           advancedMode.value = true
           doSearchCondition(conditionAdvanced.value)
-          break
-        case String: // basic search
-        default:
-          conditionBasic.value = routerQueryParam.value
+        }
+        else {
+          conditionBasic.value = _conditionBasic || ''
           advancedMode.value = false
           doSearchString(conditionBasic.value)
-          break
+        }
       }
-    }
-    else
-      doReset()
+      else
+        doReset()
+    })
   })
 
   const onSearchBasic = () => {
     if (conditionBasic.value) {
       doSearchString(conditionBasic.value)
-      routerQueryParam.value = conditionBasic.value
+      Promise.resolve(saveSearch.value).then(_saveSearch => {
+        const { conditionAdvanced, ...rest } = _saveSearch || {}
+        saveSearch.value = { ...rest, conditionBasic: conditionBasic.value }
+      })
     }
     else
       doReset()
@@ -158,7 +175,10 @@ const setup = (props, context) => {
   const onSearchAdvanced = () => {
     if (conditionAdvanced.value) {
       doSearchCondition(conditionAdvanced.value)
-      routerQueryParam.value = conditionAdvanced.value
+      Promise.resolve(saveSearch.value).then(_saveSearch => {
+        const { conditionBasic, ...rest } = _saveSearch || {}
+        saveSearch.value = { ...rest, conditionAdvanced: conditionAdvanced.value }
+      })
     }
     else
       doReset()
@@ -167,7 +187,11 @@ const setup = (props, context) => {
   const onSearchReset = () => {
     conditionBasic.value = null
     conditionAdvanced.value = defaultCondition()
-    routerQueryParam.value = undefined
+    setPage(1)
+    Promise.resolve(saveSearch.value).then(_saveSearch => {
+      const { conditionAdvanced, conditionBasic, ...rest } = _saveSearch || {}
+      saveSearch.value = rest
+    })
     doReset()
   }
 
@@ -179,7 +203,8 @@ const setup = (props, context) => {
     onSearchAdvanced,
     onSearchReset,
 
-    ...toRefs(search)
+    ...toRefs(search),
+    columns
   }
 }
 
diff --git a/html/pfappserver/root/src/components/new/BaseSearchInputColumns.vue b/html/pfappserver/root/src/components/new/BaseSearchInputColumns.vue
index 449cb34a59fd..39d68c836c69 100644
--- a/html/pfappserver/root/src/components/new/BaseSearchInputColumns.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearchInputColumns.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-dropdown size="sm" variant="link" no-caret right lazy
+  <b-dropdown size="sm" variant="link" no-caret right
     @hidden="onCommit"
   >
     <template v-slot:button-content>
@@ -35,7 +35,7 @@ const props = {
   }
 }
 
-import { ref, toRefs } from '@vue/composition-api'
+import { ref, toRefs, watch } from '@vue/composition-api'
 
 const setup = (props, context) => {
   const {
@@ -44,20 +44,26 @@ const setup = (props, context) => {
 
   const { emit } = context
 
-  const columns = ref(value.value.reduce((columns, column) => {
-    return [ ...columns, { ...column } ]
-  }, [])) // dereference
+  const columns = ref([])
+  watch(value, () => {
+    columns.value = JSON.parse(JSON.stringify(value.value)) // dereference
+  }, { deep: true, immediate: true })
+  let flag = false
 
   // only emit when dropdown is closed (debounce)
   const onCommit = () => {
-    emit('input', [...(new Set(columns.value))]) // dereference
+    if (flag)
+      emit('input', JSON.parse(JSON.stringify(columns.value))) // dereference
+    flag = false
   }
 
   const onToggle = column => {
     const _columns = columns.value
       .map(_column => {
-        if (_column.key === column.key)
-          _column.visible = !_column.visible
+        if (_column.key === column.key) {
+            _column.visible = !_column.visible
+            flag = true
+        }
         return _column
       })
     columns.value = _columns
diff --git a/html/pfappserver/root/src/components/new/BaseSearchInputPage.vue b/html/pfappserver/root/src/components/new/BaseSearchInputPage.vue
index 7f6740c97911..69804133d12e 100644
--- a/html/pfappserver/root/src/components/new/BaseSearchInputPage.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearchInputPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-pagination class="mb-0" align="right"
+  <b-pagination class="mb-0" align="right" :key="totalRows"
     :per-page="limit"
     :total-rows="totalRows"
     :value="value"
diff --git a/html/pfappserver/root/src/composables/useCsv.js b/html/pfappserver/root/src/composables/useCsv.js
new file mode 100644
index 000000000000..729c627e7656
--- /dev/null
+++ b/html/pfappserver/root/src/composables/useCsv.js
@@ -0,0 +1,34 @@
+export const useTableColumnsItems = (columns, items) => {
+  const formatters = columns.reduce((formatters, column) => {
+    return (column.formatter)
+      ? { ...formatters, [column.key]: column.formatter }
+      : formatters
+  }, {})
+  const header = columns.map(column => column.key)
+  let keyMap = {} // build map to sort data same as header
+  Object.keys(items[0]).forEach(key => {
+    const idx = header.findIndex(column => column === key)
+    if (idx >= 0)
+      keyMap[key] = idx
+  })
+  const body = items.map(row => {
+    return Object.entries(row)
+      .filter(col => header.includes(col[0])).sort((a, b) => {
+        return keyMap[a[0]] - keyMap[b[0]]
+      })
+      .map(_row => {
+        const [ key, value ] = _row
+        if (key in formatters) {
+          return formatters[key](value, key, row) || ''
+        }
+        return value || ''
+      })
+  })
+  let csvContentArray = []
+  const rows = [ header, ...body ]
+  rows.forEach(row => {
+    let csvRow = row.map(col => `"${col.toString().replace('"', '\\"')}"`).join(',')
+    csvContentArray.push(csvRow)
+  })
+  return csvContentArray.join('\r\n')
+}
\ No newline at end of file
diff --git a/html/pfappserver/root/src/composables/useDownload.js b/html/pfappserver/root/src/composables/useDownload.js
new file mode 100644
index 000000000000..a4ef1abd5cfb
--- /dev/null
+++ b/html/pfappserver/root/src/composables/useDownload.js
@@ -0,0 +1,14 @@
+export const useDownload = (filename, body, type) => {
+  // window.open(encodeURI(`data:text/csv;charset=utf-8,${csvContentArray.join('\r\n')}`)) // doesn't allow naming
+  var blob = new Blob([body], { type })
+  if (window.navigator.msSaveOrOpenBlob) {
+    window.navigator.msSaveBlob(blob, filename)
+  } else {
+    var elem = window.document.createElement('a')
+    elem.href = window.URL.createObjectURL(blob)
+    elem.download = filename
+    document.body.appendChild(elem)
+    elem.click()
+    document.body.removeChild(elem)
+  }
+}
\ No newline at end of file
diff --git a/html/pfappserver/root/src/composables/useRouter.js b/html/pfappserver/root/src/composables/useRouter.js
index 1a9cf92567fe..69631bc399d2 100644
--- a/html/pfappserver/root/src/composables/useRouter.js
+++ b/html/pfappserver/root/src/composables/useRouter.js
@@ -11,9 +11,9 @@ export const useRouterQueryParam = ($router, param = 'query') => {
         return undefined
     },
     set(newValue) {
-      const { currentRoute } = $router
+      const { currentRoute, currentRoute: { query } = {} } = $router
       const value = JSON.stringify(newValue)
-      $router.replace({ ...currentRoute, query: { [param]: value } })
+      $router.replace({ ...currentRoute, query: { ...query, [param]: value } })
         .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
         .finally(() => trigger())
     }
diff --git a/html/pfappserver/root/src/utils/strings.js b/html/pfappserver/root/src/utils/strings.js
index 984c13c4f94d..19eb738ffd0d 100644
--- a/html/pfappserver/root/src/utils/strings.js
+++ b/html/pfappserver/root/src/utils/strings.js
@@ -1,13 +1,16 @@
-const strings = {
-  cleanMac (mac) {
-    if (mac) {
-      mac = mac.toLowerCase().replace(/([^0-9a-f])/gi, '')
-      if (mac.length === 12) {
-        return `${mac[0]}${mac[1]}:${mac[2]}${mac[3]}:${mac[4]}${mac[5]}:${mac[6]}${mac[7]}:${mac[8]}${mac[9]}:${mac[10]}${mac[11]}`
-      }
+export const cleanMac = mac => {
+  if (mac) {
+    mac = mac.toLowerCase().replace(/([^0-9a-f])/gi, '')
+    if (mac.length === 12) {
+      return `${mac[0]}${mac[1]}:${mac[2]}${mac[3]}:${mac[4]}${mac[5]}:${mac[6]}${mac[7]}:${mac[8]}${mac[9]}:${mac[10]}${mac[11]}`
     }
-    return null
   }
+  return mac
 }
 
-export default strings
+export const toKebabCase = (string, delim = '-') => string &&
+  string
+    .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+    .map(c => c.toLowerCase())
+    .join(delim)
+
diff --git a/html/pfappserver/root/src/views/Configuration/_store/factory/search.js b/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
new file mode 100644
index 000000000000..1f7e073d0da8
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
@@ -0,0 +1,214 @@
+import { defineStore } from 'pinia'
+import i18n from '@/utils/locale'
+import { toKebabCase } from '@/utils/strings'
+
+const useColumns = (columns) => {
+  return columns
+    .filter(column => column.searchable)
+}
+
+const useFields = (columns) => {
+  return columns
+    .filter(column => (column.required || column.visible) && !column.locked)
+    .map(column => column.key)
+}
+
+export const useString = (searchString, columns) => {
+  return {
+    op: 'and',
+    values: [{
+      op: 'or',
+      values: columns.map(column => ({
+        field: column.key,
+        op: 'contains',
+        value: searchString.trim()
+      }))
+    }]
+  }
+}
+
+export const useCondition = (searchCondition) => {
+  return {
+    op: 'and',
+    values: searchCondition.map(or => {
+      return {
+        op: 'or',
+        values: or.values
+      }
+    })
+  }
+}
+
+const factory = (uuid, options = {}) => {
+  const id = `$_${toKebabCase(uuid, '_')}_search`
+  return defineStore({
+    id,
+    state() {
+      return {
+        uuid,
+        // defaults
+        api: {
+          list: (new Promise(r => r())),
+          search: (new Promise(r => r()))
+        },
+        columns: [],
+        fields: [],
+        page: 1,
+        sortBy: 'id',
+        sortDesc: false,
+        limit: 25,
+        limits: [10, 25, 50, 100, 200, 500, 1000],
+        defaultCondition: () => ([{ values: [] }]),
+        requestInterceptor: (request) => request,
+        responseInterceptor: (response) => response,
+        errorInterceptor: (error) => { throw (error) },
+        useColumns,
+        useFields,
+        useString,
+        useCondition,
+
+        // overload defaults
+        ...options,
+
+        // local
+        isLoading: false,
+        lastQuery: null,
+        items: [],
+        totalRows: 0
+      }
+    },
+    getters: {
+      visibleColumns: state => state.columns
+        .filter(column => (column.locked || column.visible))
+        .map(column => ({ ...column, label: i18n.t(column.label) })), // transliterate label
+      placeholderBasic: state => {
+        const [last, ...csv] = state.columns
+          .filter(column => column.searchable)
+          .map(column => i18n.t(column.label))
+          .reverse()
+        if (csv.length) {
+          return i18n.t('Search criteria for "{csv}" or "{last}"', { csv: csv.reverse().join('", "'), last })
+        } else {
+          return i18n.t('Search criteria for "{only}"', { only: last })
+        }
+      }
+    },
+    actions: {
+      setUp({ columns, limit, page, sortBy, sortDesc }) {
+        if (columns)
+          this.columns = this.columns.map(c => ({ ...c, visible: columns.includes(c.key) }))
+        if (limit)
+          this.limit = limit
+        if (page)
+          this.page = page
+        if (sortBy || sortDesc) {
+          this.sortBy = sortBy
+          this.sortDesc = sortDesc
+        }
+      },
+      setColumns(columns) {
+        this.columns = columns
+        this.reSearch()
+      },
+      setLimit(limit) {
+        if (+limit !== this.limit) {
+          this.limit = +limit
+          this.reSearch()
+        }
+      },
+      setPage(page) {
+        this.page = +page
+        this.reSearch()
+      },
+      setSort(sort) {
+        const { sortBy, sortDesc } = sort
+        this.sortBy = sortBy
+        this.sortDesc = !!sortDesc
+        this.reSearch()
+      },
+      doReset() {
+        this.isLoading = true
+        const fields = this.useFields(this.columns).join(',')
+        const params = {
+          fields,
+          sort: ((this.sortDesc)
+            ? `${this.sortBy} DESC`
+            : `${this.sortBy}`
+          ),
+          limit: this.limit,
+          cursor: ((this.page * this.limit) - this.limit)
+        }
+        this.api.list(params)
+          .then(_response => {
+            const response = this.responseInterceptor(_response)
+            const { items = [], total_count } = response
+            this.items = items
+            this.totalRows = total_count
+            this.lastQuery = null
+          })
+          .catch(() => {
+            this.items = []
+            this.totalRows = 0
+            this.lastQuery = null
+          })
+          .finally(() => {
+            this.isLoading = false
+          })
+      },
+      doSearchString(string) {
+        const columns = this.useColumns(this.columns)
+        const query = this.useString(string, columns)
+        return this.doSearch(query)
+      },
+      doSearchCondition(condition) {
+        const columns = this.useColumns(this.columns)
+        const query = this.useCondition(condition, columns)
+        return this.doSearch(query)
+      },
+      doSearch(query) {
+        this.isLoading = true
+        const fields = this.useFields(this.columns)
+        const _body = {
+          fields,
+          query,
+          sort: ((this.sortDesc)
+            ? [`${this.sortBy} DESC`]
+            : [`${this.sortBy}`]
+          ),
+          limit: this.limit,
+          cursor: ((this.page * this.limit) - this.limit)
+        }
+        const body = this.requestInterceptor(_body)
+        this.api.search(body)
+          .then(_response => {
+            const response = this.responseInterceptor(_response)
+            const { items = [], total_count } = response
+            this.items = items
+            this.totalRows = total_count
+            this.lastQuery = query
+          })
+          .catch(() => {
+            this.items = []
+            this.totalRows = 0
+            this.lastQuery = null
+          })
+          .finally(() => {
+            this.isLoading = false
+          })
+      },
+      reSearch() {
+        const visibleSortBy = this.columns.find(c => c.visible && c.key == this.sortBy)
+        if (!visibleSortBy) {
+          this.sortBy = this.columns.find(c => c.required)['key']
+          this.sortDesc = false
+        }
+        if (this.lastQuery) // last query good
+          this.doSearch(this.lastQuery) // re-perform search w/ last query
+        else
+          this.doReset()
+      }
+    }
+  })
+}
+
+export default factory
diff --git a/html/pfappserver/root/src/views/Configuration/_store/preferences.js b/html/pfappserver/root/src/views/Configuration/_store/preferences.js
new file mode 100644
index 000000000000..2f2298242aa4
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/_store/preferences.js
@@ -0,0 +1,127 @@
+import { customRef, ref, watch } from '@vue/composition-api'
+import { defineStore } from 'pinia'
+import { createDebouncer } from 'promised-debounce'
+import store from '@/store' // required for 'system/version'
+import apiCall from '@/utils/api'
+
+export const IDENTIFIER_PREFIX = 'pfappserver::' // transparently prefix all identifiers - avoid key collisions
+
+export const api = {
+  getPreference: id => {
+    return apiCall.getQuiet(`preference/${IDENTIFIER_PREFIX}${id}`).then(response => {
+      const { data } = JSON.parse(response.data.item.value)
+      return data
+    })
+  },
+  setPreference: (id, data) => {
+    if (data) {
+      let body = {
+        id: `${IDENTIFIER_PREFIX}${id}`,
+        value: JSON.stringify({
+          data,
+          meta: {
+            created_at: (new Date()).getTime(),
+            updated_at: (new Date()).getTime(),
+            version: store.getters['system/version']
+          }
+        })
+      }
+      return apiCall.getQuiet(['preference', `${IDENTIFIER_PREFIX}${id}`]).then(response => { // exists
+        const { data: { item: { value = null } = {} } = {} } = response
+        if (value) {
+          const { meta: { created_at = null } = {} } = JSON.parse(value)
+          if (created_at) { // retain `created_at`
+            body = {
+              id: `${IDENTIFIER_PREFIX}${id}`,
+              value: JSON.stringify({
+                data,
+                meta: {
+                  created_at: created_at,
+                  updated_at: (new Date()).getTime(),
+                  version: store.getters['system/version']
+                }
+              })
+            }
+          }
+        }
+        return apiCall.putQuiet(['preference', `${IDENTIFIER_PREFIX}${id}`], body).then(response => {
+          return response.data
+        })
+      }).catch(() => { // not exists
+        return apiCall.putQuiet(['preference', `${IDENTIFIER_PREFIX}${id}`], body).then(response => {
+          return response.data
+        })
+      })
+    }
+    else {
+      return apiCall.deleteQuiet(['preference', `${IDENTIFIER_PREFIX}${id}`]).then(response => {
+        return response
+      })
+    }
+  },
+  removePreference: id => {
+    return apiCall.deleteQuiet(['preference', `${IDENTIFIER_PREFIX}${id}`]).then(response => {
+      return response
+    })
+  }
+}
+
+export const useStore = defineStore({
+  id: 'preferences',
+  state() {
+    return {
+      cache: {}
+    }
+  },
+  getters: {},
+  actions: {
+    getItem(id, defaultValue) {
+      if (!(id in this.cache))
+        this.cache[id] = undefined
+      return api.getPreference(id)
+        .then(item => { // exists
+          this.cache[id] = item
+          return this.cache[id]
+        })
+        .catch(() => { // not exists
+          if (defaultValue !== undefined)
+            return this.setItem(id, defaultValue)
+          else
+            return this.cache[id]
+        })
+    },
+    setItem(id, value) {
+      if (JSON.stringify(value) === JSON.stringify(this.cache[id]))
+        return Promise.resolve(this.cache[id])
+      if (value === undefined) {
+        return api.removePreference(id).then(item => {
+          this.cache[id] = undefined
+          return this.cache[id]
+        })
+      }
+      else {
+        return api.setPreference(id, value).then(item => {
+          this.cache[id] = value
+          return this.cache[id]
+        })
+      }
+    }
+  }
+})
+
+export const usePreference = (key, defaultValue) => {
+  const {
+    getItem,
+    setItem
+  } = useStore()
+  return customRef((track, trigger) => ({
+    get() {
+      track()
+      return getItem(key, defaultValue)
+    },
+    set(newValue) {
+      return setItem(key, newValue)
+        .finally(() => trigger())
+    }
+  }))
+}
diff --git a/html/pfappserver/root/src/views/Configuration/_store/search.js b/html/pfappserver/root/src/views/Configuration/_store/search.js
deleted file mode 100644
index 016f931d4ba7..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_store/search.js
+++ /dev/null
@@ -1,189 +0,0 @@
-import { defineStore } from 'pinia'
-import i18n from '@/utils/locale'
-
-const useColumns = (columns) => {
-  return columns
-    .filter(column => column.searchable)
-}
-
-const useFields = (columns) => {
-  return columns
-    .filter(column => (column.required || column.visible) && !column.locked)
-    .map(column => column.key)
-}
-
-export const useString = (searchString, columns) => {
-  return {
-    op: 'and',
-    values: [{
-      op: 'or',
-      values: columns.map(column => ({
-        field: column.key,
-        op: 'contains',
-        value: searchString.trim()
-      }))
-    }]
-  }
-}
-
-export const useCondition = (searchCondition) => {
-  return {
-    op: 'and',
-    values: searchCondition.map(or => {
-      return {
-        op: 'or',
-        values: or.values
-      }
-    })
-  }
-}
-
-const factory = (id, options = {}) => defineStore({
-  id,
-  state() {
-    return {
-      // defaults
-      api: {
-        list: (new Promise(r => r())),
-        search: (new Promise(r => r()))
-      },
-      columns: [],
-      fields: [],
-      page: 1,
-      sortBy: 'id',
-      sortDesc: false,
-      limit: 25,
-      limits: [25, 50, 100, 200, 500, 1000],
-      defaultCondition: () => ([{ values: [] }]),
-      requestInterceptor: (request) => request,
-      responseInterceptor: (response) => response,
-      errorInterceptor: (error) => { throw (error) },
-      useColumns,
-      useFields,
-      useString,
-      useCondition,
-
-      // overload defaults
-      ...options,
-
-      // custom
-      isLoading: false,
-      lastQuery: null,
-      items: [],
-      totalRows: 0
-    }
-  },
-  getters: {
-    visibleColumns: state => state.columns
-      .filter(column => (column.locked || column.visible))
-      .map(column => ({ ...column, label: i18n.t(column.label) })), // transliterate label
-  },
-  actions: {
-    setColumns(columns) {
-      this.columns = columns
-      this.reSearch()
-    },
-    setLimit(limit) {
-      this.limit = limit
-      this.reSearch()
-    },
-    setPage(page) {
-      this.page = page
-      this.reSearch()
-    },
-    setSort(sort) {
-      const { sortBy, sortDesc } = sort
-      this.sortBy = sortBy
-      this.sortDesc = sortDesc
-      this.reSearch()
-    },
-    doReset() {
-      const fields = this.useFields(this.columns).join(',')
-      const params = {
-        fields,
-        sort: ((this.sortDesc)
-          ? `${this.sortBy} DESC`
-          : `${this.sortBy}`
-        ),
-        limit: this.limit,
-        cursor: ((this.page * this.limit) - this.limit)
-      }
-      this.isLoading = true
-      this.api.list(params)
-        .then(_response => {
-          const response = this.responseInterceptor(_response)
-          const { items = [], total_count } = response
-          this.items = items
-          this.totalRows = total_count
-          this.lastQuery = null
-        })
-        .catch(() => {
-          this.page = 1
-          this.items = []
-          this.totalRows = 0
-          this.lastQuery = null
-        })
-        .finally(() => {
-          this.isLoading = false
-        })
-    },
-    doSearchString(string) {
-      const columns = this.useColumns(this.columns)
-      const query = this.useString(string, columns)
-      return this.doSearch(query)
-    },
-    doSearchCondition(condition) {
-      const columns = this.useColumns(this.columns)
-      const query = this.useCondition(condition, columns)
-      return this.doSearch(query)
-    },
-    doSearch(query) {
-      const fields = this.useFields(this.columns)
-      const _body = {
-        fields,
-        query,
-        sort: ((this.sortDesc)
-          ? [`${this.sortBy} DESC`]
-          : [`${this.sortBy}`]
-        ),
-        limit: this.limit,
-        cursor: ((this.page * this.limit) - this.limit)
-      }
-      const body = this.requestInterceptor(_body)
-      this.isLoading = true
-      this.api.search(body)
-        .then(_response => {
-          const response = this.responseInterceptor(_response)
-          const { items = [], total_count } = response
-          this.page = 1
-          this.items = items
-          this.totalRows = total_count
-          this.lastQuery = query
-        })
-        .catch(() => {
-          this.page = 1
-          this.items = []
-          this.totalRows = 0
-          this.lastQuery = null
-        })
-        .finally(() => {
-          this.isLoading = false
-        })
-    },
-    reSearch() {
-      const visibleSortBy = this.columns.find(c => c.visible && c.key == this.sortBy)
-      if (!visibleSortBy) {
-        this.setSort({
-          sortBy: this.columns.find(c => c.required)['key'],
-          sortDesc: false
-        })
-      }
-      if (this.lastQuery) // last query good
-        this.doSearch(this.lastQuery) // re-perform search w/ last query
-      else
-        this.doReset()
-    }
-  }
-})
-
-export default factory
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheList.vue b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheList.vue
deleted file mode 100644
index 253c4e06670a..000000000000
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheList.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <b-card no-body>
-    <b-card-header>
-      <h4 class="d-flex align-items-center mb-3">
-        {{ $t('Admin Roles') }}
-        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_admin_access" />
-      </h4>
-      <p class="mb-0" v-t="'Define roles with specific access rights to the Web administration interface. Roles are assigned to users depending on their authentication source.'"></p>
-    </b-card-header>
-    <div class="card-body">
-      <base-search :use-search="useSearch">
-        <b-button variant="outline-primary" :to="{ name: 'newAdminRole' }">{{ $t('New Admin Role') }}</b-button>
-      </base-search>
-      <b-table
-        :busy="isLoading"
-        :hover="items.length > 0"
-        :items="items"
-        :fields="visibleColumns"
-        :sort-by="sortBy"
-        :sort-desc="sortDesc"
-        @sort-changed="setSort"
-        @row-clicked="goToItem"
-        show-empty
-
-        no-local-sorting
-        sort-icon-left
-        fixed
-        striped
-      >
-        <template v-slot:empty>
-          <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
-          </slot>
-        </template>
-        <template v-slot:head(buttons)>
-          <base-search-input-columns
-            v-model="columns"
-            :disabled="isLoading"
-          />
-        </template>
-        <template v-slot:cell(buttons)="{ item }">
-          <span class="float-right text-nowrap text-right">
-            <base-button-confirm v-if="!item.not_deletable"
-              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
-              :disabled="isLoading"
-              :confirm="$t('Delete Role?')"
-              @click="onRemove(item.id)"
-            >{{ $t('Delete') }}</base-button-confirm>
-            <b-button
-              size="sm" variant="outline-primary" class="mr-1"
-              @click.stop.prevent="goToClone(item)"
-            >{{ $t('Clone') }}</b-button>
-          </span>
-        </template>
-      </b-table>
-    </div>
-  </b-card>
-</template>
-<script>
-import {
-  BaseButtonConfirm,
-  BaseButtonHelp,
-  BaseSearch,
-  BaseSearchInputColumns
-} from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
-
-const components = {
-  BaseButtonConfirm,
-  BaseButtonHelp,
-  BaseSearch,
-  BaseSearchInputColumns,
-  pfEmptyTable
-}
-
-import { computed, ref, toRefs } from '@vue/composition-api'
-import { useSearch, useRouter } from '../_composables/useCollection'
-
-const setup = (props, context) => {
-
-  const search = useSearch()
-  const {
-    $id: storeId,
-    reSearch
-  } = search
-
-console.log('1', {storeId, search})
-
-  const { root: { $router, $store } = {} } = context
-
-  const {
-    goToItem,
-    goToClone
-  } = useRouter($router)
-
-  const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
-  }
-
-  return {
-    useSearch,
-    goToItem,
-    goToClone,
-    onRemove,
-
-    ...toRefs(search)
-  }
-}
-
-// @vue/component
-export default {
-  name: 'the-list',
-  inheritAttrs: false,
-  components,
-  setup
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
new file mode 100644
index 000000000000..63bad0247502
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
@@ -0,0 +1,191 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center mb-3">
+        {{ $t('Admin Roles') }}
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_admin_access" />
+      </h4>
+      <p class="mb-0" v-t="'Define roles with specific access rights to the Web administration interface. Roles are assigned to users depending on their authentication source.'"></p>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" :to="{ name: 'newAdminRole' }">{{ $t('New Admin Role') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Role?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { refs, root: { $router, $store } = {} } = context
+
+  const {
+    goToItem,
+    goToClone
+  } = useRouter($router)
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  const selected = ref([])
+  const onRowSelected = value => {
+    selected.value = value.map(({id}) => id)
+  }
+  const onAllSelected = () => {
+    const { tableRef } = refs
+    if (selected.value.length === 0) // select all
+      tableRef.selectAllRows()
+    else // select none
+      tableRef.clearSelected()
+  }
+  const onItemSelected = index => {
+    const { tableRef } = refs
+    const { [index]: { id } = {} } = items.value
+    if (selected.value.includes(id))
+      tableRef.unselectRow(index)
+    else
+      tableRef.selectRow(index)
+  }
+
+  const onBulkExport = () => {
+    const _items = selected.value.map(id => {
+      return items.value.find(item => item.id === id)
+    })
+    const csv = useTableColumnsItems(visibleColumns.value, _items)
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  return {
+    useSearch,
+    goToItem,
+    goToClone,
+    onRemove,
+
+    selected,
+    onRowSelected,
+    onAllSelected,
+    onItemSelected,
+
+    onBulkExport,
+
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
index a7660db56eaf..58b822d29cbc 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
@@ -44,11 +44,16 @@ export const useStore = (props, context, form) => {
   }
 }
 
-import useSearchFactory from '@/views/Configuration/_store/search'
+import makeSearch from '@/views/Configuration/_store/factory/search'
 import api from '../_api'
-export const useSearch = useSearchFactory('$_admin_roles_search', {
+export const useSearch = makeSearch('adminRoles', {
   api,
   columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
     {
       key: 'id',
       label: 'Role Name', // i18n defer
@@ -66,7 +71,6 @@ export const useSearch = useSearchFactory('$_admin_roles_search', {
     },
     {
       key: 'buttons',
-      label: '',
       class: 'text-right p-0',
       locked: true
     }
@@ -90,9 +94,21 @@ export const useSearch = useSearchFactory('$_admin_roles_search', {
       { field: 'description', op: 'contains', value: null }
     ]
   }]),
+  requestInterceptor: request => {
+      // append query in request to omit NONE, ALL, ALL_PF_ONLY from request
+      request.query.values = [
+      ...request.query.values,
+      { op: 'or', values: [ { field: 'id', op: 'not_equals', value: 'NONE' } ] },
+      { op: 'or', values: [ { field: 'id', op: 'not_equals', value: 'ALL' } ] },
+      { op: 'or', values: [ { field: 'id', op: 'not_equals', value: 'ALL_PF_ONLY' } ] }
+    ]
+    return request
+  },
+  /*
   responseInterceptor: response => { // strip NONE, ALL, ALL_PF_ONLY from results items
     let { items = [], ...rest } = response
     items = items.filter(({ id }) => !['NONE', 'ALL', 'ALL_PF_ONLY'].includes(id))
     return { items, ...rest }
   }
+  */
 })
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_router.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_router.js
index c6a012635a91..fe99d4d38e29 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_router.js
@@ -11,7 +11,7 @@ export const useRouter = $router => {
   }
 }
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ './_components/TheList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const beforeEnter = (to, from, next = () => {}) => {
@@ -24,7 +24,7 @@ export default [
   {
     path: 'admin_roles',
     name: 'admin_roles',
-    component: TheList,
+    component: TheSearch,
     props: (route) => ({ query: route.query.query }),
     beforeEnter
   },
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_router.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_router.js
index aec704a9e004..036b61ee4156 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_router.js
@@ -8,7 +8,7 @@ const TheView = () => import(/* webpackChunkName: "Configuration" */ './_compone
 export const useRouter = $router => {
   return {
     goToCollection: () => $router.push({ name: 'network_behavior_policies' }),
-    goToItem: $params => $router
+    goToItem: params => $router
       .push({ name: 'network_behavior_policy', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneNetworkBehaviorPolicy', params }),
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_components/TheList.vue b/html/pfappserver/root/src/views/Configuration/roles/_components/TheList.vue
index 3f5d7dd817da..2c5fa884807b 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_components/TheList.vue
+++ b/html/pfappserver/root/src/views/Configuration/roles/_components/TheList.vue
@@ -237,7 +237,7 @@ const setup = (props, context) => {
   const onRowClicked = item => {
     const {
       goToItem
-    } = useRouter(props, context)
+    } = useRouter($router)
     goToItem(item)
   }
 
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheList.vue b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheList.vue
index d247af67dcb2..405bf5f36515 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheList.vue
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheList.vue
@@ -162,7 +162,7 @@ const setup = (props, context) => {
   const onRowClicked = item => {
     const {
       goToItem
-    } = useRouter(props, context)
+    } = useRouter($router)
     goToItem(item)
   }
 

From c5b348e148a5fd5e91dca7156e26bc4e1913dacb Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Fri, 21 May 2021 08:09:57 -0400
Subject: [PATCH 08/72] refactor adminRoles search

---
 .../root/src/composables/useBootstrap.js      | 34 +++++++++++
 .../adminRoles/_components/TheSearch.vue      | 61 ++++++-------------
 .../views/Configuration/adminRoles/_router.js |  1 +
 3 files changed, 53 insertions(+), 43 deletions(-)
 create mode 100644 html/pfappserver/root/src/composables/useBootstrap.js

diff --git a/html/pfappserver/root/src/composables/useBootstrap.js b/html/pfappserver/root/src/composables/useBootstrap.js
new file mode 100644
index 000000000000..efa2102dd1f7
--- /dev/null
+++ b/html/pfappserver/root/src/composables/useBootstrap.js
@@ -0,0 +1,34 @@
+import { computed, ref } from '@vue/composition-api'
+
+export const useBootstrapTableSelected = (tableRef, itemsRef, key = 'id') => {
+  const selected = ref([])
+  const selectedItems = computed(() => {
+    return selected.value.map(_key => {
+      return itemsRef.value.find(item => item[key] === _key)
+    })
+  })
+  const onRowSelected = value => {
+    selected.value = value.map(({ [key]: _key }) => _key)
+  }
+  const onAllSelected = () => {
+    if (selected.value.length === 0) // select all
+      tableRef.value.selectAllRows()
+    else // select none
+      tableRef.value.clearSelected()
+  }
+  const onItemSelected = index => {
+    const { [index]: { [key]: _key } = {} } = itemsRef.value
+    if (selected.value.includes(_key))
+      tableRef.value.unselectRow(index)
+    else
+      tableRef.value.selectRow(index)
+  }
+
+  return {
+    selected,
+    selectedItems,
+    onRowSelected,
+    onAllSelected,
+    onItemSelected
+  }
+}
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
index 63bad0247502..4c92dd216510 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
@@ -9,7 +9,7 @@
     </b-card-header>
     <div class="card-body">
       <base-search :use-search="useSearch">
-        <b-button variant="outline-primary" :to="{ name: 'newAdminRole' }">{{ $t('New Admin Role') }}</b-button>
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New Admin Role') }}</b-button>
       </base-search>
       <b-table ref="tableRef"
         :busy="isLoading"
@@ -106,6 +106,7 @@ const components = {
 }
 
 import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
 import { useSearch, useRouter } from '../_composables/useCollection'
@@ -121,12 +122,21 @@ const setup = (props, context) => {
     visibleColumns
   } = toRefs(search)
 
-  const { refs, root: { $router, $store } = {} } = context
+  const { root: { $router, $store } = {} } = context
 
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
   const {
-    goToItem,
-    goToClone
-  } = useRouter($router)
+    selectedItems
+  } = toRefs(selected)
+
+  const onBulkExport = () => {
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    useDownload(filename, csv, 'text/csv')
+  }
 
   const onRemove = id => {
     $store.dispatch('$_admin_roles/deleteAdminRole', id)
@@ -135,48 +145,13 @@ const setup = (props, context) => {
       })
   }
 
-  const selected = ref([])
-  const onRowSelected = value => {
-    selected.value = value.map(({id}) => id)
-  }
-  const onAllSelected = () => {
-    const { tableRef } = refs
-    if (selected.value.length === 0) // select all
-      tableRef.selectAllRows()
-    else // select none
-      tableRef.clearSelected()
-  }
-  const onItemSelected = index => {
-    const { tableRef } = refs
-    const { [index]: { id } = {} } = items.value
-    if (selected.value.includes(id))
-      tableRef.unselectRow(index)
-    else
-      tableRef.selectRow(index)
-  }
-
-  const onBulkExport = () => {
-    const _items = selected.value.map(id => {
-      return items.value.find(item => item.id === id)
-    })
-    const csv = useTableColumnsItems(visibleColumns.value, _items)
-    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
-    useDownload(filename, csv, 'text/csv')
-  }
-
   return {
     useSearch,
-    goToItem,
-    goToClone,
+    tableRef,
     onRemove,
-
-    selected,
-    onRowSelected,
-    onAllSelected,
-    onItemSelected,
-
     onBulkExport,
-
+    ...router,
+    ...selected,
     ...toRefs(search)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_router.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_router.js
index fe99d4d38e29..fc3a17f5bbb6 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_router.js
@@ -8,6 +8,7 @@ export const useRouter = $router => {
       .push({ name: 'admin_role', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneAdminRole', params }),
+    goToNew: () => $router.push({ name: 'newAdminRole' })
   }
 }
 

From 21c406d5a82366663060700f54f123d486942898 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Fri, 21 May 2021 09:01:08 -0400
Subject: [PATCH 09/72] refactor billingTiers search

---
 .../root/src/composables/useCsv.js            |   4 +-
 .../_components/BillingTiersList.vue          |  68 --------
 .../Configuration/_config/billingTier.js      |  84 ---------
 .../adminRoles/_components/TheSearch.vue      |   4 +-
 .../adminRoles/_composables/useCollection.js  |  10 +-
 .../views/Configuration/adminRoles/_router.js |   1 -
 .../views/Configuration/billingTiers/_api.js  |  19 +-
 .../billingTiers/_components/TheSearch.vue    | 165 ++++++++++++++++++
 .../_composables/useCollection.js             |  66 +++++++
 .../Configuration/billingTiers/_router.js     |   6 +-
 .../Configuration/billingTiers/_store.js      |  14 +-
 11 files changed, 263 insertions(+), 178 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/BillingTiersList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/billingTier.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/composables/useCsv.js b/html/pfappserver/root/src/composables/useCsv.js
index 729c627e7656..a560ea83b99f 100644
--- a/html/pfappserver/root/src/composables/useCsv.js
+++ b/html/pfappserver/root/src/composables/useCsv.js
@@ -4,7 +4,9 @@ export const useTableColumnsItems = (columns, items) => {
       ? { ...formatters, [column.key]: column.formatter }
       : formatters
   }, {})
-  const header = columns.map(column => column.key)
+  const header = columns
+    .filter(column => !column.locked) // omit `selected` and `buttons`
+    .map(column => column.key)
   let keyMap = {} // build map to sort data same as header
   Object.keys(items[0]).forEach(key => {
     const idx = header.findIndex(column => column === key)
diff --git a/html/pfappserver/root/src/views/Configuration/_components/BillingTiersList.vue b/html/pfappserver/root/src/views/Configuration/_components/BillingTiersList.vue
deleted file mode 100644
index fbaea369d9c1..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/BillingTiersList.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">
-            {{ $t('Billing Tiers') }}
-            <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_billing_engine" />
-          </h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newBillingTier' }">{{ $t('New Billing Tier') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No billing tiers found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Billing Tier?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonHelp from '@/components/pfButtonHelp'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/billingTier'
-
-export default {
-  name: 'billing-tiers-list',
-  components: {
-    pfButtonDelete,
-    pfButtonHelp,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this) // ../_config/billingTier
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_billing_tiers/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneBillingTier', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_billing_tiers/deleteBillingTier', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_config/billingTier.js b/html/pfappserver/root/src/views/Configuration/_config/billingTier.js
deleted file mode 100644
index 51b90030d4bf..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/billingTier.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'name',
-    label: 'Name', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'price',
-    label: 'Price', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'description',
-    text: i18n.t('Description'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'billing_tier', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier, name or description'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/billing_tiers',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'name', op: 'contains', value: null },
-            { field: 'description', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'billing_tiers' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'name', op: 'contains', value: quickCondition },
-              { field: 'description', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
index 4c92dd216510..ac40a79d3c7c 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
@@ -66,7 +66,7 @@
             <base-button-confirm v-if="!item.not_deletable"
               size="sm" variant="outline-danger" class="my-1 mr-1" reverse
               :disabled="isLoading"
-              :confirm="$t('Delete Role?')"
+              :confirm="$t('Delete Admin Role?')"
               @click="onRemove(item.id)"
             >{{ $t('Delete') }}</base-button-confirm>
             <b-button
@@ -133,8 +133,8 @@ const setup = (props, context) => {
   } = toRefs(selected)
 
   const onBulkExport = () => {
-    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
     const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
     useDownload(filename, csv, 'text/csv')
   }
 
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
index 58b822d29cbc..e3b4cfb68a52 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
@@ -56,18 +56,18 @@ export const useSearch = makeSearch('adminRoles', {
     },
     {
       key: 'id',
-      label: 'Role Name', // i18n defer
+      label: 'Identifier', // i18n defer
       required: true,
+      searchable: true,
       sortable: true,
-      visible: true,
-      searchable: true
+      visible: true
     },
     {
       key: 'description',
       label: 'Description', // i18n defer
       sortable: true,
-      visible: true,
-      searchable: true
+      searchable: true,
+      visible: true
     },
     {
       key: 'buttons',
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_router.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_router.js
index fc3a17f5bbb6..f88f5ddd9cdb 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_router.js
@@ -26,7 +26,6 @@ export default [
     path: 'admin_roles',
     name: 'admin_roles',
     component: TheSearch,
-    props: (route) => ({ query: route.query.query }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_api.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_api.js
index 8258878f926d..e7d19016d151 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_api.js
@@ -1,37 +1,42 @@
 import apiCall from '@/utils/api'
 
 export default {
-  billingTiers: params => {
+  list: params => {
     return apiCall.get('config/billing_tiers', { params }).then(response => {
       return response.data
     })
   },
-  billingTiersOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/billing_tiers').then(response => {
       return response.data
     })
   },
-  billingTier: id => {
+  item: id => {
     return apiCall.get(['config', 'billing_tier', id]).then(response => {
       return response.data.item
     })
   },
-  billingTierOptions: id => {
+  itemOptions: id => {
     return apiCall.options(['config', 'billing_tier', id]).then(response => {
       return response.data
     })
   },
-  createBillingTier: data => {
+  create: data => {
     return apiCall.post('config/billing_tiers', data).then(response => {
       return response.data
     })
   },
-  updateBillingTier: data => {
+  update: data => {
     return apiCall.patch(['config', 'billing_tier', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteBillingTier: id => {
+  delete: id => {
     return apiCall.delete(['config', 'billing_tier', id])
+  },
+  search: data => {
+    return apiCall.post('config/billing_tiers/search', data).then(response => {
+      return response.data
+    })
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue
new file mode 100644
index 000000000000..949f71eee80f
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue
@@ -0,0 +1,165 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center mb-3">
+        {{ $t('Billing Tiers') }}
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_billing_engine" />
+      </h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New Billing Tier') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Billing Tier?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = toRefs(selected)
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_billing_tiers/deleteBillingTier', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
index 29f9705e7073..36b18f5d8ca9 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
@@ -1,4 +1,5 @@
 import { computed, toRefs } from '@vue/composition-api'
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import i18n from '@/utils/locale'
 
 export const useItemTitle = (props) => {
@@ -42,3 +43,68 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_billing_tiers/updateBillingTier', form.value)
   }
 }
+
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('billingTiers', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Identifier', // i18n defer
+      required: true,
+      sortable: true,
+      visible: true,
+      searchable: true
+    },
+    {
+      key: 'name',
+      label: 'Name', // i18n defer
+      sortable: true,
+      visible: true,
+      searchable: true
+    },
+    {
+      key: 'description',
+      label: 'Description', // i18n defer
+      sortable: true,
+      visible: true,
+      searchable: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'description',
+      text: i18n.t('Description'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'name',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ([{
+    values: [
+      { field: 'id', op: 'contains', value: null },
+      { field: 'name', op: 'contains', value: null },
+      { field: 'description', op: 'contains', value: null }
+    ]
+  }])
+})
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_router.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_router.js
index 622c53572246..5f06d72bef57 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_router.js
@@ -8,10 +8,11 @@ export const useRouter = $router => {
       .push({ name: 'billing_tier', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneBillingTier', params }),
+    goToNew: () => $router.push({ name: 'newBillingTier' }),
   }
 }
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/BillingTiersList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const beforeEnter = (to, from, next = () => {}) => {
@@ -24,8 +25,7 @@ export default [
   {
     path: 'billing_tiers',
     name: 'billing_tiers',
-    component: TheList,
-    props: (route) => ({ query: route.query.query })
+    component: TheSearch
   },
   {
     path: 'billing_tiers/new',
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_store.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_store.js
index f52692881e26..cf0172b657de 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_store.js
@@ -31,14 +31,14 @@ const actions = {
       sort: 'id',
       fields: ['id', 'description'].join(',')
     }
-    return api.billingTiers(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.billingTierOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -46,7 +46,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.billingTiersOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -60,7 +60,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.billingTier(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -70,7 +70,7 @@ const actions = {
   },
   createBillingTier: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createBillingTier(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -80,7 +80,7 @@ const actions = {
   },
   updateBillingTier: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateBillingTier(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -90,7 +90,7 @@ const actions = {
   },
   deleteBillingTier: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteBillingTier(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {

From 8a1c17037ea717d7ba34c6b9ccd98b79ebccca63 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Fri, 21 May 2021 13:25:21 -0400
Subject: [PATCH 10/72] refactor domains search

---
 .../Configuration/_components/DomainsList.vue |  92 ------
 .../Configuration/_components/DomainsTabs.vue |   6 +-
 .../src/views/Configuration/_config/domain.js |  87 ------
 .../src/views/Configuration/domains/_api.js   |  27 +-
 .../domains/_components/BaseButtonJoin.vue    |  73 +++--
 .../domains/_components/TheForm.vue           |   6 +
 .../domains/_components/TheSearch.vue         | 283 ++++++++++++++++++
 .../domains/_composables/useCollection.js     |  65 ++++
 .../views/Configuration/domains/_router.js    |   3 +-
 .../src/views/Configuration/domains/_store.js |  22 +-
 10 files changed, 436 insertions(+), 228 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/DomainsList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/domain.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/views/Configuration/_components/DomainsList.vue b/html/pfappserver/root/src/views/Configuration/_components/DomainsList.vue
deleted file mode 100644
index 698e8d620143..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/DomainsList.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <div>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <h4 class="mb-0 p-4">
-          {{ $t('Active Directory Domains') }}
-          <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_microsoft_active_directory_ad" />
-        </h4>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newDomain' }">{{ $t('New Domain') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-          <pf-empty-table :is-loading="state.isLoading">{{ $t('No domains found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(ntlm_cache)="item">
-        <icon name="circle" :class="{ 'text-success': item.ntlm_cache === 'enabled', 'text-danger': item.ntlm_cache !== 'enabled' }"
-          v-b-tooltip.hover.left.d300 :title="$t(item.ntlm_cache)"></icon>
-      </template>
-      <template v-slot:cell(joined)="item">
-        <template v-if="item.id in joins">
-          <icon v-if="joins[item.id].status === null" name="circle-notch" class="text-secondary" spin></icon>
-          <icon v-else-if="joins[item.id].status === true" name="circle" class="text-success"
-            v-b-tooltip.hover.left.d300 :title="$t('Test join success.')"></icon>
-          <icon v-else-if="joins[item.id].status === false" name="circle" class="text-danger"
-            v-b-tooltip.hover.left.d300 :title="$t('Test join failed.')"></icon>
-          <span v-if="joins[item.id].message" v-t="joins[item.id].message" class="ml-1"></span>
-        </template>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Domain?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-          <button-join size="sm" :id="item.id" />
-        </span>
-      </template>
-    </pf-config-list>
-  </div>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonHelp from '@/components/pfButtonHelp'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { ButtonJoin } from '@/views/Configuration/domains/_components/'
-import { config } from '../_config/domain'
-
-export default {
-  name: 'domains-list',
-  components: {
-    pfButtonDelete,
-    pfButtonHelp,
-    pfConfigList,
-    pfEmptyTable,
-    ButtonJoin
-  },
-  props: {
-    autoJoinDomain: { // from DomainView, through router
-      type: Object,
-      default: null
-    }
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_domains/isLoading']
-    },
-    joins () {
-      return this.$store.getters['$_domains/joins']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneDomain', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_domains/deleteDomain', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/DomainsTabs.vue b/html/pfappserver/root/src/views/Configuration/_components/DomainsTabs.vue
index 9c7a8bc6113b..ec4df684218f 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/DomainsTabs.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/DomainsTabs.vue
@@ -5,7 +5,7 @@
         </b-card-header>
         <b-tabs ref="tabs" v-model="tabIndex" card>
             <b-tab :title="$t('Active Directory Domains')" @click="changeTab('domains')" no-body>
-                <domains-list :autoJoinDomain="autoJoinDomain" />
+                <domains-search :autoJoinDomain="autoJoinDomain" />
             </b-tab>
             <b-tab :title="$t('Realms')" @click="changeTab('realms')" no-body>
                 <realms-list />
@@ -15,13 +15,13 @@
 </template>
 
 <script>
-import DomainsList from './DomainsList'
+import DomainsSearch from '../domains/_components/TheSearch'
 import RealmsList from './RealmsList'
 
 export default {
   name: 'domains-tabs',
   components: {
-    DomainsList,
+    DomainsSearch,
     RealmsList
   },
   props: {
diff --git a/html/pfappserver/root/src/views/Configuration/_config/domain.js b/html/pfappserver/root/src/views/Configuration/_config/domain.js
deleted file mode 100644
index 59efc74d83f6..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/domain.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'workgroup',
-    label: 'Workgroup', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'ntlm_cache',
-    label: 'NTLM Cache', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'joined',
-    label: 'Test Join', // i18n defer
-    locked: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'workgroup',
-    text: i18n.t('Workgroup'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'domain', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by name or workgroup'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/domains',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'workgroup', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'domains' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'workgroup', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_api.js b/html/pfappserver/root/src/views/Configuration/domains/_api.js
index ae43bb2e7c7d..6cf47f02bc25 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/domains/_api.js
@@ -1,59 +1,64 @@
 import apiCall from '@/utils/api'
 
 export default {
-  domains: params => {
+  list: params => {
     return apiCall.get('config/domains', { params }).then(response => {
       return response.data
     })
   },
-  domainsOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/domains').then(response => {
       return response.data
     })
   },
-  domain: id => {
+  item: id => {
     return apiCall.get(['config', 'domain', id]).then(response => {
       return response.data.item
     })
   },
-  domainOptions: id => {
+  itemOptions: id => {
     return apiCall.options(['config', 'domain', id]).then(response => {
       return response.data
     })
   },
-  createDomain: data => {
+  create: data => {
     return apiCall.post('config/domains', data).then(response => {
       return response.data
     })
   },
-  updateDomain: data => {
+  update: data => {
     return apiCall.patch(['config', 'domain', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteDomain: id => {
+  delete: id => {
     return apiCall.delete(['config', 'domain', id])
   },
-  testDomain: id => {
+  test: id => {
     return apiCall.getQuiet(['config', 'domain', id, 'test_join']).then(response => {
       return response.data
     }).catch(err => {
       throw err
     })
   },
-  joinDomain: data => {
+  join: data => {
     return apiCall.post(['config', 'domain', data.id, 'join'], data).then(response => {
       return response.data
     })
   },
-  rejoinDomain: data => {
+  rejoin: data => {
     return apiCall.post(['config', 'domain', data.id, 'rejoin'], data).then(response => {
       return response.data
     })
   },
-  unjoinDomain: data => {
+  unjoin: data => {
     return apiCall.post(['config', 'domain', data.id, 'unjoin'], data).then(response => {
       return response.data
     })
+  },
+  search: data => {
+    return apiCall.post('config/domains/search', data).then(response => {
+      return response.data
+    })
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_components/BaseButtonJoin.vue b/html/pfappserver/root/src/views/Configuration/domains/_components/BaseButtonJoin.vue
index ca4a4502c70d..1bae89a4b55c 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_components/BaseButtonJoin.vue
+++ b/html/pfappserver/root/src/views/Configuration/domains/_components/BaseButtonJoin.vue
@@ -1,11 +1,32 @@
 <template>
-  <b-button-group>
-    <b-button v-if="canJoin" :size="size" variant="outline-warning" class="mr-1" @click.stop.prevent="showJoin">{{ $t('Join') }}</b-button>
-    <b-button v-if="canRejoin" :size="size" variant="outline-warning" class="mr-1" @click.stop.prevent="showJoin">{{ $t('Rejoin') }}</b-button>
-    <b-button v-if="canUnjoin" :size="size" variant="outline-warning" class="mr-1" @click.stop.prevent="showUnjoin">{{ $t('Unjoin') }}</b-button>
-
+  <b-dropdown v-bind="$attrs">
+    <template #button-content>
+      <template v-if="join.status === null">
+        <icon name="circle-notch" class="mr-1" spin></icon> {{ $t('Joining...') }}
+      </template>
+      <template v-else-if="join.status === true">
+        <icon name="circle" class="text-success mr-1"
+          v-b-tooltip.hover.left.d300 :title="$t('Join success')"></icon> {{ $t('Join success') }}
+      </template>
+      <template v-else-if="join.status === false">
+        <icon name="circle" class="text-danger mr-1"
+          v-b-tooltip.hover.left.d300 :title="$t('Join failed')"></icon> {{ $t('Join failed') }}
+      </template>
+    </template>
+    <b-dropdown-text v-if="join.message"
+      class="px-3" :class="{
+        'text-danger': join.status === false,
+        'text-success': join.status === true
+      }" v-t="join.message" />
+    <b-dropdown-divider v-if="join.message" />
+    <b-dropdown-item v-if="canJoin"
+      @click="showJoin">{{ $t('Join') }}</b-dropdown-item>
+    <b-dropdown-item v-if="canRejoin"
+      @click="showJoin">{{ $t('Rejoin') }}</b-dropdown-item>
+    <b-dropdown-item v-if="canUnjoin"
+      @click="showUnjoin">{{ $t('Unjoin') }}</b-dropdown-item>
     <b-modal v-model="showJoinModal"
-      size="lg" centered id="joinModal">
+      size="lg" lazy centered id="joinModal">
       <template v-slot:modal-title>
         <h4 class="mb-0" v-html="$t('Join {id} domain', { id })"></h4>
         <b-form-text v-t="'Please enter administrative credentials to connect to the domain.'" class="mb-0"></b-form-text>
@@ -24,7 +45,7 @@
               :column-label="$t('Password')"
             />
           </base-form>
-        </b-form>        
+        </b-form>
       </b-form-group>
       <template v-slot:modal-footer>
         <b-button variant="secondary" class="mr-1" @click="showJoinModal=false">{{ $t('Cancel') }}</b-button>
@@ -33,7 +54,7 @@
     </b-modal>
 
     <b-modal v-model="showUnjoinModal"
-      size="lg" centered id="unjoinModal">
+      size="lg" lazy centered id="unjoinModal">
       <template v-slot:modal-title>
         <h4 class="mb-0" v-html="$t('Unjoin {id} domain', { id })"></h4>
         <b-form-text v-t="'Please enter administrative credentials to disconnect from the domain.'" class="mb-0"></b-form-text>
@@ -52,7 +73,7 @@
               :column-label="$t('Password')"
             />
           </base-form>
-        </b-form>        
+        </b-form>
       </b-form-group>
       <template v-slot:modal-footer>
         <b-button variant="secondary" class="mr-1" @click="showUnjoinModal=false">{{ $t('Cancel') }}</b-button>
@@ -60,8 +81,8 @@
       </template>
     </b-modal>
 
-    <b-modal v-model="showWaitModal" 
-      size="lg" centered id="waitModal"
+    <b-modal v-model="showWaitModal"
+      size="lg" lazy centered id="waitModal"
       hide-header-close no-close-on-backdrop no-close-on-esc>
       <template v-slot:modal-title>
         <h4 class="mb-0" v-html="$t('Joining {id} domain', { id })"></h4>
@@ -83,7 +104,7 @@
       </template>
     </b-modal>
 
-    <b-modal v-model="showResultModal" size="lg" centered id="resultModal"
+    <b-modal v-model="showResultModal" size="lg" lazy centered id="resultModal"
       hide-header-close no-close-on-backdrop no-close-on-esc>
       <template v-slot:modal-title>
         <h4 class="mb-0" v-html="$t('Join {id} domain', { id })"></h4>
@@ -109,8 +130,8 @@
         <b-button v-if="join.status !== true"
           variant="primary" @click="showJoinModal = true">{{ $t('Try again') }}</b-button>
       </template>
-    </b-modal>    
-  </b-button-group>
+    </b-modal>
+  </b-dropdown>
 </template>
 <script>
 import {
@@ -131,11 +152,12 @@ export const props = {
   },
   size: {
     type: String
+  },
+  autoJoin: {
+    type: Boolean
   }
 }
 
-import { computed, ref, toRefs, watch } from '@vue/composition-api'
-import { useDebouncedWatchHandler } from '@/composables/useDebounce'
 import i18n from '@/utils/locale'
 import yup from '@/utils/yup'
 
@@ -151,24 +173,27 @@ const defaults = {
   password: null
 }
 
+import { computed, ref, toRefs, watch } from '@vue/composition-api'
+import { useDebouncedWatchHandler } from '@/composables/useDebounce'
+
 export const setup = (props, context) => {
 
-  const { id } = toRefs(props)
+  const { id, autoJoin } = toRefs(props)
   const { root: { $store } = {} } = context
 
   const form = ref({})
   const schema = computed(() => schemaFn(props))
 
   const domain = ref({})
-  const join = ref({})
-  watch(id, () => { 
+  const join = ref({ status: null })
+  watch(id, () => {
     form.value = { ...defaults }
     $store.dispatch('$_domains/getDomain', id.value)
       .then((response) => domain.value = response)
     $store.dispatch('$_domains/testDomain', id.value)
       .then((response) => join.value = response)
   }, { immediate: true })
-    
+
   const isLoading = computed(() => $store.getters['$_domains/isLoading'])
 
   const showWaitModal = ref(false)
@@ -183,6 +208,8 @@ export const setup = (props, context) => {
   const showJoin = () => {
     showJoinModal.value = true
   }
+  if (autoJoin.value)
+    showJoin()
   const isJoinValid = useDebouncedWatchHandler([form, showJoinModal], () => {
     const { $el } = joinFormRef.value || {}
     return (!$el || $el.querySelectorAll('.is-invalid').length === 0)
@@ -199,7 +226,7 @@ export const setup = (props, context) => {
     promise.finally(() => {
       showWaitModal.value = false
       showResultModal.value = true
-    })    
+    })
   }
 
   const canRejoin = computed(() => {
@@ -229,7 +256,7 @@ export const setup = (props, context) => {
       .finally(() => {
         showWaitModal.value = false
         showResultModal.value = true
-      })    
+      })
   }
 
   const doTryAgain = () => {
@@ -256,7 +283,7 @@ export const setup = (props, context) => {
     doJoin,
 
     canRejoin,
- 
+
     canUnjoin,
     unjoinFormRef,
     showUnjoin,
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/domains/_components/TheForm.vue
index 1308eeb63d99..cc9679896d65 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/domains/_components/TheForm.vue
@@ -5,6 +5,10 @@
     :schema="schema"
     :isLoading="isLoading"
   >
+    <base-button-join v-if="!isNew && !isClone"
+      :id="id"
+      size="sm" variant="outline-primary" class="mx-3 mb-3" toggle-class="text-wrap"
+    />
     <b-tabs>
       <base-form-tab :title="$i18n.t('Settings')" active>
 
@@ -119,6 +123,7 @@ import {
   BaseForm,
   BaseFormTab
 } from '@/components/new/'
+import BaseButtonJoin from './BaseButtonJoin'
 import schemaFn from '../schema'
 import {
   FormGroupIdentifier,
@@ -142,6 +147,7 @@ import {
 } from './'
 
 const components = {
+  BaseButtonJoin,
   BaseForm,
   BaseFormTab,
 
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
new file mode 100644
index 000000000000..3ef494a6b185
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
@@ -0,0 +1,283 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center">
+        {{ $t('Active Directory Domains') }}
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_microsoft_active_directory_ad" />
+      </h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New Domain') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(ntlm_cache)="{ item }">
+          <icon name="circle" :class="{ 'text-success': item.ntlm_cache === 'enabled', 'text-danger': item.ntlm_cache !== 'enabled' }"
+            v-b-tooltip.hover.left.d300 :title="$t(item.ntlm_cache)"></icon>
+        </template>
+        <template #cell(joined)="{ item }">
+          <base-button-join
+            :id="item.id"
+            size="sm" variant="outline-light" toggle-class="text-wrap text-dark"
+            :auto-join="autoJoinDomain && autoJoinDomain.id === item.id" />
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Domain?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import BaseButtonJoin from './BaseButtonJoin'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonJoin,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+const props = {
+  autoJoinDomain: { // from DomainView, through router
+    type: Object,
+    default: null
+  }
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const { root: { $router, $store } = {} } = context
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = toRefs(selected)
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteDomain', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  props,
+  components,
+  setup
+}
+</script>
+<!--
+
+
+
+
+<template>
+  <div>
+    <pf-config-list
+      ref="pfConfigList"
+      :config="config"
+    >
+      <template v-slot:pageHeader>
+        <h4 class="mb-0 p-4">
+          {{ $t('Active Directory Domains') }}
+          <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_microsoft_active_directory_ad" />
+        </h4>
+      </template>
+      <template v-slot:buttonAdd>
+        <b-button variant="outline-primary" :to="{ name: 'newDomain' }">{{ $t('New Domain') }}</b-button>
+      </template>
+      <template v-slot:emptySearch="state">
+          <pf-empty-table :is-loading="state.isLoading">{{ $t('No domains found') }}</pf-empty-table>
+      </template>
+      <template v-slot:cell(ntlm_cache)="item">
+        <icon name="circle" :class="{ 'text-success': item.ntlm_cache === 'enabled', 'text-danger': item.ntlm_cache !== 'enabled' }"
+          v-b-tooltip.hover.left.d300 :title="$t(item.ntlm_cache)"></icon>
+      </template>
+      <template v-slot:cell(joined)="item">
+        <template v-if="item.id in joins">
+          <icon v-if="joins[item.id].status === null" name="circle-notch" class="text-secondary" spin></icon>
+          <icon v-else-if="joins[item.id].status === true" name="circle" class="text-success"
+            v-b-tooltip.hover.left.d300 :title="$t('Test join success.')"></icon>
+          <icon v-else-if="joins[item.id].status === false" name="circle" class="text-danger"
+            v-b-tooltip.hover.left.d300 :title="$t('Test join failed.')"></icon>
+          <span v-if="joins[item.id].message" v-t="joins[item.id].message" class="ml-1"></span>
+        </template>
+      </template>
+      <template v-slot:cell(buttons)="item">
+        <span class="float-right text-nowrap">
+          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Domain?')" @on-delete="remove(item)" reverse/>
+          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
+          <button-join size="sm" :id="item.id" />
+        </span>
+      </template>
+    </pf-config-list>
+  </div>
+</template>
+
+<script>
+import pfButtonDelete from '@/components/pfButtonDelete'
+import pfButtonHelp from '@/components/pfButtonHelp'
+import pfConfigList from '@/components/pfConfigList'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import { ButtonJoin } from '@/views/Configuration/domains/_components/'
+import { config } from '../_config/domain'
+
+export default {
+  name: 'domains-list',
+  components: {
+    pfButtonDelete,
+    pfButtonHelp,
+    pfConfigList,
+    pfEmptyTable,
+    ButtonJoin
+  },
+  props: {
+    autoJoinDomain: { // from DomainView, through router
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      config: config(this)
+    }
+  },
+  computed: {
+    isLoading () {
+      return this.$store.getters['$_domains/isLoading']
+    },
+    joins () {
+      return this.$store.getters['$_domains/joins']
+    }
+  },
+  methods: {
+    clone (item) {
+      this.$router.push({ name: 'cloneDomain', params: { id: item.id } })
+    },
+    remove (item) {
+      this.$store.dispatch('$_domains/deleteDomain', item.id).then(() => {
+        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
+        refreshList() // soft reload
+      })
+    }
+  }
+}
+</script>
+-->
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
index 35a12d7be712..cfe1196c8a18 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
@@ -1,4 +1,5 @@
 import { computed, toRefs } from '@vue/composition-api'
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import i18n from '@/utils/locale'
 
 export const useItemTitle = (props) => {
@@ -35,3 +36,67 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_domains/updateDomain', form.value),
   }
 }
+
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('domains', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'workgroup',
+      label: 'Workgroup', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'ntlm_cache',
+      label: 'NTLM Cache', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'joined',
+      label: 'Domain Join', // i18n defer
+      locked: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'workgroup',
+      text: i18n.t('Workgroup'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ([{
+    values: [
+      { field: 'id', op: 'contains', value: null },
+      { field: 'workgroup', op: 'contains', value: null }
+    ]
+  }])
+})
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_router.js b/html/pfappserver/root/src/views/Configuration/domains/_router.js
index e8d041797eda..764b55a8ef3d 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/domains/_router.js
@@ -14,6 +14,7 @@ export const useRouter = $router => {
       .push({ name: 'domain', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneDomain', params }),
+    goToNew: () => $router.push({ name: 'newDomain' })
   }
 }
 
@@ -33,7 +34,7 @@ export default [
     path: 'domains',
     name: 'domains',
     component: TheTabs,
-    props: (route) => ({ tab: 'domains', autoJoinDomain: route.params.autoJoinDomain, query: route.query.query }),
+    props: (route) => ({ tab: 'domains', autoJoinDomain: route.params.autoJoinDomain }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_store.js b/html/pfappserver/root/src/views/Configuration/domains/_store.js
index a03587057780..19e037716d0a 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/domains/_store.js
@@ -34,14 +34,14 @@ const actions = {
       sort: 'id',
       fields: ['id', 'workgroup', 'ntlm_cache'].join(',')
     }
-    return api.domains(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.domainOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -49,7 +49,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.domainsOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -62,7 +62,7 @@ const actions = {
     if (state.cache[id])
       return Promise.resolve(state.cache[id])
     commit('ITEM_REQUEST')
-    return api.domain(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return state.cache[id]
     }).catch((err) => {
@@ -72,7 +72,7 @@ const actions = {
   },
   createDomain: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createDomain(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -82,7 +82,7 @@ const actions = {
   },
   updateDomain: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateDomain(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -92,7 +92,7 @@ const actions = {
   },
   deleteDomain: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteDomain(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {
@@ -104,7 +104,7 @@ const actions = {
     if (id in state.joins)
       return Promise.resolve(state.joins[id])
     commit('TEST_REQUEST', id)
-    return api.testDomain(id).then(response => {
+    return api.test(id).then(response => {
       commit('TEST_SUCCESS', { id, response })
       return state.joins[id]
     }).catch(error => {
@@ -114,7 +114,7 @@ const actions = {
   },
   joinDomain: ({ state, commit }, data) => {
     commit('JOIN_REQUEST', data.id)
-    return api.joinDomain(data).then(response => {
+    return api.join(data).then(response => {
       return store.dispatch('pfqueue/pollTaskStatus', response.task_id).then(response => {
         commit('JOIN_SUCCESS', { id: data.id, response })
         return state.joins[data.id]
@@ -126,7 +126,7 @@ const actions = {
   },
   rejoinDomain: ({ state, commit }, data) => {
     commit('JOIN_REQUEST', data.id)
-    return api.rejoinDomain(data).then(response => {
+    return api.rejoin(data).then(response => {
       return store.dispatch('pfqueue/pollTaskStatus', response.task_id).then(response => {
         commit('JOIN_SUCCESS', { id: data.id, response })
         return state.joins[data.id]
@@ -138,7 +138,7 @@ const actions = {
   },
   unjoinDomain: ({ state, commit }, data) => {
     commit('UNJOIN_REQUEST', data.id)
-    return api.unjoinDomain(data).then(response => {
+    return api.unjoin(data).then(response => {
       return store.dispatch('pfqueue/pollTaskStatus', response.task_id).then(response => {
         commit('UNJOIN_SUCCESS', { id: data.id, response })
         return state.joins[data.id]

From e7303eadd485d7f1d5f0bf9f124613ebcd86d5c2 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 2 Jun 2021 08:53:01 -0400
Subject: [PATCH 11/72] refactor fingerbank search

---
 .../root/src/components/new/BaseSearch.vue    |   4 +-
 .../FingerbankCombinationsList.vue            |  78 --
 .../_components/FingerbankDevicesList.vue     | 155 ----
 .../FingerbankDhcpFingerprintsList.vue        |  94 --
 .../_components/FingerbankDhcpVendorsList.vue |  94 --
 .../FingerbankDhcpv6EnterprisesList.vue       |  94 --
 .../FingerbankDhcpv6FingerprintsList.vue      |  94 --
 .../_components/FingerbankMacVendorsList.vue  |  95 --
 .../_components/FingerbankTabs.vue            |  67 +-
 .../_components/FingerbankUserAgentsList.vue  |  71 --
 .../_config/fingerbank/combination.js         |  88 --
 .../_config/fingerbank/device.js              | 102 ---
 .../_config/fingerbank/dhcpFingerprint.js     |  85 --
 .../_config/fingerbank/dhcpV6Enterprise.js    |  93 --
 .../_config/fingerbank/dhcpV6Fingerprint.js   |  85 --
 .../_config/fingerbank/dhcpVendor.js          |  85 --
 .../_config/fingerbank/macVendor.js           |  92 --
 .../_config/fingerbank/userAgent.js           |  82 --
 .../Configuration/_store/factory/search.js    |  97 +-
 .../adminRoles/_composables/useCollection.js  |   8 +-
 .../_composables/useCollection.js             |   8 +-
 .../domains/_components/TheSearch.vue         |  98 ---
 .../domains/_composables/useCollection.js     |  11 +-
 .../views/Configuration/fingerbank/_api.js    |  20 -
 .../views/Configuration/fingerbank/_store.js  | 831 +++---------------
 .../fingerbank/combinations/_api.js           |  12 +-
 .../combinations/_components/TheSearch.vue    | 167 ++++
 .../_composables/useCollection.js             |  71 ++
 .../fingerbank/combinations/_router.js        |   1 +
 .../fingerbank/combinations/_store.js         | 105 +++
 .../Configuration/fingerbank/devices/_api.js  |  24 +-
 .../devices/_components/BreadCrumb.vue        |  59 ++
 .../devices/_components/TheSearch.vue         | 233 +++++
 .../devices/_composables/useCollection.js     |  76 ++
 .../fingerbank/devices/_router.js             |  23 +-
 .../fingerbank/devices/_store.js              | 102 +++
 .../fingerbank/dhcpFingerprints/_api.js       |  24 +-
 .../_components/TheSearch.vue                 | 200 +++++
 .../_composables/useCollection.js             |  64 ++
 .../fingerbank/dhcpFingerprints/_router.js    |  26 +-
 .../fingerbank/dhcpFingerprints/_store.js     | 102 +++
 .../fingerbank/dhcpVendors/_api.js            |  24 +-
 .../dhcpVendors/_components/TheSearch.vue     | 200 +++++
 .../dhcpVendors/_composables/useCollection.js |  64 ++
 .../fingerbank/dhcpVendors/_router.js         |  26 +-
 .../fingerbank/dhcpVendors/_store.js          | 102 +++
 .../fingerbank/dhcpv6Enterprises/_api.js      |  24 +-
 .../_components/TheSearch.vue                 | 200 +++++
 .../_composables/useCollection.js             |  72 ++
 .../fingerbank/dhcpv6Enterprises/_router.js   |  20 +-
 .../fingerbank/dhcpv6Enterprises/_store.js    | 102 +++
 .../fingerbank/dhcpv6Fingerprints/_api.js     |  24 +-
 .../_components/TheSearch.vue                 | 200 +++++
 .../_composables/useCollection.js             |  64 ++
 .../fingerbank/dhcpv6Fingerprints/_router.js  |  26 +-
 .../fingerbank/dhcpv6Fingerprints/_store.js   | 102 +++
 .../fingerbank/generalSettings/_store.js      | 107 +++
 .../fingerbank/macVendors/_api.js             |  24 +-
 .../macVendors/_components/TheSearch.vue      | 200 +++++
 .../macVendors/_composables/useCollection.js  |  76 ++
 .../fingerbank/macVendors/_router.js          |  20 +-
 .../fingerbank/macVendors/_store.js           | 102 +++
 .../fingerbank/userAgents/_api.js             |  24 +-
 .../userAgents/_components/TheSearch.vue      | 200 +++++
 .../userAgents/_composables/useCollection.js  |  64 ++
 .../fingerbank/userAgents/_router.js          |  26 +-
 .../fingerbank/userAgents/_store.js           | 102 +++
 .../tenants/_composables/useStore.js          |  23 +
 68 files changed, 3580 insertions(+), 2558 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/FingerbankCombinationsList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/FingerbankDevicesList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/FingerbankDhcpFingerprintsList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/FingerbankDhcpVendorsList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/FingerbankDhcpv6EnterprisesList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/FingerbankDhcpv6FingerprintsList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/FingerbankMacVendorsList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/FingerbankUserAgentsList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/fingerbank/combination.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/fingerbank/device.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/fingerbank/dhcpFingerprint.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/fingerbank/dhcpV6Enterprise.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/fingerbank/dhcpV6Fingerprint.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/fingerbank/dhcpVendor.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/fingerbank/macVendor.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/fingerbank/userAgent.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_store.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/BreadCrumb.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/devices/_store.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_store.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_store.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_store.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_store.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_store.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_store.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_store.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/tenants/_composables/useStore.js

diff --git a/html/pfappserver/root/src/components/new/BaseSearch.vue b/html/pfappserver/root/src/components/new/BaseSearch.vue
index 2312c1e76cb4..8535b72dc889 100644
--- a/html/pfappserver/root/src/components/new/BaseSearch.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearch.vue
@@ -134,7 +134,7 @@ const setup = (props) => {
 
   const advancedMode = ref(false)
   const conditionBasic = ref(null)
-  const conditionAdvanced = ref(defaultCondition()) // default
+  const conditionAdvanced = ref(defaultCondition().values) // default
 
   onMounted(() => {
     Promise.resolve(saveSearch.value).then(value => {
@@ -186,7 +186,7 @@ const setup = (props) => {
 
   const onSearchReset = () => {
     conditionBasic.value = null
-    conditionAdvanced.value = defaultCondition()
+    conditionAdvanced.value = defaultCondition().values
     setPage(1)
     Promise.resolve(saveSearch.value).then(_saveSearch => {
       const { conditionAdvanced, conditionBasic, ...rest } = _saveSearch || {}
diff --git a/html/pfappserver/root/src/views/Configuration/_components/FingerbankCombinationsList.vue b/html/pfappserver/root/src/views/Configuration/_components/FingerbankCombinationsList.vue
deleted file mode 100644
index 19871986c9fd..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/FingerbankCombinationsList.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <b-row class="align-items-center px-0" no-gutters>
-            <b-col cols="auto" class="mr-auto">
-              <h4 class="d-inline mb-0" v-t="'Combinations'"></h4>
-            </b-col>
-          </b-row>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newFingerbankCombination' }">{{ $t('New Combination') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No local combinations found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Combination?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-      <template v-slot:cell(score)="item">
-        <pf-fingerbank-score :score="item.score"></pf-fingerbank-score>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import pfFingerbankScore from '@/components/pfFingerbankScore'
-import { config } from '../_config/fingerbank/combination'
-
-export default {
-  name: 'fingerbank-combinations-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable,
-    pfFingerbankScore
-  },
-  data () {
-    return {
-      data: [],
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_fingerbank/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneFingerbankCombination', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_fingerbank/deleteCombination', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  },
-  created () {
-    this.$store.dispatch('$_fingerbank/combinations').then(data => {
-      this.data = data
-    })
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/FingerbankDevicesList.vue b/html/pfappserver/root/src/views/Configuration/_components/FingerbankDevicesList.vue
deleted file mode 100644
index 6d36fddcfbba..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/FingerbankDevicesList.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <b-row class="align-items-center px-0" no-gutters>
-            <b-col cols="auto" class="mr-auto">
-              <h4 class="d-inline mb-0" v-t="'Devices'"></h4>
-            </b-col>
-            <b-col cols="auto" align="right" class="flex-grow-0">
-              <b-button-group>
-                <b-button v-t="'All'" :variant="(localScope === 'all') ? 'primary' : 'outline-secondary'" @click="changeScope('all')"></b-button>
-                <b-button v-t="'Local'" :variant="(localScope === 'local') ? 'primary' : 'outline-secondary'" @click="changeScope('local')"></b-button>
-                <b-button v-t="'Upstream'" :variant="(localScope === 'upstream') ? 'primary' : 'outline-secondary'" @click="changeScope('upstream')"></b-button>
-              </b-button-group>
-            </b-col>
-          </b-row>
-          <b-row v-if="parentTree.length > 0"
-            class="mt-3">
-            <b-col cols="auto">
-              <b-button variant="link" class="px-0 mr-2 text-secondary" :to="{ name: 'fingerbankDevices', params: { localScope: localScope } }">
-                <icon name="times" variant="primary"></icon>
-              </b-button>
-              <b-button v-for="(parent, index) in parentTreeReverse" :key="parent.id" variant="link" class="px-0 mr-2 text-primary" :disabled="index === parentTree.length - 1" :to="{ name: 'fingerbankDevicesByParentId', params: { parentId: parent.id, localScope: localScope } }">
-                <icon v-if="index > 0" name="caret-right" variant="text-secondary" class="mr-1"></icon>
-                {{ parent.name }}
-              </b-button>
-            </b-col>
-          </b-row>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd v-if="localScope === 'local'">
-        <b-button variant="outline-primary" :to="{ name: 'newFingerbankDevice', params: { localScope: 'local' } }">{{ $t('New Device') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No devices found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(id)="item">
-        <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="setParentId(item.id)">
-          <span class="text-nowrap align-items-center ml-2">
-            {{ item.id }} <icon name="plus-circle" class="ml-2"></icon>
-          </span>
-        </b-button>
-      </template>
-      <template v-slot:cell(approved)="item">
-        <icon name="circle" :class="{ 'text-success': ~~item.approved === 1, 'text-danger': ~~item.approved === 0 }"></icon>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable && scope === 'local'" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Device?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/fingerbank/device'
-
-export default {
-  name: 'fingerbank-devices-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  props: {
-    parentId: {
-      type: [String, Number],
-      default: null
-    },
-    scope: {
-      type: String,
-      default: 'all'
-    }
-  },
-  data () {
-    return {
-      config: config(this),
-      parentTree: [],
-      localScope: this.scope
-    }
-  },
-  computed: {
-    parentTreeReverse () {
-      // parentTree.reverse() issue within template, mutates Array immediately and causes infinite-loop w/ reactivity updates.
-      return Array.prototype.slice.call(this.parentTree).reverse()
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneFingerbankDevice', params: { scope: 'local', id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_fingerbank/deleteDevice', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    },
-    setParentId (id) {
-      this.$router.push({ name: 'fingerbankDevicesByParentId', params: { parentId: id } })
-    },
-    clearParentId () {
-      this.$router.push({ name: 'fingerbankDevices' })
-    },
-    buildParentTree (parentId = 0, index = 0) {
-      if (index === 0) this.$set(this, 'parentTree', [])
-      if (~~parentId > 0) {
-        this.$store.dispatch('$_fingerbank/getDevice', parentId).then(data => {
-          this.$set(this.parentTree, index, data)
-          if (data.parent_id) this.buildParentTree(data.parent_id, ++index)
-        })
-      }
-    },
-    resetSearch () {
-      const { $refs: { pfConfigList: { resetSearch = () => {} } = {} } = {} } = this
-      resetSearch()
-    },
-    changeScope (scope) {
-      this.localScope = scope
-      this.resetSearch() // reset search
-    }
-  },
-  watch: {
-    scope: { // reset search when `scope` changes
-      handler: function (a, b) {
-        if (a !== b) {
-          this.localScope = a
-          this.config = config(this) // reset config
-          this.resetSearch() // reset search
-        }
-        this.buildParentTree() // clear parentTree
-      }
-    },
-    parentId: { // reset search when `parentId` changes
-      handler: function (a, b) {
-        if (a !== b) {
-          this.config = config(this) // reset config
-        }
-        this.buildParentTree(a) // build parentTree
-      }
-    }
-  },
-  mounted () {
-    this.buildParentTree(this.parentId) // build parentTree
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/FingerbankDhcpFingerprintsList.vue b/html/pfappserver/root/src/views/Configuration/_components/FingerbankDhcpFingerprintsList.vue
deleted file mode 100644
index 1bf155b5c075..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/FingerbankDhcpFingerprintsList.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <b-row class="align-items-center px-0" no-gutters>
-            <b-col cols="auto" class="mr-auto">
-              <h4 class="d-inline mb-0" v-t="'DHCP Fingerprints'"></h4>
-            </b-col>
-            <b-col cols="auto" align="right" class="flex-grow-0">
-              <b-button-group>
-                <b-button v-t="'All'" :variant="(localScope === 'all') ? 'primary' : 'outline-secondary'" @click="changeScope('all')"></b-button>
-                <b-button v-t="'Local'" :variant="(localScope === 'local') ? 'primary' : 'outline-secondary'" @click="changeScope('local')"></b-button>
-                <b-button v-t="'Upstream'" :variant="(localScope === 'upstream') ? 'primary' : 'outline-secondary'" @click="changeScope('upstream')"></b-button>
-              </b-button-group>
-            </b-col>
-          </b-row>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd v-if="localScope === 'local'">
-        <b-button variant="outline-primary" :to="{ name: 'newFingerbankDhcpFingerprint', params: { localScope: 'local' } }">{{ $t('New DHCP Fingerprint') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No {localScope} DHCP fingerprints found', { localScope: ((localScope !== 'all') ? localScope : '') }) }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable && localScope === 'local'" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete DHCP Fingerprint?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/fingerbank/dhcpFingerprint'
-
-export default {
-  name: 'fingerbank-dhcp-fingerprints-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  props: {
-    scope: {
-      type: String,
-      default: 'all'
-    }
-  },
-  data () {
-    return {
-      data: [],
-      config: config(this),
-      localScope: this.scope
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneFingerbankDhcpFingerprint', params: { scope: 'local', id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_fingerbank/deleteDhcpFingerprint', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    },
-    changeScope (scope) {
-      this.localScope = scope
-      this.config = config(this) // reset config
-    }
-  },
-  created () {
-    this.$store.dispatch('$_fingerbank/dhcpFingerprints').then(data => {
-      this.data = data
-    })
-  },
-  watch: {
-    scope: {
-      handler: function (a) {
-        this.localScope = a
-        this.config = config(this) // reset config
-      }
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/FingerbankDhcpVendorsList.vue b/html/pfappserver/root/src/views/Configuration/_components/FingerbankDhcpVendorsList.vue
deleted file mode 100644
index e444c5a97f7f..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/FingerbankDhcpVendorsList.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <b-row class="align-items-center px-0" no-gutters>
-            <b-col cols="auto" class="mr-auto">
-              <h4 class="d-inline mb-0" v-t="'DHCP Vendors'"></h4>
-            </b-col>
-            <b-col cols="auto" align="right" class="flex-grow-0">
-              <b-button-group>
-                <b-button v-t="'All'" :variant="(localScope === 'all') ? 'primary' : 'outline-secondary'" @click="changeScope('all')"></b-button>
-                <b-button v-t="'Local'" :variant="(localScope === 'local') ? 'primary' : 'outline-secondary'" @click="changeScope('local')"></b-button>
-                <b-button v-t="'Upstream'" :variant="(localScope === 'upstream') ? 'primary' : 'outline-secondary'" @click="changeScope('upstream')"></b-button>
-              </b-button-group>
-            </b-col>
-          </b-row>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd v-if="localScope === 'local'">
-        <b-button variant="outline-primary" :to="{ name: 'newFingerbankDhcpVendor', params: { localScope: 'local' } }">{{ $t('New DHCP Vendor') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No DHCP vendors found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable && localScope === 'local'" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete DHCP Vendor?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/fingerbank/dhcpVendor'
-
-export default {
-  name: 'fingerbank-dhcp-vendors-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  props: {
-    scope: {
-      type: String,
-      default: 'all'
-    }
-  },
-  data () {
-    return {
-      data: [],
-      config: config(this),
-      localScope: this.scope
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneFingerbankDhcpVendor', params: { scope: 'local', id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_fingerbank/deleteDhcpVendor', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    },
-    changeScope (scope) {
-        this.localScope = scope
-        this.config = config(this) // reset config
-    }
-  },
-  created () {
-    this.$store.dispatch('$_fingerbank/dhcpVendors').then(data => {
-      this.data = data
-    })
-  },
-  watch: {
-    scope: {
-      handler: function (a) {
-        this.localScope = a
-        this.config = config(this) // reset config
-      }
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/FingerbankDhcpv6EnterprisesList.vue b/html/pfappserver/root/src/views/Configuration/_components/FingerbankDhcpv6EnterprisesList.vue
deleted file mode 100644
index 24e0d1af321f..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/FingerbankDhcpv6EnterprisesList.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <b-row class="align-items-center px-0" no-gutters>
-            <b-col cols="auto" class="mr-auto">
-              <h4 class="d-inline mb-0" v-t="'DHCPv6 Enterprises'"></h4>
-            </b-col>
-            <b-col cols="auto" align="right" class="flex-grow-0">
-              <b-button-group>
-                <b-button v-t="'All'" :variant="(localScope === 'all') ? 'primary' : 'outline-secondary'" @click="changeScope('all')"></b-button>
-                <b-button v-t="'Local'" :variant="(localScope === 'local') ? 'primary' : 'outline-secondary'" @click="changeScope('local')"></b-button>
-                <b-button v-t="'Upstream'" :variant="(localScope === 'upstream') ? 'primary' : 'outline-secondary'" @click="changeScope('upstream')"></b-button>
-              </b-button-group>
-            </b-col>
-          </b-row>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd v-if="localScope === 'local'">
-        <b-button variant="outline-primary" :to="{ name: 'newFingerbankDhcpv6Enterprise', params: { localScope: 'local' } }">{{ $t('New DHCPv6 Enterprise') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No DHCPv6 enterprises found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable && localScope === 'local'" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete DHCPv6 Enterprise?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/fingerbank/dhcpV6Enterprise'
-
-export default {
-  name: 'fingerbank-dhcpv6-enterprises-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  props: {
-    scope: {
-      type: String,
-      default: 'all'
-    }
-  },
-  data () {
-    return {
-      data: [],
-      config: config(this),
-      localScope: this.scope
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneFingerbankDhcpv6Enterprise', params: { scope: 'local', id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_fingerbank/deleteDhcpv6Enterprise', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    },
-    changeScope (scope) {
-      this.localScope = scope
-      this.config = config(this) // reset config
-    }
-  },
-  created () {
-    this.$store.dispatch('$_fingerbank/dhcpv6Enterprises').then(data => {
-      this.data = data
-    })
-  },
-  watch: {
-    scope: {
-      handler: function (a) {
-        this.localScope = a
-        this.config = config(this) // reset config
-      }
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/FingerbankDhcpv6FingerprintsList.vue b/html/pfappserver/root/src/views/Configuration/_components/FingerbankDhcpv6FingerprintsList.vue
deleted file mode 100644
index 007cb12ee37b..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/FingerbankDhcpv6FingerprintsList.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <b-row class="align-items-center px-0" no-gutters>
-            <b-col cols="auto" class="mr-auto">
-              <h4 class="d-inline mb-0" v-t="'DHCPv6 Fingerprints'"></h4>
-            </b-col>
-            <b-col cols="auto" align="right" class="flex-grow-0">
-              <b-button-group>
-                <b-button v-t="'All'" :variant="(localScope === 'all') ? 'primary' : 'outline-secondary'" @click="changeScope('all')"></b-button>
-                <b-button v-t="'Local'" :variant="(localScope === 'local') ? 'primary' : 'outline-secondary'" @click="changeScope('local')"></b-button>
-                <b-button v-t="'Upstream'" :variant="(localScope === 'upstream') ? 'primary' : 'outline-secondary'" @click="changeScope('upstream')"></b-button>
-              </b-button-group>
-            </b-col>
-          </b-row>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd v-if="localScope === 'local'">
-        <b-button variant="outline-primary" :to="{ name: 'newFingerbankDhcpv6Fingerprint', params: { localScope: 'local' } }">{{ $t('New DHCPv6 Fingerprint') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No DHCPv6 fingerprints found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable && localScope === 'local'" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete DHCPv6 Fingerprint?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/fingerbank/dhcpV6Fingerprint'
-
-export default {
-  name: 'fingerbank-dhcpv6-fingerprints-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  props: {
-    scope: {
-      type: String,
-      default: 'all'
-    }
-  },
-  data () {
-    return {
-      data: [],
-      config: config(this),
-      localScope: this.scope
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneFingerbankDhcpv6Fingerprint', params: { scope: 'local', id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_fingerbank/deleteDhcpv6Fingerprint', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    },
-    changeScope (scope) {
-      this.localScope = scope
-      this.config = config(this) // reset config
-    }
-  },
-  created () {
-    this.$store.dispatch('$_fingerbank/dhcpv6Fingerprints').then(data => {
-      this.data = data
-    })
-  },
-  watch: {
-    scope: {
-      handler: function (a) {
-        this.localScope = a
-        this.config = config(this) // reset config
-      }
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/FingerbankMacVendorsList.vue b/html/pfappserver/root/src/views/Configuration/_components/FingerbankMacVendorsList.vue
deleted file mode 100644
index ae1014a788f4..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/FingerbankMacVendorsList.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <b-row class="align-items-center px-0" no-gutters>
-            <b-col cols="auto" class="mr-auto">
-              <h4 class="d-inline mb-0" v-t="'MAC Vendors'"></h4>
-            </b-col>
-            <b-col cols="auto" align="right" class="flex-grow-0">
-              <b-button-group>
-                <b-button v-t="'All'" :variant="(localScope === 'all') ? 'primary' : 'outline-secondary'" @click="changeScope('all')"></b-button>
-                <b-button v-t="'Local'" :variant="(localScope === 'local') ? 'primary' : 'outline-secondary'" @click="changeScope('local')"></b-button>
-                <b-button v-t="'Upstream'" :variant="(localScope === 'upstream') ? 'primary' : 'outline-secondary'" @click="changeScope('upstream')"></b-button>
-              </b-button-group>
-            </b-col>
-          </b-row>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd v-if="localScope === 'local'">
-        <b-button variant="outline-primary" :to="{ name: 'newFingerbankMacVendor', params: { localScope: 'local' } }">{{ $t('New MAC Vendor') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No MAC vendors found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable && localScope === 'local'" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete MAC Vendor?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/fingerbank/macVendor'
-
-export default {
-  name: 'fingerbank-mac-vendors-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  props: {
-    scope: {
-      type: String,
-      default: 'all'
-    }
-  },
-  data () {
-    return {
-      data: [],
-      config: config(this),
-      localScope: 'all'
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneFingerbankMacVendor', params: { scope: 'local', id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_fingerbank/deleteMacVendor', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    },
-    changeScope (scope) {
-      this.localScope = scope
-      this.config = config(this) // reset config
-    }
-  },
-  created () {
-    this.$store.dispatch('$_fingerbank/macVendors').then(data => {
-      this.data = data
-    })
-  },
-  watch: {
-    scope: {
-      handler: function (a) {
-        this.localScope = a
-        this.config = config(this) // reset config
-      },
-      immediate: true
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/FingerbankTabs.vue b/html/pfappserver/root/src/views/Configuration/_components/FingerbankTabs.vue
index 69a6e4c63320..861c52290ad1 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/FingerbankTabs.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/FingerbankTabs.vue
@@ -15,28 +15,28 @@
         <fingerbank-device-change-detection-view />
       </b-tab>
       <b-tab :title="$t('Combinations')" @click="changeTab('combinations')">
-        <fingerbank-combinations-list />
+        <fingerbank-combinations-search />
       </b-tab>
       <b-tab :title="$t('Devices')" @click="changeTab('devices')">
-        <fingerbank-devices-list :parentId="parentId"/>
+        <fingerbank-devices-search :parentId="parentId" :scope="scope" />
       </b-tab>
       <b-tab :title="$t('DHCP Fingerprints')" @click="changeTab('dhcp_fingerprints')">
-        <fingerbank-dhcp-fingerprints-list />
+        <fingerbank-dhcp-fingerprints-search :scope="scope" />
       </b-tab>
       <b-tab :title="$t('DHCP Vendors')" @click="changeTab('dhcp_vendors')">
-        <fingerbank-dhcp-vendors-list />
+        <fingerbank-dhcp-vendors-search :scope="scope" />
       </b-tab>
       <b-tab :title="$t('DHCPv6 Fingerprints')" @click="changeTab('dhcpv6_fingerprints')">
-        <fingerbank-dhcpv6-fingerprints-list />
+        <fingerbank-dhcpv6-fingerprints-search :scope="scope" />
       </b-tab>
       <b-tab :title="$t('DHCPv6 Enterprises')" @click="changeTab('dhcpv6_enterprises')">
-        <fingerbank-dhcpv6-enterprises-list />
+        <fingerbank-dhcpv6-enterprises-search :scope="scope" />
       </b-tab>
       <b-tab :title="$t('MAC Vendors')" @click="changeTab('mac_vendors')">
-        <fingerbank-mac-vendors-list />
+        <fingerbank-mac-vendors-search :scope="scope" />
       </b-tab>
       <b-tab :title="$t('User Agents')" @click="changeTab('user_agents')">
-        <fingerbank-user-agents-list />
+        <fingerbank-user-agents-search :scope="scope" />
       </b-tab>
     </b-tabs>
   </b-card>
@@ -45,28 +45,28 @@
 <script>
 import FingerbankGeneralSettingView from '../fingerbank/generalSettings/_components/TheView'
 import FingerbankDeviceChangeDetectionView from '../fingerbank/deviceChangeDetection/_components/TheView'
-import FingerbankCombinationsList from './FingerbankCombinationsList'
-import FingerbankDevicesList from './FingerbankDevicesList'
-import FingerbankDhcpFingerprintsList from './FingerbankDhcpFingerprintsList'
-import FingerbankDhcpVendorsList from './FingerbankDhcpVendorsList'
-import FingerbankDhcpv6FingerprintsList from './FingerbankDhcpv6FingerprintsList'
-import FingerbankDhcpv6EnterprisesList from './FingerbankDhcpv6EnterprisesList'
-import FingerbankMacVendorsList from './FingerbankMacVendorsList'
-import FingerbankUserAgentsList from './FingerbankUserAgentsList'
+import FingerbankCombinationsSearch from '../fingerbank/combinations/_components/TheSearch'
+import FingerbankDevicesSearch from '../fingerbank/devices/_components/TheSearch'
+import FingerbankDhcpFingerprintsSearch from '../fingerbank/dhcpFingerprints/_components/TheSearch'
+import FingerbankDhcpVendorsSearch from '../fingerbank/dhcpVendors/_components/TheSearch'
+import FingerbankDhcpv6FingerprintsSearch from '../fingerbank/dhcpv6Fingerprints/_components/TheSearch'
+import FingerbankDhcpv6EnterprisesSearch from '../fingerbank/dhcpv6Enterprises/_components/TheSearch'
+import FingerbankMacVendorsSearch from '../fingerbank/macVendors/_components/TheSearch'
+import FingerbankUserAgentsSearch from '../fingerbank/userAgents/_components/TheSearch'
 
 export default {
   name: 'fingerbank-tabs',
   components: {
     FingerbankGeneralSettingView,
     FingerbankDeviceChangeDetectionView,
-    FingerbankCombinationsList,
-    FingerbankDevicesList,
-    FingerbankDhcpFingerprintsList,
-    FingerbankDhcpVendorsList,
-    FingerbankDhcpv6FingerprintsList,
-    FingerbankDhcpv6EnterprisesList,
-    FingerbankMacVendorsList,
-    FingerbankUserAgentsList
+    FingerbankCombinationsSearch,
+    FingerbankDevicesSearch,
+    FingerbankDhcpFingerprintsSearch,
+    FingerbankDhcpVendorsSearch,
+    FingerbankDhcpv6FingerprintsSearch,
+    FingerbankDhcpv6EnterprisesSearch,
+    FingerbankMacVendorsSearch,
+    FingerbankUserAgentsSearch
   },
   props: {
     tab: {
@@ -76,6 +76,10 @@ export default {
     parentId: {
       type: String,
       default: null
+    },
+    scope: {
+      type: String,
+      default: 'all'
     }
   },
   computed: {
@@ -104,7 +108,20 @@ export default {
   },
   methods: {
     changeTab (path) {
-      this.$router.push(`/configuration/fingerbank/${path}`)
+      switch (path) {
+        case 'devices':
+        case 'dhcp_fingerprints':
+        case 'dhcp_vendors':
+        case 'dhcpv6_fingerprints':
+        case 'dhcpv6_enterprises':
+        case 'mac_vendors':
+        case 'user_agents':
+          this.$router.push(`/configuration/fingerbank/${this.scope}/${path}`)
+          break
+        default:
+          this.$router.push(`/configuration/fingerbank/${path}`)
+          break
+      }
     },
     updateDatabase () {
       this.$store.dispatch('$_fingerbank/updateDatabase')
diff --git a/html/pfappserver/root/src/views/Configuration/_components/FingerbankUserAgentsList.vue b/html/pfappserver/root/src/views/Configuration/_components/FingerbankUserAgentsList.vue
deleted file mode 100644
index 45d53d6574c9..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/FingerbankUserAgentsList.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <b-row class="align-items-center px-0" no-gutters>
-            <b-col cols="auto" class="mr-auto">
-              <h4 class="d-inline mb-0" v-t="'User Agents'"></h4>
-            </b-col>
-          </b-row>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newFingerbankUserAgent' }">{{ $t('New User Agent') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No user agents found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete User Agent?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/fingerbank/userAgent'
-
-export default {
-  name: 'fingerbank-user-agents-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      data: [],
-      config: config(this)
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneFingerbankUserAgent', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_fingerbank/deleteUserAgent', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    },
-    isLoading () {
-      return this.$store.getters['$_fingerbank/isUserAgentsLoading']
-    }
-  },
-  created () {
-    this.$store.dispatch('$_fingerbank/userAgents').then(data => {
-      this.data = data
-    })
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_config/fingerbank/combination.js b/html/pfappserver/root/src/views/Configuration/_config/fingerbank/combination.js
deleted file mode 100644
index efef13dc5d56..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/fingerbank/combination.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'device_id',
-    label: 'Device', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'score',
-    label: 'Score', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'created_at',
-    label: 'Created', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'updated_at',
-    label: 'Updated', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'fingerbankCombination', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier or device'),
-    searchableOptions: {
-      searchApiEndpoint: `fingerbank/local/combinations`,
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'fingerbankCombinations' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'device_id', op: 'equals', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/fingerbank/device.js b/html/pfappserver/root/src/views/Configuration/_config/fingerbank/device.js
deleted file mode 100644
index cc498ec0cc4d..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/fingerbank/device.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'name',
-    label: 'Device', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'created_at',
-    label: 'Created', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'updated_at',
-    label: 'Updated', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'approved',
-    label: 'Approved', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = (context = {}) => {
-  const {
-    scope = 'all',
-    parentId = null
-  } = context
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'fingerbankDevice', params: { scope: scope, id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier or device'),
-    searchableOptions: {
-      searchApiEndpoint: `fingerbank/${scope}/devices`, // `./search` automatically appended
-      searchApiEndpointOnly: true, // always use `/search` endpoint
-      defaultSortKeys: ['name'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'parent_id', op: 'equals', value: (parentId || null) }
-            ]
-          }
-        ]
-      },
-      defaultRoute: { name: 'fingerbankDevices' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          ...((!quickCondition.trim())
-            ? [{ op: 'or', values: [{ field: 'parent_id', op: 'equals', value: (parentId || null) }] }]
-            : []
-          ),
-          ...((quickCondition.trim())
-            ? [{
-              op: 'or',
-              values: [
-                { field: 'id', op: 'contains', value: quickCondition.trim() },
-                { field: 'name', op: 'contains', value: quickCondition.trim() }
-              ]
-            }]
-            : []
-          )
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/fingerbank/dhcpFingerprint.js b/html/pfappserver/root/src/views/Configuration/_config/fingerbank/dhcpFingerprint.js
deleted file mode 100644
index d27e76ca7681..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/fingerbank/dhcpFingerprint.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'value',
-    label: 'DHCP Fingerprint', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'created_at',
-    label: 'Created', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'updated_at',
-    label: 'Updated', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = (context = {}) => {
-  const {
-    scope
-  } = context
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'fingerbankDhcpFingerprint', params: { scope: scope, id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier or DHCP fingerprint'),
-    searchableOptions: {
-      searchApiEndpoint: `fingerbank/${scope}/dhcp_fingerprints`,
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'fingerbankDhcpFingerprints' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'value', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/fingerbank/dhcpV6Enterprise.js b/html/pfappserver/root/src/views/Configuration/_config/fingerbank/dhcpV6Enterprise.js
deleted file mode 100644
index 7c0b60021386..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/fingerbank/dhcpV6Enterprise.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'value',
-    label: 'DHCPv6 Enterprise', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  /* TODO - Issue #4217
-  {
-    key: 'organization',
-    label: 'Organization', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  */
-  {
-    key: 'created_at',
-    label: 'Created', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'updated_at',
-    label: 'Updated', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = (context = {}) => {
-  const {
-    scope
-  } = context
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'fingerbankDhcpv6Enterprise', params: { scope: scope, id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier or DHCPv6 enterprise'),
-    searchableOptions: {
-      searchApiEndpoint: `fingerbank/${scope}/dhcp6_enterprises`,
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'fingerbankDhcpv6Enterprises' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'value', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/fingerbank/dhcpV6Fingerprint.js b/html/pfappserver/root/src/views/Configuration/_config/fingerbank/dhcpV6Fingerprint.js
deleted file mode 100644
index b7c8b4370ade..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/fingerbank/dhcpV6Fingerprint.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'value',
-    label: 'DHCPv6 Fingerprint', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'created_at',
-    label: 'Created', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'updated_at',
-    label: 'Updated', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = (context = {}) => {
-  const {
-    scope
-  } = context
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'fingerbankDhcpv6Fingerprint', params: { scope: scope, id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier or DHCPv6 fingerprint'),
-    searchableOptions: {
-      searchApiEndpoint: `fingerbank/${scope}/dhcp6_fingerprints`,
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'fingerbankDhcpv6Fingerprints' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'value', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/fingerbank/dhcpVendor.js b/html/pfappserver/root/src/views/Configuration/_config/fingerbank/dhcpVendor.js
deleted file mode 100644
index 94afaf65f69e..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/fingerbank/dhcpVendor.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'value',
-    label: 'DHCP Vendor', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'created_at',
-    label: 'Created', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'updated_at',
-    label: 'Updated', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = (context = {}) => {
-  const {
-    scope
-  } = context
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'fingerbankDhcpVendor', params: { scope: scope, id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier or DHCP vendor'),
-    searchableOptions: {
-      searchApiEndpoint: `fingerbank/${scope}/dhcp_vendors`,
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'fingerbankDhcpVendors' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'value', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/fingerbank/macVendor.js b/html/pfappserver/root/src/views/Configuration/_config/fingerbank/macVendor.js
deleted file mode 100644
index 4700d8a7b39e..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/fingerbank/macVendor.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'mac',
-    label: 'OUI', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'name',
-    label: 'MAC Vendor', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'created_at',
-    label: 'Created', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'updated_at',
-    label: 'Updated', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = (context = {}) => {
-  const {
-    scope
-  } = context
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'fingerbankMacVendor', params: { scope: scope, id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier or MAC vendor'),
-    searchableOptions: {
-      searchApiEndpoint: `fingerbank/${scope}/mac_vendors`,
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'fingerbankMacVendors' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'mac', op: 'contains', value: quickCondition },
-              { field: 'name', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/fingerbank/userAgent.js b/html/pfappserver/root/src/views/Configuration/_config/fingerbank/userAgent.js
deleted file mode 100644
index 465331e50c9d..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/fingerbank/userAgent.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'value',
-    label: 'User Agent', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'created_at',
-    label: 'Created', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'updated_at',
-    label: 'Updated', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'fingerbankUserAgent', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier or user agent'),
-    searchableOptions: {
-      searchApiEndpoint: `fingerbank/local/user_agents`,
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'fingerbankUserAgents' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'value', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_store/factory/search.js b/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
index 1f7e073d0da8..32db459ec6aa 100644
--- a/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
+++ b/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { createDebouncer } from 'promised-debounce'
 import i18n from '@/utils/locale'
 import { toKebabCase } from '@/utils/strings'
 
@@ -27,18 +28,6 @@ export const useString = (searchString, columns) => {
   }
 }
 
-export const useCondition = (searchCondition) => {
-  return {
-    op: 'and',
-    values: searchCondition.map(or => {
-      return {
-        op: 'or',
-        values: or.values
-      }
-    })
-  }
-}
-
 const factory = (uuid, options = {}) => {
   const id = `$_${toKebabCase(uuid, '_')}_search`
   return defineStore({
@@ -65,7 +54,7 @@ const factory = (uuid, options = {}) => {
         useColumns,
         useFields,
         useString,
-        useCondition,
+        useCondition: (condition) => condition,
 
         // overload defaults
         ...options,
@@ -74,7 +63,11 @@ const factory = (uuid, options = {}) => {
         isLoading: false,
         lastQuery: null,
         items: [],
-        totalRows: 0
+        totalRows: 0,
+
+        // api debouncer
+        $debouncer: createDebouncer(),
+        $debouncerMs: 100, // 100ms
       }
     },
     getters: {
@@ -138,22 +131,31 @@ const factory = (uuid, options = {}) => {
           limit: this.limit,
           cursor: ((this.page * this.limit) - this.limit)
         }
-        this.api.list(params)
-          .then(_response => {
-            const response = this.responseInterceptor(_response)
-            const { items = [], total_count } = response
-            this.items = items
-            this.totalRows = total_count
-            this.lastQuery = null
-          })
-          .catch(() => {
-            this.items = []
-            this.totalRows = 0
-            this.lastQuery = null
-          })
-          .finally(() => {
-            this.isLoading = false
+        if ('list' in this.api) { // has api.list
+          this.$debouncer({
+            handler: () => {
+              this.api.list(params)
+                .then(_response => {
+                  const response = this.responseInterceptor(_response)
+                  const { items = [], total_count } = response
+                  this.items = items
+                  this.totalRows = total_count
+                  this.lastQuery = null
+                })
+                .catch(() => {
+                  this.items = []
+                  this.totalRows = 0
+                  this.lastQuery = null
+                })
+                .finally(() => {
+                  this.isLoading = false
+                })
+            },
+            time: this.$debouncerMs
           })
+        }
+        else // no api.list
+          this.doSearchCondition(this.defaultCondition())
       },
       doSearchString(string) {
         const columns = this.useColumns(this.columns)
@@ -179,22 +181,27 @@ const factory = (uuid, options = {}) => {
           cursor: ((this.page * this.limit) - this.limit)
         }
         const body = this.requestInterceptor(_body)
-        this.api.search(body)
-          .then(_response => {
-            const response = this.responseInterceptor(_response)
-            const { items = [], total_count } = response
-            this.items = items
-            this.totalRows = total_count
-            this.lastQuery = query
-          })
-          .catch(() => {
-            this.items = []
-            this.totalRows = 0
-            this.lastQuery = null
-          })
-          .finally(() => {
-            this.isLoading = false
-          })
+        this.$debouncer({
+          handler: () => {
+            this.api.search(body)
+              .then(_response => {
+                const response = this.responseInterceptor(_response)
+                const { items = [], total_count } = response
+                this.items = items
+                this.totalRows = total_count
+                this.lastQuery = query
+              })
+              .catch(() => {
+                this.items = []
+                this.totalRows = 0
+                this.lastQuery = null
+              })
+              .finally(() => {
+                this.isLoading = false
+              })
+          },
+          time: this.$debouncerMs
+        })
       },
       reSearch() {
         const visibleSortBy = this.columns.find(c => c.visible && c.key == this.sortBy)
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
index e3b4cfb68a52..a3e3a67ac2ba 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
@@ -88,12 +88,12 @@ export const useSearch = makeSearch('adminRoles', {
     }
   ],
   sortBy: 'id',
-  defaultCondition: () => ([{
-    values: [
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
       { field: 'id', op: 'contains', value: null },
       { field: 'description', op: 'contains', value: null }
-    ]
-  }]),
+    ] }
+  ] }),
   requestInterceptor: request => {
       // append query in request to omit NONE, ALL, ALL_PF_ONLY from request
       request.query.values = [
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
index 36b18f5d8ca9..b64d82caecc3 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
@@ -100,11 +100,11 @@ export const useSearch = makeSearch('billingTiers', {
     }
   ],
   sortBy: 'id',
-  defaultCondition: () => ([{
-    values: [
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
       { field: 'id', op: 'contains', value: null },
       { field: 'name', op: 'contains', value: null },
       { field: 'description', op: 'contains', value: null }
-    ]
-  }])
+    ] }
+  ] })
 })
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
index 3ef494a6b185..ccc6d9b02f67 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
@@ -183,101 +183,3 @@ export default {
   setup
 }
 </script>
-<!--
-
-
-
-
-<template>
-  <div>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <h4 class="mb-0 p-4">
-          {{ $t('Active Directory Domains') }}
-          <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_microsoft_active_directory_ad" />
-        </h4>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newDomain' }">{{ $t('New Domain') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-          <pf-empty-table :is-loading="state.isLoading">{{ $t('No domains found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(ntlm_cache)="item">
-        <icon name="circle" :class="{ 'text-success': item.ntlm_cache === 'enabled', 'text-danger': item.ntlm_cache !== 'enabled' }"
-          v-b-tooltip.hover.left.d300 :title="$t(item.ntlm_cache)"></icon>
-      </template>
-      <template v-slot:cell(joined)="item">
-        <template v-if="item.id in joins">
-          <icon v-if="joins[item.id].status === null" name="circle-notch" class="text-secondary" spin></icon>
-          <icon v-else-if="joins[item.id].status === true" name="circle" class="text-success"
-            v-b-tooltip.hover.left.d300 :title="$t('Test join success.')"></icon>
-          <icon v-else-if="joins[item.id].status === false" name="circle" class="text-danger"
-            v-b-tooltip.hover.left.d300 :title="$t('Test join failed.')"></icon>
-          <span v-if="joins[item.id].message" v-t="joins[item.id].message" class="ml-1"></span>
-        </template>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Domain?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-          <button-join size="sm" :id="item.id" />
-        </span>
-      </template>
-    </pf-config-list>
-  </div>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonHelp from '@/components/pfButtonHelp'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { ButtonJoin } from '@/views/Configuration/domains/_components/'
-import { config } from '../_config/domain'
-
-export default {
-  name: 'domains-list',
-  components: {
-    pfButtonDelete,
-    pfButtonHelp,
-    pfConfigList,
-    pfEmptyTable,
-    ButtonJoin
-  },
-  props: {
-    autoJoinDomain: { // from DomainView, through router
-      type: Object,
-      default: null
-    }
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_domains/isLoading']
-    },
-    joins () {
-      return this.$store.getters['$_domains/joins']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneDomain', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_domains/deleteDomain', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
--->
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
index cfe1196c8a18..af24c9020cd6 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
@@ -65,14 +65,13 @@ export const useSearch = makeSearch('domains', {
     {
       key: 'ntlm_cache',
       label: 'NTLM Cache', // i18n defer
-      searchable: true,
       sortable: true,
       visible: true
     },
     {
       key: 'joined',
       label: 'Domain Join', // i18n defer
-      locked: true
+      visible: true
     },
     {
       key: 'buttons',
@@ -93,10 +92,10 @@ export const useSearch = makeSearch('domains', {
     }
   ],
   sortBy: 'id',
-  defaultCondition: () => ([{
-    values: [
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
       { field: 'id', op: 'contains', value: null },
       { field: 'workgroup', op: 'contains', value: null }
-    ]
-  }])
+    ] }
+  ] })
 })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/_api.js b/html/pfappserver/root/src/views/Configuration/fingerbank/_api.js
index a643ffa8dfc8..fa207c235935 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/_api.js
@@ -1,26 +1,6 @@
 import apiCall from '@/utils/api'
 
-import GeneralSettingsApi from './generalSettings/_api'
-import CombinationsApi from './combinations/_api'
-import DevicesApi from './devices/_api'
-import DhcpFingerprintsApi from './dhcpFingerprints/_api'
-import Dhcpv6EnterprisesApi from './dhcpv6Enterprises/_api'
-import Dhcpv6FingerprintsApi from './dhcpv6Fingerprints/_api'
-import DhcpVendorsApi from './dhcpVendors/_api'
-import MacVendorsApi from './macVendors/_api'
-import UserAgentsApi from './userAgents/_api'
-
 export default {
-  ...GeneralSettingsApi,
-  ...CombinationsApi,
-  ...DevicesApi,
-  ...DhcpFingerprintsApi,
-  ...Dhcpv6EnterprisesApi,
-  ...Dhcpv6FingerprintsApi,
-  ...DhcpVendorsApi,
-  ...MacVendorsApi,
-  ...UserAgentsApi,
-
   fingerbankAccountInfo: () => {
     return apiCall.getQuiet(['fingerbank', 'account_info']).then(response => {
       return response.data
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/_store.js
index 809e81d03665..d0b339c28172 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/_store.js
@@ -4,6 +4,69 @@
 import Vue from 'vue'
 import api from './_api'
 
+import {
+  state as stateGeneralSettings,
+  getters as gettersGeneralSettings,
+  actions as actionsGeneralSettings,
+  mutations as mutationsGeneralSettings
+} from './generalSettings/_store'
+
+import {
+  state as stateCombinations,
+  getters as gettersCombinations,
+  actions as actionsCombinations,
+  mutations as mutationsCombinations
+} from './combinations/_store'
+
+import {
+  state as stateDevices,
+  getters as gettersDevices,
+  actions as actionsDevices,
+  mutations as mutationsDevices
+} from './devices/_store'
+
+import {
+  state as stateDhcpFingerprints,
+  getters as gettersDhcpFingerprints,
+  actions as actionsDhcpFingerprints,
+  mutations as mutationsDhcpFingerprints
+} from './dhcpFingerprints/_store'
+
+import {
+  state as stateDhcpVendors,
+  getters as gettersDhcpVendors,
+  actions as actionsDhcpVendors,
+  mutations as mutationsDhcpVendors
+} from './dhcpVendors/_store'
+
+import {
+  state as stateDhcpv6Fingerprints,
+  getters as gettersDhcpv6Fingerprints,
+  actions as actionsDhcpv6Fingerprints,
+  mutations as mutationsDhcpv6Fingerprints
+} from './dhcpv6Fingerprints/_store'
+
+import {
+  state as stateDhcpv6Enterprises,
+  getters as gettersDhcpv6Enterprises,
+  actions as actionsDhcpv6Enterprises,
+  mutations as mutationsDhcpv6Enterprises
+} from './dhcpv6Enterprises/_store'
+
+import {
+  state as stateMacVendors,
+  getters as gettersMacVendors,
+  actions as actionsMacVendors,
+  mutations as mutationsMacVendors
+} from './macVendors/_store'
+
+import {
+  state as stateUserAgents,
+  getters as gettersUserAgents,
+  actions as actionsUserAgents,
+  mutations as mutationsUserAgents
+} from './userAgents/_store'
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
@@ -14,6 +77,16 @@ const types = {
 // Default values
 const state = () => {
   return {
+    ...stateGeneralSettings(),
+    ...stateCombinations(),
+    ...stateDevices(),
+    ...stateDhcpFingerprints(),
+    ...stateDhcpVendors(),
+    ...stateDhcpv6Fingerprints(),
+    ...stateDhcpv6Enterprises(),
+    ...stateMacVendors(),
+    ...stateUserAgents(),
+
     accountInfo: {
       cache: false,
       message: '',
@@ -24,56 +97,6 @@ const state = () => {
       message: '',
       status: ''
     },
-    generalSettings: {
-      cache: false,
-      message: '',
-      status: ''
-    },
-    deviceChangeDetection: {
-      cache: false,
-      message: '',
-      status: ''
-    },
-    combinations: {
-      cache: {},
-      message: '',
-      status: ''
-    },
-    devices: {
-      cache: {},
-      message: '',
-      status: ''
-    },
-    dhcpFingerprints: {
-      cache: {},
-      message: '',
-      status: ''
-    },
-    dhcpVendors: {
-      cache: {},
-      message: '',
-      status: ''
-    },
-    dhcpv6Fingerprints: {
-      cache: {},
-      message: '',
-      status: ''
-    },
-    dhcpv6Enterprises: {
-      cache: {},
-      message: '',
-      status: ''
-    },
-    macVendors: {
-      cache: {},
-      message: '',
-      status: ''
-    },
-    userAgents: {
-      cache: {},
-      message: '',
-      status: ''
-    },
     updateDatabase: {
       message: '',
       status: ''
@@ -82,48 +105,37 @@ const state = () => {
 }
 
 const getters = {
-  accountInfo: state => state.accountInfo.cache,
+  ...gettersGeneralSettings,
+  ...gettersCombinations,
+  ...gettersDevices,
+  ...gettersDhcpFingerprints,
+  ...gettersDhcpVendors,
+  ...gettersDhcpv6Fingerprints,
+  ...gettersDhcpv6Enterprises,
+  ...gettersMacVendors,
+  ...gettersUserAgents,
 
+  accountInfo: state => state.accountInfo.cache,
   isAccountInfoWaiting: state => [types.LOADING, types.DELETING].includes(state.accountInfo.status),
   isAccountInfoLoading: state => state.accountInfo.status === types.LOADING,
 
   isCanUseNbaEndpointsWaiting: state => [types.LOADING, types.DELETING].includes(state.canUseNbaEndpoints.status),
   isCanUseNbaEndpointsLoading: state => state.canUseNbaEndpoints.status === types.LOADING,
 
-  isGeneralSettingsWaiting: state => [types.LOADING, types.DELETING].includes(state.generalSettings.status),
-  isGeneralSettingsLoading: state => state.generalSettings.status === types.LOADING,
-
-  isDeviceChangeDetectionWaiting: state => [types.LOADING, types.DELETING].includes(state.deviceChangeDetection.status),
-  isDeviceChangeDetectionLoading: state => state.deviceChangeDetection.status === types.LOADING,
-
-  isCombinationsWaiting: state => [types.LOADING, types.DELETING].includes(state.combinations.status),
-  isCombinationsLoading: state => state.combinations.status === types.LOADING,
-
-  isDevicesWaiting: state => [types.LOADING, types.DELETING].includes(state.devices.status),
-  isDevicesLoading: state => state.devices.status === types.LOADING,
-
-  isDhcpFingerprintsWaiting: state => [types.LOADING, types.DELETING].includes(state.dhcpFingerprints.status),
-  isDhcpFingerprintsLoading: state => state.dhcpFingerprints.status === types.LOADING,
-
-  isDhcpVendorsWaiting: state => [types.LOADING, types.DELETING].includes(state.dhcpVendors.status),
-  isDhcpVendorsLoading: state => state.dhcpVendors.status === types.LOADING,
-
-  isDhcpv6FingerprintsWaiting: state => [types.LOADING, types.DELETING].includes(state.dhcpv6Fingerprints.status),
-  isDhcpv6FingerprintsLoading: state => state.dhcpv6Fingerprints.status === types.LOADING,
-
-  isDhcpv6EnterprisesWaiting: state => [types.LOADING, types.DELETING].includes(state.dhcpv6Enterprises.status),
-  isDhcpv6EnterprisesLoading: state => state.dhcpv6Enterprises.status === types.LOADING,
-
-  isMacVendorsWaiting: state => [types.LOADING, types.DELETING].includes(state.macVendors.status),
-  isMacVendorsLoading: state => state.macVendors.status === types.LOADING,
-
-  isUserAgentsWaiting: state => [types.LOADING, types.DELETING].includes(state.userAgents.status),
-  isUserAgentsLoading: state => state.userAgents.status === types.LOADING,
-
   isUpdateDatabaseLoading: state => state.updateDatabase.status === types.LOADING
 }
 
 const actions = {
+  ...actionsGeneralSettings,
+  ...actionsCombinations,
+  ...actionsDevices,
+  ...actionsDhcpFingerprints,
+  ...actionsDhcpVendors,
+  ...actionsDhcpv6Fingerprints,
+  ...actionsDhcpv6Enterprises,
+  ...actionsMacVendors,
+  ...actionsUserAgents,
+
   getAccountInfo: ({ state, commit }) => {
     if (state.accountInfo.cache) {
       return Promise.resolve(state.accountInfo.cache)
@@ -150,485 +162,6 @@ const actions = {
       throw err
     })
   },
-  getGeneralSettings: ({ state, commit }) => {
-    if (state.generalSettings.cache) {
-      return Promise.resolve(state.generalSettings.cache)
-    }
-    commit('GENERAL_SETTINGS_REQUEST')
-    const params = {
-      sort: 'id'
-    }
-    return api.fingerbankGeneralSettings(params).then(response => {
-      // response is split multipart, refactor required
-      let refactored = {}
-      response.forEach((section) => {
-        refactored[section.id] = Object.keys(section)
-          .filter(key => !(['id'].includes(key)))
-          .reduce((obj, key) => {
-            obj[key] = section[key]
-            return obj
-          }, {})
-      })
-      commit('GENERAL_SETTINGS_REPLACED', refactored)
-      return refactored
-    }).catch(err => {
-      commit('GENERAL_SETTINGS_ERROR', err.response)
-      throw err
-    })
-  },
-  // TODO - Test (Issue #4139)
-  optionsGeneralSettings: ({ commit }) => {
-    commit('GENERAL_SETTINGS_REQUEST')
-    return api.fingerbankGeneralSettingsOptions().then(response => {
-      commit('GENERAL_SETTINGS_SUCCESS')
-      return response
-    }).catch(err => {
-      commit('GENERAL_SETTINGS_ERROR', err.response)
-      throw err
-    })
-  },
-  setGeneralSettings: ({ commit, dispatch }, data) => {
-    commit('GENERAL_SETTINGS_REQUEST')
-    let promises = []
-    Object.keys(data).forEach(id => {
-      let refactored = { ...data[id], ...{ id } }
-      promises.push(api.fingerbankUpdateGeneralSetting(id, refactored))
-    })
-    return Promise.all(promises).then(response => {
-      commit('GENERAL_SETTINGS_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('GENERAL_SETTINGS_ERROR', err.response)
-      throw err
-    }).finally(() => {
-      commit('ACCOUNT_INFO_RESET')
-      dispatch('getAccountInfo')
-    })
-  },
-  combinations: () => {
-    const params = {
-      sort: 'id',
-      fields: ['id'].join(',')
-    }
-    return api.fingerbankCombinations(params).then(response => {
-      return response.items
-    })
-  },
-  getCombination: ({ state, commit }, id) => {
-    if (state.combinations.cache[id]) {
-      return Promise.resolve(state.combinations.cache[id])
-    }
-    commit('COMBINATION_REQUEST')
-    return api.fingerbankCombination(id).then(item => {
-      commit('COMBINATION_REPLACED', item)
-      return JSON.parse(JSON.stringify(item))
-    }).catch(err => {
-      commit('COMBINATION_ERROR', err.response)
-      throw err
-    })
-  },
-  createCombination: ({ commit }, data) => {
-    commit('COMBINATION_REQUEST')
-    return api.fingerbankCreateCombination(data).then(response => {
-      data.id = response.id
-      commit('COMBINATION_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('COMBINATION_ERROR', err.response)
-      throw err
-    })
-  },
-  updateCombination: ({ commit }, data) => {
-    commit('COMBINATION_REQUEST')
-    return api.fingerbankUpdateCombination(data).then(response => {
-      commit('COMBINATION_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('COMBINATION_ERROR', err.response)
-      throw err
-    })
-  },
-  deleteCombination: ({ commit }, data) => {
-    commit('COMBINATION_REQUEST', types.DELETING)
-    return api.fingerbankDeleteCombination(data).then(response => {
-      commit('COMBINATION_DESTROYED', data)
-      return response
-    }).catch(err => {
-      commit('COMBINATION_ERROR', err.response)
-      throw err
-    })
-  },
-  devices: () => {
-    const params = {
-      sort: 'id',
-      fields: ['id'].join(',')
-    }
-    return api.fingerbankDevices(params).then(response => {
-      return response.items
-    })
-  },
-  getDevice: ({ state, commit }, id) => {
-    if (state.devices.cache[id]) {
-      return Promise.resolve(state.devices.cache[id])
-    }
-    commit('DEVICE_REQUEST')
-    return api.fingerbankDevice(id).then(item => {
-      commit('DEVICE_REPLACED', item)
-      return JSON.parse(JSON.stringify(item))
-    }).catch(err => {
-      commit('DEVICE_ERROR', err.response)
-      throw err
-    })
-  },
-  createDevice: ({ commit }, data) => {
-    commit('DEVICE_REQUEST')
-    return api.fingerbankCreateDevice(data).then(response => {
-      data.id = response.id
-      commit('DEVICE_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('DEVICE_ERROR', err.response)
-      throw err
-    })
-  },
-  updateDevice: ({ commit }, data) => {
-    commit('DEVICE_REQUEST')
-    return api.fingerbankUpdateDevice(data).then(response => {
-      commit('DEVICE_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('DEVICE_ERROR', err.response)
-      throw err
-    })
-  },
-  deleteDevice: ({ commit }, data) => {
-    commit('DEVICE_REQUEST', types.DELETING)
-    return api.fingerbankDeleteDevice(data).then(response => {
-      commit('DEVICE_DESTROYED', data)
-      return response
-    }).catch(err => {
-      commit('DEVICE_ERROR', err.response)
-      throw err
-    })
-  },
-  dhcpFingerprints: () => {
-    const params = {
-      sort: 'id',
-      fields: ['id'].join(',')
-    }
-    return api.fingerbankDhcpFingerprints(params).then(response => {
-      return response.items
-    })
-  },
-  getDhcpFingerprint: ({ state, commit }, id) => {
-    if (state.dhcpFingerprints.cache[id]) {
-      return Promise.resolve(state.dhcpFingerprints.cache[id])
-    }
-    commit('DHCP_FINGERPRINT_REQUEST')
-    return api.fingerbankDhcpFingerprint(id).then(item => {
-      commit('DHCP_FINGERPRINT_REPLACED', item)
-      return JSON.parse(JSON.stringify(item))
-    }).catch(err => {
-      commit('DHCP_FINGERPRINT_ERROR', err.response)
-      throw err
-    })
-  },
-  createDhcpFingerprint: ({ commit }, data) => {
-    commit('DHCP_FINGERPRINT_REQUEST')
-    return api.fingerbankCreateDhcpFingerprint(data).then(response => {
-      data.id = response.id
-      commit('DHCP_FINGERPRINT_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('DHCP_FINGERPRINT_ERROR', err.response)
-      throw err
-    })
-  },
-  updateDhcpFingerprint: ({ commit }, data) => {
-    commit('DHCP_FINGERPRINT_REQUEST')
-    return api.fingerbankUpdateDhcpFingerprint(data).then(response => {
-      commit('DHCP_FINGERPRINT_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('DHCP_FINGERPRINT_ERROR', err.response)
-      throw err
-    })
-  },
-  deleteDhcpFingerprint: ({ commit }, data) => {
-    commit('DHCP_FINGERPRINT_REQUEST', types.DELETING)
-    return api.fingerbankDeleteDhcpFingerprint(data).then(response => {
-      commit('DHCP_FINGERPRINT_DESTROYED', data)
-      return response
-    }).catch(err => {
-      commit('DHCP_FINGERPRINT_ERROR', err.response)
-      throw err
-    })
-  },
-  dhcpVendors: () => {
-    const params = {
-      sort: 'id',
-      fields: ['id'].join(',')
-    }
-    return api.fingerbankDhcpVendors(params).then(response => {
-      return response.items
-    })
-  },
-  getDhcpVendor: ({ state, commit }, id) => {
-    if (state.dhcpVendors.cache[id]) {
-      return Promise.resolve(state.dhcpVendors.cache[id])
-    }
-    commit('DHCP_VENDOR_REQUEST')
-    return api.fingerbankDhcpVendor(id).then(item => {
-      commit('DHCP_VENDOR_REPLACED', item)
-      return JSON.parse(JSON.stringify(item))
-    }).catch(err => {
-      commit('DHCP_VENDOR_ERROR', err.response)
-      throw err
-    })
-  },
-  createDhcpVendor: ({ commit }, data) => {
-    commit('DHCP_VENDOR_REQUEST')
-    return api.fingerbankCreateDhcpVendor(data).then(response => {
-      data.id = response.id
-      commit('DHCP_VENDOR_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('DHCP_VENDOR_ERROR', err.response)
-      throw err
-    })
-  },
-  updateDhcpVendor: ({ commit }, data) => {
-    commit('DHCP_VENDOR_REQUEST')
-    return api.fingerbankUpdateDhcpVendor(data).then(response => {
-      commit('DHCP_VENDOR_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('DHCP_VENDOR_ERROR', err.response)
-      throw err
-    })
-  },
-  deleteDhcpVendor: ({ commit }, data) => {
-    commit('DHCP_VENDOR_REQUEST', types.DELETING)
-    return api.fingerbankDeleteDhcpVendor(data).then(response => {
-      commit('DHCP_VENDOR_DESTROYED', data)
-      return response
-    }).catch(err => {
-      commit('DHCP_VENDOR_ERROR', err.response)
-      throw err
-    })
-  },
-  dhcpv6Fingerprints: () => {
-    const params = {
-      sort: 'id',
-      fields: ['id'].join(',')
-    }
-    return api.fingerbankDhcpv6Fingerprints(params).then(response => {
-      return response.items
-    })
-  },
-  getDhcpv6Fingerprint: ({ state, commit }, id) => {
-    if (state.dhcpv6Fingerprints.cache[id]) {
-      return Promise.resolve(state.dhcpv6Fingerprints.cache[id])
-    }
-    commit('DHCPV6_FINGERPRINT_REQUEST')
-    return api.fingerbankDhcpv6Fingerprint(id).then(item => {
-      commit('DHCPV6_FINGERPRINT_REPLACED', item)
-      return JSON.parse(JSON.stringify(item))
-    }).catch(err => {
-      commit('DHCPV6_FINGERPRINT_ERROR', err.response)
-      throw err
-    })
-  },
-  createDhcpv6Fingerprint: ({ commit }, data) => {
-    commit('DHCPV6_FINGERPRINT_REQUEST')
-    return api.fingerbankCreateDhcpv6Fingerprint(data).then(response => {
-      data.id = response.id
-      commit('DHCPV6_FINGERPRINT_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('DHCPV6_FINGERPRINT_ERROR', err.response)
-      throw err
-    })
-  },
-  updateDhcpv6Fingerprint: ({ commit }, data) => {
-    commit('DHCPV6_FINGERPRINT_REQUEST')
-    return api.fingerbankUpdateDhcpv6Fingerprint(data).then(response => {
-      commit('DHCPV6_FINGERPRINT_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('DHCPV6_FINGERPRINT_ERROR', err.response)
-      throw err
-    })
-  },
-  deleteDhcpv6Fingerprint: ({ commit }, data) => {
-    commit('DHCPV6_FINGERPRINT_REQUEST', types.DELETING)
-    return api.fingerbankDeleteDhcpv6Fingerprint(data).then(response => {
-      commit('DHCPV6_FINGERPRINT_DESTROYED', data)
-      return response
-    }).catch(err => {
-      commit('DHCPV6_FINGERPRINT_ERROR', err.response)
-      throw err
-    })
-  },
-  dhcpv6Enterprises: () => {
-    const params = {
-      sort: 'id',
-      fields: ['id'].join(',')
-    }
-    return api.fingerbankDhcpv6Enterprises(params).then(response => {
-      return response.items
-    })
-  },
-  getDhcpv6Enterprise: ({ state, commit }, id) => {
-    if (state.dhcpv6Enterprises.cache[id]) {
-      return Promise.resolve(state.dhcpv6Enterprises.cache[id])
-    }
-    commit('DHCPV6_ENTERPRISE_REQUEST')
-    return api.fingerbankDhcpv6Enterprise(id).then(item => {
-      commit('DHCPV6_ENTERPRISE_REPLACED', item)
-      return JSON.parse(JSON.stringify(item))
-    }).catch(err => {
-      commit('DHCPV6_ENTERPRISE_ERROR', err.response)
-      throw err
-    })
-  },
-  createDhcpv6Enterprise: ({ commit }, data) => {
-    commit('DHCPV6_ENTERPRISE_REQUEST')
-    return api.fingerbankCreateDhcpv6Enterprise(data).then(response => {
-      data.id = response.id
-      commit('DHCPV6_ENTERPRISE_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('DHCPV6_ENTERPRISE_ERROR', err.response)
-      throw err
-    })
-  },
-  updateDhcpv6Enterprise: ({ commit }, data) => {
-    commit('DHCPV6_ENTERPRISE_REQUEST')
-    return api.fingerbankUpdateDhcpv6Enterprise(data).then(response => {
-      commit('DHCPV6_ENTERPRISE_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('DHCPV6_ENTERPRISE_ERROR', err.response)
-      throw err
-    })
-  },
-  deleteDhcpv6Enterprise: ({ commit }, data) => {
-    commit('DHCPV6_ENTERPRISE_REQUEST', types.DELETING)
-    return api.fingerbankDeleteDhcpv6Enterprise(data).then(response => {
-      commit('DHCPV6_ENTERPRISE_DESTROYED', data)
-      return response
-    }).catch(err => {
-      commit('DHCPV6_ENTERPRISE_ERROR', err.response)
-      throw err
-    })
-  },
-  macVendors: () => {
-    const params = {
-      sort: 'id',
-      fields: ['id'].join(',')
-    }
-    return api.fingerbankMacVendors(params).then(response => {
-      return response.items
-    })
-  },
-  getMacVendor: ({ state, commit }, id) => {
-    if (state.macVendors.cache[id]) {
-      return Promise.resolve(state.macVendors.cache[id])
-    }
-    commit('MAC_VENDOR_REQUEST')
-    return api.fingerbankMacVendor(id).then(item => {
-      commit('MAC_VENDOR_REPLACED', item)
-      return JSON.parse(JSON.stringify(item))
-    }).catch(err => {
-      commit('MAC_VENDOR_ERROR', err.response)
-      throw err
-    })
-  },
-  createMacVendor: ({ commit }, data) => {
-    commit('MAC_VENDOR_REQUEST')
-    return api.fingerbankCreateMacVendor(data).then(response => {
-      data.id = response.id
-      commit('MAC_VENDOR_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('MAC_VENDOR_ERROR', err.response)
-      throw err
-    })
-  },
-  updateMacVendor: ({ commit }, data) => {
-    commit('MAC_VENDOR_REQUEST')
-    return api.fingerbankUpdateMacVendor(data).then(response => {
-      commit('MAC_VENDOR_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('MAC_VENDOR_ERROR', err.response)
-      throw err
-    })
-  },
-  deleteMacVendor: ({ commit }, data) => {
-    commit('MAC_VENDOR_REQUEST', types.DELETING)
-    return api.fingerbankDeleteMacVendor(data).then(response => {
-      commit('MAC_VENDOR_DESTROYED', data)
-      return response
-    }).catch(err => {
-      commit('MAC_VENDOR_ERROR', err.response)
-      throw err
-    })
-  },
-  userAgents: () => {
-    const params = {
-      sort: 'id',
-      fields: ['id'].join(',')
-    }
-    return api.fingerbankUserAgents(params).then(response => {
-      return response.items
-    })
-  },
-  getUserAgent: ({ state, commit }, id) => {
-    if (state.userAgents.cache[id]) {
-      return Promise.resolve(state.userAgents.cache[id])
-    }
-    commit('USER_AGENT_REQUEST')
-    return api.fingerbankUserAgent(id).then(item => {
-      commit('USER_AGENT_REPLACED', item)
-      return JSON.parse(JSON.stringify(item))
-    }).catch(err => {
-      commit('USER_AGENT_ERROR', err.response)
-      throw err
-    })
-  },
-  createUserAgent: ({ commit }, data) => {
-    commit('USER_AGENT_REQUEST')
-    return api.fingerbankCreateUserAgent(data).then(response => {
-      data.id = response.id
-      commit('USER_AGENT_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('USER_AGENT_ERROR', err.response)
-      throw err
-    })
-  },
-  updateUserAgent: ({ commit }, data) => {
-    commit('USER_AGENT_REQUEST')
-    return api.fingerbankUpdateUserAgent(data).then(response => {
-      commit('USER_AGENT_REPLACED', data)
-      return response
-    }).catch(err => {
-      commit('USER_AGENT_ERROR', err.response)
-      throw err
-    })
-  },
-  deleteUserAgent: ({ commit }, data) => {
-    commit('USER_AGENT_REQUEST', types.DELETING)
-    return api.fingerbankDeleteUserAgent(data).then(response => {
-      commit('USER_AGENT_DESTROYED', data)
-      return response
-    }).catch(err => {
-      commit('USER_AGENT_ERROR', err.response)
-      throw err
-    })
-  },
   updateDatabase: ({ commit }, data) => {
     commit('UPDATE_DATABASE_REQUEST')
     return api.fingerbankUpdateDatabase().then(response => {
@@ -642,6 +175,16 @@ const actions = {
 }
 
 const mutations = {
+  ...mutationsGeneralSettings,
+  ...mutationsCombinations,
+  ...mutationsDevices,
+  ...mutationsDhcpFingerprints,
+  ...mutationsDhcpVendors,
+  ...mutationsDhcpv6Fingerprints,
+  ...mutationsDhcpv6Enterprises,
+  ...mutationsMacVendors,
+  ...mutationsUserAgents,
+
   ACCOUNT_INFO_REQUEST: (state, type) => {
     state.accountInfo.status = type || types.LOADING
     state.accountInfo.message = ''
@@ -673,174 +216,6 @@ const mutations = {
       state.canUseNbaEndpoints.message = response.data.message
     }
   },
-  GENERAL_SETTINGS_REQUEST: (state, type) => {
-    state.generalSettings.status = type || types.LOADING
-    state.generalSettings.message = ''
-  },
-  GENERAL_SETTINGS_REPLACED: (state, data) => {
-    state.generalSettings.status = types.SUCCESS
-    if (!state.generalSettings.cache)
-      Vue.set(state.generalSettings, 'cache', {})
-    for (let id of Object.keys(data)) {
-      Vue.set(state.generalSettings.cache, id, data[id])
-    }
-  },
-  GENERAL_SETTINGS_ERROR: (state, response) => {
-    state.generalSettings.status = types.ERROR
-    if (response && response.data) {
-      state.generalSettings.message = response.data.message
-    }
-  },
-  GENERAL_SETTINGS_SUCCESS: (state) => {
-    state.generalSettings.status = types.SUCCESS
-  },
-  COMBINATION_REQUEST: (state, type) => {
-    state.combinations.status = type || types.LOADING
-    state.combinations.message = ''
-  },
-  COMBINATION_REPLACED: (state, data) => {
-    state.combinations.status = types.SUCCESS
-    Vue.set(state.combinations.cache, data.id, data)
-  },
-  COMBINATION_DESTROYED: (state, id) => {
-    state.combinations.status = types.SUCCESS
-    Vue.set(state.combinations.cache, id, null)
-  },
-  COMBINATION_ERROR: (state, response) => {
-    state.combinations.status = types.ERROR
-    if (response && response.data) {
-      state.combinations.message = response.data.message
-    }
-  },
-  COMBINATION_SUCCESS: (state) => {
-    state.combinations.status = types.SUCCESS
-  },
-  DEVICE_REQUEST: (state, type) => {
-    state.devices.status = type || types.LOADING
-    state.devices.message = ''
-  },
-  DEVICE_REPLACED: (state, data) => {
-    state.devices.status = types.SUCCESS
-    Vue.set(state.devices.cache, data.id, data)
-  },
-  DEVICE_DESTROYED: (state, id) => {
-    state.devices.status = types.SUCCESS
-    Vue.set(state.devices.cache, id, null)
-  },
-  DEVICE_ERROR: (state, response) => {
-    state.devices.status = types.ERROR
-    if (response && response.data) {
-      state.devices.message = response.data.message
-    }
-  },
-  DHCP_FINGERPRINT_REQUEST: (state, type) => {
-    state.dhcpFingerprints.status = type || types.LOADING
-    state.dhcpFingerprints.message = ''
-  },
-  DHCP_FINGERPRINT_REPLACED: (state, data) => {
-    state.dhcpFingerprints.status = types.SUCCESS
-    Vue.set(state.dhcpFingerprints.cache, data.id, data)
-  },
-  DHCP_FINGERPRINT_DESTROYED: (state, id) => {
-    state.dhcpFingerprints.status = types.SUCCESS
-    Vue.set(state.dhcpFingerprints.cache, id, null)
-  },
-  DHCP_FINGERPRINT_ERROR: (state, response) => {
-    state.dhcpFingerprints.status = types.ERROR
-    if (response && response.data) {
-      state.dhcpFingerprints.message = response.data.message
-    }
-  },
-  DHCP_VENDOR_REQUEST: (state, type) => {
-    state.dhcpFingerprints.status = type || types.LOADING
-    state.dhcpVendors.message = ''
-  },
-  DHCP_VENDOR_REPLACED: (state, data) => {
-    state.dhcpFingerprints.status = types.SUCCESS
-    Vue.set(state.dhcpVendors.cache, data.id, data)
-  },
-  DHCP_VENDOR_DESTROYED: (state, id) => {
-    state.dhcpFingerprints.status = types.SUCCESS
-    Vue.set(state.dhcpVendors.cache, id, null)
-  },
-  DHCP_VENDOR_ERROR: (state, response) => {
-    state.dhcpFingerprints.status = types.ERROR
-    if (response && response.data) {
-      state.dhcpVendors.message = response.data.message
-    }
-  },
-  DHCPV6_FINGERPRINT_REQUEST: (state, type) => {
-    state.dhcpv6Fingerprints.status = type || types.LOADING
-    state.dhcpv6Fingerprints.message = ''
-  },
-  DHCPV6_FINGERPRINT_REPLACED: (state, data) => {
-    state.dhcpv6Fingerprints.status = types.SUCCESS
-    Vue.set(state.dhcpv6Fingerprints.cache, data.id, data)
-  },
-  DHCPV6_FINGERPRINT_DESTROYED: (state, id) => {
-    state.dhcpv6Fingerprints.status = types.SUCCESS
-    Vue.set(state.dhcpv6Fingerprints.cache, id, null)
-  },
-  DHCPV6_FINGERPRINT_ERROR: (state, response) => {
-    state.dhcpv6Fingerprints.status = types.ERROR
-    if (response && response.data) {
-      state.dhcpv6Fingerprints.message = response.data.message
-    }
-  },
-  DHCPV6_ENTERPRISE_REQUEST: (state, type) => {
-    state.dhcpv6Enterprises.status = type || types.LOADING
-    state.dhcpv6Enterprises.message = ''
-  },
-  DHCPV6_ENTERPRISE_REPLACED: (state, data) => {
-    state.dhcpv6Enterprises.status = types.SUCCESS
-    Vue.set(state.dhcpv6Enterprises.cache, data.id, data)
-  },
-  DHCPV6_ENTERPRISE_DESTROYED: (state, id) => {
-    state.dhcpv6Enterprises.status = types.SUCCESS
-    Vue.set(state.dhcpv6Enterprises.cache, id, null)
-  },
-  DHCPV6_ENTERPRISE_ERROR: (state, response) => {
-    state.dhcpv6Enterprises.status = types.ERROR
-    if (response && response.data) {
-      state.dhcpv6Enterprises.message = response.data.message
-    }
-  },
-  MAC_VENDOR_REQUEST: (state, type) => {
-    state.macVendors.status = type || types.LOADING
-    state.macVendors.message = ''
-  },
-  MAC_VENDOR_REPLACED: (state, data) => {
-    state.macVendors.status = types.SUCCESS
-    Vue.set(state.macVendors.cache, data.id, data)
-  },
-  MAC_VENDOR_DESTROYED: (state, id) => {
-    state.macVendors.status = types.SUCCESS
-    Vue.set(state.macVendors.cache, id, null)
-  },
-  MAC_VENDOR_ERROR: (state, response) => {
-    state.macVendors.status = types.ERROR
-    if (response && response.data) {
-      state.macVendors.message = response.data.message
-    }
-  },
-  USER_AGENT_REQUEST: (state, type) => {
-    state.userAgents.status = type || types.LOADING
-    state.userAgents.message = ''
-  },
-  USER_AGENT_REPLACED: (state, data) => {
-    state.userAgents.status = types.SUCCESS
-    Vue.set(state.userAgents.cache, data.id, data)
-  },
-  USER_AGENT_DESTROYED: (state, id) => {
-    state.userAgents.status = types.SUCCESS
-    Vue.set(state.userAgents.cache, id, null)
-  },
-  USER_AGENT_ERROR: (state, response) => {
-    state.userAgents.status = types.ERROR
-    if (response && response.data) {
-      state.userAgents.message = response.data.message
-    }
-  },
   UPDATE_DATABASE_REQUEST: (state, type) => {
     state.updateDatabase.status = type || types.LOADING
     state.updateDatabase.message = ''
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_api.js b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_api.js
index 912467bc70db..8af138f0319a 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_api.js
@@ -1,27 +1,27 @@
 import apiCall from '@/utils/api'
 
 export default {
-  fingerbankCombinations: params => {
+  list: params => {
     return apiCall.get(['fingerbank', 'local', 'combinations'], { params }).then(response => {
       return response.data
     })
   },
-  fingerbankSearchCombinations: body => {
+  search: body => {
     return apiCall.post('fingerbank/local/combinations/search', body).then(response => {
       return response.data
     })
   },
-  fingerbankCombination: id => {
+  item: id => {
     return apiCall.get(['fingerbank', 'local', 'combination', id]).then(response => {
       return response.data.item
     })
   },
-  fingerbankCreateCombination: data => {
+  create: data => {
     return apiCall.post('fingerbank/local/combinations', data).then(response => {
       return response.data
     })
   },
-  fingerbankUpdateCombination: data => {
+  update: data => {
     Object.keys(data).forEach(key => {
       if (/^not_/.test(key)) { // remove fields starting with 'not_'
         delete data[key]
@@ -31,7 +31,7 @@ export default {
       return response.data
     })
   },
-  fingerbankDeleteCombination: id => {
+  delete: id => {
     return apiCall.delete(['fingerbank', 'local', 'combination', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheSearch.vue
new file mode 100644
index 000000000000..aa219b9e9b4a
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheSearch.vue
@@ -0,0 +1,167 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center">
+        {{ $t('Combinations') }}
+      </h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New Combination') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(score)="item">
+          <pf-fingerbank-score :score="item.score"></pf-fingerbank-score>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Combination?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import pfFingerbankScore from '@/components/pfFingerbankScore'
+
+const components = {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable,
+  pfFingerbankScore
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_fingerbank/deleteCombination', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
index 0c676fb394f5..962b7c3f4267 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
@@ -45,3 +45,74 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/updateCombination', form.value),
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('fingerbankCombinations', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'device_id',
+      label: 'Device', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'score',
+      label: 'Score', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'created_at',
+      label: 'Created', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'updated_at',
+      label: 'Updated', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'device_id',
+      text: i18n.t('Device'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null },
+      { field: 'device_id', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_router.js
index 7838acf2865c..9523ddc41ab7 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_router.js
@@ -8,6 +8,7 @@ export const useRouter = $router => {
       .push({ name: 'fingerbankCombination', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneFingerbankCombination', params }),
+    goToNew: () => $router.push({ name: 'newFingerbankCombination' })
   }
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_store.js
new file mode 100644
index 000000000000..a0c9ae623ab8
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_store.js
@@ -0,0 +1,105 @@
+import Vue from 'vue'
+import api from './_api'
+
+const types = {
+  LOADING: 'loading',
+  DELETING: 'deleting',
+  SUCCESS: 'success',
+  ERROR: 'error'
+}
+
+// Default values
+export const state = () => {
+  return {
+    combinations: {
+      cache: {},
+      message: '',
+      status: ''
+    }
+  }
+}
+
+export const getters = {
+  isCombinationsWaiting: state => [types.LOADING, types.DELETING].includes(state.combinations.status),
+  isCombinationsLoading: state => state.combinations.status === types.LOADING,
+}
+
+export const actions = {
+  combinations: () => {
+    const params = {
+      sort: 'id',
+      fields: ['id'].join(',')
+    }
+    return api.list(params).then(response => {
+      return response.items
+    })
+  },
+  getCombination: ({ state, commit }, id) => {
+    if (state.combinations.cache[id]) {
+      return Promise.resolve(state.combinations.cache[id])
+    }
+    commit('COMBINATION_REQUEST')
+    return api.item(id).then(item => {
+      commit('COMBINATION_REPLACED', item)
+      return JSON.parse(JSON.stringify(item))
+    }).catch(err => {
+      commit('COMBINATION_ERROR', err.response)
+      throw err
+    })
+  },
+  createCombination: ({ commit }, data) => {
+    commit('COMBINATION_REQUEST')
+    return api.create(data).then(response => {
+      data.id = response.id
+      commit('COMBINATION_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('COMBINATION_ERROR', err.response)
+      throw err
+    })
+  },
+  updateCombination: ({ commit }, data) => {
+    commit('COMBINATION_REQUEST')
+    return api.update(data).then(response => {
+      commit('COMBINATION_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('COMBINATION_ERROR', err.response)
+      throw err
+    })
+  },
+  deleteCombination: ({ commit }, data) => {
+    commit('COMBINATION_REQUEST', types.DELETING)
+    return api.delete(data).then(response => {
+      commit('COMBINATION_DESTROYED', data)
+      return response
+    }).catch(err => {
+      commit('COMBINATION_ERROR', err.response)
+      throw err
+    })
+  }
+}
+
+export const mutations = {
+  COMBINATION_REQUEST: (state, type) => {
+    state.combinations.status = type || types.LOADING
+    state.combinations.message = ''
+  },
+  COMBINATION_REPLACED: (state, data) => {
+    state.combinations.status = types.SUCCESS
+    Vue.set(state.combinations.cache, data.id, data)
+  },
+  COMBINATION_DESTROYED: (state, id) => {
+    state.combinations.status = types.SUCCESS
+    Vue.set(state.combinations.cache, id, null)
+  },
+  COMBINATION_ERROR: (state, response) => {
+    state.combinations.status = types.ERROR
+    if (response && response.data) {
+      state.combinations.message = response.data.message
+    }
+  },
+  COMBINATION_SUCCESS: (state) => {
+    state.combinations.status = types.SUCCESS
+  }
+}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_api.js b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_api.js
index 9d5ad9823efc..c16e6b6ee425 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_api.js
@@ -1,32 +1,38 @@
 import apiCall from '@/utils/api'
 
 export default {
-  fingerbankDevices: params => {
+  list: params => {
     return apiCall.get(['fingerbank', 'all', 'devices'], { params }).then(response => {
       return response.data
     })
   },
-  fingerbankSearchDevices: body => {
-    return apiCall.post('fingerbank/all/devices/search', body).then(response => {
-      return response.data
-    })
+  search: body => {
+    const { scope, ...rest } = body
+    if (scope)
+      return apiCall.post(`fingerbank/${scope}/devices/search`, rest).then(response => {
+        return response.data
+      })
+    else
+      return apiCall.post('fingerbank/all/devices/search', body).then(response => {
+        return response.data
+      })
   },
-  fingerbankDevice: id => {
+  item: id => {
     return apiCall.get(['fingerbank', 'all', 'device', id]).then(response => {
       return response.data.item
     })
   },
-  fingerbankCreateDevice: data => {
+  create: data => {
     return apiCall.post('fingerbank/local/devices', data).then(response => {
       return response.data
     })
   },
-  fingerbankUpdateDevice: data => {
+  update: data => {
     return apiCall.patch(['fingerbank', 'local', 'device', data.id], data).then(response => {
       return response.data
     })
   },
-  fingerbankDeleteDevice: id => {
+  delete: id => {
     return apiCall.delete(['fingerbank', 'local', 'device', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/BreadCrumb.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/BreadCrumb.vue
new file mode 100644
index 000000000000..5a7f7d83d6c5
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/BreadCrumb.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="d-flex" :key="id">
+    <bread-crumb v-if="device.parent_id"
+      :id="device.parent_id" :scope="scope" />
+    <b-button v-else
+      variant="link" class="px-0 mr-2 text-secondary"
+      :to="{ name: 'fingerbankDevicesByScope', params: { scope } }"
+    >
+      <icon name="times" variant="primary" />
+    </b-button>
+    <b-button
+      variant="link" class="px-0 mr-2 text-primary"
+      :to="{ name: 'fingerbankDevicesByParentId', params: { parentId: device.id } }"
+    >
+      <icon v-if="device.parent_id"
+        name="caret-right" variant="text-secondary" class="mr-1" />
+      {{ device.name }}
+    </b-button>
+  </div>
+</template>
+<script>
+const props = {
+  id: {
+    type: String
+  },
+  scope: {
+    type: String
+  }
+}
+
+import { onMounted, ref, toRefs } from '@vue/composition-api'
+
+const setup = (props, context) => {
+
+  const {
+    id
+  } = toRefs(props)
+
+  const { root: { $store } = {} } = context
+
+  const device = ref({ name: '...' })
+  onMounted(() => {
+    $store.dispatch('$_fingerbank/getDevice', id.value).then(item => {
+      device.value = item
+    })
+  })
+
+  return {
+    device
+  }
+}
+// @vue/component
+export default {
+  name: 'bread-crumb',
+  inheritAttrs: false,
+  props,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue
new file mode 100644
index 000000000000..d30d20bab5b1
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue
@@ -0,0 +1,233 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center">
+        {{ $t('Devices') }}
+      </h4>
+      <b-button-group v-if="!parentId" class="mt-3">
+        <b-button v-t="'All'" :variant="(scope === 'all') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankDevicesByScope', params: { scope: 'all' } }"></b-button>
+        <b-button v-t="'Local'" :variant="(scope === 'local') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankDevicesByScope', params: { scope: 'local' } }"></b-button>
+        <b-button v-t="'Upstream'" :variant="(scope === 'upstream') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankDevicesByScope', params: { scope: 'upstream' } }"></b-button>
+      </b-button-group>
+    </b-card-header>
+    <div class="card-body">
+      <base-search v-if="!parentId"
+        :use-search="useSearch"
+      >
+        <b-button variant="outline-primary" @click="onNewClicked">{{ $t('New Device') }}</b-button>
+      </base-search>
+      <template v-else>
+        <bread-crumb :key="parentId" :id="parentId" :scope="scope"
+          class="mb-3" />
+      </template>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="onRowClicked"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(id)="{ item }">
+          <b-button size="sm" variant="outline-primary" class="mr-1" :to="{ name: 'fingerbankDevicesByParentId', params: { parentId: item.id } }">
+            <span class="text-nowrap align-items-center ml-2">
+              {{ item.id }} <icon name="plus-circle" class="ml-2"></icon>
+            </span>
+          </b-button>
+        </template>
+        <template #cell(approved)="{ item }">
+          <icon name="circle" :class="{
+            'text-success': +item.approved === 1,
+            'text-danger': +item.approved === 0
+          }" />
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Device?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="onCloneClicked(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import BreadCrumb from './BreadCrumb'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BreadCrumb,
+  pfEmptyTable
+}
+
+const props = {
+  parentId: {
+    type: String
+  },
+  scope: {
+    type: String
+  }
+}
+
+import { ref, toRefs, watch } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const {
+    parentId,
+    scope
+  } = toRefs(props)
+
+  const { root: { $router, $store } = {} } = context
+  const router = useRouter($router)
+  const {
+    goToClone,
+    goToItem,
+    goToNew
+  } = router
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  const onCloneClicked = item => goToClone({ scope: 'local', id: item.id })
+  const onNewClicked = () => goToNew({ scope: scope.value })
+  const onRowClicked = item => goToItem({ scope: 'local', id: item.id })
+
+  watch([parentId, scope], () => {
+    search.requestInterceptor = request => {
+      request.scope = scope.value
+      if (parentId.value) {
+        // rewrite current request
+        request.query = { op: 'and', values: [
+          { op: 'or', values: [
+            { field: 'parent_id', op: 'equals', value: parentId.value }
+          ] }
+        ] }
+      }
+      return request
+    }
+    reSearch()
+  }, { immediate: true })
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    onCloneClicked,
+    onNewClicked,
+    onRowClicked,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  props,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
index a088a674b689..f1cfb5d2c46c 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
@@ -45,3 +45,79 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/updateDevice', form.value),
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+const { list, ...apiWithoutList } = api
+export const useSearch = makeSearch('fingerbankDevices', {
+  api: apiWithoutList,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'name',
+      label: 'Device', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'created_at',
+      label: 'Created', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'updated_at',
+      label: 'Updated', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'approved',
+      label: 'Approved', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'name',
+      text: i18n.t('Device'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'parent_id',
+      text: i18n.t('Parent'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'parent_id', op: 'equals', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_router.js
index ebc52d5ca807..dfced1fcb52d 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_router.js
@@ -1,16 +1,13 @@
-import { toRefs } from '@vue/composition-api'
 import store from '@/store'
 
 export const useRouter = $router => {
   return {
     goToCollection: () => $router.push({ name: 'fingerbankDevices' }),
-    goToItem: (params, props) => {
-      const { scope } = toRefs(props)
-      $router
-        .push({ name: 'fingerbankDevice', params: { ...params, scope: scope.value } })
-        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
-    },
-    goToClone: params => $router.push({ name: 'cloneFingerbankDevice', params: { ...params, scope: 'local' } })
+    goToItem: params => $router
+      .push({ name: 'fingerbankDevice', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneFingerbankDevice', params }),
+    goToNew: params => $router.push({ name: 'newFingerbankDevice', params })
   }
 }
 
@@ -22,13 +19,19 @@ export default [
     path: 'fingerbank/devices',
     name: 'fingerbankDevices',
     component: TheTabs,
-    props: (route) => ({ tab: 'devices', query: route.query.query })
+    props: () => ({ tab: 'devices', scope: 'all', parentId: undefined })
+  },
+  {
+    path: 'fingerbank/:scope/devices',
+    name: 'fingerbankDevicesByScope',
+    component: TheTabs,
+    props: (route) => ({ tab: 'devices', scope: route.params.scope, parentId: undefined })
   },
   {
     path: 'fingerbank/devices/:parentId',
     name: 'fingerbankDevicesByParentId',
     component: TheTabs,
-    props: (route) => ({ parentId: route.params.parentId, tab: 'devices', query: route.query.query })
+    props: (route) => ({ tab: 'devices', scope: 'all', parentId: route.params.parentId })
   },
   {
     path: 'fingerbank/:scope/devices/new',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_store.js
new file mode 100644
index 000000000000..e6f85c09ef19
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_store.js
@@ -0,0 +1,102 @@
+import Vue from 'vue'
+import api from './_api'
+
+const types = {
+  LOADING: 'loading',
+  DELETING: 'deleting',
+  SUCCESS: 'success',
+  ERROR: 'error'
+}
+
+// Default values
+export const state = () => {
+  return {
+    devices: {
+      cache: {},
+      message: '',
+      status: ''
+    }
+  }
+}
+
+export const getters = {
+  isDevicesWaiting: state => [types.LOADING, types.DELETING].includes(state.devices.status),
+  isDevicesLoading: state => state.devices.status === types.LOADING
+}
+
+export const actions = {
+  devices: () => {
+    const params = {
+      sort: 'id',
+      fields: ['id'].join(',')
+    }
+    return api.list(params).then(response => {
+      return response.items
+    })
+  },
+  getDevice: ({ state, commit }, id) => {
+    if (state.devices.cache[id]) {
+      return Promise.resolve(state.devices.cache[id])
+    }
+    commit('DEVICE_REQUEST')
+    return api.item(id).then(item => {
+      commit('DEVICE_REPLACED', item)
+      return JSON.parse(JSON.stringify(item))
+    }).catch(err => {
+      commit('DEVICE_ERROR', err.response)
+      throw err
+    })
+  },
+  createDevice: ({ commit }, data) => {
+    commit('DEVICE_REQUEST')
+    return api.create(data).then(response => {
+      data.id = response.id
+      commit('DEVICE_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('DEVICE_ERROR', err.response)
+      throw err
+    })
+  },
+  updateDevice: ({ commit }, data) => {
+    commit('DEVICE_REQUEST')
+    return api.update(data).then(response => {
+      commit('DEVICE_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('DEVICE_ERROR', err.response)
+      throw err
+    })
+  },
+  deleteDevice: ({ commit }, data) => {
+    commit('DEVICE_REQUEST', types.DELETING)
+    return api.delete(data).then(response => {
+      commit('DEVICE_DESTROYED', data)
+      return response
+    }).catch(err => {
+      commit('DEVICE_ERROR', err.response)
+      throw err
+    })
+  }
+}
+
+export const mutations = {
+  DEVICE_REQUEST: (state, type) => {
+    state.devices.status = type || types.LOADING
+    state.devices.message = ''
+  },
+  DEVICE_REPLACED: (state, data) => {
+    state.devices.status = types.SUCCESS
+    Vue.set(state.devices.cache, data.id, data)
+  },
+  DEVICE_DESTROYED: (state, id) => {
+    state.devices.status = types.SUCCESS
+    Vue.set(state.devices.cache, id, null)
+  },
+  DEVICE_ERROR: (state, response) => {
+    state.devices.status = types.ERROR
+    if (response && response.data) {
+      state.devices.message = response.data.message
+    }
+  }
+}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_api.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_api.js
index ceef3086ca07..729e0f88d1ba 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_api.js
@@ -1,32 +1,38 @@
 import apiCall from '@/utils/api'
 
 export default {
-  fingerbankDhcpFingerprints: params => {
+  list: params => {
     return apiCall.get(['fingerbank', 'all', 'dhcp_fingerprints'], { params }).then(response => {
       return response.data
     })
   },
-  fingerbankSearchDhcpFingerprints: body => {
-    return apiCall.post('fingerbank/all/dhcp_fingerprints/search', body).then(response => {
-      return response.data
-    })
+  search: body => {
+    const { scope, ...rest } = body
+    if (scope)
+      return apiCall.post(`fingerbank/${scope}/dhcp_fingerprints/search`, rest).then(response => {
+        return response.data
+      })
+    else
+      return apiCall.post('fingerbank/all/dhcp_fingerprints/search', body).then(response => {
+        return response.data
+      })
   },
-  fingerbankDhcpFingerprint: id => {
+  item: id => {
     return apiCall.get(['fingerbank', 'all', 'dhcp_fingerprint', id]).then(response => {
       return response.data.item
     })
   },
-  fingerbankCreateDhcpFingerprint: data => {
+  create: data => {
     return apiCall.post('fingerbank/local/dhcp_fingerprints', data).then(response => {
       return response.data
     })
   },
-  fingerbankUpdateDhcpFingerprint: data => {
+  update: data => {
     return apiCall.patch(['fingerbank', 'local', 'dhcp_fingerprint', data.id], data).then(response => {
       return response.data
     })
   },
-  fingerbankDeleteDhcpFingerprint: id => {
+  delete: id => {
     return apiCall.delete(['fingerbank', 'local', 'dhcp_fingerprint', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue
new file mode 100644
index 000000000000..fb137111e847
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue
@@ -0,0 +1,200 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center">
+        {{ $t('DHCP Fingerprints') }}
+      </h4>
+      <b-button-group class="mt-3">
+        <b-button v-t="'All'" :variant="(scope === 'all') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankDhcpFingerprintsByScope', params: { scope: 'all' } }"></b-button>
+        <b-button v-t="'Local'" :variant="(scope === 'local') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankDhcpFingerprintsByScope', params: { scope: 'local' } }"></b-button>
+        <b-button v-t="'Upstream'" :variant="(scope === 'upstream') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankDhcpFingerprintsByScope', params: { scope: 'upstream' } }"></b-button>
+      </b-button-group>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="onNewClicked">{{ $t('New DHCP Fingerprint') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="onRowClicked"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete DHCP Fingerprint?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="onCloneClicked(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+const props = {
+  scope: {
+    type: String
+  }
+}
+
+import { ref, toRefs, watch } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const {
+    scope
+  } = toRefs(props)
+
+  const { root: { $router, $store } = {} } = context
+  const router = useRouter($router)
+  const {
+    goToClone,
+    goToItem,
+    goToNew
+  } = router
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  const onCloneClicked = item => goToClone({ scope: 'local', id: item.id })
+  const onNewClicked = () => goToNew({ scope: scope.value })
+  const onRowClicked = item => goToItem({ scope: 'local', id: item.id })
+
+  watch(scope, () => {
+    search.requestInterceptor = request => {
+      request.scope = scope.value
+      return request
+    }
+    reSearch()
+  }, { immediate: true })
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    onCloneClicked,
+    onNewClicked,
+    onRowClicked,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  props,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
index 493eb358d016..4b86670a8bb8 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
@@ -45,3 +45,67 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/updateDhcpFingerprint', form.value),
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('fingerbankDhcpFingerprints', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'value',
+      label: 'DHCP Fingerprint', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'created_at',
+      label: 'Created', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'updated_at',
+      label: 'Updated', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'value',
+      text: i18n.t('DHCP Fingerprint'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_router.js
index 3c09f97c4d19..3940578da2bf 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_router.js
@@ -1,27 +1,31 @@
-import { toRefs } from '@vue/composition-api'
 import store from '@/store'
-import { TheTabs } from '../_components/'
-const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
 
 export const useRouter = $router => {
   return {
     goToCollection: () => $router.push({ name: 'fingerbankDhcpFingerprints' }),
-    goToItem: (params, props) => {
-      const { scope } = toRefs(props)
-      $router
-        .push({ name: 'fingerbankDhcpFingerprint', params: { ...params, scope: scope.value } })
-        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
-    },
-    goToClone: params => $router.push({ name: 'cloneFingerbankDhcpFingerprint', params: { ...params, scope: 'local' } })
+    goToItem: params => $router
+      .push({ name: 'fingerbankDhcpFingerprint', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneFingerbankDhcpFingerprint', params }),
+    goToNew: params => $router.push({ name: 'newFingerbankDhcpFingerprint', params })
   }
 }
 
+import { TheTabs } from '../_components/'
+const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
+
 export default [
   {
     path: 'fingerbank/dhcp_fingerprints',
     name: 'fingerbankDhcpFingerprints',
     component: TheTabs,
-    props: (route) => ({ tab: 'dhcp_fingerprints', query: route.query.query })
+    props: () => ({ tab: 'dhcp_fingerprints', scope: 'all' })
+  },
+  {
+    path: 'fingerbank/:scope/dhcp_fingerprints',
+    name: 'fingerbankDhcpFingerprintsByScope',
+    component: TheTabs,
+    props: (route) => ({ tab: 'dhcp_fingerprints', scope: route.params.scope })
   },
   {
     path: 'fingerbank/:scope/dhcp_fingerprints/new',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_store.js
new file mode 100644
index 000000000000..f24accf1dcfb
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_store.js
@@ -0,0 +1,102 @@
+import Vue from 'vue'
+import api from './_api'
+
+const types = {
+  LOADING: 'loading',
+  DELETING: 'deleting',
+  SUCCESS: 'success',
+  ERROR: 'error'
+}
+
+// Default values
+export const state = () => {
+  return {
+    dhcpFingerprints: {
+      cache: {},
+      message: '',
+      status: ''
+    }
+  }
+}
+
+export const getters = {
+  isDhcpFingerprintsWaiting: state => [types.LOADING, types.DELETING].includes(state.dhcpFingerprints.status),
+  isDhcpFingerprintsLoading: state => state.dhcpFingerprints.status === types.LOADING
+}
+
+export const actions = {
+  dhcpFingerprints: () => {
+    const params = {
+      sort: 'id',
+      fields: ['id'].join(',')
+    }
+    return api.list(params).then(response => {
+      return response.items
+    })
+  },
+  getDhcpFingerprint: ({ state, commit }, id) => {
+    if (state.dhcpFingerprints.cache[id]) {
+      return Promise.resolve(state.dhcpFingerprints.cache[id])
+    }
+    commit('DHCP_FINGERPRINT_REQUEST')
+    return api.item(id).then(item => {
+      commit('DHCP_FINGERPRINT_REPLACED', item)
+      return JSON.parse(JSON.stringify(item))
+    }).catch(err => {
+      commit('DHCP_FINGERPRINT_ERROR', err.response)
+      throw err
+    })
+  },
+  createDhcpFingerprint: ({ commit }, data) => {
+    commit('DHCP_FINGERPRINT_REQUEST')
+    return api.create(data).then(response => {
+      data.id = response.id
+      commit('DHCP_FINGERPRINT_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('DHCP_FINGERPRINT_ERROR', err.response)
+      throw err
+    })
+  },
+  updateDhcpFingerprint: ({ commit }, data) => {
+    commit('DHCP_FINGERPRINT_REQUEST')
+    return api.update(data).then(response => {
+      commit('DHCP_FINGERPRINT_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('DHCP_FINGERPRINT_ERROR', err.response)
+      throw err
+    })
+  },
+  deleteDhcpFingerprint: ({ commit }, data) => {
+    commit('DHCP_FINGERPRINT_REQUEST', types.DELETING)
+    return api.delete(data).then(response => {
+      commit('DHCP_FINGERPRINT_DESTROYED', data)
+      return response
+    }).catch(err => {
+      commit('DHCP_FINGERPRINT_ERROR', err.response)
+      throw err
+    })
+  }
+}
+
+export const mutations = {
+  DHCP_FINGERPRINT_REQUEST: (state, type) => {
+    state.dhcpFingerprints.status = type || types.LOADING
+    state.dhcpFingerprints.message = ''
+  },
+  DHCP_FINGERPRINT_REPLACED: (state, data) => {
+    state.dhcpFingerprints.status = types.SUCCESS
+    Vue.set(state.dhcpFingerprints.cache, data.id, data)
+  },
+  DHCP_FINGERPRINT_DESTROYED: (state, id) => {
+    state.dhcpFingerprints.status = types.SUCCESS
+    Vue.set(state.dhcpFingerprints.cache, id, null)
+  },
+  DHCP_FINGERPRINT_ERROR: (state, response) => {
+    state.dhcpFingerprints.status = types.ERROR
+    if (response && response.data) {
+      state.dhcpFingerprints.message = response.data.message
+    }
+  }
+}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_api.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_api.js
index 506c9161f522..a26c16df4c1f 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_api.js
@@ -1,32 +1,38 @@
 import apiCall from '@/utils/api'
 
 export default {
-  fingerbankDhcpVendors: params => {
+  list: params => {
     return apiCall.get(['fingerbank', 'all', 'dhcp_vendors'], { params }).then(response => {
       return response.data
     })
   },
-  fingerbankSearchDhcpVendors: body => {
-    return apiCall.post('fingerbank/all/dhcp_vendors/search', body).then(response => {
-      return response.data
-    })
+  search: body => {
+    const { scope, ...rest } = body
+    if (scope)
+      return apiCall.post(`fingerbank/${scope}/dhcp_vendors/search`, rest).then(response => {
+        return response.data
+      })
+    else
+      return apiCall.post('fingerbank/all/dhcp_vendors/search', body).then(response => {
+        return response.data
+      })
   },
-  fingerbankDhcpVendor: id => {
+  item: id => {
     return apiCall.get(['fingerbank', 'all', 'dhcp_vendor', id]).then(response => {
       return response.data.item
     })
   },
-  fingerbankCreateDhcpVendor: data => {
+  create: data => {
     return apiCall.post('fingerbank/local/dhcp_vendors', data).then(response => {
       return response.data
     })
   },
-  fingerbankUpdateDhcpVendor: data => {
+  update: data => {
     return apiCall.patch(['fingerbank', 'local', 'dhcp_vendor', data.id], data).then(response => {
       return response.data
     })
   },
-  fingerbankDeleteDhcpVendor: id => {
+  delete: id => {
     return apiCall.delete(['fingerbank', 'local', 'dhcp_vendor', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue
new file mode 100644
index 000000000000..3a4fd3ee757f
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue
@@ -0,0 +1,200 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center">
+        {{ $t('DHCP Vendors') }}
+      </h4>
+      <b-button-group class="mt-3">
+        <b-button v-t="'All'" :variant="(scope === 'all') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankDhcpVendorsByScope', params: { scope: 'all' } }"></b-button>
+        <b-button v-t="'Local'" :variant="(scope === 'local') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankDhcpVendorsByScope', params: { scope: 'local' } }"></b-button>
+        <b-button v-t="'Upstream'" :variant="(scope === 'upstream') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankDhcpVendorsByScope', params: { scope: 'upstream' } }"></b-button>
+      </b-button-group>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="onNewClicked">{{ $t('New DHCP Vendor') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="onRowClicked"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete DHCP Vendor?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="onCloneClicked(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+const props = {
+  scope: {
+    type: String
+  }
+}
+
+import { ref, toRefs, watch } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const {
+    scope
+  } = toRefs(props)
+
+  const { root: { $router, $store } = {} } = context
+  const router = useRouter($router)
+  const {
+    goToClone,
+    goToItem,
+    goToNew
+  } = router
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  const onCloneClicked = item => goToClone({ scope: 'local', id: item.id })
+  const onNewClicked = () => goToNew({ scope: scope.value })
+  const onRowClicked = item => goToItem({ scope: 'local', id: item.id })
+
+  watch(scope, () => {
+    search.requestInterceptor = request => {
+      request.scope = scope.value
+      return request
+    }
+    reSearch()
+  }, { immediate: true })
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    onCloneClicked,
+    onNewClicked,
+    onRowClicked,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  props,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
index 30864046475c..cfc1a5e14aa8 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
@@ -45,3 +45,67 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/updateDhcpVendor', form.value),
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('fingerbankDhcpVendors', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'value',
+      label: 'DHCP Vendor', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'created_at',
+      label: 'Created', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'updated_at',
+      label: 'Updated', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'value',
+      text: i18n.t('DHCP Vendor'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_router.js
index bbecb496a0c1..401486ab8c8b 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_router.js
@@ -1,27 +1,31 @@
-import { toRefs } from '@vue/composition-api'
 import store from '@/store'
-import { TheTabs } from '../_components/'
-const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
 
 export const useRouter = $router => {
   return {
     goToCollection: () => $router.push({ name: 'fingerbankDhcpVendors' }),
-    goToItem: (params, props) => {
-      const { scope } = toRefs(props)
-      $router
-        .push({ name: 'fingerbankDhcpVendor', params: { ...params, scope: scope.value } })
-        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
-    },
-    goToClone: params => $router.push({ name: 'cloneFingerbankDhcpVendor', params: { ...params, scope: 'local' } })
+    goToItem: params => $router
+      .push({ name: 'fingerbankDhcpVendor', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneFingerbankDhcpVendor', params }),
+    goToNew: params => $router.push({ name: 'newFingerbankDhcpVendor', params })
   }
 }
 
+import { TheTabs } from '../_components/'
+const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
+
 export default [
   {
     path: 'fingerbank/dhcp_vendors',
     name: 'fingerbankDhcpVendors',
     component: TheTabs,
-    props: (route) => ({ tab: 'dhcp_vendors', query: route.query.query })
+    props: () => ({ tab: 'dhcp_vendors', scope: 'all' })
+  },
+  {
+    path: 'fingerbank/:scope/dhcp_vendors',
+    name: 'fingerbankDhcpVendorsByScope',
+    component: TheTabs,
+    props: (route) => ({ tab: 'dhcp_vendors', scope: route.params.scope })
   },
   {
     path: 'fingerbank/:scope/dhcp_vendors/new',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_store.js
new file mode 100644
index 000000000000..d4d1402f9c94
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_store.js
@@ -0,0 +1,102 @@
+import Vue from 'vue'
+import api from './_api'
+
+const types = {
+  LOADING: 'loading',
+  DELETING: 'deleting',
+  SUCCESS: 'success',
+  ERROR: 'error'
+}
+
+// Default values
+export const state = () => {
+  return {
+    dhcpVendors: {
+      cache: {},
+      message: '',
+      status: ''
+    }
+  }
+}
+
+export const getters = {
+  isDhcpVendorsWaiting: state => [types.LOADING, types.DELETING].includes(state.dhcpVendors.status),
+  isDhcpVendorsLoading: state => state.dhcpVendors.status === types.LOADING
+}
+
+export const actions = {
+  dhcpVendors: () => {
+    const params = {
+      sort: 'id',
+      fields: ['id'].join(',')
+    }
+    return api.list(params).then(response => {
+      return response.items
+    })
+  },
+  getDhcpVendor: ({ state, commit }, id) => {
+    if (state.dhcpVendors.cache[id]) {
+      return Promise.resolve(state.dhcpVendors.cache[id])
+    }
+    commit('DHCP_VENDOR_REQUEST')
+    return api.item(id).then(item => {
+      commit('DHCP_VENDOR_REPLACED', item)
+      return JSON.parse(JSON.stringify(item))
+    }).catch(err => {
+      commit('DHCP_VENDOR_ERROR', err.response)
+      throw err
+    })
+  },
+  createDhcpVendor: ({ commit }, data) => {
+    commit('DHCP_VENDOR_REQUEST')
+    return api.create(data).then(response => {
+      data.id = response.id
+      commit('DHCP_VENDOR_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('DHCP_VENDOR_ERROR', err.response)
+      throw err
+    })
+  },
+  updateDhcpVendor: ({ commit }, data) => {
+    commit('DHCP_VENDOR_REQUEST')
+    return api.update(data).then(response => {
+      commit('DHCP_VENDOR_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('DHCP_VENDOR_ERROR', err.response)
+      throw err
+    })
+  },
+  deleteDhcpVendor: ({ commit }, data) => {
+    commit('DHCP_VENDOR_REQUEST', types.DELETING)
+    return api.delete(data).then(response => {
+      commit('DHCP_VENDOR_DESTROYED', data)
+      return response
+    }).catch(err => {
+      commit('DHCP_VENDOR_ERROR', err.response)
+      throw err
+    })
+  }
+}
+
+export const mutations = {
+  DHCP_VENDOR_REQUEST: (state, type) => {
+    state.dhcpFingerprints.status = type || types.LOADING
+    state.dhcpVendors.message = ''
+  },
+  DHCP_VENDOR_REPLACED: (state, data) => {
+    state.dhcpFingerprints.status = types.SUCCESS
+    Vue.set(state.dhcpVendors.cache, data.id, data)
+  },
+  DHCP_VENDOR_DESTROYED: (state, id) => {
+    state.dhcpFingerprints.status = types.SUCCESS
+    Vue.set(state.dhcpVendors.cache, id, null)
+  },
+  DHCP_VENDOR_ERROR: (state, response) => {
+    state.dhcpFingerprints.status = types.ERROR
+    if (response && response.data) {
+      state.dhcpVendors.message = response.data.message
+    }
+  }
+}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_api.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_api.js
index d27f6468ef15..6c3b7fdfe68f 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_api.js
@@ -1,32 +1,38 @@
 import apiCall from '@/utils/api'
 
 export default {
-  fingerbankDhcpv6Enterprises: params => {
+  list: params => {
     return apiCall.get(['fingerbank', 'all', 'dhcp6_enterprises'], { params }).then(response => {
       return response.data
     })
   },
-  fingerbankSearchDhcpv6Enterprises: body => {
-    return apiCall.post('fingerbank/all/dhcp6_enterprises/search', body).then(response => {
-      return response.data
-    })
+  search: body => {
+    const { scope, ...rest } = body
+    if (scope)
+      return apiCall.post(`fingerbank/${scope}/dhcp6_enterprises/search`, rest).then(response => {
+        return response.data
+      })
+    else
+      return apiCall.post('fingerbank/all/dhcp6_enterprises/search', body).then(response => {
+        return response.data
+      })
   },
-  fingerbankDhcpv6Enterprise: id => {
+  item: id => {
     return apiCall.get(['fingerbank', 'all', 'dhcp6_enterprise', id]).then(response => {
       return response.data.item
     })
   },
-  fingerbankCreateDhcpv6Enterprise: data => {
+  create: data => {
     return apiCall.post('fingerbank/local/dhcp6_enterprises', data).then(response => {
       return response.data
     })
   },
-  fingerbankUpdateDhcpv6Enterprise: data => {
+  update: data => {
     return apiCall.patch(['fingerbank', 'local', 'dhcp6_enterprise', data.id], data).then(response => {
       return response.data
     })
   },
-  fingerbankDeleteDhcpv6Enterprise: id => {
+  delete: id => {
     return apiCall.delete(['fingerbank', 'local', 'dhcp6_enterprise', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue
new file mode 100644
index 000000000000..0d71702b05d0
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue
@@ -0,0 +1,200 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center">
+        {{ $t('DHCPv6 Enterprises') }}
+      </h4>
+      <b-button-group class="mt-3">
+        <b-button v-t="'All'" :variant="(scope === 'all') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankDhcpv6EnterprisesByScope', params: { scope: 'all' } }"></b-button>
+        <b-button v-t="'Local'" :variant="(scope === 'local') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankDhcpv6EnterprisesByScope', params: { scope: 'local' } }"></b-button>
+        <b-button v-t="'Upstream'" :variant="(scope === 'upstream') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankDhcpv6EnterprisesByScope', params: { scope: 'upstream' } }"></b-button>
+      </b-button-group>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="onNewClicked">{{ $t('New DHCPv6 Enterprise') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="onRowClicked"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete DHCPv6 Enterprise?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="onCloneClicked(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+const props = {
+  scope: {
+    type: String
+  }
+}
+
+import { ref, toRefs, watch } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const {
+    scope
+  } = toRefs(props)
+
+  const { root: { $router, $store } = {} } = context
+  const router = useRouter($router)
+  const {
+    goToClone,
+    goToItem,
+    goToNew
+  } = router
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  const onCloneClicked = item => goToClone({ scope: 'local', id: item.id })
+  const onNewClicked = () => goToNew({ scope: scope.value })
+  const onRowClicked = item => goToItem({ scope: 'local', id: item.id })
+
+  watch(scope, () => {
+    search.requestInterceptor = request => {
+      request.scope = scope.value
+      return request
+    }
+    reSearch()
+  }, { immediate: true })
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    onCloneClicked,
+    onNewClicked,
+    onRowClicked,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  props,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
index c928213671ee..fc4344edcba0 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
@@ -45,3 +45,75 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/updateDhcpv6Enterprise', form.value),
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('fingerbankDhcpv6Enterprises', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'value',
+      label: 'DHCPv6 Enterprise', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    /* TODO - Issue #4217
+    {
+      key: 'organization',
+      label: 'Organization', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    */
+    {
+      key: 'created_at',
+      label: 'Created', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'updated_at',
+      label: 'Updated', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'value',
+      text: i18n.t('DHCPv6 Enterprise'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_router.js
index f980af924105..7193a5377880 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_router.js
@@ -6,13 +6,11 @@ const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components
 export const useRouter = $router => {
   return {
     goToCollection: () => $router.push({ name: 'fingerbankDhcpv6Enterprises' }),
-    goToItem: (params, props) => {
-      const { scope } = toRefs(props)
-      $router
-        .push({ name: 'fingerbankDhcpv6Enterprise', params: { ...params, scope: scope.value } })
-        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
-    },
-    goToClone: params => $router.push({ name: 'cloneFingerbankDhcpv6Enterprise', params: { ...params, scope: 'local' } })
+    goToItem: params => $router
+      .push({ name: 'fingerbankDhcpv6Enterprise', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneFingerbankDhcpv6Enterprise', params }),
+    goToNew: params => $router.push({ name: 'newFingerbankDhcpv6Enterprise', params })
   }
 }
 
@@ -21,7 +19,13 @@ export default [
     path: 'fingerbank/dhcpv6_enterprises',
     name: 'fingerbankDhcpv6Enterprises',
     component: TheTabs,
-    props: (route) => ({ tab: 'dhcpv6_enterprises', query: route.query.query })
+    props: () => ({ tab: 'dhcpv6_enterprises', scope: 'all' })
+  },
+  {
+    path: 'fingerbank/:scope/dhcpv6_enterprises',
+    name: 'fingerbankDhcpv6EnterprisesByScope',
+    component: TheTabs,
+    props: (route) => ({ tab: 'dhcpv6_enterprises', scope: route.params.scope })
   },
   {
     path: 'fingerbank/:scope/dhcpv6_enterprises/new',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_store.js
new file mode 100644
index 000000000000..b42e6690d144
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_store.js
@@ -0,0 +1,102 @@
+import Vue from 'vue'
+import api from './_api'
+
+const types = {
+  LOADING: 'loading',
+  DELETING: 'deleting',
+  SUCCESS: 'success',
+  ERROR: 'error'
+}
+
+// Default values
+export const state = () => {
+  return {
+    dhcpv6Enterprises: {
+      cache: {},
+      message: '',
+      status: ''
+    }
+  }
+}
+
+export const getters = {
+  isDhcpv6EnterprisesWaiting: state => [types.LOADING, types.DELETING].includes(state.dhcpv6Enterprises.status),
+  isDhcpv6EnterprisesLoading: state => state.dhcpv6Enterprises.status === types.LOADING
+}
+
+export const actions = {
+  dhcpv6Enterprises: () => {
+    const params = {
+      sort: 'id',
+      fields: ['id'].join(',')
+    }
+    return api.list(params).then(response => {
+      return response.items
+    })
+  },
+  getDhcpv6Enterprise: ({ state, commit }, id) => {
+    if (state.dhcpv6Enterprises.cache[id]) {
+      return Promise.resolve(state.dhcpv6Enterprises.cache[id])
+    }
+    commit('DHCPV6_ENTERPRISE_REQUEST')
+    return api.item(id).then(item => {
+      commit('DHCPV6_ENTERPRISE_REPLACED', item)
+      return JSON.parse(JSON.stringify(item))
+    }).catch(err => {
+      commit('DHCPV6_ENTERPRISE_ERROR', err.response)
+      throw err
+    })
+  },
+  createDhcpv6Enterprise: ({ commit }, data) => {
+    commit('DHCPV6_ENTERPRISE_REQUEST')
+    return api.create(data).then(response => {
+      data.id = response.id
+      commit('DHCPV6_ENTERPRISE_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('DHCPV6_ENTERPRISE_ERROR', err.response)
+      throw err
+    })
+  },
+  updateDhcpv6Enterprise: ({ commit }, data) => {
+    commit('DHCPV6_ENTERPRISE_REQUEST')
+    return api.update(data).then(response => {
+      commit('DHCPV6_ENTERPRISE_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('DHCPV6_ENTERPRISE_ERROR', err.response)
+      throw err
+    })
+  },
+  deleteDhcpv6Enterprise: ({ commit }, data) => {
+    commit('DHCPV6_ENTERPRISE_REQUEST', types.DELETING)
+    return api.delete(data).then(response => {
+      commit('DHCPV6_ENTERPRISE_DESTROYED', data)
+      return response
+    }).catch(err => {
+      commit('DHCPV6_ENTERPRISE_ERROR', err.response)
+      throw err
+    })
+  }
+}
+
+export const mutations = {
+  DHCPV6_ENTERPRISE_REQUEST: (state, type) => {
+    state.dhcpv6Enterprises.status = type || types.LOADING
+    state.dhcpv6Enterprises.message = ''
+  },
+  DHCPV6_ENTERPRISE_REPLACED: (state, data) => {
+    state.dhcpv6Enterprises.status = types.SUCCESS
+    Vue.set(state.dhcpv6Enterprises.cache, data.id, data)
+  },
+  DHCPV6_ENTERPRISE_DESTROYED: (state, id) => {
+    state.dhcpv6Enterprises.status = types.SUCCESS
+    Vue.set(state.dhcpv6Enterprises.cache, id, null)
+  },
+  DHCPV6_ENTERPRISE_ERROR: (state, response) => {
+    state.dhcpv6Enterprises.status = types.ERROR
+    if (response && response.data) {
+      state.dhcpv6Enterprises.message = response.data.message
+    }
+  }
+}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_api.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_api.js
index 9be1952c0acb..6c3639f3f484 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_api.js
@@ -1,32 +1,38 @@
 import apiCall from '@/utils/api'
 
 export default {
-  fingerbankDhcpv6Fingerprints: params => {
+  list: params => {
     return apiCall.get(['fingerbank', 'all', 'dhcp6_fingerprints'], { params }).then(response => {
       return response.data
     })
   },
-  fingerbankSearchDhcpv6Fingerprints: body => {
-    return apiCall.post('fingerbank/all/dhcp6_fingerprints/search', body).then(response => {
-      return response.data
-    })
+  search: body => {
+    const { scope, ...rest } = body
+    if (scope)
+      return apiCall.post(`fingerbank/${scope}/dhcp6_fingerprints/search`, rest).then(response => {
+        return response.data
+      })
+    else
+      return apiCall.post('fingerbank/all/dhcp6_fingerprints/search', body).then(response => {
+        return response.data
+      })
   },
-  fingerbankDhcpv6Fingerprint: id => {
+  item: id => {
     return apiCall.get(['fingerbank', 'all', 'dhcp6_fingerprint', id]).then(response => {
       return response.data.item
     })
   },
-  fingerbankCreateDhcpv6Fingerprint: data => {
+  create: data => {
     return apiCall.post('fingerbank/local/dhcp6_fingerprints', data).then(response => {
       return response.data
     })
   },
-  fingerbankUpdateDhcpv6Fingerprint: data => {
+  update: data => {
     return apiCall.patch(['fingerbank', 'local', 'dhcp6_fingerprint', data.id], data).then(response => {
       return response.data
     })
   },
-  fingerbankDeleteDhcpv6Fingerprint: id => {
+  delete: id => {
     return apiCall.delete(['fingerbank', 'local', 'dhcp6_fingerprint', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue
new file mode 100644
index 000000000000..32a748e3ff01
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue
@@ -0,0 +1,200 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center">
+        {{ $t('DHCPv6 Fingerprints') }}
+      </h4>
+      <b-button-group class="mt-3">
+        <b-button v-t="'All'" :variant="(scope === 'all') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankDhcpv6FingerprintsByScope', params: { scope: 'all' } }"></b-button>
+        <b-button v-t="'Local'" :variant="(scope === 'local') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankDhcpv6FingerprintsByScope', params: { scope: 'local' } }"></b-button>
+        <b-button v-t="'Upstream'" :variant="(scope === 'upstream') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankDhcpv6FingerprintsByScope', params: { scope: 'upstream' } }"></b-button>
+      </b-button-group>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="onNewClicked">{{ $t('New DHCPv6 Fingerprint') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="onRowClicked"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete DHCPv6 Fingerprint?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="onCloneClicked(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+const props = {
+  scope: {
+    type: String
+  }
+}
+
+import { ref, toRefs, watch } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const {
+    scope
+  } = toRefs(props)
+
+  const { root: { $router, $store } = {} } = context
+  const router = useRouter($router)
+  const {
+    goToClone,
+    goToItem,
+    goToNew
+  } = router
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  const onCloneClicked = item => goToClone({ scope: 'local', id: item.id })
+  const onNewClicked = () => goToNew({ scope: scope.value })
+  const onRowClicked = item => goToItem({ scope: 'local', id: item.id })
+
+  watch(scope, () => {
+    search.requestInterceptor = request => {
+      request.scope = scope.value
+      return request
+    }
+    reSearch()
+  }, { immediate: true })
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    onCloneClicked,
+    onNewClicked,
+    onRowClicked,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  props,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
index 1bf1d7694f46..0de1b1f0ad72 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
@@ -45,3 +45,67 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/updateDhcpv6Fingerprint', form.value),
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('fingerbankDhcpv6Fingerprints', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'value',
+      label: 'DHCPv6 Fingerprint', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'created_at',
+      label: 'Created', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'updated_at',
+      label: 'Updated', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'value',
+      text: i18n.t('DHCPv6 Fingerprint'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_router.js
index a4d0b481f4f8..89b95f362d16 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_router.js
@@ -1,27 +1,31 @@
-import { toRefs } from '@vue/composition-api'
 import store from '@/store'
-import { TheTabs } from '../_components/'
-const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
 
 export const useRouter = $router => {
   return {
     goToCollection: () => $router.push({ name: 'fingerbankDhcpv6Fingerprints' }),
-    goToItem: (params, props) => {
-      const { scope } = toRefs(props)
-      $router
-        .push({ name: 'fingerbankDhcpv6Fingerprint', params: { ...params, scope: scope.value } })
-        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
-    },
-    goToClone: params => $router.push({ name: 'cloneFingerbankDhcpv6Fingerprint', params: { ...params, scope: 'local' } }),
+    goToItem: params => $router
+      .push({ name: 'fingerbankDhcpv6Fingerprint', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneFingerbankDhcpv6Fingerprint', params }),
+    goToNew: params => $router.push({ name: 'newFingerbankDhcpv6Fingerprint', params })
   }
 }
 
+import { TheTabs } from '../_components/'
+const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
+
 export default [
   {
     path: 'fingerbank/dhcpv6_fingerprints',
     name: 'fingerbankDhcpv6Fingerprints',
     component: TheTabs,
-    props: (route) => ({ tab: 'dhcpv6_fingerprints', query: route.query.query })
+    props: () => ({ tab: 'dhcpv6_fingerprints', scope: 'all' })
+  },
+  {
+    path: 'fingerbank/:scope/dhcpv6_fingerprints',
+    name: 'fingerbankDhcpv6FingerprintsByScope',
+    component: TheTabs,
+    props: (route) => ({ tab: 'dhcpv6_fingerprints', scope: route.params.scope })
   },
   {
     path: 'fingerbank/:scope/dhcpv6_fingerprints/new',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_store.js
new file mode 100644
index 000000000000..27e8d6bfd842
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_store.js
@@ -0,0 +1,102 @@
+import Vue from 'vue'
+import api from './_api'
+
+const types = {
+  LOADING: 'loading',
+  DELETING: 'deleting',
+  SUCCESS: 'success',
+  ERROR: 'error'
+}
+
+// Default values
+export const state = () => {
+  return {
+    dhcpv6Fingerprints: {
+      cache: {},
+      message: '',
+      status: ''
+    }
+  }
+}
+
+export const getters = {
+  isDhcpv6FingerprintsWaiting: state => [types.LOADING, types.DELETING].includes(state.dhcpv6Fingerprints.status),
+  isDhcpv6FingerprintsLoading: state => state.dhcpv6Fingerprints.status === types.LOADING
+}
+
+export const actions = {
+  dhcpv6Fingerprints: () => {
+    const params = {
+      sort: 'id',
+      fields: ['id'].join(',')
+    }
+    return api.list(params).then(response => {
+      return response.items
+    })
+  },
+  getDhcpv6Fingerprint: ({ state, commit }, id) => {
+    if (state.dhcpv6Fingerprints.cache[id]) {
+      return Promise.resolve(state.dhcpv6Fingerprints.cache[id])
+    }
+    commit('DHCPV6_FINGERPRINT_REQUEST')
+    return api.item(id).then(item => {
+      commit('DHCPV6_FINGERPRINT_REPLACED', item)
+      return JSON.parse(JSON.stringify(item))
+    }).catch(err => {
+      commit('DHCPV6_FINGERPRINT_ERROR', err.response)
+      throw err
+    })
+  },
+  createDhcpv6Fingerprint: ({ commit }, data) => {
+    commit('DHCPV6_FINGERPRINT_REQUEST')
+    return api.create(data).then(response => {
+      data.id = response.id
+      commit('DHCPV6_FINGERPRINT_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('DHCPV6_FINGERPRINT_ERROR', err.response)
+      throw err
+    })
+  },
+  updateDhcpv6Fingerprint: ({ commit }, data) => {
+    commit('DHCPV6_FINGERPRINT_REQUEST')
+    return api.update(data).then(response => {
+      commit('DHCPV6_FINGERPRINT_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('DHCPV6_FINGERPRINT_ERROR', err.response)
+      throw err
+    })
+  },
+  deleteDhcpv6Fingerprint: ({ commit }, data) => {
+    commit('DHCPV6_FINGERPRINT_REQUEST', types.DELETING)
+    return api.delete(data).then(response => {
+      commit('DHCPV6_FINGERPRINT_DESTROYED', data)
+      return response
+    }).catch(err => {
+      commit('DHCPV6_FINGERPRINT_ERROR', err.response)
+      throw err
+    })
+  }
+}
+
+export const mutations = {
+  DHCPV6_FINGERPRINT_REQUEST: (state, type) => {
+    state.dhcpv6Fingerprints.status = type || types.LOADING
+    state.dhcpv6Fingerprints.message = ''
+  },
+  DHCPV6_FINGERPRINT_REPLACED: (state, data) => {
+    state.dhcpv6Fingerprints.status = types.SUCCESS
+    Vue.set(state.dhcpv6Fingerprints.cache, data.id, data)
+  },
+  DHCPV6_FINGERPRINT_DESTROYED: (state, id) => {
+    state.dhcpv6Fingerprints.status = types.SUCCESS
+    Vue.set(state.dhcpv6Fingerprints.cache, id, null)
+  },
+  DHCPV6_FINGERPRINT_ERROR: (state, response) => {
+    state.dhcpv6Fingerprints.status = types.ERROR
+    if (response && response.data) {
+      state.dhcpv6Fingerprints.message = response.data.message
+    }
+  }
+}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_store.js
new file mode 100644
index 000000000000..5559bdb64a06
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_store.js
@@ -0,0 +1,107 @@
+import Vue from 'vue'
+import api from './_api'
+
+const types = {
+  LOADING: 'loading',
+  DELETING: 'deleting',
+  SUCCESS: 'success',
+  ERROR: 'error'
+}
+
+// Default values
+export const state = () => {
+  return {
+    generalSettings: {
+      cache: false,
+      message: '',
+      status: ''
+    }
+  }
+}
+
+export const getters = {
+  isGeneralSettingsWaiting: state => [types.LOADING, types.DELETING].includes(state.generalSettings.status),
+  isGeneralSettingsLoading: state => state.generalSettings.status === types.LOADING
+}
+
+export const actions = {
+  getGeneralSettings: ({ state, commit }) => {
+    if (state.generalSettings.cache) {
+      return Promise.resolve(state.generalSettings.cache)
+    }
+    commit('GENERAL_SETTINGS_REQUEST')
+    const params = {
+      sort: 'id'
+    }
+    return api.fingerbankGeneralSettings(params).then(response => {
+      // response is split multipart, refactor required
+      let refactored = {}
+      response.forEach((section) => {
+        refactored[section.id] = Object.keys(section)
+          .filter(key => !(['id'].includes(key)))
+          .reduce((obj, key) => {
+            obj[key] = section[key]
+            return obj
+          }, {})
+      })
+      commit('GENERAL_SETTINGS_REPLACED', refactored)
+      return refactored
+    }).catch(err => {
+      commit('GENERAL_SETTINGS_ERROR', err.response)
+      throw err
+    })
+  },
+  // TODO - Test (Issue #4139)
+  optionsGeneralSettings: ({ commit }) => {
+    commit('GENERAL_SETTINGS_REQUEST')
+    return api.fingerbankGeneralSettingsOptions().then(response => {
+      commit('GENERAL_SETTINGS_SUCCESS')
+      return response
+    }).catch(err => {
+      commit('GENERAL_SETTINGS_ERROR', err.response)
+      throw err
+    })
+  },
+  setGeneralSettings: ({ commit, dispatch }, data) => {
+    commit('GENERAL_SETTINGS_REQUEST')
+    let promises = []
+    Object.keys(data).forEach(id => {
+      let refactored = { ...data[id], ...{ id } }
+      promises.push(api.fingerbankUpdateGeneralSetting(id, refactored))
+    })
+    return Promise.all(promises).then(response => {
+      commit('GENERAL_SETTINGS_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('GENERAL_SETTINGS_ERROR', err.response)
+      throw err
+    }).finally(() => {
+      commit('ACCOUNT_INFO_RESET')
+      dispatch('getAccountInfo')
+    })
+  }
+}
+
+export const mutations = {
+  GENERAL_SETTINGS_REQUEST: (state, type) => {
+    state.generalSettings.status = type || types.LOADING
+    state.generalSettings.message = ''
+  },
+  GENERAL_SETTINGS_REPLACED: (state, data) => {
+    state.generalSettings.status = types.SUCCESS
+    if (!state.generalSettings.cache)
+      Vue.set(state.generalSettings, 'cache', {})
+    for (let id of Object.keys(data)) {
+      Vue.set(state.generalSettings.cache, id, data[id])
+    }
+  },
+  GENERAL_SETTINGS_ERROR: (state, response) => {
+    state.generalSettings.status = types.ERROR
+    if (response && response.data) {
+      state.generalSettings.message = response.data.message
+    }
+  },
+  GENERAL_SETTINGS_SUCCESS: (state) => {
+    state.generalSettings.status = types.SUCCESS
+  }
+}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_api.js b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_api.js
index d1b02579be95..a8c1b1af9b3d 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_api.js
@@ -1,32 +1,38 @@
 import apiCall from '@/utils/api'
 
 export default {
-  fingerbankMacVendors: params => {
+  list: params => {
     return apiCall.get(['fingerbank', 'all', 'mac_vendors'], { params }).then(response => {
       return response.data
     })
   },
-  fingerbankSearchMacVendors: body => {
-    return apiCall.post('fingerbank/all/mac_vendors/search', body).then(response => {
-      return response.data
-    })
+  search: body => {
+    const { scope, ...rest } = body
+    if (scope)
+      return apiCall.post(`fingerbank/${scope}/mac_vendors/search`, rest).then(response => {
+        return response.data
+      })
+    else
+      return apiCall.post('fingerbank/all/mac_vendors/search', body).then(response => {
+        return response.data
+      })
   },
-  fingerbankMacVendor: id => {
+  item: id => {
     return apiCall.get(['fingerbank', 'all', 'mac_vendor', id]).then(response => {
       return response.data.item
     })
   },
-  fingerbankCreateMacVendor: data => {
+  create: data => {
     return apiCall.post('fingerbank/local/mac_vendors', data).then(response => {
       return response.data
     })
   },
-  fingerbankUpdateMacVendor: data => {
+  update: data => {
     return apiCall.patch(['fingerbank', 'local', 'mac_vendor', data.id], data).then(response => {
       return response.data
     })
   },
-  fingerbankDeleteMacVendor: id => {
+  delete: id => {
     return apiCall.delete(['fingerbank', 'local', 'mac_vendor', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue
new file mode 100644
index 000000000000..4dfa7b186de1
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue
@@ -0,0 +1,200 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center">
+        {{ $t('MAC Vendors') }}
+      </h4>
+      <b-button-group class="mt-3">
+        <b-button v-t="'All'" :variant="(scope === 'all') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankMacVendorsByScope', params: { scope: 'all' } }"></b-button>
+        <b-button v-t="'Local'" :variant="(scope === 'local') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankMacVendorsByScope', params: { scope: 'local' } }"></b-button>
+        <b-button v-t="'Upstream'" :variant="(scope === 'upstream') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankMacVendorsByScope', params: { scope: 'upstream' } }"></b-button>
+      </b-button-group>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="onNewClicked">{{ $t('New MAC Vendor') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="onRowClicked"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete MAC Vendor?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="onCloneClicked(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+const props = {
+  scope: {
+    type: String
+  }
+}
+
+import { ref, toRefs, watch } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const {
+    scope
+  } = toRefs(props)
+
+  const { root: { $router, $store } = {} } = context
+  const router = useRouter($router)
+  const {
+    goToClone,
+    goToItem,
+    goToNew
+  } = router
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  const onCloneClicked = item => goToClone({ scope: 'local', id: item.id })
+  const onNewClicked = () => goToNew({ scope: scope.value })
+  const onRowClicked = item => goToItem({ scope: 'local', id: item.id })
+
+  watch(scope, () => {
+    search.requestInterceptor = request => {
+      request.scope = scope.value
+      return request
+    }
+    reSearch()
+  }, { immediate: true })
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    onCloneClicked,
+    onNewClicked,
+    onRowClicked,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  props,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
index 99157ea2fb32..6e03ab4d4e82 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
@@ -45,3 +45,79 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/updateMacVendor', form.value),
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('fingerbankMacVendors', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'mac',
+      label: 'OUI', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'name',
+      label: 'MAC Vendor', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'created_at',
+      label: 'Created', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'updated_at',
+      label: 'Updated', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'mac',
+      text: i18n.t('OUI'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'name',
+      text: i18n.t('MAC Vendor'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_router.js
index f23d2a7094e7..f3dff386d4e9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_router.js
@@ -6,13 +6,11 @@ const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components
 export const useRouter = $router => {
   return {
     goToCollection: () => $router.push({ name: 'fingerbankMacVendors' }),
-    goToItem: (params, props) => {
-      const { scope } = toRefs(props)
-      $router
-        .push({ name: 'fingerbankMacVendor', params: { ...params, scope: scope.value } })
-        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
-    },
-    goToClone: params => $router.push({ name: 'cloneFingerbankMacVendor', params: { ...params, scope: 'local' } })
+    goToItem: params => $router
+      .push({ name: 'fingerbankMacVendor', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneFingerbankMacVendor', params }),
+    goToNew: params => $router.push({ name: 'newFingerbankMacVendor', params })
   }
 }
 
@@ -21,7 +19,13 @@ export default [
     path: 'fingerbank/mac_vendors',
     name: 'fingerbankMacVendors',
     component: TheTabs,
-    props: (route) => ({ tab: 'mac_vendors', query: route.query.query })
+    props: () => ({ tab: 'mac_vendors', scope: 'all' })
+  },
+  {
+    path: 'fingerbank/:scope/mac_vendors',
+    name: 'fingerbankMacVendorsByScope',
+    component: TheTabs,
+    props: (route) => ({ tab: 'mac_vendors', scope: route.params.scope })
   },
   {
     path: 'fingerbank/:scope/mac_vendors/new',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_store.js
new file mode 100644
index 000000000000..ed4503560ac9
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_store.js
@@ -0,0 +1,102 @@
+import Vue from 'vue'
+import api from './_api'
+
+const types = {
+  LOADING: 'loading',
+  DELETING: 'deleting',
+  SUCCESS: 'success',
+  ERROR: 'error'
+}
+
+// Default values
+export const state = () => {
+  return {
+    macVendors: {
+      cache: {},
+      message: '',
+      status: ''
+    }
+  }
+}
+
+export const getters = {
+  isMacVendorsWaiting: state => [types.LOADING, types.DELETING].includes(state.macVendors.status),
+  isMacVendorsLoading: state => state.macVendors.status === types.LOADING
+}
+
+export const actions = {
+  macVendors: () => {
+    const params = {
+      sort: 'id',
+      fields: ['id'].join(',')
+    }
+    return api.list(params).then(response => {
+      return response.items
+    })
+  },
+  getMacVendor: ({ state, commit }, id) => {
+    if (state.macVendors.cache[id]) {
+      return Promise.resolve(state.macVendors.cache[id])
+    }
+    commit('MAC_VENDOR_REQUEST')
+    return api.item(id).then(item => {
+      commit('MAC_VENDOR_REPLACED', item)
+      return JSON.parse(JSON.stringify(item))
+    }).catch(err => {
+      commit('MAC_VENDOR_ERROR', err.response)
+      throw err
+    })
+  },
+  createMacVendor: ({ commit }, data) => {
+    commit('MAC_VENDOR_REQUEST')
+    return api.create(data).then(response => {
+      data.id = response.id
+      commit('MAC_VENDOR_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('MAC_VENDOR_ERROR', err.response)
+      throw err
+    })
+  },
+  updateMacVendor: ({ commit }, data) => {
+    commit('MAC_VENDOR_REQUEST')
+    return api.update(data).then(response => {
+      commit('MAC_VENDOR_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('MAC_VENDOR_ERROR', err.response)
+      throw err
+    })
+  },
+  deleteMacVendor: ({ commit }, data) => {
+    commit('MAC_VENDOR_REQUEST', types.DELETING)
+    return api.delete(data).then(response => {
+      commit('MAC_VENDOR_DESTROYED', data)
+      return response
+    }).catch(err => {
+      commit('MAC_VENDOR_ERROR', err.response)
+      throw err
+    })
+  }
+}
+
+export const mutations = {
+  MAC_VENDOR_REQUEST: (state, type) => {
+    state.macVendors.status = type || types.LOADING
+    state.macVendors.message = ''
+  },
+  MAC_VENDOR_REPLACED: (state, data) => {
+    state.macVendors.status = types.SUCCESS
+    Vue.set(state.macVendors.cache, data.id, data)
+  },
+  MAC_VENDOR_DESTROYED: (state, id) => {
+    state.macVendors.status = types.SUCCESS
+    Vue.set(state.macVendors.cache, id, null)
+  },
+  MAC_VENDOR_ERROR: (state, response) => {
+    state.macVendors.status = types.ERROR
+    if (response && response.data) {
+      state.macVendors.message = response.data.message
+    }
+  }
+}
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_api.js b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_api.js
index c8d2142c9589..f899151fbb7e 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_api.js
@@ -1,32 +1,38 @@
 import apiCall from '@/utils/api'
 
 export default {
-  fingerbankUserAgents: params => {
+  list: params => {
     return apiCall.get(['fingerbank', 'local', 'user_agents'], { params }).then(response => {
       return response.data
     })
   },
-  fingerbankSearchUserAgents: body => {
-    return apiCall.post('fingerbank/local/user_agents/search', body).then(response => {
-      return response.data
-    })
+  search: body => {
+    const { scope, ...rest } = body
+    if (scope)
+      return apiCall.post(`fingerbank/${scope}/user_agents/search`, rest).then(response => {
+        return response.data
+      })
+    else
+      return apiCall.post('fingerbank/all/user_agents/search', body).then(response => {
+        return response.data
+      })
   },
-  fingerbankUserAgent: id => {
+  item: id => {
     return apiCall.get(['fingerbank', 'local', 'user_agent', id]).then(response => {
       return response.data.item
     })
   },
-  fingerbankCreateUserAgent: data => {
+  create: data => {
     return apiCall.post('fingerbank/local/user_agents', data).then(response => {
       return response.data
     })
   },
-  fingerbankUpdateUserAgent: data => {
+  update: data => {
     return apiCall.patch(['fingerbank', 'local', 'user_agent', data.id], data).then(response => {
       return response.data
     })
   },
-  fingerbankDeleteUserAgent: id => {
+  delete: id => {
     return apiCall.delete(['fingerbank', 'local', 'user_agent', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue
new file mode 100644
index 000000000000..55cbcc816e87
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue
@@ -0,0 +1,200 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center">
+        {{ $t('User Agents') }}
+      </h4>
+      <b-button-group class="mt-3">
+        <b-button v-t="'All'" :variant="(scope === 'all') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankUserAgentsByScope', params: { scope: 'all' } }"></b-button>
+        <b-button v-t="'Local'" :variant="(scope === 'local') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankUserAgentsByScope', params: { scope: 'local' } }"></b-button>
+        <b-button v-t="'Upstream'" :variant="(scope === 'upstream') ? 'primary' : 'outline-secondary'"
+          :to="{ name: 'fingerbankUserAgentsByScope', params: { scope: 'upstream' } }"></b-button>
+      </b-button-group>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="onNewClicked">{{ $t('New User Agent') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="onRowClicked"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete User Agent?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="onCloneClicked(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+const props = {
+  scope: {
+    type: String
+  }
+}
+
+import { ref, toRefs, watch } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const {
+    scope
+  } = toRefs(props)
+
+  const { root: { $router, $store } = {} } = context
+  const router = useRouter($router)
+  const {
+    goToClone,
+    goToItem,
+    goToNew
+  } = router
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  const onCloneClicked = item => goToClone({ scope: 'local', id: item.id })
+  const onNewClicked = () => goToNew({ scope: scope.value })
+  const onRowClicked = item => goToItem({ scope: 'local', id: item.id })
+
+  watch(scope, () => {
+    search.requestInterceptor = request => {
+      request.scope = scope.value
+      return request
+    }
+    reSearch()
+  }, { immediate: true })
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    onCloneClicked,
+    onNewClicked,
+    onRowClicked,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  props,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
index b1c36517b8ae..7c76d1217a6a 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
@@ -45,3 +45,67 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_fingerbank/updateUserAgent', form.value),
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('fingerbankUserAgents', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'value',
+      label: 'User Agent', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'created_at',
+      label: 'Created', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'updated_at',
+      label: 'Updated', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'value',
+      text: i18n.t('User Agent'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_router.js
index a6cf71d07b0c..3d8e8cb7b241 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_router.js
@@ -1,27 +1,31 @@
-import { toRefs } from '@vue/composition-api'
 import store from '@/store'
-import { TheTabs } from '../_components/'
-const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
 
 export const useRouter = $router => {
   return {
     goToCollection: () => $router.push({ name: 'fingerbankUserAgents' }),
-    goToItem: (params, props) => {
-      const { scope } = toRefs(props)
-      $router
-        .push({ name: 'fingerbankUserAgent', params: { ...params, scope: scope.value } })
-        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
-    },
-    goToClone: params => $router.push({ name: 'cloneFingerbankUserAgent', params: { ...params, scope: 'local' } })
+    goToItem: params => $router
+      .push({ name: 'fingerbankUserAgent', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => $router.push({ name: 'cloneFingerbankUserAgent', params }),
+    goToNew: params => $router.push({ name: 'newFingerbankUserAgent', params })
   }
 }
 
+import { TheTabs } from '../_components/'
+const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
+
 export default [
   {
     path: 'fingerbank/user_agents',
     name: 'fingerbankUserAgents',
     component: TheTabs,
-    props: (route) => ({ tab: 'user_agents', query: route.query.query })
+    props: () => ({ tab: 'user_agents', scope: 'all' })
+  },
+  {
+    path: 'fingerbank/:scope/user_agents',
+    name: 'fingerbankUserAgentsByScope',
+    component: TheTabs,
+    props: (route) => ({ tab: 'user_agents', scope: route.params.scope })
   },
   {
     path: 'fingerbank/local/user_agents/new',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_store.js
new file mode 100644
index 000000000000..787db6d27e0e
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_store.js
@@ -0,0 +1,102 @@
+import Vue from 'vue'
+import api from './_api'
+
+const types = {
+  LOADING: 'loading',
+  DELETING: 'deleting',
+  SUCCESS: 'success',
+  ERROR: 'error'
+}
+
+// Default values
+export const state = () => {
+  return {
+    userAgents: {
+      cache: {},
+      message: '',
+      status: ''
+    }
+  }
+}
+
+export const getters = {
+  isUserAgentsWaiting: state => [types.LOADING, types.DELETING].includes(state.userAgents.status),
+  isUserAgentsLoading: state => state.userAgents.status === types.LOADING
+}
+
+export const actions = {
+  userAgents: () => {
+    const params = {
+      sort: 'id',
+      fields: ['id'].join(',')
+    }
+    return api.list(params).then(response => {
+      return response.items
+    })
+  },
+  getUserAgent: ({ state, commit }, id) => {
+    if (state.userAgents.cache[id]) {
+      return Promise.resolve(state.userAgents.cache[id])
+    }
+    commit('USER_AGENT_REQUEST')
+    return api.item(id).then(item => {
+      commit('USER_AGENT_REPLACED', item)
+      return JSON.parse(JSON.stringify(item))
+    }).catch(err => {
+      commit('USER_AGENT_ERROR', err.response)
+      throw err
+    })
+  },
+  createUserAgent: ({ commit }, data) => {
+    commit('USER_AGENT_REQUEST')
+    return api.create(data).then(response => {
+      data.id = response.id
+      commit('USER_AGENT_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('USER_AGENT_ERROR', err.response)
+      throw err
+    })
+  },
+  updateUserAgent: ({ commit }, data) => {
+    commit('USER_AGENT_REQUEST')
+    return api.update(data).then(response => {
+      commit('USER_AGENT_REPLACED', data)
+      return response
+    }).catch(err => {
+      commit('USER_AGENT_ERROR', err.response)
+      throw err
+    })
+  },
+  deleteUserAgent: ({ commit }, data) => {
+    commit('USER_AGENT_REQUEST', types.DELETING)
+    return api.delete(data).then(response => {
+      commit('USER_AGENT_DESTROYED', data)
+      return response
+    }).catch(err => {
+      commit('USER_AGENT_ERROR', err.response)
+      throw err
+    })
+  }
+}
+
+export const mutations = {
+  USER_AGENT_REQUEST: (state, type) => {
+    state.userAgents.status = type || types.LOADING
+    state.userAgents.message = ''
+  },
+  USER_AGENT_REPLACED: (state, data) => {
+    state.userAgents.status = types.SUCCESS
+    Vue.set(state.userAgents.cache, data.id, data)
+  },
+  USER_AGENT_DESTROYED: (state, id) => {
+    state.userAgents.status = types.SUCCESS
+    Vue.set(state.userAgents.cache, id, null)
+  },
+  USER_AGENT_ERROR: (state, response) => {
+    state.userAgents.status = types.ERROR
+    if (response && response.data) {
+      state.userAgents.message = response.data.message
+    }
+  }
+}
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useStore.js b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useStore.js
new file mode 100644
index 000000000000..40861a07f6d1
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useStore.js
@@ -0,0 +1,23 @@
+import { defineStore } from 'pinia'
+
+export default defineStore({
+  id: 'tenants',
+
+  state() {
+    return {
+      cache: null,
+      status: null,
+      message: null
+    }
+  },
+
+  getters: {
+
+  },
+
+  actions: {
+    getCollection: (state) => {
+
+    }
+  }
+})
\ No newline at end of file

From cb43ea758d320c182ca5359c589c2f722b6c5162 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 2 Jun 2021 10:19:17 -0400
Subject: [PATCH 12/72] use integers in fingerbank identifiers

---
 .../new/BaseSearchInputAdvancedRule.vue       | 22 +++++++++++--------
 html/pfappserver/root/src/globals/pfSearch.js | 15 +++++++------
 .../_components/FingerbankTabs.vue            |  2 +-
 .../_composables/useCollection.js             |  4 ++--
 .../devices/_composables/useCollection.js     |  4 ++--
 .../_composables/useCollection.js             |  2 +-
 .../dhcpVendors/_composables/useCollection.js |  2 +-
 .../_composables/useCollection.js             |  2 +-
 .../_composables/useCollection.js             |  2 +-
 .../macVendors/_composables/useCollection.js  |  4 ++--
 .../userAgents/_composables/useCollection.js  |  2 +-
 11 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/html/pfappserver/root/src/components/new/BaseSearchInputAdvancedRule.vue b/html/pfappserver/root/src/components/new/BaseSearchInputAdvancedRule.vue
index f1c6e7b6c625..fa40df380f80 100644
--- a/html/pfappserver/root/src/components/new/BaseSearchInputAdvancedRule.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearchInputAdvancedRule.vue
@@ -2,13 +2,13 @@
   <b-container fluid class="px-1">
     <b-row class="bg-white rc align-items-center m-0 p-1 isdrag">
       <b-input-group class="mr-1">
-        <b-input-group-prepend v-if="icon || hasParents || hasSiblings" 
+        <b-input-group-prepend v-if="icon || hasParents || hasSiblings"
           class="p-0"
           is-text>
           <icon  v-if="icon"
             :name="icon" />
-          <span v-if="hasParents || hasSiblings" 
-            class="draghandle" 
+          <span v-if="hasParents || hasSiblings"
+            class="draghandle"
             v-b-tooltip.hover.right.d300 :title="$t('Click & drag statement to reorder')">
             <icon name="th" />
           </span>
@@ -20,9 +20,9 @@
           v-model="value.value"
         />
         <b-input-group-append v-if="hasParents || (hasSiblings && !isDrag)">
-          <b-button 
-            class="ml-auto nodrag" variant="link" 
-            v-b-tooltip.hover.left.d300 :title="$t('Delete statement')" 
+          <b-button
+            class="ml-auto nodrag" variant="link"
+            v-b-tooltip.hover.left.d300 :title="$t('Delete statement')"
             @click="onDeleteRule">
             <icon name="trash-alt" />
           </b-button>
@@ -43,7 +43,7 @@
         </b-container>
       </b-col>
     </b-row>
-  </b-container>  
+  </b-container>
 </template>
 
 <script>
@@ -51,7 +51,8 @@ import {
   BaseInput,
   BaseInputChosenOne,
   BaseInputGroupDateTime,
-  BaseInputGroupMultiplier
+  BaseInputGroupMultiplier,
+  BaseInputNumber
 } from '@/components/new/'
 
 const props = {
@@ -137,6 +138,9 @@ const setup = (props, context) => {
               case pfSearchConditionValue.PREFIXMULTIPLE:
                 return BaseInputGroupMultiplier
                 // break
+              case pfSearchConditionValue.INTEGER:
+                return BaseInputNumber
+                // break
               case pfSearchConditionValue.TEXT:
               default:
                 return BaseInput
@@ -144,7 +148,7 @@ const setup = (props, context) => {
             }
           }
         }
-      }      
+      }
     }
     return undefined
   })
diff --git a/html/pfappserver/root/src/globals/pfSearch.js b/html/pfappserver/root/src/globals/pfSearch.js
index 0220bc808c9c..55f5d709f352 100644
--- a/html/pfappserver/root/src/globals/pfSearch.js
+++ b/html/pfappserver/root/src/globals/pfSearch.js
@@ -38,7 +38,8 @@ export const pfSearchConditionValue = {
   TEXT:                    'text',
   SELECT:                  'select',
   DATETIME:                'datetime',
-  PREFIXMULTIPLE:          'prefixmultiple'
+  PREFIXMULTIPLE:          'prefixmultiple',
+  NUMBER:                  'integer'
 }
 
 /**
@@ -61,12 +62,12 @@ pfConditionOperators[pfSearchConditionType.DATETIME] = {
   'less_than_equals':      pfSearchConditionValue.DATETIME
 }
 pfConditionOperators[pfSearchConditionType.INTEGER] = {
-  'equals':                pfSearchConditionValue.TEXT,
-  'not_equals':            pfSearchConditionValue.TEXT,
-  'greater_than':          pfSearchConditionValue.TEXT,
-  'less_than':             pfSearchConditionValue.TEXT,
-  'greater_than_equals':   pfSearchConditionValue.TEXT,
-  'less_than_equals':      pfSearchConditionValue.TEXT
+  'equals':                pfSearchConditionValue.INTEGER,
+  'not_equals':            pfSearchConditionValue.INTEGER,
+  'greater_than':          pfSearchConditionValue.INTEGER,
+  'less_than':             pfSearchConditionValue.INTEGER,
+  'greater_than_equals':   pfSearchConditionValue.INTEGER,
+  'less_than_equals':      pfSearchConditionValue.INTEGER
 }
 pfConditionOperators[pfSearchConditionType.PREFIXMULTIPLE] = {
   'equals':                pfSearchConditionValue.PREFIXMULTIPLE,
diff --git a/html/pfappserver/root/src/views/Configuration/_components/FingerbankTabs.vue b/html/pfappserver/root/src/views/Configuration/_components/FingerbankTabs.vue
index 861c52290ad1..26f56a9a414d 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/FingerbankTabs.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/FingerbankTabs.vue
@@ -7,7 +7,7 @@
         {{ $t('Update Fingerbank Database') }}
       </b-button>
     </b-card-header>
-    <b-tabs ref="tabs" v-model="tabIndex" card>
+    <b-tabs ref="tabs" v-model="tabIndex" card lazy>
       <b-tab :title="$t('General Settings')" @click="changeTab('general_settings')">
         <fingerbank-general-setting-view />
       </b-tab>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
index 962b7c3f4267..a2817663f5fb 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
@@ -100,12 +100,12 @@ export const useSearch = makeSearch('fingerbankCombinations', {
     {
       value: 'id',
       text: i18n.t('Identifier'),
-      types: [conditionType.SUBSTRING]
+      types: [conditionType.INTEGER]
     },
     {
       value: 'device_id',
       text: i18n.t('Device'),
-      types: [conditionType.SUBSTRING]
+      types: [conditionType.INTEGER]
     }
   ],
   sortBy: 'id',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
index f1cfb5d2c46c..e95e8528dbeb 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
@@ -101,7 +101,7 @@ export const useSearch = makeSearch('fingerbankDevices', {
     {
       value: 'id',
       text: i18n.t('Identifier'),
-      types: [conditionType.SUBSTRING]
+      types: [conditionType.INTEGER]
     },
     {
       value: 'name',
@@ -111,7 +111,7 @@ export const useSearch = makeSearch('fingerbankDevices', {
     {
       value: 'parent_id',
       text: i18n.t('Parent'),
-      types: [conditionType.SUBSTRING]
+      types: [conditionType.INTEGER]
     }
   ],
   sortBy: 'id',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
index 4b86670a8bb8..55ae79df0c92 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
@@ -94,7 +94,7 @@ export const useSearch = makeSearch('fingerbankDhcpFingerprints', {
     {
       value: 'id',
       text: i18n.t('Identifier'),
-      types: [conditionType.SUBSTRING]
+      types: [conditionType.INTEGER]
     },
     {
       value: 'value',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
index cfc1a5e14aa8..606a1438856c 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
@@ -94,7 +94,7 @@ export const useSearch = makeSearch('fingerbankDhcpVendors', {
     {
       value: 'id',
       text: i18n.t('Identifier'),
-      types: [conditionType.SUBSTRING]
+      types: [conditionType.INTEGER]
     },
     {
       value: 'value',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
index fc4344edcba0..b58201ac6a14 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
@@ -102,7 +102,7 @@ export const useSearch = makeSearch('fingerbankDhcpv6Enterprises', {
     {
       value: 'id',
       text: i18n.t('Identifier'),
-      types: [conditionType.SUBSTRING]
+      types: [conditionType.INTEGER]
     },
     {
       value: 'value',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
index 0de1b1f0ad72..cd5b169e262f 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
@@ -94,7 +94,7 @@ export const useSearch = makeSearch('fingerbankDhcpv6Fingerprints', {
     {
       value: 'id',
       text: i18n.t('Identifier'),
-      types: [conditionType.SUBSTRING]
+      types: [conditionType.INTEGER]
     },
     {
       value: 'value',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
index 6e03ab4d4e82..bd8173fab337 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
@@ -101,7 +101,7 @@ export const useSearch = makeSearch('fingerbankMacVendors', {
     {
       value: 'id',
       text: i18n.t('Identifier'),
-      types: [conditionType.SUBSTRING]
+      types: [conditionType.INTEGER]
     },
     {
       value: 'mac',
@@ -117,7 +117,7 @@ export const useSearch = makeSearch('fingerbankMacVendors', {
   sortBy: 'id',
   defaultCondition: () => ({ op: 'and', values: [
     { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null }
+      { field: 'id', op: 'equals', value: null }
     ] }
   ] })
 })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
index 7c76d1217a6a..262d401671e7 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
@@ -94,7 +94,7 @@ export const useSearch = makeSearch('fingerbankUserAgents', {
     {
       value: 'id',
       text: i18n.t('Identifier'),
-      types: [conditionType.SUBSTRING]
+      types: [conditionType.INTEGER]
     },
     {
       value: 'value',

From 58bcaff310746fae10d51297c540c17bc2441746 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 2 Jun 2021 11:05:40 -0400
Subject: [PATCH 13/72] refactor firewall sso search

---
 .../_components/FirewallsList.vue             |  76 --------
 .../views/Configuration/_config/firewall.js   |  87 ---------
 .../src/views/Configuration/firewalls/_api.js |  19 +-
 .../firewalls/_components/TheSearch.vue       | 168 ++++++++++++++++++
 .../firewalls/_composables/useCollection.js   |  66 +++++++
 .../views/Configuration/firewalls/_router.js  |   5 +-
 .../views/Configuration/firewalls/_store.js   |  24 +--
 7 files changed, 255 insertions(+), 190 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/FirewallsList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/firewall.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/views/Configuration/_components/FirewallsList.vue b/html/pfappserver/root/src/views/Configuration/_components/FirewallsList.vue
deleted file mode 100644
index 0e261f2350ff..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/FirewallsList.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0" v-t="'Firewall SSO'"></h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-dropdown :text="$t('New Firewall')" variant="outline-primary">
-          <b-dropdown-item :to="{ name: 'newFirewall', params: { firewallType: 'BarracudaNG' } }">BarracudaNG</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newFirewall', params: { firewallType: 'Checkpoint' } }">Checkpoint</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newFirewall', params: { firewallType: 'CiscoIsePic' } }">Cisco ISE-PIC</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newFirewall', params: { firewallType: 'FamilyZone' } }">FamilyZone</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newFirewall', params: { firewallType: 'FortiGate' } }">FortiGate</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newFirewall', params: { firewallType: 'Iboss' } }">Iboss</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newFirewall', params: { firewallType: 'JSONRPC' } }">JSONRPC</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newFirewall', params: { firewallType: 'JuniperSRX' } }">JuniperSRX</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newFirewall', params: { firewallType: 'LightSpeedRocket' } }">LightSpeedRocket</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newFirewall', params: { firewallType: 'PaloAlto' } }">PaloAlto</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newFirewall', params: { firewallType: 'SmoothWall' } }">SmoothWall</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newFirewall', params: { firewallType: 'WatchGuard' } }">WatchGuard</b-dropdown-item>
-        </b-dropdown>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No firewalls found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Firewall?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/firewall'
-
-export default {
-  name: 'firewalls-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_firewalls/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneFirewall', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_firewalls/deleteFirewall', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_config/firewall.js b/html/pfappserver/root/src/views/Configuration/_config/firewall.js
deleted file mode 100644
index 5d8e87f9939d..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/firewall.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Hostname or IP', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'type',
-    label: 'Firewall Type', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'port',
-    label: 'Port', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'type',
-    text: i18n.t('Type'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'port',
-    text: i18n.t('Port'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'firewall', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by hostname, ip, port or firewall type'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/firewalls',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'port', op: 'contains', value: null },
-            { field: 'type', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'firewalls' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: quickCondition },
-            { field: 'port', op: 'contains', value: quickCondition },
-            { field: 'type', op: 'contains', value: quickCondition }
-          ]
-        }]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_api.js b/html/pfappserver/root/src/views/Configuration/firewalls/_api.js
index 1cb7cb28adef..6420a405022a 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_api.js
@@ -1,37 +1,42 @@
 import apiCall from '@/utils/api'
 
 export default {
-  firewalls: params => {
+  list: params => {
     return apiCall.get('config/firewalls', { params }).then(response => {
       return response.data
     })
   },
-  firewallsOptions: firewallType => {
+  listOptions: firewallType => {
     return apiCall.options(['config', 'firewalls'], { params: { type: firewallType } }).then(response => {
       return response.data
     })
   },
-  firewall: id => {
+  item: id => {
     return apiCall.get(['config', 'firewall', id]).then(response => {
       return response.data.item
     })
   },
-  firewallOptions: id => {
+  itemOptions: id => {
     return apiCall.options(['config', 'firewall', id]).then(response => {
       return response.data
     })
   },
-  createFirewall: data => {
+  create: data => {
     return apiCall.post('config/firewalls', data).then(response => {
       return response.data
     })
   },
-  updateFirewall: data => {
+  update: data => {
     return apiCall.patch(['config', 'firewall', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteFirewall: id => {
+  delete: id => {
     return apiCall.delete(['config', 'firewall', id])
+  },
+  search: data => {
+    return apiCall.post('config/firewalls/search', data).then(response => {
+      return response.data
+    })
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
new file mode 100644
index 000000000000..0cb8a81d8c2b
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
@@ -0,0 +1,168 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4>{{ $t('Firewall SSO') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-dropdown :text="$t('New Firewall')" variant="outline-primary">
+          <b-dropdown-item v-for="(text, firewallType) in types" :key="firewallType"
+            :to="{ name: 'newFirewall', params: { firewallType } }"
+          >{{ text }}</b-dropdown-item>
+        </b-dropdown>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Firewall SSO?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+import { types } from '../config'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = toRefs(selected)
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search),
+    types
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
index 189f87ad8a51..79417f8062e0 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
@@ -73,3 +73,69 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_firewalls/updateFirewall', form.value),
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('firewalls', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Hostname or IP', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'type',
+      label: 'Firewall Type', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'port',
+      label: 'Port', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Hostname or IP'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'type',
+      text: i18n.t('Firewall Type'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'port',
+      text: i18n.t('Port'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null },
+      { field: 'port', op: 'contains', value: null },
+      { field: 'type', op: 'contains', value: null }
+    ] }
+  ] })
+})
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_router.js b/html/pfappserver/root/src/views/Configuration/firewalls/_router.js
index 61f3d3a21e1f..4e7bbe57ad44 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_router.js
@@ -1,7 +1,7 @@
 import store from '@/store'
 import StoreModule from './_store'
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/FirewallsList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const useRouter = $router => {
@@ -25,8 +25,7 @@ export default [
   {
     path: 'firewalls',
     name: 'firewalls',
-    component: TheList,
-    props: (route) => ({ query: route.query.query }),
+    component: TheSearch,
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_store.js b/html/pfappserver/root/src/views/Configuration/firewalls/_store.js
index df1ffb8c1903..7863c66ec159 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_store.js
@@ -31,13 +31,13 @@ const actions = {
       sort: 'id',
       fields: ['id', 'port'].join(',')
     }
-    return api.firewalls(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   optionsById: ({ commit }, id) => {
     commit('ITEM_REQUEST')
-    return api.firewallOptions(id).then(response => {
+    return api.itemOptions(id).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -47,7 +47,7 @@ const actions = {
   },
   optionsByFirewallType: ({ commit }, firewallType) => {
     commit('ITEM_REQUEST')
-    return api.firewallsOptions(firewallType).then(response => {
+    return api.listOptions(firewallType).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -60,7 +60,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.firewall(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -70,7 +70,7 @@ const actions = {
   },
   createFirewall: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createFirewall(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -80,7 +80,7 @@ const actions = {
   },
   updateFirewall: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateFirewall(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -90,23 +90,13 @@ const actions = {
   },
   deleteFirewall: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteFirewall(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
       throw err
     })
-  },
-  testFirewall: ({ commit }, data) => {
-    commit('ITEM_REQUEST')
-    return api.testFirewall(data).then(response => {
-      commit('ITEM_SUCCESS')
-      return response
-    }).catch(err => {
-      commit('ITEM_ERROR', err.response)
-      throw err
-    })
   }
 }
 

From 356c272ab5c0189ea980ea429e20d2b94e7b10cc Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 2 Jun 2021 11:41:03 -0400
Subject: [PATCH 14/72] refactor floating devices search

---
 .../_components/FloatingDevicesList.vue       |  68 --------
 .../firewalls/_composables/useCollection.js   |   2 +-
 .../views/Configuration/firewalls/_router.js  |   1 +
 .../Configuration/floatingDevices/_api.js     |  19 +-
 .../floatingDevices/_components/TheSearch.vue | 165 ++++++++++++++++++
 .../_composables/useCollection.js             |  81 ++++++++-
 .../Configuration/floatingDevices/_router.js  |   6 +-
 .../Configuration/floatingDevices/_store.js   |  12 +-
 .../Configuration/floatingDevices/schema.js   |   1 +
 9 files changed, 267 insertions(+), 88 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/FloatingDevicesList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/views/Configuration/_components/FloatingDevicesList.vue b/html/pfappserver/root/src/views/Configuration/_components/FloatingDevicesList.vue
deleted file mode 100644
index 839d7b5d1eb2..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/FloatingDevicesList.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">
-            {{ $t('Floating Devices') }}
-            <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_floating_network_devices" />
-          </h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newFloatingDevice' }">{{ $t('New Floating Device') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No devices found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Floating Device?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonHelp from '@/components/pfButtonHelp'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/floatingDevice'
-
-export default {
-  name: 'floating-devices-list',
-  components: {
-    pfButtonDelete,
-    pfButtonHelp,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_floatingdevices/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneFloatingDevice', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_floatingdevices/deleteFloatingDevice', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
index 79417f8062e0..f788a7e6a85c 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
@@ -138,4 +138,4 @@ export const useSearch = makeSearch('firewalls', {
       { field: 'type', op: 'contains', value: null }
     ] }
   ] })
-})
\ No newline at end of file
+})
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_router.js b/html/pfappserver/root/src/views/Configuration/firewalls/_router.js
index 4e7bbe57ad44..02092029e6f3 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_router.js
@@ -11,6 +11,7 @@ export const useRouter = $router => {
       .push({ name: 'firewall', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneFirewall', params }),
+    goToNew: params => $router.push({ name: 'newFirewall', params })
   }
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_api.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/_api.js
index f620af0f577b..9192ca78eecd 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_api.js
@@ -1,37 +1,42 @@
 import apiCall from '@/utils/api'
 
 export default {
-  floatingDevices: params => {
+  list: params => {
     return apiCall.get('config/floating_devices', { params }).then(response => {
       return response.data
     })
   },
-  floatingDevicesOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/floating_devices').then(response => {
       return response.data
     })
   },
-  floatingDevice: id => {
+  item: id => {
     return apiCall.get(['config', 'floating_device', id]).then(response => {
       return response.data.item
     })
   },
-  floatingDeviceOptions: id => {
+  itemOptions: id => {
     return apiCall.options(['config', 'floating_device', id]).then(response => {
       return response.data
     })
   },
-  createFloatingDevice: data => {
+  create: data => {
     return apiCall.post('config/floating_devices', data).then(response => {
       return response.data
     })
   },
-  updateFloatingDevice: data => {
+  update: data => {
     return apiCall.patch(['config', 'floating_device', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteFloatingDevice: id => {
+  delete: id => {
     return apiCall.delete(['config', 'floating_device', id])
+  },
+  search: data => {
+    return apiCall.post('config/floating_devices/search', data).then(response => {
+      return response.data
+    })
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
new file mode 100644
index 000000000000..e33855f66d08
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
@@ -0,0 +1,165 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center">
+        {{ $t('Floating Devices') }}
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_floating_network_devices" />
+      </h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New Floating Device') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Floating Device?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = toRefs(selected)
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
index 0aa77a15810f..5df9db54dc2b 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
@@ -33,12 +33,87 @@ export const useStore = (props, context, form) => {
     createItem: () => $store.dispatch('$_floatingdevices/createFloatingDevice', form.value),
     deleteItem: () => $store.dispatch('$_floatingdevices/deleteFloatingDevice', id.value),
     getItem: () => $store.dispatch('$_floatingdevices/getFloatingDevice', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
+      if (isClone.value)
         item.not_deletable = false
-      }
       return item
     }),
     updateItem: () => $store.dispatch('$_floatingdevices/updateFloatingDevice', form.value)
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('firewalls', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'MAC', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'ip',
+      label: 'IP Address', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'pvid',
+      label: 'Native VLAN', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'taggedVlan',
+      label: `Tagged VLAN's`, // i18n defer
+      sortable: false,
+      visible: true
+    },
+    {
+      key: 'trunkPort',
+      label: 'Trunk Port', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('MAC'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'ip',
+      text: i18n.t('IP Address'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'pvid',
+      text: i18n.t('Native VLAN'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null },
+      { field: 'ip', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_router.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/_router.js
index bb5b05249058..abde04eb6c23 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_router.js
@@ -1,7 +1,7 @@
 import store from '@/store'
 import StoreModule from './_store'
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/FloatingDevicesList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const useRouter = $router => {
@@ -11,6 +11,7 @@ export const useRouter = $router => {
       .push({ name: 'floating_device', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneFloatingDevice', params }),
+    goToNew: () => $router.push({ name: 'newFloatingDevice' }),
   }
 }
 
@@ -24,8 +25,7 @@ export default [
   {
     path: 'floating_devices',
     name: 'floating_devices',
-    component: TheList,
-    props: (route) => ({ query: route.query.query }),
+    component: TheSearch,
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_store.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/_store.js
index ccc8a9ca44e0..d4e28955eca6 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_store.js
@@ -31,7 +31,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.floatingDevice(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -42,7 +42,7 @@ const actions = {
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.floatingDeviceOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -50,7 +50,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.floatingDevicesOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -61,7 +61,7 @@ const actions = {
   },
   createFloatingDevice: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createFloatingDevice(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -71,7 +71,7 @@ const actions = {
   },
   updateFloatingDevice: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateFloatingDevice(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -81,7 +81,7 @@ const actions = {
   },
   deleteFloatingDevice: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteFloatingDevice(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/schema.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/schema.js
index b843d39268ba..44ddf8054a52 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/schema.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/schema.js
@@ -28,6 +28,7 @@ export default (props) => {
     id: yup.string()
       .nullable()
       .required(i18n.t('MAC Address required.'))
+      .isMAC(i18n.t('Invalid MAC address.'))
       .floatingDeviceIdentifierNotExistsExcept((!isNew && !isClone) ? id : undefined, i18n.t('MAC Address exists.')),
     ip: yup.string().nullable().label('IP'),
     pvid: yup.string().nullable().label('VLAN'),

From 0e2d88e75b969d2c40c53a055ad5aab6021bcabb Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 3 Jun 2021 15:53:45 -0400
Subject: [PATCH 15/72] add BaseTableSortable component

---
 .../src/components/new/BaseTableSortable.vue  | 188 ++++++++++++++++++
 .../Configuration/_config/floatingDevice.js   |  94 ---------
 .../_components/TheSearch.vue}                |   0
 3 files changed, 188 insertions(+), 94 deletions(-)
 create mode 100644 html/pfappserver/root/src/components/new/BaseTableSortable.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/floatingDevice.js
 rename html/pfappserver/root/src/views/Configuration/{_components/ConnectionProfilesList.vue => connectionProfiles/_components/TheSearch.vue} (100%)

diff --git a/html/pfappserver/root/src/components/new/BaseTableSortable.vue b/html/pfappserver/root/src/components/new/BaseTableSortable.vue
new file mode 100644
index 000000000000..beb1c0f5c1c4
--- /dev/null
+++ b/html/pfappserver/root/src/components/new/BaseTableSortable.vue
@@ -0,0 +1,188 @@
+<template>
+  <b-table-simple
+    v-bind="$attrs"
+    aria-multiselectable="true"
+    class="base-table-sortable b-table"
+    :class="{
+      'b-table-selectable': selectable
+    }"
+    :aria-busy="busy"
+  >
+    <b-thead>
+      <b-th aria-colindex="1" class="text-center" style="width: 40px;"
+        v-b-tooltip.hover.top.d300 :title="$t('Drag and drop rows to reorder.')"
+      ><icon name="sort" /></b-th>
+      <b-th v-for="(field, fIndex) in fields" :key="field.key"
+        :aria-colindex="fIndex + 2" :class="field.class" :style="field.thStyle">
+        <slot :name="`head(${field.key})`" v-bind="{ label: field.label, column: field.key, field, isFoot: false }">{{ $t(field.label) }}</slot>
+      </b-th>
+    </b-thead>
+    <!-- <b-tbody> --><draggable v-model="dragItems"
+      group="table" tag="tbody" handle=".drag-handle"
+      :class="{[`cursor-grabbing`]: dragging === true}"
+      :move="dragMove"
+      @start="dragging = true"
+      @end="dragging = false"
+      @change="dragChanged"
+    >
+      <b-tr v-if="items.length === 0"
+        class="b-table-empty-row"
+      >
+        <b-td aria-colindex="1" :colspan="fields.length + 1">
+          <div role="alert" aria-live="polite">
+            <slot name="empty" v-bind="{ isLoading: busy }"/>
+          </div>
+        </b-td>
+      </b-tr>
+      <b-tr  v-for="(item, iIndex) in items" :key="`row-${iIndex}`"
+        tabindex="0"
+        :aria-selected="(rowsSelected[iIndex]) ? 'true' : 'false'"
+        :class="{
+          'b-table-row-selected': rowsSelected[iIndex],
+          'table-active': rowsSelected[iIndex]
+        }"
+        @click="onRowClicked(iIndex)"
+      >
+        <b-td aria-colindex="1" class="p-0 text-center"
+          :class="{
+            'drag-handle': !item.not_sortable
+          }"
+          @click.stop.prevent
+        ><icon :name="(item.not_sortable) ? 'lock' : 'th'" /></b-td>
+        <b-td v-for="(field, fIndex) in fields" :key="`${field.key}-${iIndex}`"
+          :aria-colindex="fIndex + 2" :class="field.tdClass || field.class">
+          <slot :name="`cell(${field.key})`" v-bind="{
+            item, index: iIndex, field,
+            unformatted: item[field.key],
+            value: (field.formatter) ? field.formatter(item[field.key]) : item[field.key],
+            rowSelected: rowsSelected[iIndex]
+          }">{{ (field.formatter) ? field.formatter(item[field.key]) : item[field.key] }}</slot>
+        </b-td>
+      </b-tr>
+    </draggable><!-- </b-tbody> -->
+
+  </b-table-simple>
+</template>
+<script>
+const draggable = () => import('vuedraggable')
+
+const components = {
+  draggable
+}
+
+const props = {
+  fields: {
+    type: Array
+  },
+  items: {
+    type: Array
+  },
+  busy: {
+    type: Boolean
+  },
+  selectable: {
+    type: Boolean
+  }
+}
+
+import { ref, toRefs, watch } from '@vue/composition-api'
+
+const setup = (props, context) => {
+
+  const {
+    items
+  } = toRefs(props)
+
+  const { emit } = context
+
+  const dragging = ref(false)
+  const dragChanged = e => {
+      if (e.moved) {
+        const oldIndex = e.moved.oldIndex - 1
+        const newIndex = e.moved.newIndex - 1
+        const _items = JSON.parse(JSON.stringify(items.value))
+        const tmp = _items[oldIndex]
+        if (oldIndex > newIndex) {
+          // shift down (not swapped)
+          for (let i = oldIndex; i > newIndex; i--) {
+            _items[i] = _items[i - 1]
+          }
+        } else {
+          // shift up (not swapped)
+          for (let i = oldIndex; i < newIndex; i++) {
+            _items[i] = _items[i + 1]
+          }
+        }
+        _items[newIndex] = tmp
+        emit('items-sorted', _items)
+      }
+  }
+  const dragMove = e => {
+    const { draggedContext: { futureIndex } = {} } = e
+    const { [futureIndex - 1]: { not_sortable = false } = {} } = items.value
+    return !not_sortable // prevent move onto not_sortable
+  }
+  const dragItems = ref(items.value)
+
+  const rowsSelected = ref([])
+  watch(items, () => {
+    rowsSelected.value = []
+    emit('row-selected', [])
+    dragItems.value = items.value
+  }, { deep: true })
+
+  const selectRow = index => {
+    rowsSelected.value[index] = !rowsSelected.value[index]
+    emit('row-selected', items.value.filter((_, i) => rowsSelected.value[i]))
+  }
+
+  const unselectRow = index => {
+    rowsSelected.value[index] = false
+    emit('row-selected', items.value.filter((_, i) => rowsSelected.value[i]))
+  }
+
+  const selectAllRows = () => {
+    rowsSelected.value = items.value.map(() => true)
+    emit('row-selected', items.value)
+  }
+
+  const clearSelected = () => {
+    rowsSelected.value = []
+    emit('row-selected', [])
+  }
+
+  const onRowClicked = index => {
+    emit('row-clicked', items.value[index])
+  }
+
+  return {
+    rowsSelected,
+    selectRow,
+    unselectRow,
+    selectAllRows,
+    clearSelected,
+    onRowClicked,
+
+    dragging,
+    dragChanged,
+    dragMove,
+    dragItems
+  }
+}
+
+// @vue/component
+export default {
+  name: 'base-table-sortable',
+  inheritAttrs: false,
+  components,
+  props,
+  setup
+}
+</script>
+<style lang="scss">
+.base-table-sortable {
+  & > tbody > tr > td.drag-handle {
+    cursor: grab;
+  }
+}
+</style>
diff --git a/html/pfappserver/root/src/views/Configuration/_config/floatingDevice.js b/html/pfappserver/root/src/views/Configuration/_config/floatingDevice.js
deleted file mode 100644
index 482d94322427..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/floatingDevice.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'MAC',
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'ip',
-    label: 'IP Address', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'pvid',
-    label: 'Native VLAN', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'taggedVlan',
-    label: `Tagged VLAN's`, // i18n defer
-    sortable: false,
-    visible: true
-  },
-  {
-    key: 'trunkPort',
-    label: 'Trunk Port', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('MAC'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'ip',
-    text: i18n.t('IP Address'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'floating_device', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by MAC or IP address'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/floating_devices',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'ip', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'floating_devices' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'ip', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_components/ConnectionProfilesList.vue b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
similarity index 100%
rename from html/pfappserver/root/src/views/Configuration/_components/ConnectionProfilesList.vue
rename to html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue

From 13b1edbd07b1655ec5de8b91efeb69663d68c847 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 3 Jun 2021 15:57:22 -0400
Subject: [PATCH 16/72] refactor connection profiles search

---
 .../root/src/components/new/index.js          |   2 +
 .../src/composables/useInputValueToggle.js    |   4 +-
 .../Configuration/_store/factory/search.js    |  27 ++-
 .../Configuration/connectionProfiles/_api.js  |  38 ++--
 .../_components/TheSearch.vue                 | 199 +++++++++++++++++-
 .../_components/ToggleStatus.js               |  21 +-
 .../_composables/useCollection.js             |  69 +++++-
 .../connectionProfiles/_router.js             |   7 +-
 .../connectionProfiles/_store.js              |  30 +--
 .../_composables/useCollection.js             |   2 +-
 10 files changed, 333 insertions(+), 66 deletions(-)

diff --git a/html/pfappserver/root/src/components/new/index.js b/html/pfappserver/root/src/components/new/index.js
index 4e5cdc567253..4d461543cc26 100644
--- a/html/pfappserver/root/src/components/new/index.js
+++ b/html/pfappserver/root/src/components/new/index.js
@@ -65,6 +65,7 @@ import BaseSearchInputColumns from './BaseSearchInputColumns'
 import BaseSearchInputLimit from './BaseSearchInputLimit'
 import BaseSearchInputPage from './BaseSearchInputPage'
 import BaseTableEmpty from './BaseTableEmpty'
+import BaseTableSortable from './BaseTableSortable'
 import BaseView from './BaseView'
 
 import { mergeProps, renderHOCWithScopedSlots } from './utils'
@@ -157,6 +158,7 @@ export {
 
   // tables
   BaseTableEmpty,
+  BaseTableSortable,
 
   // utils
   mergeProps,
diff --git a/html/pfappserver/root/src/composables/useInputValueToggle.js b/html/pfappserver/root/src/composables/useInputValueToggle.js
index 0ff6b3bac2bb..98adc8b92273 100644
--- a/html/pfappserver/root/src/composables/useInputValueToggle.js
+++ b/html/pfappserver/root/src/composables/useInputValueToggle.js
@@ -16,7 +16,7 @@ export const useInputValueToggleProps = {
   }
 }
 
-export const useInputValueToggle = (valueProps, props) => {
+export const useInputValueToggle = (valueProps, props, context) => {
 
   const {
     value: rxValue,
@@ -42,7 +42,7 @@ export const useInputValueToggle = (valueProps, props) => {
     } = options.value
     const rxValue = (mappedValue !== undefined) ? mappedValue : defaultValue
     if (mappedPromise) // handle Promise
-      return mappedPromise(rxValue, props)
+      return mappedPromise(rxValue, props, context)
     else // otherwise emit
       return rxOnInput(rxValue)
   }
diff --git a/html/pfappserver/root/src/views/Configuration/_store/factory/search.js b/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
index 32db459ec6aa..e8c9ffea0882 100644
--- a/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
+++ b/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
@@ -54,7 +54,7 @@ const factory = (uuid, options = {}) => {
         useColumns,
         useFields,
         useString,
-        useCondition: (condition) => condition,
+        useCondition: values => ({ op: 'and', values }),
 
         // overload defaults
         ...options,
@@ -124,9 +124,12 @@ const factory = (uuid, options = {}) => {
         const fields = this.useFields(this.columns).join(',')
         const params = {
           fields,
-          sort: ((this.sortDesc)
-            ? `${this.sortBy} DESC`
-            : `${this.sortBy}`
+          sort: ((this.sortBy)
+            ? ((this.sortDesc)
+              ? `${this.sortBy} DESC`
+              : `${this.sortBy}`
+            )
+            : null // use natural sort
           ),
           limit: this.limit,
           cursor: ((this.page * this.limit) - this.limit)
@@ -173,9 +176,12 @@ const factory = (uuid, options = {}) => {
         const _body = {
           fields,
           query,
-          sort: ((this.sortDesc)
-            ? [`${this.sortBy} DESC`]
-            : [`${this.sortBy}`]
+          sort: ((this.sortBy)
+            ? ((this.sortDesc)
+              ? [`${this.sortBy} DESC`]
+              : [`${this.sortBy}`]
+            )
+            : null // use natural sort
           ),
           limit: this.limit,
           cursor: ((this.page * this.limit) - this.limit)
@@ -206,8 +212,11 @@ const factory = (uuid, options = {}) => {
       reSearch() {
         const visibleSortBy = this.columns.find(c => c.visible && c.key == this.sortBy)
         if (!visibleSortBy) {
-          this.sortBy = this.columns.find(c => c.required)['key']
-          this.sortDesc = false
+          const sortable = this.columns.find(c => c.required && c.sortable)
+          if (sortable) {
+            this.sortBy = sortable['key']
+            this.sortDesc = false
+          }
         }
         if (this.lastQuery) // last query good
           this.doSearch(this.lastQuery) // re-perform search w/ last query
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_api.js b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_api.js
index cb7f9c6fca3b..c01d6315b526 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_api.js
@@ -1,72 +1,72 @@
 import apiCall from '@/utils/api'
 
 export default {
-  /**
-   * Connection Profiles
-   */
-  connectionProfiles: params => {
+  list: params => {
     return apiCall.get(['config', 'connection_profiles'], { params }).then(response => {
       return response.data
     })
   },
-  connectionProfilesOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/connection_profiles').then(response => {
       return response.data
     })
   },
-  connectionProfile: id => {
+  item: id => {
     return apiCall.get(['config', 'connection_profile', id]).then(response => {
       return response.data.item
     })
   },
-  connectionProfileOptions: id => {
+  itemOptions: id => {
     return apiCall.options(['config', 'connection_profile', id]).then(response => {
       return response.data
     })
   },
-  createConnectionProfile: data => {
+  create: data => {
     return apiCall.post('config/connection_profiles', data).then(response => {
       return response.data
     })
   },
-  updateConnectionProfile: data => {
+  update: data => {
     return apiCall.patch(['config', 'connection_profile', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteConnectionProfile: id => {
+  delete: id => {
     return apiCall.delete(['config', 'connection_profile', id])
   },
-  sortConnectionProfiles: data => {
+  sort: data => {
     return apiCall.patch('config/connection_profiles/sort_items', data).then(response => {
       return response
     })
   },
-  /**
-   * Connection Profiles Files
-   */
-  connectionProfileFiles: params => {
+  search: data => {
+    return apiCall.post('config/connection_profiles/search', data).then(response => {
+      return response.data
+    })
+  },
+
+  files: params => {
     return apiCall.get(['config', 'connection_profile', params.id, 'files'], { params }).then(response => {
       return response.data
     })
   },
-  connectionProfileFile: params => {
+  file: params => {
     const get = params.quiet ? 'getQuiet' : 'get'
     return apiCall[get](['config', 'connection_profile', params.id, 'files', ...params.filename.split('/')]).then(response => {
       return response.data
     })
   },
-  createConnectionProfileFile: params => {
+  createFile: params => {
     return apiCall.put(['config', 'connection_profile', params.id, 'files', ...params.filename.split('/')], params.content).then(response => {
       return response.data
     })
   },
-  updateConnectionProfileFile: params => {
+  updateFile: params => {
     return apiCall.patch(['config', 'connection_profile', params.id, 'files', ...params.filename.split('/')], params.content).then(response => {
       return response.data
     })
   },
-  deleteConnectionProfileFile: params => {
+  deleteFile: params => {
     return apiCall.delete(['config', 'connection_profile', params.id, 'files', ...params.filename.split('/')])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
index a2d3abe8beab..07ae6daf6b95 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
@@ -1,3 +1,199 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center">
+        {{ $t('Connection Profiles') }}
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_connection_profiles" />
+      </h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New Connection Profile') }}</b-button>
+      </base-search>
+      <base-table-sortable ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        class="mb-0"
+        show-empty
+         fixed
+        striped
+        selectable
+        @row-clicked="goToItem"
+        @row-selected="onRowSelected"
+        @items-sorted="onSorted"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(status)="{ item }">
+          <toggle-status :value="item.status" :disabled="item.not_deletable || isLoading"
+            :item="item" @input="item.status = $event" />
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right"
+            @click.stop.prevent
+          >
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Connection Profile?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-secondary" class="mr-1"
+              @click.stop.prevent="goToPreview(item)"
+            >{{ $t('Preview') }} <icon class="ml-1" name="external-link-alt"></icon></b-button>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </base-table-sortable>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableSortable
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import ToggleStatus from './ToggleStatus'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableSortable,
+  pfEmptyTable,
+  ToggleStatus
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+  const {
+    goToPreview
+  } = router
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = toRefs(selected)
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  const {
+    sortItems
+  } = useStore(props, context)
+
+  const onSorted = _items => {
+    items.value = _items
+    sortItems(items.value.map(item => item.id))
+      .then(() => reSearch())
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search),
+    goToPreview,
+    onSorted
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
+
+
+
+<!--
+
+
 <template>
   <b-card no-body>
     <pf-config-list
@@ -29,7 +225,7 @@
       </template>
       <template v-slot:cell(status)="item">
          <toggle-status :value="item.status" :disabled="item.not_deletable || isLoading"
-          :item="item" :searchable-store-name="$refs.pfConfigList.searchableStoreName" /> 
+          :item="item" :searchable-store-name="$refs.pfConfigList.searchableStoreName" />
       </template>
     </pf-config-list>
   </b-card>
@@ -83,3 +279,4 @@ export default {
   }
 }
 </script>
+-->
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/ToggleStatus.js b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/ToggleStatus.js
index 931fd8ec3193..eecfd149017b 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/ToggleStatus.js
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/ToggleStatus.js
@@ -13,25 +13,19 @@ export const props = {
       {
         value: 'disabled', label: i18n.t('Disabled'),
         color: 'var(--danger)', icon: 'times',
-        promise: (value, props) => {
-          const { item, searchableStoreName } = toRefs(props)
+        promise: (value, props, context) => {
+          const { item } = toRefs(props)
           return store.dispatch('$_connection_profiles/disableConnectionProfile', item.value)
-            .then(() => {
-              // update searcahble store
-              store.dispatch(`${searchableStoreName.value}/updateItem`, { key: 'id', id: item.value.id, prop: 'status', data: 'disabled' })
-            })
+            .then(() => context.emit('input', value))
         }
       },
       {
         value: 'enabled', label: i18n.t('Enabled'),
         color: 'var(--success)', icon: 'check',
-        promise: (value, props) => {
-          const { item, searchableStoreName } = toRefs(props)
+        promise: (value, props, context) => {
+          const { item } = toRefs(props)
           return store.dispatch('$_connection_profiles/enableConnectionProfile', item.value)
-            .then(() => {
-              // update searcahble store
-              store.dispatch(`${searchableStoreName.value}/updateItem`, { key: 'id', id: item.value.id, prop: 'status', data: 'enabled' })
-            })
+            .then(() => context.emit('input', value))
       }
       }
     ])
@@ -42,9 +36,6 @@ export const props = {
   },
   item: {
     type: Object
-  },
-  searchableStoreName: {
-    type: String
   }
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js
index d5c8943dc2ed..9d9f5f787862 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js
@@ -45,6 +45,73 @@ export const useStore = (props, context, form) => {
       }
       return item
     }),
-    updateItem: () => $store.dispatch('$_connection_profiles/updateConnectionProfile', form.value)
+    updateItem: () => $store.dispatch('$_connection_profiles/updateConnectionProfile', form.value),
+    sortItems: params => $store.dispatch('$_connection_profiles/sortConnectionProfiles', params)
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('connectionProfiles', {
+  api,
+  sortBy: null, // use natural order (sortable)
+  columns: [ // output uses natural order (w/ sortable drag-drop), ensure NO columns are 'sortable: true'
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'status',
+      label: 'Status', // i18n defer
+      visible: true
+    },
+    {
+      key: 'id',
+      label: 'MAC', // i18n defer
+      required: true,
+      searchable: true,
+      visible: true
+    },
+    {
+      key: 'description',
+      label: 'Description', // i18n defer
+      searchable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    },
+    {
+      key: 'not_sortable',
+      required: true,
+      visible: false
+    },
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'description',
+      text: i18n.t('Description'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null },
+      { field: 'description', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_router.js b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_router.js
index 81e6505cb8eb..597a7ad325aa 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_router.js
@@ -8,10 +8,12 @@ export const useRouter = $router => {
       .push({ name: 'connection_profile', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneConnectionProfile', params }),
+    goToNew: () => $router.push({ name: 'newConnectionProfile' }),
+    goToPreview: params => window.open(`/portal_preview/captive-portal?PORTAL=${params.id}`, '_blank')
   }
 }
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/ConnectionProfilesList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const beforeEnter = (to, from, next = () => {}) => {
@@ -24,8 +26,7 @@ export default [
   {
     path: 'connection_profiles',
     name: 'connection_profiles',
-    component: TheList,
-    props: (route) => ({ query: route.query.query }),
+    component: TheSearch,
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_store.js b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_store.js
index 08ce809f31b8..49bcb54cd259 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_store.js
@@ -38,14 +38,14 @@ const actions = {
       sort: 'id',
       fields: ['id'].join(',')
     }
-    return api.connectionProfiles(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.connectionProfileOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -53,7 +53,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.connectionProfilesOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -67,7 +67,7 @@ const actions = {
       return Promise.resolve(state.cache[id])
     }
     commit('ITEM_REQUEST')
-    return api.connectionProfile(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return state.cache[id]
     }).catch((err) => {
@@ -77,7 +77,7 @@ const actions = {
   },
   createConnectionProfile: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createConnectionProfile(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -87,7 +87,7 @@ const actions = {
   },
   updateConnectionProfile: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateConnectionProfile(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -97,7 +97,7 @@ const actions = {
   },
   deleteConnectionProfile: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteConnectionProfile(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {
@@ -110,7 +110,7 @@ const actions = {
       items: data
     }
     commit('ITEM_REQUEST', types.LOADING)
-    return api.sortConnectionProfiles(params).then(response => {
+    return api.sort(params).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch(err => {
@@ -121,7 +121,7 @@ const actions = {
   enableConnectionProfile: ({ commit }, data) => {
     commit('ITEM_REQUEST')
     const _data = { id: data.id, status: 'enabled' }
-    return api.updateConnectionProfile(_data).then(response => {
+    return api.update(_data).then(response => {
       commit('ITEM_ENABLED', data)
       return response
     }).catch(err => {
@@ -132,7 +132,7 @@ const actions = {
   disableConnectionProfile: ({ commit }, data) => {
     commit('ITEM_REQUEST')
     const _data = { id: data.id, status: 'disabled' }
-    return api.updateConnectionProfile(_data).then(response => {
+    return api.update(_data).then(response => {
       commit('ITEM_DISABLED', data)
       return response
     }).catch(err => {
@@ -148,7 +148,7 @@ const actions = {
       fields: ['name', 'size', 'entries', 'type', 'not_deletable', 'not_revertible'].join(',')
     }
     commit('FILE_REQUEST')
-    return api.connectionProfileFiles(params).then(response => {
+    return api.files(params).then(response => {
       const _walk = (item, path) => {
         Object.assign(item, { path })
         if ('entries' in item) {
@@ -162,7 +162,7 @@ const actions = {
   },
   getFile: ({ state, commit, dispatch }, params) => {
     commit('FILE_REQUEST')
-    return api.connectionProfileFile(params).then(content => {
+    return api.file(params).then(content => {
       // Retrieve metadata ..
       let filePromise
       if (state.files.cache[params.id]) {
@@ -192,7 +192,7 @@ const actions = {
   },
   createFile: ({ commit }, data) => {
     commit('FILE_REQUEST')
-    return api.createConnectionProfileFile(data).then(response => {
+    return api.createFile(data).then(response => {
       commit('FILE_SUCCESS', data)
       return response
     }).catch(err => {
@@ -202,7 +202,7 @@ const actions = {
   },
   updateFile: ({ commit }, data) => {
     commit('FILE_REQUEST')
-    return api.updateConnectionProfileFile(data).then(response => {
+    return api.updateFile(data).then(response => {
       commit('FILE_SUCCESS', data)
       return response
     }).catch(err => {
@@ -212,7 +212,7 @@ const actions = {
   },
   deleteFile: ({ commit, dispatch }, params) => {
     commit('FILE_REQUEST', types.DELETING)
-    return api.deleteConnectionProfileFile(params).then(() => {
+    return api.deleteFile(params).then(() => {
       commit('FILE_DESTROYED')
       return dispatch('files', { id: params.id })
     }).catch(err => {
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
index 5df9db54dc2b..d7ef5afababa 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
@@ -44,7 +44,7 @@ export const useStore = (props, context, form) => {
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
 import api from '../_api'
-export const useSearch = makeSearch('firewalls', {
+export const useSearch = makeSearch('floatingDevices', {
   api,
   columns: [
     {

From d4641d753cee46a5fc11b11e3c1b61919cdeb937 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Tue, 8 Jun 2021 17:10:11 -0400
Subject: [PATCH 17/72] add filter engine search

---
 .../_components/FilterEnginesList.vue         | 164 --------------
 .../Configuration/_config/filterEngine.js     |  35 ---
 .../views/Configuration/filterEngines/_api.js | 107 +++++----
 .../filterEngines/_components/TheSearch.vue   | 206 ++++++++++++++++++
 .../filterEngines/_components/TheTabs.vue     |  91 ++++++++
 .../filterEngines/_components/ToggleStatus.js |  26 ++-
 .../_composables/useCollection.js             |  80 +++++++
 .../Configuration/filterEngines/_router.js    |  10 +-
 .../Configuration/filterEngines/_store.js     |  28 +--
 .../Configuration/filterEngines/config.js     |   1 -
 10 files changed, 473 insertions(+), 275 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/FilterEnginesList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/filterEngine.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheTabs.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/filterEngines/config.js

diff --git a/html/pfappserver/root/src/views/Configuration/_components/FilterEnginesList.vue b/html/pfappserver/root/src/views/Configuration/_components/FilterEnginesList.vue
deleted file mode 100644
index c2bfa33a1a2c..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/FilterEnginesList.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-  <b-card no-body>
-    <b-card-header>
-      <h4 class="d-inline mb-0" v-t="'Filter Engines'"></h4>
-    </b-card-header>
-    <b-card v-if="isLoadingCollections">
-      <b-container class="my-5">
-          <b-row class="justify-content-md-center text-secondary">
-              <b-col cols="12" md="auto">
-                <b-media>
-                  <template v-slot:aside><icon name="circle-notch" scale="2" spin></icon></template>
-                  <h4>{{ $t('Loading Filter Engines') }}</h4>
-                </b-media>
-              </b-col>
-          </b-row>
-      </b-container>
-    </b-card>
-    <b-tabs v-else
-      ref="tabs" :value="tabIndex" :key="tabIndex" card>
-      <b-tab v-for="(collection, index) in collections" :key="index"
-        :title="(collection && collection.name) ? collection.name : '...'" @click="tabIndex = index">
-        <b-card v-if="collection">
-          <h4 class="mb-3">{{ (collection && collection.name) ? collection.name : '...' }}</h4>
-          <b-button class="mb-3" variant="outline-primary" :to="{ name: 'newFilterEngine', params: collection }">{{ $t('New Filter') }}</b-button>
-          <pf-table-sortable
-            :items="(collection && collection.items) ? collection.items : []"
-            :fields="columns"
-            @row-clicked="view(collection, $event)"
-            hover
-            striped
-            @end="sort(collection, $event)"
-          >
-            <template v-slot:empty>
-              <pf-empty-table :is-loading="isLoadingCollection(collection)" :text="$t('Click the button to define a new filter.')">{{ $t('No filters defined') }}</pf-empty-table>
-            </template>
-            <template v-slot:cell(status)="item">
-             <toggle-status :value="item.status" :disabled="isLoadingCollection(collection)"
-              :item="item" :collection="collection" />
-            </template>
-            <template v-slot:cell(scopes)="item">
-              <b-badge v-for="(scope, index) in item.scopes" :key="index" class="mr-1" variant="secondary">{{ scope }}</b-badge>
-            </template>
-            <template v-slot:cell(buttons)="item">
-              <span class="float-right text-nowrap">
-                <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Filter?')" @on-delete="remove(collection, item)" reverse/>
-                <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(collection, item)">{{ $t('Clone') }}</b-button>
-              </span>
-            </template>
-          </pf-table-sortable>
-        </b-card>
-      </b-tab>
-    </b-tabs>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import pfTableSortable from '@/components/pfTableSortable'
-import { columns } from '../_config/filterEngine'
-import { ToggleStatus } from '@/views/Configuration/filterEngines/_components/'
-
-export default {
-  name: 'filter-engines-list',
-  components: {
-    pfButtonDelete,
-    pfEmptyTable,
-    pfTableSortable,
-    ToggleStatus
-  },
-  props: {
-    collection: { // from router
-      type: String,
-      default: null
-    }
-  },
-  data () {
-    return {
-      columns, // ../_config/filterEngines
-      collections: []
-    }
-  },
-  computed: {
-    // tabIndex defined by this.collection param via $router
-    tabIndex: {
-      get () {
-        const found = this.collections.findIndex(c => {
-          return c && c.collection === this.collection
-        })
-        return (found > -1) ? found : 0
-      },
-      set (newTabIndex) {
-        let { collections: { [newTabIndex]: { collection } = {} } = {} } = this
-        if (collection) {
-          this.$router.push({ name: 'filterEnginesCollection', params: { collection } })
-        }
-      }
-    },
-    isLoadingCollections () {
-      return this.$store.getters['$_filter_engines/isLoadingCollections']
-    },
-    isLoadingCollection () {
-      return (_collection = {}) => {
-        const { collection } = _collection
-        return !collection || this.$store.getters['$_filter_engines/isLoadingCollection'](collection)
-      }
-    },
-    isLoading () {
-      return this.$store.getters['$_filter_engines/isLoading']
-    }
-  },
-  methods: {
-    init () {
-      this.$store.dispatch('$_filter_engines/getCollections').then(collections => {
-        collections = collections.sort((a, b) => a.name.localeCompare(b.name)) // sort by name
-        for (let i = 0; i < collections.length; i++) {
-          this.$store.dispatch('$_filter_engines/getCollection', collections[i].collection).then(collection => {
-            this.$set(this.collections, i, collection)
-          })
-        }
-      })
-    },
-    sort (_collection, event) {
-      const { collection, items } = _collection
-      let data = items.map(item => item.id)
-      const { oldIndex, newIndex } = event // shifted, not swapped
-      const tmp = data[oldIndex]
-      if (oldIndex > newIndex) {
-        // shift down (not swapped)
-        for (let i = oldIndex; i > newIndex; i--) {
-          data[i] = data[i - 1]
-        }
-      } else {
-        // shift up (not swapped)
-        for (let i = oldIndex; i < newIndex; i++) {
-          data[i] = data[i + 1]
-        }
-      }
-      data[newIndex] = tmp
-      this.$store.dispatch('$_filter_engines/sortCollection', { collection, data }).then(() => {
-        this.$store.dispatch('notification/info', { message: this.$i18n.t('{name} resorted.', { name: this.$store.getters['$_filter_engines/collectionToName'](collection) } ) })
-      })
-    },
-    remove (_collection, item) {
-      const { collection } = _collection
-      const { id } = item
-      this.$store.dispatch('$_filter_engines/deleteFilterEngine', { collection, id })
-    },
-    clone (_collection, item) {
-      const { collection } = _collection
-      const { id } = item
-      this.$router.push({ name: 'cloneFilterEngine', params: { collection, id } })
-    },
-    view (_collection, item) {
-      const { collection } = _collection
-      const { id } = item
-      this.$router.push({ name: 'filter_engine', params: { collection, id } })
-    }
-  },
-  created () {
-    this.init()
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_config/filterEngine.js b/html/pfappserver/root/src/views/Configuration/_config/filterEngine.js
deleted file mode 100644
index 80e61b54759a..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/filterEngine.js
+++ /dev/null
@@ -1,35 +0,0 @@
-export const columns = [
-  {
-    key: 'status',
-    label: 'Status', // i18n defer
-    visible: true
-  },
-  {
-    key: 'id',
-    label: 'Name', // i18n defer
-    required: true,
-    visible: true
-  },
-  {
-    key: 'description',
-    label: 'Description', // i18n defer
-    required: true,
-    visible: true
-  },
-  {
-    key: 'scopes',
-    label: 'Scopes', // i18n defer
-    visible: true,
-    formatter: (value) => {
-      if (value && value.constructor === Array && value.length > 0) {
-        return value
-      }
-      return null // otherwise '[]' is displayed in cell
-    }
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_api.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_api.js
index 433216d344be..e53cfcc23dfb 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_api.js
@@ -1,53 +1,68 @@
 import apiCall from '@/utils/api'
 
-export default {
-  filterEnginesCollections: params => {
+const api = {
+  collections: params => {
     return apiCall.get('config/filter_engines', { params }).then(response => {
       return response.data
     })
-  },
-  filterEnginesCollection: collection => {
-    return apiCall.get(['config', 'filter_engines', collection], { params: { limit: 1000 } }).then(response => {
-      return response.data
-    }).catch(err => {
-      throw err
-    })
-  },
-  filterEngine: ({ resource, id }) => {
-    return apiCall.get(['config', 'filter_engines', resource, id]).then(response => {
-      return response.data.item
-    }).catch(err => {
-      throw err
-    })
-  },
-  filterEnginesOptions: collection => {
-    return apiCall.options(['config', 'filter_engines', collection]).then(response => {
-      return response.data
-    })
-  },
-  filterEngineOptions: ({ resource, id }) => {
-    return apiCall.options(['config', 'filter_engines', resource, id]).then(response => {
-      return response.data
-    })
-  },
-  sortFilterEngines: ({ collection, params }) => {
-    const patch = params.quiet ? 'patchQuiet' : 'patch'
-    return apiCall[patch](['config', 'filter_engines', collection, 'sort_items'], params).then(response => {
-      return response.data
-    })
-  },
-  createFilterEngine: ({ collection, data }) => {
-    return apiCall.post(['config', 'filter_engines', collection], data).then(response => {
-      return response.data
-    })
-  },
-  updateFilterEngine: ({ resource, id, data }) => {
-    const patch = data.quiet ? 'patchQuiet' : 'patch'
-    return apiCall[patch](['config', 'filter_engines', resource, id], data).then(response => {
-      return response.data
-    })
-  },
-  deleteFilterEngine: ({ resource, id }) => {
-    return apiCall.delete(['config', 'filter_engines', resource, id])
+  }
+}
+
+export default api
+
+export const apiFactory = _collection => {
+  const { collection, resource } = _collection
+  return {
+    ...api,
+    list: params => {
+      return apiCall.get(['config', 'filter_engines', collection], { params }).then(response => {
+        return response.data
+      }).catch(err => {
+        throw err
+      })
+    },
+    listOptions: () => {
+      return apiCall.options(['config', 'filter_engines', collection]).then(response => {
+        return response.data
+      })
+    },
+    create: data => {
+      return apiCall.post(['config', 'filter_engines', collection], data).then(response => {
+        return response.data
+      })
+    },
+    sort: params => {
+      const patch = params.quiet ? 'patchQuiet' : 'patch'
+      return apiCall[patch](['config', 'filter_engines', collection, 'sort_items'], params).then(response => {
+        return response.data
+      })
+    },
+    search: params => {
+      return apiCall.post(['config', 'filter_engines', collection, 'search'], params).then(response => {
+        return response.data
+      })
+    },
+
+    item: id => {
+      return apiCall.get(['config', 'filter_engines', resource, id]).then(response => {
+        return response.data.item
+      }).catch(err => {
+        throw err
+      })
+    },
+    itemOptions: id => {
+      return apiCall.options(['config', 'filter_engines', resource, id]).then(response => {
+        return response.data
+      })
+    },
+    update: data => {
+      const patch = data.quiet ? 'patchQuiet' : 'patch'
+      return apiCall[patch](['config', 'filter_engines', resource, data.id], data).then(response => {
+        return response.data
+      })
+    },
+    delete: id => {
+      return apiCall.delete(['config', 'filter_engines', resource, id])
+    }
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
new file mode 100644
index 000000000000..e9e08c9d93b0
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
@@ -0,0 +1,206 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">
+        {{ collection.name }}
+      </h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew({ collection: collection.collection })">{{ $t('New Filter') }}</b-button>
+      </base-search>
+      <base-table-sortable ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        class="mb-0"
+        show-empty
+         fixed
+        striped
+        selectable
+        @row-clicked="goToItem"
+        @row-selected="onRowSelected"
+        @items-sorted="onSorted"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(status)="{ item }">
+          <toggle-status :value="item.status" :disabled="isLoading"
+            :item="item" :collection="collection" @input="item.status = $event" />
+        </template>
+        <template #cell(scopes)="{ item }">
+          <b-badge v-for="(scope, index) in item.scopes" :key="index" class="mr-1" variant="secondary">{{ scope }}</b-badge>
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right"
+            @click.stop.prevent
+          >
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Filter?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </base-table-sortable>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableSortable
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import ToggleStatus from './ToggleStatus'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableSortable,
+  pfEmptyTable,
+  ToggleStatus
+}
+
+const props = {
+  collection: {
+    type: Object
+  }
+}
+
+import { ref, toRefs, watch } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { apiFactory } from '../_api'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const {
+    collection
+  } = toRefs(props)
+
+  const { root: { $router, $store } = {} } = context
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const router = useRouter($router)
+  const {
+    goToPreview
+  } = router
+
+  watch(() => collection.value.collection, () => {
+    search.api = apiFactory(collection.value)
+    items.value = []
+    reSearch()
+  }, { immediate: true })
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  const {
+    sortItems
+  } = useStore(props, context)
+
+  const onSorted = _items => {
+    items.value = _items
+    sortItems({ ...collection.value, items: items.value.map(item => item.id) })
+      .then(() => reSearch())
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search),
+    goToPreview,
+    onSorted
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  props,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheTabs.vue b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheTabs.vue
new file mode 100644
index 000000000000..bc45ace8c24f
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheTabs.vue
@@ -0,0 +1,91 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">
+        {{ $t('Filter Engines') }}
+      </h4>
+    </b-card-header>
+    <div class="card-body" v-if="isLoading">
+      <b-container class="my-5">
+          <b-row class="justify-content-md-center text-secondary">
+              <b-col cols="12" md="auto">
+                <b-media>
+                  <template v-slot:aside><icon name="circle-notch" scale="2" spin></icon></template>
+                  <h4>{{ $t('Loading Filter Engines') }}</h4>
+                </b-media>
+              </b-col>
+          </b-row>
+      </b-container>
+    </div>
+    <b-tabs v-else
+      ref="tabs" :value="tabIndex" :key="tabIndex"
+      card lazy
+    >
+      <b-tab v-for="(collection, index) in collections" :key="index"
+        :title="(collection && collection.name) ? collection.name : '...'"
+        @click="tabIndex = index"
+      >
+        <the-search :collection="collection" />
+      </b-tab>
+    </b-tabs>
+  </b-card>
+</template>
+<script>
+import TheSearch from './TheSearch'
+
+const components = {
+  TheSearch
+}
+
+const props = {
+  collection: {
+    type: String
+  }
+}
+
+import { computed, customRef, ref, toRefs } from '@vue/composition-api'
+
+const setup = (props, context) => {
+
+  const {
+    collection
+  } = toRefs(props)
+
+  const { root: { $router, $store } = {} } = context
+
+  const isLoading = computed(() => $store.getters['$_filter_engines/isLoadingCollections'])
+  const collections = ref([])
+  $store.dispatch('$_filter_engines/getCollections').then(_collections => {
+    collections.value = _collections.sort((a, b) => a.name.localeCompare(b.name)) // sort by name
+  })
+
+  const tabIndex = customRef((track, trigger) => ({
+    get() {
+      track()
+        const found = collections.value.findIndex(c => (c && c.collection === collection.value))
+        return (found > -1) ? found : 0
+    },
+    set(newTabIndex) {
+      const { [newTabIndex]: { collection } = {} } = collections.value
+      if (collection)
+        $router.push({ name: 'filterEnginesCollection', params: { collection } })
+      trigger()
+    }
+  }))
+
+  return {
+    isLoading,
+    collections,
+    tabIndex
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-tabs',
+  inheritAttrs: false,
+  components,
+  props,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/ToggleStatus.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/ToggleStatus.js
index 89b9d4394c30..b6f4491bc234 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/ToggleStatus.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/ToggleStatus.js
@@ -13,15 +13,18 @@ export const props = {
       {
         value: 'disabled', label: i18n.t('Disabled'),
         color: 'var(--danger)', icon: 'times',
-        promise: (value, props) => {
+        promise: (value, props, context) => {
           const { item, collection: _collection } = toRefs(props)
           const { id } = item.value
           const { collection } = _collection.value
           return store.dispatch('$_filter_engines/disableFilterEngine', { collection, id })
-            .then(() => store.dispatch(
-              'notification/info',
-              { message: i18n.t('{collection} <code>{id}</code> disabled.', { collection: store.getters['$_filter_engines/collectionToName'](collection), id }) }
-            ))
+            .then(() => {
+              context.emit('input', 'disabled')
+              store.dispatch(
+                'notification/info',
+                { message: i18n.t('{collection} <code>{id}</code> disabled.', { collection: store.getters['$_filter_engines/collectionToName'](collection), id }) }
+              )
+            })
             .catch(() => store.dispatch(
               'notification/danger',
               { message: i18n.t('{collection} <code>{id}</code> could not be disabled.', { collection: store.getters['$_filter_engines/collectionToName'](collection), id }) }
@@ -31,15 +34,18 @@ export const props = {
       {
         value: 'enabled', label: i18n.t('Enabled'),
         color: 'var(--success)', icon: 'check',
-        promise: (value, props) => {
+        promise: (value, props, context) => {
           const { item, collection: _collection } = toRefs(props)
           const { id } = item.value
           const { collection } = _collection.value
           return store.dispatch('$_filter_engines/enableFilterEngine', { collection, id })
-            .then(() => store.dispatch(
-              'notification/info',
-              { message: i18n.t('{collection} <code>{id}</code> enabled.', { collection: store.getters['$_filter_engines/collectionToName'](collection), id }) }
-            ))
+            .then(() => {
+              context.emit('input', 'enabled')
+              store.dispatch(
+                'notification/info',
+                { message: i18n.t('{collection} <code>{id}</code> enabled.', { collection: store.getters['$_filter_engines/collectionToName'](collection), id }) }
+              )
+            })
             .catch(() => store.dispatch(
               'notification/danger',
               { message: i18n.t('{collection} <code>{id}</code> could not be enabled.', { collection: store.getters['$_filter_engines/collectionToName'](collection), id }) }
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
index 28773484674d..241f77faa937 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
@@ -59,5 +59,85 @@ export const useStore = (props, context, form) => {
       return item
     }),
     updateItem: () => $store.dispatch('$_filter_engines/updateFilterEngine', { collection: collection.value, id: id.value, data: form.value }),
+    sortItems: params => $store.dispatch('$_filter_engines/sortItems', params),
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('filterEngines', {
+  api,
+  sortBy: null, // use natural order (sortable)
+  columns: [ // output uses natural order (w/ sortable drag-drop), ensure NO columns are 'sortable: true'
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'status',
+      label: 'Status', // i18n defer
+      visible: true
+    },
+    {
+      key: 'id',
+      label: 'Name', // i18n defer
+      required: true,
+      searchable: true,
+      visible: true
+    },
+    {
+      key: 'description',
+      label: 'Description', // i18n defer
+      searchable: true,
+      visible: true
+    },
+    {
+      key: 'scopes',
+      label: 'Scopes', // i18n defer
+      visible: true,
+      /*
+      formatter: (value) => {
+        if (value && value.constructor === Array && value.length > 0) {
+          return value
+        }
+        return null // otherwise '[]' is displayed in cell
+      }
+      */
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    },
+    {
+      key: 'not_sortable',
+      required: true,
+      visible: false
+    },
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'description',
+      text: i18n.t('Description'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null },
+      { field: 'description', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_router.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_router.js
index 7f5e294d9383..9df1ee82651e 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_router.js
@@ -8,10 +8,11 @@ export const useRouter = $router => {
       .push({ name: 'filter_engine', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneFilterEngine', params }),
+    goToNew: params => $router.push({ name: 'newFilterEngine', params })
   }
 }
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/FilterEnginesList')
+const TheTabs = () => import(/* webpackChunkName: "Configuration" */ './_components/TheTabs')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const beforeEnter = (to, from, next = () => {}) => {
@@ -25,15 +26,14 @@ export default [
   {
     path: 'filter_engines',
     name: 'filter_engines',
-    component: TheList,
-    props: (route) => ({ query: route.query.query }),
+    component: TheTabs,
     beforeEnter
   },
   {
     path: 'filter_engines/:collection',
     name: 'filterEnginesCollection',
-    component: TheList,
-    props: (route) => ({ collection: route.params.collection, query: route.query.query }),
+    component: TheTabs,
+    props: (route) => ({ collection: route.params.collection }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_store.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_store.js
index 2c986e43d834..ff476a7507dd 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_store.js
@@ -3,7 +3,7 @@
 */
 import Vue from 'vue'
 import store from '@/store'
-import api from './_api'
+import api, { apiFactory } from './_api'
 
 const types = {
   LOADING: 'loading',
@@ -41,7 +41,7 @@ const actions = {
       return Promise.resolve(state.cache).then(collection => Object.values(collection))
     }
     commit('COLLECTIONS_REQUEST')
-    return api.filterEnginesCollections().then(response => {
+    return api.collections().then(response => {
       commit('COLLECTIONS_REPLACED', response.items)
       return Object.values(state.cache)
     }).catch(err => {
@@ -55,7 +55,7 @@ const actions = {
     }
     return dispatch('getCollections').then(() => {
       commit('COLLECTION_REQUEST')
-      return api.filterEnginesCollection(collection).then(response => {
+      return apiFactory({ collection }).list().then(response => {
         const { items } = response
         commit('COLLECTION_REPLACED', { collection, items })
         return state.cache[collection]
@@ -65,14 +65,14 @@ const actions = {
       })
     })
   },
-  sortCollection: ({ commit, dispatch }, { collection, data }) => {
+  sortItems: ({ commit, dispatch }, { collection, items }) => {
     return dispatch('getCollection', collection).then(() => {
       const params = {
-        items: data,
+        items,
         quiet: true
       }
       commit('COLLECTION_REQUEST', types.LOADING)
-      return api.sortFilterEngines({ collection, params }).then(response => {
+      return apiFactory({ collection }).sort(params).then(response => {
         commit('COLLECTION_RESORTED', { collection, params })
         return response
       }).catch(err => {
@@ -88,7 +88,7 @@ const actions = {
     return dispatch('getCollection', collection).then(() => {
       commit('ITEM_REQUEST')
       const { [collection]: { resource } = {} } = state.cache
-      return api.filterEngine({ resource, id }).then(item => {
+      return apiFactory({ resource }).item(id).then(item => {
         commit('ITEM_REPLACED', { collection, id, item })
         return state.cache[collection].items.find(item => item.id === id)
       }).catch(err => {
@@ -102,7 +102,7 @@ const actions = {
       if (id) {
         commit('ITEM_REQUEST')
         const { [collection]: { resource } = {} } = state.cache
-        return api.filterEngineOptions({ resource, id }).then(response => {
+        return apiFactory({ resource }).itemOptions(id).then(response => {
           commit('ITEM_SUCCESS')
           return response
         }).catch(err => {
@@ -111,7 +111,7 @@ const actions = {
         })
       } else {
         commit('ITEM_REQUEST')
-        return api.filterEnginesOptions(collection).then(response => {
+        return apiFactory({ collection }).listOptions().then(response => {
           commit('ITEM_SUCCESS')
           return response
         }).catch(err => {
@@ -124,7 +124,7 @@ const actions = {
   createFilterEngine: ({ commit, dispatch }, { collection, data }) => {
     return dispatch('getCollection', collection).then(() => {
       commit('ITEM_REQUEST')
-      return api.createFilterEngine({ collection, data }).then(response => {
+      return apiFactory({ collection }).create(data).then(response => {
         const { id } = data
         commit('ITEM_CREATED', { collection, id, item: data })
         store.commit('config/FILTER_ENGINES_DELETED') // purge config cache
@@ -139,7 +139,7 @@ const actions = {
     return dispatch('getCollection', collection).then(() => {
       commit('ITEM_REQUEST')
       const { [collection]: { resource } = {} } = state.cache
-      return api.updateFilterEngine({ resource, id, data }).then(() => {
+      return apiFactory({ resource }).update({ id, ...data }).then(() => {
         commit('ITEM_REPLACED', { collection, id, item: data })
         store.commit('config/FILTER_ENGINES_DELETED') // purge config cache
         return state.cache[collection].items.find(item => item.id === id)
@@ -153,7 +153,7 @@ const actions = {
     return dispatch('getCollection', collection).then(() => {
       commit('ITEM_REQUEST')
       const { [collection]: { resource } = {} } = state.cache
-      return api.deleteFilterEngine({ resource, id }).then(response => {
+      return apiFactory({ resource }).delete(id).then(response => {
         commit('ITEM_DESTROYED', { collection, id })
         store.commit('config/FILTER_ENGINES_DELETED') // purge config cache
         return response
@@ -168,7 +168,7 @@ const actions = {
       commit('ITEM_REQUEST')
       const { [collection]: { resource } = {} } = state.cache
       const data = { id, status: 'enabled', quiet: true }
-      return api.updateFilterEngine({ resource, id, data }).then(response => {
+      return apiFactory({ resource }).update(data).then(response => {
         commit('ITEM_ENABLED', { collection, id })
         return response
       }).catch(err => {
@@ -182,7 +182,7 @@ const actions = {
       commit('ITEM_REQUEST')
       const { [collection]: { resource } = {} } = state.cache
       const data = { id, status: 'disabled', quiet: true }
-      return api.updateFilterEngine({ resource, id, data }).then(response => {
+      return apiFactory({ resource }).update(data).then(response => {
         commit('ITEM_DISABLED', { collection, id })
         return response
       }).catch(err => {
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/config.js b/html/pfappserver/root/src/views/Configuration/filterEngines/config.js
deleted file mode 100644
index 8d1c8b69c3fc..000000000000
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/config.js
+++ /dev/null
@@ -1 +0,0 @@
- 

From 1f2bc194871bb57e1fb43b51a254b177a6b889e2 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Tue, 8 Jun 2021 17:11:26 -0400
Subject: [PATCH 18/72] cleanup connection profiles

---
 .../_config/connectionProfile.js              | 92 ------------------
 .../_components/TheSearch.vue                 | 94 +------------------
 2 files changed, 1 insertion(+), 185 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/connectionProfile.js

diff --git a/html/pfappserver/root/src/views/Configuration/_config/connectionProfile.js b/html/pfappserver/root/src/views/Configuration/_config/connectionProfile.js
deleted file mode 100644
index 4dde88721627..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/connectionProfile.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'status',
-    label: 'Status', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'description',
-    label: 'Description', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'not_deletable',
-    required: true,
-    visible: false
-  },
-  {
-    key: 'not_sortable',
-    required: true,
-    visible: false
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'description',
-    text: i18n.t('Description'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'connection_profile', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier or description'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/connection_profiles',
-      defaultSortKeys: [], // use natural order
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'description', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'connection_profiles' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'description', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
index 07ae6daf6b95..b0181dac138c 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
@@ -142,7 +142,7 @@ const setup = (props, context) => {
   const selected = useBootstrapTableSelected(tableRef, items)
   const {
     selectedItems
-  } = toRefs(selected)
+  } = selected
 
   const onBulkExport = () => {
     const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
@@ -188,95 +188,3 @@ export default {
   setup
 }
 </script>
-
-
-
-<!--
-
-
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-      :sortable="true"
-      @sort="sort"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">
-            {{ $t('Connection Profiles') }}
-            <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_connection_profiles" />
-          </h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newConnectionProfile' }">{{ $t('New Connection Profile') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No connection profiles found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Connection Profile?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-secondary" class="mr-1" @click.stop.prevent="preview(item)">{{ $t('Preview') }} <icon class="ml-1" name="external-link-alt"></icon></b-button>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-      <template v-slot:cell(status)="item">
-         <toggle-status :value="item.status" :disabled="item.not_deletable || isLoading"
-          :item="item" :searchable-store-name="$refs.pfConfigList.searchableStoreName" />
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonHelp from '@/components/pfButtonHelp'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/connectionProfile'
-import { ToggleStatus } from '@/views/Configuration/connectionProfiles/_components/'
-
-export default {
-  name: 'connection-profiles-list',
-  components: {
-    pfButtonDelete,
-    pfButtonHelp,
-    pfConfigList,
-    pfEmptyTable,
-    ToggleStatus
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_connection_profiles/isLoading']
-    }
-  },
-  methods: {
-    preview (item) {
-      window.open(`/portal_preview/captive-portal?PORTAL=${item.id}`, '_blank')
-    },
-    clone (item) {
-      this.$router.push({ name: 'cloneConnectionProfile', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_connection_profiles/deleteConnectionProfile', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    },
-    sort (items) {
-      this.$store.dispatch('$_connection_profiles/sortConnectionProfiles', items.map(item => item.id)).then(() => {
-        this.$store.dispatch('notification/info', { message: this.$i18n.t('Connection profiles resorted.') })
-      })
-    }
-  }
-}
-</script>
--->
\ No newline at end of file

From 542470a8d2d66e060a79f3223773697a43b11894 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 9 Jun 2021 11:37:19 -0400
Subject: [PATCH 19/72] add authentication sources search

---
 .../_components/AuthenticationSourcesList.vue | 232 ------------------
 .../src/views/Configuration/sources/_api.js   |  42 ++--
 .../sources/_components/TheSearch.vue         | 146 +++++++++++
 .../sources/_components/TheTable.vue          | 172 +++++++++++++
 .../sources/_composables/useCollection.js     |  79 ++++++
 .../views/Configuration/sources/_router.js    |   6 +-
 .../src/views/Configuration/sources/_store.js |  22 +-
 .../src/views/Configuration/sources/config.js |  47 ++++
 8 files changed, 482 insertions(+), 264 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/AuthenticationSourcesList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/sources/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue

diff --git a/html/pfappserver/root/src/views/Configuration/_components/AuthenticationSourcesList.vue b/html/pfappserver/root/src/views/Configuration/_components/AuthenticationSourcesList.vue
deleted file mode 100644
index 2e596604f45b..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/AuthenticationSourcesList.vue
+++ /dev/null
@@ -1,232 +0,0 @@
-<template>
-  <div>
-    <b-card no-body>
-      <b-card-header>
-        <h4 class="mb-3">
-          {{ $t('Authentication Sources') }}
-          <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_authentication_sources" />
-        </h4>
-        <p v-t="'Define the authentication sources to let users access the captive portal or the admin Web interface.'"></p>
-        <p class="mb-0" v-t="'Each connection profile must be associated with one or multiple authentication sources while 802.1X connections use the ordered internal sources to determine which role to use. External sources are never used with 802.1X connections.'"></p>
-      </b-card-header>
-
-      <b-card class="m-3">
-        <h4 class="mb-3">{{ $t('Internal Sources') }}</h4>
-        <b-dropdown class="mb-3" :text="$t('New internal source')" variant="outline-primary">
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'AD' } }">Active Directory</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Authorization' } }">Authorization</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'EAPTLS' } }">EAPTLS</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'EDIR' } }">Edirectory</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Htpasswd' } }">Htpasswd</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'HTTP' } }">HTTP</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Kerberos' } }">Kerberos</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'LDAP' } }">LDAP</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Potd' } }">{{ $t('Password Of The Day') }}</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'RADIUS' } }">RADIUS</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'SAML' } }">SAML</b-dropdown-item>
-        </b-dropdown>
-        <pf-table-sortable
-          :items="internalSources"
-          :fields="config.columns"
-          @row-clicked="onRowClick"
-          hover
-          striped
-          @end="sort(internalSources, $event)"
-        >
-          <template v-slot:empty>
-            <pf-empty-table :is-loading="isLoading" :text="$t('Click the button to define a new source.')">{{ $t('No internal sources defined') }}</pf-empty-table>
-          </template>
-          <template v-slot:cell(buttons)="item">
-            <span class="float-right text-nowrap">
-              <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Source?')" @on-delete="remove(item)" reverse/>
-              <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-            </span>
-          </template>
-        </pf-table-sortable>
-      </b-card>
-
-      <b-card class="m-3">
-        <h4 class="mb-3">{{ $t('External Sources') }}</h4>
-        <b-dropdown class="mb-3" :text="$t('New external source')" variant="outline-primary">
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Clickatell' } }">Clickatell</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Email' } }">Email</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Facebook' } }">Facebook</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Github' } }">Github</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Google' } }">Google</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Instagram' } }">Instagram</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Kickbox' } }">Kickbox</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'LinkedIn' } }">LinkedIn</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Null' } }">{{ $t('Null') }}</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'OpenID' } }">OpenID</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Pinterest' } }">Pinterest</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'SMS' } }">SMS</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'SponsorEmail' } }">{{ $t('Sponsor') }}</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Twilio' } }">Twilio</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Twitter' } }">Twitter</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'WindowsLive' } }">WindowsLive</b-dropdown-item>
-        </b-dropdown>
-        <pf-table-sortable
-          :items="externalSources"
-          :fields="config.columns"
-          @row-clicked="onRowClick"
-          hover
-          striped
-          @end="sort(externalSources, $event)"
-        >
-          <template v-slot:empty>
-            <pf-empty-table :is-loading="isLoading" :text="$t('Click the button to define a new source.')">{{ $t('No external sources defined') }}</pf-empty-table>
-          </template>
-          <template v-slot:cell(buttons)="item">
-            <span class="float-right text-nowrap">
-              <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Source?')" @on-delete="remove(item)" reverse/>
-              <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-            </span>
-          </template>
-        </pf-table-sortable>
-      </b-card>
-
-      <b-card class="m-3">
-        <h4 class="mb-3">{{ $t('Exclusive Sources') }}</h4>
-        <b-dropdown class="mb-3" :text="$t('New exclusive source')" variant="outline-primary">
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'AdminProxy' } }">AdminProxy</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Blackhole' } }">Blackhole</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Eduroam' } }">Eduroam</b-dropdown-item>
-        </b-dropdown>
-        <pf-table-sortable
-          :items="exclusiveSources"
-          :fields="config.columns"
-          @row-clicked="onRowClick"
-          hover
-          striped
-          @end="sort(exclusiveSources, $event)"
-        >
-          <template v-slot:empty>
-            <pf-empty-table :is-loading="isLoading" :text="$t('Click the button to define a new source.')">{{ $t('No exclusive source defined') }}</pf-empty-table>
-          </template>
-          <template v-slot:cell(buttons)="item">
-            <span class="float-right text-nowrap">
-              <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Source?')" @on-delete="remove(item)" reverse/>
-              <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-            </span>
-          </template>
-        </pf-table-sortable>
-      </b-card>
-
-      <b-card class="m-3">
-        <h4 class="mb-3">{{ $t('Billing Sources') }}</h4>
-        <b-dropdown class="mb-3" :text="$t('New billing source')" variant="outline-primary">
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'AuthorizeNet' } }">AuthorizeNet</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Mirapay' } }">Mirapay</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Paypal' } }">Paypal</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newAuthenticationSource', params: { sourceType: 'Stripe' } }">Stripe</b-dropdown-item>
-        </b-dropdown>
-        <pf-table-sortable
-          :items="billingSources"
-          :fields="config.columns"
-          @row-clicked="onRowClick"
-          hover
-          striped
-          @end="sort(billingSources, $event)"
-        >
-          <template v-slot:empty>
-            <pf-empty-table :is-loading="isLoading" :text="$t('Click the button to define a new source.')">{{ $t('No billing sources defined') }}</pf-empty-table>
-          </template>
-          <template v-slot:cell(buttons)="item">
-            <span class="float-right text-nowrap">
-              <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Source?')" @on-delete="remove(item)" reverse/>
-              <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-            </span>
-          </template>
-        </pf-table-sortable>
-      </b-card>
-
-    </b-card>
-  </div>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonHelp from '@/components/pfButtonHelp'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import pfTableSortable from '@/components/pfTableSortable'
-import { config } from '../_config/authenticationSource'
-
-export default {
-  name: 'authentication-sources-list',
-  components: {
-    pfButtonDelete,
-    pfButtonHelp,
-    pfEmptyTable,
-    pfTableSortable
-  },
-  data () {
-    return {
-      config: config(this), // ../_config/authenticationSource
-      sources: [],
-      draggingRow: null,
-      draggingRowIndex: null
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_sources/isLoading']
-    },
-    internalSources () {
-      return this.sources.filter(source => source.id !== 'local' && source.class === 'internal')
-    },
-    externalSources () {
-      return this.sources.filter(source => source.id !== 'local' && source.class === 'external')
-    },
-    exclusiveSources () {
-      return this.sources.filter(source => source.id !== 'local' && source.class === 'exclusive')
-    },
-    billingSources () {
-      return this.sources.filter(source => source.id !== 'local' && source.class === 'billing')
-    }
-  },
-  methods: {
-    init () {
-      this.$store.dispatch('$_sources/all').then(sources => {
-        this.sources = sources
-      })
-    },
-    clone (item) {
-      this.$router.push({ name: 'cloneAuthenticationSource', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_sources/deleteAuthenticationSource', item.id).then(() => {
-        this.init()
-      })
-    },
-    sort (items, event) {
-      const { oldIndex, newIndex } = event // shifted, not swapped
-      const tmp = items[oldIndex]
-      if (oldIndex > newIndex) {
-        // shift down (not swapped)
-        for (let i = oldIndex; i > newIndex; i--) {
-          items[i] = items[i - 1]
-        }
-      } else {
-        // shift up (not swapped)
-        for (let i = oldIndex; i < newIndex; i++) {
-          items[i] = items[i + 1]
-        }
-      }
-      items[newIndex] = tmp
-      this.sources = [ // rebuild sources
-        ...this.sources.filter(_item => !items.map(item => item.id).includes(_item.id)), // all but sorted items
-        ...items // sorted items
-      ]
-      this.$store.dispatch('$_sources/sortAuthenticationSources', items.map(item => item.id)).then(() => {
-        this.$store.dispatch('notification/info', { message: this.$i18n.t('Authentication sources resorted.') })
-      })
-    },
-    onRowClick (item, index) {
-      this.$router.push(this.config.rowClickRoute(item, index))
-    }
-  },
-  created () {
-    this.init()
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_api.js b/html/pfappserver/root/src/views/Configuration/sources/_api.js
index ff2e88114f85..c17a0c9e2f33 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/_api.js
@@ -1,50 +1,56 @@
 import apiCall from '@/utils/api'
 
 export default {
-  authenticationSources: params => {
+  list: params => {
     return apiCall.get('config/sources', { params }).then(response => {
       return response.data
     })
   },
-  authenticationSourcesOptions: sourceType => {
+  listOptions: sourceType => {
     return apiCall.options(['config', 'sources'], { params: { type: sourceType } }).then(response => {
       return response.data
     })
   },
-  authenticationSource: id => {
+  search: body => {
+    return apiCall.post('config/sources/search', body).then(response => {
+      return response.data
+    })
+  },
+  sort: data => {
+    return apiCall.patch('config/sources/sort_items', data).then(response => {
+      return response
+    })
+  },
+  create: data => {
+    return apiCall.post('config/sources', data).then(response => {
+      return response.data
+    })
+  },
+
+  item: id => {
     return apiCall.get(['config', 'source', id]).then(response => {
       return response.data.item
     })
   },
-  authenticationSourceOptions: id => {
+  itemOptions: id => {
     return apiCall.options(['config', 'source', id]).then(response => {
       return response.data
     })
   },
-  authenticationSourceSAMLMetaData: id => {
+  saml: id => {
     return apiCall.get(['config', 'source', id, 'saml_metadata']).then(response => {
       return response.data
     })
   },
-  createAuthenticationSource: data => {
-    return apiCall.post('config/sources', data).then(response => {
-      return response.data
-    })
-  },
-  updateAuthenticationSource: data => {
+  update: data => {
     return apiCall.patch(['config', 'source', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteAuthenticationSource: id => {
+  delete: id => {
     return apiCall.delete(['config', 'source', id])
   },
-  sortAuthenticationSources: data => {
-    return apiCall.patch('config/sources/sort_items', data).then(response => {
-      return response
-    })
-  },
-  testAuthenticationSource: data => {
+  test: data => {
     return apiCall.postQuiet('config/sources/test', data).then(response => {
       return response
     })
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/TheSearch.vue
new file mode 100644
index 000000000000..414f9fa98501
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/TheSearch.vue
@@ -0,0 +1,146 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center">
+        {{ $t('Authentication Sources') }}
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_authentication_sources" />
+      </h4>
+      <p v-t="'Define the authentication sources to let users access the captive portal or the admin Web interface.'"></p>
+      <p class="mb-0" v-t="'Each connection profile must be associated with one or multiple authentication sources while 802.1X connections use the ordered internal sources to determine which role to use. External sources are never used with 802.1X connections.'"></p>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch" />
+
+      <b-card>
+        <h4 class="mb-3">{{ $t('Internal Sources') }}</h4>
+        <b-dropdown :text="$t('New internal source')" variant="outline-primary">
+          <b-dropdown-item v-for="(text, sourceType) in internalTypes" :key="sourceType"
+            :to="{ name: 'newAuthenticationSource', params: { sourceType } }"
+          >{{ text }}</b-dropdown-item>
+        </b-dropdown>
+        <the-table class="mt-3"
+          :isLoading="isLoading"
+          :items="internalItems"
+          :columns="columns"
+          :visibleColumns="visibleColumns"
+          @reSearch="reSearch"
+          @setColumns="setColumns"
+        />
+      </b-card>
+
+      <b-card class="mt-3">
+        <h4 class="mb-3">{{ $t('External Sources') }}</h4>
+        <b-dropdown :text="$t('New external source')" variant="outline-primary">
+          <b-dropdown-item v-for="(text, sourceType) in externalTypes" :key="sourceType"
+            :to="{ name: 'newAuthenticationSource', params: { sourceType } }"
+          >{{ text }}</b-dropdown-item>
+        </b-dropdown>
+        <the-table class="mt-3"
+          :isLoading="isLoading"
+          :items="externalItems"
+          :columns="columns"
+          :visibleColumns="visibleColumns"
+          @reSearch="reSearch"
+          @setColumns="setColumns"
+        />
+      </b-card>
+
+      <b-card class="mt-3">
+        <h4 class="mb-3">{{ $t('Exclusive Sources') }}</h4>
+        <b-dropdown :text="$t('New exclusive source')" variant="outline-primary">
+          <b-dropdown-item v-for="(text, sourceType) in exclusiveTypes" :key="sourceType"
+            :to="{ name: 'newAuthenticationSource', params: { sourceType } }"
+          >{{ text }}</b-dropdown-item>
+        </b-dropdown>
+        <the-table class="mt-3"
+          :isLoading="isLoading"
+          :items="exclusiveItems"
+          :columns="columns"
+          :visibleColumns="visibleColumns"
+          @reSearch="reSearch"
+          @setColumns="setColumns"
+        />
+      </b-card>
+
+      <b-card class="mt-3">
+        <h4 class="mb-3">{{ $t('Billing Sources') }}</h4>
+        <b-dropdown :text="$t('New billing source')" variant="outline-primary">
+          <b-dropdown-item v-for="(text, sourceType) in billingTypes" :key="sourceType"
+            :to="{ name: 'newAuthenticationSource', params: { sourceType } }"
+          >{{ text }}</b-dropdown-item>
+        </b-dropdown>
+        <the-table class="mt-3"
+          :isLoading="isLoading"
+          :items="billingItems"
+          :columns="columns"
+          :visibleColumns="visibleColumns"
+          @reSearch="reSearch"
+          @setColumns="setColumns"
+        />
+      </b-card>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableSortable
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import TheTable from './TheTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableSortable,
+  pfEmptyTable,
+  TheTable
+}
+
+import { computed, toRefs } from '@vue/composition-api'
+import { useSearch } from '../_composables/useCollection'
+import { internalTypes, externalTypes, exclusiveTypes, billingTypes } from '../config'
+
+const setup = () => {
+
+  const search = useSearch()
+  const {
+    items
+  } = toRefs(search)
+
+  const internalItems = computed(() => items.value.filter(s => s.id !== 'local' && s.class === 'internal'))
+  const externalItems = computed(() => items.value.filter(s => s.id !== 'local' && s.class === 'external'))
+  const exclusiveItems = computed(() => items.value.filter(s => s.id !== 'local' && s.class === 'exclusive'))
+  const billingItems = computed(() => items.value.filter(s => s.id !== 'local' && s.class === 'billing'))
+
+  return {
+    useSearch,
+    ...toRefs(search),
+
+    internalTypes,
+    internalItems,
+
+    externalTypes,
+    externalItems,
+
+    exclusiveTypes,
+    exclusiveItems,
+
+    billingTypes,
+    billingItems,
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue
new file mode 100644
index 000000000000..2416bb05c883
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue
@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <base-table-sortable ref="tableRef"
+      :busy="isLoading"
+      :hover="items.length > 0"
+      :items="items"
+      :fields="visibleColumns"
+      class="mb-0"
+      show-empty
+      fixed
+      striped
+      selectable
+      @row-clicked="goToItem"
+      @row-selected="onRowSelected"
+      @items-sorted="onSorted"
+    >
+      <template v-slot:empty>
+        <slot name="emptySearch" v-bind="{ isLoading }">
+            <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+        </slot>
+      </template>
+      <template #head(selected)>
+        <span @click.stop.prevent="onAllSelected">
+          <template v-if="selected.length > 0">
+            <icon name="check-square" class="bg-white text-success" scale="1.125" />
+          </template>
+          <template v-else>
+            <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+          </template>
+        </span>
+      </template>
+      <template #head(buttons)>
+        <base-search-input-columns
+          :disabled="isLoading"
+          :value="columns"
+          @input="$emit('setColumns', $event)"
+        />
+      </template>
+      <template #cell(selected)="{ index, rowSelected }">
+        <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <template v-if="rowSelected">
+            <icon name="check-square" class="bg-white text-success" scale="1.125" />
+          </template>
+          <template v-else>
+            <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+          </template>
+        </span>
+      </template>
+      <template #cell(buttons)="{ item }">
+        <span class="float-right text-nowrap text-right"
+          @click.stop.prevent
+        >
+          <base-button-confirm v-if="!item.not_deletable"
+            size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+            :disabled="isLoading"
+            :confirm="$t('Delete Source?')"
+            @click="onRemove(item.id)"
+          >{{ $t('Delete') }}</base-button-confirm>
+          <b-button
+            size="sm" variant="outline-primary" class="mr-1"
+            @click.stop.prevent="goToClone(item)"
+          >{{ $t('Clone') }}</b-button>
+        </span>
+      </template>
+    </base-table-sortable>
+    <b-container fluid v-if="selected.length"
+      class="mt-3 p-0">
+      <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+        <template #button-content>
+          {{ $t('{num} selected', { num: selected.length }) }}
+        </template>
+        <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+      </b-dropdown>
+    </b-container>
+  </div>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearchInputColumns,
+  BaseTableSortable
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearchInputColumns,
+  BaseTableSortable,
+  pfEmptyTable
+}
+
+const props = {
+  isLoading: {
+    type: Boolean
+  },
+  items: {
+    type: Array
+  },
+  columns: {
+    type: Array
+  },
+  visibleColumns: {
+    type: Array
+  }
+}
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useRouter, useStore } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const {
+    items,
+    visibleColumns
+  } = toRefs(props)
+
+  const { emit, root: { $router } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const {
+    deleteItem,
+    sortItems
+  } = useStore(props, context)
+
+  const onRemove = id => {
+    deleteItem(id)
+      .then(() => emit('reSearch'))
+  }
+
+  const onSorted = _items => {
+    items.value = _items
+    sortItems(items.value.map(item => item.id))
+      .then(() => emit('reSearch'))
+  }
+
+  return {
+    tableRef,
+    ...router,
+    ...selected,
+    onBulkExport,
+    onRemove,
+    onSorted
+  }
+
+}
+
+// @vue/component
+export default {
+  name: 'the-table',
+  inheritAttrs: false,
+  components,
+  props,
+  setup
+}
+</script>
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js
index 2372a014c4e7..1bcf8cb04574 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js
@@ -71,5 +71,84 @@ export const useStore = (props, context, form) => {
       return item
     }),
     updateItem: () => $store.dispatch('$_sources/updateAuthenticationSource', form.value),
+    sortItems: params => $store.dispatch('$_sources/sortAuthenticationSources', params)
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('sources', {
+  api,
+  sortBy: null, // use natural order (sortable)
+  columns: [ // output uses natural order (w/ sortable drag-drop), ensure NO columns are 'sortable: true'
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Name', // i18n defer
+      required: true,
+      searchable: true,
+      visible: true
+    },
+    {
+      key: 'description',
+      label: 'Description', // i18n defer
+      searchable: true,
+      visible: true
+    },
+    {
+      key: 'type',
+      label: 'Type', // i18n defer
+      searchable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'class',
+      required: true,
+      visible: false
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    },
+    {
+      key: 'not_sortable',
+      required: true,
+      visible: false
+    },
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'description',
+      text: i18n.t('Description'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'type',
+      text: i18n.t('Type'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null },
+      { field: 'description', op: 'contains', value: null },
+      { field: 'type', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_router.js b/html/pfappserver/root/src/views/Configuration/sources/_router.js
index 72af5cbbd34e..1eca596aba92 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/_router.js
@@ -1,7 +1,7 @@
 import store from '@/store'
 import StoreModule from './_store'
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/AuthenticationSourcesList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const useRouter = $router => {
@@ -11,6 +11,7 @@ export const useRouter = $router => {
       .push({ name: 'source', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneAuthenticationSource', params }),
+    goToNew: params => $router.push({ name: 'newAuthenticationSource', params }),
   }
 }
 
@@ -24,8 +25,7 @@ export default [
   {
     path: 'sources',
     name: 'sources',
-    component: TheList,
-    props: (route) => ({ query: route.query.query }),
+    component: TheSearch,
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_store.js b/html/pfappserver/root/src/views/Configuration/sources/_store.js
index 48332ac61eb7..c859f9dc5941 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/_store.js
@@ -34,7 +34,7 @@ const actions = {
       limit: 1000
     }
     commit('ITEM_REQUEST')
-    return api.authenticationSources(params).then(response => {
+    return api.list(params).then(response => {
       commit('ITEM_SUCCESS')
       return response.items
     }).catch((err) => {
@@ -44,7 +44,7 @@ const actions = {
   },
   optionsById: ({ commit }, id) => {
     commit('ITEM_REQUEST')
-    return api.authenticationSourceOptions(id).then(response => {
+    return api.itemOptions(id).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -54,7 +54,7 @@ const actions = {
   },
   optionsBySourceType: ({ commit }, sourceType) => {
     commit('ITEM_REQUEST')
-    return api.authenticationSourcesOptions(sourceType).then(response => {
+    return api.listOptions(sourceType).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -69,7 +69,7 @@ const actions = {
       type: type,
       limit: 1000
     }
-    return api.authenticationSources(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
@@ -78,7 +78,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.authenticationSource(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -91,7 +91,7 @@ const actions = {
       return Promise.resolve(state.saml_metadata[id]).then(saml_metadata => saml_metadata)
     }
     commit('ITEM_REQUEST')
-    return api.authenticationSourceSAMLMetaData(id).then(xml => {
+    return api.saml(id).then(xml => {
       commit('SAML_METADATA_REPLACED', { id, xml })
       return xml
     }).catch((err) => {
@@ -114,7 +114,7 @@ const actions = {
       })
     }
     commit('ITEM_REQUEST')
-    return api.createAuthenticationSource(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -137,7 +137,7 @@ const actions = {
       })
     }
     commit('ITEM_REQUEST')
-    return api.updateAuthenticationSource(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -147,7 +147,7 @@ const actions = {
   },
   deleteAuthenticationSource: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteAuthenticationSource(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {
@@ -160,7 +160,7 @@ const actions = {
       items: data
     }
     commit('ITEM_REQUEST', types.LOADING)
-    return api.sortAuthenticationSources(params).then(response => {
+    return api.sort(params).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch(err => {
@@ -170,7 +170,7 @@ const actions = {
   },
   testAuthenticationSource: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.testAuthenticationSource(data).then(response => {
+    return api.test(data).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch(err => {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/config.js b/html/pfappserver/root/src/views/Configuration/sources/config.js
index 6489ab303799..e86ecc24b81e 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/config.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/config.js
@@ -1,5 +1,52 @@
+import i18n from '@/utils/locale'
 import { pfActions } from '@/globals/pfActions'
 
+export const internalTypes = {
+  AD:             i18n.t('Active Directory'),
+  Authorization:  i18n.t('Authorization'),
+  EAPTLS:         'EAPTLS',
+  EDIR:           'Edirectory',
+  Htpasswd:       'Htpasswd',
+  HTTP:           'HTTP',
+  Kerberos:       'Kerberos',
+  LDAP:           'LDAP',
+  Potd:           i18n.t('Password Of The Day'),
+  RADIUS:         'RADIUS',
+  SAML:           'SAML',
+}
+
+export const externalTypes = {
+  Clickatell:     'Clickatell',
+  Email:          i18n.t('Email'),
+  Facebook:       'Facebook',
+  Github:         'Github',
+  Google:         'Google',
+  Instagram:      'Instagram',
+  Kickbox:        'Kickbox',
+  LinkedIn:       'LinkedIn',
+  Null:           i18n.t('Null'),
+  OpenID:         'OpenID',
+  Pinterest:      'Pinterest',
+  SMS:            'SMS',
+  SponsorEmail:   i18n.t('Sponsor'),
+  Twilio:         'Twilio',
+  Twitter:        'Twitter',
+  WindowsLive:    'WindowsLive',
+}
+
+export const exclusiveTypes = {
+  AdminProxy:     i18n.t('AdminProxy'),
+  Blackhole:      'Blackhole',
+  Eduroam:        'Eduroam',
+}
+
+export const billingTypes = {
+  AuthorizeNet:   'AuthorizeNet',
+  Mirapay:        'Mirapay',
+  Paypal:         'Paypal',
+  Stripe:         'Stripe',
+}
+
 export const administrationRuleActionsFromSourceType = (sourceType) => ([
   ...[
     pfActions.set_access_level,

From 773d2279278ac0adf10e46be86308efc626f315f Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 9 Jun 2021 11:37:59 -0400
Subject: [PATCH 20/72] improve drag-drop tooltips

---
 .../root/src/components/new/BaseTableSortable.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/html/pfappserver/root/src/components/new/BaseTableSortable.vue b/html/pfappserver/root/src/components/new/BaseTableSortable.vue
index beb1c0f5c1c4..615da63902e0 100644
--- a/html/pfappserver/root/src/components/new/BaseTableSortable.vue
+++ b/html/pfappserver/root/src/components/new/BaseTableSortable.vue
@@ -10,7 +10,7 @@
   >
     <b-thead>
       <b-th aria-colindex="1" class="text-center" style="width: 40px;"
-        v-b-tooltip.hover.top.d300 :title="$t('Drag and drop rows to reorder.')"
+        v-b-tooltip.hover.top.d300 :title="$t('Drag and drop items to reorder.')"
       ><icon name="sort" /></b-th>
       <b-th v-for="(field, fIndex) in fields" :key="field.key"
         :aria-colindex="fIndex + 2" :class="field.class" :style="field.thStyle">
@@ -18,7 +18,7 @@
       </b-th>
     </b-thead>
     <!-- <b-tbody> --><draggable v-model="dragItems"
-      group="table" tag="tbody" handle=".drag-handle"
+      tag="tbody" handle=".drag-handle"
       :class="{[`cursor-grabbing`]: dragging === true}"
       :move="dragMove"
       @start="dragging = true"
@@ -48,7 +48,16 @@
             'drag-handle': !item.not_sortable
           }"
           @click.stop.prevent
-        ><icon :name="(item.not_sortable) ? 'lock' : 'th'" /></b-td>
+        >
+          <span v-if="item.not_sortable || items.length <= 1"
+            v-b-tooltip.hover.top.d300 :title="$t('This item can not be reordered.')">
+            <icon name="lock" />
+          </span>
+          <span v-else
+            v-b-tooltip.hover.top.d300 :title="$t('Drag and drop item to reorder.')">
+            <icon name="th" />
+          </span>
+        </b-td>
         <b-td v-for="(field, fIndex) in fields" :key="`${field.key}-${iIndex}`"
           :aria-colindex="fIndex + 2" :class="field.tdClass || field.class">
           <slot :name="`cell(${field.key})`" v-bind="{

From 4566cdc574f45dd8129b0a1ae1ac7efca3f25c5c Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 9 Jun 2021 11:38:36 -0400
Subject: [PATCH 21/72] improve filter engine search

---
 .../filterEngines/_components/TheSearch.vue   | 19 +++++++++----------
 .../_composables/useCollection.js             |  2 +-
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
index e9e08c9d93b0..f8a3e41bf4d8 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
@@ -131,7 +131,7 @@ const setup = (props, context) => {
     collection
   } = toRefs(props)
 
-  const { root: { $router, $store } = {} } = context
+  const { root: { $router } = {} } = context
 
   const search = useSearch()
   const {
@@ -165,17 +165,16 @@ const setup = (props, context) => {
     useDownload(filename, csv, 'text/csv')
   }
 
-  const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
-  }
-
   const {
+    deleteItem,
     sortItems
   } = useStore(props, context)
 
+  const onRemove = id => {
+    deleteItem({ ...collection.value, id })
+      .then(() => reSearch())
+  }
+
   const onSorted = _items => {
     items.value = _items
     sortItems({ ...collection.value, items: items.value.map(item => item.id) })
@@ -185,12 +184,12 @@ const setup = (props, context) => {
   return {
     useSearch,
     tableRef,
-    onRemove,
-    onBulkExport,
     ...router,
     ...selected,
     ...toRefs(search),
     goToPreview,
+    onBulkExport,
+    onRemove,
     onSorted
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
index 241f77faa937..6aaab57bd6f1 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
@@ -49,7 +49,7 @@ export const useStore = (props, context, form) => {
     isLoading: computed(() => $store.getters['$_filter_engines/isLoading']),
     getOptions: () => $store.dispatch('$_filter_engines/options', { collection: collection.value, id: id.value }),
     createItem: () => $store.dispatch('$_filter_engines/createFilterEngine', { collection: collection.value, data: form.value }),
-    deleteItem: () => $store.dispatch('$_filter_engines/deleteFilterEngine', { collection: collection.value, id: id.value }),
+    deleteItem: params => $store.dispatch('$_filter_engines/deleteFilterEngine', params),
     getItem: () => $store.dispatch('$_filter_engines/getFilterEngine', { collection: collection.value, id: id.value }).then(item => {
       item = JSON.parse(JSON.stringify(item)) // dereference
       if (isClone.value) {

From 0f955e6b1ebcadcb4c08996a289c9542b01b86f2 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 9 Jun 2021 13:23:52 -0400
Subject: [PATCH 22/72] fix saved search namespace

---
 html/pfappserver/root/src/components/new/BaseSearch.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/html/pfappserver/root/src/components/new/BaseSearch.vue b/html/pfappserver/root/src/components/new/BaseSearch.vue
index 8535b72dc889..856c267d679f 100644
--- a/html/pfappserver/root/src/components/new/BaseSearch.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearch.vue
@@ -13,7 +13,7 @@
           <b-container fluid class="text-right mt-3 px-0">
             <b-button class="ml-1" type="reset" variant="secondary" :disabled="isLoading">{{ $t('Reset') }}</b-button>
             <base-button-save-search
-              save-search-namespace="tenants-advanced"
+              :save-search-namespace="`${uuid}-advanced`"
               class="ml-1"
               v-model="conditionAdvanced"
               :disabled="isLoading"
@@ -28,7 +28,7 @@
       </div>
       <div class="d-flex" v-else>
         <base-search-input-basic class="flex-grow-1"
-          save-search-namespace="tenants-basic"
+          :save-search-namespace="`${uuid}-basic`"
           v-model="conditionBasic"
           :disabled="isLoading"
           :placeholder="placeholderBasic"
@@ -196,6 +196,7 @@ const setup = (props) => {
   }
 
   return {
+    uuid,
     advancedMode,
     conditionBasic,
     conditionAdvanced,

From 723eeb1b6cb4768192701c411f8a2c02ddc63ab4 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 9 Jun 2021 14:29:27 -0400
Subject: [PATCH 23/72] add maintenance tasks search

---
 .../root/src/components/new/BaseSearch.vue    |   7 +-
 .../Configuration/_components/MainTabs.vue    |   6 +-
 .../_components/MaintenanceTasksList.vue      |  55 -------
 .../_config/authenticationSource.js           |  90 -----------
 .../Configuration/_config/maintenanceTask.js  |  78 ---------
 .../Configuration/maintenanceTasks/_api.js    |  30 ++--
 .../_components/TheSearch.vue                 | 148 ++++++++++++++++++
 .../_components/ToggleStatus.js               |  27 +++-
 .../_composables/useCollection.js             |  68 ++++++++
 .../Configuration/maintenanceTasks/_router.js |   2 +-
 .../Configuration/maintenanceTasks/_store.js  |  20 +--
 11 files changed, 276 insertions(+), 255 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/MaintenanceTasksList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/authenticationSource.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/maintenanceTask.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/components/new/BaseSearch.vue b/html/pfappserver/root/src/components/new/BaseSearch.vue
index 856c267d679f..1a48a0e0db83 100644
--- a/html/pfappserver/root/src/components/new/BaseSearch.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearch.vue
@@ -13,7 +13,7 @@
           <b-container fluid class="text-right mt-3 px-0">
             <b-button class="ml-1" type="reset" variant="secondary" :disabled="isLoading">{{ $t('Reset') }}</b-button>
             <base-button-save-search
-              :save-search-namespace="`${uuid}-advanced`"
+              :save-search-namespace="`${uuid}Advanced`"
               class="ml-1"
               v-model="conditionAdvanced"
               :disabled="isLoading"
@@ -28,7 +28,7 @@
       </div>
       <div class="d-flex" v-else>
         <base-search-input-basic class="flex-grow-1"
-          :save-search-namespace="`${uuid}-basic`"
+          :save-search-namespace="`${uuid}Basic`"
           v-model="conditionBasic"
           :disabled="isLoading"
           :placeholder="placeholderBasic"
@@ -89,7 +89,6 @@ const props = {
 }
 
 import { onMounted, ref, toRefs, watch } from '@vue/composition-api'
-import { toKebabCase } from '@/utils/strings'
 import { usePreference } from '@/views/Configuration/_store/preferences'
 
 const setup = (props) => {
@@ -117,7 +116,7 @@ const setup = (props) => {
     sortDesc
   } = toRefs(search)
 
-  const saveSearch = usePreference(`search::${toKebabCase(uuid)}`)
+  const saveSearch = usePreference(`search::${uuid}`)
 
   watch([columns, page, limit, sortBy, sortDesc], () => {
     Promise.resolve(saveSearch.value).then(_saveSearch => {
diff --git a/html/pfappserver/root/src/views/Configuration/_components/MainTabs.vue b/html/pfappserver/root/src/views/Configuration/_components/MainTabs.vue
index a55b6373ae63..c75a4120ccee 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/MainTabs.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/MainTabs.vue
@@ -14,7 +14,7 @@
         <advanced-view />
       </b-tab>
       <b-tab :title="$t('Maintenance')" @click="changeTab('maintenance_tasks')" no-body>
-        <maintenance-tasks-list />
+        <maintenance-tasks-search />
       </b-tab>
       <b-tab :title="$t('Services')" @click="changeTab('services')">
         <services-view />
@@ -27,7 +27,7 @@
 import GeneralView from '../general/_components/TheView'
 import AlertingView from '../alerting/_components/TheView'
 import AdvancedView from '../advanced/_components/TheView'
-import MaintenanceTasksList from './MaintenanceTasksList'
+import MaintenanceTasksSearch from '../maintenanceTasks/_components/TheSearch'
 import ServicesView from '../services/_components/TheView'
 
 export default {
@@ -36,7 +36,7 @@ export default {
     GeneralView,
     AlertingView,
     AdvancedView,
-    MaintenanceTasksList,
+    MaintenanceTasksSearch,
     ServicesView
   },
   props: {
diff --git a/html/pfappserver/root/src/views/Configuration/_components/MaintenanceTasksList.vue b/html/pfappserver/root/src/views/Configuration/_components/MaintenanceTasksList.vue
deleted file mode 100644
index 90436d4ac08d..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/MaintenanceTasksList.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <pf-config-list
-    ref="pfConfigList"
-    :config="config"
-  >
-    <template v-slot:pageHeader>
-      <b-card-header>
-        <h4 class="mb-3" v-t="'Maintenance Tasks'"></h4>
-        <p class="mb-0" v-t="'Enabling or disabling a task as well as modifying its interval requires a restart of pfcron to be fully effective.'"></p>
-      </b-card-header>
-    </template>
-    <template v-slot:buttonAdd>
-      <pf-button-service service="pfcron" class="mr-1" restart start stop :disabled="isLoading"></pf-button-service>
-    </template>
-    <template v-slot:emptySearch="state">
-      <pf-empty-table :is-loading="state.isLoading">{{ $t('No maintenance tasks found') }}</pf-empty-table>
-    </template>
-    <template v-slot:cell(status)="item">
-      <toggle-status :value="item.status" :item="item" :disabled="isLoading" /> 
-    </template>
-    <template v-slot:cell(interval)="{ interval }">
-      <template v-if="interval"><!-- TODO: Temporary workaround for issue #4902 -->
-        {{ interval.interval }}{{ interval.unit }}
-      </template>
-    </template>
-  </pf-config-list>
-</template>
-
-<script>
-import pfButtonService from '@/components/pfButtonService'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/maintenanceTask'
-import { ToggleStatus } from '@/views/Configuration/maintenanceTasks/_components/'
-
-export default {
-  name: 'maintenance-tasks-list',
-  components: {
-    pfButtonService,
-    pfConfigList,
-    pfEmptyTable,
-    ToggleStatus 
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_maintenance_tasks/isLoading']
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_config/authenticationSource.js b/html/pfappserver/root/src/views/Configuration/_config/authenticationSource.js
deleted file mode 100644
index 069a4d56263b..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/authenticationSource.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Name', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'description',
-    label: 'Description', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'type',
-    label: 'Type', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'description',
-    text: i18n.t('Description'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'type',
-    text: i18n.t('Type'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'source', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by name or description'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/sources',
-      defaultSortKeys: [null], // use natural ordering
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'description', op: 'contains', value: null },
-            { field: 'class', op: 'contains', value: null },
-            { field: 'type', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'sources' },
-      resultsFilter: (results) => results.filter(item => item.id !== 'local') // ignore 'local' source
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: quickCondition },
-            { field: 'description', op: 'contains', value: quickCondition },
-            { field: 'class', op: 'contains', value: quickCondition },
-            { field: 'type', op: 'contains', value: quickCondition }
-          ]
-        }]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/maintenanceTask.js b/html/pfappserver/root/src/views/Configuration/_config/maintenanceTask.js
deleted file mode 100644
index 165722fb8219..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/maintenanceTask.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'status',
-    label: 'Status', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'id',
-    label: 'Task Name', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'description',
-    label: 'Description', // i18n defer
-    sortable: true,
-    visible: true,
-    formatter: value => i18n.t(value) // i18n defer
-  },
-  {
-    key: 'schedule',
-    label: 'Schedule', // i18n defer
-    sortable: true,
-    visible: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Task Name'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'maintenance_task', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by name or description'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/maintenance_tasks',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'description', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'maintenance_tasks' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'description', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_api.js b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_api.js
index 4bc10dc6eb18..7bed7b2c7d73 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_api.js
@@ -1,37 +1,43 @@
 import apiCall from '@/utils/api'
 
 export default {
-  maintenanceTasks: params => {
+  list: params => {
     return apiCall.get('config/maintenance_tasks', { params }).then(response => {
       return response.data
     })
   },
-  maintenanceTasksOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/maintenance_tasks').then(response => {
       return response.data
     })
   },
-  maintenanceTask: id => {
-    return apiCall.get(['config', 'maintenance_task', id]).then(response => {
-      return response.data.item
+  create: data => {
+    return apiCall.post('config/maintenance_tasks', data).then(response => {
+      return response.data
     })
   },
-  maintenanceTaskOptions: id => {
-    return apiCall.options(['config', 'maintenance_task', id]).then(response => {
+  search: data => {
+    return apiCall.post('config/maintenance_tasks/search', data).then(response => {
       return response.data
     })
   },
-  createMaintenanceTask: data => {
-    return apiCall.post('config/maintenance_tasks', data).then(response => {
+  item: id => {
+    return apiCall.get(['config', 'maintenance_task', id]).then(response => {
+      return response.data.item
+    })
+  },
+  itemOptions: id => {
+    return apiCall.options(['config', 'maintenance_task', id]).then(response => {
       return response.data
     })
   },
-  updateMaintenanceTask: data => {
-    return apiCall.patch(['config', 'maintenance_task', data.id], data).then(response => {
+  update: data => {
+    const patch = data.quiet ? 'patchQuiet' : 'patch'
+    return apiCall[patch](['config', 'maintenance_task', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteMaintenanceTask: id => {
+  delete: id => {
     return apiCall.delete(['config', 'maintenance_task', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheSearch.vue
new file mode 100644
index 000000000000..905f407cb2f9
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheSearch.vue
@@ -0,0 +1,148 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4>{{ $t('Maintenance Tasks') }}</h4>
+      <p class="mb-0" v-t="'Enabling or disabling a task as well as modifying its interval requires a restart of pfcron to be fully effective.'"></p>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <base-button-service service="pfcron" restart start stop
+          :disabled="isLoading" class="mr-1" />
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        class="mb-0"
+        show-empty
+         fixed
+        striped
+        selectable
+        @row-clicked="goToItem"
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(status)="{ item }">
+          <toggle-status :value="item.status" :disabled="isLoading"
+            :item="item" @input="item.status = $event" />
+        </template>
+        <template #cell(interval)="{ item: { interval } }">
+          <template v-if="interval">
+            <!-- TODO: Temporary workaround for issue #4902 -->
+            {{ interval.interval }}{{ interval.unit }}
+          </template>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import ToggleStatus from './ToggleStatus'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable,
+  ToggleStatus
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const { root: { $router } = {} } = context
+
+  const search = useSearch()
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    ...router,
+    ...selected,
+    ...toRefs(search),
+    onBulkExport
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/ToggleStatus.js b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/ToggleStatus.js
index b548fa2f76eb..018f209607ed 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/ToggleStatus.js
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/ToggleStatus.js
@@ -13,17 +13,40 @@ export const props = {
       {
         value: 'disabled', label: i18n.t('Disabled'),
         color: 'var(--danger)', icon: 'times',
-        promise: (value, props) => {
+        promise: (value, props, context) => {
           const { item } = toRefs(props)
           return store.dispatch('$_maintenance_tasks/disableMaintenanceTask', item.value)
+            .then(() => {
+              context.emit('input', 'disabled')
+              store.dispatch(
+                'notification/info',
+                { message: i18n.t('Maintenance Task <code>{id}</code> disabled.', item.value) }
+              )
+            })
+            .catch(() => store.dispatch(
+              'notification/danger',
+              { message: i18n.t('Maintenance Task <code>{id}</code> could not be disabled.', item.value) }
+            ))
         }
       },
       {
         value: 'enabled', label: i18n.t('Enabled'),
         color: 'var(--success)', icon: 'check',
-        promise: (value, props) => {
+        promise: (value, props, context) => {
           const { item } = toRefs(props)
           return store.dispatch('$_maintenance_tasks/enableMaintenanceTask', item.value)
+            .then(() => {
+              context.emit('input', 'enabled')
+              store.dispatch(
+                'notification/info',
+                { message: i18n.t('Maintenance Task <code>{id}</code> enabled.', item.value) }
+              )
+            })
+            .catch(() => store.dispatch(
+              'notification/danger',
+              { message: i18n.t('Maintenance Task <code>{id}</code> could not be enabled.', item.value) }
+            ))
+
         }
       }
     ])
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js
index b72734dafe63..1aa2ca8a563d 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js
@@ -23,3 +23,71 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_maintenance_tasks/updateMaintenanceTask', form.value),
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('maintenanceTasks', {
+  api,
+  sortBy: null, // use natural order (sortable)
+  columns: [ // output uses natural order (w/ sortable drag-drop), ensure NO columns are 'sortable: true'
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'status',
+      label: 'Status', // i18n defer
+      visible: true
+    },
+    {
+      key: 'id',
+      label: 'Name', // i18n defer
+      required: true,
+      searchable: true,
+      visible: true
+    },
+    {
+      key: 'description',
+      label: 'Description', // i18n defer
+      searchable: true,
+      visible: true
+    },
+    {
+      key: 'schedule',
+      label: 'Schedule', // i18n defer
+      searchable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'description',
+      text: i18n.t('Description'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'schedule',
+      text: i18n.t('Schedule'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null },
+      { field: 'description', op: 'contains', value: null },
+      { field: 'schedule', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_router.js b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_router.js
index 865f6471a849..9f24cbdfff14 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_router.js
@@ -24,7 +24,7 @@ export default [
     path: 'maintenance_tasks',
     name: 'maintenance_tasks',
     component: TheTabs,
-    props: (route) => ({ tab: 'maintenance_tasks', query: route.query.query }),
+    props: () => ({ tab: 'maintenance_tasks' }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_store.js b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_store.js
index 45f658cfd8ae..90f1ce1071f1 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_store.js
@@ -31,7 +31,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.maintenanceTask(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -42,7 +42,7 @@ const actions = {
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.maintenanceTaskOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -50,7 +50,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.maintenanceTasksOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -61,7 +61,7 @@ const actions = {
   },
   createMaintenanceTask: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createMaintenanceTask(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -71,7 +71,7 @@ const actions = {
   },
   updateMaintenanceTask: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateMaintenanceTask(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -81,7 +81,7 @@ const actions = {
   },
   deleteMaintenanceTask: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteMaintenanceTask(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {
@@ -91,8 +91,8 @@ const actions = {
   },
   enableMaintenanceTask: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    const _data = { id: data.id, status: 'enabled' }
-    return api.updateMaintenanceTask(_data).then(response => {
+    const _data = { id: data.id, status: 'enabled', quiet: true }
+    return api.update(_data).then(response => {
       commit('ITEM_ENABLED', _data)
       commit('$_config_maintenance_tasks_searchable/ITEM_UPDATED', { key: 'id', id: data.id, prop: 'status', data: 'enabled' }, { root: true })
       return response
@@ -103,8 +103,8 @@ const actions = {
   },
   disableMaintenanceTask: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    const _data = { id: data.id, status: 'disabled' }
-    return api.updateMaintenanceTask(_data).then(response => {
+    const _data = { id: data.id, status: 'disabled', quiet: true }
+    return api.update(_data).then(response => {
       commit('ITEM_DISABLED', _data)
       commit('$_config_maintenance_tasks_searchable/ITEM_UPDATED', { key: 'id', id: data.id, prop: 'status', data: 'disabled' }, { root: true })
       return response

From bea474925a4920f04d7bba0ad57b90af6387a78c Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 9 Jun 2021 17:54:30 -0400
Subject: [PATCH 24/72] add advanced search to pki

---
 .../Configuration/_components/PkiCasList.vue  |  77 ----
 .../_components/PkiCertsList.vue              | 106 -----
 .../_components/PkiProfilesList.vue           |  77 ----
 .../_components/PkiRevokedCertsList.vue       |  75 ----
 .../Configuration/_components/PkisTabs.vue    |  26 +-
 .../src/views/Configuration/pki/_store.js     | 389 +++---------------
 .../src/views/Configuration/pki/cas/_api.js   |  19 +-
 .../pki/cas/_components/TheSearch.vue         | 260 ++++++++++++
 .../pki/cas/_composables/useCollection.js     |  82 +++-
 .../views/Configuration/pki/cas/_router.js    |   3 +-
 .../src/views/Configuration/pki/cas/_store.js |  94 +++++
 .../src/views/Configuration/pki/certs/_api.js |  25 +-
 .../_components/ButtonCertificateEmail.vue    |   4 +-
 .../_components/ButtonCertificateRevoke.vue   |   5 +-
 .../pki/certs/_components/TheSearch.vue       | 296 +++++++++++++
 .../pki/certs/_composables/useCollection.js   | 116 ++++++
 .../views/Configuration/pki/certs/_router.js  |   3 +-
 .../views/Configuration/pki/certs/_store.js   | 145 +++++++
 .../views/Configuration/pki/profiles/_api.js  |  21 +-
 .../pki/profiles/_components/TheSearch.vue    | 254 ++++++++++++
 .../profiles/_composables/useCollection.js    |  69 ++++
 .../Configuration/pki/profiles/_router.js     |   3 +-
 .../Configuration/pki/profiles/_store.js      | 108 +++++
 .../Configuration/pki/revokedCerts/_api.js    |  11 +-
 .../revokedCerts/_components/TheSearch.vue    | 228 ++++++++++
 .../_composables/useCollection.js             | 122 ++++++
 .../Configuration/pki/revokedCerts/_router.js |   2 +-
 .../Configuration/pki/revokedCerts/_store.js  |  78 ++++
 28 files changed, 1970 insertions(+), 728 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/PkiCasList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/PkiCertsList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/PkiProfilesList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/PkiRevokedCertsList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/pki/cas/_store.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/pki/certs/_store.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/pki/profiles/_store.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_store.js

diff --git a/html/pfappserver/root/src/views/Configuration/_components/PkiCasList.vue b/html/pfappserver/root/src/views/Configuration/_components/PkiCasList.vue
deleted file mode 100644
index 23c92793a7d7..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/PkiCasList.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">{{ $t('Certificate Authorities') }}</h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newPkiCa' }" :disabled="!isPfpkiAlive">{{ $t('New Certificate Authority') }}</b-button>
-        <pf-button-service service="pfpki" class="ml-1" restart start stop :disabled="isLoading"></pf-button-service>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No certificate authorities found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right">
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-          <b-button size="sm" variant="outline-primary" class="mr-1 text-nowrap" @click.stop.prevent="clipboard(item)">{{ $t('Copy Certificate') }}</b-button>
-          <b-button size="sm" variant="outline-primary" class="mr-1 text-nowrap" :to="{ name: 'newPkiProfile', params: { ca_id: item.ID } }">{{ $t('New Template') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonService from '@/components/pfButtonService'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import {
-  config
-} from '../_config/pki/ca'
-
-export default {
-  name: 'pki-cas-list',
-  components: {
-    pfButtonService,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_pkis/isLoading']
-    },
-    isPfpkiAlive () {
-      const { $store: { state: { services: { cache: { pfpki = {} } = {} } = {} } = {} } = {} } = this
-      return pfpki.alive
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'clonePkiCa', params: { id: item.ID } })
-    },
-    clipboard (item) {
-      this.$store.dispatch('$_pkis/getCa', item.ID).then(ca => {
-        try {
-          navigator.clipboard.writeText(ca.cert).then(() => {
-            this.$store.dispatch('notification/info', { message: this.$i18n.t('<code>{cn}</code> certificate copied to clipboard', ca) })
-          }).catch(() => {
-            this.$store.dispatch('notification/danger', { message: this.$i18n.t('Could not copy <code>{cn}</code> certificate to clipboard.', ca) })
-          })
-        } catch (e) {
-          this.$store.dispatch('notification/danger', { message: this.$i18n.t('Clipboard not supported.') })
-        }
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/PkiCertsList.vue b/html/pfappserver/root/src/views/Configuration/_components/PkiCertsList.vue
deleted file mode 100644
index 34908c08e04f..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/PkiCertsList.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">{{ $t('Certificates') }}</h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-dropdown :text="$t('New Certificate')" variant="outline-primary" :disabled="profiles.length === 0">
-          <b-dropdown-header>{{ $t('Choose Certificate Authority - Template') }}</b-dropdown-header>
-          <b-dropdown-item v-for="profile in sortedProfiles" :key="profile.ID" :to="{ name: 'newPkiCert', params: { profile_id: profile.ID } }">{{ profile.ca_name }} - {{ profile.name }}</b-dropdown-item>
-        </b-dropdown>
-        <pf-button-service service="pfpki" class="ml-1" restart start stop :disabled="isLoading" @start="init" @restart="init"></pf-button-service>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No certificates found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(ca_name)="item">
-        <router-link :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
-      </template>
-      <template v-slot:cell(profile_name)="item">
-        <router-link :to="{ name: 'pkiProfile', params: { id: item.profile_id } }">{{ item.profile_name }}</router-link>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right">
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-          <button-certificate-download :id="item.ID" />
-          <b-button v-if="item.mail" size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="email(item)">{{ $t('Email') }}</b-button>
-          <button-certificate-revoke :id="item.ID" />
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import {
-  ButtonCertificateDownload,
-  ButtonCertificateRevoke
-} from '@/views/Configuration/pki/certs/_components/'
-import pfButtonService from '@/components/pfButtonService'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import {
-  config,
-  revoke,
-  download
-} from '../_config/pki/cert'
-
-export default {
-  name: 'pki-certs-list',
-  components: {
-    ButtonCertificateDownload,
-    ButtonCertificateRevoke,
-    pfButtonService,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this),
-      revoke, // ../_config/pki/cert
-      download // ../_config/pki/cert
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_pkis/isCertLoading']
-    },
-    profiles () {
-      return this.$store.getters['$_pkis/profiles'] || []
-    },
-    sortedProfiles () {
-      return Array.prototype.slice.call(this.profiles).sort((a, b) => {
-        return (a.ca_name === b.ca_name)
-          ? a.name.localeCompare(b.name)
-          : a.ca_name.localeCompare(b.ca_name)
-      }) // sort profiles by 'name'
-    }
-  },
-  methods: {
-    init () {
-      this.$store.dispatch('$_pkis/allProfiles')
-    },
-    clone (item) {
-      this.$router.push({ name: 'clonePkiCert', params: { id: item.ID } })
-    },
-    email (item) {
-      const { ID, mail } = item
-      if (mail) {
-        this.$store.dispatch('$_pkis/emailCert', ID).then(() => {
-          this.$store.dispatch('notification/info', { message: this.$i18n.t('Certificate <code>{cn}</code> emailed to <code>{mail}</code>.', item) })
-        }).catch(e => {
-          this.$store.dispatch('notification/danger', { message: this.$i18n.t('Could not email certificate <code>{cn}</code> to <code>{mail}</code>: ', item) + e })
-        })
-      }
-    }
-  },
-  created () {
-    this.init()
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/PkiProfilesList.vue b/html/pfappserver/root/src/views/Configuration/_components/PkiProfilesList.vue
deleted file mode 100644
index a4519dad18ba..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/PkiProfilesList.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">{{ $t('Templates') }}</h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-dropdown :text="$t('New Template')" variant="outline-primary" :disabled="cas.length === 0">
-          <b-dropdown-header>{{ $t('Choose Certificate Authority') }}</b-dropdown-header>
-          <b-dropdown-item v-for="ca in sortedCas" :key="ca.ID" :to="{ name: 'newPkiProfile', params: { ca_id: ca.ID } }">{{ ca.cn }}</b-dropdown-item>
-        </b-dropdown>
-        <pf-button-service service="pfpki" class="ml-1" restart start stop :disabled="isLoading" @start="init" @restart="init"></pf-button-service>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No profiles found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(ca_name)="item">
-        <router-link :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right">
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-          <b-button size="sm" variant="outline-primary" class="mr-1 text-nowrap" :to="{ name: 'newPkiCert', params: { profile_id: item.ID } }">{{ $t('New Certificate') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonService from '@/components/pfButtonService'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import {
-  config
-} from '../_config/pki/profile'
-
-export default {
-  name: 'pki-profiles-list',
-  components: {
-    pfButtonService,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    cas () {
-      return this.$store.getters['$_pkis/cas'] || []
-    },
-    sortedCas () {
-      return Array.prototype.slice.call(this.cas).sort((a, b) => a.cn.localeCompare(b.cn)) // sort cas by 'cn'
-    },
-    isLoading () {
-      return this.$store.getters['$_pkis/isLoading']
-    }
-  },
-  methods: {
-    init () {
-      this.$store.dispatch('$_pkis/allCas')
-    },
-    clone (item) {
-      this.$router.push({ name: 'clonePkiProfile', params: { id: item.ID } })
-    }
-  },
-  created () {
-    this.init()
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/PkiRevokedCertsList.vue b/html/pfappserver/root/src/views/Configuration/_components/PkiRevokedCertsList.vue
deleted file mode 100644
index c9bec3cb3cbe..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/PkiRevokedCertsList.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">{{ $t('Revoked Certificates') }}</h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <pf-button-service service="pfpki" class="ml-1" restart start stop :disabled="isLoading" @start="init" @restart="init"></pf-button-service>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No revoked certificates found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(ca_name)="item">
-        <router-link :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
-      </template>
-      <template v-slot:cell(profile_name)="item">
-        <router-link :to="{ name: 'pkiProfile', params: { id: item.profile_id } }">{{ item.profile_name }}</router-link>
-      </template>
-      <template v-slot:cell(crl_reason)="item">
-        {{ revokeReasons.find(reason => ~~reason.value === ~~item.crl_reason).text }}
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonService from '@/components/pfButtonService'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import {
-  config
-} from '../_config/pki/revokedCert'
-import {
-  revokeReasons
-} from '../_config/pki/'
-
-export default {
-  name: 'pki-revoked-certs-list',
-  components: {
-    pfButtonService,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this),
-      revokeReasons,
-      profiles: []
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_pkis/isRevokedCertLoading']
-    }
-  },
-  methods: {
-    init () {
-      this.$store.dispatch('$_pkis/allProfiles').then(profiles => {
-        this.profiles = (profiles || []).sort((a, b) => { // sort profiles
-          return (a.ca_name === b.ca_name)
-            ? a.name.localeCompare(b.name)
-            : a.ca_name.localeCompare(b.ca_name)
-        })
-      })
-    }
-  },
-  created () {
-    this.init()
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/PkisTabs.vue b/html/pfappserver/root/src/views/Configuration/_components/PkisTabs.vue
index 0b4350934f8a..2d82eb94e155 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/PkisTabs.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/PkisTabs.vue
@@ -3,36 +3,36 @@
     <b-card-header>
       <h4 class="mb-0" v-t="'PKI'"></h4>
     </b-card-header>
-    <b-tabs ref="tabs" v-model="tabIndex" card>
+    <b-tabs ref="tabs" v-model="tabIndex" card lazy>
       <b-tab :title="$t('Certificate Authorities')" @click="changeTab('pkiCas')">
-        <pki-cas-list />
+        <pki-cas-search />
       </b-tab>
       <b-tab :title="$t('Templates')" @click="changeTab('pkiProfiles')">
-        <pki-profiles-list />
+        <pki-profiles-search />
       </b-tab>
       <b-tab :title="$t('Certificates')" @click="changeTab('pkiCerts')">
-        <pki-certs-list />
+        <pki-certs-search />
       </b-tab>
       <b-tab :title="$t('Revoked Certificates')" @click="changeTab('pkiRevokedCerts')">
-        <pki-revoked-certs-list />
+        <pki-revoked-certs-search />
       </b-tab>
     </b-tabs>
   </b-card>
 </template>
 
 <script>
-import PkiCasList from './PkiCasList'
-import PkiProfilesList from './PkiProfilesList'
-import PkiCertsList from './PkiCertsList'
-import PkiRevokedCertsList from './PkiRevokedCertsList'
+import PkiCasSearch from '../pki/cas/_components/TheSearch'
+import PkiProfilesSearch from '../pki/profiles/_components/TheSearch'
+import PkiCertsSearch from '../pki/certs/_components/TheSearch'
+import PkiRevokedCertsSearch from '../pki/revokedCerts/_components/TheSearch'
 
 export default {
   name: 'pkis-tabs',
   components: {
-    PkiCasList,
-    PkiProfilesList,
-    PkiCertsList,
-    PkiRevokedCertsList
+    PkiCasSearch,
+    PkiProfilesSearch,
+    PkiCertsSearch,
+    PkiRevokedCertsSearch
   },
   props: {
     tab: {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/_store.js b/html/pfappserver/root/src/views/Configuration/pki/_store.js
index c52903c3cfce..5a3c45a468a9 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/_store.js
@@ -1,9 +1,34 @@
 /**
 * "$_pkis" store module
 */
-import Vue from 'vue'
-import store from '@/store'
-import api from './_api'
+import {
+  state as stateCas,
+  getters as gettersCas,
+  actions as actionsCas,
+  mutations as mutationsCas
+} from './cas/_store'
+
+import {
+  state as stateProfiles,
+  getters as gettersProfiles,
+  actions as actionsProfiles,
+  mutations as mutationsProfiles
+} from './profiles/_store'
+
+import {
+  state as stateCerts,
+  getters as gettersCerts,
+  actions as actionsCerts,
+  mutations as mutationsCerts
+} from './certs/_store'
+
+import {
+  state as stateRevokedCerts,
+  getters as gettersRevokedCerts,
+  actions as actionsRevokedCerts,
+  mutations as mutationsRevokedCerts
+} from './revokedCerts/_store'
+
 
 const types = {
   LOADING: 'loading',
@@ -15,357 +40,35 @@ const types = {
 // Default values
 const state = () => {
   return {
-    caListCache: false, // ca list details
-    caItemCache: {}, // ca item details
-    caMessage: '',
-    caStatus: '',
-
-    profileListCache: false, // profile list details
-    profileItemCache: {}, // profile item details
-    profileMessage: '',
-    profileStatus: '',
-
-    certListCache: false, // cert list details
-    certItemCache: {}, // cert item details
-    certMessage: '',
-    certStatus: '',
-
-    revokedCertListCache: false, // revoked cert list details
-    revokedCertItemCache: {}, // revoked cert item details
-    revokedCertMessage: '',
-    revokedCertStatus: ''
+    ...stateCas(),
+    ...stateProfiles(),
+    ...stateCerts(),
+    ...stateRevokedCerts()
   }
 }
 
 const getters = {
-  isWaiting: state => [types.LOADING, types.DELETING].includes(state.caStatus) || [types.LOADING, types.DELETING].includes(state.profileStatus) || [types.LOADING, types.DELETING].includes(state.certStatus) || [types.LOADING, types.DELETING].includes(state.revokedCertStatus),
-  isLoading: state => state.caStatus === types.LOADING || state.profileStatus === types.LOADING || state.certStatus === types.LOADING || state.revokedCertStatus === types.LOADING,
-
-  isCaWaiting: state => [types.LOADING, types.DELETING].includes(state.caStatus),
-  isCaLoading: state => state.caStatus === types.LOADING,
-
-  isProfileWaiting: state => [types.LOADING, types.DELETING].includes(state.profileStatus),
-  isProfileLoading: state => state.profileStatus === types.LOADING,
-
-  isCertWaiting: state => [types.LOADING, types.DELETING].includes(state.certStatus),
-  isCertLoading: state => state.certStatus === types.LOADING,
-
-  isRevokedCertWaiting: state => [types.LOADING, types.DELETING].includes(state.revokedCertStatus),
-  isRevokedCertLoading: state => state.revokedCertStatus === types.LOADING,
+  ...gettersCas,
+  ...gettersProfiles,
+  ...gettersCerts,
+  ...gettersRevokedCerts,
 
-  cas: state => state.caListCache,
-  profiles: state => state.profileListCache,
-  certs: state => state.certListCache,
-  revokedCerts: state => state.revokedCertListCache
+  isWaiting: state => [types.LOADING, types.DELETING].includes(state.caStatus) || [types.LOADING, types.DELETING].includes(state.profileStatus) || [types.LOADING, types.DELETING].includes(state.certStatus) || [types.LOADING, types.DELETING].includes(state.revokedCertStatus),
+  isLoading: state => state.caStatus === types.LOADING || state.profileStatus === types.LOADING || state.certStatus === types.LOADING || state.revokedCertStatus === types.LOADING
 }
 
 const actions = {
-  allCas: ({ state, commit }) => {
-    if (state.caListCache) {
-      return Promise.resolve(state.caListCache)
-    }
-    commit('CA_REQUEST')
-    return api.pkiCas().then(response => {
-      commit('CA_LIST_REPLACED', response.items)
-      return state.caListCache
-    }).catch((err) => {
-      commit('CA_ERROR', err.response)
-      throw err
-    })
-  },
-  getCa: ({ state, commit }, id) => {
-    if (state.caItemCache[id]) {
-      return Promise.resolve(state.caItemCache[id])
-    }
-    commit('CA_REQUEST')
-    return api.pkiCa(id).then(item => {
-      commit('CA_ITEM_REPLACED', item)
-      return state.caItemCache[id]
-    }).catch((err) => {
-      commit('CA_ERROR', err.response)
-      throw err
-    })
-  },
-  createCa: ({ commit, dispatch }, data) => {
-    commit('CA_REQUEST')
-    return api.createPkiCa(data).then(item => {
-      // reset list
-      commit('CA_LIST_RESET')
-      dispatch('allCas')
-      // update item
-      commit('CA_ITEM_REPLACED', item)
-      return item
-    }).catch(err => {
-      commit('CA_ERROR', err.response)
-      throw err
-    })
-  },
-
-  allProfiles: ({ state, commit }) => {
-    if (state.profileListCache) {
-      return Promise.resolve(state.profileListCache)
-    }
-    commit('PROFILE_REQUEST')
-    return api.pkiProfiles().then(response => {
-      commit('PROFILE_LIST_REPLACED', response.items)
-      return state.profileListCache
-    }).catch((err) => {
-      commit('PROFILE_ERROR', err.response)
-      throw err
-    })
-  },
-  getProfile: ({ state, commit }, id) => {
-    if (state.profileItemCache[id]) {
-      return Promise.resolve(state.profileItemCache[id])
-    }
-    commit('PROFILE_REQUEST')
-    return api.pkiProfile(id).then(item => {
-      commit('PROFILE_ITEM_REPLACED', item)
-      return state.profileItemCache[id]
-    }).catch((err) => {
-      commit('PROFILE_ERROR', err.response)
-      throw err
-    })
-  },
-  createProfile: ({ commit, dispatch }, data) => {
-    commit('PROFILE_REQUEST')
-    return api.createPkiProfile(data).then(item => {
-      // reset list
-      commit('PROFILE_LIST_RESET')
-      dispatch('allProfiles')
-      // update item
-      commit('PROFILE_ITEM_REPLACED', item)
-      return item
-    }).catch(err => {
-      commit('PROFILE_ERROR', err.response)
-      throw err
-    })
-  },
-  updateProfile: ({ commit, dispatch }, data) => {
-    commit('PROFILE_REQUEST')
-    return api.updatePkiProfile(data).then(item => {
-      // reset list
-      commit('PROFILE_LIST_RESET')
-      dispatch('allProfiles')
-      // update item
-      commit('PROFILE_ITEM_REPLACED', item)
-      return item
-    }).catch(err => {
-      commit('PROFILE_ERROR', err.response)
-      throw err
-    })
-  },
-  allCerts: ({ state, commit }) => {
-    if (state.certListCache) {
-      return Promise.resolve(state.certListCache)
-    }
-    commit('CERT_REQUEST')
-    return api.pkiCerts().then(response => {
-      commit('CERT_LIST_REPLACED', response.items)
-      return state.certListCache
-    }).catch((err) => {
-      commit('CERT_ERROR', err.response)
-      throw err
-    })
-  },
-  getCert: ({ state, commit }, id) => {
-    if (state.certItemCache[id]) {
-      return Promise.resolve(state.certItemCache[id])
-    }
-    commit('CERT_REQUEST')
-    return api.pkiCert(id).then(item => {
-      commit('CERT_ITEM_REPLACED', item)
-      return state.certItemCache[id]
-    }).catch((err) => {
-      commit('CERT_ERROR', err.response)
-      throw err
-    })
-  },
-  downloadCert: ({ commit }, data) => {
-    commit('CERT_REQUEST')
-    return api.downloadPkiCert(data).then(binary => {
-      commit('CERT_SUCCESS')
-      return binary
-    }).catch(err => {
-      commit('CERT_ERROR', err.response)
-      throw err
-    })
-  },
-  createCert: ({ commit, dispatch }, data) => {
-    commit('CERT_REQUEST')
-    return api.createPkiCert(data).then(item => {
-      // reset list
-      commit('CERT_LIST_RESET')
-      dispatch('allCerts')
-      // update item
-      commit('CERT_ITEM_REPLACED', item)
-      return item
-    }).catch(err => {
-      commit('CERT_ERROR', err.response)
-      throw err
-    })
-  },
-  emailCert: ({ commit }, id) => {
-    commit('CERT_REQUEST')
-    return api.emailPkiCert(id).then(response => {
-      commit('CERT_SUCCESS')
-      return response
-    }).catch(err => {
-      commit('CERT_ERROR', err.response)
-      throw err
-    })
-  },
-  revokeCert: ({ commit, dispatch }, data) => {
-    commit('CERT_REQUEST')
-    return api.revokePkiCert(data).then(response => {
-      // reset list(s)
-      commit('CERT_LIST_RESET')
-      dispatch('allCerts')
-      commit('REVOKED_CERT_LIST_RESET')
-      dispatch('allRevokedCerts')
-      // update item
-      commit('CERT_ITEM_REVOKED', data.id)
-      return response
-    }).catch(err => {
-      commit('CERT_ERROR', err.response)
-      throw err
-    })
-  },
-
-  allRevokedCerts: ({ state, commit }) => {
-    if (state.revokedCertListCache) {
-      return Promise.resolve(state.revokedCertListCache)
-    }
-    commit('REVOKED_CERT_REQUEST')
-    return api.pkiRevokedCerts().then(response => {
-      commit('REVOKED_CERT_LIST_REPLACED', response.items)
-      return state.revokedCertListCache
-    }).catch((err) => {
-      commit('REVOKED_CERT_ERROR', err.response)
-      throw err
-    })
-  },
-  getRevokedCert: ({ state, commit }, id) => {
-    if (state.revokedCertItemCache[id]) {
-      return Promise.resolve(state.revokedCertItemCache[id])
-    }
-    commit('REVOKED_CERT_REQUEST')
-    return api.pkiRevokedCert(id).then(item => {
-      commit('REVOKED_CERT_ITEM_REPLACED', item)
-      return state.revokedCertItemCache[id]
-    }).catch((err) => {
-      commit('REVOKED_CERT_ERROR', err.response)
-      throw err
-    })
-  }
+  ...actionsCas,
+  ...actionsProfiles,
+  ...actionsCerts,
+  ...actionsRevokedCerts
 }
 
 const mutations = {
-  CA_REQUEST: (state, type) => {
-    state.caStatus = type || types.LOADING
-    state.caMessage = ''
-  },
-  CA_LIST_RESET: (state) => {
-    state.caListCache = false
-  },
-  CA_LIST_REPLACED: (state, items) => {
-    state.caStatus = types.SUCCESS
-    state.caListCache = items
-  },
-  CA_ITEM_REPLACED: (state, data) => {
-    state.caStatus = types.SUCCESS
-    Vue.set(state.caItemCache, data.ID, data)
-    store.dispatch('config/resetPkiCas')
-  },
-  CA_ERROR: (state, response) => {
-    state.caStatus = types.ERROR
-    if (response && response.data) {
-      state.caMessage = response.data.message
-    }
-  },
-
-  PROFILE_REQUEST: (state, type) => {
-    state.profileStatus = type || types.LOADING
-    state.profileMessage = ''
-  },
-  PROFILE_LIST_RESET: (state) => {
-    state.profileListCache = false
-  },
-  PROFILE_LIST_REPLACED: (state, items) => {
-    state.profileStatus = types.SUCCESS
-    state.profileListCache = items
-  },
-  PROFILE_ITEM_REPLACED: (state, data) => {
-    state.profileStatus = types.SUCCESS
-    Vue.set(state.profileItemCache, data.ID, data)
-    store.dispatch('config/resetPkiProfiles')
-  },
-  PROFILE_ERROR: (state, response) => {
-    state.profileStatus = types.ERROR
-    if (response && response.data) {
-      state.profileMessage = response.data.message
-    }
-  },
-
-  CERT_REQUEST: (state, type) => {
-    state.certStatus = type || types.LOADING
-    state.certMessage = ''
-  },
-  CERT_SUCCESS: (state) => {
-    state.certStatus = types.SUCCESS
-    state.certMessage = ''
-  },
-  CERT_LIST_RESET: (state) => {
-    state.certListCache = false
-  },
-  CERT_LIST_REPLACED: (state, items) => {
-    state.certStatus = types.SUCCESS
-    state.certListCache = items.map(item => {
-      const { ID, ca_id } = item
-      return { ...item, ID: `${ID}`, ca_id: `${ca_id}` }
-    })
-  },
-  CERT_ITEM_REPLACED: (state, data) => {
-    state.certStatus = types.SUCCESS
-    const { ID, ca_id } = data
-    Vue.set(state.certItemCache, data.ID, { ...data, ID: `${ID}`, ca_id: `${ca_id}` })
-    store.dispatch('config/resetPkiCerts')
-  },
-  CERT_ITEM_EMAILED: (state) => {
-    state.certStatus = types.SUCCESS
-  },
-  CERT_ITEM_REVOKED: (state) => {
-    state.certStatus = types.SUCCESS
-    store.dispatch('config/resetPkiCerts')
-  },
-  CERT_ERROR: (state, response) => {
-    state.certStatus = types.ERROR
-    if (response && response.data) {
-      state.certMessage = response.data.message
-    }
-  },
-
-  REVOKED_CERT_REQUEST: (state, type) => {
-    state.revokedCertStatus = type || types.LOADING
-    state.revokedCertMessage = ''
-  },
-  REVOKED_CERT_LIST_RESET: (state) => {
-    state.revokedCertListCache = false
-  },
-  REVOKED_CERT_LIST_REPLACED: (state, items) => {
-    state.revokedCertStatus = types.SUCCESS
-    state.revokedCertListCache = items
-  },
-  REVOKED_CERT_ITEM_REPLACED: (state, data) => {
-    state.revokedCertStatus = types.SUCCESS
-    Vue.set(state.revokedCertItemCache, data.ID, data)
-  },
-  REVOKED_CERT_ERROR: (state, response) => {
-    state.revokedCertStatus = types.ERROR
-    if (response && response.data) {
-      state.revokedCertMessage = response.data.message
-    }
-  }
+  ...mutationsCas,
+  ...mutationsProfiles,
+  ...mutationsCerts,
+  ...mutationsRevokedCerts
 }
 
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_api.js b/html/pfappserver/root/src/views/Configuration/pki/cas/_api.js
index 24b65b546359..ebc9f98eadd7 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_api.js
@@ -1,19 +1,18 @@
 import apiCall from '@/utils/api'
 
 export default {
-  pkiCas: () => {
-    return apiCall.get('pki/cas').then(response => {
+  list: params => {
+    return apiCall.get('pki/cas', { params }).then(response => {
       const { data: { items = [] } = {} } = response
       return { items }
     })
   },
-  pkiCa: id => {
-    return apiCall.get(['pki', 'ca', id]).then(response => {
-      const { data: { items: { 0: item = {} } = {} } = {} } = response
-      return item
+  search: params => {
+    return apiCall.post('pki/cas/search', params).then(response => {
+      return response.data
     })
   },
-  createPkiCa: data => {
+  create: data => {
     return apiCall.post('pki/cas', data).then(response => {
       const { data: { error } = {} } = response
       if (error) {
@@ -23,5 +22,11 @@ export default {
         return item
       }
     })
+  },
+  item: id => {
+    return apiCall.get(['pki', 'ca', id]).then(response => {
+      const { data: { items: { 0: item = {} } = {} } = {} } = response
+      return item
+    })
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
new file mode 100644
index 000000000000..cc14ff0c3678
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
@@ -0,0 +1,260 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('Certificate Authorities') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button :disabled="isLoading || !isServiceAlive"
+          variant="outline-primary" @click="goToNew">{{ $t('New Certificate Authority') }}</b-button>
+        <base-button-service
+          service="pfpki" restart start stop
+          class="ml-1" />
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone({ id: item.ID, ...item })"
+            >{{ $t('Clone') }}</b-button>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1 text-nowrap"
+              @click.stop.prevent="onClipboard(item)"
+            >{{ $t('Copy Certificate') }}</b-button>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1 text-nowrap"
+              :to="{ name: 'newPkiProfile', params: { ca_id: item.ID } }"
+            >{{ $t('New Template') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { computed, ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+import i18n from '@/utils/locale'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const isServiceAlive = computed(() => {
+    const { state: { services: { cache: { pfpki: { alive } = {} } = {} } = {} } = {} } = $store
+    return alive
+  })
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onClipboard = item => {
+    $store.dispatch('$_pkis/getCa', item.ID).then(ca => {
+      try {
+        navigator.clipboard.writeText(ca.cert).then(() => {
+          $store.dispatch('notification/info', { message: i18n.t('<code>{cn}</code> certificate copied to clipboard', ca) })
+        }).catch(() => {
+          $store.dispatch('notification/danger', { message: i18n.t('Could not copy <code>{cn}</code> certificate to clipboard.', ca) })
+        })
+      } catch (e) {
+        $store.dispatch('notification/danger', { message: i18n.t('Clipboard not supported.') })
+      }
+    })
+  }
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  return {
+    useSearch,
+    isServiceAlive,
+    tableRef,
+    onClipboard,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
+
+
+<!--
+<template>
+  <b-card no-body>
+    <pf-config-list
+      :config="config"
+    >
+      <template v-slot:pageHeader>
+        <b-card-header>
+          <h4 class="mb-0">{{ $t('Certificate Authorities') }}</h4>
+        </b-card-header>
+      </template>
+      <template v-slot:buttonAdd>
+        <b-button variant="outline-primary" :to="{ name: 'newPkiCa' }" :disabled="!isServiceAlive">{{ $t('New Certificate Authority') }}</b-button>
+        <pf-button-service service="pfpki" class="ml-1" restart start stop :disabled="isLoading"></pf-button-service>
+      </template>
+      <template v-slot:emptySearch="state">
+        <pf-empty-table :is-loading="state.isLoading">{{ $t('No certificate authorities found') }}</pf-empty-table>
+      </template>
+      <template v-slot:cell(buttons)="item">
+        <span class="float-right">
+          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
+          <b-button size="sm" variant="outline-primary" class="mr-1 text-nowrap" @click.stop.prevent="clipboard(item)">{{ $t('Copy Certificate') }}</b-button>
+          <b-button size="sm" variant="outline-primary" class="mr-1 text-nowrap" :to="{ name: 'newPkiProfile', params: { ca_id: item.ID } }">{{ $t('New Template') }}</b-button>
+        </span>
+      </template>
+    </pf-config-list>
+  </b-card>
+</template>
+
+<script>
+import pfButtonService from '@/components/pfButtonService'
+import pfConfigList from '@/components/pfConfigList'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import {
+  config
+} from '../_config/pki/ca'
+
+export default {
+  name: 'pki-cas-list',
+  components: {
+    pfButtonService,
+    pfConfigList,
+    pfEmptyTable
+  },
+  data () {
+    return {
+      config: config(this)
+    }
+  },
+  computed: {
+    isLoading () {
+      return this.$store.getters['$_pkis/isLoading']
+    },
+    isServiceAlive () {
+      const { $store: { state: { services: { cache: { pfpki = {} } = {} } = {} } = {} } = {} } = this
+      return pfpki.alive
+    }
+  },
+  methods: {
+    clone (item) {
+      this.$router.push({ name: 'clonePkiCa', params: { id: item.ID } })
+    },
+    clipboard (item) {
+      this.$store.dispatch('$_pkis/getCa', item.ID).then(ca => {
+        try {
+          navigator.clipboard.writeText(ca.cert).then(() => {
+            this.$store.dispatch('notification/info', { message: this.$i18n.t('<code>{cn}</code> certificate copied to clipboard', ca) })
+          }).catch(() => {
+            this.$store.dispatch('notification/danger', { message: this.$i18n.t('Could not copy <code>{cn}</code> certificate to clipboard.', ca) })
+          })
+        } catch (e) {
+          this.$store.dispatch('notification/danger', { message: this.$i18n.t('Clipboard not supported.') })
+        }
+      })
+    }
+  }
+}
+</script>
+-->
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js
index b832287a277b..2013f89f69ff 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js
@@ -39,6 +39,86 @@ export const useStore = (props, context, form) => {
   return {
     isLoading: computed(() => $store.getters['$_pkis/isLoading']),
     createItem: () => $store.dispatch('$_pkis/createCa', recomposeCa(form.value)),
-    getItem: () => $store.dispatch('$_pkis/getCa', id.value).then(item => decomposeCa(item))
+    getItem: () => $store.dispatch('$_pkis/getCa', id.value)
+      .then(item => decomposeCa(item))
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('pkiCas', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'ID',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'cn',
+      label: 'Common Name', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'mail',
+      label: 'Email', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'organisation',
+      label: 'Organisation', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'ID',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'cn',
+      text: i18n.t('Common Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'mail',
+      text: i18n.t('Email'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'organisation',
+      text: i18n.t('Organisation'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'ID', op: 'contains', value: null },
+      { field: 'cn', op: 'contains', value: null },
+      { field: 'mail', op: 'contains', value: null },
+      { field: 'organisation', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_router.js b/html/pfappserver/root/src/views/Configuration/pki/cas/_router.js
index 1f31a818997a..ed6f8c7d4514 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_router.js
@@ -17,6 +17,7 @@ export const useRouter = $router => {
       .push({ name: 'pkiCa', params: { ...params, id: params.ID } })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'clonePkiCa', params }),
+    goToNew: params => $router.push({ name: 'newPkiCa', params })
   }
 }
 
@@ -25,7 +26,7 @@ export default [
     path: 'pki/cas',
     name: 'pkiCas',
     component: TheTabs,
-    props: (route) => ({ tab: 'pkiCas', query: route.query.query }),
+    props: () => ({ tab: 'pkiCas' }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_store.js b/html/pfappserver/root/src/views/Configuration/pki/cas/_store.js
new file mode 100644
index 000000000000..a5a39d397c93
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_store.js
@@ -0,0 +1,94 @@
+import Vue from 'vue'
+import store from '@/store'
+import api from './_api'
+
+const types = {
+  LOADING: 'loading',
+  DELETING: 'deleting',
+  SUCCESS: 'success',
+  ERROR: 'error'
+}
+
+// Default values
+export const state = () => {
+  return {
+    caListCache: false, // ca list details
+    caItemCache: {}, // ca item details
+    caMessage: '',
+    caStatus: ''
+  }
+}
+
+export const getters = {
+  isCaWaiting: state => [types.LOADING, types.DELETING].includes(state.caStatus),
+  isCaLoading: state => state.caStatus === types.LOADING,
+  cas: state => state.caListCache
+}
+
+export const actions = {
+  allCas: ({ state, commit }) => {
+    if (state.caListCache) {
+      return Promise.resolve(state.caListCache)
+    }
+    commit('CA_REQUEST')
+    return api.list().then(response => {
+      commit('CA_LIST_REPLACED', response.items)
+      return state.caListCache
+    }).catch((err) => {
+      commit('CA_ERROR', err.response)
+      throw err
+    })
+  },
+  getCa: ({ state, commit }, id) => {
+    if (state.caItemCache[id]) {
+      return Promise.resolve(state.caItemCache[id])
+    }
+    commit('CA_REQUEST')
+    return api.item(id).then(item => {
+      commit('CA_ITEM_REPLACED', item)
+      return state.caItemCache[id]
+    }).catch((err) => {
+      commit('CA_ERROR', err.response)
+      throw err
+    })
+  },
+  createCa: ({ commit, dispatch }, data) => {
+    commit('CA_REQUEST')
+    return api.create(data).then(item => {
+      // reset list
+      commit('CA_LIST_RESET')
+      dispatch('allCas')
+      // update item
+      commit('CA_ITEM_REPLACED', item)
+      return item
+    }).catch(err => {
+      commit('CA_ERROR', err.response)
+      throw err
+    })
+  }
+}
+
+export const mutations = {
+  CA_REQUEST: (state, type) => {
+    state.caStatus = type || types.LOADING
+    state.caMessage = ''
+  },
+  CA_LIST_RESET: (state) => {
+    state.caListCache = false
+  },
+  CA_LIST_REPLACED: (state, items) => {
+    state.caStatus = types.SUCCESS
+    state.caListCache = items
+  },
+  CA_ITEM_REPLACED: (state, data) => {
+    state.caStatus = types.SUCCESS
+    Vue.set(state.caItemCache, data.ID, data)
+    store.dispatch('config/resetPkiCas')
+  },
+  CA_ERROR: (state, response) => {
+    state.caStatus = types.ERROR
+    if (response && response.data) {
+      state.caMessage = response.data.message
+    }
+  }
+}
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_api.js b/html/pfappserver/root/src/views/Configuration/pki/certs/_api.js
index 232e87186ff9..408fae8bf466 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_api.js
@@ -1,19 +1,18 @@
 import apiCall from '@/utils/api'
 
 export default {
-  pkiCerts: () => {
-    return apiCall.get('pki/certs').then(response => {
+  list: params => {
+    return apiCall.get('pki/certs', { params }).then(response => {
       const { data: { items = [] } = {} } = response
       return { items }
     })
   },
-  pkiCert: id => {
-    return apiCall.get(['pki', 'cert', id]).then(response => {
-      const { data: { items: { 0: item = {} } = {} } = {} } = response
-      return item
+  search: params => {
+    return apiCall.post('pki/certs/search', params).then(response => {
+      return response.data
     })
   },
-  createPkiCert: data => {
+  create: data => {
     return apiCall.post('pki/certs', data).then(response => {
       const { data: { error } = {} } = response
       if (error) {
@@ -24,7 +23,7 @@ export default {
       }
     })
   },
-  downloadPkiCert: data => {
+  download: data => {
     const { id, password } = data
     return apiCall.getArrayBuffer(['pki', 'cert', id, 'download', password]).then(response => {
       const { data, data: { error } = {} } = response
@@ -35,7 +34,13 @@ export default {
       }
     })
   },
-  emailPkiCert: id => {
+  item: id => {
+    return apiCall.get(['pki', 'cert', id]).then(response => {
+      const { data: { items: { 0: item = {} } = {} } = {} } = response
+      return item
+    })
+  },
+  email: id => {
     return apiCall.get(['pki', 'cert', id, 'email']).then(response => {
       const { data: { error } = {} } = response
       if (error) {
@@ -46,7 +51,7 @@ export default {
       }
     })
   },
-  revokePkiCert: data => {
+  revoke: data => {
     return apiCall.delete(['pki', 'cert', data.id, data.reason]).then(response => {
       const { data: { error } = {} } = response
       if (error) {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateEmail.vue b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateEmail.vue
index 366cbf7fa1c0..8da5c2a06def 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateEmail.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateEmail.vue
@@ -1,6 +1,6 @@
 <template>
   <b-button v-if="!isClone && !isNew"
-    size="sm" variant="outline-primary" :disabled="isLoading" @click="onEmail">{{ $t('Email') }}</b-button>
+    size="sm" variant="outline-primary" :disabled="isLoading" @click.stop.prevent="onEmail">{{ $t('Email') }}</b-button>
 </template>
 <script>
 import {
@@ -15,7 +15,7 @@ const components = {
 
 const props = {
   id : {
-    type: String
+    type: [String, Number]
   },
   isClone: {
     type: Boolean
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateRevoke.vue b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateRevoke.vue
index eeef0d8828e2..6790e66e948a 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateRevoke.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateRevoke.vue
@@ -1,6 +1,6 @@
 <template>
   <b-button-group v-if="!isClone && !isNew">
-    <b-button size="sm" variant="outline-danger" :disabled="isLoading" @click="onShowModal">{{ $t('Revoke') }}</b-button>
+    <b-button size="sm" variant="outline-danger" :disabled="isLoading" @click.stop.prevent="onShowModal">{{ $t('Revoke') }}</b-button>
     <b-modal v-model="isShowModal"
       size="lg" centered cancel-disabled>
       <template v-slot:modal-title>
@@ -69,7 +69,7 @@ const setup = (props, context) => {
     id
   } = toRefs(props)
 
-  const { root: { $store } = {} } = context
+  const { emit, root: { $store } = {} } = context
 
   if (!$store.state.$_pkis)
     $store.registerModule('$_pkis', StoreModule)
@@ -88,6 +88,7 @@ const setup = (props, context) => {
       const { cn } = cert
       $store.dispatch('$_pkis/revokeCert', { id: id.value, reason }).then(() => {
         $store.dispatch('notification/info', { message: i18n.t('Certificate <code>{cn}</code> revoked.', { cn }) })
+        emit('change')
       }).catch(e => {
         $store.dispatch('notification/danger', { message: i18n.t('Could not revoke certificate <code>{cn}</code>.<br/>Reason: ', { cn }) + e })
       }).finally(() => {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
new file mode 100644
index 000000000000..d4f7af51a551
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
@@ -0,0 +1,296 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('Certificates') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-dropdown :text="$t('New Certificate')" variant="outline-primary" :disabled="!isServiceAlive || profiles.length === 0">
+          <b-dropdown-header>{{ $t('Choose Certificate Authority - Template') }}</b-dropdown-header>
+          <b-dropdown-item v-for="profile in profilesSorted" :key="profile.ID" :to="{ name: 'newPkiCert', params: { profile_id: profile.ID } }">{{ profile.ca_name }} - {{ profile.name }}</b-dropdown-item>
+        </b-dropdown>
+        <base-button-service
+          service="pfpki" restart start stop
+          class="ml-1" />
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone({ id: item.ID, ...item })"
+            >{{ $t('Clone') }}</b-button>
+            <button-certificate-download :id="item.ID" class="mr-1" />
+            <button-certificate-email :id="item.ID" class="mr-1" />
+            <button-certificate-revoke :id="item.ID" class="mr-1" @change="reSearch" />
+          </span>
+        </template>
+        <template #cell(ca_name)="{ item }">
+          <router-link :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
+        </template>
+        <template #cell(profile_name)="{ item }">
+          <router-link :to="{ name: 'pkiProfile', params: { id: item.profile_id } }">{{ item.profile_name }}</router-link>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import {
+  ButtonCertificateDownload,
+  ButtonCertificateEmail,
+  ButtonCertificateRevoke
+} from './'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  ButtonCertificateDownload,
+  ButtonCertificateEmail,
+  ButtonCertificateRevoke,
+  pfEmptyTable
+}
+
+import { computed, ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const isServiceAlive = computed(() => {
+    const { state: { services: { cache: { pfpki: { alive } = {} } = {} } = {} } = {} } = $store
+    return alive
+  })
+
+  $store.dispatch('$_pkis/allProfiles')
+  const profiles = computed(() => $store.getters['$_pkis/profiles'] || [])
+  const profilesSorted = computed(() => {
+    return Array.prototype.slice.call(profiles.value)
+      .sort((a, b) => {
+        return (a.ca_name === b.ca_name)
+          ? a.name.localeCompare(b.name)
+          : a.ca_name.localeCompare(b.ca_name)
+      }) // sort profiles by 'name'
+  })
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  return {
+    useSearch,
+    isServiceAlive,
+    profiles,
+    profilesSorted,
+    tableRef,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
+
+<!--
+<template>
+  <b-card no-body>
+    <pf-config-list
+      :config="config"
+    >
+      <template v-slot:pageHeader>
+        <b-card-header>
+          <h4 class="mb-0">{{ $t('Certificates') }}</h4>
+        </b-card-header>
+      </template>
+      <template v-slot:buttonAdd>
+        <b-dropdown :text="$t('New Certificate')" variant="outline-primary" :disabled="profiles.length === 0">
+          <b-dropdown-header>{{ $t('Choose Certificate Authority - Template') }}</b-dropdown-header>
+          <b-dropdown-item v-for="profile in sortedProfiles" :key="profile.ID" :to="{ name: 'newPkiCert', params: { profile_id: profile.ID } }">{{ profile.ca_name }} - {{ profile.name }}</b-dropdown-item>
+        </b-dropdown>
+        <pf-button-service service="pfpki" class="ml-1" restart start stop :disabled="isLoading" @start="init" @restart="init"></pf-button-service>
+      </template>
+      <template v-slot:emptySearch="state">
+        <pf-empty-table :is-loading="state.isLoading">{{ $t('No certificates found') }}</pf-empty-table>
+      </template>
+      <template v-slot:cell(ca_name)="item">
+        <router-link :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
+      </template>
+      <template v-slot:cell(profile_name)="item">
+        <router-link :to="{ name: 'pkiProfile', params: { id: item.profile_id } }">{{ item.profile_name }}</router-link>
+      </template>
+      <template v-slot:cell(buttons)="item">
+        <span class="float-right">
+          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
+          <button-certificate-download :id="item.ID" />
+          <b-button v-if="item.mail" size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="email(item)">{{ $t('Email') }}</b-button>
+          <button-certificate-revoke :id="item.ID" />
+        </span>
+      </template>
+    </pf-config-list>
+  </b-card>
+</template>
+
+<script>
+import {
+  ButtonCertificateDownload,
+  ButtonCertificateRevoke
+} from '@/views/Configuration/pki/certs/_components/'
+import pfButtonService from '@/components/pfButtonService'
+import pfConfigList from '@/components/pfConfigList'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import {
+  config,
+  revoke,
+  download
+} from '../_config/pki/cert'
+
+export default {
+  name: 'pki-certs-list',
+  components: {
+    ButtonCertificateDownload,
+    ButtonCertificateRevoke,
+    pfButtonService,
+    pfConfigList,
+    pfEmptyTable
+  },
+  data () {
+    return {
+      config: config(this),
+      revoke, // ../_config/pki/cert
+      download // ../_config/pki/cert
+    }
+  },
+  computed: {
+    isLoading () {
+      return this.$store.getters['$_pkis/isCertLoading']
+    },
+    profiles () {
+      return this.$store.getters['$_pkis/profiles'] || []
+    },
+    sortedProfiles () {
+      return Array.prototype.slice.call(this.profiles).sort((a, b) => {
+        return (a.ca_name === b.ca_name)
+          ? a.name.localeCompare(b.name)
+          : a.ca_name.localeCompare(b.ca_name)
+      }) // sort profiles by 'name'
+    }
+  },
+  methods: {
+    init () {
+      this.$store.dispatch('$_pkis/allProfiles')
+    },
+    clone (item) {
+      this.$router.push({ name: 'clonePkiCert', params: { id: item.ID } })
+    },
+    email (item) {
+      const { ID, mail } = item
+      if (mail) {
+        this.$store.dispatch('$_pkis/emailCert', ID).then(() => {
+          this.$store.dispatch('notification/info', { message: this.$i18n.t('Certificate <code>{cn}</code> emailed to <code>{mail}</code>.', item) })
+        }).catch(e => {
+          this.$store.dispatch('notification/danger', { message: this.$i18n.t('Could not email certificate <code>{cn}</code> to <code>{mail}</code>: ', item) + e })
+        })
+      }
+    }
+  },
+  created () {
+    this.init()
+  }
+}
+</script>
+-->
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js
index e30df287ff0e..b5e55b1e0328 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js
@@ -49,3 +49,119 @@ export const useStore = (props, context, form) => {
     getItem: () => $store.dispatch('$_pkis/getCert', id.value)
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('pkiCerts', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'ID',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'ca_id',
+      required: true
+    },
+    {
+      key: 'ca_name',
+      label: 'Certificate Authority', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'profile_id',
+      required: true
+    },
+    {
+      key: 'profile_name',
+      label: 'Template', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'cn',
+      label: 'Common Name', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'mail',
+      label: 'Email', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'valid_until',
+      label: 'Valid Until', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'ID',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'ca_id',
+      text: i18n.t('Certificate Authority Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'ca_name',
+      text: i18n.t('Certificate Authority Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'profile_id',
+      text: i18n.t('Template Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'profile_name',
+      text: i18n.t('Template Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'cn',
+      text: i18n.t('Common Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'mail',
+      text: i18n.t('Email'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'ID', op: 'contains', value: null },
+      { field: 'ca_name', op: 'contains', value: null },
+      { field: 'profile_name', op: 'contains', value: null },
+      { field: 'cn', op: 'contains', value: null },
+      { field: 'mail', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_router.js b/html/pfappserver/root/src/views/Configuration/pki/certs/_router.js
index 7b9f0249da96..cb14cab9e28c 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_router.js
@@ -17,6 +17,7 @@ export const useRouter = $router => {
       .push({ name: 'pkiCert', params: { ...params, id: params.ID } })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'clonePkiCert', params }),
+    goToNew: params => $router.push({ name: 'newPkiCert', params })
   }
 }
 
@@ -25,7 +26,7 @@ export default [
     path: 'pki/certs',
     name: 'pkiCerts',
     component: TheTabs,
-    props: (route) => ({ tab: 'pkiCerts', query: route.query.query }),
+    props: () => ({ tab: 'pkiCerts' }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_store.js b/html/pfappserver/root/src/views/Configuration/pki/certs/_store.js
new file mode 100644
index 000000000000..0c9b58475f1c
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_store.js
@@ -0,0 +1,145 @@
+import Vue from 'vue'
+import store from '@/store'
+import api from './_api'
+
+const types = {
+  LOADING: 'loading',
+  DELETING: 'deleting',
+  SUCCESS: 'success',
+  ERROR: 'error'
+}
+
+// Default values
+export const state = () => {
+  return {
+    certListCache: false, // cert list details
+    certItemCache: {}, // cert item details
+    certMessage: '',
+    certStatus: ''
+  }
+}
+
+export const getters = {
+  isCertWaiting: state => [types.LOADING, types.DELETING].includes(state.certStatus),
+  isCertLoading: state => state.certStatus === types.LOADING,
+  certs: state => state.certListCache
+}
+
+export const actions = {
+  allCerts: ({ state, commit }) => {
+    if (state.certListCache) {
+      return Promise.resolve(state.certListCache)
+    }
+    commit('CERT_REQUEST')
+    return api.list().then(response => {
+      commit('CERT_LIST_REPLACED', response.items)
+      return state.certListCache
+    }).catch((err) => {
+      commit('CERT_ERROR', err.response)
+      throw err
+    })
+  },
+  getCert: ({ state, commit }, id) => {
+    if (state.certItemCache[id]) {
+      return Promise.resolve(state.certItemCache[id])
+    }
+    commit('CERT_REQUEST')
+    return api.item(id).then(item => {
+      commit('CERT_ITEM_REPLACED', item)
+      return state.certItemCache[id]
+    }).catch((err) => {
+      commit('CERT_ERROR', err.response)
+      throw err
+    })
+  },
+  downloadCert: ({ commit }, data) => {
+    commit('CERT_REQUEST')
+    return api.download(data).then(binary => {
+      commit('CERT_SUCCESS')
+      return binary
+    }).catch(err => {
+      commit('CERT_ERROR', err.response)
+      throw err
+    })
+  },
+  createCert: ({ commit, dispatch }, data) => {
+    commit('CERT_REQUEST')
+    return api.create(data).then(item => {
+      // reset list
+      commit('CERT_LIST_RESET')
+      dispatch('allCerts')
+      // update item
+      commit('CERT_ITEM_REPLACED', item)
+      return item
+    }).catch(err => {
+      commit('CERT_ERROR', err.response)
+      throw err
+    })
+  },
+  emailCert: ({ commit }, id) => {
+    commit('CERT_REQUEST')
+    return api.email(id).then(response => {
+      commit('CERT_SUCCESS')
+      return response
+    }).catch(err => {
+      commit('CERT_ERROR', err.response)
+      throw err
+    })
+  },
+  revokeCert: ({ commit, dispatch }, data) => {
+    commit('CERT_REQUEST')
+    return api.revoke(data).then(response => {
+      // reset list(s)
+      commit('CERT_LIST_RESET')
+      dispatch('allCerts')
+      commit('REVOKED_CERT_LIST_RESET')
+      dispatch('allRevokedCerts')
+      // update item
+      commit('CERT_ITEM_REVOKED', data.id)
+      return response
+    }).catch(err => {
+      commit('CERT_ERROR', err.response)
+      throw err
+    })
+  }
+}
+
+export const mutations = {
+  CERT_REQUEST: (state, type) => {
+    state.certStatus = type || types.LOADING
+    state.certMessage = ''
+  },
+  CERT_SUCCESS: (state) => {
+    state.certStatus = types.SUCCESS
+    state.certMessage = ''
+  },
+  CERT_LIST_RESET: (state) => {
+    state.certListCache = false
+  },
+  CERT_LIST_REPLACED: (state, items) => {
+    state.certStatus = types.SUCCESS
+    state.certListCache = items.map(item => {
+      const { ID, ca_id } = item
+      return { ...item, ID: `${ID}`, ca_id: `${ca_id}` }
+    })
+  },
+  CERT_ITEM_REPLACED: (state, data) => {
+    state.certStatus = types.SUCCESS
+    const { ID, ca_id } = data
+    Vue.set(state.certItemCache, data.ID, { ...data, ID: `${ID}`, ca_id: `${ca_id}` })
+    store.dispatch('config/resetPkiCerts')
+  },
+  CERT_ITEM_EMAILED: (state) => {
+    state.certStatus = types.SUCCESS
+  },
+  CERT_ITEM_REVOKED: (state) => {
+    state.certStatus = types.SUCCESS
+    store.dispatch('config/resetPkiCerts')
+  },
+  CERT_ERROR: (state, response) => {
+    state.certStatus = types.ERROR
+    if (response && response.data) {
+      state.certMessage = response.data.message
+    }
+  }
+}
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_api.js b/html/pfappserver/root/src/views/Configuration/pki/profiles/_api.js
index 1a66bea7aa2b..83d10fb6a337 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_api.js
@@ -1,19 +1,18 @@
 import apiCall from '@/utils/api'
 
 export default {
-  pkiProfiles: () => {
-    return apiCall.get('pki/profiles').then(response => {
+  list: params => {
+    return apiCall.get('pki/profiles', { params }).then(response => {
       const { data: { items = [] } = {} } = response
       return { items }
     })
   },
-  pkiProfile: id => {
-    return apiCall.get(['pki', 'profile', id]).then(response => {
-      const { data: { items: { 0: item = {} } = {} } = {} } = response
-      return item
+  search: params => {
+    return apiCall.post('pki/profiles/search', params).then(response => {
+      return response.data
     })
   },
-  createPkiProfile: data => {
+  create: data => {
     return apiCall.post('pki/profiles', data).then(response => {
       const { data: { error } = {} } = response
       if (error) {
@@ -24,7 +23,13 @@ export default {
       }
     })
   },
-  updatePkiProfile: data => {
+  item: id => {
+    return apiCall.get(['pki', 'profile', id]).then(response => {
+      const { data: { items: { 0: item = {} } = {} } = {} } = response
+      return item
+    })
+  },
+  update: data => {
     return apiCall.patch(['pki', 'profile', data.id], data).then(response => {
       const { data: { error } = {} } = response
       if (error) {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
new file mode 100644
index 000000000000..1df86f8a7ea0
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
@@ -0,0 +1,254 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('Templates') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-dropdown :text="$t('New Template')" variant="outline-primary" :disabled="!isServiceAlive || cas.length === 0">
+          <b-dropdown-header>{{ $t('Choose Certificate Authority') }}</b-dropdown-header>
+          <b-dropdown-item v-for="ca in casSorted" :key="ca.ID" :to="{ name: 'newPkiProfile', params: { ca_id: ca.ID } }">{{ ca.cn }}</b-dropdown-item>
+        </b-dropdown>
+        <base-button-service :disabled="isLoading"
+          service="pfpki" restart start stop
+          class="ml-1" />
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone({ id: item.ID, ...item })"
+            >{{ $t('Clone') }}</b-button>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1 text-nowrap"
+              :to="{ name: 'newPkiCert', params: { profile_id: item.ID } }"
+            >{{ $t('New Certificate') }}</b-button>
+          </span>
+        </template>
+        <template #cell(ca_name)="{ item }">
+          <router-link :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { computed, ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const isServiceAlive = computed(() => {
+    const { state: { services: { cache: { pfpki: { alive } = {} } = {} } = {} } = {} } = $store
+    return alive
+  })
+
+  $store.dispatch('$_pkis/allCas')
+  const cas = computed(() => $store.getters['$_pkis/cas'] || [])
+  const casSorted = computed(() => {
+    return Array.prototype.slice.call(cas.value)
+      .sort((a, b) => a.cn.localeCompare(b.cn)) // sort cas by 'cn'
+  })
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  return {
+    useSearch,
+    isServiceAlive,
+    cas,
+    casSorted,
+    tableRef,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
+
+<!--
+
+<template>
+  <b-card no-body>
+    <pf-config-list
+      :config="config"
+    >
+      <template v-slot:pageHeader>
+        <b-card-header>
+          <h4 class="mb-0">{{ $t('Templates') }}</h4>
+        </b-card-header>
+      </template>
+      <template v-slot:buttonAdd>
+        <b-dropdown :text="$t('New Template')" variant="outline-primary" :disabled="cas.length === 0">
+          <b-dropdown-header>{{ $t('Choose Certificate Authority') }}</b-dropdown-header>
+          <b-dropdown-item v-for="ca in sortedCas" :key="ca.ID" :to="{ name: 'newPkiProfile', params: { ca_id: ca.ID } }">{{ ca.cn }}</b-dropdown-item>
+        </b-dropdown>
+        <pf-button-service service="pfpki" class="ml-1" restart start stop :disabled="isLoading" @start="init" @restart="init"></pf-button-service>
+      </template>
+      <template v-slot:emptySearch="state">
+        <pf-empty-table :is-loading="state.isLoading">{{ $t('No profiles found') }}</pf-empty-table>
+      </template>
+      <template v-slot:cell(ca_name)="item">
+        <router-link :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
+      </template>
+      <template v-slot:cell(buttons)="item">
+        <span class="float-right">
+          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
+          <b-button size="sm" variant="outline-primary" class="mr-1 text-nowrap" :to="{ name: 'newPkiCert', params: { profile_id: item.ID } }">{{ $t('New Certificate') }}</b-button>
+        </span>
+      </template>
+    </pf-config-list>
+  </b-card>
+</template>
+
+<script>
+import pfButtonService from '@/components/pfButtonService'
+import pfConfigList from '@/components/pfConfigList'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import {
+  config
+} from '../_config/pki/profile'
+
+export default {
+  name: 'pki-profiles-list',
+  components: {
+    pfButtonService,
+    pfConfigList,
+    pfEmptyTable
+  },
+  data () {
+    return {
+      config: config(this)
+    }
+  },
+  computed: {
+    cas () {
+      return this.$store.getters['$_pkis/cas'] || []
+    },
+    sortedCas () {
+      return Array.prototype.slice.call(this.cas).sort((a, b) => a.cn.localeCompare(b.cn)) // sort cas by 'cn'
+    },
+    isLoading () {
+      return this.$store.getters['$_pkis/isLoading']
+    }
+  },
+  methods: {
+    init () {
+      this.$store.dispatch('$_pkis/allCas')
+    },
+    clone (item) {
+      this.$router.push({ name: 'clonePkiProfile', params: { id: item.ID } })
+    }
+  },
+  created () {
+    this.init()
+  }
+}
+</script>
+-->
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js
index 672432d1cb6c..10b4d889990d 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js
@@ -55,3 +55,72 @@ export const useStore = (props, context, form) => {
     getItem: () => $store.dispatch('$_pkis/getProfile', id.value).then(item => decomposeProfile(item))
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('pkiProfiles', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'ID',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'ca_id',
+      required: true
+    },
+    {
+      key: 'ca_name',
+      label: 'Certificate Authority', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'name',
+      label: 'Name', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'ID',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'ca_name',
+      text: i18n.t('Certificate Authority'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'name',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'ID', op: 'contains', value: null },
+      { field: 'ca_name', op: 'contains', value: null },
+      { field: 'name', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_router.js b/html/pfappserver/root/src/views/Configuration/pki/profiles/_router.js
index 8bc1cb1cafe3..74c274606b87 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_router.js
@@ -17,6 +17,7 @@ export const useRouter = $router => {
       .push({ name: 'pkiProfile', params: { ...params, id: params.ID } })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'clonePkiProfile', params }),
+    goToNew: params => $router.push({ name: 'newPkiProfile', params })
   }
 }
 
@@ -25,7 +26,7 @@ export default [
     path: 'pki/profiles',
     name: 'pkiProfiles',
     component: TheTabs,
-    props: (route) => ({ tab: 'pkiProfiles', query: route.query.query }),
+    props: () => ({ tab: 'pkiProfiles' }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_store.js b/html/pfappserver/root/src/views/Configuration/pki/profiles/_store.js
new file mode 100644
index 000000000000..4e4fa3139e17
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_store.js
@@ -0,0 +1,108 @@
+import Vue from 'vue'
+import store from '@/store'
+import api from './_api'
+
+const types = {
+  LOADING: 'loading',
+  DELETING: 'deleting',
+  SUCCESS: 'success',
+  ERROR: 'error'
+}
+
+// Default values
+export const state = () => {
+  return {
+    profileListCache: false, // profile list details
+    profileItemCache: {}, // profile item details
+    profileMessage: '',
+    profileStatus: '',
+  }
+}
+
+export const getters = {
+  isProfileWaiting: state => [types.LOADING, types.DELETING].includes(state.profileStatus),
+  isProfileLoading: state => state.profileStatus === types.LOADING,
+  profiles: state => state.profileListCache
+}
+
+export const actions = {
+  allProfiles: ({ state, commit }) => {
+    if (state.profileListCache) {
+      return Promise.resolve(state.profileListCache)
+    }
+    commit('PROFILE_REQUEST')
+    return api.list().then(response => {
+      commit('PROFILE_LIST_REPLACED', response.items)
+      return state.profileListCache
+    }).catch((err) => {
+      commit('PROFILE_ERROR', err.response)
+      throw err
+    })
+  },
+  getProfile: ({ state, commit }, id) => {
+    if (state.profileItemCache[id]) {
+      return Promise.resolve(state.profileItemCache[id])
+    }
+    commit('PROFILE_REQUEST')
+    return api.item(id).then(item => {
+      commit('PROFILE_ITEM_REPLACED', item)
+      return state.profileItemCache[id]
+    }).catch((err) => {
+      commit('PROFILE_ERROR', err.response)
+      throw err
+    })
+  },
+  createProfile: ({ commit, dispatch }, data) => {
+    commit('PROFILE_REQUEST')
+    return api.create(data).then(item => {
+      // reset list
+      commit('PROFILE_LIST_RESET')
+      dispatch('allProfiles')
+      // update item
+      commit('PROFILE_ITEM_REPLACED', item)
+      return item
+    }).catch(err => {
+      commit('PROFILE_ERROR', err.response)
+      throw err
+    })
+  },
+  updateProfile: ({ commit, dispatch }, data) => {
+    commit('PROFILE_REQUEST')
+    return api.update(data).then(item => {
+      // reset list
+      commit('PROFILE_LIST_RESET')
+      dispatch('allProfiles')
+      // update item
+      commit('PROFILE_ITEM_REPLACED', item)
+      return item
+    }).catch(err => {
+      commit('PROFILE_ERROR', err.response)
+      throw err
+    })
+  }
+}
+
+export const mutations = {
+  PROFILE_REQUEST: (state, type) => {
+    state.profileStatus = type || types.LOADING
+    state.profileMessage = ''
+  },
+  PROFILE_LIST_RESET: (state) => {
+    state.profileListCache = false
+  },
+  PROFILE_LIST_REPLACED: (state, items) => {
+    state.profileStatus = types.SUCCESS
+    state.profileListCache = items
+  },
+  PROFILE_ITEM_REPLACED: (state, data) => {
+    state.profileStatus = types.SUCCESS
+    Vue.set(state.profileItemCache, data.ID, data)
+    store.dispatch('config/resetPkiProfiles')
+  },
+  PROFILE_ERROR: (state, response) => {
+    state.profileStatus = types.ERROR
+    if (response && response.data) {
+      state.profileMessage = response.data.message
+    }
+  }
+}
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_api.js b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_api.js
index 7e95379230b8..2fe30ac40a6e 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_api.js
@@ -1,13 +1,18 @@
 import apiCall from '@/utils/api'
 
 export default {
-  pkiRevokedCerts: () => {
-    return apiCall.get('pki/revokedcerts').then(response => {
+  list: params => {
+    return apiCall.get('pki/revokedcerts', { params }).then(response => {
       const { data: { items = [] } = {} } = response
       return { items }
     })
   },
-  pkiRevokedCert: id => {
+  search: params => {
+    return apiCall.post('pki/revokedcerts/search', params).then(response => {
+      return response.data
+    })
+  },
+  item: id => {
     return apiCall.get(['pki', 'revokedcert', id]).then(response => {
       const { data: { items: { 0: item = {} } = {} } = {} } = response
       return item
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
new file mode 100644
index 000000000000..94664b9f465d
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
@@ -0,0 +1,228 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('Revoked Certificates') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <base-button-service
+          service="pfpki" restart start stop
+          class="ml-1" />
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(ca_name)="{ item }">
+          <router-link :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
+        </template>
+        <template #cell(profile_name)="{ item }">
+          <router-link :to="{ name: 'pkiProfile', params: { id: item.profile_id } }">{{ item.profile_name }}</router-link>
+        </template>
+        <template #cell(crl_reason)="{ item }">
+          {{ revokeReasons.find(reason => ~~reason.value === ~~item.crl_reason).text }}
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+import { revokeReasons } from '../../config'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onBulkExport,
+    revokeReasons,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
+
+<!--
+<template>
+  <b-card no-body>
+    <pf-config-list
+      :config="config"
+    >
+      <template v-slot:pageHeader>
+        <b-card-header>
+          <h4 class="mb-0">{{ $t('Revoked Certificates') }}</h4>
+        </b-card-header>
+      </template>
+      <template v-slot:buttonAdd>
+        <pf-button-service service="pfpki" class="ml-1" restart start stop :disabled="isLoading" @start="init" @restart="init"></pf-button-service>
+      </template>
+      <template v-slot:emptySearch="state">
+        <pf-empty-table :is-loading="state.isLoading">{{ $t('No revoked certificates found') }}</pf-empty-table>
+      </template>
+      <template v-slot:cell(ca_name)="item">
+        <router-link :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
+      </template>
+      <template v-slot:cell(profile_name)="item">
+        <router-link :to="{ name: 'pkiProfile', params: { id: item.profile_id } }">{{ item.profile_name }}</router-link>
+      </template>
+      <template v-slot:cell(crl_reason)="item">
+        {{ revokeReasons.find(reason => ~~reason.value === ~~item.crl_reason).text }}
+      </template>
+    </pf-config-list>
+  </b-card>
+</template>
+
+<script>
+import pfButtonService from '@/components/pfButtonService'
+import pfConfigList from '@/components/pfConfigList'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import {
+  config
+} from '../_config/pki/revokedCert'
+import {
+  revokeReasons
+} from '../_config/pki/'
+
+export default {
+  name: 'pki-revoked-certs-list',
+  components: {
+    pfButtonService,
+    pfConfigList,
+    pfEmptyTable
+  },
+  data () {
+    return {
+      config: config(this),
+      revokeReasons,
+      profiles: []
+    }
+  },
+  computed: {
+    isLoading () {
+      return this.$store.getters['$_pkis/isRevokedCertLoading']
+    }
+  },
+  methods: {
+    init () {
+      this.$store.dispatch('$_pkis/allProfiles').then(profiles => {
+        this.profiles = (profiles || []).sort((a, b) => { // sort profiles
+          return (a.ca_name === b.ca_name)
+            ? a.name.localeCompare(b.name)
+            : a.ca_name.localeCompare(b.ca_name)
+        })
+      })
+    }
+  },
+  created () {
+    this.init()
+  }
+}
+</script>
+-->
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
index d9e14de642b1..ddbe6b82a75a 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
@@ -27,3 +27,125 @@ export const useStore = (props, context) => {
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('pkiRevokedCerts', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'ID',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'ca_id',
+      required: true
+    },
+    {
+      key: 'ca_name',
+      label: 'Certificate Authority', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'profile_id',
+      required: true
+    },
+    {
+      key: 'profile_name',
+      label: 'Template', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'cn',
+      label: 'Common Name', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'mail',
+      label: 'Email', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'valid_until',
+      label: 'Valid Until', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'crl_reason',
+      label: 'Reason', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'ID',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'ca_id',
+      text: i18n.t('Certificate Authority Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'ca_name',
+      text: i18n.t('Certificate Authority Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'profile_id',
+      text: i18n.t('Template Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'profile_name',
+      text: i18n.t('Template Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'cn',
+      text: i18n.t('Common Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'mail',
+      text: i18n.t('Email'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'ID', op: 'contains', value: null },
+      { field: 'ca_name', op: 'contains', value: null },
+      { field: 'profile_name', op: 'contains', value: null },
+      { field: 'cn', op: 'contains', value: null },
+      { field: 'mail', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_router.js b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_router.js
index accdf0db2094..0a7b7a6c30a4 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_router.js
@@ -23,7 +23,7 @@ export default [
     path: 'pki/revokedcerts',
     name: 'pkiRevokedCerts',
     component: TheTabs,
-    props: (route) => ({ tab: 'pkiRevokedCerts', query: route.query.query }),
+    props: () => ({ tab: 'pkiRevokedCerts' }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_store.js b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_store.js
new file mode 100644
index 000000000000..6e135b70ca88
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_store.js
@@ -0,0 +1,78 @@
+import Vue from 'vue'
+import api from './_api'
+
+const types = {
+  LOADING: 'loading',
+  DELETING: 'deleting',
+  SUCCESS: 'success',
+  ERROR: 'error'
+}
+
+// Default values
+export const state = () => {
+  return {
+    revokedCertListCache: false, // revoked cert list details
+    revokedCertItemCache: {}, // revoked cert item details
+    revokedCertMessage: '',
+    revokedCertStatus: ''
+  }
+}
+
+export const getters = {
+  isRevokedCertWaiting: state => [types.LOADING, types.DELETING].includes(state.revokedCertStatus),
+  isRevokedCertLoading: state => state.revokedCertStatus === types.LOADING,
+  revokedCerts: state => state.revokedCertListCache
+}
+
+export const actions = {
+  allRevokedCerts: ({ state, commit }) => {
+    if (state.revokedCertListCache) {
+      return Promise.resolve(state.revokedCertListCache)
+    }
+    commit('REVOKED_CERT_REQUEST')
+    return api.list().then(response => {
+      commit('REVOKED_CERT_LIST_REPLACED', response.items)
+      return state.revokedCertListCache
+    }).catch((err) => {
+      commit('REVOKED_CERT_ERROR', err.response)
+      throw err
+    })
+  },
+  getRevokedCert: ({ state, commit }, id) => {
+    if (state.revokedCertItemCache[id]) {
+      return Promise.resolve(state.revokedCertItemCache[id])
+    }
+    commit('REVOKED_CERT_REQUEST')
+    return api.item(id).then(item => {
+      commit('REVOKED_CERT_ITEM_REPLACED', item)
+      return state.revokedCertItemCache[id]
+    }).catch((err) => {
+      commit('REVOKED_CERT_ERROR', err.response)
+      throw err
+    })
+  }
+}
+
+export const mutations = {
+  REVOKED_CERT_REQUEST: (state, type) => {
+    state.revokedCertStatus = type || types.LOADING
+    state.revokedCertMessage = ''
+  },
+  REVOKED_CERT_LIST_RESET: (state) => {
+    state.revokedCertListCache = false
+  },
+  REVOKED_CERT_LIST_REPLACED: (state, items) => {
+    state.revokedCertStatus = types.SUCCESS
+    state.revokedCertListCache = items
+  },
+  REVOKED_CERT_ITEM_REPLACED: (state, data) => {
+    state.revokedCertStatus = types.SUCCESS
+    Vue.set(state.revokedCertItemCache, data.ID, data)
+  },
+  REVOKED_CERT_ERROR: (state, response) => {
+    state.revokedCertStatus = types.ERROR
+    if (response && response.data) {
+      state.revokedCertMessage = response.data.message
+    }
+  }
+}

From a4c964a6ebb12e1a61bf010d090146c5bceb6136 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 9 Jun 2021 17:56:19 -0400
Subject: [PATCH 25/72] cleanup

---
 .../pki/cas/_components/TheSearch.vue         |  81 -------------
 .../pki/certs/_components/TheSearch.vue       | 109 ------------------
 .../pki/profiles/_components/TheSearch.vue    |  81 -------------
 .../revokedCerts/_components/TheSearch.vue    |  78 -------------
 4 files changed, 349 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
index cc14ff0c3678..331d96ed296d 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
@@ -177,84 +177,3 @@ export default {
   setup
 }
 </script>
-
-
-<!--
-<template>
-  <b-card no-body>
-    <pf-config-list
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">{{ $t('Certificate Authorities') }}</h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newPkiCa' }" :disabled="!isServiceAlive">{{ $t('New Certificate Authority') }}</b-button>
-        <pf-button-service service="pfpki" class="ml-1" restart start stop :disabled="isLoading"></pf-button-service>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No certificate authorities found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right">
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-          <b-button size="sm" variant="outline-primary" class="mr-1 text-nowrap" @click.stop.prevent="clipboard(item)">{{ $t('Copy Certificate') }}</b-button>
-          <b-button size="sm" variant="outline-primary" class="mr-1 text-nowrap" :to="{ name: 'newPkiProfile', params: { ca_id: item.ID } }">{{ $t('New Template') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonService from '@/components/pfButtonService'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import {
-  config
-} from '../_config/pki/ca'
-
-export default {
-  name: 'pki-cas-list',
-  components: {
-    pfButtonService,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_pkis/isLoading']
-    },
-    isServiceAlive () {
-      const { $store: { state: { services: { cache: { pfpki = {} } = {} } = {} } = {} } = {} } = this
-      return pfpki.alive
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'clonePkiCa', params: { id: item.ID } })
-    },
-    clipboard (item) {
-      this.$store.dispatch('$_pkis/getCa', item.ID).then(ca => {
-        try {
-          navigator.clipboard.writeText(ca.cert).then(() => {
-            this.$store.dispatch('notification/info', { message: this.$i18n.t('<code>{cn}</code> certificate copied to clipboard', ca) })
-          }).catch(() => {
-            this.$store.dispatch('notification/danger', { message: this.$i18n.t('Could not copy <code>{cn}</code> certificate to clipboard.', ca) })
-          })
-        } catch (e) {
-          this.$store.dispatch('notification/danger', { message: this.$i18n.t('Clipboard not supported.') })
-        }
-      })
-    }
-  }
-}
-</script>
--->
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
index d4f7af51a551..be38516c7aa8 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
@@ -185,112 +185,3 @@ export default {
   setup
 }
 </script>
-
-<!--
-<template>
-  <b-card no-body>
-    <pf-config-list
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">{{ $t('Certificates') }}</h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-dropdown :text="$t('New Certificate')" variant="outline-primary" :disabled="profiles.length === 0">
-          <b-dropdown-header>{{ $t('Choose Certificate Authority - Template') }}</b-dropdown-header>
-          <b-dropdown-item v-for="profile in sortedProfiles" :key="profile.ID" :to="{ name: 'newPkiCert', params: { profile_id: profile.ID } }">{{ profile.ca_name }} - {{ profile.name }}</b-dropdown-item>
-        </b-dropdown>
-        <pf-button-service service="pfpki" class="ml-1" restart start stop :disabled="isLoading" @start="init" @restart="init"></pf-button-service>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No certificates found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(ca_name)="item">
-        <router-link :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
-      </template>
-      <template v-slot:cell(profile_name)="item">
-        <router-link :to="{ name: 'pkiProfile', params: { id: item.profile_id } }">{{ item.profile_name }}</router-link>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right">
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-          <button-certificate-download :id="item.ID" />
-          <b-button v-if="item.mail" size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="email(item)">{{ $t('Email') }}</b-button>
-          <button-certificate-revoke :id="item.ID" />
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import {
-  ButtonCertificateDownload,
-  ButtonCertificateRevoke
-} from '@/views/Configuration/pki/certs/_components/'
-import pfButtonService from '@/components/pfButtonService'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import {
-  config,
-  revoke,
-  download
-} from '../_config/pki/cert'
-
-export default {
-  name: 'pki-certs-list',
-  components: {
-    ButtonCertificateDownload,
-    ButtonCertificateRevoke,
-    pfButtonService,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this),
-      revoke, // ../_config/pki/cert
-      download // ../_config/pki/cert
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_pkis/isCertLoading']
-    },
-    profiles () {
-      return this.$store.getters['$_pkis/profiles'] || []
-    },
-    sortedProfiles () {
-      return Array.prototype.slice.call(this.profiles).sort((a, b) => {
-        return (a.ca_name === b.ca_name)
-          ? a.name.localeCompare(b.name)
-          : a.ca_name.localeCompare(b.ca_name)
-      }) // sort profiles by 'name'
-    }
-  },
-  methods: {
-    init () {
-      this.$store.dispatch('$_pkis/allProfiles')
-    },
-    clone (item) {
-      this.$router.push({ name: 'clonePkiCert', params: { id: item.ID } })
-    },
-    email (item) {
-      const { ID, mail } = item
-      if (mail) {
-        this.$store.dispatch('$_pkis/emailCert', ID).then(() => {
-          this.$store.dispatch('notification/info', { message: this.$i18n.t('Certificate <code>{cn}</code> emailed to <code>{mail}</code>.', item) })
-        }).catch(e => {
-          this.$store.dispatch('notification/danger', { message: this.$i18n.t('Could not email certificate <code>{cn}</code> to <code>{mail}</code>: ', item) + e })
-        })
-      }
-    }
-  },
-  created () {
-    this.init()
-  }
-}
-</script>
--->
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
index 1df86f8a7ea0..710cdc371644 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
@@ -171,84 +171,3 @@ export default {
   setup
 }
 </script>
-
-<!--
-
-<template>
-  <b-card no-body>
-    <pf-config-list
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">{{ $t('Templates') }}</h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-dropdown :text="$t('New Template')" variant="outline-primary" :disabled="cas.length === 0">
-          <b-dropdown-header>{{ $t('Choose Certificate Authority') }}</b-dropdown-header>
-          <b-dropdown-item v-for="ca in sortedCas" :key="ca.ID" :to="{ name: 'newPkiProfile', params: { ca_id: ca.ID } }">{{ ca.cn }}</b-dropdown-item>
-        </b-dropdown>
-        <pf-button-service service="pfpki" class="ml-1" restart start stop :disabled="isLoading" @start="init" @restart="init"></pf-button-service>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No profiles found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(ca_name)="item">
-        <router-link :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right">
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-          <b-button size="sm" variant="outline-primary" class="mr-1 text-nowrap" :to="{ name: 'newPkiCert', params: { profile_id: item.ID } }">{{ $t('New Certificate') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonService from '@/components/pfButtonService'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import {
-  config
-} from '../_config/pki/profile'
-
-export default {
-  name: 'pki-profiles-list',
-  components: {
-    pfButtonService,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    cas () {
-      return this.$store.getters['$_pkis/cas'] || []
-    },
-    sortedCas () {
-      return Array.prototype.slice.call(this.cas).sort((a, b) => a.cn.localeCompare(b.cn)) // sort cas by 'cn'
-    },
-    isLoading () {
-      return this.$store.getters['$_pkis/isLoading']
-    }
-  },
-  methods: {
-    init () {
-      this.$store.dispatch('$_pkis/allCas')
-    },
-    clone (item) {
-      this.$router.push({ name: 'clonePkiProfile', params: { id: item.ID } })
-    }
-  },
-  created () {
-    this.init()
-  }
-}
-</script>
--->
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
index 94664b9f465d..6c383491fff2 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
@@ -148,81 +148,3 @@ export default {
   setup
 }
 </script>
-
-<!--
-<template>
-  <b-card no-body>
-    <pf-config-list
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">{{ $t('Revoked Certificates') }}</h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <pf-button-service service="pfpki" class="ml-1" restart start stop :disabled="isLoading" @start="init" @restart="init"></pf-button-service>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No revoked certificates found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(ca_name)="item">
-        <router-link :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
-      </template>
-      <template v-slot:cell(profile_name)="item">
-        <router-link :to="{ name: 'pkiProfile', params: { id: item.profile_id } }">{{ item.profile_name }}</router-link>
-      </template>
-      <template v-slot:cell(crl_reason)="item">
-        {{ revokeReasons.find(reason => ~~reason.value === ~~item.crl_reason).text }}
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonService from '@/components/pfButtonService'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import {
-  config
-} from '../_config/pki/revokedCert'
-import {
-  revokeReasons
-} from '../_config/pki/'
-
-export default {
-  name: 'pki-revoked-certs-list',
-  components: {
-    pfButtonService,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this),
-      revokeReasons,
-      profiles: []
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_pkis/isRevokedCertLoading']
-    }
-  },
-  methods: {
-    init () {
-      this.$store.dispatch('$_pkis/allProfiles').then(profiles => {
-        this.profiles = (profiles || []).sort((a, b) => { // sort profiles
-          return (a.ca_name === b.ca_name)
-            ? a.name.localeCompare(b.name)
-            : a.ca_name.localeCompare(b.ca_name)
-        })
-      })
-    }
-  },
-  created () {
-    this.init()
-  }
-}
-</script>
--->
\ No newline at end of file

From 49ba3ef884f6e4b71f6747c848d236544cec9f58 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 10 Jun 2021 10:13:08 -0400
Subject: [PATCH 26/72] improve CSV export

---
 .../root/src/composables/useCsv.js            | 43 +++++++++----------
 .../pki/cas/_components/TheSearch.vue         |  2 +-
 .../pki/certs/_components/TheSearch.vue       | 12 +++---
 .../pki/profiles/_components/TheSearch.vue    |  2 +-
 .../revokedCerts/_components/TheSearch.vue    |  7 +--
 .../_composables/useCollection.js             |  9 +++-
 6 files changed, 36 insertions(+), 39 deletions(-)

diff --git a/html/pfappserver/root/src/composables/useCsv.js b/html/pfappserver/root/src/composables/useCsv.js
index a560ea83b99f..566b04e676ba 100644
--- a/html/pfappserver/root/src/composables/useCsv.js
+++ b/html/pfappserver/root/src/composables/useCsv.js
@@ -1,30 +1,27 @@
 export const useTableColumnsItems = (columns, items) => {
   const formatters = columns.reduce((formatters, column) => {
-    return (column.formatter)
-      ? { ...formatters, [column.key]: column.formatter }
-      : formatters
+    if (column.formatter) {
+      formatters[column.key] = column.formatter
+    }
+    return formatters
   }, {})
-  const header = columns
-    .filter(column => !column.locked) // omit `selected` and `buttons`
-    .map(column => column.key)
-  let keyMap = {} // build map to sort data same as header
-  Object.keys(items[0]).forEach(key => {
-    const idx = header.findIndex(column => column === key)
-    if (idx >= 0)
-      keyMap[key] = idx
-  })
+  const header = columns.reduce((header, column) => {
+    if (!column.locked) {
+      if (column.key in formatters)
+        header.push(`$${column.key}`) // `unformatted` column
+      header.push(column.key) // `formatted` column
+      }
+    return header
+  }, [])
   const body = items.map(row => {
-    return Object.entries(row)
-      .filter(col => header.includes(col[0])).sort((a, b) => {
-        return keyMap[a[0]] - keyMap[b[0]]
-      })
-      .map(_row => {
-        const [ key, value ] = _row
-        if (key in formatters) {
-          return formatters[key](value, key, row) || ''
-        }
-        return value || ''
-      })
+    return header.map(key => {
+      if (key.charAt(0) === '$' && key.slice(1) in formatters) // unformatted
+        return row[key.slice(1)] || ''
+      const value = row[key]
+      if (key in formatters)
+        return formatters[key](value, key, row) || ''
+      return value || ''
+    })
   })
   let csvContentArray = []
   const rows = [ header, ...body ]
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
index 331d96ed296d..e08a9528529c 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
@@ -132,7 +132,7 @@ const setup = (props, context) => {
   const router = useRouter($router)
 
   const tableRef = ref(null)
-  const selected = useBootstrapTableSelected(tableRef, items)
+  const selected = useBootstrapTableSelected(tableRef, items, 'ID')
   const {
     selectedItems
   } = selected
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
index be38516c7aa8..691b61a699b0 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
@@ -64,14 +64,14 @@
           />
         </template>
         <template #cell(buttons)="{ item }">
-          <span class="float-right text-nowrap text-right">
+          <span class="float-right text-right">
             <b-button
-              size="sm" variant="outline-primary" class="mr-1"
+              size="sm" variant="outline-primary" class="my-1 mr-1"
               @click.stop.prevent="goToClone({ id: item.ID, ...item })"
             >{{ $t('Clone') }}</b-button>
-            <button-certificate-download :id="item.ID" class="mr-1" />
-            <button-certificate-email :id="item.ID" class="mr-1" />
-            <button-certificate-revoke :id="item.ID" class="mr-1" @change="reSearch" />
+            <button-certificate-download :id="item.ID" class="my-1 mr-1" />
+            <button-certificate-email :id="item.ID" class="my-1 mr-1" />
+            <button-certificate-revoke :id="item.ID" class="my-1 mr-1" @change="reSearch" />
           </span>
         </template>
         <template #cell(ca_name)="{ item }">
@@ -153,7 +153,7 @@ const setup = (props, context) => {
   const router = useRouter($router)
 
   const tableRef = ref(null)
-  const selected = useBootstrapTableSelected(tableRef, items)
+  const selected = useBootstrapTableSelected(tableRef, items, 'ID')
   const {
     selectedItems
   } = selected
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
index 710cdc371644..2e60d6e9059a 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
@@ -139,7 +139,7 @@ const setup = (props, context) => {
   const router = useRouter($router)
 
   const tableRef = ref(null)
-  const selected = useBootstrapTableSelected(tableRef, items)
+  const selected = useBootstrapTableSelected(tableRef, items, 'ID')
   const {
     selectedItems
   } = selected
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
index 6c383491fff2..3a168f621c5f 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
@@ -65,9 +65,6 @@
         <template #cell(profile_name)="{ item }">
           <router-link :to="{ name: 'pkiProfile', params: { id: item.profile_id } }">{{ item.profile_name }}</router-link>
         </template>
-        <template #cell(crl_reason)="{ item }">
-          {{ revokeReasons.find(reason => ~~reason.value === ~~item.crl_reason).text }}
-        </template>
       </b-table>
       <b-container fluid v-if="selected.length"
         class="mt-3 p-0">
@@ -103,7 +100,6 @@ import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
 import { useSearch, useRouter } from '../_composables/useCollection'
-import { revokeReasons } from '../../config'
 
 const setup = (props, context) => {
 
@@ -118,7 +114,7 @@ const setup = (props, context) => {
   const router = useRouter($router)
 
   const tableRef = ref(null)
-  const selected = useBootstrapTableSelected(tableRef, items)
+  const selected = useBootstrapTableSelected(tableRef, items, 'ID')
   const {
     selectedItems
   } = selected
@@ -133,7 +129,6 @@ const setup = (props, context) => {
     useSearch,
     tableRef,
     onBulkExport,
-    revokeReasons,
     ...router,
     ...selected,
     ...toRefs(search)
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
index ddbe6b82a75a..8d923f67c4d1 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
@@ -31,6 +31,7 @@ export const useStore = (props, context) => {
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
 import api from '../_api'
+import { revokeReasons } from '../../config'
 export const useSearch = makeSearch('pkiRevokedCerts', {
   api,
   columns: [
@@ -93,11 +94,15 @@ export const useSearch = makeSearch('pkiRevokedCerts', {
       key: 'crl_reason',
       label: 'Reason', // i18n defer
       sortable: true,
-      visible: true
+      visible: true,
+      formatter: value => {
+        const reason = revokeReasons.find(reason => reason.value === value.toString())
+        return reason.text || ''
+      }
     },
     {
       key: 'buttons',
-      class: 'text-right p-0',
+      thStyle: 'width: 40px;', class: 'text-right p-0',
       locked: true
     }
   ],

From 3076487e78e3658ecfc9a1a8c24372dc3ce102d6 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Fri, 11 Jun 2021 09:45:22 -0400
Subject: [PATCH 27/72] improve pki service control

---
 .../root/src/components/new/BaseSearch.vue    | 15 ++++---
 .../new/BaseSearchInputAdvanced.vue           | 22 +++++++---
 .../new/BaseSearchInputAdvancedRule.vue       | 19 +++++---
 .../components/new/BaseSearchInputColumns.vue |  3 +-
 .../src/components/new/BaseTableEmpty.vue     |  8 ++--
 .../src/views/Configuration/pki/cas/_api.js   |  4 +-
 .../pki/cas/_components/TheSearch.vue         | 34 +++++++++++----
 .../src/views/Configuration/pki/certs/_api.js |  4 +-
 .../_components/ButtonCertificateDownload.vue |  5 ++-
 .../_components/ButtonCertificateEmail.vue    |  5 ++-
 .../_components/ButtonCertificateRevoke.vue   |  5 ++-
 .../pki/certs/_components/TheSearch.vue       | 43 +++++++++++++------
 .../views/Configuration/pki/profiles/_api.js  |  4 +-
 .../pki/profiles/_components/TheSearch.vue    | 35 ++++++++++-----
 .../Configuration/pki/revokedCerts/_api.js    |  4 +-
 .../revokedCerts/_components/TheSearch.vue    | 41 +++++++++++++-----
 16 files changed, 173 insertions(+), 78 deletions(-)

diff --git a/html/pfappserver/root/src/components/new/BaseSearch.vue b/html/pfappserver/root/src/components/new/BaseSearch.vue
index 1a48a0e0db83..0e10803ec370 100644
--- a/html/pfappserver/root/src/components/new/BaseSearch.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearch.vue
@@ -5,18 +5,18 @@
         <b-form @submit.prevent="onSearchAdvanced" @reset.prevent="onSearchReset">
           <base-search-input-advanced
             v-model="conditionAdvanced"
-            :disabled="isLoading"
+            :disabled="disabled || isLoading"
             :fields="fields"
             @reset="onSearchReset"
             @search="onSearchAdvanced"
           />
           <b-container fluid class="text-right mt-3 px-0">
-            <b-button class="ml-1" type="reset" variant="secondary" :disabled="isLoading">{{ $t('Reset') }}</b-button>
+            <b-button class="ml-1" type="reset" variant="secondary" :disabled="disabled || isLoading">{{ $t('Reset') }}</b-button>
             <base-button-save-search
               :save-search-namespace="`${uuid}Advanced`"
               class="ml-1"
               v-model="conditionAdvanced"
-              :disabled="isLoading"
+              :disabled="disabled || isLoading"
               @search="onSearchAdvanced"
             />
             <b-button class="ml-1" variant="outline-primary" @click="advancedMode = false"
@@ -30,7 +30,7 @@
         <base-search-input-basic class="flex-grow-1"
           :save-search-namespace="`${uuid}Basic`"
           v-model="conditionBasic"
-          :disabled="isLoading"
+          :disabled="disabled || isLoading"
           :placeholder="placeholderBasic"
           @reset="onSearchReset"
           @search="onSearchBasic"
@@ -50,14 +50,14 @@
           :value="limit" @input="setLimit"
           size="md"
           :limits="limits"
-          :disabled="isLoading"
+          :disabled="disabled || isLoading"
         />
         <base-search-input-page
           :value="page" @input="setPage"
           class="ml-3"
           :limit="limit"
           :total-rows="totalRows"
-          :disabled="isLoading"
+          :disabled="disabled || isLoading"
         />
       </b-col>
     </b-row>
@@ -85,6 +85,9 @@ const components = {
 const props = {
   useSearch: {
     type: Function
+  },
+  disabled: {
+    type: Boolean
   }
 }
 
diff --git a/html/pfappserver/root/src/components/new/BaseSearchInputAdvanced.vue b/html/pfappserver/root/src/components/new/BaseSearchInputAdvanced.vue
index 36673123a521..8e08bed9c648 100644
--- a/html/pfappserver/root/src/components/new/BaseSearchInputAdvanced.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearchInputAdvanced.vue
@@ -5,11 +5,12 @@
     >
       <b-container fluid class="rc px-0 py-1 bg-secondary">
         <draggable v-model="value[oIndex].values"
-          group="or" handle=".draghandle" filter=".nodrag" dragClass="sortable-drag" 
-          @start="onDragStart" @end="onDragEnd"
+          group="or" handle=".draghandle" filter=".nodrag" dragClass="sortable-drag"
+          @start="onDragStart" @end="onDragEnd" :move="onMove"
         >
           <base-search-input-advanced-rule v-for="(i, iIndex) in value[oIndex].values" :key="iIndex"
             v-model="value[oIndex].values[iIndex]"
+            :disabled="disabled"
             :fields="fields"
             :is-drag="isDrag"
             :has-parents="value.length > 1"
@@ -30,7 +31,10 @@
     <b-row class="mx-auto">
       <b-col cols="12" class="bg-secondary rc">
         <b-container class="mx-0 px-1 py-1">
-          <a href="javascript:void(0)" class="text-nowrap text-white" @click="onAddOuterRule">{{ $t('Add "and" statement') }}</a>
+          <span v-if="disabled"
+            class="text-nowrap text-white">{{ $t('Add "and" statement') }}</span>
+          <a v-else
+            href="javascript:void(0)" class="text-nowrap text-white" @click="onAddOuterRule">{{ $t('Add "and" statement') }}</a>
         </b-container>
       </b-col>
     </b-row>
@@ -63,7 +67,8 @@ const setup = (props, context) => {
 
   const {
     fields,
-    value
+    value,
+    disabled
   } = toRefs(props)
 
   const { emit } = context
@@ -79,6 +84,10 @@ const setup = (props, context) => {
         value.value.splice(i, 1)
     }
   }
+  const onMove = () => {
+    if (disabled.value)
+      return false
+  }
 
   const onAddInnerRule = (oIndex) => {
     let field = fields.value[0].value
@@ -89,7 +98,7 @@ const setup = (props, context) => {
       field = value.value[oIndex].values[lIndex].field
       op = value.value[oIndex].values[lIndex].op
     }
-    value.value[oIndex].values.push({ field, op, value: null })    
+    value.value[oIndex].values.push({ field, op, value: null })
   }
 
   const onAddOuterRule = () => {
@@ -109,10 +118,11 @@ const setup = (props, context) => {
       value.value[oIndex].values.splice(iIndex, 1)
   }
 
-  return { 
+  return {
     isDrag,
     onDragStart,
     onDragEnd,
+    onMove,
     onAddInnerRule,
     onAddOuterRule,
     onDeleteRule
diff --git a/html/pfappserver/root/src/components/new/BaseSearchInputAdvancedRule.vue b/html/pfappserver/root/src/components/new/BaseSearchInputAdvancedRule.vue
index fa40df380f80..e6f597740e2b 100644
--- a/html/pfappserver/root/src/components/new/BaseSearchInputAdvancedRule.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearchInputAdvancedRule.vue
@@ -13,8 +13,8 @@
             <icon name="th" />
           </span>
         </b-input-group-prepend>
-        <b-form-select v-model="value.field" :options="fieldOptions" />
-        <b-form-select class="mr-1" v-model="value.op" :options="operatorOptions" />
+        <b-form-select v-model="value.field" :disabled="disabled" :options="fieldOptions" />
+        <b-form-select class="mr-1" v-model="value.op" :disabled="disabled" :options="operatorOptions" />
         <component :is="valueComponentIs"
           v-bind="valueComponentProps"
           v-model="value.value"
@@ -22,7 +22,7 @@
         <b-input-group-append v-if="hasParents || (hasSiblings && !isDrag)">
           <b-button
             class="ml-auto nodrag" variant="link"
-            v-b-tooltip.hover.left.d300 :title="$t('Delete statement')"
+            v-b-tooltip.hover.left.d300 :disabled="disabled" :title="$t('Delete statement')"
             @click="onDeleteRule">
             <icon name="trash-alt" />
           </b-button>
@@ -39,7 +39,10 @@
       class="mx-auto nodrag">
       <b-col cols="12" class="bg-white rc">
         <b-container class="mx-0 px-1 py-1">
-          <a href="javascript:void(0)" class="text-nowrap" @click="onAddRule">{{ $t('Add "or" statement') }}</a>
+          <span v-if="disabled"
+            class="text-nowrap">{{ $t('Add "or" statement') }}</span>
+          <a v-else
+            href="javascript:void(0)" class="text-nowrap" @click="onAddRule">{{ $t('Add "or" statement') }}</a>
         </b-container>
       </b-col>
     </b-row>
@@ -73,6 +76,9 @@ const props = {
   },
   fields: {
     type: Array
+  },
+  disabled: {
+    type: Boolean
   }
 }
 
@@ -87,6 +93,7 @@ import i18n from '@/utils/locale'
 
 const setup = (props, context) => {
   const {
+    disabled,
     fields,
     value
   } = toRefs(props)
@@ -159,9 +166,9 @@ const setup = (props, context) => {
       const options = pfSearchValuesForOperator(types, value.value.op, $store) || []
       if (options.length && options.findIndex(v => v.value === value.value.value) < 0)
         value.value.value = options[0].value // select the first valid option
-      return { options }
+      return { disabled, options }
     }
-    return {}
+    return { disabled }
   })
 
   const onAddRule = () => emit('add')
diff --git a/html/pfappserver/root/src/components/new/BaseSearchInputColumns.vue b/html/pfappserver/root/src/components/new/BaseSearchInputColumns.vue
index 39d68c836c69..c8e5ffda2084 100644
--- a/html/pfappserver/root/src/components/new/BaseSearchInputColumns.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearchInputColumns.vue
@@ -1,5 +1,6 @@
 <template>
   <b-dropdown size="sm" variant="link" no-caret right
+    :disabled="disabled"
     @hidden="onCommit"
   >
     <template v-slot:button-content>
@@ -15,7 +16,7 @@
         </b-dropdown-item>
         <a v-else
           href="javascript:void(0)" class="dropdown-item"
-          :disabled="disabled || column.locked" :key="column.key"
+          :key="column.key"
           @click.stop="onToggle(column)"
         >
           <icon class="position-absolute mt-1" name="check" v-show="column.visible"></icon>
diff --git a/html/pfappserver/root/src/components/new/BaseTableEmpty.vue b/html/pfappserver/root/src/components/new/BaseTableEmpty.vue
index ea700fe468cd..ec234bfaa816 100644
--- a/html/pfappserver/root/src/components/new/BaseTableEmpty.vue
+++ b/html/pfappserver/root/src/components/new/BaseTableEmpty.vue
@@ -32,14 +32,14 @@ import i18n from '@/utils/locale'
 
 const setup = (props) => {
   const {
-    text        
+    text
   } = toRefs(props)
-  
-  const subText = computed(() => ((text.value !== null)
+
+  const subText = computed(() => ((text.value)
     ? text.value
     : i18n.t('Please refine your search.')
   ))
-  
+
   return {
     subText
   }
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_api.js b/html/pfappserver/root/src/views/Configuration/pki/cas/_api.js
index ebc9f98eadd7..1258577e05f1 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_api.js
@@ -2,13 +2,13 @@ import apiCall from '@/utils/api'
 
 export default {
   list: params => {
-    return apiCall.get('pki/cas', { params }).then(response => {
+    return apiCall.getQuiet('pki/cas', { params }).then(response => {
       const { data: { items = [] } = {} } = response
       return { items }
     })
   },
   search: params => {
-    return apiCall.post('pki/cas/search', params).then(response => {
+    return apiCall.postQuiet('pki/cas/search', params).then(response => {
       return response.data
     })
   },
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
index e08a9528529c..1ce4384c4485 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
@@ -4,7 +4,7 @@
       <h4 class="mb-0">{{ $t('Certificate Authorities') }}</h4>
     </b-card-header>
     <div class="card-body">
-      <base-search :use-search="useSearch">
+      <base-search :use-search="useSearch" :disabled="!isServiceAlive">
         <b-button :disabled="isLoading || !isServiceAlive"
           variant="outline-primary" @click="goToNew">{{ $t('New Certificate Authority') }}</b-button>
         <base-button-service
@@ -12,7 +12,7 @@
           class="ml-1" />
       </base-search>
       <b-table ref="tableRef"
-        :busy="isLoading"
+        :busy="isLoading || !isServiceAlive"
         :hover="items.length > 0"
         :items="items"
         :fields="visibleColumns"
@@ -23,6 +23,7 @@
         class="mb-0"
         show-empty
         no-local-sorting
+        no-sort-reset
         sort-icon-left
         fixed
         striped
@@ -31,7 +32,13 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty v-if="isServiceAlive"
+              :is-loading="isLoading"
+            >{{ $i18n.t('No results found') }}</base-table-empty>
+            <base-table-empty v-else
+              :is-loading="isLoading"
+              :text="$t('Start the pfpki service.')"
+            >{{ $i18n.t('Service not running') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -56,7 +63,7 @@
         </template>
         <template #head(buttons)>
           <base-search-input-columns
-            :disabled="isLoading"
+            :disabled="!isServiceAlive || isLoading"
             :value="columns"
             @input="setColumns"
           />
@@ -65,15 +72,17 @@
           <span class="float-right text-nowrap text-right">
             <b-button
               size="sm" variant="outline-primary" class="mr-1"
+              :disabled="!isServiceAlive"
               @click.stop.prevent="goToClone({ id: item.ID, ...item })"
             >{{ $t('Clone') }}</b-button>
             <b-button
               size="sm" variant="outline-primary" class="mr-1 text-nowrap"
+              :disabled="!isServiceAlive"
               @click.stop.prevent="onClipboard(item)"
             >{{ $t('Copy Certificate') }}</b-button>
             <b-button
               size="sm" variant="outline-primary" class="mr-1 text-nowrap"
-              :to="{ name: 'newPkiProfile', params: { ca_id: item.ID } }"
+              :disabled="!isServiceAlive" :to="{ name: 'newPkiProfile', params: { ca_id: item.ID } }"
             >{{ $t('New Template') }}</b-button>
           </span>
         </template>
@@ -95,19 +104,19 @@ import {
   BaseButtonConfirm,
   BaseButtonService,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonService,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
-import { computed, ref, toRefs } from '@vue/composition-api'
+import { computed, ref, toRefs, watch } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
@@ -117,6 +126,9 @@ import i18n from '@/utils/locale'
 const setup = (props, context) => {
 
   const search = useSearch()
+  const {
+    reSearch
+  } = search
   const {
     items,
     visibleColumns
@@ -128,6 +140,10 @@ const setup = (props, context) => {
     const { state: { services: { cache: { pfpki: { alive } = {} } = {} } = {} } = {} } = $store
     return alive
   })
+  watch(isServiceAlive, () => {
+    if (isServiceAlive.value)
+      reSearch()
+  })
 
   const router = useRouter($router)
 
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_api.js b/html/pfappserver/root/src/views/Configuration/pki/certs/_api.js
index 408fae8bf466..bf71816862ef 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_api.js
@@ -2,13 +2,13 @@ import apiCall from '@/utils/api'
 
 export default {
   list: params => {
-    return apiCall.get('pki/certs', { params }).then(response => {
+    return apiCall.getQuiet('pki/certs', { params }).then(response => {
       const { data: { items = [] } = {} } = response
       return { items }
     })
   },
   search: params => {
-    return apiCall.post('pki/certs/search', params).then(response => {
+    return apiCall.postQuiet('pki/certs/search', params).then(response => {
       return response.data
     })
   },
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateDownload.vue b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateDownload.vue
index b300f981adbe..2fce2f774d18 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateDownload.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateDownload.vue
@@ -1,6 +1,6 @@
 <template>
   <b-button-group v-if="!isClone && !isNew">
-    <b-button size="sm" variant="outline-primary" :disabled="isLoading" @click="onShowModal">{{ $t('Download') }}</b-button>
+    <b-button size="sm" variant="outline-primary" :disabled="disabled || isLoading" @click="onShowModal">{{ $t('Download') }}</b-button>
     <b-modal v-model="isShowModal"
       size="lg" centered cancel-disabled>
       <template v-slot:modal-title>
@@ -54,6 +54,9 @@ const props = {
   },
   isNew: {
     type: Boolean
+  },
+  disabled: {
+    type: Boolean
   }
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateEmail.vue b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateEmail.vue
index 8da5c2a06def..7bd233bb5f50 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateEmail.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateEmail.vue
@@ -1,6 +1,6 @@
 <template>
   <b-button v-if="!isClone && !isNew"
-    size="sm" variant="outline-primary" :disabled="isLoading" @click.stop.prevent="onEmail">{{ $t('Email') }}</b-button>
+    size="sm" variant="outline-primary" :disabled="disabled || isLoading" @click.stop.prevent="onEmail">{{ $t('Email') }}</b-button>
 </template>
 <script>
 import {
@@ -22,6 +22,9 @@ const props = {
   },
   isNew: {
     type: Boolean
+  },
+  disabled: {
+    type: Boolean
   }
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateRevoke.vue b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateRevoke.vue
index 6790e66e948a..7505635d8747 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateRevoke.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/ButtonCertificateRevoke.vue
@@ -1,6 +1,6 @@
 <template>
   <b-button-group v-if="!isClone && !isNew">
-    <b-button size="sm" variant="outline-danger" :disabled="isLoading" @click.stop.prevent="onShowModal">{{ $t('Revoke') }}</b-button>
+    <b-button size="sm" variant="outline-danger" :disabled="disabled || isLoading" @click.stop.prevent="onShowModal">{{ $t('Revoke') }}</b-button>
     <b-modal v-model="isShowModal"
       size="lg" centered cancel-disabled>
       <template v-slot:modal-title>
@@ -49,6 +49,9 @@ const props = {
   },
   isNew: {
     type: Boolean
+  },
+  disabled: {
+    type: Boolean
   }
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
index 691b61a699b0..8d3c271d638d 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
@@ -4,7 +4,7 @@
       <h4 class="mb-0">{{ $t('Certificates') }}</h4>
     </b-card-header>
     <div class="card-body">
-      <base-search :use-search="useSearch">
+      <base-search :use-search="useSearch" :disabled="!isServiceAlive">
         <b-dropdown :text="$t('New Certificate')" variant="outline-primary" :disabled="!isServiceAlive || profiles.length === 0">
           <b-dropdown-header>{{ $t('Choose Certificate Authority - Template') }}</b-dropdown-header>
           <b-dropdown-item v-for="profile in profilesSorted" :key="profile.ID" :to="{ name: 'newPkiCert', params: { profile_id: profile.ID } }">{{ profile.ca_name }} - {{ profile.name }}</b-dropdown-item>
@@ -14,7 +14,7 @@
           class="ml-1" />
       </base-search>
       <b-table ref="tableRef"
-        :busy="isLoading"
+        :busy="isLoading || !isServiceAlive"
         :hover="items.length > 0"
         :items="items"
         :fields="visibleColumns"
@@ -25,6 +25,7 @@
         class="mb-0"
         show-empty
         no-local-sorting
+        no-sort-reset
         sort-icon-left
         fixed
         striped
@@ -33,7 +34,13 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty v-if="isServiceAlive"
+              :is-loading="isLoading"
+            >{{ $i18n.t('No results found') }}</base-table-empty>
+            <base-table-empty v-else
+              :is-loading="isLoading"
+              :text="$t('Start the pfpki service.')"
+            >{{ $i18n.t('Service not running') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -58,7 +65,7 @@
         </template>
         <template #head(buttons)>
           <base-search-input-columns
-            :disabled="isLoading"
+            :disabled="!isServiceAlive || isLoading"
             :value="columns"
             @input="setColumns"
           />
@@ -67,18 +74,19 @@
           <span class="float-right text-right">
             <b-button
               size="sm" variant="outline-primary" class="my-1 mr-1"
+              :disabled="!isServiceAlive"
               @click.stop.prevent="goToClone({ id: item.ID, ...item })"
             >{{ $t('Clone') }}</b-button>
-            <button-certificate-download :id="item.ID" class="my-1 mr-1" />
-            <button-certificate-email :id="item.ID" class="my-1 mr-1" />
-            <button-certificate-revoke :id="item.ID" class="my-1 mr-1" @change="reSearch" />
+            <button-certificate-download :disabled="!isServiceAlive" :id="item.ID" class="my-1 mr-1" />
+            <button-certificate-email :disabled="!isServiceAlive" :id="item.ID" class="my-1 mr-1" />
+            <button-certificate-revoke :disabled="!isServiceAlive" :id="item.ID" class="my-1 mr-1" @change="reSearch" />
           </span>
         </template>
         <template #cell(ca_name)="{ item }">
-          <router-link :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
+          <router-link :is="(isServiceAlive) ? 'router-link' : 'span'" :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
         </template>
         <template #cell(profile_name)="{ item }">
-          <router-link :to="{ name: 'pkiProfile', params: { id: item.profile_id } }">{{ item.profile_name }}</router-link>
+          <router-link :is="(isServiceAlive) ? 'router-link' : 'span'" :to="{ name: 'pkiProfile', params: { id: item.profile_id } }">{{ item.profile_name }}</router-link>
         </template>
       </b-table>
       <b-container fluid v-if="selected.length"
@@ -98,27 +106,27 @@ import {
   BaseButtonConfirm,
   BaseButtonService,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
 import {
   ButtonCertificateDownload,
   ButtonCertificateEmail,
   ButtonCertificateRevoke
 } from './'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonService,
   BaseSearch,
   BaseSearchInputColumns,
+  BaseTableEmpty,
   ButtonCertificateDownload,
   ButtonCertificateEmail,
-  ButtonCertificateRevoke,
-  pfEmptyTable
+  ButtonCertificateRevoke
 }
 
-import { computed, ref, toRefs } from '@vue/composition-api'
+import { computed, ref, toRefs, watch } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
@@ -127,6 +135,9 @@ import { useSearch, useRouter } from '../_composables/useCollection'
 const setup = (props, context) => {
 
   const search = useSearch()
+  const {
+    reSearch
+  } = search
   const {
     items,
     visibleColumns
@@ -138,6 +149,10 @@ const setup = (props, context) => {
     const { state: { services: { cache: { pfpki: { alive } = {} } = {} } = {} } = {} } = $store
     return alive
   })
+  watch(isServiceAlive, () => {
+    if (isServiceAlive.value)
+      reSearch()
+  })
 
   $store.dispatch('$_pkis/allProfiles')
   const profiles = computed(() => $store.getters['$_pkis/profiles'] || [])
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_api.js b/html/pfappserver/root/src/views/Configuration/pki/profiles/_api.js
index 83d10fb6a337..2f920292c7b4 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_api.js
@@ -2,13 +2,13 @@ import apiCall from '@/utils/api'
 
 export default {
   list: params => {
-    return apiCall.get('pki/profiles', { params }).then(response => {
+    return apiCall.getQuiet('pki/profiles', { params }).then(response => {
       const { data: { items = [] } = {} } = response
       return { items }
     })
   },
   search: params => {
-    return apiCall.post('pki/profiles/search', params).then(response => {
+    return apiCall.postQuiet('pki/profiles/search', params).then(response => {
       return response.data
     })
   },
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
index 2e60d6e9059a..33841bc8ec75 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
@@ -4,7 +4,7 @@
       <h4 class="mb-0">{{ $t('Templates') }}</h4>
     </b-card-header>
     <div class="card-body">
-      <base-search :use-search="useSearch">
+      <base-search :use-search="useSearch" :disabled="!isServiceAlive">
         <b-dropdown :text="$t('New Template')" variant="outline-primary" :disabled="!isServiceAlive || cas.length === 0">
           <b-dropdown-header>{{ $t('Choose Certificate Authority') }}</b-dropdown-header>
           <b-dropdown-item v-for="ca in casSorted" :key="ca.ID" :to="{ name: 'newPkiProfile', params: { ca_id: ca.ID } }">{{ ca.cn }}</b-dropdown-item>
@@ -14,7 +14,7 @@
           class="ml-1" />
       </base-search>
       <b-table ref="tableRef"
-        :busy="isLoading"
+        :busy="isLoading || !isServiceAlive"
         :hover="items.length > 0"
         :items="items"
         :fields="visibleColumns"
@@ -25,6 +25,7 @@
         class="mb-0"
         show-empty
         no-local-sorting
+        no-sort-reset
         sort-icon-left
         fixed
         striped
@@ -33,7 +34,13 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty v-if="isServiceAlive"
+              :is-loading="isLoading"
+            >{{ $i18n.t('No results found') }}</base-table-empty>
+            <base-table-empty v-else
+              :is-loading="isLoading"
+              :text="$t('Start the pfpki service.')"
+            >{{ $i18n.t('Service not running') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -58,7 +65,7 @@
         </template>
         <template #head(buttons)>
           <base-search-input-columns
-            :disabled="isLoading"
+            :disabled="!isServiceAlive || isLoading"
             :value="columns"
             @input="setColumns"
           />
@@ -67,16 +74,17 @@
           <span class="float-right text-nowrap text-right">
             <b-button
               size="sm" variant="outline-primary" class="mr-1"
+              :disabled="!isServiceAlive"
               @click.stop.prevent="goToClone({ id: item.ID, ...item })"
             >{{ $t('Clone') }}</b-button>
             <b-button
               size="sm" variant="outline-primary" class="mr-1 text-nowrap"
-              :to="{ name: 'newPkiCert', params: { profile_id: item.ID } }"
+              :disabled="!isServiceAlive" :to="{ name: 'newPkiCert', params: { profile_id: item.ID } }"
             >{{ $t('New Certificate') }}</b-button>
           </span>
         </template>
         <template #cell(ca_name)="{ item }">
-          <router-link :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
+          <router-link :is="(isServiceAlive) ? 'router-link' : 'span'" :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
         </template>
       </b-table>
       <b-container fluid v-if="selected.length"
@@ -96,19 +104,19 @@ import {
   BaseButtonConfirm,
   BaseButtonService,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonService,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
-import { computed, ref, toRefs } from '@vue/composition-api'
+import { computed, ref, toRefs, watch } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
@@ -117,6 +125,9 @@ import { useSearch, useRouter } from '../_composables/useCollection'
 const setup = (props, context) => {
 
   const search = useSearch()
+  const {
+    reSearch
+  } = search
   const {
     items,
     visibleColumns
@@ -128,6 +139,10 @@ const setup = (props, context) => {
     const { state: { services: { cache: { pfpki: { alive } = {} } = {} } = {} } = {} } = $store
     return alive
   })
+  watch(isServiceAlive, () => {
+    if (isServiceAlive.value)
+      reSearch()
+  })
 
   $store.dispatch('$_pkis/allCas')
   const cas = computed(() => $store.getters['$_pkis/cas'] || [])
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_api.js b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_api.js
index 2fe30ac40a6e..293b318ec6a8 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_api.js
@@ -2,13 +2,13 @@ import apiCall from '@/utils/api'
 
 export default {
   list: params => {
-    return apiCall.get('pki/revokedcerts', { params }).then(response => {
+    return apiCall.getQuiet('pki/revokedcerts', { params }).then(response => {
       const { data: { items = [] } = {} } = response
       return { items }
     })
   },
   search: params => {
-    return apiCall.post('pki/revokedcerts/search', params).then(response => {
+    return apiCall.postQuiet('pki/revokedcerts/search', params).then(response => {
       return response.data
     })
   },
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
index 3a168f621c5f..19f0816173c6 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
@@ -4,13 +4,13 @@
       <h4 class="mb-0">{{ $t('Revoked Certificates') }}</h4>
     </b-card-header>
     <div class="card-body">
-      <base-search :use-search="useSearch">
+      <base-search :use-search="useSearch" :disabled="!isServiceAlive">
         <base-button-service
           service="pfpki" restart start stop
           class="ml-1" />
       </base-search>
       <b-table ref="tableRef"
-        :busy="isLoading"
+        :busy="isLoading || !isServiceAlive"
         :hover="items.length > 0"
         :items="items"
         :fields="visibleColumns"
@@ -29,7 +29,13 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty v-if="isServiceAlive"
+              :is-loading="isLoading"
+            >{{ $i18n.t('No results found') }}</base-table-empty>
+            <base-table-empty v-else
+              :is-loading="isLoading"
+              :text="$t('Start the pfpki service.')"
+            >{{ $i18n.t('Service not running') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -54,16 +60,16 @@
         </template>
         <template #head(buttons)>
           <base-search-input-columns
-            :disabled="isLoading"
+            :disabled="!isServiceAlive || isLoading"
             :value="columns"
             @input="setColumns"
           />
         </template>
         <template #cell(ca_name)="{ item }">
-          <router-link :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
+          <router-link :is="(isServiceAlive) ? 'router-link' : 'span'" :to="{ name: 'pkiCa', params: { id: item.ca_id } }">{{ item.ca_name }}</router-link>
         </template>
         <template #cell(profile_name)="{ item }">
-          <router-link :to="{ name: 'pkiProfile', params: { id: item.profile_id } }">{{ item.profile_name }}</router-link>
+          <router-link :is="(isServiceAlive) ? 'router-link' : 'span'" :to="{ name: 'pkiProfile', params: { id: item.profile_id } }">{{ item.profile_name }}</router-link>
         </template>
       </b-table>
       <b-container fluid v-if="selected.length"
@@ -83,19 +89,19 @@ import {
   BaseButtonConfirm,
   BaseButtonService,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonService,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
-import { ref, toRefs } from '@vue/composition-api'
+import { computed, ref, toRefs, watch } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
@@ -104,12 +110,24 @@ import { useSearch, useRouter } from '../_composables/useCollection'
 const setup = (props, context) => {
 
   const search = useSearch()
+  const {
+    reSearch
+  } = search
   const {
     items,
     visibleColumns
   } = toRefs(search)
 
-  const { root: { $router } = {} } = context
+  const { root: { $store, $router } = {} } = context
+
+  const isServiceAlive = computed(() => {
+    const { state: { services: { cache: { pfpki: { alive } = {} } = {} } = {} } = {} } = $store
+    return alive
+  })
+  watch(isServiceAlive, () => {
+    if (isServiceAlive.value)
+      reSearch()
+  })
 
   const router = useRouter($router)
 
@@ -127,6 +145,7 @@ const setup = (props, context) => {
 
   return {
     useSearch,
+    isServiceAlive,
     tableRef,
     onBulkExport,
     ...router,

From b50d9cce8e393c3c3e0383018df3db069085b1af Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Fri, 11 Jun 2021 09:50:30 -0400
Subject: [PATCH 28/72] allow null items in golang search

---
 .../root/src/views/Configuration/_store/factory/search.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/_store/factory/search.js b/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
index e8c9ffea0882..1434e7f31d6e 100644
--- a/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
+++ b/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
@@ -140,8 +140,8 @@ const factory = (uuid, options = {}) => {
               this.api.list(params)
                 .then(_response => {
                   const response = this.responseInterceptor(_response)
-                  const { items = [], total_count } = response
-                  this.items = items
+                  const { items, total_count } = response
+                  this.items = items || []
                   this.totalRows = total_count
                   this.lastQuery = null
                 })
@@ -192,8 +192,8 @@ const factory = (uuid, options = {}) => {
             this.api.search(body)
               .then(_response => {
                 const response = this.responseInterceptor(_response)
-                const { items = [], total_count } = response
-                this.items = items
+                const { items, total_count } = response
+                this.items = items || []
                 this.totalRows = total_count
                 this.lastQuery = query
               })

From 865629b33af056f3c67734294ed73b9e1eb43160 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Fri, 11 Jun 2021 10:51:21 -0400
Subject: [PATCH 29/72] add advanced search to network behaviour policies

---
 .../root/src/components/new/BaseSearch.vue    |   1 -
 .../new/BaseSearchInputAdvanced.vue           |   1 +
 .../new/BaseSearchInputAdvancedRule.vue       |  64 ++--
 .../NetworkBehaviorPoliciesList.vue           |  87 ------
 .../filterEngines/_components/TheSearch.vue   |   2 +-
 .../networkBehaviorPolicy/_api.js             |  27 +-
 .../_components/TheSearch.vue                 | 288 ++++++++++++++++++
 .../_components/ToggleStatus.js               |  14 +-
 .../_composables/useCollection.js             |  59 ++++
 .../networkBehaviorPolicy/_router.js          |   6 +-
 .../networkBehaviorPolicy/_store.js           |  18 +-
 11 files changed, 418 insertions(+), 149 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/NetworkBehaviorPoliciesList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/components/new/BaseSearch.vue b/html/pfappserver/root/src/components/new/BaseSearch.vue
index 0e10803ec370..3ecf4659843d 100644
--- a/html/pfappserver/root/src/components/new/BaseSearch.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearch.vue
@@ -7,7 +7,6 @@
             v-model="conditionAdvanced"
             :disabled="disabled || isLoading"
             :fields="fields"
-            @reset="onSearchReset"
             @search="onSearchAdvanced"
           />
           <b-container fluid class="text-right mt-3 px-0">
diff --git a/html/pfappserver/root/src/components/new/BaseSearchInputAdvanced.vue b/html/pfappserver/root/src/components/new/BaseSearchInputAdvanced.vue
index 8e08bed9c648..9304263c97c0 100644
--- a/html/pfappserver/root/src/components/new/BaseSearchInputAdvanced.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearchInputAdvanced.vue
@@ -18,6 +18,7 @@
             :is-last-child="iIndex === value[oIndex].values.length - 1"
             @add="onAddInnerRule(oIndex)"
             @delete="onDeleteRule(oIndex, iIndex)"
+            @search="$emit('search', $event)"
           />
         </draggable>
       </b-container>
diff --git a/html/pfappserver/root/src/components/new/BaseSearchInputAdvancedRule.vue b/html/pfappserver/root/src/components/new/BaseSearchInputAdvancedRule.vue
index e6f597740e2b..5d5374821886 100644
--- a/html/pfappserver/root/src/components/new/BaseSearchInputAdvancedRule.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearchInputAdvancedRule.vue
@@ -1,34 +1,36 @@
 <template>
   <b-container fluid class="px-1">
-    <b-row class="bg-white rc align-items-center m-0 p-1 isdrag">
-      <b-input-group class="mr-1">
-        <b-input-group-prepend v-if="icon || hasParents || hasSiblings"
-          class="p-0"
-          is-text>
-          <icon  v-if="icon"
-            :name="icon" />
-          <span v-if="hasParents || hasSiblings"
-            class="draghandle"
-            v-b-tooltip.hover.right.d300 :title="$t('Click & drag statement to reorder')">
-            <icon name="th" />
-          </span>
-        </b-input-group-prepend>
-        <b-form-select v-model="value.field" :disabled="disabled" :options="fieldOptions" />
-        <b-form-select class="mr-1" v-model="value.op" :disabled="disabled" :options="operatorOptions" />
-        <component :is="valueComponentIs"
-          v-bind="valueComponentProps"
-          v-model="value.value"
-        />
-        <b-input-group-append v-if="hasParents || (hasSiblings && !isDrag)">
-          <b-button
-            class="ml-auto nodrag" variant="link"
-            v-b-tooltip.hover.left.d300 :disabled="disabled" :title="$t('Delete statement')"
-            @click="onDeleteRule">
-            <icon name="trash-alt" />
-          </b-button>
-        </b-input-group-append>
-      </b-input-group>
-    </b-row>
+    <b-form @submit.prevent="$emit('search')">
+      <b-row class="bg-white rc align-items-center m-0 p-1 isdrag">
+        <b-input-group class="mr-1">
+          <b-input-group-prepend v-if="icon || hasParents || hasSiblings"
+            class="p-0"
+            is-text>
+            <icon  v-if="icon"
+              :name="icon" />
+            <span v-if="hasParents || hasSiblings"
+              class="draghandle"
+              v-b-tooltip.hover.right.d300 :title="$t('Click & drag statement to reorder')">
+              <icon name="th" />
+            </span>
+          </b-input-group-prepend>
+          <b-form-select v-model="value.field" :disabled="disabled" :options="fieldOptions" />
+          <b-form-select class="mr-1" v-model="value.op" :disabled="disabled" :options="operatorOptions" />
+          <component :is="valueComponentIs"
+            v-bind="valueComponentProps"
+            v-model="value.value"
+          />
+          <b-input-group-append v-if="hasParents || (hasSiblings && !isDrag)">
+            <b-button
+              class="ml-auto nodrag" variant="link"
+              v-b-tooltip.hover.left.d300 :disabled="disabled" :title="$t('Delete statement')"
+              @click="onDeleteRule">
+              <icon name="trash-alt" />
+            </b-button>
+          </b-input-group-append>
+        </b-input-group>
+      </b-row>
+    </b-form>
     <b-row class="mx-auto isdrag">
       <b-col cols="1"></b-col>
       <b-col cols="1" class="py-0 bg-white" style="min-width:60px;">
@@ -166,9 +168,9 @@ const setup = (props, context) => {
       const options = pfSearchValuesForOperator(types, value.value.op, $store) || []
       if (options.length && options.findIndex(v => v.value === value.value.value) < 0)
         value.value.value = options[0].value // select the first valid option
-      return { disabled, options }
+      return { disabled: disabled.value, options }
     }
-    return { disabled }
+    return { disabled: disabled.value }
   })
 
   const onAddRule = () => emit('add')
diff --git a/html/pfappserver/root/src/views/Configuration/_components/NetworkBehaviorPoliciesList.vue b/html/pfappserver/root/src/views/Configuration/_components/NetworkBehaviorPoliciesList.vue
deleted file mode 100644
index 90121126e989..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/NetworkBehaviorPoliciesList.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">
-            {{ $t('Network Behavior Policy') }}
-          </h4>
-        </b-card-header>
-
-        <b-card-header v-if="!canUseNbaEndpoints">
-          <template>
-          <div class="alert alert-warning">{{ $t(`Your Fingerbank account currently doesn't have access to the network behavior analysis API endpoints. Get in touch with info@inverse.ca for a quote. Without these API endpoints, you will not be able to use the anomaly detection feature.`) }}</div>
-          </template>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newNetworkBehaviorPolicy' }">{{ $t('New Network Behavior Policy') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No Network Behavior Policies found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Network Behavior Policy?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-      <template v-slot:cell(status)="item">
-        <toggle-status :value="item.status"
-          :disabled="isLoading"
-          :item="item" />
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/networkBehaviorPolicy'
-import { ToggleStatus } from '@/views/Configuration/networkBehaviorPolicy/_components/'
-
-export default {
-  name: 'network-behavior-policies-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable,
-    ToggleStatus
-  },
-  data () {
-    return {
-      config: config(this),
-      canUseNbaEndpoints: false,
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_network_behavior_policies/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneNetworkBehaviorPolicy', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_network_behavior_policies/deleteNetworkBehaviorPolicy', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    },
-    init () {
-      this.$store.dispatch('$_fingerbank/getCanUseNbaEndpoints').then(info => {
-        this.canUseNbaEndpoints = info["result"]
-      })
-    }
-  },
-  created () {
-    this.init()
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
index f8a3e41bf4d8..1d50890269cb 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
@@ -16,7 +16,7 @@
         :fields="visibleColumns"
         class="mb-0"
         show-empty
-         fixed
+        fixed
         striped
         selectable
         @row-clicked="goToItem"
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_api.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_api.js
index 31933c8204c8..d5c816c8c998 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_api.js
@@ -1,38 +1,43 @@
 import apiCall from '@/utils/api'
 
 export default {
-  networkBehaviorPolicies: params => {
+  list: params => {
     return apiCall.get('config/network_behavior_policies', { params }).then(response => {
       return response.data
     })
   },
-  networkBehaviorPoliciesOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/network_behavior_policies').then(response => {
       return response.data
     })
   },
-  networkBehaviorPolicy: id => {
-    return apiCall.get(['config', 'network_behavior_policy', id]).then(response => {
-      return response.data.item
+  search: data => {
+    return apiCall.post('config/network_behavior_policies/search', data).then(response => {
+      return response.data
     })
   },
-  networkBehaviorPolicyOptions: id => {
-    return apiCall.options(['config', 'network_behavior_policy', id]).then(response => {
+  create: data => {
+    return apiCall.post('config/network_behavior_policies', data).then(response => {
       return response.data
     })
   },
-  createNetworkBehaviorPolicy: data => {
-    return apiCall.post('config/network_behavior_policies', data).then(response => {
+  item: id => {
+    return apiCall.get(['config', 'network_behavior_policy', id]).then(response => {
+      return response.data.item
+    })
+  },
+  itemOptions: id => {
+    return apiCall.options(['config', 'network_behavior_policy', id]).then(response => {
       return response.data
     })
   },
-  updateNetworkBehaviorPolicy: data => {
+  update: data => {
     const patch = data.quiet ? 'patchQuiet' : 'patch'
     return apiCall[patch](['config', 'network_behavior_policy', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteNetworkBehaviorPolicy: id => {
+  delete: id => {
     return apiCall.delete(['config', 'network_behavior_policy', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
new file mode 100644
index 000000000000..dbe17744bae5
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
@@ -0,0 +1,288 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('Network Behaviour Policies') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <div v-if="!canUseNbaEndpoints"
+        class="alert alert-warning"
+      >{{ $t(`Your Fingerbank account currently doesn't have access to the network behavior analysis API endpoints. Get in touch with info@inverse.ca for a quote. Without these API endpoints, you will not be able to use the anomaly detection feature.`) }}</div>
+
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New Network Behaviour Policy') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        no-sort-reset
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-clicked="goToItem"
+        @row-selected="onRowSelected"
+        @sort-changed="setSort"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(status)="{ item }">
+          <toggle-status :value="item.status" :disabled="isLoading"
+            :item="item" :collection="collection" @input="item.status = $event" />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right"
+            @click.stop.prevent
+          >
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Policy?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import ToggleStatus from './ToggleStatus'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable,
+  ToggleStatus
+}
+
+const props = {
+  collection: {
+    type: Object
+  }
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const {
+    collection
+  } = toRefs(props)
+
+  const { root: { $store, $router } = {} } = context
+
+  const canUseNbaEndpoints = ref(false)
+  $store.dispatch('$_fingerbank/getCanUseNbaEndpoints').then(info => {
+    canUseNbaEndpoints.value = info["result"]
+  })
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const router = useRouter($router)
+  const {
+    goToPreview
+  } = router
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const {
+    deleteItem
+  } = useStore(props, context)
+
+  const onRemove = id => {
+    deleteItem({ ...collection.value, id })
+      .then(() => reSearch())
+  }
+
+  return {
+    canUseNbaEndpoints,
+    useSearch,
+    tableRef,
+    ...router,
+    ...selected,
+    ...toRefs(search),
+    goToPreview,
+    onBulkExport,
+    onRemove
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  props,
+  setup
+}
+</script>
+
+
+<!--
+<template>
+  <b-card no-body>
+    <pf-config-list
+      ref="pfConfigList"
+      :config="config"
+    >
+      <template v-slot:pageHeader>
+        <b-card-header>
+          <h4 class="mb-0">
+            {{ $t('Network Behavior Policy') }}
+          </h4>
+        </b-card-header>
+        <b-card-header v-if="!canUseNbaEndpoints">
+          <template>
+          <div class="alert alert-warning">{{ $t(`Your Fingerbank account currently doesn't have access to the network behavior analysis API endpoints. Get in touch with info@inverse.ca for a quote. Without these API endpoints, you will not be able to use the anomaly detection feature.`) }}</div>
+          </template>
+        </b-card-header>
+      </template>
+      <template v-slot:buttonAdd>
+        <b-button variant="outline-primary" :to="{ name: 'newNetworkBehaviorPolicy' }">{{ $t('New Network Behavior Policy') }}</b-button>
+      </template>
+      <template v-slot:emptySearch="state">
+        <pf-empty-table :is-loading="state.isLoading">{{ $t('No Network Behavior Policies found') }}</pf-empty-table>
+      </template>
+      <template v-slot:cell(buttons)="item">
+        <span class="float-right text-nowrap">
+          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Network Behavior Policy?')" @on-delete="remove(item)" reverse/>
+          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
+        </span>
+      </template>
+      <template v-slot:cell(status)="item">
+        <toggle-status :value="item.status"
+          :disabled="isLoading"
+          :item="item" />
+      </template>
+    </pf-config-list>
+  </b-card>
+</template>
+
+<script>
+import pfButtonDelete from '@/components/pfButtonDelete'
+import pfConfigList from '@/components/pfConfigList'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import { config } from '../_config/networkBehaviorPolicy'
+import { ToggleStatus } from '@/views/Configuration/networkBehaviorPolicy/_components/'
+
+export default {
+  name: 'network-behavior-policies-list',
+  components: {
+    pfButtonDelete,
+    pfConfigList,
+    pfEmptyTable,
+    ToggleStatus
+  },
+  data () {
+    return {
+      config: config(this),
+      canUseNbaEndpoints: false,
+    }
+  },
+  computed: {
+    isLoading () {
+      return this.$store.getters['$_network_behavior_policies/isLoading']
+    }
+  },
+  methods: {
+    clone (item) {
+      this.$router.push({ name: 'cloneNetworkBehaviorPolicy', params: { id: item.id } })
+    },
+    remove (item) {
+      this.$store.dispatch('$_network_behavior_policies/deleteNetworkBehaviorPolicy', item.id).then(() => {
+        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
+        refreshList() // soft reload
+      })
+    },
+    init () {
+      this.$store.dispatch('$_fingerbank/getCanUseNbaEndpoints').then(info => {
+        this.canUseNbaEndpoints = info["result"]
+      })
+    }
+  },
+  created () {
+    this.init()
+  }
+}
+</script>
+-->
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/ToggleStatus.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/ToggleStatus.js
index a1bfe005081e..be33d9179f06 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/ToggleStatus.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/ToggleStatus.js
@@ -13,15 +13,16 @@ export const props = {
       {
         value: 'disabled', label: i18n.t('Disabled'),
         color: 'var(--danger)', icon: 'times',
-        promise: (value, props) => {
+        promise: (value, props, context) => {
           const { item } = toRefs(props)
           return store.dispatch('$_network_behavior_policies/disableNetworkBehaviorPolicy', { quiet: true, ...item.value })
             .then(() => {
-              store.dispatch('notification/info', { message: i18n.t('Network behavior policy <strong>{id}</strong> disabled.', item.value) })
+              context.emit('input', 'disabled')
+              store.dispatch('notification/info', { message: i18n.t('Network behavior policy <code>{id}</code> disabled.', item.value) })
             })
             .catch(err => {
               const { response: { data: { message: errMsg } = {} } = {} } = err
-              let message = i18n.t('Network behavior policy <strong>{id}</strong> was not disabled', item.value)
+              let message = i18n.t('Network behavior policy <code>{id}</code> could not be disabled.', item.value)
               if (errMsg) message += ` (${errMsg})`
               store.dispatch('notification/danger', { message })
             })
@@ -30,15 +31,16 @@ export const props = {
       {
         value: 'enabled', label: i18n.t('Enabled'),
         color: 'var(--success)', icon: 'check',
-        promise: (value, props) => {
+        promise: (value, props, context) => {
           const { item } = toRefs(props)
           return store.dispatch('$_network_behavior_policies/enableNetworkBehaviorPolicy', { quiet: true, ...item.value })
             .then(() => {
-              store.dispatch('notification/info', { message: i18n.t('Network behavior policy <strong>{id}</strong> enabled.', item.value) })
+              context.emit('input', 'enabled')
+              store.dispatch('notification/info', { message: i18n.t('Network behavior policy <code>{id}</code> enabled.', item.value) })
             })
             .catch(err => {
               const { response: { data: { message: errMsg } = {} } = {} } = err
-              let message = i18n.t('Network behavior policy <strong>{id}</strong> was not enabled', item.value)
+              let message = i18n.t('Network behavior policy <code>{id}</code> could not be enabled.', item.value)
               if (errMsg) message += ` (${errMsg})`
               store.dispatch('notification/danger', { message })
             })
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js
index acd49ddc324b..be26275be202 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js
@@ -45,3 +45,62 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_network_behavior_policies/updateNetworkBehaviorPolicy', form.value),
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('networkBehaviourPolicies', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'status',
+      label: 'Status', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'id',
+      label: 'Name', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'description',
+      label: 'Description', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'description',
+      text: i18n.t('Description'),
+      types: [conditionType.SUBSTRING]
+    },
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null },
+      { field: 'description', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_router.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_router.js
index 036b61ee4156..47510d29014e 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_router.js
@@ -2,7 +2,7 @@ import store from '@/store'
 import FingerbankStoreModule from '../fingerbank/_store'
 import NetworkBehaviorPolicyStoreModule from './_store'
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/NetworkBehaviorPoliciesList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const useRouter = $router => {
@@ -12,6 +12,7 @@ export const useRouter = $router => {
       .push({ name: 'network_behavior_policy', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneNetworkBehaviorPolicy', params }),
+    goToNew: params => $router.push({ name: 'newNetworkBehaviorPolicy', params })
   }
 }
 
@@ -27,8 +28,7 @@ export default [
   {
     path: 'fingerbank/network_behavior_policies',
     name: 'network_behavior_policies',
-    component: TheList,
-    props: (route) => ({ query: route.query.query }),
+    component: TheSearch,
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_store.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_store.js
index b4ce481d94ab..f1bb708ed4df 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_store.js
@@ -34,7 +34,7 @@ const actions = {
     }
     if (!state.policiesPromise) {
       commit('ITEM_REQUEST')
-      state.policiesPromise = api.networkBehaviorPolicies(params).then(response => {
+      state.policiesPromise = api.list(params).then(response => {
         commit('ITEM_SUCCESS')
         return response.items
       }).catch((err) => {
@@ -47,7 +47,7 @@ const actions = {
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.networkBehaviorPoliciesOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -55,7 +55,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.networkBehaviorPoliciesOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -69,7 +69,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.networkBehaviorPolicy(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -79,7 +79,7 @@ const actions = {
   },
   createNetworkBehaviorPolicy: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createNetworkBehaviorPolicy(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -89,7 +89,7 @@ const actions = {
   },
   updateNetworkBehaviorPolicy: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateNetworkBehaviorPolicy(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -101,7 +101,7 @@ const actions = {
     commit('ITEM_REQUEST')
     const { id, quiet = false } = data
     const _data = { id, status: 'enabled', quiet }
-    return api.updateNetworkBehaviorPolicy(_data).then(response => {
+    return api.update(_data).then(response => {
       commit('ITEM_ENABLED', _data)
       commit('$_config_network_behavior_policies_searchable/ITEM_UPDATED', { key: 'id', id, prop: 'status', data: 'enabled' }, { root: true })
       return response
@@ -114,7 +114,7 @@ const actions = {
     commit('ITEM_REQUEST')
     const { id, quiet = false } = data
     const _data = { id, status: 'disabled', quiet }
-    return api.updateNetworkBehaviorPolicy(_data).then(response => {
+    return api.update(_data).then(response => {
       commit('ITEM_DISABLED', _data)
       commit('$_config_network_behavior_policies_searchable/ITEM_UPDATED', { key: 'id', id, prop: 'status', data: 'disabled' }, { root: true })
       return response
@@ -125,7 +125,7 @@ const actions = {
   },
   deleteNetworkBehaviorPolicy: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteNetworkBehaviorPolicy(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {

From f135d35568a8528dba8798df438336a835a75e87 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Fri, 11 Jun 2021 11:33:20 -0400
Subject: [PATCH 30/72] add advanced search to pki providers

---
 .../_components/PkiProvidersList.vue          |  67 -----
 .../_config/networkBehaviorPolicy.js          |  83 ------
 .../Configuration/_config/pkiProvider.js      |  87 -------
 .../views/Configuration/pkiProviders/_api.js  |  27 +-
 .../pkiProviders/_components/TheSearch.vue    | 240 ++++++++++++++++++
 .../_composables/useCollection.js             |  55 ++++
 .../Configuration/pkiProviders/_router.js     |   6 +-
 .../Configuration/pkiProviders/_store.js      |  16 +-
 .../Configuration/pkiProviders/config.js      |   5 +
 9 files changed, 327 insertions(+), 259 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/PkiProvidersList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/networkBehaviorPolicy.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/pkiProvider.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/pkiProviders/config.js

diff --git a/html/pfappserver/root/src/views/Configuration/_components/PkiProvidersList.vue b/html/pfappserver/root/src/views/Configuration/_components/PkiProvidersList.vue
deleted file mode 100644
index 1b08134b1cf9..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/PkiProvidersList.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0" v-t="'PKI Providers'"></h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-dropdown :text="$t('New PKI Provider')" variant="outline-primary">
-          <b-dropdown-item :to="{ name: 'newPkiProvider', params: { providerType: 'packetfence_local' } }">Packetfence Local</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newPkiProvider', params: { providerType: 'packetfence_pki' } }">Packetfence PKI</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newPkiProvider', params: { providerType: 'scep' } }">SCEP PKI</b-dropdown-item>
-        </b-dropdown>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No PKI Providers found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1 text-nowrap" :disabled="isLoading" :confirm="$t('Delete PKI Provider?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/pkiProvider'
-
-export default {
-  name: 'pki-providers-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_pki_providers/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'clonePkiProvider', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_pki_providers/deletePkiProvider', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_config/networkBehaviorPolicy.js b/html/pfappserver/root/src/views/Configuration/_config/networkBehaviorPolicy.js
deleted file mode 100644
index e40ef5f2f3b2..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/networkBehaviorPolicy.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'status',
-    label: 'Status', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'description',
-    label: 'Description', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'description',
-    text: i18n.t('Description'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'network_behavior_policy', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier or description'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/network_behavior_policies',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'description', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'network_behavior_policies' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'description', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/pkiProvider.js b/html/pfappserver/root/src/views/Configuration/_config/pkiProvider.js
deleted file mode 100644
index 35c92e19ff1e..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/pkiProvider.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Name', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'description',
-    label: 'Description', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'type',
-    label: 'Type', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'description',
-    text: i18n.t('Description'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'type',
-    text: i18n.t('Type'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'pki_provider', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by name or description'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/pki_providers',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'description', op: 'contains', value: null },
-            { field: 'type', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'pki_providers' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: quickCondition },
-            { field: 'description', op: 'contains', value: quickCondition },
-            { field: 'type', op: 'contains', value: quickCondition }
-          ]
-        }]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_api.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/_api.js
index 11cd9ab89375..c47698d70547 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_api.js
@@ -1,37 +1,42 @@
 import apiCall from '@/utils/api'
 
 export default {
-  pkiProviders: params => {
+  list: params => {
     return apiCall.get('config/pki_providers', { params }).then(response => {
       return response.data
     })
   },
-  pkiProvidersOptions: providerType => {
+  listOptions: providerType => {
     return apiCall.options(['config', 'pki_providers'], { params: { type: providerType } }).then(response => {
       return response.data
     })
   },
-  pkiProvider: id => {
-    return apiCall.get(['config', 'pki_provider', id]).then(response => {
-      return response.data.item
+  search: data => {
+    return apiCall.post('config/pki_providers/search', data).then(response => {
+      return response.data
     })
   },
-  pkiProviderOptions: id => {
-    return apiCall.options(['config', 'pki_provider', id]).then(response => {
+  create: data => {
+    return apiCall.post('config/pki_providers', data).then(response => {
       return response.data
     })
   },
-  createPkiProvider: data => {
-    return apiCall.post('config/pki_providers', data).then(response => {
+  item: id => {
+    return apiCall.get(['config', 'pki_provider', id]).then(response => {
+      return response.data.item
+    })
+  },
+  itemOptions: id => {
+    return apiCall.options(['config', 'pki_provider', id]).then(response => {
       return response.data
     })
   },
-  updatePkiProvider: data => {
+  update: data => {
     return apiCall.patch(['config', 'pki_provider', data.id], data).then(response => {
       return response.data
     })
   },
-  deletePkiProvider: id => {
+  delete: id => {
     return apiCall.delete(['config', 'pki_provider', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
new file mode 100644
index 000000000000..f21eab44443f
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
@@ -0,0 +1,240 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('PKI Providers') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-dropdown :text="$t('New PKI Provider')" variant="outline-primary">
+          <b-dropdown-item v-for="(text, providerType) in types" :key="providerType"
+            :to="{ name: 'newPkiProvider', params: { providerType } }"
+          >{{ text }}</b-dropdown-item>
+        </b-dropdown>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete PKI Provider?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+import { types } from '../config'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search),
+    types
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
+
+
+<!--
+
+<template>
+  <b-card no-body>
+    <pf-config-list
+      ref="pfConfigList"
+      :config="config"
+    >
+      <template v-slot:pageHeader>
+        <b-card-header>
+          <h4 class="mb-0" v-t="'PKI Providers'"></h4>
+        </b-card-header>
+      </template>
+      <template v-slot:buttonAdd>
+        <b-dropdown :text="$t('New PKI Provider')" variant="outline-primary">
+          <b-dropdown-item :to="{ name: 'newPkiProvider', params: { providerType: 'packetfence_local' } }">Packetfence Local</b-dropdown-item>
+          <b-dropdown-item :to="{ name: 'newPkiProvider', params: { providerType: 'packetfence_pki' } }">Packetfence PKI</b-dropdown-item>
+          <b-dropdown-item :to="{ name: 'newPkiProvider', params: { providerType: 'scep' } }">SCEP PKI</b-dropdown-item>
+        </b-dropdown>
+      </template>
+      <template v-slot:emptySearch="state">
+        <pf-empty-table :is-loading="state.isLoading">{{ $t('No PKI Providers found') }}</pf-empty-table>
+      </template>
+      <template v-slot:cell(buttons)="item">
+        <span class="float-right">
+          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1 text-nowrap" :disabled="isLoading" :confirm="$t('Delete PKI Provider?')" @on-delete="remove(item)" reverse/>
+          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
+        </span>
+      </template>
+    </pf-config-list>
+  </b-card>
+</template>
+
+<script>
+import pfButtonDelete from '@/components/pfButtonDelete'
+import pfConfigList from '@/components/pfConfigList'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import { config } from '../_config/pkiProvider'
+
+export default {
+  name: 'pki-providers-list',
+  components: {
+    pfButtonDelete,
+    pfConfigList,
+    pfEmptyTable
+  },
+  data () {
+    return {
+      config: config(this)
+    }
+  },
+  computed: {
+    isLoading () {
+      return this.$store.getters['$_pki_providers/isLoading']
+    }
+  },
+  methods: {
+    clone (item) {
+      this.$router.push({ name: 'clonePkiProvider', params: { id: item.id } })
+    },
+    remove (item) {
+      this.$store.dispatch('$_pki_providers/deletePkiProvider', item.id).then(() => {
+        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
+        refreshList() // soft reload
+      })
+    }
+  }
+}
+</script>
+-->
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
index e918f0e0291b..8f591383463e 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
@@ -73,3 +73,58 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_pki_providers/updatePkiProvider', form.value),
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+import { types } from '../config'
+export const useSearch = makeSearch('pkiProviders', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Name', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'type',
+      label: 'Type', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true,
+      formatter: value => types[value]
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'type',
+      text: i18n.t('Type'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null },
+      { field: 'type', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_router.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/_router.js
index 87c8561a9378..479f866865af 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_router.js
@@ -2,7 +2,7 @@ import store from '@/store'
 import PkiProvidersStoreModule from './_store'
 import PkisStoreModule from '../pki/_store'
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/PkiProvidersList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const useRouter = $router => {
@@ -12,6 +12,7 @@ export const useRouter = $router => {
       .push({ name: 'pki_provider', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'clonePkiProvider', params }),
+    goToNew: params => $router.push({ name: 'newPkiProvider', params })
   }
 }
 
@@ -27,8 +28,7 @@ export default [
   {
     path: 'pki_providers',
     name: 'pki_providers',
-    component: TheList,
-    props: (route) => ({ query: route.query.query }),
+    component: TheSearch,
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_store.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/_store.js
index e9039b78069f..5b84723d1ffb 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_store.js
@@ -31,13 +31,13 @@ const actions = {
       sort: 'id',
       fields: ['id', 'description', 'class'].join(',')
     }
-    return api.pkiProviders(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   optionsById: ({ commit }, id) => {
     commit('ITEM_REQUEST')
-    return api.pkiProviderOptions(id).then(response => {
+    return api.itemOptions(id).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -47,7 +47,7 @@ const actions = {
   },
   optionsByProviderType: ({ commit }, providerType) => {
     commit('ITEM_REQUEST')
-    return api.pkiProvidersOptions(providerType).then(response => {
+    return api.listOptions(providerType).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -61,7 +61,7 @@ const actions = {
       fields: ['id', 'description', 'class'].join(','),
       type: type
     }
-    return api.pkiProviders(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
@@ -70,7 +70,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.pkiProvider(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -80,7 +80,7 @@ const actions = {
   },
   createPkiProvider: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createPkiProvider(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -90,7 +90,7 @@ const actions = {
   },
   updatePkiProvider: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updatePkiProvider(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -100,7 +100,7 @@ const actions = {
   },
   deletePkiProvider: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deletePkiProvider(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/config.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/config.js
new file mode 100644
index 000000000000..d9ec8ab2bf10
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/config.js
@@ -0,0 +1,5 @@
+export const types = {
+  packetfence_local:  'Packetfence Local',
+  packetfence_pki:    'Packetfence PKI',
+  scep:               'SCEP PKI'
+}
\ No newline at end of file

From b5c63d183bb60539b193c27873eed3152172eff4 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Fri, 11 Jun 2021 11:34:14 -0400
Subject: [PATCH 31/72] remove refs on plain objects

---
 .../adminRoles/_components/TheSearch.vue      |  2 +-
 .../billingTiers/_components/TheSearch.vue    |  2 +-
 .../domains/_components/TheSearch.vue         |  2 +-
 .../firewalls/_components/TheSearch.vue       |  2 +-
 .../floatingDevices/_components/TheSearch.vue |  2 +-
 .../_components/TheSearch.vue                 | 90 -------------------
 6 files changed, 5 insertions(+), 95 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
index ac40a79d3c7c..20d9a202706b 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
@@ -130,7 +130,7 @@ const setup = (props, context) => {
   const selected = useBootstrapTableSelected(tableRef, items)
   const {
     selectedItems
-  } = toRefs(selected)
+  } = selected
 
   const onBulkExport = () => {
     const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue
index 949f71eee80f..b818b6e18021 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue
@@ -129,7 +129,7 @@ const setup = (props, context) => {
   const selected = useBootstrapTableSelected(tableRef, items)
   const {
     selectedItems
-  } = toRefs(selected)
+  } = selected
 
   const onBulkExport = () => {
     const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
index ccc6d9b02f67..cad410fd57f3 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
@@ -148,7 +148,7 @@ const setup = (props, context) => {
   const selected = useBootstrapTableSelected(tableRef, items)
   const {
     selectedItems
-  } = toRefs(selected)
+  } = selected
 
   const onBulkExport = () => {
     const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
index 0cb8a81d8c2b..a8f4065c9f64 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
@@ -131,7 +131,7 @@ const setup = (props, context) => {
   const selected = useBootstrapTableSelected(tableRef, items)
   const {
     selectedItems
-  } = toRefs(selected)
+  } = selected
 
   const onBulkExport = () => {
     const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
index e33855f66d08..a745abc46dcc 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
@@ -129,7 +129,7 @@ const setup = (props, context) => {
   const selected = useBootstrapTableSelected(tableRef, items)
   const {
     selectedItems
-  } = toRefs(selected)
+  } = selected
 
   const onBulkExport = () => {
     const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
index dbe17744bae5..3378a80884f6 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
@@ -196,93 +196,3 @@ export default {
   setup
 }
 </script>
-
-
-<!--
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">
-            {{ $t('Network Behavior Policy') }}
-          </h4>
-        </b-card-header>
-        <b-card-header v-if="!canUseNbaEndpoints">
-          <template>
-          <div class="alert alert-warning">{{ $t(`Your Fingerbank account currently doesn't have access to the network behavior analysis API endpoints. Get in touch with info@inverse.ca for a quote. Without these API endpoints, you will not be able to use the anomaly detection feature.`) }}</div>
-          </template>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newNetworkBehaviorPolicy' }">{{ $t('New Network Behavior Policy') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No Network Behavior Policies found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Network Behavior Policy?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-      <template v-slot:cell(status)="item">
-        <toggle-status :value="item.status"
-          :disabled="isLoading"
-          :item="item" />
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/networkBehaviorPolicy'
-import { ToggleStatus } from '@/views/Configuration/networkBehaviorPolicy/_components/'
-
-export default {
-  name: 'network-behavior-policies-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable,
-    ToggleStatus
-  },
-  data () {
-    return {
-      config: config(this),
-      canUseNbaEndpoints: false,
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_network_behavior_policies/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneNetworkBehaviorPolicy', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_network_behavior_policies/deleteNetworkBehaviorPolicy', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    },
-    init () {
-      this.$store.dispatch('$_fingerbank/getCanUseNbaEndpoints').then(info => {
-        this.canUseNbaEndpoints = info["result"]
-      })
-    }
-  },
-  created () {
-    this.init()
-  }
-}
-</script>
--->
\ No newline at end of file

From 78cf4b875916a2c71291f646b6b2855d71fe22fd Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Fri, 11 Jun 2021 12:17:13 -0400
Subject: [PATCH 32/72] add advanced search to provisioners

---
 .../_components/ProvisioningsList.vue         |  75 --------
 .../Configuration/_config/provisioning.js     |  87 ---------
 .../views/Configuration/provisioners/_api.js  |  27 +--
 .../provisioners/_components/TheSearch.vue    | 171 ++++++++++++++++++
 .../_composables/useCollection.js             |  61 +++++++
 .../Configuration/provisioners/_router.js     |   6 +-
 .../Configuration/provisioners/_store.js      |  24 +--
 .../Configuration/provisioners/config.js      |  32 ++--
 8 files changed, 274 insertions(+), 209 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/ProvisioningsList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/provisioning.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/views/Configuration/_components/ProvisioningsList.vue b/html/pfappserver/root/src/views/Configuration/_components/ProvisioningsList.vue
deleted file mode 100644
index db990d68100f..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/ProvisioningsList.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">
-            {{ $t('Provisioning') }}
-            <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#provision" />
-          </h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-dropdown :text="$t('New Provisioner')" variant="outline-primary">
-          <template v-for="({ text, value }) in provisioningTypeOptions">
-            <b-dropdown-item :key="value"
-              :to="{ name: 'newProvisioning', params: { provisioningType: value } }">{{ text }}</b-dropdown-item>
-          </template>
-        </b-dropdown>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No Provisioners found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Provisioner?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonHelp from '@/components/pfButtonHelp'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/provisioning'
-import { provisioningTypeOptions } from '../provisioners/config'
-
-export default {
-  name: 'provisionings-list',
-  components: {
-    pfButtonDelete,
-    pfButtonHelp,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this),
-      provisioningTypeOptions
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_provisionings/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneProvisioning', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_provisionings/deleteProvisioning', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_config/provisioning.js b/html/pfappserver/root/src/views/Configuration/_config/provisioning.js
deleted file mode 100644
index 2f6d252a8f65..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/provisioning.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'description',
-    label: 'Description', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'type',
-    label: 'Type', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'description',
-    text: i18n.t('Description'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'type',
-    text: i18n.t('Type'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'provisioning', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by id or description'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/provisionings',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'description', op: 'contains', value: null },
-            { field: 'type', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'provisionings' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: quickCondition },
-            { field: 'description', op: 'contains', value: quickCondition },
-            { field: 'type', op: 'contains', value: quickCondition }
-          ]
-        }]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_api.js b/html/pfappserver/root/src/views/Configuration/provisioners/_api.js
index f87b16d4c777..b254ef11f636 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_api.js
@@ -1,37 +1,42 @@
 import apiCall from '@/utils/api'
 
 export default {
-  provisionings: params => {
+  list: params => {
     return apiCall.get(['config', 'provisionings'], { params }).then(response => {
       return response.data
     })
   },
-  provisioningsOptions: provisioningType => {
+  listOptions: provisioningType => {
     return apiCall.options(['config', 'provisionings'], { params: { type: provisioningType } }).then(response => {
       return response.data
     })
   },
-  provisioning: id => {
-    return apiCall.get(['config', 'provisioning', id]).then(response => {
-      return response.data.item
+  search: data => {
+    return apiCall.post('config/pki_providers/search', data).then(response => {
+      return response.data
     })
   },
-  provisioningOptions: id => {
-    return apiCall.options(['config', 'provisioning', id]).then(response => {
+  create: data => {
+    return apiCall.post('config/provisionings', data).then(response => {
       return response.data
     })
   },
-  createProvisioning: data => {
-    return apiCall.post('config/provisionings', data).then(response => {
+  item: id => {
+    return apiCall.get(['config', 'provisioning', id]).then(response => {
+      return response.data.item
+    })
+  },
+  itemOptions: id => {
+    return apiCall.options(['config', 'provisioning', id]).then(response => {
       return response.data
     })
   },
-  updateProvisioning: data => {
+  update: data => {
     return apiCall.patch(['config', 'provisioning', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteProvisioning: id => {
+  delete: id => {
     return apiCall.delete(['config', 'provisioning', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue
new file mode 100644
index 000000000000..e0b77a6b2b9d
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue
@@ -0,0 +1,171 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center">
+        {{ $t('Provisioning') }}
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#provision" />
+      </h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-dropdown :text="$t('New Provisioner')" variant="outline-primary">
+          <b-dropdown-item v-for="({ text, value }) in provisioningTypeOptions" :key="value"
+            :to="{ name: 'newProvisioning', params: { provisioningType: value } }"
+          >{{ text }}</b-dropdown-item>
+        </b-dropdown>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Provisioner?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+import { provisioningTypeOptions } from '../config'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search),
+    provisioningTypeOptions
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js
index 95d8b8404f14..defd56a49f27 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js
@@ -74,3 +74,64 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_provisionings/updateProvisioning', form.value),
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('provisioners', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Name', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'description',
+      label: 'Description', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'type',
+      label: 'Type', // i18n defer
+      sortable: true,
+      visible: true,
+      formatter: value => provisioningTypes[value]
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'description',
+      text: i18n.t('Description'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null },
+      { field: 'description', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_router.js b/html/pfappserver/root/src/views/Configuration/provisioners/_router.js
index 6df1e2810a55..cc689969d852 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_router.js
@@ -1,7 +1,7 @@
 import store from '@/store'
 import StoreModule from './_store'
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/ProvisioningsList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const useRouter = $router => {
@@ -11,6 +11,7 @@ export const useRouter = $router => {
       .push({ name: 'provisioning', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneProvisioning', params }),
+    goToNew: params => $router.push({ name: 'newProvisioning', params })
   }
 }
 
@@ -25,8 +26,7 @@ export default [
   {
     path: 'provisionings',
     name: 'provisionings',
-    component: TheList,
-    props: (route) => ({ query: route.query.query }),
+    component: TheSearch,
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_store.js b/html/pfappserver/root/src/views/Configuration/provisioners/_store.js
index b9ac4325768c..6a566ae93645 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_store.js
@@ -31,13 +31,13 @@ const actions = {
       sort: 'id',
       fields: ['id', 'description', 'class'].join(',')
     }
-    return api.provisionings(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   optionsById: ({ commit }, id) => {
     commit('ITEM_REQUEST')
-    return api.provisioningOptions(id).then(response => {
+    return api.itemOptions(id).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -47,7 +47,7 @@ const actions = {
   },
   optionsByProvisioningType: ({ commit }, provisioningType) => {
     commit('ITEM_REQUEST')
-    return api.provisioningsOptions(provisioningType).then(response => {
+    return api.listOptions(provisioningType).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -60,7 +60,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.provisioning(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -70,7 +70,7 @@ const actions = {
   },
   createProvisioning: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createProvisioning(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -80,7 +80,7 @@ const actions = {
   },
   updateProvisioning: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateProvisioning(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -90,23 +90,13 @@ const actions = {
   },
   deleteProvisioning: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteProvisioning(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
       throw err
     })
-  },
-  testProvisioning: ({ commit }, data) => {
-    commit('ITEM_REQUEST')
-    return api.testProvisioning(data).then(response => {
-      commit('ITEM_SUCCESS')
-      return response
-    }).catch(err => {
-      commit('ITEM_ERROR', err.response)
-      throw err
-    })
   }
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/config.js b/html/pfappserver/root/src/views/Configuration/provisioners/config.js
index 9a4d39e8fe2c..215e18394a50 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/config.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/config.js
@@ -1,22 +1,22 @@
 import i18n from '@/utils/locale'
 
 export const provisioningTypes = {
-  accept:           i18n.t('Accept'),
-  airwatch:         i18n.t('Airwatch'),
-  android:          i18n.t('Android'),
-  deny:             i18n.t('Deny'),
-  dpsk:             i18n.t('DPSK'),
-  ibm:              i18n.t('IBM'),
-  jamf:             i18n.t('Jamf'),
-  mobileconfig:     i18n.t('Apple Devices'),
-  mobileiron:       i18n.t('Mobileiron'),
-  opswat:           i18n.t('OPSWAT'),
-  sentinelone:      i18n.t('SentinelOne'),
-  sepm:             i18n.t('Symantec Endpoint Protection Manager (SEPM)'),
-  symantec:         i18n.t('Symantec App Center'),
-  windows:          i18n.t('Windows'),
-  intune:           i18n.t('Microsoft Intune'),
-  servicenow:       i18n.t('ServiceNow')
+  accept:       i18n.t('Accept'),
+  airwatch:     i18n.t('Airwatch'),
+  android:      i18n.t('Android'),
+  deny:         i18n.t('Deny'),
+  dpsk:         i18n.t('DPSK'),
+  ibm:          i18n.t('IBM'),
+  jamf:         i18n.t('Jamf'),
+  mobileconfig: i18n.t('Apple Devices'),
+  mobileiron:   i18n.t('Mobileiron'),
+  opswat:       i18n.t('OPSWAT'),
+  sentinelone:  i18n.t('SentinelOne'),
+  sepm:         i18n.t('Symantec Endpoint Protection Manager (SEPM)'),
+  symantec:     i18n.t('Symantec App Center'),
+  windows:      i18n.t('Windows'),
+  intune:       i18n.t('Microsoft Intune'),
+  servicenow:   i18n.t('ServiceNow')
 }
 
 export const provisioningTypeOptions = Object.keys(provisioningTypes)

From fd289c2666320344cedd0d61b1fca2d7c25d00c8 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Fri, 11 Jun 2021 12:17:38 -0400
Subject: [PATCH 33/72] tweak pki providers search

---
 .../pkiProviders/_components/TheSearch.vue    | 80 +------------------
 .../_composables/useCollection.js             |  6 +-
 .../Configuration/pkiProviders/config.js      | 16 ++--
 3 files changed, 18 insertions(+), 84 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
index f21eab44443f..d0174607b678 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
@@ -6,8 +6,8 @@
     <div class="card-body">
       <base-search :use-search="useSearch">
         <b-dropdown :text="$t('New PKI Provider')" variant="outline-primary">
-          <b-dropdown-item v-for="(text, providerType) in types" :key="providerType"
-            :to="{ name: 'newPkiProvider', params: { providerType } }"
+          <b-dropdown-item v-for="({ text, value }) in pkiProvidersTypeOptions" :key="value"
+            :to="{ name: 'newPkiProvider', params: { providerType: value } }"
           >{{ text }}</b-dropdown-item>
         </b-dropdown>
       </base-search>
@@ -110,7 +110,7 @@ import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
 import { useSearch, useRouter } from '../_composables/useCollection'
-import { types } from '../config'
+import { pkiProvidersTypeOptions } from '../config'
 
 const setup = (props, context) => {
 
@@ -154,7 +154,7 @@ const setup = (props, context) => {
     ...router,
     ...selected,
     ...toRefs(search),
-    types
+    pkiProvidersTypeOptions
   }
 }
 
@@ -166,75 +166,3 @@ export default {
   setup
 }
 </script>
-
-
-<!--
-
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0" v-t="'PKI Providers'"></h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-dropdown :text="$t('New PKI Provider')" variant="outline-primary">
-          <b-dropdown-item :to="{ name: 'newPkiProvider', params: { providerType: 'packetfence_local' } }">Packetfence Local</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newPkiProvider', params: { providerType: 'packetfence_pki' } }">Packetfence PKI</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newPkiProvider', params: { providerType: 'scep' } }">SCEP PKI</b-dropdown-item>
-        </b-dropdown>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No PKI Providers found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1 text-nowrap" :disabled="isLoading" :confirm="$t('Delete PKI Provider?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/pkiProvider'
-
-export default {
-  name: 'pki-providers-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_pki_providers/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'clonePkiProvider', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_pki_providers/deletePkiProvider', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
--->
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
index 8f591383463e..2d7c863f54ec 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
@@ -1,5 +1,6 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
+import { pkiProvidersTypes } from '../config'
 
 export const useItemProps = {
   id: {
@@ -40,7 +41,7 @@ export const useItemTitleBadge = (props, context, form) => {
   const {
     providerType
   } = toRefs(props)
-  return computed(() => (providerType.value || form.value.type))
+  return computed(() => pkiProvidersTypes[providerType.value || form.value.type])
 }
 
 export { useRouter } from '../_router'
@@ -77,7 +78,6 @@ export const useStore = (props, context, form) => {
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
 import api from '../_api'
-import { types } from '../config'
 export const useSearch = makeSearch('pkiProviders', {
   api,
   columns: [
@@ -100,7 +100,7 @@ export const useSearch = makeSearch('pkiProviders', {
       searchable: true,
       sortable: true,
       visible: true,
-      formatter: value => types[value]
+      formatter: value => pkiProvidersTypes[value]
     },
     {
       key: 'buttons',
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/config.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/config.js
index d9ec8ab2bf10..5e43f516f15f 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/config.js
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/config.js
@@ -1,5 +1,11 @@
-export const types = {
-  packetfence_local:  'Packetfence Local',
-  packetfence_pki:    'Packetfence PKI',
-  scep:               'SCEP PKI'
-}
\ No newline at end of file
+import i18n from '@/utils/locale'
+
+export const pkiProvidersTypes = {
+  packetfence_local:  i18n.t('Packetfence Local'),
+  packetfence_pki:    i18n.t('Packetfence PKI'),
+  scep:               i18n.t('SCEP PKI')
+}
+
+export const pkiProvidersTypeOptions = Object.keys(pkiProvidersTypes)
+  .sort((a, b) => pkiProvidersTypes[a].localeCompare(pkiProvidersTypes[b]))
+  .map(key => ({ value: key, text: pkiProvidersTypes[key] }))
\ No newline at end of file

From 9ed38dcc88abe03d35a0ff4462df44b406787ae2 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Fri, 11 Jun 2021 12:39:35 -0400
Subject: [PATCH 34/72] tweak search to default w/ list instead of search

---
 .../root/src/components/new/BaseSearch.vue            | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/html/pfappserver/root/src/components/new/BaseSearch.vue b/html/pfappserver/root/src/components/new/BaseSearch.vue
index 3ecf4659843d..049f4682baaa 100644
--- a/html/pfappserver/root/src/components/new/BaseSearch.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearch.vue
@@ -148,16 +148,15 @@ const setup = (props) => {
         if (_conditionAdvanced) {
           conditionAdvanced.value = _conditionAdvanced
           advancedMode.value = true
-          doSearchCondition(conditionAdvanced.value)
+          return doSearchCondition(conditionAdvanced.value)
         }
-        else {
-          conditionBasic.value = _conditionBasic || ''
+        if (_conditionBasic) {
+          conditionBasic.value = _conditionBasic
           advancedMode.value = false
-          doSearchString(conditionBasic.value)
+          return doSearchString(conditionBasic.value)
         }
       }
-      else
-        doReset()
+      doReset()
     })
   })
 

From fa6c930cb6c38a84c7ff0cac58bf3e2add8ee694 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Fri, 11 Jun 2021 15:09:28 -0400
Subject: [PATCH 35/72] add advanced search to radius

---
 .../_components/RadiusEapList.vue             |  69 -------
 .../_components/RadiusFastList.vue            |  69 -------
 .../_components/RadiusOcspList.vue            |  69 -------
 .../_components/RadiusSslList.vue             |  69 -------
 .../Configuration/_components/RadiusTabs.vue  |  32 ++--
 .../_components/RadiusTlsList.vue             |  69 -------
 .../views/Configuration/_config/radius/eap.js |  92 ----------
 .../Configuration/_config/radius/fast.js      |  68 -------
 .../Configuration/_config/radius/ocsp.js      |  62 -------
 .../views/Configuration/_config/radius/ssl.js |  62 -------
 .../views/Configuration/_config/radius/tls.js |  74 --------
 .../views/Configuration/radius/eap/_api.js    |  27 +--
 .../radius/eap/_components/TheSearch.vue      | 168 ++++++++++++++++++
 .../radius/eap/_composables/useCollection.js  |  80 +++++++++
 .../views/Configuration/radius/eap/_router.js |   3 +-
 .../views/Configuration/radius/eap/_store.js  |  14 +-
 .../views/Configuration/radius/fast/_api.js   |  27 +--
 .../radius/fast/_components/TheSearch.vue     | 168 ++++++++++++++++++
 .../radius/fast/_composables/useCollection.js |  52 ++++++
 .../Configuration/radius/fast/_router.js      |   3 +-
 .../views/Configuration/radius/fast/_store.js |  14 +-
 .../views/Configuration/radius/ocsp/_api.js   |  27 +--
 .../radius/ocsp/_components/TheSearch.vue     | 168 ++++++++++++++++++
 .../radius/ocsp/_composables/useCollection.js |  45 +++++
 .../Configuration/radius/ocsp/_router.js      |   3 +-
 .../views/Configuration/radius/ocsp/_store.js |  14 +-
 .../views/Configuration/radius/ssl/_api.js    |  27 +--
 .../radius/ssl/_components/TheSearch.vue      | 168 ++++++++++++++++++
 .../radius/ssl/_composables/useCollection.js  |  46 +++++
 .../views/Configuration/radius/ssl/_router.js |   3 +-
 .../views/Configuration/radius/ssl/_store.js  |  14 +-
 .../views/Configuration/radius/tls/_api.js    |  27 +--
 .../radius/tls/_components/TheSearch.vue      | 168 ++++++++++++++++++
 .../radius/tls/_composables/useCollection.js  |  60 +++++++
 .../views/Configuration/radius/tls/_router.js |   3 +-
 .../views/Configuration/radius/tls/_store.js  |  14 +-
 36 files changed, 1264 insertions(+), 814 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/RadiusEapList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/RadiusFastList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/RadiusOcspList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/RadiusSslList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/RadiusTlsList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/radius/eap.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/radius/fast.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/radius/ocsp.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/radius/ssl.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/radius/tls.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/views/Configuration/_components/RadiusEapList.vue b/html/pfappserver/root/src/views/Configuration/_components/RadiusEapList.vue
deleted file mode 100644
index 976a573618f3..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/RadiusEapList.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">{{ $t('EAP Profiles') }}</h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newRadiusEap' }">{{ $t('New EAP Profile') }}</b-button>
-        <pf-button-service service="radiusd-acct" class="ml-1" restart start stop :disabled="isLoading"></pf-button-service>
-        <pf-button-service service="radiusd-auth" class="ml-1" restart start stop :disabled="isLoading"></pf-button-service>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No EAP profiles found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Profile?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonService from '@/components/pfButtonService'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import {
-  config
-} from '../_config/radius/eap'
-
-export default {
-  name: 'radius-eap-list',
-  components: {
-    pfButtonDelete,
-    pfButtonService,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_radius_eap/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneRadiusEap', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_radius_eap/deleteRadiusEap', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/RadiusFastList.vue b/html/pfappserver/root/src/views/Configuration/_components/RadiusFastList.vue
deleted file mode 100644
index 3ad35f6dd466..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/RadiusFastList.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">{{ $t('Fast Profiles') }}</h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newRadiusFast' }">{{ $t('New Fast Profile') }}</b-button>
-        <pf-button-service service="radiusd-acct" class="ml-1" restart start stop :disabled="isLoading"></pf-button-service>
-        <pf-button-service service="radiusd-auth" class="ml-1" restart start stop :disabled="isLoading"></pf-button-service>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No Fast profiles found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Profile?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonService from '@/components/pfButtonService'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import {
-  config
-} from '../_config/radius/fast'
-
-export default {
-  name: 'radius-fast-list',
-  components: {
-    pfButtonDelete,
-    pfButtonService,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_radius_fast/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneRadiusFast', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_radius_fast/deleteRadiusFast', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/RadiusOcspList.vue b/html/pfappserver/root/src/views/Configuration/_components/RadiusOcspList.vue
deleted file mode 100644
index bd08b16082f2..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/RadiusOcspList.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">{{ $t('OCSP Profiles') }}</h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newRadiusOcsp' }">{{ $t('New OCSP Profile') }}</b-button>
-        <pf-button-service service="radiusd-acct" class="ml-1" restart start stop :disabled="isLoading"></pf-button-service>
-        <pf-button-service service="radiusd-auth" class="ml-1" restart start stop :disabled="isLoading"></pf-button-service>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No OCSP profiles found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Profile?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonService from '@/components/pfButtonService'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import {
-  config
-} from '../_config/radius/ocsp'
-
-export default {
-  name: 'radius-ocsp-list',
-  components: {
-    pfButtonDelete,
-    pfButtonService,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_radius_ocsp/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneRadiusOcsp', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_radius_ocsp/deleteRadiusOcsp', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/RadiusSslList.vue b/html/pfappserver/root/src/views/Configuration/_components/RadiusSslList.vue
deleted file mode 100644
index b7d1460dd4f5..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/RadiusSslList.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">{{ $t('SSL Certificates') }}</h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newRadiusSsl' }">{{ $t('New SSL Certificate') }}</b-button>
-        <pf-button-service service="radiusd-acct" class="ml-1" restart start stop :disabled="isLoading"></pf-button-service>
-        <pf-button-service service="radiusd-auth" class="ml-1" restart start stop :disabled="isLoading"></pf-button-service>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No SSL certificates found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Certificate?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonService from '@/components/pfButtonService'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import {
-  config
-} from '../_config/radius/ssl'
-
-export default {
-  name: 'radius-ssl-list',
-  components: {
-    pfButtonDelete,
-    pfButtonService,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_radius_ssl/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneRadiusSsl', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_radius_ssl/deleteRadiusSsl', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/RadiusTabs.vue b/html/pfappserver/root/src/views/Configuration/_components/RadiusTabs.vue
index 1832d5d03939..6111eab81c11 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/RadiusTabs.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/RadiusTabs.vue
@@ -3,24 +3,24 @@
     <b-card-header>
       <h4 class="mb-0" v-t="'RADIUS'"></h4>
     </b-card-header>
-    <b-tabs ref="tabs" v-model="tabIndex" card>
+    <b-tabs ref="tabs" v-model="tabIndex" card lazy>
       <b-tab :title="$t('General Configuration')" @click="changeTab('radiusGeneral')">
         <radius-general-view />
       </b-tab>
       <b-tab :title="$t('EAP Profiles')" @click="changeTab('radiusEaps')">
-        <radius-eap-list />
+        <radius-eap-search />
       </b-tab>
       <b-tab :title="$t('TLS Profiles')" @click="changeTab('radiusTlss')">
-        <radius-tls-list />
+        <radius-tls-search />
       </b-tab>
       <b-tab :title="$t('Fast Profiles')" @click="changeTab('radiusFasts')">
-        <radius-fast-list />
+        <radius-fast-search />
       </b-tab>
       <b-tab :title="$t('SSL Certificates')" @click="changeTab('radiusSsls')">
-        <radius-ssl-list />
+        <radius-ssl-search />
       </b-tab>
       <b-tab :title="$t('OCSP Profiles')" @click="changeTab('radiusOcsps')">
-        <radius-ocsp-list />
+        <radius-ocsp-search />
       </b-tab>
     </b-tabs>
   </b-card>
@@ -28,21 +28,21 @@
 
 <script>
 import RadiusGeneralView from '../radius/general/_components/TheView'
-import RadiusEapList from './RadiusEapList'
-import RadiusTlsList from './RadiusTlsList'
-import RadiusFastList from './RadiusFastList'
-import RadiusSslList from './RadiusSslList'
-import RadiusOcspList from './RadiusOcspList'
+import RadiusEapSearch from '../radius/eap/_components/TheSearch'
+import RadiusTlsSearch from '../radius/tls/_components/TheSearch'
+import RadiusFastSearch from '../radius/fast/_components/TheSearch'
+import RadiusSslSearch from '../radius/ssl/_components/TheSearch'
+import RadiusOcspSearch from '../radius/ocsp/_components/TheSearch'
 
 export default {
   name: 'pkis-tabs',
   components: {
     RadiusGeneralView,
-    RadiusEapList,
-    RadiusTlsList,
-    RadiusFastList,
-    RadiusSslList,
-    RadiusOcspList
+    RadiusEapSearch,
+    RadiusTlsSearch,
+    RadiusFastSearch,
+    RadiusSslSearch,
+    RadiusOcspSearch
   },
   props: {
     tab: {
diff --git a/html/pfappserver/root/src/views/Configuration/_components/RadiusTlsList.vue b/html/pfappserver/root/src/views/Configuration/_components/RadiusTlsList.vue
deleted file mode 100644
index 4b312f3e3328..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/RadiusTlsList.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">{{ $t('TLS Profiles') }}</h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newRadiusTls' }">{{ $t('New TLS Profile') }}</b-button>
-        <pf-button-service service="radiusd-acct" class="ml-1" restart start stop :disabled="isLoading"></pf-button-service>
-        <pf-button-service service="radiusd-auth" class="ml-1" restart start stop :disabled="isLoading"></pf-button-service>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No TLS profiles found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Profile?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonService from '@/components/pfButtonService'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import {
-  config
-} from '../_config/radius/tls'
-
-export default {
-  name: 'radius-tls-list',
-  components: {
-    pfButtonDelete,
-    pfButtonService,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_radius_tls/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneRadiusTls', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_radius_tls/deleteRadiusTls', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_config/radius/eap.js b/html/pfappserver/root/src/views/Configuration/_config/radius/eap.js
deleted file mode 100644
index 733199185845..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/radius/eap.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'default_eap_type',
-    label: 'Default EAP', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'tls_tlsprofile',
-    label: 'TLS Profile', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'ttls_tlsprofile',
-    label: 'TTLS Profile', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'peap_tlsprofile',
-    label: 'PEAP Profile', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'fast_config',
-    label: 'Fast Profile', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'radiusEap', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/radiusd/eap_profiles',
-      defaultSortKeys: ['id', 'not_deletable'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'radiusEaps' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/radius/fast.js b/html/pfappserver/root/src/views/Configuration/_config/radius/fast.js
deleted file mode 100644
index f23c63f8e0c3..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/radius/fast.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'tls',
-    label: 'TLS', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'radiusFast', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/radiusd/fast_profiles',
-      defaultSortKeys: ['id', 'not_deletable'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'radiusFasts' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/radius/ocsp.js b/html/pfappserver/root/src/views/Configuration/_config/radius/ocsp.js
deleted file mode 100644
index 464a237b3d5f..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/radius/ocsp.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'radiusOcsp', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/radiusd/ocsp_profiles',
-      defaultSortKeys: ['id', 'not_deletable'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'radiusOcsps' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/radius/ssl.js b/html/pfappserver/root/src/views/Configuration/_config/radius/ssl.js
deleted file mode 100644
index 5fd8279c94b9..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/radius/ssl.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'radiusSsl', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/ssl_certificates',
-      defaultSortKeys: ['id', 'not_deletable'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'radiusSsls' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/radius/tls.js b/html/pfappserver/root/src/views/Configuration/_config/radius/tls.js
deleted file mode 100644
index 19d2237befc2..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/radius/tls.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'certificate_profile',
-    label: 'Certificate Profile', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'ocsp',
-    label: 'OCSP Profile', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'radiusTls', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/radiusd/tls_profiles',
-      defaultSortKeys: ['id', 'not_deletable'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'radiusTlss' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_api.js b/html/pfappserver/root/src/views/Configuration/radius/eap/_api.js
index a6d5ccf06959..fd656da195b3 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_api.js
@@ -1,37 +1,42 @@
 import apiCall from '@/utils/api'
 
 export default {
-  radiusEaps: params => {
+  list: params => {
     return apiCall.get('config/radiusd/eap_profiles', { params }).then(response => {
       return response.data
     })
   },
-  radiusEapsOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/radiusd/eap_profiles').then(response => {
       return response.data
     })
   },
-  radiusEap: id => {
-    return apiCall.get(['config', 'radiusd', 'eap_profile', id]).then(response => {
-      return response.data.item
+  search: data => {
+    return apiCall.post('config/radiusd/eap_profiles/search', data).then(response => {
+      return response.data
     })
   },
-  radiusEapOptions: id => {
-    return apiCall.options(['config', 'radiusd', 'eap_profile', id]).then(response => {
+  create: data => {
+    return apiCall.post('config/radiusd/eap_profiles', data).then(response => {
       return response.data
     })
   },
-  createRadiusEap: data => {
-    return apiCall.post('config/radiusd/eap_profiles', data).then(response => {
+  item: id => {
+    return apiCall.get(['config', 'radiusd', 'eap_profile', id]).then(response => {
+      return response.data.item
+    })
+  },
+  itemOptions: id => {
+    return apiCall.options(['config', 'radiusd', 'eap_profile', id]).then(response => {
       return response.data
     })
   },
-  updateRadiusEap: data => {
+  update: data => {
     return apiCall.patch(['config', 'radiusd', 'eap_profile', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteRadiusEap: id => {
+  delete: id => {
     return apiCall.delete(['config', 'radiusd', 'eap_profile', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheSearch.vue
new file mode 100644
index 000000000000..e604066b72af
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheSearch.vue
@@ -0,0 +1,168 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('EAP Profiles') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New EAP Profile') }}</b-button>
+        <base-button-service
+          service="radiusd-acct" restart start stop
+          class="ml-1" />
+        <base-button-service
+          service="radiusd-auth" restart start stop
+          class="ml-1" />
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <base-table-empty :is-loading="isLoading">{{ $i18n.t('No results found') }}</base-table-empty>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Profile?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableEmpty
+} from '@/components/new/'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableEmpty
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js
index f808ed52297a..33d40ef0141c 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js
@@ -47,3 +47,83 @@ export const useStore = (props, context, form) => {
     )
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('radiusEap', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Name', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'default_eap_type',
+      label: 'Default EAP', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'tls_tlsprofile',
+      label: 'TLS Profile', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'ttls_tlsprofile',
+      label: 'TTLS Profile', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'peap_tlsprofile',
+      label: 'PEAP Profile', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'fast_config',
+      label: 'Fast Profile', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_router.js b/html/pfappserver/root/src/views/Configuration/radius/eap/_router.js
index 88bc5f36a305..67d04e0cb860 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_router.js
@@ -11,6 +11,7 @@ export const useRouter = $router => {
       .push({ name: 'radiusEap', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneRadiusEap', params }),
+    goToNew: params => $router.push({ name: 'newRadiusEap', params })
   }
 }
 
@@ -25,7 +26,7 @@ export default [
     path: 'radius/eap',
     name: 'radiusEaps',
     component: TheTabs,
-    props: (route) => ({ tab: 'radiusEaps', query: route.query.query }),
+    props: () => ({ tab: 'radiusEaps' }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_store.js b/html/pfappserver/root/src/views/Configuration/radius/eap/_store.js
index 632456bb18ad..8353c9aa2f58 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_store.js
@@ -29,14 +29,14 @@ const actions = {
       sort: 'id',
       fields: ['id'].join(',')
     }
-    return api.radiusEaps(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.radiusEapOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -44,7 +44,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.radiusEapsOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -58,7 +58,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.radiusEap(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -68,7 +68,7 @@ const actions = {
   },
   createRadiusEap: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createRadiusEap(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -78,7 +78,7 @@ const actions = {
   },
   updateRadiusEap: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateRadiusEap(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -88,7 +88,7 @@ const actions = {
   },
   deleteRadiusEap: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteRadiusEap(id).then(response => {
+    return api.delete(id).then(response => {
       commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_api.js b/html/pfappserver/root/src/views/Configuration/radius/fast/_api.js
index f5440ca643cb..3ab35b43cc16 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_api.js
@@ -1,37 +1,42 @@
 import apiCall from '@/utils/api'
 
 export default {
-  radiusFasts: params => {
+  list: params => {
     return apiCall.get('config/radiusd/fast_profiles', { params }).then(response => {
       return response.data
     })
   },
-  radiusFastsOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/radiusd/fast_profiles').then(response => {
       return response.data
     })
   },
-  radiusFast: id => {
-    return apiCall.get(['config', 'radiusd', 'fast_profile', id]).then(response => {
-      return response.data.item
+  search: data => {
+    return apiCall.post('config/radiusd/fast_profiles/search', data).then(response => {
+      return response.data
     })
   },
-  radiusFastOptions: id => {
-    return apiCall.options(['config', 'radiusd', 'fast_profile', id]).then(response => {
+  create: data => {
+    return apiCall.post('config/radiusd/fast_profiles', data).then(response => {
       return response.data
     })
   },
-  createRadiusFast: data => {
-    return apiCall.post('config/radiusd/fast_profiles', data).then(response => {
+  item: id => {
+    return apiCall.get(['config', 'radiusd', 'fast_profile', id]).then(response => {
+      return response.data.item
+    })
+  },
+  itemOptions: id => {
+    return apiCall.options(['config', 'radiusd', 'fast_profile', id]).then(response => {
       return response.data
     })
   },
-  updateRadiusFast: data => {
+  update: data => {
     return apiCall.patch(['config', 'radiusd', 'fast_profile', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteRadiusFast: id => {
+  delete: id => {
     return apiCall.delete(['config', 'radiusd', 'fast_profile', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheSearch.vue
new file mode 100644
index 000000000000..e2e83b1a98f4
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheSearch.vue
@@ -0,0 +1,168 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('Fast Profiles') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New Fast Profile') }}</b-button>
+        <base-button-service
+          service="radiusd-acct" restart start stop
+          class="ml-1" />
+        <base-button-service
+          service="radiusd-auth" restart start stop
+          class="ml-1" />
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <base-table-empty :is-loading="isLoading">{{ $i18n.t('No results found') }}</base-table-empty>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Profile?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableEmpty
+} from '@/components/new/'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableEmpty
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js
index 049849107135..d5f3d5f41439 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js
@@ -47,3 +47,55 @@ export const useStore = (props, context, form) => {
     )
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('radiusFast', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Name', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'tls',
+      label: 'TLS', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_router.js b/html/pfappserver/root/src/views/Configuration/radius/fast/_router.js
index 4c6a10f4bbfc..3942f27ad0a9 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_router.js
@@ -11,6 +11,7 @@ export const useRouter = $router => {
       .push({ name: 'radiusFast', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneRadiusFast', params }),
+    goToNew: params => $router.push({ name: 'newRadiusFast', params })
   }
 }
 
@@ -25,7 +26,7 @@ export default [
     path: 'radius/fast',
     name: 'radiusFasts',
     component: TheTabs,
-    props: (route) => ({ tab: 'radiusFasts', query: route.query.query }),
+    props: () => ({ tab: 'radiusFasts' }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_store.js b/html/pfappserver/root/src/views/Configuration/radius/fast/_store.js
index 5506d6e03759..fa1ff25fe054 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_store.js
@@ -29,14 +29,14 @@ const actions = {
       sort: 'id',
       fields: ['id'].join(',')
     }
-    return api.radiusFasts(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.radiusFastOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -44,7 +44,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.radiusFastsOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -58,7 +58,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.radiusFast(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -68,7 +68,7 @@ const actions = {
   },
   createRadiusFast: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createRadiusFast(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -78,7 +78,7 @@ const actions = {
   },
   updateRadiusFast: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateRadiusFast(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -88,7 +88,7 @@ const actions = {
   },
   deleteRadiusFast: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteRadiusFast(id).then(response => {
+    return api.delete(id).then(response => {
       commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_api.js b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_api.js
index b25ad6057d3c..bea4738eff4f 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_api.js
@@ -1,37 +1,42 @@
 import apiCall from '@/utils/api'
 
 export default {
-  radiusOcsps: params => {
+  list: params => {
     return apiCall.get('config/radiusd/ocsp_profiles', { params }).then(response => {
       return response.data
     })
   },
-  radiusOcspsOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/radiusd/ocsp_profiles').then(response => {
       return response.data
     })
   },
-  radiusOcsp: id => {
-    return apiCall.get(['config', 'radiusd', 'ocsp_profile', id]).then(response => {
-      return response.data.item
+  search: data => {
+    return apiCall.post('config/radiusd/ocsp_profiles/search', data).then(response => {
+      return response.data
     })
   },
-  radiusOcspOptions: id => {
-    return apiCall.options(['config', 'radiusd', 'ocsp_profile', id]).then(response => {
+  create: data => {
+    return apiCall.post('config/radiusd/ocsp_profiles', data).then(response => {
       return response.data
     })
   },
-  createRadiusOcsp: data => {
-    return apiCall.post('config/radiusd/ocsp_profiles', data).then(response => {
+  item: id => {
+    return apiCall.get(['config', 'radiusd', 'ocsp_profile', id]).then(response => {
+      return response.data.item
+    })
+  },
+  itemOptions: id => {
+    return apiCall.options(['config', 'radiusd', 'ocsp_profile', id]).then(response => {
       return response.data
     })
   },
-  updateRadiusOcsp: data => {
+  update: data => {
     return apiCall.patch(['config', 'radiusd', 'ocsp_profile', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteRadiusOcsp: id => {
+  delete: id => {
     return apiCall.delete(['config', 'radiusd', 'ocsp_profile', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheSearch.vue
new file mode 100644
index 000000000000..74cb88fdc9a3
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheSearch.vue
@@ -0,0 +1,168 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('OCSP Profiles') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New OCSP Profile') }}</b-button>
+        <base-button-service
+          service="radiusd-acct" restart start stop
+          class="ml-1" />
+        <base-button-service
+          service="radiusd-auth" restart start stop
+          class="ml-1" />
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <base-table-empty :is-loading="isLoading">{{ $i18n.t('No results found') }}</base-table-empty>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Profile?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableEmpty
+} from '@/components/new/'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableEmpty
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js
index 322e99fda482..35c84ce77ad5 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js
@@ -47,3 +47,48 @@ export const useStore = (props, context, form) => {
     )
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('radiusOcsp', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Name', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_router.js b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_router.js
index 6b4f9f7d3b69..8759e06cf23c 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_router.js
@@ -11,6 +11,7 @@ export const useRouter = $router => {
       .push({ name: 'radiusOcsp', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneRadiusOcsp', params }),
+    goToNew: params => $router.push({ name: 'newRadiusOcsp', params })
   }
 }
 
@@ -25,7 +26,7 @@ export default [
     path: 'radius/ocsp',
     name: 'radiusOcsps',
     component: TheTabs,
-    props: (route) => ({ tab: 'radiusOcsps', query: route.query.query }),
+    props: () => ({ tab: 'radiusOcsps' }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_store.js b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_store.js
index 57ccc92949a5..ec72b3dd7bff 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_store.js
@@ -29,14 +29,14 @@ const actions = {
       sort: 'id',
       fields: ['id'].join(',')
     }
-    return api.radiusOcsps(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.radiusOcspOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -44,7 +44,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.radiusOcspsOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -58,7 +58,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.radiusOcsp(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -68,7 +68,7 @@ const actions = {
   },
   createRadiusOcsp: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createRadiusOcsp(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -78,7 +78,7 @@ const actions = {
   },
   updateRadiusOcsp: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateRadiusOcsp(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -88,7 +88,7 @@ const actions = {
   },
   deleteRadiusOcsp: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteRadiusOcsp(id).then(response => {
+    return api.delete(id).then(response => {
       commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_api.js b/html/pfappserver/root/src/views/Configuration/radius/ssl/_api.js
index e08701aab665..b7466ec30b21 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_api.js
@@ -1,37 +1,42 @@
 import apiCall from '@/utils/api'
 
 export default {
-  radiusSsls: params => {
+  list: params => {
     return apiCall.get('config/ssl_certificates', { params }).then(response => {
       return response.data
     })
   },
-  radiusSslsOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/ssl_certificates').then(response => {
       return response.data
     })
   },
-  radiusSsl: id => {
-    return apiCall.get(['config', 'ssl_certificate', id]).then(response => {
-      return response.data.item
+  search: data => {
+    return apiCall.post('config/ssl_certificates/search', data).then(response => {
+      return response.data
     })
   },
-  radiusSslOptions: id => {
-    return apiCall.options(['config', 'ssl_certificate', id]).then(response => {
+  create: data => {
+    return apiCall.post('config/ssl_certificates', data).then(response => {
       return response.data
     })
   },
-  createRadiusSsl: data => {
-    return apiCall.post('config/ssl_certificates', data).then(response => {
+  item: id => {
+    return apiCall.get(['config', 'ssl_certificate', id]).then(response => {
+      return response.data.item
+    })
+  },
+  itemOptions: id => {
+    return apiCall.options(['config', 'ssl_certificate', id]).then(response => {
       return response.data
     })
   },
-  updateRadiusSsl: data => {
+  update: data => {
     return apiCall.patch(['config', 'ssl_certificate', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteRadiusSsl: id => {
+  delete: id => {
     return apiCall.delete(['config', 'ssl_certificate', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheSearch.vue
new file mode 100644
index 000000000000..01b2c863fab5
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheSearch.vue
@@ -0,0 +1,168 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('SSL Certificates') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New SSL Certificate') }}</b-button>
+        <base-button-service
+          service="radiusd-acct" restart start stop
+          class="ml-1" />
+        <base-button-service
+          service="radiusd-auth" restart start stop
+          class="ml-1" />
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <base-table-empty :is-loading="isLoading">{{ $i18n.t('No results found') }}</base-table-empty>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Certificate?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableEmpty
+} from '@/components/new/'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableEmpty
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js
index 2c5f241b7b1b..5e2d2c88f099 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js
@@ -42,3 +42,49 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_radius_ssl/updateRadiusSsl', form.value),
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('radiusSsl', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Name', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null }
+    ] }
+  ] })
+})
+
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_router.js b/html/pfappserver/root/src/views/Configuration/radius/ssl/_router.js
index 11e4e9f8c997..a8b278453542 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_router.js
@@ -11,6 +11,7 @@ export const useRouter = $router => {
       .push({ name: 'radiusSsl', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneRadiusSsl', params }),
+    goToNew: params => $router.push({ name: 'newRadiusFast', params })
   }
 }
 
@@ -25,7 +26,7 @@ export default [
     path: 'radius/ssl',
     name: 'radiusSsls',
     component: TheTabs,
-    props: (route) => ({ tab: 'radiusSsls', query: route.query.query }),
+    props: () => ({ tab: 'radiusSsls' }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_store.js b/html/pfappserver/root/src/views/Configuration/radius/ssl/_store.js
index e61cea87a045..460670692a62 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_store.js
@@ -29,14 +29,14 @@ const actions = {
       sort: 'id',
       fields: ['id'].join(',')
     }
-    return api.radiusSsls(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.radiusSslOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -44,7 +44,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.radiusSslsOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -58,7 +58,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.radiusSsl(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -68,7 +68,7 @@ const actions = {
   },
   createRadiusSsl: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createRadiusSsl(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -78,7 +78,7 @@ const actions = {
   },
   updateRadiusSsl: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateRadiusSsl(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -88,7 +88,7 @@ const actions = {
   },
   deleteRadiusSsl: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteRadiusSsl(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_api.js b/html/pfappserver/root/src/views/Configuration/radius/tls/_api.js
index 5aa969bffd15..579232648ecc 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_api.js
@@ -1,37 +1,42 @@
 import apiCall from '@/utils/api'
 
 export default {
-  radiusTlss: params => {
+  list: params => {
     return apiCall.get('config/radiusd/tls_profiles', { params }).then(response => {
       return response.data
     })
   },
-  radiusTlssOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/radiusd/tls_profiles').then(response => {
       return response.data
     })
   },
-  radiusTls: id => {
-    return apiCall.get(['config', 'radiusd', 'tls_profile', id]).then(response => {
-      return response.data.item
+  search: data => {
+    return apiCall.post('config/radiusd/tls_profiles/search', data).then(response => {
+      return response.data
     })
   },
-  radiusTlsOptions: id => {
-    return apiCall.options(['config', 'radiusd', 'tls_profile', id]).then(response => {
+  create: data => {
+    return apiCall.post('config/radiusd/tls_profiles', data).then(response => {
       return response.data
     })
   },
-  createRadiusTls: data => {
-    return apiCall.post('config/radiusd/tls_profiles', data).then(response => {
+  item: id => {
+    return apiCall.get(['config', 'radiusd', 'tls_profile', id]).then(response => {
+      return response.data.item
+    })
+  },
+  itemOptions: id => {
+    return apiCall.options(['config', 'radiusd', 'tls_profile', id]).then(response => {
       return response.data
     })
   },
-  updateRadiusTls: data => {
+  update: data => {
     return apiCall.patch(['config', 'radiusd', 'tls_profile', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteRadiusTls: id => {
+  delete: id => {
     return apiCall.delete(['config', 'radiusd', 'tls_profile', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheSearch.vue
new file mode 100644
index 000000000000..68d584a6de58
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheSearch.vue
@@ -0,0 +1,168 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('TLS Profiles') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New TLS Profile') }}</b-button>
+        <base-button-service
+          service="radiusd-acct" restart start stop
+          class="ml-1" />
+        <base-button-service
+          service="radiusd-auth" restart start stop
+          class="ml-1" />
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <base-table-empty :is-loading="isLoading">{{ $i18n.t('No results found') }}</base-table-empty>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Profile?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableEmpty
+} from '@/components/new/'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableEmpty
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js
index c0664ae29849..174a79beff2b 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js
@@ -42,3 +42,63 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_radius_tls/updateRadiusTls', form.value),
   }
 }
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('radiusTls', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Name', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'certificate_profile',
+      label: 'Certificate Profile', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'ocsp',
+      label: 'OCSP Profile', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'contains', value: null }
+    ] }
+  ] })
+})
+
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_router.js b/html/pfappserver/root/src/views/Configuration/radius/tls/_router.js
index c5aca6e3d28e..13f3ca4ee789 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_router.js
@@ -11,6 +11,7 @@ export const useRouter = $router => {
       .push({ name: 'radiusTls', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneRadiusTls', params }),
+    goToNew: params => $router.push({ name: 'newRadiusTls', params })
   }
 }
 
@@ -25,7 +26,7 @@ export default [
     path: 'radius/tls',
     name: 'radiusTlss',
     component: TheTabs,
-    props: (route) => ({ tab: 'radiusTlss', query: route.query.query }),
+    props: () => ({ tab: 'radiusTlss' }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_store.js b/html/pfappserver/root/src/views/Configuration/radius/tls/_store.js
index 121f13870574..7fc278462ec7 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_store.js
@@ -29,14 +29,14 @@ const actions = {
       sort: 'id',
       fields: ['id'].join(',')
     }
-    return api.radiusTlss(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.radiusTlsOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -44,7 +44,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.radiusTlssOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -58,7 +58,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.radiusTls(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -68,7 +68,7 @@ const actions = {
   },
   createRadiusTls: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createRadiusTls(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -78,7 +78,7 @@ const actions = {
   },
   updateRadiusTls: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateRadiusTls(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -88,7 +88,7 @@ const actions = {
   },
   deleteRadiusTls: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteRadiusTls(id).then(response => {
+    return api.delete(id).then(response => {
       commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {

From 334332d2f91b3dec71b6e4df64ce25e4fd0166ee Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Tue, 15 Jun 2021 18:19:48 -0400
Subject: [PATCH 36/72] rework useStore composable in collections

---
 .../root/src/components/new/BaseSearch.vue    |   4 +-
 .../new/BaseSearchInputAdvanced.vue           |  44 ++--
 .../Configuration/_components/DomainsTabs.vue |   8 +-
 .../_components/NetworksTabs.vue              |   2 +-
 .../_composables/useViewCollectionItem.js     |  42 ++--
 .../useViewCollectionItemFixed.js             |   4 +-
 .../_composables/useViewResource.js           |   8 +-
 .../Configuration/_store/factory/search.js    |   2 +-
 .../adminRoles/_components/TheView.js         |  11 +-
 .../adminRoles/_composables/useCollection.js  |  41 +---
 .../views/Configuration/adminRoles/_store.js  |  24 ++-
 .../billingTiers/_components/TheForm.vue      |   3 -
 .../billingTiers/_components/TheView.js       |  20 +-
 .../_composables/useCollection.js             |  22 +-
 .../Configuration/billingTiers/_store.js      |  18 ++
 .../_components/TheSearch.vue                 |  17 +-
 .../connectionProfiles/_components/TheView.js |   6 +-
 .../_composables/useCollection.js             |  23 +--
 .../connectionProfiles/_store.js              |  19 ++
 .../domains/_components/TheSearch.vue         |   2 +-
 .../domains/_components/TheView.js            |   9 +-
 .../domains/_composables/useCollection.js     |  15 +-
 .../views/Configuration/domains/_router.js    |   2 +-
 .../src/views/Configuration/domains/_store.js |  18 ++
 .../filterEngines/_components/TheForm.vue     |   1 +
 .../filterEngines/_components/TheSearch.vue   |   4 +-
 .../filterEngines/_components/TheView.js      |   9 +-
 .../_composables/useCollection.js             |  25 +--
 .../Configuration/filterEngines/_store.js     |  28 +++
 .../combinations/_components/TheView.js       |   8 +-
 .../_composables/useCollection.js             |  14 +-
 .../fingerbank/combinations/_store.js         |  11 +
 .../fingerbank/devices/_components/TheView.js |   8 +-
 .../devices/_composables/useCollection.js     |  14 +-
 .../fingerbank/devices/_store.js              |  11 +
 .../dhcpFingerprints/_components/TheView.js   |   8 +-
 .../_composables/useCollection.js             |  14 +-
 .../fingerbank/dhcpFingerprints/_store.js     |  11 +
 .../dhcpVendors/_components/TheView.js        |   8 +-
 .../dhcpVendors/_composables/useCollection.js |  14 +-
 .../fingerbank/dhcpVendors/_store.js          |  11 +
 .../dhcpv6Enterprises/_components/TheView.js  |   8 +-
 .../_composables/useCollection.js             |  14 +-
 .../fingerbank/dhcpv6Enterprises/_store.js    |  11 +
 .../dhcpv6Fingerprints/_components/TheView.js |   8 +-
 .../_composables/useCollection.js             |  14 +-
 .../fingerbank/dhcpv6Fingerprints/_store.js   |  11 +
 .../macVendors/_components/TheView.js         |   8 +-
 .../macVendors/_composables/useCollection.js  |  14 +-
 .../fingerbank/macVendors/_store.js           |  11 +
 .../userAgents/_components/TheView.js         |   8 +-
 .../userAgents/_composables/useCollection.js  |  14 +-
 .../fingerbank/userAgents/_store.js           |  11 +
 .../firewalls/_components/TheView.js          |   9 +-
 .../firewalls/_composables/useCollection.js   |  29 +--
 .../views/Configuration/firewalls/_store.js   |  18 ++
 .../floatingDevices/_components/TheForm.vue   |   3 -
 .../floatingDevices/_components/TheView.js    |  20 +-
 .../_composables/useCollection.js             |  20 +-
 .../Configuration/floatingDevices/_store.js   |  18 ++
 .../maintenanceTasks/_components/TheView.js   |   6 +-
 .../_composables/useCollection.js             |  14 +-
 .../Configuration/maintenanceTasks/_store.js  |  14 ++
 .../_components/TheSearch.vue                 |  17 +-
 .../_components/TheView.js                    |   6 +-
 .../_composables/useCollection.js             |  22 +-
 .../networkBehaviorPolicy/_store.js           |  18 ++
 .../interfaces/_components/TheView.js         |   9 +-
 .../interfaces/_composables/useCollection.js  |  21 +-
 .../networks/interfaces/_store.js             |  16 ++
 .../layer2Networks/_components/TheView.js     |   6 +-
 .../_composables/useCollection.js             |  13 +-
 .../networks/layer2Networks/_store.js         |  12 ++
 .../routedNetworks/_components/TheView.js     |   6 +-
 .../_composables/useCollection.js             |  15 +-
 .../networks/routedNetworks/_store.js         |  14 ++
 .../_components/TheView.js                    |   9 +-
 .../_composables/useCollection.js             |  15 +-
 .../networks/trafficShapingPolicies/_store.js |  14 ++
 .../pki/cas/_components/TheView.js            |   9 +-
 .../pki/cas/_composables/useCollection.js     |  17 +-
 .../src/views/Configuration/pki/cas/_store.js |  15 ++
 .../pki/certs/_components/TheView.js          |   7 +-
 .../pki/certs/_composables/useCollection.js   |  13 +-
 .../views/Configuration/pki/certs/_store.js   |  10 +
 .../pki/profiles/_components/TheView.js       |   9 +-
 .../profiles/_composables/useCollection.js    |  16 +-
 .../Configuration/pki/profiles/_store.js      |  15 ++
 .../pki/revokedCerts/_components/TheView.js   |   9 +-
 .../_composables/useCollection.js             |  12 +-
 .../Configuration/pki/revokedCerts/_store.js  |   9 +
 .../portalModules/_components/TheView.js      |   9 +-
 .../_composables/useCollection.js             |  29 +--
 .../Configuration/portalModules/_store.js     |  18 ++
 .../provisioners/_components/TheView.js       |   9 +-
 .../_composables/useCollection.js             |  29 +--
 .../Configuration/provisioners/_store.js      |  18 ++
 .../radius/eap/_components/TheView.js         |   6 +-
 .../radius/eap/_composables/useCollection.js  |  27 +--
 .../views/Configuration/radius/eap/_store.js  |  18 ++
 .../radius/fast/_components/TheView.js        |   6 +-
 .../radius/fast/_composables/useCollection.js |  27 +--
 .../views/Configuration/radius/fast/_store.js |  18 ++
 .../radius/ocsp/_components/TheView.js        |   6 +-
 .../radius/ocsp/_composables/useCollection.js |  27 +--
 .../views/Configuration/radius/ocsp/_store.js |  18 ++
 .../radius/ssl/_components/TheView.js         |   6 +-
 .../radius/ssl/_composables/useCollection.js  |  22 +-
 .../views/Configuration/radius/ssl/_store.js  |  18 ++
 .../radius/tls/_components/TheView.js         |   6 +-
 .../radius/tls/_composables/useCollection.js  |  22 +-
 .../views/Configuration/radius/tls/_store.js  |  18 ++
 .../src/views/Configuration/realms/_api.js    | 135 +++++++-----
 .../realms/_components/TheForm.vue            |   2 +-
 .../_components/TheSearch.vue}                | 127 +++++++++++-
 .../realms/_components/TheTable.vue           | 195 ++++++++++++++++++
 .../realms/_components/TheView.js             |  17 +-
 .../realms/_composables/useCollection.js      | 108 +++++++++-
 .../src/views/Configuration/realms/_router.js |  27 ++-
 .../src/views/Configuration/realms/_store.js  |  40 +++-
 .../roles/_components/TheView.js              |  11 +-
 .../roles/_composables/useCollection.js       |  22 +-
 .../src/views/Configuration/roles/_store.js   |  18 ++
 .../scanEngines/_components/TheView.js        |   9 +-
 .../scanEngines/_composables/useCollection.js |  29 +--
 .../views/Configuration/scanEngines/_store.js |  18 ++
 .../securityEvents/_components/TheView.js     |  11 +-
 .../_composables/useCollection.js             |  22 +-
 .../Configuration/securityEvents/_store.js    |  18 ++
 .../selfServices/_components/TheView.js       |  11 +-
 .../_composables/useCollection.js             |  22 +-
 .../Configuration/selfServices/_store.js      |  18 ++
 .../sources/_components/TheTable.vue          |  11 +-
 .../sources/_components/TheView.js            |   7 +-
 .../sources/_composables/useCollection.js     |  30 +--
 .../src/views/Configuration/sources/_store.js |  19 ++
 .../switchGroups/_components/TheView.js       |  14 +-
 .../_composables/useCollection.js             |  21 +-
 .../Configuration/switchGroups/_store.js      |  14 ++
 .../switchTemplates/_components/TheView.js    |  11 +-
 .../_composables/useCollection.js             |  22 +-
 .../Configuration/switchTemplates/_store.js   |  18 ++
 .../switches/_components/TheView.js           |  14 +-
 .../switches/_composables/useCollection.js    |  22 +-
 .../views/Configuration/switches/_store.js    |  14 ++
 .../syslogForwarders/_components/TheView.js   |   9 +-
 .../_composables/useCollection.js             |  29 +--
 .../Configuration/syslogForwarders/_store.js  |  18 ++
 .../syslogParsers/_components/TheView.js      |   9 +-
 .../_composables/useCollection.js             |  29 +--
 .../Configuration/syslogParsers/_store.js     |  18 ++
 .../tenants/_components/TheView.js            |  11 +-
 .../tenants/_composables/useCollection.js     |  23 +--
 .../src/views/Configuration/tenants/_store.js |  18 ++
 .../wmiRules/_components/TheView.js           |  11 +-
 .../wmiRules/_composables/useCollection.js    |  22 +-
 .../views/Configuration/wmiRules/_store.js    |  18 ++
 .../Configuration/wrix/_components/TheView.js |  11 +-
 .../wrix/_composables/useCollection.js        |  21 +-
 .../src/views/Configuration/wrix/_store.js    |  16 ++
 .../Nodes/_components/TabDhcpOption82Logs.vue |   7 +-
 .../views/Nodes/_components/TabFingerbank.vue |   5 +-
 .../views/Nodes/_components/TabIp4Logs.vue    |   7 +-
 .../views/Nodes/_components/TabIp6Logs.vue    |   7 +-
 .../Nodes/_components/TabLocationLogs.vue     |  11 +-
 .../Nodes/_components/TabSecurityEvents.vue   |  10 +-
 .../views/Nodes/_components/TheFormCreate.vue |   8 +-
 .../views/Nodes/_components/TheFormUpdate.vue |  30 ++-
 .../views/Nodes/_components/TheViewUpdate.vue |   7 +-
 .../views/Nodes/_composables/useCollection.js |  43 +---
 .../root/src/views/Nodes/_router/index.js     |   9 +
 .../root/src/views/Nodes/_store/index.js      |  17 ++
 172 files changed, 1823 insertions(+), 1235 deletions(-)
 rename html/pfappserver/root/src/views/Configuration/{_components/RealmsList.vue => realms/_components/TheSearch.vue} (65%)
 create mode 100644 html/pfappserver/root/src/views/Configuration/realms/_components/TheTable.vue

diff --git a/html/pfappserver/root/src/components/new/BaseSearch.vue b/html/pfappserver/root/src/components/new/BaseSearch.vue
index 049f4682baaa..4ef036efa98f 100644
--- a/html/pfappserver/root/src/components/new/BaseSearch.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearch.vue
@@ -135,7 +135,7 @@ const setup = (props) => {
 
   const advancedMode = ref(false)
   const conditionBasic = ref(null)
-  const conditionAdvanced = ref(defaultCondition().values) // default
+  const conditionAdvanced = ref(defaultCondition()) // default
 
   onMounted(() => {
     Promise.resolve(saveSearch.value).then(value => {
@@ -186,7 +186,7 @@ const setup = (props) => {
 
   const onSearchReset = () => {
     conditionBasic.value = null
-    conditionAdvanced.value = defaultCondition().values
+    conditionAdvanced.value = defaultCondition()
     setPage(1)
     Promise.resolve(saveSearch.value).then(_saveSearch => {
       const { conditionAdvanced, conditionBasic, ...rest } = _saveSearch || {}
diff --git a/html/pfappserver/root/src/components/new/BaseSearchInputAdvanced.vue b/html/pfappserver/root/src/components/new/BaseSearchInputAdvanced.vue
index 9304263c97c0..a9827b82b465 100644
--- a/html/pfappserver/root/src/components/new/BaseSearchInputAdvanced.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearchInputAdvanced.vue
@@ -1,21 +1,21 @@
 <template>
   <b-container fluid class="base-search-input-advanced px-0">
-    <b-container fluid v-for="(o, oIndex) in value" :key="oIndex"
+    <b-container fluid v-for="(o, oIndex) in value.values" :key="oIndex"
       class="px-0"
     >
       <b-container fluid class="rc px-0 py-1 bg-secondary">
-        <draggable v-model="value[oIndex].values"
+        <draggable v-model="value.values[oIndex].values"
           group="or" handle=".draghandle" filter=".nodrag" dragClass="sortable-drag"
           @start="onDragStart" @end="onDragEnd" :move="onMove"
         >
-          <base-search-input-advanced-rule v-for="(i, iIndex) in value[oIndex].values" :key="iIndex"
-            v-model="value[oIndex].values[iIndex]"
+          <base-search-input-advanced-rule v-for="(i, iIndex) in value.values[oIndex].values" :key="iIndex"
+            v-model="value.values[oIndex].values[iIndex]"
             :disabled="disabled"
             :fields="fields"
             :is-drag="isDrag"
-            :has-parents="value.length > 1"
-            :has-siblings="value[oIndex].values.length > 1"
-            :is-last-child="iIndex === value[oIndex].values.length - 1"
+            :has-parents="value.values.length > 1"
+            :has-siblings="value.values[oIndex].values.length > 1"
+            :is-last-child="iIndex === value.values[oIndex].values.length - 1"
             @add="onAddInnerRule(oIndex)"
             @delete="onDeleteRule(oIndex, iIndex)"
             @search="$emit('search', $event)"
@@ -52,7 +52,7 @@ const components = {
 
 const props = {
   value: {
-    type: Array
+    type: Object
   },
   fields: {
     type: Array
@@ -80,9 +80,9 @@ const setup = (props, context) => {
   }
   const onDragEnd = () => {
     isDrag.value = false
-    for (let i = value.value.length - 1; i >= 0; i--) {
-      if (value.value[i].values.length === 0)
-        value.value.splice(i, 1)
+    for (let i = value.value.values.length - 1; i >= 0; i--) {
+      if (value.value.values[i].values.length === 0)
+        value.value.values.splice(i, 1)
     }
   }
   const onMove = () => {
@@ -94,29 +94,29 @@ const setup = (props, context) => {
     let field = fields.value[0].value
     let op = null
     // clone previous sibling `field` and `op` (if exists)
-    if (value.value[oIndex].values.length > 0) {
-      const lIndex = value.value[oIndex].values.length - 1
-      field = value.value[oIndex].values[lIndex].field
-      op = value.value[oIndex].values[lIndex].op
+    if (value.value.values[oIndex].values.length > 0) {
+      const lIndex = value.value.values[oIndex].values.length - 1
+      field = value.value.values[oIndex].values[lIndex].field
+      op = value.value.values[oIndex].values[lIndex].op
     }
-    value.value[oIndex].values.push({ field, op, value: null })
+    value.value.values[oIndex].values.push({ field, op, value: null })
   }
 
   const onAddOuterRule = () => {
     const rule = { values: [{ field: fields.value[0].value, op: null, value: null }] }
-    if (value.value && value.value.constructor === Array)
-      emit('input', [...value.value, rule])
+    if (value.value.values && value.value.values.constructor === Array)
+      emit('input', [...value.value.values, rule])
     else
       emit('input', [rule])
   }
 
   const onDeleteRule = (oIndex, iIndex) => {
-    if (value.value[oIndex].values.length === 1) {
-      if (value.value.length > 1)
-        value.value.splice(oIndex, 1)
+    if (value.value.values[oIndex].values.length === 1) {
+      if (value.value.values.length > 1)
+        value.value.values.splice(oIndex, 1)
     }
     else
-      value.value[oIndex].values.splice(iIndex, 1)
+      value.value.values[oIndex].values.splice(iIndex, 1)
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/_components/DomainsTabs.vue b/html/pfappserver/root/src/views/Configuration/_components/DomainsTabs.vue
index ec4df684218f..33452d0b5f3d 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/DomainsTabs.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/DomainsTabs.vue
@@ -3,12 +3,12 @@
         <b-card-header>
             <h4 class="mb-0" v-t="'Domains'"></h4>
         </b-card-header>
-        <b-tabs ref="tabs" v-model="tabIndex" card>
+        <b-tabs ref="tabs" v-model="tabIndex" card lazy>
             <b-tab :title="$t('Active Directory Domains')" @click="changeTab('domains')" no-body>
                 <domains-search :autoJoinDomain="autoJoinDomain" />
             </b-tab>
             <b-tab :title="$t('Realms')" @click="changeTab('realms')" no-body>
-                <realms-list />
+                <realms-search />
             </b-tab>
         </b-tabs>
     </b-card>
@@ -16,13 +16,13 @@
 
 <script>
 import DomainsSearch from '../domains/_components/TheSearch'
-import RealmsList from './RealmsList'
+import RealmsSearch from '../realms/_components/TheSearch'
 
 export default {
   name: 'domains-tabs',
   components: {
     DomainsSearch,
-    RealmsList
+    RealmsSearch
   },
   props: {
     tab: {
diff --git a/html/pfappserver/root/src/views/Configuration/_components/NetworksTabs.vue b/html/pfappserver/root/src/views/Configuration/_components/NetworksTabs.vue
index 48f47109c61f..d93d1aa2b778 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/NetworksTabs.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/NetworksTabs.vue
@@ -3,7 +3,7 @@
     <b-card-header>
       <h4 class="mb-0" v-t="'Networks'"></h4>
     </b-card-header>
-    <b-tabs ref="tabs" v-model="tabIndex" card>
+    <b-tabs ref="tabs" v-model="tabIndex" card lazy>
       <b-tab :title="$t('Network Settings')" @click="changeTab('network')">
         <network-view />
       </b-tab>
diff --git a/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItem.js b/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItem.js
index dcab0ef24eae..b6c267bb7885 100644
--- a/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItem.js
+++ b/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItem.js
@@ -59,14 +59,23 @@ export const useViewCollectionItem = (collection, props, context) => {
     )
   )
 
+  const { root: { $router, $store } = {} } = context
+
+  const {
+    goToCollection,
+    goToItem,
+    goToClone,
+  } = useRouter($router)
+
   const {
     isLoading,
-    getOptions = () => (new Promise(r => r())),
+    getListOptions = () => (new Promise(r => r())),
     createItem,
-    deleteItem,
     getItem,
+    getItemOptions = () => (new Promise(r => r())),
+    deleteItem,
     updateItem,
-  } = useStore(props, context, form)
+  } = useStore($store)
 
   const isSaveable = computed(() => {
     if (isNew.value || isClone.value)
@@ -74,13 +83,6 @@ export const useViewCollectionItem = (collection, props, context) => {
     return !!updateItem
   })
 
-  const { root: { $router } = {} } = context
-  const {
-    goToCollection,
-    goToItem,
-    goToClone,
-  } = useRouter($router)
-
   const isCloneable = computed(() => !!goToClone)
 
   const isDeletable = computed(() => {
@@ -97,7 +99,7 @@ export const useViewCollectionItem = (collection, props, context) => {
   const init = () => {
     return new Promise((resolve, reject) => {
       if (!isNew.value) { // existing
-        getOptions().then(options => {
+        getItemOptions().then(options => {
           const { meta: _meta = {} } = options || {}
           meta.value = _meta
           getItem().then(item => {
@@ -118,7 +120,7 @@ export const useViewCollectionItem = (collection, props, context) => {
           })
         })
       } else { // new
-        getOptions().then(options => {
+        getListOptions().then(options => {
           const { meta: _meta = {} } = options || {}
           form.value = useItemDefaults(_meta, props, context)
           meta.value = _meta
@@ -134,16 +136,16 @@ export const useViewCollectionItem = (collection, props, context) => {
 
   const save = () => {
     if (isClone.value || isNew.value)
-      return createItem()
+      return createItem(form.value)
     else
-      return updateItem()
+      return updateItem(form.value)
   }
 
-  const onClose = () => goToCollection(form.value, props, false)
+  const onClose = () => goToCollection()
 
-  const onClone = () => goToClone(form.value, props)
+  const onClone = () => goToClone()
 
-  const onRemove = () => deleteItem().then(() => goToCollection(form.value, props, false))
+  const onRemove = () => deleteItem().then(() => goToCollection())
 
   const onReset = () => init().then(() => isModified.value = false)
 
@@ -153,16 +155,16 @@ export const useViewCollectionItem = (collection, props, context) => {
     const closeAfter = actionKey.value
     save().then(response => {
       if (closeAfter) // [CTRL] key pressed
-        goToCollection(form.value, props, true)
+        goToCollection({ actionKey: true })
       else {
         form.value = { ...form.value, ...response } // merge form w/ newly inserted IDs
-        goToItem(form.value, props).then(() => init()) // re-init
+        goToItem(form.value).then(() => init()) // re-init
       }
     })
   }
 
   const escapeKey = useEventEscapeKey(rootRef)
-  watch(escapeKey, () => goToCollection(form.value, props, false))
+  watch(escapeKey, () => goToCollection())
 
   watch(props, () => init(), { deep: true, immediate: true })
 
diff --git a/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItemFixed.js b/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItemFixed.js
index d16d20dcd0a3..fcf0877f796a 100644
--- a/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItemFixed.js
+++ b/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItemFixed.js
@@ -15,6 +15,8 @@ export const useViewCollectionItemFixed = (collection, props, context) => {
     useStore,
   } = collection
 
+  const { root: { $store } = {} } = context
+
   // template refs
   const rootRef = ref(null)
   useEventJail(rootRef)
@@ -43,7 +45,7 @@ export const useViewCollectionItemFixed = (collection, props, context) => {
     isLoading,
     getItem,
     updateItem,
-  } = useStore(props, context, form)
+  } = useStore($store)
 
   const init = () => {
     return new Promise((resolve, reject) => {
diff --git a/html/pfappserver/root/src/views/Configuration/_composables/useViewResource.js b/html/pfappserver/root/src/views/Configuration/_composables/useViewResource.js
index af75a6eaa6bb..0a14679eaef4 100644
--- a/html/pfappserver/root/src/views/Configuration/_composables/useViewResource.js
+++ b/html/pfappserver/root/src/views/Configuration/_composables/useViewResource.js
@@ -12,6 +12,8 @@ export const useViewResource = (resource, props, context) => {
     useStore,
   } = resource
 
+  const { root: { $store } = {} } = context
+
   // template refs
   const rootRef = ref(null)
   useEventJail(rootRef)
@@ -38,15 +40,15 @@ export const useViewResource = (resource, props, context) => {
 
   const {
     isLoading,
-    getOptions = () => (new Promise(r => r())),
+    getItemOptions = () => (new Promise(r => r())),
     getItem,
     updateItem,
-  } = useStore(props, context, form)
+  } = useStore($store)
   const isSaveable = computed(() => !!updateItem)
 
   const init = () => {
     return new Promise((resolve, reject) => {
-      getOptions().then(options => {
+      getItemOptions().then(options => {
         const { meta: _meta = {} } = options || {}
         meta.value = _meta
         getItem().then(item => {
diff --git a/html/pfappserver/root/src/views/Configuration/_store/factory/search.js b/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
index 1434e7f31d6e..742e4144dec9 100644
--- a/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
+++ b/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
@@ -54,7 +54,7 @@ const factory = (uuid, options = {}) => {
         useColumns,
         useFields,
         useString,
-        useCondition: values => ({ op: 'and', values }),
+        useCondition: condition => condition,
 
         // overload defaults
         ...options,
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheView.js
index e3baafaa9c98..997063fd871b 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheView.js
@@ -10,10 +10,17 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-
 import * as collection from '../_composables/useCollection'
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
index a3e3a67ac2ba..5ca83047c7ad 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
@@ -22,27 +22,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_admin_roles/isLoading']),
-    getOptions: () => $store.dispatch('$_admin_roles/options'),
-    createItem: () => $store.dispatch('$_admin_roles/createAdminRole', form.value),
-    deleteItem: () => $store.dispatch('$_admin_roles/deleteAdminRole', id.value),
-    getItem: () => $store.dispatch('$_admin_roles/getAdminRole', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_admin_roles/updateAdminRole', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import makeSearch from '@/views/Configuration/_store/factory/search'
 import api from '../_api'
@@ -90,25 +70,20 @@ export const useSearch = makeSearch('adminRoles', {
   sortBy: 'id',
   defaultCondition: () => ({ op: 'and', values: [
     { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null },
-      { field: 'description', op: 'contains', value: null }
+      { field: 'id', op: 'not_equals', value: null }
     ] }
-  ] }),
+  ]
+  }),
+/*
   requestInterceptor: request => {
-      // append query in request to omit NONE, ALL, ALL_PF_ONLY from request
-      request.query.values = [
+    // append query in request to omit NONE, ALL, ALL_PF_ONLY from request
+    request.query.values = [
       ...request.query.values,
       { op: 'or', values: [ { field: 'id', op: 'not_equals', value: 'NONE' } ] },
       { op: 'or', values: [ { field: 'id', op: 'not_equals', value: 'ALL' } ] },
       { op: 'or', values: [ { field: 'id', op: 'not_equals', value: 'ALL_PF_ONLY' } ] }
     ]
     return request
-  },
-  /*
-  responseInterceptor: response => { // strip NONE, ALL, ALL_PF_ONLY from results items
-    let { items = [], ...rest } = response
-    items = items.filter(({ id }) => !['NONE', 'ALL', 'ALL_PF_ONLY'].includes(id))
-    return { items, ...rest }
   }
-  */
+*/
 })
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_store.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_store.js
index 168727655a47..d2796d1d6bf0 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_store.js
@@ -2,8 +2,26 @@
 * "$_admin_roles" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_admin_roles/isLoading']),
+    getList: () => $store.dispatch('$_admin_roles/all'),
+    getListOptions: () => $store.dispatch('$_admin_roles/options'),
+    createItem: params => $store.dispatch('$_admin_roles/createAdminRole', params),
+    getItem: params => $store.dispatch('$_admin_roles/getAdminRole', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_admin_roles/options', params.id),
+    updateItem: params => $store.dispatch('$_admin_roles/updateAdminRole', params),
+    deleteItem: params => $store.dispatch('$_admin_roles/deleteAdminRole', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
@@ -88,10 +106,10 @@ const actions = {
       throw err
     })
   },
-  deleteAdminRole: ({ commit }, data) => {
+  deleteAdminRole: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('ITEM_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheForm.vue
index 403932614948..6a40d274627c 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheForm.vue
@@ -69,9 +69,6 @@ export const props = {
   id: {
     type: String
   },
-  tenantId: {
-    type: String
-  },
   form: {
     type: Object
   },
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheView.js
index b067861f2a36..997063fd871b 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheView.js
@@ -10,22 +10,18 @@ const components = {
   TheForm
 }
 
-import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
+import { usePropsWrapper } from '@/composables/useProps'
+import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
+import * as collection from '../_composables/useCollection'
 
-const props = {
-  ...useViewCollectionItemProps,
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  id: {
-    type: String
-  },
-  tenantId: {
-    type: String
-  }
+  return useViewCollectionItem(_collection, props, context)
 }
 
-import * as collection from '../_composables/useCollection'
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
-
 // @vue/component
 export default {
   name: 'the-view',
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
index b64d82caecc3..26367326f282 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
@@ -22,27 +22,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_billing_tiers/isLoading']),
-    getOptions: () => $store.dispatch('$_billing_tiers/options', id.value),
-    createItem: () => $store.dispatch('$_billing_tiers/createBillingTier', form.value),
-    deleteItem: () => $store.dispatch('$_billing_tiers/deleteBillingTier', id.value),
-    getItem: () => $store.dispatch('$_billing_tiers/getBillingTier', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_billing_tiers/updateBillingTier', form.value)
-  }
-}
+export { useStore } from '../_store'
 
 import makeSearch from '@/views/Configuration/_store/factory/search'
 import api from '../_api'
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_store.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_store.js
index cf0172b657de..3b7b0bd43958 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_store.js
@@ -2,8 +2,26 @@
 * "$_billing_tiers" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_billing_tiers/isLoading']),
+    getList: () => $store.dispatch('$_billing_tiers/all'),
+    getListOptions: () => $store.dispatch('$_billing_tiers/options'),
+    createItem: params => $store.dispatch('$_billing_tiers/createBillingTier', params),
+    getItem: params => $store.dispatch('$_billing_tiers/getBillingTier', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_billing_tiers/options', params.id),
+    updateItem: params => $store.dispatch('$_billing_tiers/updateBillingTier', params),
+    deleteItem: params => $store.dispatch('$_billing_tiers/deleteBillingTier', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
index b0181dac138c..141a2c1de043 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
@@ -150,20 +150,19 @@ const setup = (props, context) => {
     useDownload(filename, csv, 'text/csv')
   }
 
-  const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
-  }
-
   const {
+    deleteItem,
     sortItems
-  } = useStore(props, context)
+  } = useStore($store)
+
+  const onRemove = id => {
+    deleteItem({ id })
+      .then(() => reSearch())
+  }
 
   const onSorted = _items => {
     items.value = _items
-    sortItems(items.value.map(item => item.id))
+    sortItems({ items: items.value.map(item => item.id) })
       .then(() => reSearch())
   }
 
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheView.js
index 612e780e90fb..9db7ea055f9a 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheView.js
@@ -12,6 +12,7 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -21,8 +22,11 @@ const props = {
 }
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js
index 9d9f5f787862..9bd9a2651169 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js
@@ -27,28 +27,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_connection_profiles/isLoading']),
-    getOptions: () => $store.dispatch('$_connection_profiles/options', id.value),
-    createItem: () => $store.dispatch('$_connection_profiles/createConnectionProfile', form.value),
-    deleteItem: () => $store.dispatch('$_connection_profiles/deleteConnectionProfile', id.value),
-    getItem: () => $store.dispatch('$_connection_profiles/getConnectionProfile', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_connection_profiles/updateConnectionProfile', form.value),
-    sortItems: params => $store.dispatch('$_connection_profiles/sortConnectionProfiles', params)
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_store.js b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_store.js
index 49bcb54cd259..791a62333113 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_store.js
@@ -2,8 +2,27 @@
 * "$_connection_profiles" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_connection_profiles/isLoading']),
+    getList: () => $store.dispatch('$_connection_profiles/all'),
+    getListOptions: () => $store.dispatch('$_connection_profiles/options'),
+    createItem: params => $store.dispatch('$_connection_profiles/createConnectionProfile', params),
+    sortItems: params => $store.dispatch('$_connection_profiles/sortConnectionProfiles', params.items),
+    getItem: params => $store.dispatch('$_connection_profiles/getConnectionProfile', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_connection_profiles/options', params.id),
+    updateItem: params => $store.dispatch('$_connection_profiles/updateConnectionProfile', params),
+    deleteItem: params => $store.dispatch('$_connection_profiles/deleteConnectionProfile', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
index cad410fd57f3..c01984bc1743 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
@@ -1,7 +1,7 @@
 <template>
   <b-card no-body>
     <b-card-header>
-      <h4 class="d-flex align-items-center">
+      <h4 class="d-flex align-items-center mb-0">
         {{ $t('Active Directory Domains') }}
         <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_microsoft_active_directory_ad" />
       </h4>
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/domains/_components/TheView.js
index 0c8b751c4b42..ea82b8d4d3e4 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/domains/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import i18n from '@/utils/locale'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 
@@ -24,7 +25,13 @@ const props = {
 
 import * as collection from '../_composables/useCollection'
 
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
index af24c9020cd6..40724f0fc503 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
@@ -22,20 +22,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_domains/isLoading']),
-    getOptions: () => $store.dispatch('$_domains/options'),
-    createItem: () => $store.dispatch('$_domains/createDomain', form.value),
-    deleteItem: () => $store.dispatch('$_domains/deleteDomain', id.value),
-    getItem: () => $store.dispatch('$_domains/getDomain', id.value),
-    updateItem: () => $store.dispatch('$_domains/updateDomain', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import makeSearch from '@/views/Configuration/_store/factory/search'
 import api from '../_api'
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_router.js b/html/pfappserver/root/src/views/Configuration/domains/_router.js
index 764b55a8ef3d..4df01e3807d5 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/domains/_router.js
@@ -4,7 +4,7 @@ import RealmsStoreModule from '../realms/_store'
 
 export const useRouter = $router => {
   return {
-    goToCollection: (params, props, autoJoinDomain) => {
+    goToCollection: (params, autoJoinDomain) => {
       if (autoJoinDomain)
         $router.push({ name: 'domains', params: { autoJoinDomain: params } })
       else
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_store.js b/html/pfappserver/root/src/views/Configuration/domains/_store.js
index 19e037716d0a..bd4698272609 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/domains/_store.js
@@ -2,9 +2,27 @@
 * "$_domains" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import store from '@/store' // required for 'pfqueue'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_domains/isLoading']),
+    getList: () => $store.dispatch('$_domains/all'),
+    getListOptions: () => $store.dispatch('$_domains/options'),
+    createItem: params => $store.dispatch('$_domains/createDomain', params),
+    getItem: params => $store.dispatch('$_domains/getDomain', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_domains/options', params.id),
+    updateItem: params => $store.dispatch('$_domains/updateDomain', params),
+    deleteItem: params => $store.dispatch('$_domains/deleteDomain', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheForm.vue
index adfb8eb23509..8ed0c2ef3a3c 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheForm.vue
@@ -9,6 +9,7 @@
     <form-group-identifier namespace="id"
       :column-label="$i18n.t('Name')"
       :text="$i18n.t('Specify a unique name for your filter.')"
+      :disabled="!isNew && !isClone"
     />
 
     <form-group-description v-if="fields.includes('description')"
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
index 1d50890269cb..822718884605 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
@@ -131,7 +131,7 @@ const setup = (props, context) => {
     collection
   } = toRefs(props)
 
-  const { root: { $router } = {} } = context
+  const { root: { $store, $router } = {} } = context
 
   const search = useSearch()
   const {
@@ -168,7 +168,7 @@ const setup = (props, context) => {
   const {
     deleteItem,
     sortItems
-  } = useStore(props, context)
+  } = useStore($store)
 
   const onRemove = id => {
     deleteItem({ ...collection.value, id })
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheView.js
index d006b2277d8d..f6e1eaeed7c0 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheView.js
@@ -9,6 +9,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -17,7 +18,13 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
index 6aaab57bd6f1..0f57115bc25b 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
@@ -38,30 +38,7 @@ export const useItemTitleBadge = (props, context) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    collection,
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_filter_engines/isLoading']),
-    getOptions: () => $store.dispatch('$_filter_engines/options', { collection: collection.value, id: id.value }),
-    createItem: () => $store.dispatch('$_filter_engines/createFilterEngine', { collection: collection.value, data: form.value }),
-    deleteItem: params => $store.dispatch('$_filter_engines/deleteFilterEngine', params),
-    getItem: () => $store.dispatch('$_filter_engines/getFilterEngine', { collection: collection.value, id: id.value }).then(item => {
-      item = JSON.parse(JSON.stringify(item)) // dereference
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_filter_engines/updateFilterEngine', { collection: collection.value, id: id.value, data: form.value }),
-    sortItems: params => $store.dispatch('$_filter_engines/sortItems', params),
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_store.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_store.js
index ff476a7507dd..bb5a7fd67299 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_store.js
@@ -2,9 +2,37 @@
 * "$_filter_engines" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import store from '@/store'
 import api, { apiFactory } from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_filter_engines/isLoading']),
+    getList: () => $store.dispatch('$_filter_engines/all'),
+    getListOptions: _params => {
+      const { id, ...params } = _params // strip `id`
+      return $store.dispatch('$_filter_engines/options', params)
+    },
+    createItem: params => {
+      const { collection, ...data } = params
+      return $store.dispatch('$_filter_engines/createFilterEngine', { collection, data })
+    },
+    sortItems: params => $store.dispatch('$_filter_engines/sortItems', params),
+    getItem: params => $store.dispatch('$_filter_engines/getFilterEngine', params).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_filter_engines/options', params),
+    updateItem: params => {
+      const { collection, ...data } = params
+      return $store.dispatch('$_filter_engines/updateFilterEngine', { collection, data })
+    },
+    deleteItem: params => $store.dispatch('$_filter_engines/deleteFilterEngine', params),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheView.js
index 219827091df9..59c7f413fdf7 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,10 +20,13 @@ const props = {
 }
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
 
-  const titleBadge = collection.useItemTitleBadge(props)
+  const titleBadge = _collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
index a2817663f5fb..895ddcfce31c 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
@@ -32,19 +32,7 @@ export const useItemTitleBadge = props => props.scope
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_fingerbank/isCombinationsLoading']),
-    createItem: () => $store.dispatch('$_fingerbank/createCombination', form.value),
-    deleteItem: () => $store.dispatch('$_fingerbank/deleteCombination', id.value),
-    getItem: () => $store.dispatch('$_fingerbank/getCombination', id.value),
-    updateItem: () => $store.dispatch('$_fingerbank/updateCombination', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_store.js
index a0c9ae623ab8..bb43dd12ef70 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_store.js
@@ -1,6 +1,17 @@
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_fingerbank/isCombinationsLoading']),
+    createItem: params => $store.dispatch('$_fingerbank/createCombination', params),
+    getItem: params => $store.dispatch('$_fingerbank/getCombination', params.id),
+    updateItem: params => $store.dispatch('$_fingerbank/updateCombination', params),
+    deleteItem: params => $store.dispatch('$_fingerbank/deleteCombination', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheView.js
index 219827091df9..59c7f413fdf7 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,10 +20,13 @@ const props = {
 }
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
 
-  const titleBadge = collection.useItemTitleBadge(props)
+  const titleBadge = _collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
index e95e8528dbeb..8de2a2d51be5 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
@@ -32,19 +32,7 @@ export const useItemTitleBadge = props => props.scope
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_fingerbank/isDevicesLoading']),
-    createItem: () => $store.dispatch('$_fingerbank/createDevice', form.value),
-    deleteItem: () => $store.dispatch('$_fingerbank/deleteDevice', id.value),
-    getItem: () => $store.dispatch('$_fingerbank/getDevice', id.value),
-    updateItem: () => $store.dispatch('$_fingerbank/updateDevice', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_store.js
index e6f85c09ef19..b6b2cb308a91 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_store.js
@@ -1,6 +1,17 @@
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_fingerbank/isDevicesLoading']),
+    createItem: params => $store.dispatch('$_fingerbank/createDevice', params),
+    getItem: params => $store.dispatch('$_fingerbank/getDevice', params.id),
+    updateItem: params => $store.dispatch('$_fingerbank/updateDevice', params),
+    deleteItem: params => $store.dispatch('$_fingerbank/deleteDevice', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheView.js
index 219827091df9..59c7f413fdf7 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,10 +20,13 @@ const props = {
 }
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
 
-  const titleBadge = collection.useItemTitleBadge(props)
+  const titleBadge = _collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
index 55ae79df0c92..a5ccb13682a8 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
@@ -32,19 +32,7 @@ export const useItemTitleBadge = props => props.scope
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_fingerbank/isDhcpFingerprintsLoading']),
-    createItem: () => $store.dispatch('$_fingerbank/createDhcpFingerprint', form.value),
-    deleteItem: () => $store.dispatch('$_fingerbank/deleteDhcpFingerprint', id.value),
-    getItem: () => $store.dispatch('$_fingerbank/getDhcpFingerprint', id.value),
-    updateItem: () => $store.dispatch('$_fingerbank/updateDhcpFingerprint', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_store.js
index f24accf1dcfb..15602b387a1e 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_store.js
@@ -1,6 +1,17 @@
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_fingerbank/isDhcpFingerprintsLoading']),
+    createItem: params => $store.dispatch('$_fingerbank/createDhcpFingerprint', params),
+    getItem: params => $store.dispatch('$_fingerbank/getDhcpFingerprint', params.id),
+    updateItem: params => $store.dispatch('$_fingerbank/updateDhcpFingerprint', params),
+    deleteItem: params => $store.dispatch('$_fingerbank/deleteDhcpFingerprint', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheView.js
index 219827091df9..59c7f413fdf7 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,10 +20,13 @@ const props = {
 }
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
 
-  const titleBadge = collection.useItemTitleBadge(props)
+  const titleBadge = _collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
index 606a1438856c..e775c148599a 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
@@ -32,19 +32,7 @@ export const useItemTitleBadge = props => props.scope
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_fingerbank/isDhcpVendorsLoading']),
-    createItem: () => $store.dispatch('$_fingerbank/createDhcpVendor', form.value),
-    deleteItem: () => $store.dispatch('$_fingerbank/deleteDhcpVendor', id.value),
-    getItem: () => $store.dispatch('$_fingerbank/getDhcpVendor', id.value),
-    updateItem: () => $store.dispatch('$_fingerbank/updateDhcpVendor', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_store.js
index d4d1402f9c94..3c2c3260618c 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_store.js
@@ -1,6 +1,17 @@
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_fingerbank/isDhcpVendorsLoading']),
+    createItem: params => $store.dispatch('$_fingerbank/createDhcpVendor', params),
+    getItem: params => $store.dispatch('$_fingerbank/getDhcpVendor', params.id),
+    updateItem: params => $store.dispatch('$_fingerbank/updateDhcpVendor', params),
+    deleteItem: params => $store.dispatch('$_fingerbank/deleteDhcpVendor', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheView.js
index 219827091df9..59c7f413fdf7 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,10 +20,13 @@ const props = {
 }
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
 
-  const titleBadge = collection.useItemTitleBadge(props)
+  const titleBadge = _collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
index b58201ac6a14..70800e1caead 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
@@ -32,19 +32,7 @@ export const useItemTitleBadge = props => props.scope
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_fingerbank/isDhcpv6EnterprisesLoading']),
-    createItem: () => $store.dispatch('$_fingerbank/createDhcpv6Enterprise', form.value),
-    deleteItem: () => $store.dispatch('$_fingerbank/deleteDhcpv6Enterprise', id.value),
-    getItem: () => $store.dispatch('$_fingerbank/getDhcpv6Enterprise', id.value),
-    updateItem: () => $store.dispatch('$_fingerbank/updateDhcpv6Enterprise', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_store.js
index b42e6690d144..9d97c41e589d 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_store.js
@@ -1,6 +1,17 @@
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_fingerbank/isDhcpv6EnterprisesLoading']),
+    createItem: params => $store.dispatch('$_fingerbank/createDhcpv6Enterprise', params),
+    getItem: params => $store.dispatch('$_fingerbank/getDhcpv6Enterprise', params.id),
+    updateItem: params => $store.dispatch('$_fingerbank/updateDhcpv6Enterprise', params),
+    deleteItem: params => $store.dispatch('$_fingerbank/deleteDhcpv6Enterprise', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheView.js
index 219827091df9..59c7f413fdf7 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,10 +20,13 @@ const props = {
 }
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
 
-  const titleBadge = collection.useItemTitleBadge(props)
+  const titleBadge = _collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
index cd5b169e262f..dcd5c5ee5ee0 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
@@ -32,19 +32,7 @@ export const useItemTitleBadge = props => props.scope
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_fingerbank/isDhcpv6FingerprintsLoading']),
-    createItem: () => $store.dispatch('$_fingerbank/createDhcpv6Fingerprint', form.value),
-    deleteItem: () => $store.dispatch('$_fingerbank/deleteDhcpv6Fingerprint', id.value),
-    getItem: () => $store.dispatch('$_fingerbank/getDhcpv6Fingerprint', id.value),
-    updateItem: () => $store.dispatch('$_fingerbank/updateDhcpv6Fingerprint', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_store.js
index 27e8d6bfd842..487824d3b9d8 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_store.js
@@ -1,6 +1,17 @@
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_fingerbank/isDhcpv6FingerprintsLoading']),
+    createItem: params => $store.dispatch('$_fingerbank/createDhcpv6Fingerprint', params),
+    getItem: params => $store.dispatch('$_fingerbank/getDhcpv6Fingerprint', params.id),
+    updateItem: params => $store.dispatch('$_fingerbank/updateDhcpv6Fingerprint', params),
+    deleteItem: params => $store.dispatch('$_fingerbank/deleteDhcpv6Fingerprint', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheView.js
index 219827091df9..59c7f413fdf7 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,10 +20,13 @@ const props = {
 }
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
 
-  const titleBadge = collection.useItemTitleBadge(props)
+  const titleBadge = _collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
index bd8173fab337..b2403504c1a5 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
@@ -32,19 +32,7 @@ export const useItemTitleBadge = props => props.scope
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_fingerbank/isMacVendorsLoading']),
-    createItem: () => $store.dispatch('$_fingerbank/createMacVendor', form.value),
-    deleteItem: () => $store.dispatch('$_fingerbank/deleteMacVendor', id.value),
-    getItem: () => $store.dispatch('$_fingerbank/getMacVendor', id.value),
-    updateItem: () => $store.dispatch('$_fingerbank/updateMacVendor', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_store.js
index ed4503560ac9..f4b347a76381 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_store.js
@@ -1,6 +1,17 @@
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_fingerbank/isMacVendorsLoading']),
+    createItem: params => $store.dispatch('$_fingerbank/createMacVendor', params),
+    getItem: params => $store.dispatch('$_fingerbank/getMacVendor', params.id),
+    updateItem: params => $store.dispatch('$_fingerbank/updateMacVendor', params),
+    deleteItem: params => $store.dispatch('$_fingerbank/deleteMacVendor', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheView.js
index 219827091df9..59c7f413fdf7 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,10 +20,13 @@ const props = {
 }
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
 
-  const titleBadge = collection.useItemTitleBadge(props)
+  const titleBadge = _collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
index 262d401671e7..b583ba30e7c8 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
@@ -32,19 +32,7 @@ export const useItemTitleBadge = props => props.scope
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_fingerbank/isUserAgentsLoading']),
-    createItem: () => $store.dispatch('$_fingerbank/createUserAgent', form.value),
-    deleteItem: () => $store.dispatch('$_fingerbank/deleteUserAgent', id.value),
-    getItem: () => $store.dispatch('$_fingerbank/getUserAgent', id.value),
-    updateItem: () => $store.dispatch('$_fingerbank/updateUserAgent', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_store.js
index 787db6d27e0e..2165f319097a 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_store.js
@@ -1,6 +1,17 @@
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_fingerbank/isUserAgentsLoading']),
+    createItem: params => $store.dispatch('$_fingerbank/createUserAgent', params),
+    getItem: params => $store.dispatch('$_fingerbank/getUserAgent', params.id),
+    updateItem: params => $store.dispatch('$_fingerbank/updateUserAgent', params),
+    deleteItem: params => $store.dispatch('$_fingerbank/deleteUserAgent', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheView.js
index e35e28224e69..b11d67a4677d 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -18,7 +19,13 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
index f788a7e6a85c..b02a95dfbdb2 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
@@ -45,34 +45,7 @@ export const useItemTitleBadge = (props, context, form) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone,
-    isNew,
-    firewallType
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_firewalls/isLoading']),
-    getOptions: () => {
-      if (isNew.value)
-        return $store.dispatch('$_firewalls/optionsByFirewallType', firewallType.value)
-      else
-        return $store.dispatch('$_firewalls/optionsById', id.value)
-    },
-    createItem: () => $store.dispatch('$_firewalls/createFirewall', form.value),
-    deleteItem: () => $store.dispatch('$_firewalls/deleteFirewall', id.value),
-    getItem: () => $store.dispatch('$_firewalls/getFirewall', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_firewalls/updateFirewall', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_store.js b/html/pfappserver/root/src/views/Configuration/firewalls/_store.js
index 7863c66ec159..0cac9c2b9908 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_store.js
@@ -2,8 +2,26 @@
 * "$_firewalls" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_firewalls/isLoading']),
+    getList: () => $store.dispatch('$_firewalls/all'),
+    getListOptions: params => $store.dispatch('$_firewalls/optionsByFirewallType', params.firewallType),
+    createItem: params => $store.dispatch('$_firewalls/createFirewall', params),
+    getItem: params => $store.dispatch('$_firewalls/getFirewall', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_firewalls/optionsById', params.id),
+    updateItem: params => $store.dispatch('$_firewalls/updateFirewall', params),
+    deleteItem: params => $store.dispatch('$_firewalls/deleteFirewall', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheForm.vue
index 76951f3f405d..71f35894a846 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheForm.vue
@@ -63,9 +63,6 @@ export const props = {
   id: {
     type: String
   },
-  tenantId: {
-    type: String
-  },
   form: {
     type: Object
   },
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheView.js
index b067861f2a36..997063fd871b 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheView.js
@@ -10,22 +10,18 @@ const components = {
   TheForm
 }
 
-import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
+import { usePropsWrapper } from '@/composables/useProps'
+import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
+import * as collection from '../_composables/useCollection'
 
-const props = {
-  ...useViewCollectionItemProps,
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  id: {
-    type: String
-  },
-  tenantId: {
-    type: String
-  }
+  return useViewCollectionItem(_collection, props, context)
 }
 
-import * as collection from '../_composables/useCollection'
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
-
 // @vue/component
 export default {
   name: 'the-view',
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
index d7ef5afababa..dccd312480c7 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
@@ -21,25 +21,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_floatingdevices/isLoading']),
-    getOptions: () => $store.dispatch('$_floatingdevices/options', id.value),
-    createItem: () => $store.dispatch('$_floatingdevices/createFloatingDevice', form.value),
-    deleteItem: () => $store.dispatch('$_floatingdevices/deleteFloatingDevice', id.value),
-    getItem: () => $store.dispatch('$_floatingdevices/getFloatingDevice', id.value).then(item => {
-      if (isClone.value)
-        item.not_deletable = false
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_floatingdevices/updateFloatingDevice', form.value)
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_store.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/_store.js
index d4e28955eca6..f1a8c71161e3 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_store.js
@@ -2,8 +2,26 @@
 * "$_floatingdevices" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_floatingdevices/isLoading']),
+    getList: () => $store.dispatch('$_floatingdevices/all'),
+    getListOptions: () => $store.dispatch('$_floatingdevices/options'),
+    createItem: params => $store.dispatch('$_floatingdevices/createFloatingDevice', params),
+    getItem: params => $store.dispatch('$_floatingdevices/getFloatingDevice', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_floatingdevices/options', params.id),
+    updateItem: params => $store.dispatch('$_floatingdevices/updateFloatingDevice', params),
+    deleteItem: params => $store.dispatch('$_floatingdevices/deleteFloatingDevice', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheView.js
index acbb9567d7ed..76cc970abfc6 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheView.js
@@ -12,12 +12,16 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js
index 1aa2ca8a563d..28fc76b5ad67 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js
@@ -10,19 +10,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_maintenance_tasks/isLoading']),
-    getOptions: () => $store.dispatch('$_maintenance_tasks/options', id.value),
-    createItem: () => $store.dispatch('$_maintenance_tasks/createMaintenanceTask', form.value),
-    getItem: () => $store.dispatch('$_maintenance_tasks/getMaintenanceTask', id.value),
-    updateItem: () => $store.dispatch('$_maintenance_tasks/updateMaintenanceTask', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_store.js b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_store.js
index 90f1ce1071f1..e2044fdfee2e 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_store.js
@@ -2,8 +2,22 @@
 * "$_maintenance_tasks" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_maintenance_tasks/isLoading']),
+    getList: () => $store.dispatch('$_maintenance_tasks/all'),
+    getListOptions: () => $store.dispatch('$_maintenance_tasks/options'),
+    createItem: params => $store.dispatch('$_maintenance_tasks/createMaintenanceTask', params),
+    getItem: params => $store.dispatch('$_maintenance_tasks/getMaintenanceTask', params.id),
+    getItemOptions: params => $store.dispatch('$_maintenance_tasks/options', params.id),
+    updateItem: params => $store.dispatch('$_maintenance_tasks/updateMaintenanceTask', params),
+    deleteItem: params => $store.dispatch('$_maintenance_tasks/deleteMaintenanceTask', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
index 3378a80884f6..0fb3fe246206 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
@@ -64,7 +64,7 @@
         </template>
         <template #cell(status)="{ item }">
           <toggle-status :value="item.status" :disabled="isLoading"
-            :item="item" :collection="collection" @input="item.status = $event" />
+            :item="item" @input="item.status = $event" />
         </template>
         <template #cell(buttons)="{ item }">
           <span class="float-right text-nowrap text-right"
@@ -114,12 +114,6 @@ const components = {
   ToggleStatus
 }
 
-const props = {
-  collection: {
-    type: Object
-  }
-}
-
 import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
@@ -128,10 +122,6 @@ import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
-  const {
-    collection
-  } = toRefs(props)
-
   const { root: { $store, $router } = {} } = context
 
   const canUseNbaEndpoints = ref(false)
@@ -167,10 +157,10 @@ const setup = (props, context) => {
 
   const {
     deleteItem
-  } = useStore(props, context)
+  } = useStore($store)
 
   const onRemove = id => {
-    deleteItem({ ...collection.value, id })
+    deleteItem({ id })
       .then(() => reSearch())
   }
 
@@ -192,7 +182,6 @@ export default {
   name: 'the-search',
   inheritAttrs: false,
   components,
-  props,
   setup
 }
 </script>
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheView.js
index acbb9567d7ed..dfbf19f55380 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheView.js
@@ -11,13 +11,17 @@ const components = {
 }
 
 import { computed } from '@vue/composition-api'
+import { usePropsWrapper } from '@/composables/useProps'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js
index be26275be202..9d8fc6d5016f 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js
@@ -24,27 +24,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_network_behavior_policies/isLoading']),
-    getOptions: () => $store.dispatch('$_network_behavior_policies/options'),
-    createItem: () => $store.dispatch('$_network_behavior_policies/createNetworkBehaviorPolicy', form.value),
-    deleteItem: () => $store.dispatch('$_network_behavior_policies/deleteNetworkBehaviorPolicy', id.value),
-    getItem: () => $store.dispatch('$_network_behavior_policies/getNetworkBehaviorPolicy', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_network_behavior_policies/updateNetworkBehaviorPolicy', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_store.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_store.js
index f1bb708ed4df..a9f3ebdccfbd 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_store.js
@@ -2,8 +2,26 @@
 * "$_network_behavior_policies" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_network_behavior_policies/isLoading']),
+    getList: () => $store.dispatch('$_network_behavior_policies/all'),
+    getListOptions: () => $store.dispatch('$_network_behavior_policies/options'),
+    createItem: params => $store.dispatch('$_network_behavior_policies/createNetworkBehaviorPolicy', params),
+    getItem: params => $store.dispatch('$_network_behavior_policies/getNetworkBehaviorPolicy', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_network_behavior_policies/options', params.id),
+    updateItem: params => $store.dispatch('$_network_behavior_policies/updateNetworkBehaviorPolicy', params),
+    deleteItem: params => $store.dispatch('$_network_behavior_policies/deleteNetworkBehaviorPolicy', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/TheView.js
index 2ec391ad55c9..ad742bf44e5c 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -18,7 +19,13 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_composables/useCollection.js
index 197be1d59c65..82a23f052510 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_composables/useCollection.js
@@ -50,23 +50,4 @@ export const useItemTitleBadge = (props, context, form) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_interfaces/isLoading']),
-    createItem: () => $store.dispatch('$_interfaces/createInterface', form.value),
-    deleteItem: () => $store.dispatch('$_interfaces/deleteInterface', id.value),
-    getItem: () => $store.dispatch('$_interfaces/getInterface', id.value).then(item => {
-      if (isClone.value) {
-        item.id = item.master
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_interfaces/updateInterface', form.value),
-  }
-}
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_store.js b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_store.js
index 0822ba0e0203..bd70b6704247 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_store.js
@@ -2,9 +2,25 @@
 * "$_interfaces" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 import { columns as columnsInterface } from '../../_config/interface'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_interfaces/isLoading']),
+    getList: () => $store.dispatch('$_interfaces/all'),
+    createItem: params => $store.dispatch('$_interfaces/createInterface', params),
+    getItem: params => $store.dispatch('$_interfaces/getInterface', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: item.master, not_deletable: false }
+        : item
+    }),
+    updateItem: params => $store.dispatch('$_interfaces/updateInterface', params),
+    deleteItem: params => $store.dispatch('$_interfaces/deleteInterface', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/TheView.js
index 27fa8ac8e8dc..2c00b9f57617 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/TheView.js
@@ -12,12 +12,16 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_composables/useCollection.js
index 5b8cf3562fee..131be7d043ac 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_composables/useCollection.js
@@ -13,15 +13,4 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_layer2_networks/isLoading']),
-    getOptions: () => $store.dispatch('$_layer2_networks/options'),
-    getItem: () => $store.dispatch('$_layer2_networks/getLayer2Network', id.value),
-    updateItem: () => $store.dispatch('$_layer2_networks/updateLayer2Network', form.value),
-  }
-}
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_store.js b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_store.js
index bbf831a722de..fe1cb3b4a8cb 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_store.js
@@ -2,9 +2,21 @@
 * "$_layer2_networks" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 import { columns as columnsLayer2Network } from '../../_config/layer2Network'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_layer2_networks/isLoading']),
+    getList: () => $store.dispatch('$_layer2_networks/all'),
+    getListOptions: () => $store.dispatch('$_layer2_networks/options'),
+    getItem: params => $store.dispatch('$_layer2_networks/getLayer2Network', params.id),
+    getItemOptions: params => $store.dispatch('$_layer2_networks/options', params.id),
+    updateItem: params => $store.dispatch('$_layer2_networks/updateLayer2Network', params),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/TheView.js
index 84708dfa1014..088eccef0918 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/TheView.js
@@ -12,12 +12,16 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_composables/useCollection.js
index e42a59698db1..a18f7aadb7fc 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_composables/useCollection.js
@@ -21,17 +21,4 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_routed_networks/isLoading']),
-    getOptions: () => $store.dispatch('$_routed_networks/options'),
-    createItem: () => $store.dispatch('$_routed_networks/createRoutedNetwork', form.value),
-    deleteItem: () => $store.dispatch('$_routed_networks/deleteRoutedNetwork', id.value),
-    getItem: () => $store.dispatch('$_routed_networks/getRoutedNetwork', id.value),
-    updateItem: () => $store.dispatch('$_routed_networks/updateRoutedNetwork', form.value),
-  }
-}
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_store.js b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_store.js
index a98fb1a80e5c..b9280958e141 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_store.js
@@ -2,9 +2,23 @@
 * "$_routed_networks" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 import { columns as columnsRoutedNetwork } from '../../_config/routedNetwork'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_routed_networks/isLoading']),
+    getList: () => $store.dispatch('$_routed_networks/all'),
+    getListOptions: () => $store.dispatch('$_routed_networks/options'),
+    createItem: params => $store.dispatch('$_routed_networks/createRoutedNetwork', params),
+    getItem: params => $store.dispatch('$_routed_networks/getRoutedNetwork', params.id),
+    getItemOptions: params => $store.dispatch('$_routed_networks/options', params.id),
+    updateItem: params => $store.dispatch('$_routed_networks/updateRoutedNetwork', params),
+    deleteItem: params => $store.dispatch('$_routed_networks/deleteRoutedNetwork', params.id)
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheView.js
index f1075460793c..8499ced084c3 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheView.js
@@ -20,8 +20,15 @@ const props = {
   }
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import * as collection from '../_composables/useCollection'
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js
index 2fe084c918a7..90eaeaea2c11 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js
@@ -33,17 +33,4 @@ export const useItemTitleBadge = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_traffic_shaping_policies/isLoading']),
-    getOptions: () => $store.dispatch('$_traffic_shaping_policies/options'),
-    createItem: () => $store.dispatch('$_traffic_shaping_policies/createTrafficShapingPolicy', form.value),
-    deleteItem: () => $store.dispatch('$_traffic_shaping_policies/deleteTrafficShapingPolicy', id.value),
-    getItem: () => $store.dispatch('$_traffic_shaping_policies/getTrafficShapingPolicy', id.value),
-    updateItem: () => $store.dispatch('$_traffic_shaping_policies/updateTrafficShapingPolicy', form.value),
-  }
-}
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_store.js b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_store.js
index 5a606710ff4b..6ee4a5ac6707 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_store.js
@@ -2,8 +2,22 @@
 * "$_traffic_shaping_policies" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_traffic_shaping_policies/isLoading']),
+    getList: () => $store.dispatch('$_traffic_shaping_policies/all'),
+    getListOptions: () => $store.dispatch('$_traffic_shaping_policies/options'),
+    createItem: params => $store.dispatch('$_traffic_shaping_policies/createTrafficShapingPolicy', params),
+    getItem: params => $store.dispatch('$_traffic_shaping_policies/getTrafficShapingPolicy', params.id),
+    getItemOptions: params => $store.dispatch('$_traffic_shaping_policies/options', params.id),
+    updateItem: params => $store.dispatch('$_traffic_shaping_policies/updateTrafficShapingPolicy', params),
+    deleteItem: params => $store.dispatch('$_traffic_shaping_policies/deleteTrafficShapingPolicy', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheView.js
index 2ec391ad55c9..ad742bf44e5c 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -18,7 +19,13 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js
index 2013f89f69ff..0b5c10dcf3d9 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js
@@ -1,9 +1,5 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  decomposeCa,
-  recomposeCa
-} from '../config'
 
 export const useItemProps = {
   id: {
@@ -31,18 +27,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_pkis/isLoading']),
-    createItem: () => $store.dispatch('$_pkis/createCa', recomposeCa(form.value)),
-    getItem: () => $store.dispatch('$_pkis/getCa', id.value)
-      .then(item => decomposeCa(item))
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_store.js b/html/pfappserver/root/src/views/Configuration/pki/cas/_store.js
index a5a39d397c93..67fa52e1edc3 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_store.js
@@ -1,6 +1,21 @@
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import store from '@/store'
 import api from './_api'
+import {
+  decomposeCa,
+  recomposeCa
+} from './config'
+
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_pkis/isCaLoading']),
+    getList: () => $store.dispatch('$_pkis/allCas'),
+    createItem: params => $store.dispatch('$_pkis/createCa', recomposeCa(params)),
+    getItem: params => $store.dispatch('$_pkis/getCa', params.id)
+      .then(item => decomposeCa(item)),
+  }
+}
 
 const types = {
   LOADING: 'loading',
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheView.js
index 2705a5affbac..a9eb03400c06 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheView.js
@@ -12,6 +12,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
@@ -22,7 +23,11 @@ const props = {
 }
 
 const setup = (props, context) => {
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
   return {
     ...viewCollectionItem,
     scopedSlotProps: props
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js
index b5e55b1e0328..ec2c44ccdee3 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js
@@ -37,18 +37,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    profile_id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_pkis/isLoading']),
-    createItem: () => $store.dispatch('$_pkis/createCert', { ...form.value, profile_id: profile_id.value }),
-    getItem: () => $store.dispatch('$_pkis/getCert', id.value)
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_store.js b/html/pfappserver/root/src/views/Configuration/pki/certs/_store.js
index 0c9b58475f1c..e0cfbb5c50ee 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_store.js
@@ -1,7 +1,17 @@
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import store from '@/store'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_pkis/isCertLoading']),
+    getList: () => $store.dispatch('$_pkis/allCerts'),
+    createItem: params => $store.dispatch('$_pkis/createCert', params),
+    getItem: params => $store.dispatch('$_pkis/getCert', params.id)
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheView.js
index 2ec391ad55c9..ad742bf44e5c 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -18,7 +19,13 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js
index 10b4d889990d..413a47f94522 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js
@@ -1,9 +1,5 @@
 import { computed, toRefs } from '@vue/composition-api'
 import i18n from '@/utils/locale'
-import {
-  decomposeProfile,
-  recomposeProfile
-} from '../config'
 
 export const useItemProps = {
   id: {
@@ -44,17 +40,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_pkis/isLoading']),
-    createItem: () => $store.dispatch('$_pkis/createProfile', recomposeProfile(form.value)),
-    getItem: () => $store.dispatch('$_pkis/getProfile', id.value).then(item => decomposeProfile(item))
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_store.js b/html/pfappserver/root/src/views/Configuration/pki/profiles/_store.js
index 4e4fa3139e17..93c04c823665 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_store.js
@@ -1,6 +1,21 @@
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import store from '@/store'
 import api from './_api'
+import {
+  decomposeProfile,
+  recomposeProfile
+} from './config'
+
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_pkis/isProfileLoading']),
+    getList: () => $store.dispatch('$_pkis/allProfiles'),
+    createItem: params => $store.dispatch('$_pkis/createProfile', recomposeProfile(params)),
+    getItem: params => $store.dispatch('$_pkis/getProfile', params.id)
+      .then(item => decomposeProfile(item)),
+  }
+}
 
 const types = {
   LOADING: 'loading',
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheView.js
index 2ec391ad55c9..ad742bf44e5c 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -18,7 +19,13 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
index 8d923f67c4d1..cca50aa3b85e 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
@@ -16,17 +16,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_pkis/isLoading']),
-    getItem: () => $store.dispatch('$_pkis/getRevokedCert', id.value)
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_store.js b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_store.js
index 6e135b70ca88..d1b42ebc42f4 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_store.js
@@ -1,6 +1,15 @@
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_pkis/isRevokedCertLoading']),
+    getList: () => $store.dispatch('$_pkis/allRevokedCerts'),
+    getItem: params => $store.dispatch('$_pkis/getRevokedCert', params.id)
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/portalModules/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/portalModules/_components/TheView.js
index e35e28224e69..b11d67a4677d 100644
--- a/html/pfappserver/root/src/views/Configuration/portalModules/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/portalModules/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -18,7 +19,13 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/portalModules/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/portalModules/_composables/useCollection.js
index b5040bb9829c..c1ff3e59927e 100644
--- a/html/pfappserver/root/src/views/Configuration/portalModules/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/portalModules/_composables/useCollection.js
@@ -45,31 +45,4 @@ export const useItemTitleBadge = (props, context, form) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone,
-    isNew,
-    moduleType
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_portalmodules/isLoading']),
-    getOptions: () => {
-      if (isNew.value)
-        return $store.dispatch('$_portalmodules/optionsByModuleType', moduleType.value)
-      else
-        return $store.dispatch('$_portalmodules/optionsById', id.value)
-    },
-    createItem: () => $store.dispatch('$_portalmodules/createPortalModule', form.value),
-    deleteItem: () => $store.dispatch('$_portalmodules/deletePortalModule', id.value),
-    getItem: () => $store.dispatch('$_portalmodules/getPortalModule', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_portalmodules/updatePortalModule', form.value),
-  }
-}
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Configuration/portalModules/_store.js b/html/pfappserver/root/src/views/Configuration/portalModules/_store.js
index a4163efb6818..98421adf698f 100644
--- a/html/pfappserver/root/src/views/Configuration/portalModules/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/portalModules/_store.js
@@ -2,8 +2,26 @@
 * "$_portalmodules" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_portalmodules/isLoading']),
+    getList: () => $store.dispatch('$_portalmodules/all'),
+    getListOptions: params => $store.dispatch('$_portalmodules/optionsByModuleType', params.moduleType),
+    createItem: params => $store.dispatch('$_portalmodules/createPortalModule', params),
+    getItem: params => $store.dispatch('$_portalmodules/getPortalModule', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_portalmodules/optionsById', params.id),
+    updateItem: params => $store.dispatch('$_portalmodules/updatePortalModule', params),
+    deleteItem: params => $store.dispatch('$_portalmodules/deletePortalModule', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheView.js
index e35e28224e69..b11d67a4677d 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -18,7 +19,13 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js
index defd56a49f27..6df763c782e6 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js
@@ -46,34 +46,7 @@ export const useItemTitleBadge = (props, context, form) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone,
-    isNew,
-    provisioningType
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_provisionings/isLoading']),
-    getOptions: () => {
-      if (isNew.value)
-        return $store.dispatch('$_provisionings/optionsByProvisioningType', provisioningType.value)
-      else
-        return $store.dispatch('$_provisionings/optionsById', id.value)
-    },
-    createItem: () => $store.dispatch('$_provisionings/createProvisioning', form.value),
-    deleteItem: () => $store.dispatch('$_provisionings/deleteProvisioning', id.value),
-    getItem: () => $store.dispatch('$_provisionings/getProvisioning', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_provisionings/updateProvisioning', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_store.js b/html/pfappserver/root/src/views/Configuration/provisioners/_store.js
index 6a566ae93645..8cd9bbcc1eda 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_store.js
@@ -2,8 +2,26 @@
 * "$_provisionings" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_provisionings/isLoading']),
+    getList: () => $store.dispatch('$_provisionings/all'),
+    getListOptions: params => $store.dispatch('$_provisionings/optionsByProvisioningType', params.moduleType),
+    createItem: params => $store.dispatch('$_provisionings/createProvisioning', params),
+    getItem: params => $store.dispatch('$_provisionings/getProvisioning', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_provisionings/optionsById', params.id),
+    updateItem: params => $store.dispatch('$_provisionings/updateProvisioning', params),
+    deleteItem: params => $store.dispatch('$_provisionings/deleteProvisioning', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheView.js
index 4722795d7ab2..ca76cd76162f 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheView.js
@@ -12,12 +12,16 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js
index 33d40ef0141c..72e3c8ca0ff3 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js
@@ -21,32 +21,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_radius_eap/isLoading']),
-    getOptions: () => $store.dispatch('$_radius_eap/options'),
-    createItem: () => $store.dispatch('$_radius_eap/createRadiusEap', form.value),
-    deleteItem: () => $store.dispatch('$_radius_eap/deleteRadiusEap', id.value),
-    getItem: () => $store.dispatch('$_radius_eap/getRadiusEap', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    ...((id.value === 'default' && !isClone.value)
-      ? {} // don't update id: default
-      : {
-        updateItem: () => $store.dispatch('$_radius_eap/updateRadiusEap', form.value)
-      }
-    )
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_store.js b/html/pfappserver/root/src/views/Configuration/radius/eap/_store.js
index 8353c9aa2f58..def170ce4b52 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_store.js
@@ -2,8 +2,26 @@
 * "$_radius_eap" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_radius_eap/isLoading']),
+    getList: () => $store.dispatch('$_radius_eap/all'),
+    getListOptions: () => $store.dispatch('$_radius_eap/options'),
+    createItem: params => $store.dispatch('$_radius_eap/createRadiusEap', params),
+    getItem: params => $store.dispatch('$_radius_eap/getRadiusEap', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_radius_eap/options', params.id),
+    updateItem: params => $store.dispatch('$_radius_eap/updateRadiusEap', params),
+    deleteItem: params => $store.dispatch('$_radius_eap/deleteRadiusEap', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheView.js
index 4722795d7ab2..ca76cd76162f 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheView.js
@@ -12,12 +12,16 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js
index d5f3d5f41439..b3672f005468 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js
@@ -21,32 +21,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_radius_fast/isLoading']),
-    getOptions: () => $store.dispatch('$_radius_fast/options'),
-    createItem: () => $store.dispatch('$_radius_fast/createRadiusFast', form.value),
-    deleteItem: () => $store.dispatch('$_radius_fast/deleteRadiusFast', id.value),
-    getItem: () => $store.dispatch('$_radius_fast/getRadiusFast', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    ...((id.value === 'default' && !isClone.value)
-      ? {} // don't update id: default
-      : {
-        updateItem: () => $store.dispatch('$_radius_fast/updateRadiusFast', form.value)
-      }
-    )
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_store.js b/html/pfappserver/root/src/views/Configuration/radius/fast/_store.js
index fa1ff25fe054..c75d83701203 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_store.js
@@ -2,8 +2,26 @@
 * "$_radius_fast" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_radius_fast/isLoading']),
+    getList: () => $store.dispatch('$_radius_fast/all'),
+    getListOptions: () => $store.dispatch('$_radius_fast/options'),
+    createItem: params => $store.dispatch('$_radius_fast/createRadiusFast', params),
+    getItem: params => $store.dispatch('$_radius_fast/getRadiusFast', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_radius_fast/options', params.id),
+    updateItem: params => $store.dispatch('$_radius_fast/updateRadiusFast', params),
+    deleteItem: params => $store.dispatch('$_radius_fast/deleteRadiusFast', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheView.js
index 4722795d7ab2..ca76cd76162f 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheView.js
@@ -12,12 +12,16 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js
index 35c84ce77ad5..726f8046f05b 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js
@@ -21,32 +21,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_radius_ocsp/isLoading']),
-    getOptions: () => $store.dispatch('$_radius_ocsp/options'),
-    createItem: () => $store.dispatch('$_radius_ocsp/createRadiusOcsp', form.value),
-    deleteItem: () => $store.dispatch('$_radius_ocsp/deleteRadiusOcsp', id.value),
-    getItem: () => $store.dispatch('$_radius_ocsp/getRadiusOcsp', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    ...((id.value === 'default' && !isClone.value)
-      ? {} // don't update id: default
-      : {
-        updateItem: () => $store.dispatch('$_radius_ocsp/updateRadiusOcsp', form.value)
-      }
-    )
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_store.js b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_store.js
index ec72b3dd7bff..332d31e1c768 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_store.js
@@ -2,8 +2,26 @@
 * "$_radius_ocsp" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_radius_ocsp/isLoading']),
+    getList: () => $store.dispatch('$_radius_ocsp/all'),
+    getListOptions: () => $store.dispatch('$_radius_ocsp/options'),
+    createItem: params => $store.dispatch('$_radius_ocsp/createRadiusOcsp', params),
+    getItem: params => $store.dispatch('$_radius_ocsp/getRadiusOcsp', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_radius_ocsp/options', params.id),
+    updateItem: params => $store.dispatch('$_radius_ocsp/updateRadiusOcsp', params),
+    deleteItem: params => $store.dispatch('$_radius_ocsp/deleteRadiusOcsp', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheView.js
index 4722795d7ab2..ca76cd76162f 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheView.js
@@ -12,12 +12,16 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js
index 5e2d2c88f099..c084ea1c943b 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js
@@ -21,27 +21,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_radius_ssl/isLoading']),
-    getOptions: () => $store.dispatch('$_radius_ssl/options'),
-    createItem: () => $store.dispatch('$_radius_ssl/createRadiusSsl', form.value),
-    deleteItem: () => $store.dispatch('$_radius_ssl/deleteRadiusSsl', id.value),
-    getItem: () => $store.dispatch('$_radius_ssl/getRadiusSsl', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_radius_ssl/updateRadiusSsl', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_store.js b/html/pfappserver/root/src/views/Configuration/radius/ssl/_store.js
index 460670692a62..fb7844200c4f 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_store.js
@@ -2,8 +2,26 @@
 * "$_radius_ssl" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_radius_ssl/isLoading']),
+    getList: () => $store.dispatch('$_radius_ssl/all'),
+    getListOptions: () => $store.dispatch('$_radius_ssl/options'),
+    createItem: params => $store.dispatch('$_radius_ssl/createRadiusSsl', params),
+    getItem: params => $store.dispatch('$_radius_ssl/getRadiusSsl', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_radius_ssl/options', params.id),
+    updateItem: params => $store.dispatch('$_radius_ssl/updateRadiusSsl', params),
+    deleteItem: params => $store.dispatch('$_radius_ssl/deleteRadiusSsl', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheView.js
index 4722795d7ab2..ca76cd76162f 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheView.js
@@ -12,12 +12,16 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js
index 174a79beff2b..487f719bcd41 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js
@@ -21,27 +21,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_radius_tls/isLoading']),
-    getOptions: () => $store.dispatch('$_radius_tls/options'),
-    createItem: () => $store.dispatch('$_radius_tls/createRadiusTls', form.value),
-    deleteItem: () => $store.dispatch('$_radius_tls/deleteRadiusTls', id.value),
-    getItem: () => $store.dispatch('$_radius_tls/getRadiusTls', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_radius_tls/updateRadiusTls', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_store.js b/html/pfappserver/root/src/views/Configuration/radius/tls/_store.js
index 7fc278462ec7..9249d3026cca 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_store.js
@@ -2,8 +2,26 @@
 * "$_radius_tls" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_radius_tls/isLoading']),
+    getList: () => $store.dispatch('$_radius_tls/all'),
+    getListOptions: () => $store.dispatch('$_radius_tls/options'),
+    createItem: params => $store.dispatch('$_radius_tls/createRadiusTls', params),
+    getItem: params => $store.dispatch('$_radius_tls/getRadiusTls', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_radius_tls/options', params.id),
+    updateItem: params => $store.dispatch('$_radius_tls/updateRadiusTls', params),
+    deleteItem: params => $store.dispatch('$_radius_tls/deleteRadiusTls', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_api.js b/html/pfappserver/root/src/views/Configuration/realms/_api.js
index 7ed25c974f5a..9aaf7c7340e8 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/realms/_api.js
@@ -1,63 +1,84 @@
+import store from '@/store'
 import apiCall from '@/utils/api'
 
-export default {
-  realms: (tenantId, params) => {
-    const headers = {
-      'X-PacketFence-Tenant-Id': tenantId
-    }
-    return apiCall.get('config/realms', { params, headers }).then(response => {
-      return response.data
-    })
-  },
-  realmsOptions: () => {
-    return apiCall.options('config/realms').then(response => {
-      return response.data
+const api = {
+  search: data => {
+    const singleTenant = store.state.session.tenant
+    const tenants = (singleTenant)
+      ? store.state.session.tenants.filter(tenant => +tenant.id === +singleTenant.id) // single-tenant mode
+      : store.state.session.tenants // multi-tenant mode
+    const promises = []
+    tenants.forEach(tenant => {
+      const headers = { 'X-PacketFence-Tenant-Id': tenant.id }
+      const p = apiCall.post('config/realms/search', data, { headers })
+        .then(response => {
+          const { data: { items = [] } = {} } = response
+          return { items: items.map(item => ({ ...item, tenant_id: tenant.id })) }
+        })
+        .catch(e => e) // ignore singular errors
+      promises.push(p)
     })
-  },
-  realm: (tenantId, id) => {
-    const headers = {
-      'X-PacketFence-Tenant-Id': tenantId
-    }
-    return apiCall.get(['config', 'realm', id], { headers }).then(response => {
-      return response.data.item
-    })
-  },
-  realmOptions: (tenantId, id) => {
-    const headers = {
-      'X-PacketFence-Tenant-Id': tenantId
-    }
-    return apiCall.options(['config', 'realm', id], { headers }).then(response => {
-      return response.data
-    })
-  },
-  createRealm: (tenantId, item) => {
-    const headers = {
-      'X-PacketFence-Tenant-Id': tenantId
-    }
-    return apiCall.post('config/realms', item, { headers }).then(response => {
-      return response.data
-    })
-  },
-  updateRealm: (tenantId, item) => {
-    const headers = {
-      'X-PacketFence-Tenant-Id': tenantId
-    }
-    return apiCall.patch(['config', 'realm', item.id], item, { headers }).then(response => {
-      return response.data
-    })
-  },
-  deleteRealm: (tenantId, id) => {
-    const headers = {
-      'X-PacketFence-Tenant-Id': tenantId
-    }
-    return apiCall.delete(['config', 'realm', id], { headers })
-  },
-  sortRealms: (tenantId, items) => {
-    const headers = {
-      'X-PacketFence-Tenant-Id': tenantId
+    return Promise.all(promises)
+      .then(responses => {
+        return {
+          items: responses.reduce((items, response) => {
+            return [ ...items, ...response.items ]
+          }, [])
+        }
+      })
+  }
+}
+
+export default api
+
+export const apiFactory = tenantId => {
+  const headers = {
+    'X-PacketFence-Tenant-Id': tenantId
+  }
+  return {
+    ...api,
+    list: params => {
+      return apiCall.get('config/realms', { params, headers }).then(response => {
+        return response.data
+      })
+    },
+    listOptions: () => {
+      return apiCall.options('config/realms', { headers }).then(response => {
+        return response.data
+      })
+    },
+    search: data => {
+      return apiCall.post('config/realms/search', data, { headers }).then(response => {
+        return response.data
+      })
+    },
+    sortItems: items => {
+      return apiCall.patch('config/realms/sort_items', items, { headers }).then(response => {
+        return response
+      })
+    },
+    create: item => {
+      return apiCall.post('config/realms', item, { headers }).then(response => {
+        return response.data
+      })
+    },
+    item: id => {
+      return apiCall.get(['config', 'realm', id], { headers }).then(response => {
+        return response.data.item
+      })
+    },
+    itemOptions: id => {
+      return apiCall.options(['config', 'realm', id], { headers }).then(response => {
+        return response.data
+      })
+    },
+    update: item => {
+      return apiCall.patch(['config', 'realm', item.id], item, { headers }).then(response => {
+        return response.data
+      })
+    },
+    delete: id => {
+      return apiCall.delete(['config', 'realm', id], { headers })
     }
-    return apiCall.patch('config/realms/sort_items', items, { headers }).then(response => {
-      return response
-    })
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/realms/_components/TheForm.vue
index f5d931bdfb75..c05166af90c8 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/realms/_components/TheForm.vue
@@ -209,7 +209,7 @@ export const props = {
     type: String
   },
   tenantId: {
-    type: String
+    type: [Number, String]
   },
   form: {
     type: Object
diff --git a/html/pfappserver/root/src/views/Configuration/_components/RealmsList.vue b/html/pfappserver/root/src/views/Configuration/realms/_components/TheSearch.vue
similarity index 65%
rename from html/pfappserver/root/src/views/Configuration/_components/RealmsList.vue
rename to html/pfappserver/root/src/views/Configuration/realms/_components/TheSearch.vue
index bd1004f99156..eea634ebea8b 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/RealmsList.vue
+++ b/html/pfappserver/root/src/views/Configuration/realms/_components/TheSearch.vue
@@ -1,3 +1,122 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center mb-0">
+        {{ $t('Realms') }}
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_default_domain_configuration" />
+      </h4>
+    </b-card-header>
+    <div class="card-body">
+      <div class="alert alert-warning">{{ $t(`Any changes to the realms requires to restart radiusd-auth`) }}</div>
+      <base-search :use-search="useSearch">
+        <base-button-service
+          service="radiusd-auth" restart start stop
+          class="ml-1" />
+      </base-search>
+
+      <b-card v-for="(tenant, index) in tenantsRealms" :key="tenant.id"
+        :class="{ 'mt-3': index > 0 }">
+        <h4 class="mb-3">{{ tenant.name }}</h4>
+        <b-button variant="outline-primary" @click="goToNew({ tenantId: tenant.id })">{{ $t('New Realm') }}</b-button>
+        <the-table class="mt-3" :tenantId="tenant.id"
+          :isLoading="isLoading"
+          :items="tenant.items"
+          :columns="columns"
+          :visibleColumns="visibleColumns"
+          @reSearch="reSearch"
+          @setColumns="setColumns"
+        />
+      </b-card>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableSortable
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import TheTable from './TheTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableSortable,
+  pfEmptyTable,
+  TheTable
+}
+
+import { computed, toRefs } from '@vue/composition-api'
+import { useRouter, useSearch } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const search = useSearch()
+  const {
+    items
+  } = toRefs(search)
+
+  const singleTenant = computed(() => $store.state.session.tenant)
+  const tenants = computed(() => ((singleTenant.value)
+    ? $store.state.session.tenants.filter(tenant => +tenant.id === +singleTenant.value.id) // single-tenant mode
+    : $store.state.session.tenants // multi-tenant mode
+  ))
+  const tenantsRealms = computed(() => {
+    return tenants.value.map(tenant => {
+      return { ...tenant, items: items.value.filter(item => +item.tenant_id === +tenant.id ) }
+    })
+  })
+
+  return {
+    useSearch,
+    ...router,
+    ...toRefs(search),
+    tenantsRealms
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<!--
+
+
 <template>
   <b-card no-body>
     <b-card-header>
@@ -26,12 +145,12 @@
           <pf-empty-table :is-loading="isLoading" :text="$t('Click the button to create a new Realm for this Tenant.')">{{ $t('No realms found for this tenant') }}</pf-empty-table>
         </template>
         <template v-slot:cell(radius_auth)="{ radius_auth: value }">
-          <span v-if="value.length === 0">&nbsp;<!-- hide empty --></span>
+          <span v-if="value.length === 0">&nbsp;</span>
           <b-badge v-else v-for="(item, index) in value" :key="index" class="ml-2" variant="secondary">{{ item }}</b-badge>
         </template>
 
         <template v-slot:cell(radius_acct)="{ radius_acct: value }">
-          <span v-if="value.length === 0">&nbsp;<!-- hide empty --></span>
+          <span v-if="value.length === 0">&nbsp;</span>
           <b-badge v-else v-for="(item, index) in value" :key="index" class="ml-2" variant="secondary">{{ item }}</b-badge>
         </template>
         <template v-slot:cell(portal_strip_username)="{ portal_strip_username: value }">
@@ -63,7 +182,7 @@ import pfButtonService from '@/components/pfButtonService'
 import pfButtonHelp from '@/components/pfButtonHelp'
 import pfEmptyTable from '@/components/pfEmptyTable'
 import pfTableSortable from '@/components/pfTableSortable'
-import { config } from '../_config/realm'
+import { config } from '../../_config/realm'
 
 export default {
   name: 'realms-list',
@@ -131,3 +250,5 @@ export default {
   }
 }
 </script>
+
+-->
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_components/TheTable.vue b/html/pfappserver/root/src/views/Configuration/realms/_components/TheTable.vue
new file mode 100644
index 000000000000..27d7665047aa
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/realms/_components/TheTable.vue
@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <base-table-sortable ref="tableRef"
+      :busy="isLoading"
+      :hover="items.length > 0"
+      :items="items"
+      :fields="visibleColumns"
+      class="mb-0"
+      show-empty
+      fixed
+      striped
+      selectable
+      @row-clicked="goToItem({ ...$event, tenantId })"
+      @row-selected="onRowSelected"
+      @items-sorted="onSorted"
+    >
+      <template v-slot:empty>
+        <slot name="emptySearch" v-bind="{ isLoading }">
+            <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+        </slot>
+      </template>
+      <template #head(selected)>
+        <span @click.stop.prevent="onAllSelected">
+          <template v-if="selected.length > 0">
+            <icon name="check-square" class="bg-white text-success" scale="1.125" />
+          </template>
+          <template v-else>
+            <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+          </template>
+        </span>
+      </template>
+      <template #head(buttons)>
+        <base-search-input-columns
+          :disabled="isLoading"
+          :value="columns"
+          @input="$emit('setColumns', $event)"
+        />
+      </template>
+      <template #cell(selected)="{ index, rowSelected }">
+        <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <template v-if="rowSelected">
+            <icon name="check-square" class="bg-white text-success" scale="1.125" />
+          </template>
+          <template v-else>
+            <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+          </template>
+        </span>
+      </template>
+      <template #cell(radius_auth)="{ item: { radius_auth: value } }">
+        <span v-if="value.length === 0">&nbsp;</span>
+        <b-badge v-else v-for="(item, index) in value" :key="index" class="ml-2" variant="secondary">{{ item }}</b-badge>
+      </template>
+      <template #cell(radius_acct)="{ item: { radius_acct: value } }">
+        <span v-if="value.length === 0">&nbsp;</span>
+        <b-badge v-else v-for="(item, index) in value" :key="index" class="ml-2" variant="secondary">{{ item }}</b-badge>
+      </template>
+      <template #cell(portal_strip_username)="{ item: { portal_strip_username: value } }">
+        <icon name="circle" :class="{ 'text-success': value === 'enabled', 'text-danger': value === 'disabled' }"
+          v-b-tooltip.hover.left.d300 :title="$t(value)"></icon>
+      </template>
+      <template #cell(admin_strip_username)="{ item: { admin_strip_username: value } }">
+        <icon name="circle" :class="{ 'text-success': value === 'enabled', 'text-danger': value === 'disabled' }"
+          v-b-tooltip.hover.left.d300 :title="$t(value)"></icon>
+      </template>
+      <template #cell(radius_strip_username)="{ item: { radius_strip_username: value } }">
+        <icon name="circle" :class="{ 'text-success': value === 'enabled', 'text-danger': value === 'disabled' }"
+          v-b-tooltip.hover.left.d300 :title="$t(value)"></icon>
+      </template>
+      <template #cell(buttons)="{ item }">
+        <span class="float-right text-nowrap text-right"
+          @click.stop.prevent
+        >
+          <base-button-confirm v-if="!item.not_deletable"
+            size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+            :disabled="isLoading"
+            :confirm="$t('Delete Source?')"
+            @click="onRemove(item.id)"
+          >{{ $t('Delete') }}</base-button-confirm>
+          <b-button
+            size="sm" variant="outline-primary" class="mr-1"
+            @click.stop.prevent="goToClone({ ...item, tenantId })"
+          >{{ $t('Clone') }}</b-button>
+        </span>
+      </template>
+    </base-table-sortable>
+    <b-container fluid v-if="selected.length"
+      class="mt-3 p-0">
+      <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+        <template #button-content>
+          {{ $t('{num} selected', { num: selected.length }) }}
+        </template>
+        <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+      </b-dropdown>
+    </b-container>
+  </div>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearchInputColumns,
+  BaseTableSortable
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearchInputColumns,
+  BaseTableSortable,
+  pfEmptyTable
+}
+
+const props = {
+  isLoading: {
+    type: Boolean
+  },
+  items: {
+    type: Array
+  },
+  columns: {
+    type: Array
+  },
+  visibleColumns: {
+    type: Array
+  },
+  tenantId: {
+    type: [Number, String]
+  }
+}
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useRouter, useStore } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const {
+    items,
+    visibleColumns
+  } = toRefs(props)
+
+  const { emit, root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const {
+    deleteItem,
+    sortItems
+  } = useStore($store)
+
+  const onRemove = id => {
+    deleteItem({ id })
+      .then(() => emit('reSearch'))
+  }
+
+  const onSorted = _items => {
+    items.value = _items
+    sortItems({ items: items.value.map(item => item.id) })
+      .then(() => emit('reSearch'))
+  }
+
+  return {
+    tableRef,
+    ...router,
+    ...selected,
+    onBulkExport,
+    onRemove,
+    onSorted
+  }
+
+}
+
+// @vue/component
+export default {
+  name: 'the-table',
+  inheritAttrs: false,
+  components,
+  props,
+  setup
+}
+</script>
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/realms/_components/TheView.js
index b067861f2a36..04dcbe3eb28f 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/realms/_components/TheView.js
@@ -10,21 +10,28 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 
 const props = {
   ...useViewCollectionItemProps,
 
-  id: {
-    type: String
-  },
   tenantId: {
-    type: String
+    type: [Number, String]
   }
 }
 
 import * as collection from '../_composables/useCollection'
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+  // merge props w/ params in collection.useRouter methods
+  _collection.useRouter = $router => usePropsWrapper(collection.useRouter($router), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
index 5d5e332d90be..f8e0b08e5e4e 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
@@ -24,12 +24,15 @@ export const useItemTitleBadge = (props, context) => {
     tenantId
   } = toRefs(props)
   const { root: { $store } = {} } = context
-  const { name: tenantName } = $store.state.session.tenants.find(tenant => tenant.id === tenantId.value)
+  const { name: tenantName } = $store.state.session.tenants.find(tenant => +tenant.id === +tenantId.value)
   return tenantName
 }
 
 export { useRouter } from '../_router'
 
+export { useStore } from '../_store'
+
+/*
 export const useStore = (props, context, form) => {
   const {
     id,
@@ -52,3 +55,106 @@ export const useStore = (props, context, form) => {
     updateItem: () => $store.dispatch('$_realms/updateRealm', { item: form.value, tenantId: tenantId.value }),
   }
 }
+*/
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('realms', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Name', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'regex',
+      label: 'Regex Realm', // i18n defer
+      searchable: true,
+      visible: true
+    },
+    {
+      key: 'eap',
+      label: 'EAP Configuration',
+      searchable: true,
+      visible: true
+    },
+    {
+      key: 'domain',
+      label: 'Domain', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'radius_auth',
+      label: 'RADIUS Authentication', // i18n defer
+      searchable: true,
+      visible: true
+    },
+    {
+      key: 'radius_acct',
+      label: 'RADIUS Accounting', // i18n defer
+      searchable: true,
+      visible: true
+    },
+    {
+      key: 'portal_strip_username',
+      label: 'Strip Portal', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'admin_strip_username',
+      label: 'Strip Admin', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'radius_strip_username',
+      label: 'Strip RADIUS', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    },
+    {
+      key: 'not_sortable',
+      required: true,
+      visible: false
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'not_equals', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_router.js b/html/pfappserver/root/src/views/Configuration/realms/_router.js
index ef39d6531261..261c16a5b9bd 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/realms/_router.js
@@ -1,27 +1,22 @@
-import { toRefs } from '@vue/composition-api'
 import store from '@/store'
 import DomainsStoreModule from '../domains/_store'
 import RealmsStoreModule from './_store'
+import TenantsStoreModule from '../tenants/_store'
 
 export const TheTabs = () => import(/* webpackChunkName: "Configuration" */ '../_components/DomainsTabs')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const useRouter = $router => {
   return {
-    goToCollection: (params, props) => {
-      const { tenantId } = toRefs(props)
-      return $router.push({ name: 'realms', params: { tenantId: tenantId.value } })
+    goToCollection: params => $router.push({ name: 'realms', params }),
+    goToItem: params => $router
+      .push({ name: 'realm', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToClone: params => {
+console.log('goToClone', JSON.stringify({ params }, null, 2))
+      $router.push({ name: 'cloneRealm', params })
     },
-    goToItem: (params, props) => {
-      const { tenantId } = toRefs(props)
-      return $router
-        .push({ name: 'realm', params: { ...params, tenantId: tenantId.value } })
-        .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
-    },
-    goToClone: (params, props) => {
-      const { tenantId } = toRefs(props)
-      return $router.push({ name: 'cloneRealm', params: { ...params, tenantId: tenantId.value } })
-    }
+    goToNew: params => $router.push({ name: 'newRealm', params })
   }
 }
 
@@ -30,6 +25,8 @@ export const beforeEnter = (to, from, next = () => {}) => {
     store.registerModule('$_domains', DomainsStoreModule)
   if (!store.state.$_realms)
     store.registerModule('$_realms', RealmsStoreModule)
+  if (!store.state.$_tenants)
+    store.registerModule('$_tenants', TenantsStoreModule)
   next()
 }
 
@@ -38,7 +35,7 @@ export default [
     path: 'realms',
     name: 'realms',
     component: TheTabs,
-    props: (route) => ({ tab: 'realms', query: route.query.query }),
+    props: () => ({ tab: 'realms' }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_store.js b/html/pfappserver/root/src/views/Configuration/realms/_store.js
index aef777570e30..44776f3683f1 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/realms/_store.js
@@ -2,7 +2,29 @@
 * "$_realms" store module
 */
 import Vue from 'vue'
-import api from './_api'
+import { computed } from '@vue/composition-api'
+import { apiFactory } from './_api'
+
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_realms/isLoading']),
+    getList: params => $store.dispatch('$_realms/allByTenant', params),
+    getListOptions: params => {
+      const { id, ..._params } = params // strip `id`
+      return $store.dispatch('$_realms/options', _params)
+    },
+    createItem: params => $store.dispatch('$_realms/createRealm', params),
+    sortItems: params => $store.dispatch('$_realms/sortRealms', params),
+    getItem: params => $store.dispatch('$_realms/getRealm', params).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_realms/options', params),
+    updateItem: params => $store.dispatch('$_realms/updateRealm', params),
+    deleteItem: params => $store.dispatch('$_realms/deleteRealm', params),
+  }
+}
 
 const types = {
   LOADING: 'loading',
@@ -34,7 +56,7 @@ const actions = {
       const params = {
         fields: ['id']
       }
-      api.realms(tenantId, params).then(response => {
+      apiFactory(tenantId).list(params).then(response => {
         commit('TENANT_SUCCESS', { tenantId, items: response.items })
       }).catch(err => {
         commit('TENANT_ERROR', err.response)
@@ -48,7 +70,7 @@ const actions = {
       items
     }
     commit('TENANT_REQUEST', tenantId)
-    return api.sortRealms(tenantId, params).then(response => {
+    return apiFactory(tenantId).sortItems(params).then(response => {
       commit('TENANT_RESORTED', { tenantId, items })
       return response
     }).catch(err => {
@@ -59,7 +81,7 @@ const actions = {
   options: ({ commit }, { tenantId, id }) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.realmOptions(tenantId, id).then(response => {
+      return apiFactory(tenantId).itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch(err => {
@@ -67,7 +89,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.realmsOptions().then(response => {
+      return apiFactory(tenantId).listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch(err => {
@@ -81,7 +103,7 @@ const actions = {
       return state.cache[tenantId][id]
     }
     commit('ITEM_REQUEST')
-    return api.realm(tenantId, id).then(item => {
+    return apiFactory(tenantId).item(id).then(item => {
       commit('ITEM_REPLACED', { tenantId, item })
       return item
     }).catch(err => {
@@ -91,7 +113,7 @@ const actions = {
   },
   createRealm: ({ commit }, { tenantId, item }) => {
     commit('ITEM_REQUEST')
-    return api.createRealm(tenantId, item).then(response => {
+    return apiFactory(tenantId).create(item).then(response => {
       commit('ITEM_REPLACED', { tenantId, item })
       return response
     }).catch(err => {
@@ -101,7 +123,7 @@ const actions = {
   },
   updateRealm: ({ commit }, { tenantId, item }) => {
     commit('ITEM_REQUEST')
-    return api.updateRealm(tenantId, item).then(response => {
+    return apiFactory(tenantId).update(item).then(response => {
       commit('ITEM_REPLACED', { tenantId, item })
       return response
     }).catch(err => {
@@ -111,7 +133,7 @@ const actions = {
   },
   deleteRealm: ({ commit }, { tenantId, id }) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteRealm(tenantId, id).then(response => {
+    return apiFactory(tenantId).delete(id).then(response => {
       commit('ITEM_DESTROYED', { tenantId, id })
       return response
     }).catch(err => {
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/roles/_components/TheView.js
index e3baafaa9c98..997063fd871b 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/roles/_components/TheView.js
@@ -10,10 +10,17 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-
 import * as collection from '../_composables/useCollection'
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js
index c0f85b14437a..f39b2dae57fa 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js
@@ -21,27 +21,7 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_roles/isLoading']),
-    getOptions: () => $store.dispatch('$_roles/options'),
-    createItem: () => $store.dispatch('$_roles/createRole', form.value),
-    deleteItem: () => $store.dispatch('$_roles/deleteRole', id.value),
-    getItem: () => $store.dispatch('$_roles/getRole', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_roles/updateRole', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { useSearch as useConfigurationSearch } from '@/views/Configuration/_composables/useSearch'
 import api from '../_api'
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_store.js b/html/pfappserver/root/src/views/Configuration/roles/_store.js
index 8f5592c3a0ff..9faff9215fd7 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/roles/_store.js
@@ -2,8 +2,26 @@
 * "$_roles" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_roles/isLoading']),
+    getList: () => $store.dispatch('$_roles/all'),
+    getListOptions: () => $store.dispatch('$_roles/options'),
+    createItem: params => $store.dispatch('$_roles/createRole', params),
+    getItem: params => $store.dispatch('$_roles/getRole', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_roles/options', params.id),
+    updateItem: params => $store.dispatch('$_roles/updateRole', params),
+    deleteItem: params => $store.dispatch('$_roles/deleteRole', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheView.js
index e35e28224e69..b11d67a4677d 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -18,7 +19,13 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js
index 250a6e39d713..170b078d8729 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js
@@ -48,31 +48,4 @@ export const useItemTitleBadge = (props, context, form) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone,
-    isNew,
-    scanType
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_scans/isLoading']),
-    getOptions: () => {
-      if (isNew.value)
-        return $store.dispatch('$_scans/optionsByScanType', scanType.value)
-      else
-        return $store.dispatch('$_scans/optionsById', id.value)
-    },
-    createItem: () => $store.dispatch('$_scans/createScanEngine', form.value),
-    deleteItem: () => $store.dispatch('$_scans/deleteScanEngine', id.value),
-    getItem: () => $store.dispatch('$_scans/getScanEngine', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_scans/updateScanEngine', form.value),
-  }
-}
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_store.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_store.js
index f785b9ebb3ba..0960d64cfe51 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_store.js
@@ -2,8 +2,26 @@
 * "$_scans" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_scans/isLoading']),
+    getList: () => $store.dispatch('$_scans/all'),
+    getListOptions: params => $store.dispatch('$_scans/optionsByScanType', params.scanType),
+    createItem: params => $store.dispatch('$_scans/createScanEngine', params),
+    getItem: params => $store.dispatch('$_scans/getScanEngine', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_scans/optionsById', params.id),
+    updateItem: params => $store.dispatch('$_scans/updateScanEngine', params),
+    deleteItem: params => $store.dispatch('$_scans/deleteScanEngine', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheView.js
index e3baafaa9c98..997063fd871b 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheView.js
@@ -10,10 +10,17 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-
 import * as collection from '../_composables/useCollection'
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js
index bd68ecf717f4..8f7ce588e087 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js
@@ -21,24 +21,4 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_security_events/isLoading']),
-    getOptions: () => $store.dispatch('$_security_events/options'),
-    createItem: () => $store.dispatch('$_security_events/createSecurityEvent', form.value),
-    deleteItem: () => $store.dispatch('$_security_events/deleteSecurityEvent', id.value),
-    getItem: () => $store.dispatch('$_security_events/getSecurityEvent', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_security_events/updateSecurityEvent', form.value),
-  }
-}
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_store.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_store.js
index 6a220cc17f99..62f0a75ca0df 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_store.js
@@ -2,12 +2,30 @@
 * "$_security_events" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 import {
   decomposeTriggers,
   recomposeTriggers
 } from '../securityEvents/config'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_security_events/isLoading']),
+    getList: () => $store.dispatch('$_security_events/all'),
+    getListOptions: () => $store.dispatch('$_security_events/options'),
+    createItem: params => $store.dispatch('$_security_events/createSecurityEvent', params),
+    getItem: params => $store.dispatch('$_security_events/getSecurityEvent', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_security_events/options', params.id),
+    updateItem: params => $store.dispatch('$_security_events/updateSecurityEvent', params),
+    deleteItem: params => $store.dispatch('$_security_events/deleteSecurityEvent', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheView.js
index e3baafaa9c98..997063fd871b 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheView.js
@@ -10,10 +10,17 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-
 import * as collection from '../_composables/useCollection'
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js
index 0f42548d0a72..b51b19727582 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js
@@ -21,24 +21,4 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_self_services/isLoading']),
-    getOptions: () => $store.dispatch('$_self_services/options'),
-    createItem: () => $store.dispatch('$_self_services/createSelfService', form.value),
-    deleteItem: () => $store.dispatch('$_self_services/deleteSelfService', id.value),
-    getItem: () => $store.dispatch('$_self_services/getSelfService', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_self_services/updateSelfService', form.value),
-  }
-}
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_store.js b/html/pfappserver/root/src/views/Configuration/selfServices/_store.js
index 8ca23ceaa0c0..80e343649da8 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_store.js
@@ -2,8 +2,26 @@
 * "$_self_services" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_self_services/isLoading']),
+    getList: () => $store.dispatch('$_self_services/all'),
+    getListOptions: () => $store.dispatch('$_self_services/options'),
+    createItem: params => $store.dispatch('$_self_services/createSelfService', params),
+    getItem: params => $store.dispatch('$_self_services/getSelfService', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_self_services/options', params.id),
+    updateItem: params => $store.dispatch('$_self_services/updateSelfService', params),
+    deleteItem: params => $store.dispatch('$_self_services/deleteSelfService', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue
index 2416bb05c883..361b9db46207 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue
@@ -118,7 +118,7 @@ const setup = (props, context) => {
     visibleColumns
   } = toRefs(props)
 
-  const { emit, root: { $router } = {} } = context
+  const { emit, root: { $router, $store } = {} } = context
 
   const router = useRouter($router)
 
@@ -137,16 +137,15 @@ const setup = (props, context) => {
   const {
     deleteItem,
     sortItems
-  } = useStore(props, context)
+  } = useStore($store)
 
   const onRemove = id => {
-    deleteItem(id)
+    deleteItem({ id })
       .then(() => emit('reSearch'))
   }
 
-  const onSorted = _items => {
-    items.value = _items
-    sortItems(items.value.map(item => item.id))
+  const onSorted = items => {
+    sortItems({ items: items.map(item => item.id) })
       .then(() => emit('reSearch'))
   }
 
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/sources/_components/TheView.js
index 3c311e44c931..34f91f84bf62 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/TheView.js
@@ -11,6 +11,7 @@ const components = {
 }
 
 import { computed, toRefs } from '@vue/composition-api'
+import { usePropsWrapper } from '@/composables/useProps'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
@@ -26,7 +27,11 @@ const setup = (props, context) => {
     sourceType
   } = toRefs(props)
 
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
   const {
     form
   } = viewCollectionItem
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js
index 1bcf8cb04574..97b862815514 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js
@@ -45,35 +45,7 @@ export const useItemTitleBadge = (props, context, form) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone,
-    isNew,
-    sourceType
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_sources/isLoading']),
-    getOptions: () => {
-      if (isNew.value)
-        return $store.dispatch('$_sources/optionsBySourceType', sourceType.value)
-      else
-        return $store.dispatch('$_sources/optionsById', id.value)
-    },
-    createItem: () => $store.dispatch('$_sources/createAuthenticationSource', form.value),
-    deleteItem: () => $store.dispatch('$_sources/deleteAuthenticationSource', id.value),
-    getItem: () => $store.dispatch('$_sources/getAuthenticationSource', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_sources/updateAuthenticationSource', form.value),
-    sortItems: params => $store.dispatch('$_sources/sortAuthenticationSources', params)
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_store.js b/html/pfappserver/root/src/views/Configuration/sources/_store.js
index c859f9dc5941..254d5fa0f629 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/_store.js
@@ -2,8 +2,27 @@
 * "$_sources" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_sources/isLoading']),
+    getList: () => $store.dispatch('$_sources/all'),
+    getListOptions: params => $store.dispatch('$_sources/optionsBySourceType', params),
+    createItem: params => $store.dispatch('$_sources/createAuthenticationSource', params),
+    sortItems: params => $store.dispatch('$_sources/sortAuthenticationSources', params.items),
+    getItem: params => $store.dispatch('$_sources/getAuthenticationSource', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_sources/optionsById', params.id),
+    updateItem: params => $store.dispatch('$_sources/updateAuthenticationSource', params),
+    deleteItem: params => $store.dispatch('$_sources/deleteAuthenticationSource', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheView.js
index 4935894fc140..449d21477d5a 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheView.js
@@ -11,6 +11,7 @@ const components = {
 }
 
 import { computed, toRefs } from '@vue/composition-api'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -20,16 +21,19 @@ const props = {
 }
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const {
-    switchGroup
-  } = toRefs(props)
-
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
   const {
     form
   } = viewCollectionItem
 
+  const {
+    switchGroup
+  } = toRefs(props)
+
   const titleBadge = computed(() => switchGroup.value || form.value.group)
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js
index 8d0d1a6dd775..b379b10227a9 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js
@@ -39,23 +39,4 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    isNew,
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_switch_groups/isLoading']),
-    getOptions: () => {
-      if (isNew.value)
-        return $store.dispatch('$_switch_groups/options')
-      else
-        return $store.dispatch('$_switch_groups/options', id.value)
-    },
-    createItem: () => $store.dispatch('$_switch_groups/createSwitchGroup', form.value),
-    deleteItem: () => $store.dispatch('$_switch_groups/deleteSwitchGroup', id.value),
-    getItem: () => $store.dispatch('$_switch_groups/getSwitchGroup', id.value),
-    updateItem: () => $store.dispatch('$_switch_groups/updateSwitchGroup', form.value),
-  }
-}
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_store.js b/html/pfappserver/root/src/views/Configuration/switchGroups/_store.js
index a6aef62ca7f0..19f98b357797 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_store.js
@@ -2,8 +2,22 @@
 * "$_switch_groups" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_switch_groups/isLoading']),
+    getList: () => $store.dispatch('$_switch_groups/all'),
+    getListOptions: () => $store.dispatch('$_switch_groups/options'),
+    createItem: params => $store.dispatch('$_switch_groups/createSwitchGroup', params),
+    getItem: params => $store.dispatch('$_switch_groups/getSwitchGroup', params.id),
+    getItemOptions: params => $store.dispatch('$_switch_groups/options', params.id),
+    updateItem: params => $store.dispatch('$_switch_groups/updateSwitchGroup', params),
+    deleteItem: params => $store.dispatch('$_switch_groups/deleteSwitchGroup', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheView.js
index e3baafaa9c98..997063fd871b 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheView.js
@@ -10,10 +10,17 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-
 import * as collection from '../_composables/useCollection'
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js
index 9a62458ff892..018c4ab3f8f3 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js
@@ -21,24 +21,4 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_switch_templates/isLoading']),
-    getOptions: () => $store.dispatch('$_switch_templates/options'),
-    createItem: () => $store.dispatch('$_switch_templates/createSwitchTemplate', form.value),
-    deleteItem: () => $store.dispatch('$_switch_templates/deleteSwitchTemplate', id.value),
-    getItem: () => $store.dispatch('$_switch_templates/getSwitchTemplate', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}_${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_switch_templates/updateSwitchTemplate', form.value),
-  }
-}
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_store.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_store.js
index 056966bef9c3..bb44fb91d89e 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_store.js
@@ -2,8 +2,26 @@
 * "$_switch_templates" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_switch_templates/isLoading']),
+    getList: () => $store.dispatch('$_switch_templates/all'),
+    getListOptions: () => $store.dispatch('$_switch_templates/options'),
+    createItem: params => $store.dispatch('$_switch_templates/createSwitchTemplate', params),
+    getItem: params => $store.dispatch('$_switch_templates/getSwitchTemplate', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_switch_templates/options', params.id),
+    updateItem: params => $store.dispatch('$_switch_templates/updateSwitchTemplate', params),
+    deleteItem: params => $store.dispatch('$_switch_templates/deleteSwitchTemplate', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/switches/_components/TheView.js
index 4935894fc140..449d21477d5a 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/switches/_components/TheView.js
@@ -11,6 +11,7 @@ const components = {
 }
 
 import { computed, toRefs } from '@vue/composition-api'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -20,16 +21,19 @@ const props = {
 }
 
 const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const {
-    switchGroup
-  } = toRefs(props)
-
-  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
   const {
     form
   } = viewCollectionItem
 
+  const {
+    switchGroup
+  } = toRefs(props)
+
   const titleBadge = computed(() => switchGroup.value || form.value.group)
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js
index 0d769128d914..200841192e08 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js
@@ -38,24 +38,4 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isNew,
-    switchGroup
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_switches/isLoading']),
-    getOptions: () => {
-      if (isNew.value)
-        return $store.dispatch('$_switches/optionsBySwitchGroup', switchGroup.value)
-      else
-        return $store.dispatch('$_switches/optionsById', id.value)
-    },
-    createItem: () => $store.dispatch('$_switches/createSwitch', form.value),
-    deleteItem: () => $store.dispatch('$_switches/deleteSwitch', id.value),
-    getItem: () => $store.dispatch('$_switches/getSwitch', id.value),
-    updateItem: () => $store.dispatch('$_switches/updateSwitch', form.value),
-  }
-}
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_store.js b/html/pfappserver/root/src/views/Configuration/switches/_store.js
index e24eeeeaa35b..47215611959c 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/switches/_store.js
@@ -2,8 +2,22 @@
 * "$_switches" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_switches/isLoading']),
+    getList: () => $store.dispatch('$_switches/all'),
+    getListOptions: params => $store.dispatch('$_switches/optionsBySwitchGroup', params.switchGroup),
+    createItem: params => $store.dispatch('$_switches/createSwitch', params),
+    getItem: params => $store.dispatch('$_switches/getSwitch', params.id),
+    getItemOptions: params => $store.dispatch('$_switches/optionsById', params.id),
+    updateItem: params => $store.dispatch('$_switches/updateSwitch', params),
+    deleteItem: params => $store.dispatch('$_switches/deleteSwitch', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheView.js
index e35e28224e69..b11d67a4677d 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -18,7 +19,13 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
index 14c2e5c55601..1497d9730314 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
@@ -45,31 +45,4 @@ export const useItemTitleBadge = (props, context, form) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone,
-    isNew,
-    syslogForwarderType
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_syslog_forwarders/isLoading']),
-    getOptions: () => {
-      if (isNew.value)
-        return $store.dispatch('$_syslog_forwarders/optionsBySyslogForwarderType', syslogForwarderType.value)
-      else
-        return $store.dispatch('$_syslog_forwarders/optionsById', id.value)
-    },
-    createItem: () => $store.dispatch('$_syslog_forwarders/createSyslogForwarder', form.value),
-    deleteItem: () => $store.dispatch('$_syslog_forwarders/deleteSyslogForwarder', id.value),
-    getItem: () => $store.dispatch('$_syslog_forwarders/getSyslogForwarder', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_syslog_forwarders/updateSyslogForwarder', form.value),
-  }
-}
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_store.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_store.js
index 3cbd7a0709ae..6c0209781510 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_store.js
@@ -2,8 +2,26 @@
 * "$_syslog_forwarders" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_syslog_forwarders/isLoading']),
+    getList: () => $store.dispatch('$_syslog_forwarders/all'),
+    getListOptions: params => $store.dispatch('$_syslog_forwarders/optionsBySyslogForwarderType', params.syslogForwarderType),
+    createItem: params => $store.dispatch('$_syslog_forwarders/createSyslogForwarder', params),
+    getItem: params => $store.dispatch('$_syslog_forwarders/getSyslogForwarder', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_syslog_forwarders/optionsById', params.id),
+    updateItem: params => $store.dispatch('$_syslog_forwarders/updateSyslogForwarder', params),
+    deleteItem: params => $store.dispatch('$_syslog_forwarders/deleteSyslogForwarder', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheView.js
index e35e28224e69..b11d67a4677d 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheView.js
@@ -10,6 +10,7 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -18,7 +19,13 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js
index 6424b02175e9..f5db129acb3d 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js
@@ -45,31 +45,4 @@ export const useItemTitleBadge = (props, context, form) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone,
-    isNew,
-    syslogParserType
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_syslog_parsers/isLoading']),
-    getOptions: () => {
-      if (isNew.value)
-        return $store.dispatch('$_syslog_parsers/optionsBySyslogParserType', syslogParserType.value)
-      else
-        return $store.dispatch('$_syslog_parsers/optionsById', id.value)
-    },
-    createItem: () => $store.dispatch('$_syslog_parsers/createSyslogParser', form.value),
-    deleteItem: () => $store.dispatch('$_syslog_parsers/deleteSyslogParser', id.value),
-    getItem: () => $store.dispatch('$_syslog_parsers/getSyslogParser', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_syslog_parsers/updateSyslogParser', form.value),
-  }
-}
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_store.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_store.js
index 432d0aaa35fb..03eaaec06f6e 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_store.js
@@ -2,8 +2,26 @@
 * "$_syslog_parsers" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_syslog_parsers/isLoading']),
+    getList: () => $store.dispatch('$_syslog_parsers/all'),
+    getListOptions: params => $store.dispatch('$_syslog_parsers/optionsBySyslogParserType', params.SyslogParserType),
+    createItem: params => $store.dispatch('$_syslog_parsers/createSyslogParser', params),
+    getItem: params => $store.dispatch('$_syslog_parsers/getSyslogParser', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_syslog_parsers/optionsById', params.id),
+    updateItem: params => $store.dispatch('$_syslog_parsers/updateSyslogParser', params),
+    deleteItem: params => $store.dispatch('$_syslog_parsers/deleteSyslogParser', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DRYRUN: 'dryrun',
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheView.js
index e3baafaa9c98..997063fd871b 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheView.js
@@ -10,10 +10,17 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-
 import * as collection from '../_composables/useCollection'
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
index 8166a7eaaed8..47c7efb7ca95 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
@@ -23,28 +23,7 @@ export const useItemTitle = (props, context) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_tenants/isLoading']),
-    getOptions: () => $store.dispatch('$_tenants/options'),
-    createItem: () => $store.dispatch('$_tenants/createTenant', form.value),
-    deleteItem: () => $store.dispatch('$_tenants/deleteTenant', id.value),
-    getItem: () => $store.dispatch('$_tenants/getTenant', id.value).then(_item => {
-      let item = { ..._item } // dereference
-      if (isClone.value) {
-        item.name = `${item.name}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_tenants/updateTenant', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { useSearch as useConfigurationSearch } from '@/views/Configuration/_composables/useSearch'
 import api from '../_api'
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_store.js b/html/pfappserver/root/src/views/Configuration/tenants/_store.js
index 5320f1bf9129..e9c49e3d6bba 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_store.js
@@ -2,8 +2,26 @@
 * "$_tenants" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_tenants/isLoading']),
+    getList: () => $store.dispatch('$_tenants/all'),
+    getListOptions: () => $store.dispatch('$_tenants/options'),
+    createItem: params => $store.dispatch('$_tenants/createTenant', params),
+    getItem: params => $store.dispatch('$_tenants/getTenant', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_tenants/options', params.id),
+    updateItem: params => $store.dispatch('$_tenants/updateTenant', params),
+    deleteItem: params => $store.dispatch('$_tenants/deleteTenant', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheView.js
index e3baafaa9c98..997063fd871b 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheView.js
@@ -10,10 +10,17 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-
 import * as collection from '../_composables/useCollection'
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js
index b9dbfcffcfbf..cfe06ec3d5cc 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js
@@ -21,24 +21,4 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_wmi_rules/isLoading']),
-    getOptions: () => $store.dispatch('$_wmi_rules/options'),
-    createItem: () => $store.dispatch('$_wmi_rules/createWmiRule', form.value),
-    deleteItem: () => $store.dispatch('$_wmi_rules/deleteWmiRule', id.value),
-    getItem: () => $store.dispatch('$_wmi_rules/getWmiRule', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_wmi_rules/updateWmiRule', form.value),
-  }
-}
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_store.js b/html/pfappserver/root/src/views/Configuration/wmiRules/_store.js
index 94112d66c8e0..7b24bc1ffc43 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_store.js
@@ -2,8 +2,26 @@
 * "$_wmi_rules" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_wmi_rules/isLoading']),
+    getList: () => $store.dispatch('$_wmi_rules/all'),
+    getListOptions: () => $store.dispatch('$_wmi_rules/options'),
+    createItem: params => $store.dispatch('$_wmi_rules/createWmiRule', params),
+    getItem: params => $store.dispatch('$_wmi_rules/getWmiRule', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_wmi_rules/options', params.id),
+    updateItem: params => $store.dispatch('$_wmi_rules/updateWmiRule', params),
+    deleteItem: params => $store.dispatch('$_wmi_rules/deleteWmiRule', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheView.js
index e3baafaa9c98..997063fd871b 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheView.js
@@ -10,10 +10,17 @@ const components = {
   TheForm
 }
 
+import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-
 import * as collection from '../_composables/useCollection'
-const setup = (props, context) => useViewCollectionItem(collection, props, context)
+
+const setup = (props, context) => {
+  const _collection = { ...collection } // unfurl Module
+  // merge props w/ params in collection.useStore methods
+  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+
+  return useViewCollectionItem(_collection, props, context)
+}
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js
index e25c72848028..4153d5a80c9f 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js
@@ -21,23 +21,4 @@ export const useItemTitle = (props) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_wrix_locations/isLoading']),
-    createItem: () => $store.dispatch('$_wrix_locations/createWrixLocation', form.value),
-    deleteItem: () => $store.dispatch('$_wrix_locations/deleteWrixLocation', id.value),
-    getItem: () => $store.dispatch('$_wrix_locations/getWrixLocation', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_wrix_locations/updateWrixLocation', form.value),
-  }
-}
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_store.js b/html/pfappserver/root/src/views/Configuration/wrix/_store.js
index c00c51581389..41b167e8a083 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_store.js
@@ -2,8 +2,24 @@
 * "$_wrix_locations" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_wrix_locations/isLoading']),
+    getList: () => $store.dispatch('$_wrix_locations/all'),
+    createItem: params => $store.dispatch('$_wrix_locations/createWrixLocation', params),
+    getItem: params => $store.dispatch('$_wrix_locations/getWrixLocation', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    updateItem: params => $store.dispatch('$_wrix_locations/updateWrixLocation', params),
+    deleteItem: params => $store.dispatch('$_wrix_locations/deleteWrixLocation', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Nodes/_components/TabDhcpOption82Logs.vue b/html/pfappserver/root/src/views/Nodes/_components/TabDhcpOption82Logs.vue
index 1da4432b80aa..3df67bacddf8 100644
--- a/html/pfappserver/root/src/views/Nodes/_components/TabDhcpOption82Logs.vue
+++ b/html/pfappserver/root/src/views/Nodes/_components/TabDhcpOption82Logs.vue
@@ -25,6 +25,7 @@ const props = {
 }
 
 import { computed, ref, toRefs } from '@vue/composition-api'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useStore } from '../_composables/useCollection'
 import { dhcpOption82Fields } from '../_config/'
 
@@ -38,13 +39,15 @@ const setup = (props, context) => {
   const dhcpOption82SortBy = ref('created_at')
   const dhcpOption82SortDesc = ref(true)
 
+  // merge props w/ params in useStore methods
+  const _useStore = $store => usePropsWrapper(useStore($store), props)
   const {
     isLoading
-  } = useStore(props, context)  
+  } = _useStore($store)
 
   return {
     dhcpOption82Fields,
-    
+
     dhcpOption82SortBy,
     dhcpOption82SortDesc,
     isLoading,
diff --git a/html/pfappserver/root/src/views/Nodes/_components/TabFingerbank.vue b/html/pfappserver/root/src/views/Nodes/_components/TabFingerbank.vue
index 0f6642d71da6..b9f4c9ae8a5f 100644
--- a/html/pfappserver/root/src/views/Nodes/_components/TabFingerbank.vue
+++ b/html/pfappserver/root/src/views/Nodes/_components/TabFingerbank.vue
@@ -68,6 +68,7 @@ const props = {
 }
 
 import { computed, toRefs } from '@vue/composition-api'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useStore } from '../_composables/useCollection'
 
 const setup = (props, context) => {
@@ -77,10 +78,12 @@ const setup = (props, context) => {
 
   const node = computed(() => $store.state.$_nodes.nodes[id.value])
 
+  // merge props w/ params in useStore methods
+  const _useStore = $store => usePropsWrapper(useStore($store), props)
   const {
     isLoading,
     refreshFingerbank
-  } = useStore(props, context)
+  } = _useStore($store)
 
   return {
     node,
diff --git a/html/pfappserver/root/src/views/Nodes/_components/TabIp4Logs.vue b/html/pfappserver/root/src/views/Nodes/_components/TabIp4Logs.vue
index 11ca8534ef34..d023c58f42d5 100644
--- a/html/pfappserver/root/src/views/Nodes/_components/TabIp4Logs.vue
+++ b/html/pfappserver/root/src/views/Nodes/_components/TabIp4Logs.vue
@@ -25,6 +25,7 @@ const props = {
 }
 
 import { computed, ref, toRefs } from '@vue/composition-api'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useStore } from '../_composables/useCollection'
 import { ipLogFields } from '../_config/'
 
@@ -38,13 +39,15 @@ const setup = (props, context) => {
   const iplogSortBy = ref('end_time')
   const iplogSortDesc =  ref(false)
 
+  // merge props w/ params in useStore methods
+  const _useStore = $store => usePropsWrapper(useStore($store), props)
   const {
     isLoading
-  } = useStore(props, context)  
+  } = _useStore($store)
 
   return {
     ipLogFields,
-    
+
     iplogSortBy,
     iplogSortDesc,
     isLoading,
diff --git a/html/pfappserver/root/src/views/Nodes/_components/TabIp6Logs.vue b/html/pfappserver/root/src/views/Nodes/_components/TabIp6Logs.vue
index 9267c18b0e3c..158d4657b54b 100644
--- a/html/pfappserver/root/src/views/Nodes/_components/TabIp6Logs.vue
+++ b/html/pfappserver/root/src/views/Nodes/_components/TabIp6Logs.vue
@@ -25,6 +25,7 @@ const props = {
 }
 
 import { computed, ref, toRefs } from '@vue/composition-api'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useStore } from '../_composables/useCollection'
 import { ipLogFields } from '../_config/'
 
@@ -38,13 +39,15 @@ const setup = (props, context) => {
   const iplogSortBy = ref('end_time')
   const iplogSortDesc =  ref(false)
 
+  // merge props w/ params in useStore methods
+  const _useStore = $store => usePropsWrapper(useStore($store), props)
   const {
     isLoading
-  } = useStore(props, context)  
+  } = _useStore($store)
 
   return {
     ipLogFields,
-    
+
     iplogSortBy,
     iplogSortDesc,
     isLoading,
diff --git a/html/pfappserver/root/src/views/Nodes/_components/TabLocationLogs.vue b/html/pfappserver/root/src/views/Nodes/_components/TabLocationLogs.vue
index d641e473f267..c96266aadb01 100644
--- a/html/pfappserver/root/src/views/Nodes/_components/TabLocationLogs.vue
+++ b/html/pfappserver/root/src/views/Nodes/_components/TabLocationLogs.vue
@@ -55,6 +55,7 @@ const props = {
 }
 
 import { computed, ref, toRefs } from '@vue/composition-api'
+import { usePropsWrapper } from '@/composables/useProps'
 import { pfEapType as eapType } from '@/globals/pfEapType'
 import network from '@/utils/network'
 import { useStore } from '../_composables/useCollection'
@@ -76,12 +77,18 @@ const setup = (props, context) => {
     }
   }
 
+  // merge props w/ params in useStore methods
+  const _useStore = $store => usePropsWrapper(useStore($store), props)
   const {
     isLoading,
-    canReevaluateAccess,
     reevaluateAccess,
     restartSwitchport
-  } = useStore(props, context)
+  } = _useStore($store)
+
+  const canReevaluateAccess = computed(() => {
+    const { locations = [] } = $store.state.$_nodes.nodes[id.value] || {}
+    return locations.length > 0
+  })
 
   const canRestartSwitchport = computed(() => {
     const { locations = [] } = node.value || {}
diff --git a/html/pfappserver/root/src/views/Nodes/_components/TabSecurityEvents.vue b/html/pfappserver/root/src/views/Nodes/_components/TabSecurityEvents.vue
index ba7d403fdab2..e40bcb9bf067 100644
--- a/html/pfappserver/root/src/views/Nodes/_components/TabSecurityEvents.vue
+++ b/html/pfappserver/root/src/views/Nodes/_components/TabSecurityEvents.vue
@@ -53,8 +53,8 @@ const props = {
 }
 
 import { computed, ref, toRefs } from '@vue/composition-api'
+import { usePropsWrapper } from '@/composables/useProps'
 import acl from '@/utils/acl'
-
 import { useStore } from '../_composables/useCollection'
 import { securityEventFields } from '../_config/'
 
@@ -78,19 +78,21 @@ const setup = (props, context) => {
   }
   const onRelease = (security_event_id) => $store.dispatch('$_nodes/clearSecurityEventNode', { security_event_id, mac: id.value })
 
+  // merge props w/ params in useStore methods
+  const _useStore = $store => usePropsWrapper(useStore($store), props)
   const {
     isLoading,
     sortedSecurityEvents,
     applySecurityEvent
-  } = useStore(props, context)
+  } = _useStore($store)
 
   const triggerSecurityEvent = ref(null)
   const securityEventsOptions = computed(() => {
-    return sortedSecurityEvents()
+    return sortedSecurityEvents.value
       .filter(securityEvent => securityEvent.id !== 'defaults')
       .map(securityEvent => { return { text: securityEvent.desc, value: securityEvent.id } })
   })
-  const onTriggerSecurityEvent = () => applySecurityEvent(triggerSecurityEvent.value)
+  const onTriggerSecurityEvent = () => applySecurityEvent({ security_event_id: triggerSecurityEvent.value })
 
 
   return {
diff --git a/html/pfappserver/root/src/views/Nodes/_components/TheFormCreate.vue b/html/pfappserver/root/src/views/Nodes/_components/TheFormCreate.vue
index e8522fe3ee26..47450316b1c1 100644
--- a/html/pfappserver/root/src/views/Nodes/_components/TheFormCreate.vue
+++ b/html/pfappserver/root/src/views/Nodes/_components/TheFormCreate.vue
@@ -70,6 +70,7 @@ const components = {
 
 import { computed, ref } from '@vue/composition-api'
 import { useDebouncedWatchHandler } from '@/composables/useDebounce'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useRouter, useStore } from '../_composables/useCollection'
 import { createForm as defaults } from '../_config'
 import { createSchema as schemaFn } from '../schema'
@@ -90,12 +91,15 @@ const setup = (props, context) => {
     )
   )
 
+  const { root: { $router, $store } = {} } = context
+
+  // merge props w/ params in useStore methods
+  const _useStore = $store => usePropsWrapper(useStore($store), props)
   const {
     isLoading,
     createItem
-  } = useStore(props, context, form)
+  } = _useStore($store)
 
-  const { root: { $router } = {} } = context
   const {
     goToCollection,
     goToItem,
diff --git a/html/pfappserver/root/src/views/Nodes/_components/TheFormUpdate.vue b/html/pfappserver/root/src/views/Nodes/_components/TheFormUpdate.vue
index 920ec385e433..62728eea19c8 100644
--- a/html/pfappserver/root/src/views/Nodes/_components/TheFormUpdate.vue
+++ b/html/pfappserver/root/src/views/Nodes/_components/TheFormUpdate.vue
@@ -112,16 +112,21 @@ const props = {
   }
 }
 
-import { computed, ref, watch } from '@vue/composition-api'
+import { computed, ref, toRefs, watch } from '@vue/composition-api'
 import { useDebouncedWatchHandler } from '@/composables/useDebounce'
 import useEventActionKey from '@/composables/useEventActionKey'
 import useEventJail from '@/composables/useEventJail'
+import { usePropsWrapper } from '@/composables/useProps'
 import { MysqlLimits } from '@/globals/mysql'
 import { updateSchema as schemaFn } from '../schema'
 import { useRouter, useStore } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
+  const {
+    id
+  } = toRefs(props)
+
   // template refs
   const rootRef = ref(null)
   useEventJail(rootRef)
@@ -140,17 +145,24 @@ const setup = (props, context) => {
     )
   )
 
-const {
+  const { root: { $router, $store } = {} } = context
+
+  // merge props w/ params in useStore methods
+  const _useStore = $store => usePropsWrapper(useStore($store), props)
+  const {
     isLoading,
-    canReevaluateAccess,
     reloadItem,
     deleteItem,
     getItem,
     updateItem,
     reevaluateAccess
-  } = useStore(props, context, form)
+  } = _useStore($store)
+
+  const canReevaluateAccess = computed(() => {
+    const { locations = [] } = $store.state.$_nodes.nodes[id.value] || {}
+    return locations.length > 0
+  })
 
-  const { root: { $router } = {} } = context
   const {
     goToCollection,
     goToItem,
@@ -175,13 +187,13 @@ const {
     })
   }
 
-  const save = () => updateItem()
+  const save = () => updateItem(form.value)
 
   const onRefresh = () => reloadItem()
 
-  const onClose = () => goToCollection(false)
+  const onClose = () => goToCollection()
 
-  const onRemove = () => deleteItem().then(() => goToCollection(false))
+  const onRemove = () => deleteItem().then(() => goToCollection())
 
   const onReset = () => init()
 
@@ -190,7 +202,7 @@ const {
     const closeAfter = actionKey.value
     save().then(response => {
       if (closeAfter) // [CTRL] key pressed
-        goToCollection(true)
+        goToCollection({ actionKey: true })
       else {
         form.value = { ...form.value, ...response } // merge form w/ newly inserted IDs
         goToItem(form.value).then(() => init()) // re-init
diff --git a/html/pfappserver/root/src/views/Nodes/_components/TheViewUpdate.vue b/html/pfappserver/root/src/views/Nodes/_components/TheViewUpdate.vue
index 62255aee9312..9eb2a8d2db73 100644
--- a/html/pfappserver/root/src/views/Nodes/_components/TheViewUpdate.vue
+++ b/html/pfappserver/root/src/views/Nodes/_components/TheViewUpdate.vue
@@ -60,19 +60,22 @@ const props = {
 
 import { ref, watch } from '@vue/composition-api'
 import useEventEscapeKey from '@/composables/useEventEscapeKey'
+import { usePropsWrapper } from '@/composables/useProps'
 import { useStore } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
-  const { root: { $router } = {} } = context
+  const { root: { $router, $store } = {} } = context
 
   const tabsRef = ref(null)
   const tabIndex = ref(0)
 
+  // merge props w/ params in useStore methods
+  const _useStore = $store => usePropsWrapper(useStore($store), props)
   const {
     isLoading,
     reloadItem
-  } = useStore(props, context)
+  } = _useStore($store)
 
   const onClose = () => $router.back()
 
diff --git a/html/pfappserver/root/src/views/Nodes/_composables/useCollection.js b/html/pfappserver/root/src/views/Nodes/_composables/useCollection.js
index ce35e15bef67..5160a9af4ef7 100644
--- a/html/pfappserver/root/src/views/Nodes/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Nodes/_composables/useCollection.js
@@ -1,41 +1,2 @@
-import { computed, toRefs } from '@vue/composition-api'
-
-const useRouter = (props, context, form) => {
-  const { root: { $router } = {} } = context
-  return {
-    goToCollection: () => $router.push({ name: 'nodes' }),
-    goToItem: (item = form.value || {}) => $router
-      .push({ name: 'node', params: { mac: item.id } })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-  }
-}
-
-const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  const node = computed(() => $store.state.$_nodes.nodes[id.value])
-  return {
-    isLoading: computed(() => $store.getters['$_nodes/isLoading']),
-    canReevaluateAccess: computed(() => {
-      const { locations = [] } = node.value || {}
-      return locations.length > 0
-    }),
-    reloadItem: () => $store.dispatch('$_nodes/refreshNode', id.value),
-    deleteItem: () => $store.dispatch('$_nodes/deleteNode', id.value),
-    getItem: () => $store.dispatch('$_nodes/getNode', id.value),
-    createItem: () => $store.dispatch('$_nodes/createNode', form.value),
-    updateItem: () => $store.dispatch('$_nodes/updateNode', form.value),
-    reevaluateAccess: () => $store.dispatch('$_nodes/reevaluateAccessNode', id.value),
-    refreshFingerbank: () => $store.dispatch('$_nodes/refreshFingerbankNode', id.value),
-    restartSwitchport: () => $store.dispatch('$_nodes/restartSwitchportNode', id.value),
-    sortedSecurityEvents: () => $store.getters['config/sortedSecurityEvents'],
-    applySecurityEvent: (triggerSecurityEvent) => $store.dispatch('$_nodes/applySecurityEventNode', { security_event_id: triggerSecurityEvent, mac: id.value })
-  }
-}
-
-export {
-  useRouter,
-  useStore
-}
+export { useRouter } from '../_router'
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Nodes/_router/index.js b/html/pfappserver/root/src/views/Nodes/_router/index.js
index c62e68e6f7f7..f356409cdf3e 100644
--- a/html/pfappserver/root/src/views/Nodes/_router/index.js
+++ b/html/pfappserver/root/src/views/Nodes/_router/index.js
@@ -9,6 +9,15 @@ const TheCsvImport = () => import(/* webpackChunkName: "Editor" */ '../_componen
 const TheViewCreate = () => import(/* webpackChunkName: "Nodes" */ '../_components/TheViewCreate')
 const TheViewUpdate = () => import(/* webpackChunkName: "Nodes" */ '../_components/TheViewUpdate')
 
+export const useRouter = $router => {
+  return {
+    goToCollection: () => $router.push({ name: 'nodes' }),
+    goToItem: params => $router
+      .push({ name: 'node', params })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+  }
+}
+
 export const beforeEnter = (to, from, next = () => {}) => {
   if (!store.state.$_nodes)
     store.registerModule('$_nodes', NodesStoreModule)
diff --git a/html/pfappserver/root/src/views/Nodes/_store/index.js b/html/pfappserver/root/src/views/Nodes/_store/index.js
index c17236c1b507..fc48d6b71097 100644
--- a/html/pfappserver/root/src/views/Nodes/_store/index.js
+++ b/html/pfappserver/root/src/views/Nodes/_store/index.js
@@ -2,10 +2,27 @@
 * "$_nodes" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from '../_api'
 import store from '@/store'
 import i18n from '@/utils/locale'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_nodes/isLoading']),
+    sortedSecurityEvents: computed(() => $store.getters['config/sortedSecurityEvents']),
+    reloadItem: params => $store.dispatch('$_nodes/refreshNode', params.id),
+    deleteItem: params => $store.dispatch('$_nodes/deleteNode', params.id),
+    getItem: params => $store.dispatch('$_nodes/getNode', params.id),
+    createItem: params => $store.dispatch('$_nodes/createNode', params),
+    updateItem: params => $store.dispatch('$_nodes/updateNode', params),
+    reevaluateAccess: params => $store.dispatch('$_nodes/reevaluateAccessNode', params.id),
+    refreshFingerbank: params => $store.dispatch('$_nodes/refreshFingerbankNode', params.id),
+    restartSwitchport: params => $store.dispatch('$_nodes/restartSwitchportNode', params.id),
+    applySecurityEvent: params => $store.dispatch('$_nodes/applySecurityEventNode', params)
+  }
+}
+
 // Default values
 const state = () => {
   return {

From f190f064da61dc87fea41df93ca1c5f1f3f26bc6 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 08:48:05 -0400
Subject: [PATCH 37/72] complete rework on useStore composable

---
 .../root/src/composables/useProps.js          | 14 +++++++
 .../_composables/useViewCollectionItem.js     | 11 +++++-
 .../useViewCollectionItemFixed.js             |  8 +++-
 .../_composables/useViewResource.js           |  8 +++-
 .../_composables/useResource.js               | 11 +++---
 .../activeActive/_composables/useResource.js  |  9 ++---
 .../adminRoles/_components/TheView.js         | 11 +-----
 .../advanced/_composables/useResource.js      |  7 ++--
 .../alerting/_composables/useResource.js      |  9 ++---
 .../billingTiers/_components/TheView.js       | 20 ++++++----
 .../captivePortal/_composables/useResource.js |  9 ++---
 .../connectionProfiles/_components/TheView.js |  6 +--
 .../advanced/_composables/useResource.js      |  9 ++---
 .../general/_composables/useResource.js       |  9 ++---
 .../dns/_composables/useResource.js           |  9 ++---
 .../domains/_components/TheView.js            |  9 +----
 .../filterEngines/_components/TheView.js      |  9 +----
 .../combinations/_components/TheView.js       |  8 +---
 .../_composables/useResource.js               |  7 ++--
 .../fingerbank/devices/_components/TheView.js |  8 +---
 .../dhcpFingerprints/_components/TheView.js   |  8 +---
 .../dhcpVendors/_components/TheView.js        |  8 +---
 .../dhcpv6Enterprises/_components/TheView.js  |  8 +---
 .../dhcpv6Fingerprints/_components/TheView.js |  8 +---
 .../_composables/useResource.js               |  7 ++--
 .../macVendors/_components/TheView.js         |  8 +---
 .../userAgents/_components/TheView.js         |  8 +---
 .../firewalls/_components/TheView.js          |  9 +----
 .../floatingDevices/_components/TheView.js    | 17 ++++----
 .../general/_composables/useResource.js       |  9 ++---
 .../maintenanceTasks/_components/TheView.js   |  6 +--
 .../_components/TheView.js                    |  6 +--
 .../fencing/_composables/useResource.js       |  9 ++---
 .../inline/_composables/useResource.js        |  9 ++---
 .../interfaces/_components/TheView.js         |  9 +----
 .../layer2Networks/_components/TheView.js     |  6 +--
 .../network/_composables/useResource.js       |  9 ++---
 .../parking/_composables/useResource.js       |  9 ++---
 .../routedNetworks/_components/TheView.js     |  6 +--
 .../_components/TheView.js                    |  9 +----
 .../pki/cas/_components/TheView.js            |  9 +----
 .../pki/certs/_components/TheView.js          |  7 +---
 .../pki/profiles/_components/TheView.js       |  9 +----
 .../pki/revokedCerts/_components/TheView.js   |  9 +----
 .../_composables/useCollection.js             | 29 +-------------
 .../Configuration/pkiProviders/_store.js      | 18 +++++++++
 .../portalModules/_components/TheView.js      |  9 +----
 .../provisioners/_components/TheView.js       |  9 +----
 .../radius/eap/_components/TheView.js         |  6 +--
 .../radius/fast/_components/TheView.js        |  6 +--
 .../general/_composables/useResource.js       |  9 ++---
 .../radius/ocsp/_components/TheView.js        |  6 +--
 .../radius/ssl/_components/TheView.js         |  6 +--
 .../radius/tls/_components/TheView.js         |  6 +--
 .../realms/_components/TheView.js             | 17 +++-----
 .../realms/_composables/useCollection.js      | 25 ------------
 .../roles/_components/TheView.js              | 11 +-----
 .../scanEngines/_components/TheView.js        |  9 +----
 .../securityEvents/_components/TheView.js     | 11 +-----
 .../selfServices/_components/TheView.js       | 11 +-----
 .../services/_composables/useResource.js      |  9 ++---
 .../snmpTraps/_composables/useResource.js     |  9 ++---
 .../sources/_components/TheView.js            |  7 +---
 .../_composables/useCollection.js             | 39 +------------------
 .../Configuration/sslCertificates/_store.js   | 32 +++++++++++++++
 .../switchGroups/_components/TheView.js       | 14 +++----
 .../switchTemplates/_components/TheView.js    | 11 +-----
 .../switches/_components/TheView.js           | 14 +++----
 .../syslogForwarders/_components/TheView.js   |  9 +----
 .../syslogParsers/_components/TheView.js      |  9 +----
 .../tenants/_components/TheView.js            | 11 +-----
 .../webServices/_composables/useResource.js   |  9 ++---
 .../wmiRules/_components/TheView.js           | 11 +-----
 .../Configuration/wrix/_components/TheView.js | 11 +-----
 74 files changed, 239 insertions(+), 537 deletions(-)
 create mode 100644 html/pfappserver/root/src/composables/useProps.js

diff --git a/html/pfappserver/root/src/composables/useProps.js b/html/pfappserver/root/src/composables/useProps.js
new file mode 100644
index 000000000000..65cf18fe1828
--- /dev/null
+++ b/html/pfappserver/root/src/composables/useProps.js
@@ -0,0 +1,14 @@
+export const usePropsWrapper = (object, props, isWrappable = (key, value) => value.constructor === Function) => {
+  return Object.keys(object)
+    .reduce((wrapped, key) => {
+      const child = object[key]
+      if (isWrappable(key, child)) // do wrap
+        wrapped[key] = params => child({
+          ...props,
+          ...params // params can overload props
+        })
+      else // do not wrap
+        wrapped[key] = child
+      return wrapped
+    }, {})
+}
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItem.js b/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItem.js
index b6c267bb7885..32e91f0e998a 100644
--- a/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItem.js
+++ b/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItem.js
@@ -4,6 +4,7 @@ import useEventActionKey from '@/composables/useEventActionKey'
 import useEventEscapeKey from '@/composables/useEventEscapeKey'
 import useEventJail from '@/composables/useEventJail'
 import { useDefaultsFromMeta } from '@/composables/useMeta'
+import { usePropsWrapper } from '@/composables/useProps'
 
 export const useViewCollectionItemProps = {
   id: {
@@ -26,10 +27,16 @@ export const useViewCollectionItem = (collection, props, context) => {
     useItemDefaults = useDefaultsFromMeta, // {}
     useItemTitle = () => {},
     useItemTitleBadge = () => {},
-    useRouter = () => {},
-    useStore = () => {},
+    useRouter: _useRouter = () => {},
+    useStore: _useStore = () => {},
   } = collection
 
+  // merge props w/ params in useRouter method
+  const useRouter = $router => usePropsWrapper(_useRouter($router), props)
+
+  // merge props w/ params in useStore methods
+  const useStore = $store => usePropsWrapper(_useStore($store), props)
+
   const {
     isClone,
     isNew
diff --git a/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItemFixed.js b/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItemFixed.js
index fcf0877f796a..fb3b061c3ca2 100644
--- a/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItemFixed.js
+++ b/html/pfappserver/root/src/views/Configuration/_composables/useViewCollectionItemFixed.js
@@ -1,6 +1,7 @@
 import { ref, watch } from '@vue/composition-api'
 import { useDebouncedWatchHandler } from '@/composables/useDebounce'
 import useEventJail from '@/composables/useEventJail'
+import { usePropsWrapper } from '@/composables/useProps'
 
 export const useViewCollectionItemFixedProps = {
   id: {
@@ -12,9 +13,12 @@ export const useViewCollectionItemFixed = (collection, props, context) => {
 
   const {
     useItemTitle,
-    useStore,
+    useStore: _useStore = () => {},
   } = collection
 
+  // merge props w/ params in useStore methods
+  const useStore = $store => usePropsWrapper(_useStore($store), props)
+
   const { root: { $store } = {} } = context
 
   // template refs
@@ -63,7 +67,7 @@ export const useViewCollectionItemFixed = (collection, props, context) => {
 
   const onSave = () => {
     isModified.value = true
-    return updateItem()
+    return updateItem(form.value)
   }
 
   watch(props, () => init(), { deep: true, immediate: true })
diff --git a/html/pfappserver/root/src/views/Configuration/_composables/useViewResource.js b/html/pfappserver/root/src/views/Configuration/_composables/useViewResource.js
index 0a14679eaef4..dae32c7fb1c4 100644
--- a/html/pfappserver/root/src/views/Configuration/_composables/useViewResource.js
+++ b/html/pfappserver/root/src/views/Configuration/_composables/useViewResource.js
@@ -1,6 +1,7 @@
 import { computed, ref, watch } from '@vue/composition-api'
 import { useDebouncedWatchHandler } from '@/composables/useDebounce'
 import useEventJail from '@/composables/useEventJail'
+import { usePropsWrapper } from '@/composables/useProps'
 
 export const useViewResourceProps = {}
 
@@ -9,9 +10,12 @@ export const useViewResource = (resource, props, context) => {
   const {
     useTitle,
     useTitleHelp = () => {},
-    useStore,
+    useStore: _useStore = () => {},
   } = resource
 
+  // merge props w/ params in useStore methods
+  const useStore = $store => usePropsWrapper(_useStore($store), props)
+
   const { root: { $store } = {} } = context
 
   // template refs
@@ -66,7 +70,7 @@ export const useViewResource = (resource, props, context) => {
     })
   }
 
-  const save = () => updateItem()
+  const save = () => updateItem(form.value)
 
   const onReset = () => init().then(() => isModified.value = false)
 
diff --git a/html/pfappserver/root/src/views/Configuration/accessDurations/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/accessDurations/_composables/useResource.js
index 974f3593cb4f..2889a839a122 100644
--- a/html/pfappserver/root/src/views/Configuration/accessDurations/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/accessDurations/_composables/useResource.js
@@ -7,20 +7,19 @@ import {
 
 export const useTitle = () => i18n.t('Access Duration')
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsGuestsAdminRegistration'),
     getItem: () => $store.dispatch('$_bases/getGuestsAdminRegistration').then(resource => {
         const { access_duration_choices = '' } = resource
         return { ...resource,
           access_duration_choices: access_duration_choices.split(',').map(duration => composeDuration(duration))
         }
     }),
-    updateItem: () => {
-      const { access_duration_choices = [] } = form.value
-      return $store.dispatch('$_bases/updateGuestsAdminRegistration', { ...form.value,
+    getItemOptions: () => $store.dispatch('$_bases/optionsGuestsAdminRegistration'),
+    updateItem: params => {
+      const { access_duration_choices = [] } = params
+      return $store.dispatch('$_bases/updateGuestsAdminRegistration', { ...params,
         access_duration_choices: access_duration_choices.map(duration => serializeDuration(duration)).join(',')
       })
     }
diff --git a/html/pfappserver/root/src/views/Configuration/activeActive/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/activeActive/_composables/useResource.js
index 42bf2071af0e..c39ee8c006f9 100644
--- a/html/pfappserver/root/src/views/Configuration/activeActive/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/activeActive/_composables/useResource.js
@@ -3,14 +3,11 @@ import i18n from '@/utils/locale'
 
 export const useTitle = () => i18n.t('Active Active')
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsActiveActive'),
     getItem: () => $store.dispatch('$_bases/getActiveActive'),
-    updateItem: () => {
-      return $store.dispatch('$_bases/updateActiveActive', form.value)
-    }
+    getItemOptions: () => $store.dispatch('$_bases/optionsActiveActive'),
+    updateItem: params => $store.dispatch('$_bases/updateActiveActive', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheView.js
index 997063fd871b..e3baafaa9c98 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheView.js
@@ -10,17 +10,10 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-import * as collection from '../_composables/useCollection'
-
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  return useViewCollectionItem(_collection, props, context)
-}
+import * as collection from '../_composables/useCollection'
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/advanced/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/advanced/_composables/useResource.js
index 27aa4ca5e93a..4b1dbd9458d3 100644
--- a/html/pfappserver/root/src/views/Configuration/advanced/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/advanced/_composables/useResource.js
@@ -3,12 +3,11 @@ import i18n from '@/utils/locale'
 
 export const useTitle = () => i18n.t('Advanced')
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsAdvanced'),
     getItem: () => $store.dispatch('$_bases/getAdvanced'),
-    updateItem: () => $store.dispatch('$_bases/updateAdvanced', form.value)
+    getItemOptions: () => $store.dispatch('$_bases/optionsAdvanced'),
+    updateItem: params => $store.dispatch('$_bases/updateAdvanced', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/alerting/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/alerting/_composables/useResource.js
index d337b162e176..4bfe8d76d2fd 100644
--- a/html/pfappserver/root/src/views/Configuration/alerting/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/alerting/_composables/useResource.js
@@ -3,14 +3,11 @@ import i18n from '@/utils/locale'
 
 export const useTitle = () => i18n.t('Alerting')
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsAlerting'),
     getItem: () => $store.dispatch('$_bases/getAlerting'),
-    updateItem: () => {
-      return $store.dispatch('$_bases/updateAlerting', form.value)
-    }
+    getItemOptions: () => $store.dispatch('$_bases/optionsAlerting'),
+    updateItem: params => $store.dispatch('$_bases/updateAlerting', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheView.js
index 997063fd871b..b067861f2a36 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheView.js
@@ -10,18 +10,22 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
-import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-import * as collection from '../_composables/useCollection'
+import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+const props = {
+  ...useViewCollectionItemProps,
 
-  return useViewCollectionItem(_collection, props, context)
+  id: {
+    type: String
+  },
+  tenantId: {
+    type: String
+  }
 }
 
+import * as collection from '../_composables/useCollection'
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
+
 // @vue/component
 export default {
   name: 'the-view',
diff --git a/html/pfappserver/root/src/views/Configuration/captivePortal/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/captivePortal/_composables/useResource.js
index a56a3ba489a9..04817cd8ca2a 100644
--- a/html/pfappserver/root/src/views/Configuration/captivePortal/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/captivePortal/_composables/useResource.js
@@ -3,14 +3,11 @@ import i18n from '@/utils/locale'
 
 export const useTitle = () => i18n.t('Captive Portal')
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsCaptivePortal'),
     getItem: () => $store.dispatch('$_bases/getCaptivePortal'),
-    updateItem: () => {
-      return $store.dispatch('$_bases/updateCaptivePortal', form.value)
-    }
+    getItemOptions: () => $store.dispatch('$_bases/optionsCaptivePortal'),
+    updateItem: params => $store.dispatch('$_bases/updateCaptivePortal', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheView.js
index 9db7ea055f9a..612e780e90fb 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheView.js
@@ -12,7 +12,6 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -22,11 +21,8 @@ const props = {
 }
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/database/advanced/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/database/advanced/_composables/useResource.js
index d82acbbb3f08..6f09f0ffcbd4 100644
--- a/html/pfappserver/root/src/views/Configuration/database/advanced/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/database/advanced/_composables/useResource.js
@@ -3,14 +3,11 @@ import i18n from '@/utils/locale'
 
 export const useTitle = () => i18n.t('Database Advanced')
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsDatabaseAdvanced'),
     getItem: () => $store.dispatch('$_bases/getDatabaseAdvanced'),
-    updateItem: () => {
-      return $store.dispatch('$_bases/updateDatabaseAdvanced', form.value)
-    }
+    getItemOptions: () => $store.dispatch('$_bases/optionsDatabaseAdvanced'),
+    updateItem: params => $store.dispatch('$_bases/updateDatabaseAdvanced', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/database/general/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/database/general/_composables/useResource.js
index f10dfcca3f3a..d515f65512ce 100644
--- a/html/pfappserver/root/src/views/Configuration/database/general/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/database/general/_composables/useResource.js
@@ -3,14 +3,11 @@ import i18n from '@/utils/locale'
 
 export const useTitle = () => i18n.t('Database General')
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsDatabase'),
     getItem: () => $store.dispatch('$_bases/getDatabase'),
-    updateItem: () => {
-      return $store.dispatch('$_bases/updateDatabase', form.value)
-    }
+    getItemOptions: () => $store.dispatch('$_bases/optionsDatabase'),
+    updateItem: params => $store.dispatch('$_bases/updateDatabase', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/dns/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/dns/_composables/useResource.js
index 84f362d9b64d..4e3bbcbfeb9e 100644
--- a/html/pfappserver/root/src/views/Configuration/dns/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/dns/_composables/useResource.js
@@ -3,14 +3,11 @@ import i18n from '@/utils/locale'
 
 export const useTitle = () => i18n.t('DNS Configuration')
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsDnsConfiguration'),
     getItem: () => $store.dispatch('$_bases/getDnsConfiguration'),
-    updateItem: () => {
-      return $store.dispatch('$_bases/updateDnsConfiguration', form.value)
-    }
+    getItemOptions: () => $store.dispatch('$_bases/optionsDnsConfiguration'),
+    updateItem: params => $store.dispatch('$_bases/updateDnsConfiguration', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/domains/_components/TheView.js
index ea82b8d4d3e4..0c8b751c4b42 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/domains/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import i18n from '@/utils/locale'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 
@@ -25,13 +24,7 @@ const props = {
 
 import * as collection from '../_composables/useCollection'
 
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  return useViewCollectionItem(_collection, props, context)
-}
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheView.js
index f6e1eaeed7c0..d006b2277d8d 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheView.js
@@ -9,7 +9,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -18,13 +17,7 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  return useViewCollectionItem(_collection, props, context)
-}
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheView.js
index 59c7f413fdf7..219827091df9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -20,13 +19,10 @@ const props = {
 }
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
 
-  const titleBadge = _collection.useItemTitleBadge(props)
+  const titleBadge = collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_composables/useResource.js
index ab6354df9fcc..3390f278bc46 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_composables/useResource.js
@@ -3,12 +3,11 @@ import i18n from '@/utils/locale'
 
 export const useTitle = () => i18n.t('Fingerbank device change detection')
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsFingerbankDeviceChange'),
     getItem: () => $store.dispatch('$_bases/getFingerbankDeviceChange'),
-    updateItem: () => $store.dispatch('$_bases/updateFingerbankDeviceChange', form.value)
+    getItemOptions: () => $store.dispatch('$_bases/optionsFingerbankDeviceChange'),
+    updateItem: params => $store.dispatch('$_bases/updateFingerbankDeviceChange', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheView.js
index 59c7f413fdf7..219827091df9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -20,13 +19,10 @@ const props = {
 }
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
 
-  const titleBadge = _collection.useItemTitleBadge(props)
+  const titleBadge = collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheView.js
index 59c7f413fdf7..219827091df9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -20,13 +19,10 @@ const props = {
 }
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
 
-  const titleBadge = _collection.useItemTitleBadge(props)
+  const titleBadge = collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheView.js
index 59c7f413fdf7..219827091df9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -20,13 +19,10 @@ const props = {
 }
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
 
-  const titleBadge = _collection.useItemTitleBadge(props)
+  const titleBadge = collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheView.js
index 59c7f413fdf7..219827091df9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -20,13 +19,10 @@ const props = {
 }
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
 
-  const titleBadge = _collection.useItemTitleBadge(props)
+  const titleBadge = collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheView.js
index 59c7f413fdf7..219827091df9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -20,13 +19,10 @@ const props = {
 }
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
 
-  const titleBadge = _collection.useItemTitleBadge(props)
+  const titleBadge = collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_composables/useResource.js
index c02da3d30166..d5dba5d21366 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_composables/useResource.js
@@ -3,12 +3,11 @@ import i18n from '@/utils/locale'
 
 export const useTitle = () => i18n.t('General Settings')
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_fingerbank/isGeneralSettingsLoading']),
-    getOptions: () => $store.dispatch('$_fingerbank/optionsGeneralSettings'),
     getItem: () => $store.dispatch('$_fingerbank/getGeneralSettings'),
-    updateItem: () => $store.dispatch('$_fingerbank/setGeneralSettings', form.value)
+    getItemOptions: () => $store.dispatch('$_fingerbank/optionsGeneralSettings'),
+    updateItem: params => $store.dispatch('$_fingerbank/setGeneralSettings', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheView.js
index 59c7f413fdf7..219827091df9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -20,13 +19,10 @@ const props = {
 }
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
 
-  const titleBadge = _collection.useItemTitleBadge(props)
+  const titleBadge = collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheView.js
index 59c7f413fdf7..219827091df9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -20,13 +19,10 @@ const props = {
 }
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
 
-  const titleBadge = _collection.useItemTitleBadge(props)
+  const titleBadge = collection.useItemTitleBadge(props)
 
   return {
     ...viewCollectionItem,
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheView.js
index b11d67a4677d..e35e28224e69 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,13 +18,7 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  return useViewCollectionItem(_collection, props, context)
-}
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheView.js
index 997063fd871b..2e44cb16188e 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheView.js
@@ -10,18 +10,19 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
-import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-import * as collection from '../_composables/useCollection'
+import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
+const props = {
+  ...useViewCollectionItemProps,
 
-  return useViewCollectionItem(_collection, props, context)
+  id: {
+    type: String
+  }
 }
 
+import * as collection from '../_composables/useCollection'
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
+
 // @vue/component
 export default {
   name: 'the-view',
diff --git a/html/pfappserver/root/src/views/Configuration/general/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/general/_composables/useResource.js
index e90e0d1375b8..61a1a7e81d73 100644
--- a/html/pfappserver/root/src/views/Configuration/general/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/general/_composables/useResource.js
@@ -3,14 +3,11 @@ import i18n from '@/utils/locale'
 
 export const useTitle = () => i18n.t('General')
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsGeneral'),
     getItem: () => $store.dispatch('$_bases/getGeneral'),
-    updateItem: () => {
-      return $store.dispatch('$_bases/updateGeneral', form.value)
-    }
+    getItemOptions: () => $store.dispatch('$_bases/optionsGeneral'),
+    updateItem: params => $store.dispatch('$_bases/updateGeneral', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheView.js
index 76cc970abfc6..acbb9567d7ed 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheView.js
@@ -12,16 +12,12 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheView.js
index dfbf19f55380..acbb9567d7ed 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheView.js
@@ -11,17 +11,13 @@ const components = {
 }
 
 import { computed } from '@vue/composition-api'
-import { usePropsWrapper } from '@/composables/useProps'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/networks/fencing/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/networks/fencing/_composables/useResource.js
index b82c5c89dea0..8b865e4b7f7a 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/fencing/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/fencing/_composables/useResource.js
@@ -3,14 +3,11 @@ import i18n from '@/utils/locale'
 
 export const useTitle = () => i18n.t('Fencing')
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsFencing'),
     getItem: () => $store.dispatch('$_bases/getFencing'),
-    updateItem: () => {
-      return $store.dispatch('$_bases/updateFencing', form.value)
-    }
+    getItemOptions: () => $store.dispatch('$_bases/optionsFencing'),
+    updateItem: params => $store.dispatch('$_bases/updateFencing', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/networks/inline/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/networks/inline/_composables/useResource.js
index 2d92e556dda2..776c0ce42ba1 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/inline/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/inline/_composables/useResource.js
@@ -5,14 +5,11 @@ export const useTitle = () => i18n.t('Inline')
 
 export const useTitleHelp = () => 'PacketFence_Installation_Guide.html#_technical_introduction_to_inline_enforcement'
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsInline'),
     getItem: () => $store.dispatch('$_bases/getInline'),
-    updateItem: () => {
-      return $store.dispatch('$_bases/updateInline', form.value)
-    }
+    getItemOptions: () => $store.dispatch('$_bases/optionsInline'),
+    updateItem: params => $store.dispatch('$_bases/updateInline', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/TheView.js
index ad742bf44e5c..2ec391ad55c9 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,13 +18,7 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  return useViewCollectionItem(_collection, props, context)
-}
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/TheView.js
index 2c00b9f57617..27fa8ac8e8dc 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/layer2Networks/_components/TheView.js
@@ -12,16 +12,12 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/networks/network/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/networks/network/_composables/useResource.js
index 466129e93561..ced098bfb303 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/network/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/network/_composables/useResource.js
@@ -3,14 +3,11 @@ import i18n from '@/utils/locale'
 
 export const useTitle = () => i18n.t('Networking')
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsNetwork'),
     getItem: () => $store.dispatch('$_bases/getNetwork'),
-    updateItem: () => {
-      return $store.dispatch('$_bases/updateNetwork', form.value)
-    }
+    getItemOptions: () => $store.dispatch('$_bases/optionsNetwork'),
+    updateItem: params => $store.dispatch('$_bases/updateNetwork', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/networks/parking/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/networks/parking/_composables/useResource.js
index 9680022d3339..9b7ae6b03686 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/parking/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/parking/_composables/useResource.js
@@ -5,14 +5,11 @@ export const useTitle = () => i18n.t('Parking')
 
 export const useTitleHelp = () => 'PacketFence_Installation_Guide.html#_parked_devices'
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsParking'),
     getItem: () => $store.dispatch('$_bases/getParking'),
-    updateItem: () => {
-      return $store.dispatch('$_bases/updateParking', form.value)
-    }
+    getItemOptions: () => $store.dispatch('$_bases/optionsParking'),
+    updateItem: params => $store.dispatch('$_bases/updateParking', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/TheView.js
index 088eccef0918..84708dfa1014 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/routedNetworks/_components/TheView.js
@@ -12,16 +12,12 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheView.js
index 8499ced084c3..f1075460793c 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheView.js
@@ -20,15 +20,8 @@ const props = {
   }
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import * as collection from '../_composables/useCollection'
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  return useViewCollectionItem(_collection, props, context)
-}
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheView.js
index ad742bf44e5c..2ec391ad55c9 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,13 +18,7 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  return useViewCollectionItem(_collection, props, context)
-}
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheView.js
index a9eb03400c06..2705a5affbac 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheView.js
@@ -12,7 +12,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
@@ -23,11 +22,7 @@ const props = {
 }
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
   return {
     ...viewCollectionItem,
     scopedSlotProps: props
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheView.js
index ad742bf44e5c..2ec391ad55c9 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,13 +18,7 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  return useViewCollectionItem(_collection, props, context)
-}
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheView.js
index ad742bf44e5c..2ec391ad55c9 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,13 +18,7 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  return useViewCollectionItem(_collection, props, context)
-}
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
index 2d7c863f54ec..4a356c349ec3 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
@@ -46,34 +46,7 @@ export const useItemTitleBadge = (props, context, form) => {
 
 export { useRouter } from '../_router'
 
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    isClone,
-    isNew,
-    providerType
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_pki_providers/isLoading']),
-    getOptions: () => {
-      if (isNew.value)
-        return $store.dispatch('$_pki_providers/optionsByProviderType', providerType.value)
-      else
-        return $store.dispatch('$_pki_providers/optionsById', id.value)
-    },
-    createItem: () => $store.dispatch('$_pki_providers/createPkiProvider', form.value),
-    deleteItem: () => $store.dispatch('$_pki_providers/deletePkiProvider', id.value),
-    getItem: () => $store.dispatch('$_pki_providers/getPkiProvider', id.value).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_pki_providers/updatePkiProvider', form.value),
-  }
-}
+export { useStore } from '../_store'
 
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_store.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/_store.js
index 5b84723d1ffb..03ac2d1cb668 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_store.js
@@ -2,8 +2,26 @@
 * "$_sources" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
 import api from './_api'
 
+export const useStore = $store => {
+  return {
+    isLoading: computed(() => $store.getters['$_pki_providers/isLoading']),
+    getList: () => $store.dispatch('$_pki_providers/all'),
+    getListOptions: params => $store.dispatch('$_pki_providers/optionsByProviderType', params.providerType),
+    createItem: params => $store.dispatch('$_pki_providers/createPkiProvider', params),
+    getItem: params => $store.dispatch('$_pki_providers/getPkiProvider', params.id).then(item => {
+      return (params.isClone)
+        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        : item
+    }),
+    getItemOptions: params => $store.dispatch('$_pki_providers/optionsById', params.id),
+    updateItem: params => $store.dispatch('$_pki_providers/updatePkiProvider', params),
+    deleteItem: params => $store.dispatch('$_pki_providers/deletePkiProvider', params.id),
+  }
+}
+
 const types = {
   LOADING: 'loading',
   DELETING: 'deleting',
diff --git a/html/pfappserver/root/src/views/Configuration/portalModules/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/portalModules/_components/TheView.js
index b11d67a4677d..e35e28224e69 100644
--- a/html/pfappserver/root/src/views/Configuration/portalModules/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/portalModules/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,13 +18,7 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  return useViewCollectionItem(_collection, props, context)
-}
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheView.js
index b11d67a4677d..e35e28224e69 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,13 +18,7 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  return useViewCollectionItem(_collection, props, context)
-}
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheView.js
index ca76cd76162f..4722795d7ab2 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheView.js
@@ -12,16 +12,12 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheView.js
index ca76cd76162f..4722795d7ab2 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheView.js
@@ -12,16 +12,12 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/radius/general/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/radius/general/_composables/useResource.js
index 969c4ef5ea38..a9f833ab8a64 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/general/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/general/_composables/useResource.js
@@ -3,14 +3,11 @@ import i18n from '@/utils/locale'
 
 export const useTitle = () => i18n.t('General Configuration')
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsRadiusConfiguration'),
     getItem: () => $store.dispatch('$_bases/getRadiusConfiguration'),
-    updateItem: () => {
-      return $store.dispatch('$_bases/updateRadiusConfiguration', form.value)
-    }
+    getItemOptions: () => $store.dispatch('$_bases/optionsRadiusConfiguration'),
+    updateItem: params => $store.dispatch('$_bases/updateRadiusConfiguration', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheView.js
index ca76cd76162f..4722795d7ab2 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheView.js
@@ -12,16 +12,12 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheView.js
index ca76cd76162f..4722795d7ab2 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheView.js
@@ -12,16 +12,12 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheView.js
index ca76cd76162f..4722795d7ab2 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheView.js
@@ -12,16 +12,12 @@ const components = {
 
 import { computed } from '@vue/composition-api'
 import { renderHOCWithScopedSlots } from '@/components/new/'
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
   const {
     isLoading,
     isModified
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/realms/_components/TheView.js
index 04dcbe3eb28f..b067861f2a36 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/realms/_components/TheView.js
@@ -10,28 +10,21 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 
 const props = {
   ...useViewCollectionItemProps,
 
+  id: {
+    type: String
+  },
   tenantId: {
-    type: [Number, String]
+    type: String
   }
 }
 
 import * as collection from '../_composables/useCollection'
-
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-  // merge props w/ params in collection.useRouter methods
-  _collection.useRouter = $router => usePropsWrapper(collection.useRouter($router), props)
-
-  return useViewCollectionItem(_collection, props, context)
-}
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
index f8e0b08e5e4e..6d0e05248a08 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
@@ -32,31 +32,6 @@ export { useRouter } from '../_router'
 
 export { useStore } from '../_store'
 
-/*
-export const useStore = (props, context, form) => {
-  const {
-    id,
-    tenantId,
-    isClone
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-  return {
-    isLoading: computed(() => $store.getters['$_realms/isLoading']),
-    getOptions: () => $store.dispatch('$_realms/options', { id: id.value, tenantId: tenantId.value }),
-    createItem: () => $store.dispatch('$_realms/createRealm', { item: form.value, tenantId: tenantId.value }),
-    deleteItem: () => $store.dispatch('$_realms/deleteRealm', { id: id.value, tenantId: tenantId.value }),
-    getItem: () => $store.dispatch('$_realms/getRealm', { id: id.value, tenantId: tenantId.value }).then(item => {
-      if (isClone.value) {
-        item.id = `${item.id}-${i18n.t('copy')}`
-        item.not_deletable = false
-      }
-      return item
-    }),
-    updateItem: () => $store.dispatch('$_realms/updateRealm', { item: form.value, tenantId: tenantId.value }),
-  }
-}
-*/
-
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
 import api from '../_api'
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/roles/_components/TheView.js
index 997063fd871b..e3baafaa9c98 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/roles/_components/TheView.js
@@ -10,17 +10,10 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-import * as collection from '../_composables/useCollection'
-
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  return useViewCollectionItem(_collection, props, context)
-}
+import * as collection from '../_composables/useCollection'
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheView.js
index b11d67a4677d..e35e28224e69 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,13 +18,7 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  return useViewCollectionItem(_collection, props, context)
-}
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheView.js
index 997063fd871b..e3baafaa9c98 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheView.js
@@ -10,17 +10,10 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-import * as collection from '../_composables/useCollection'
-
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  return useViewCollectionItem(_collection, props, context)
-}
+import * as collection from '../_composables/useCollection'
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheView.js
index 997063fd871b..e3baafaa9c98 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheView.js
@@ -10,17 +10,10 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-import * as collection from '../_composables/useCollection'
-
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  return useViewCollectionItem(_collection, props, context)
-}
+import * as collection from '../_composables/useCollection'
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/services/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/services/_composables/useResource.js
index e3950220f4f9..ca8d69f26498 100644
--- a/html/pfappserver/root/src/views/Configuration/services/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/services/_composables/useResource.js
@@ -3,14 +3,11 @@ import i18n from '@/utils/locale'
 
 export const useTitle = () => i18n.t('Services')
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsServices'),
     getItem: () => $store.dispatch('$_bases/getServices'),
-    updateItem: () => {
-      return $store.dispatch('$_bases/updateServices', form.value)
-    }
+    getItemOptions: () => $store.dispatch('$_bases/optionsServices'),
+    updateItem: params => $store.dispatch('$_bases/updateServices', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/snmpTraps/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/snmpTraps/_composables/useResource.js
index a71c28d00b65..aa2026fb3341 100644
--- a/html/pfappserver/root/src/views/Configuration/snmpTraps/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/snmpTraps/_composables/useResource.js
@@ -5,14 +5,11 @@ export const useTitle = () => i18n.t('SNMP')
 
 export const useTitleHelp = () => 'PacketFence_Installation_Guide.html#_snmp_traps_limit'
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsSNMPTraps'),
     getItem: () => $store.dispatch('$_bases/getSNMPTraps'),
-    updateItem: () => {
-      return $store.dispatch('$_bases/updateSNMPTraps', form.value)
-    }
+    getItemOptions: () => $store.dispatch('$_bases/optionsSNMPTraps'),
+    updateItem: params => $store.dispatch('$_bases/updateSNMPTraps', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/sources/_components/TheView.js
index 34f91f84bf62..3c311e44c931 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/TheView.js
@@ -11,7 +11,6 @@ const components = {
 }
 
 import { computed, toRefs } from '@vue/composition-api'
-import { usePropsWrapper } from '@/composables/useProps'
 import { renderHOCWithScopedSlots } from '@/components/new/'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
@@ -27,11 +26,7 @@ const setup = (props, context) => {
     sourceType
   } = toRefs(props)
 
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
   const {
     form
   } = viewCollectionItem
diff --git a/html/pfappserver/root/src/views/Configuration/sslCertificates/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/sslCertificates/_composables/useCollection.js
index 63737c0beefd..5cbf0e3e0e23 100644
--- a/html/pfappserver/root/src/views/Configuration/sslCertificates/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/sslCertificates/_composables/useCollection.js
@@ -8,41 +8,4 @@ export const useItemTitle = (props) => {
   return computed(() => id.value.toUpperCase())
 }
 
-export const useStore = (props, context, form) => {
-  const {
-    id
-  } = toRefs(props)
-  const { root: { $store } = {} } = context
-
-  const getItem = () => $store.dispatch('$_certificates/getCertificate', id.value).then(_certificate => {
-    const { status, ...certificate } = _certificate // strip out `status` from response
-    return $store.dispatch('$_certificates/getCertificateInfo', id.value).then(_info => {
-      const { status, ...info } = { ..._info, common_name: '' } // strip out `status` from response
-      return { certificate: { ...certificate, check_chain: 'enabled' }, info }
-    })
-  })
-
-  return {
-    isLoading: computed(() => $store.getters['$_certificates/isLoading']),
-    getItem,
-    updateItem: () => {
-      const {
-        id
-      } = toRefs(props)
-      const { certificate, certificate: { intermediate_cas = [], lets_encrypt } = {} } = form.value
-      if (intermediate_cas.length === 0) // omit intermediate_cas when empty []
-        certificate.intermediate_cas = undefined
-      let creationPromise
-      if (lets_encrypt)
-        creationPromise = $store.dispatch('$_certificates/createLetsEncryptCertificate', certificate)
-      else
-        creationPromise = $store.dispatch('$_certificates/createCertificate', certificate)
-      return creationPromise.then(() => {
-        $store.dispatch('notification/info', { message: i18n.t('{certificate} certificate saved', { certificate: id.value.toUpperCase() }) })
-        getItem().then(item => form.value = item)
-      }).finally(() =>
-        window.scrollTo(0, 0)
-      )
-    }
-  }
-}
+export { useStore } from '../_store'
diff --git a/html/pfappserver/root/src/views/Configuration/sslCertificates/_store.js b/html/pfappserver/root/src/views/Configuration/sslCertificates/_store.js
index e18232be0f93..bda4c79333c9 100644
--- a/html/pfappserver/root/src/views/Configuration/sslCertificates/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/sslCertificates/_store.js
@@ -2,8 +2,40 @@
 * "$_certificates" store module
 */
 import Vue from 'vue'
+import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
+export const useStore = $store => {
+  const getItem = params => $store.dispatch('$_certificates/getCertificate', params.id).then(_certificate => {
+    const { status, ...certificate } = _certificate // strip out `status` from response
+    return $store.dispatch('$_certificates/getCertificateInfo', params.id).then(_info => {
+      const { status, ...info } = { ..._info, common_name: '' } // strip out `status` from response
+      return { certificate: { ...certificate, check_chain: 'enabled' }, info }
+    })
+  })
+  return {
+    isLoading: computed(() => $store.getters['$_certificates/isLoading']),
+    getItem,
+    updateItem: params => {
+      const { certificate, certificate: { intermediate_cas = [], lets_encrypt } = {} } = params
+      if (intermediate_cas.length === 0) // omit intermediate_cas when empty []
+        certificate.intermediate_cas = undefined
+      let creationPromise
+      if (lets_encrypt)
+        creationPromise = $store.dispatch('$_certificates/createLetsEncryptCertificate', certificate)
+      else
+        creationPromise = $store.dispatch('$_certificates/createCertificate', certificate)
+      return creationPromise.then(() => {
+        $store.dispatch('notification/info', { message: i18n.t('{certificate} certificate saved', { certificate: params.id.toUpperCase() }) })
+        // getItem().then(item => form.value = item)
+      }).finally(() =>
+        window.scrollTo(0, 0)
+      )
+    }
+  }
+}
+
 const types = {
   LOADING: 'loading',
   SUCCESS: 'success',
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheView.js
index 449d21477d5a..4935894fc140 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheView.js
@@ -11,7 +11,6 @@ const components = {
 }
 
 import { computed, toRefs } from '@vue/composition-api'
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -21,19 +20,16 @@ const props = {
 }
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
-  const {
-    form
-  } = viewCollectionItem
 
   const {
     switchGroup
   } = toRefs(props)
 
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const {
+    form
+  } = viewCollectionItem
+
   const titleBadge = computed(() => switchGroup.value || form.value.group)
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheView.js
index 997063fd871b..e3baafaa9c98 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheView.js
@@ -10,17 +10,10 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-import * as collection from '../_composables/useCollection'
-
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  return useViewCollectionItem(_collection, props, context)
-}
+import * as collection from '../_composables/useCollection'
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/switches/_components/TheView.js
index 449d21477d5a..4935894fc140 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/switches/_components/TheView.js
@@ -11,7 +11,6 @@ const components = {
 }
 
 import { computed, toRefs } from '@vue/composition-api'
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -21,19 +20,16 @@ const props = {
 }
 
 const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  const viewCollectionItem = useViewCollectionItem(_collection, props, context)
-  const {
-    form
-  } = viewCollectionItem
 
   const {
     switchGroup
   } = toRefs(props)
 
+  const viewCollectionItem = useViewCollectionItem(collection, props, context)
+  const {
+    form
+  } = viewCollectionItem
+
   const titleBadge = computed(() => switchGroup.value || form.value.group)
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheView.js
index b11d67a4677d..e35e28224e69 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,13 +18,7 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  return useViewCollectionItem(_collection, props, context)
-}
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheView.js
index b11d67a4677d..e35e28224e69 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheView.js
@@ -10,7 +10,6 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps } from '../../_composables/useViewCollectionItem'
 import * as collection from '../_composables/useCollection'
 
@@ -19,13 +18,7 @@ const props = {
   ...collection.useItemProps
 }
 
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
-
-  return useViewCollectionItem(_collection, props, context)
-}
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheView.js
index 997063fd871b..e3baafaa9c98 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheView.js
@@ -10,17 +10,10 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-import * as collection from '../_composables/useCollection'
-
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  return useViewCollectionItem(_collection, props, context)
-}
+import * as collection from '../_composables/useCollection'
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/webServices/_composables/useResource.js b/html/pfappserver/root/src/views/Configuration/webServices/_composables/useResource.js
index 069c9b1f71ed..8931ba92cdc5 100644
--- a/html/pfappserver/root/src/views/Configuration/webServices/_composables/useResource.js
+++ b/html/pfappserver/root/src/views/Configuration/webServices/_composables/useResource.js
@@ -3,14 +3,11 @@ import i18n from '@/utils/locale'
 
 export const useTitle = () => i18n.t('Web Services')
 
-export const useStore = (props, context, form) => {
-  const { root: { $store } = {} } = context
+export const useStore = $store => {
   return {
     isLoading: computed(() => $store.getters['$_bases/isLoading']),
-    getOptions: () => $store.dispatch('$_bases/optionsWebServices'),
     getItem: () => $store.dispatch('$_bases/getWebServices'),
-    updateItem: () => {
-      return $store.dispatch('$_bases/updateWebServices', form.value)
-    }
+    getItemOptions: () => $store.dispatch('$_bases/optionsWebServices'),
+    updateItem: params => $store.dispatch('$_bases/updateWebServices', params)
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheView.js
index 997063fd871b..e3baafaa9c98 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheView.js
@@ -10,17 +10,10 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-import * as collection from '../_composables/useCollection'
-
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  return useViewCollectionItem(_collection, props, context)
-}
+import * as collection from '../_composables/useCollection'
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheView.js
index 997063fd871b..e3baafaa9c98 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheView.js
@@ -10,17 +10,10 @@ const components = {
   TheForm
 }
 
-import { usePropsWrapper } from '@/composables/useProps'
 import { useViewCollectionItem, useViewCollectionItemProps as props } from '../../_composables/useViewCollectionItem'
-import * as collection from '../_composables/useCollection'
-
-const setup = (props, context) => {
-  const _collection = { ...collection } // unfurl Module
-  // merge props w/ params in collection.useStore methods
-  _collection.useStore = $store => usePropsWrapper(collection.useStore($store), props)
 
-  return useViewCollectionItem(_collection, props, context)
-}
+import * as collection from '../_composables/useCollection'
+const setup = (props, context) => useViewCollectionItem(collection, props, context)
 
 // @vue/component
 export default {

From 637a60d999b1195616f5d1e44741bcdedab123f6 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 09:10:51 -0400
Subject: [PATCH 38/72] remove unused props

---
 .../src/views/Configuration/adminRoles/_components/TheForm.vue | 3 ---
 .../views/Configuration/billingTiers/_components/TheView.js    | 3 ---
 2 files changed, 6 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheForm.vue b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheForm.vue
index f0fb4fbf0b82..1ab5483812c0 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheForm.vue
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheForm.vue
@@ -95,9 +95,6 @@ export const props = {
   id: {
     type: String
   },
-  tenantId: {
-    type: String
-  },
   form: {
     type: Object
   },
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheView.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheView.js
index b067861f2a36..2e44cb16188e 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheView.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheView.js
@@ -17,9 +17,6 @@ const props = {
 
   id: {
     type: String
-  },
-  tenantId: {
-    type: String
   }
 }
 

From 59be25db27f0f799b24db1bf45877ab0d247dd92 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 09:32:21 -0400
Subject: [PATCH 39/72] deprecate router query in Configuration

---
 .../src/views/Configuration/accessDurations/_router.js |  1 -
 .../src/views/Configuration/activeActive/_router.js    |  1 -
 .../root/src/views/Configuration/advanced/_router.js   |  2 +-
 .../root/src/views/Configuration/alerting/_router.js   |  2 +-
 .../src/views/Configuration/captivePortal/_router.js   |  1 -
 .../root/src/views/Configuration/database/_router.js   |  4 ++--
 .../root/src/views/Configuration/dns/_router.js        |  1 -
 .../Configuration/fingerbank/combinations/_router.js   |  2 +-
 .../fingerbank/deviceChangeDetection/_router.js        |  2 +-
 .../fingerbank/generalSettings/_router.js              |  2 +-
 .../root/src/views/Configuration/general/_router.js    |  2 +-
 .../root/src/views/Configuration/networks/_router.js   | 10 +++++-----
 .../views/Configuration/networks/fencing/_router.js    |  2 +-
 .../views/Configuration/networks/interfaces/_router.js |  2 +-
 .../networks/trafficShapingPolicies/_router.js         |  2 +-
 .../root/src/views/Configuration/pki/_router.js        |  2 +-
 .../src/views/Configuration/portalModules/_router.js   |  1 -
 .../src/views/Configuration/radius/general/_router.js  |  2 +-
 .../root/src/views/Configuration/realms/_router.js     |  5 +----
 .../root/src/views/Configuration/roles/_router.js      |  1 -
 .../src/views/Configuration/scanEngines/_router.js     |  2 +-
 .../src/views/Configuration/securityEvents/_router.js  |  1 -
 .../src/views/Configuration/selfServices/_router.js    |  1 -
 .../root/src/views/Configuration/services/_router.js   |  2 +-
 .../root/src/views/Configuration/snmpTraps/_router.js  |  1 -
 .../src/views/Configuration/switchGroups/_router.js    |  2 +-
 .../src/views/Configuration/switchTemplates/_router.js |  1 -
 .../root/src/views/Configuration/switches/_router.js   |  2 +-
 .../views/Configuration/syslogForwarders/_router.js    |  1 -
 .../src/views/Configuration/syslogParsers/_router.js   |  1 -
 .../root/src/views/Configuration/tenants/_router.js    |  1 -
 .../src/views/Configuration/webServices/_router.js     |  1 -
 .../root/src/views/Configuration/wmiRules/_router.js   |  2 +-
 .../root/src/views/Configuration/wrix/_router.js       |  1 -
 34 files changed, 24 insertions(+), 42 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/accessDurations/_router.js b/html/pfappserver/root/src/views/Configuration/accessDurations/_router.js
index 034028b8cbad..fdd8ca8c4dc4 100644
--- a/html/pfappserver/root/src/views/Configuration/accessDurations/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/accessDurations/_router.js
@@ -15,7 +15,6 @@ export default [
     path: 'access_duration',
     name: 'access_duration',
     component: TheView,
-    props: (route) => ({ query: route.query.query }),
     beforeEnter
   }
 ]
diff --git a/html/pfappserver/root/src/views/Configuration/activeActive/_router.js b/html/pfappserver/root/src/views/Configuration/activeActive/_router.js
index f8d49df87c2b..81e248e6995e 100644
--- a/html/pfappserver/root/src/views/Configuration/activeActive/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/activeActive/_router.js
@@ -15,7 +15,6 @@ export default [
     path: 'active_active',
     name: 'active_active',
     component: TheView,
-    props: (route) => ({ query: route.query.query }),
     beforeEnter
   }
 ]
diff --git a/html/pfappserver/root/src/views/Configuration/advanced/_router.js b/html/pfappserver/root/src/views/Configuration/advanced/_router.js
index d36113884c57..c992a90fd44b 100644
--- a/html/pfappserver/root/src/views/Configuration/advanced/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/advanced/_router.js
@@ -15,7 +15,7 @@ export default [
     path: 'advanced',
     name: 'advanced',
     component: TheTabs,
-    props: (route) => ({ tab: 'advanced', query: route.query.query }),
+    props: () => ({ tab: 'advanced' }),
     beforeEnter
   }
 ]
diff --git a/html/pfappserver/root/src/views/Configuration/alerting/_router.js b/html/pfappserver/root/src/views/Configuration/alerting/_router.js
index cef85c4f8e7c..4479651e0709 100644
--- a/html/pfappserver/root/src/views/Configuration/alerting/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/alerting/_router.js
@@ -15,7 +15,7 @@ export default [
     path: 'alerting',
     name: 'alerting',
     component: TheTabs,
-    props: (route) => ({ tab: 'alerting', query: route.query.query }),
+    props: () => ({ tab: 'alerting' }),
     beforeEnter
   }
 ]
diff --git a/html/pfappserver/root/src/views/Configuration/captivePortal/_router.js b/html/pfappserver/root/src/views/Configuration/captivePortal/_router.js
index 6dd44b65616a..47abe83714f6 100644
--- a/html/pfappserver/root/src/views/Configuration/captivePortal/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/captivePortal/_router.js
@@ -15,7 +15,6 @@ export default [
     path: 'captive_portal',
     name: 'captive_portal',
     component: TheView,
-    props: (route) => ({ query: route.query.query }),
     beforeEnter
   }
 ]
diff --git a/html/pfappserver/root/src/views/Configuration/database/_router.js b/html/pfappserver/root/src/views/Configuration/database/_router.js
index 489f1ba934bb..1f5b9c54e666 100644
--- a/html/pfappserver/root/src/views/Configuration/database/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/database/_router.js
@@ -15,14 +15,14 @@ export default [
     path: 'database_general',
     name: 'database_general',
     component: TheTabs,
-    props: (route) => ({ tab: 'database_general', query: route.query.query }),
+    props: () => ({ tab: 'database_general' }),
     beforeEnter
   },
   {
     path: 'database_advanced',
     name: 'database_advanced',
     component: TheTabs,
-    props: (route) => ({ tab: 'database_advanced', query: route.query.query }),
+    props: () => ({ tab: 'database_advanced' }),
     beforeEnter
   }
 ]
diff --git a/html/pfappserver/root/src/views/Configuration/dns/_router.js b/html/pfappserver/root/src/views/Configuration/dns/_router.js
index 4e9fc6ab34f6..34398fbd3c31 100644
--- a/html/pfappserver/root/src/views/Configuration/dns/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/dns/_router.js
@@ -15,7 +15,6 @@ export default [
     path: 'dns',
     name: 'dns',
     component: TheView,
-    props: (route) => ({ query: route.query.query }),
     beforeEnter
   }
 ]
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_router.js
index 9523ddc41ab7..07b530c73f9b 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_router.js
@@ -19,7 +19,7 @@ export default [
     path: 'fingerbank/combinations',
     name: 'fingerbankCombinations',
     component: TheTabs,
-    props: (route) => ({ tab: 'combinations', query: route.query.query })
+    props: () => ({ tab: 'combinations' })
   },
   {
     path: 'fingerbank/local/combinations/new',
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_router.js
index f533d58d37a2..941f3b15c659 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/deviceChangeDetection/_router.js
@@ -15,7 +15,7 @@ export default [
     path: 'fingerbank/device_change_detection',
     name: 'fingerbankDeviceChangeDetection',
     component: TheTabs,
-    props: (route) => ({ tab: 'device_change_detection', query: route.query.query }),
+    props: () => ({ tab: 'device_change_detection' }),
     beforeEnter
   }
 ]
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_router.js
index 9a2325d451a6..132624dbf940 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/generalSettings/_router.js
@@ -5,6 +5,6 @@ export default [
     path: 'fingerbank/general_settings',
     name: 'fingerbankGeneralSettings',
     component: TheTabs,
-    props: (route) => ({ tab: 'general_settings', query: route.query.query })
+    props: () => ({ tab: 'general_settings' })
   }
 ]
diff --git a/html/pfappserver/root/src/views/Configuration/general/_router.js b/html/pfappserver/root/src/views/Configuration/general/_router.js
index 9f598b6e7b75..fb4d81f4c958 100644
--- a/html/pfappserver/root/src/views/Configuration/general/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/general/_router.js
@@ -15,7 +15,7 @@ export default [
     path: 'general',
     name: 'general',
     component: TheTabs,
-    props: (route) => ({ tab: 'general', query: route.query.query }),
+    props: () => ({ tab: 'general' }),
     beforeEnter
   }
 ]
diff --git a/html/pfappserver/root/src/views/Configuration/networks/_router.js b/html/pfappserver/root/src/views/Configuration/networks/_router.js
index 3f2924207390..c9bf8dfe1b29 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/_router.js
@@ -18,31 +18,31 @@ const routes = [
     path: 'networks',
     name: 'networks',
     component: TheTabs,
-    props: (route) => ({ tab: 'network', query: route.query.query })
+    props: () => ({ tab: 'network' })
   },
   {
     path: 'network',
     name: 'network',
     component: TheTabs,
-    props: (route) => ({ tab: 'network', query: route.query.query })
+    props: () => ({ tab: 'network' })
   },
   {
     path: 'inline',
     name: 'inline',
     component: TheTabs,
-    props: (route) => ({ tab: 'inline', query: route.query.query })
+    props: () => ({ tab: 'inline' })
   },
   {
     path: 'fencing',
     name: 'fencing',
     component: TheTabs,
-    props: (route) => ({ tab: 'fencing', query: route.query.query })
+    props: () => ({ tab: 'fencing' })
   },
   {
     path: 'parking',
     name: 'parking',
     component: TheTabs,
-    props: (route) => ({ tab: 'parking', query: route.query.query })
+    props: () => ({ tab: 'parking' })
   },
 
   ...InterfacesRoutes,
diff --git a/html/pfappserver/root/src/views/Configuration/networks/fencing/_router.js b/html/pfappserver/root/src/views/Configuration/networks/fencing/_router.js
index d36113884c57..c992a90fd44b 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/fencing/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/fencing/_router.js
@@ -15,7 +15,7 @@ export default [
     path: 'advanced',
     name: 'advanced',
     component: TheTabs,
-    props: (route) => ({ tab: 'advanced', query: route.query.query }),
+    props: () => ({ tab: 'advanced' }),
     beforeEnter
   }
 ]
diff --git a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_router.js b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_router.js
index 6458b936be42..6de611e89389 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/interfaces/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/interfaces/_router.js
@@ -29,7 +29,7 @@ export default [
     path: 'interfaces',
     name: 'interfaces',
     component: TheTabs,
-    props: (route) => ({ tab: 'interfaces', query: route.query.query })
+    props: () => ({ tab: 'interfaces' })
   },
   {
     path: 'interface/:id',
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_router.js b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_router.js
index 78caaa90d5ac..d0eef9c7c58c 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_router.js
@@ -16,7 +16,7 @@ export default [
     path: 'traffic_shapings',
     name: 'traffic_shapings',
     component: TheTabs,
-    props: (route) => ({ tab: 'traffic_shapings', query: route.query.query })
+    props: () => ({ tab: 'traffic_shapings' })
   },
   {
     path: 'traffic_shaping/new/:role',
diff --git a/html/pfappserver/root/src/views/Configuration/pki/_router.js b/html/pfappserver/root/src/views/Configuration/pki/_router.js
index 7977406ae36e..4c64034ee60e 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/_router.js
@@ -18,7 +18,7 @@ export default [
     path: 'pki',
     name: 'pki',
     component: TheTabs,
-    props: (route) => ({ tab: 'pkiCas', query: route.query.query }),
+    props: () => ({ tab: 'pkiCas' }),
     beforeEnter
   },
   ...CasRoutes,
diff --git a/html/pfappserver/root/src/views/Configuration/portalModules/_router.js b/html/pfappserver/root/src/views/Configuration/portalModules/_router.js
index 5d9a3ccf6781..ef5078cb743c 100644
--- a/html/pfappserver/root/src/views/Configuration/portalModules/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/portalModules/_router.js
@@ -25,7 +25,6 @@ export default [
     path: 'portal_modules',
     name: 'portal_modules',
     component: TheList,
-    props: (route) => ({ query: route.query.query }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/general/_router.js b/html/pfappserver/root/src/views/Configuration/radius/general/_router.js
index ea0099293bd0..177de7471b4b 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/general/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/general/_router.js
@@ -14,7 +14,7 @@ export default [
     path: 'radius',
     name: 'radiusGeneral',
     component: TheTabs,
-    props: (route) => ({ tab: 'radiusGeneral', query: route.query.query }),
+    props: () => ({ tab: 'radiusGeneral' }),
     beforeEnter
   }
 ]
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_router.js b/html/pfappserver/root/src/views/Configuration/realms/_router.js
index 261c16a5b9bd..992d60f9f0f4 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/realms/_router.js
@@ -12,10 +12,7 @@ export const useRouter = $router => {
     goToItem: params => $router
       .push({ name: 'realm', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: params => {
-console.log('goToClone', JSON.stringify({ params }, null, 2))
-      $router.push({ name: 'cloneRealm', params })
-    },
+    goToClone: params => $router.push({ name: 'cloneRealm', params }),
     goToNew: params => $router.push({ name: 'newRealm', params })
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_router.js b/html/pfappserver/root/src/views/Configuration/roles/_router.js
index 386dd8399348..2b872f41adc3 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/roles/_router.js
@@ -28,7 +28,6 @@ export default [
     path: 'roles',
     name: 'roles',
     component: TheList,
-    props: (route) => ({ query: route.query.query }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_router.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_router.js
index 1c84ad85cc4c..18704e3e1ad0 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_router.js
@@ -29,7 +29,7 @@ export default [
     path: 'scans/scan_engines',
     name: 'scanEngines',
     component: TheTabs,
-    props: (route) => ({ tab: 'scan_engines', query: route.query.query }),
+    props: () => ({ tab: 'scan_engines' }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_router.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_router.js
index fda01ef8b179..9a9972f8a953 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_router.js
@@ -31,7 +31,6 @@ export default [
     path: 'security_events',
     name: 'security_events',
     component: TheList,
-    props: (route) => ({ query: route.query.query }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_router.js b/html/pfappserver/root/src/views/Configuration/selfServices/_router.js
index 2d228a9d10df..d74dcb04b375 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_router.js
@@ -25,7 +25,6 @@ export default [
     path: 'self_services',
     name: 'self_services',
     component: TheList,
-    props: (route) => ({ query: route.query.query }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/services/_router.js b/html/pfappserver/root/src/views/Configuration/services/_router.js
index b6d326c12e53..735c867be5a6 100644
--- a/html/pfappserver/root/src/views/Configuration/services/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/services/_router.js
@@ -15,7 +15,7 @@ export default [
     path: 'services',
     name: 'services',
     component: TheTabs,
-    props: (route) => ({ tab: 'services', query: route.query.query }),
+    props: () => ({ tab: 'services' }),
     beforeEnter
   }
 ]
diff --git a/html/pfappserver/root/src/views/Configuration/snmpTraps/_router.js b/html/pfappserver/root/src/views/Configuration/snmpTraps/_router.js
index babcf8df4c11..d756bca9dc31 100644
--- a/html/pfappserver/root/src/views/Configuration/snmpTraps/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/snmpTraps/_router.js
@@ -15,7 +15,6 @@ export default [
     path: 'snmp_traps',
     name: 'snmp_traps',
     component: TheView,
-    props: (route) => ({ query: route.query.query }),
     beforeEnter
   }
 ]
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_router.js b/html/pfappserver/root/src/views/Configuration/switchGroups/_router.js
index 97885d32896c..5cb2386d7ba4 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_router.js
@@ -31,7 +31,7 @@ export default [
     path: 'switch_groups',
     name: 'switch_groups',
     component: TheTabs,
-    props: (route) => ({ tab: 'switch_groups', query: route.query.query }),
+    props: () => ({ tab: 'switch_groups' }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_router.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_router.js
index b21ed9549630..a268edc975f4 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_router.js
@@ -25,7 +25,6 @@ export default [
     path: 'switch_templates',
     name: 'switchTemplates',
     component: TheList,
-    props: (route) => ({ query: route.query.query }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_router.js b/html/pfappserver/root/src/views/Configuration/switches/_router.js
index 5cdd88bf04b2..dca57715a876 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/switches/_router.js
@@ -32,7 +32,7 @@ export default [
     path: 'switches',
     name: 'switches',
     component: TheTabs,
-    props: (route) => ({ tab: 'switches', query: route.query.query }),
+    props: () => ({ tab: 'switches' }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_router.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_router.js
index 71020fee27bc..b889ac8f21ce 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_router.js
@@ -25,7 +25,6 @@ export default [
     path: 'syslog',
     name: 'syslogForwarders',
     component: TheList,
-    props: (route) => ({ query: route.query.query }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_router.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_router.js
index 21f0e5a03a0c..d8e84e351b8c 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_router.js
@@ -25,7 +25,6 @@ export default [
     path: 'pfdetect',
     name: 'syslogParsers',
     component: TheList,
-    props: (route) => ({ query: route.query.query }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_router.js b/html/pfappserver/root/src/views/Configuration/tenants/_router.js
index 62e1f917657a..90beef48ac50 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_router.js
@@ -25,7 +25,6 @@ export default [
     path: 'tenants',
     name: 'tenants',
     component: TheList,
-    props: (route) => ({ query: route.query.query }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/webServices/_router.js b/html/pfappserver/root/src/views/Configuration/webServices/_router.js
index 382858cadea7..97d332a9f079 100644
--- a/html/pfappserver/root/src/views/Configuration/webServices/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/webServices/_router.js
@@ -15,7 +15,6 @@ export default [
     path: 'webservices',
     name: 'webservices',
     component: TheView,
-    props: (route) => ({ query: route.query.query }),
     beforeEnter
   }
 ]
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_router.js b/html/pfappserver/root/src/views/Configuration/wmiRules/_router.js
index 93c720c3d624..711c78d56d04 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_router.js
@@ -25,7 +25,7 @@ export default [
     path: 'scans/wmi_rules',
     name: 'wmiRules',
     component: TheTabs,
-    props: (route) => ({ tab: 'wmi_rules', query: route.query.query }),
+    props: () => ({ tab: 'wmi_rules' }),
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_router.js b/html/pfappserver/root/src/views/Configuration/wrix/_router.js
index ca16859579c3..d1fc7df4ee2b 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_router.js
@@ -25,7 +25,6 @@ export default [
     path: 'wrix',
     name: 'wrixLocations',
     component: TheList,
-    props: (route) => ({ query: route.query.query }),
     beforeEnter
   },
   {

From a2c1881d4d0224b003062a1cbec9b009439ef616 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 09:52:23 -0400
Subject: [PATCH 40/72] add advanced search to scan engines

---
 .../_components/ScanEnginesList.vue           |  74 --------
 .../Configuration/_components/ScansTabs.vue   |   8 +-
 .../views/Configuration/_config/scanEngine.js | 102 -----------
 .../views/Configuration/scanEngines/_api.js   |  28 +--
 .../scanEngines/_components/TheSearch.vue     | 171 ++++++++++++++++++
 .../scanEngines/_composables/useCollection.js |  76 ++++++++
 .../views/Configuration/scanEngines/_store.js |  22 +--
 .../views/Configuration/scanEngines/config.js |  13 ++
 8 files changed, 287 insertions(+), 207 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/ScanEnginesList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/scanEngine.js
 create mode 100644 html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/scanEngines/config.js

diff --git a/html/pfappserver/root/src/views/Configuration/_components/ScanEnginesList.vue b/html/pfappserver/root/src/views/Configuration/_components/ScanEnginesList.vue
deleted file mode 100644
index 27aac6c8867c..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/ScanEnginesList.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">
-            {{ $t('Scan Engines') }}
-            <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_scanner_definition" />
-          </h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-dropdown :text="$t('New Scan Engine')" variant="outline-primary">
-          <b-dropdown-item :to="{ name: 'newScanEngine', params: { scanType: 'nessus' } }">Nessus</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newScanEngine', params: { scanType: 'nessus6' } }">Nessus 6</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newScanEngine', params: { scanType: 'openvas' } }">OpenVAS</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newScanEngine', params: { scanType: 'rapid7' } }">Rapid7</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newScanEngine', params: { scanType: 'wmi' } }">WMI</b-dropdown-item>
-        </b-dropdown>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No scan engines found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Scan Engine?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonHelp from '@/components/pfButtonHelp'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/scanEngine'
-
-export default {
-  name: 'scan-engines-list',
-  components: {
-    pfButtonDelete,
-    pfButtonHelp,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this) // ../_config/scanEngine
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_scans/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneScanEngine', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_scans/deleteScanEngine', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/ScansTabs.vue b/html/pfappserver/root/src/views/Configuration/_components/ScansTabs.vue
index dcc31382fc98..aac7ad4d32d1 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/ScansTabs.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/ScansTabs.vue
@@ -3,9 +3,9 @@
     <b-card-header>
       <h4 class="mb-0" v-t="'Scans'"></h4>
     </b-card-header>
-    <b-tabs ref="tabs" v-model="tabIndex" card>
+    <b-tabs ref="tabs" v-model="tabIndex" card lazy>
       <b-tab :title="$t('Scan Engines')" @click="changeTab('scan_engines')">
-        <scan-engines-list />
+        <scan-engines-search />
       </b-tab>
       <b-tab :title="$t('WMI Rules')" @click="changeTab('wmi_rules')">
         <wmi-rules-list />
@@ -15,13 +15,13 @@
 </template>
 
 <script>
-import ScanEnginesList from './ScanEnginesList'
+import ScanEnginesSearch from '../scanEngines/_components/TheSearch'
 import WmiRulesList from './WmiRulesList'
 
 export default {
   name: 'scan-tabs',
   components: {
-    ScanEnginesList,
+    ScanEnginesSearch,
     WmiRulesList
   },
   props: {
diff --git a/html/pfappserver/root/src/views/Configuration/_config/scanEngine.js b/html/pfappserver/root/src/views/Configuration/_config/scanEngine.js
deleted file mode 100644
index 63f20b2d4f71..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/scanEngine.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Name', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'ip',
-    label: 'IP Address', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'port',
-    label: 'Port', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'type',
-    label: 'Type', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'ip',
-    text: i18n.t('IP Address'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'port',
-    text: i18n.t('Port'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'type',
-    text: i18n.t('Type'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'scanEngine', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by name, ip, port or type'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/scans',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'ip', op: 'contains', value: null },
-            { field: 'port', op: 'contains', value: null },
-            { field: 'type', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'scanEngines' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'ip', op: 'contains', value: quickCondition },
-              { field: 'port', op: 'contains', value: quickCondition },
-              { field: 'type', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_api.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_api.js
index 86cdeb3fead0..429e8eeb38f1 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_api.js
@@ -1,37 +1,43 @@
 import apiCall from '@/utils/api'
 
 export default {
-  scanEngines: params => {
+  list: params => {
     return apiCall.get(['config', 'scans'], { params }).then(response => {
       return response.data
     })
   },
-  scanEnginesOptions: scanType => {
+  listOptions: scanType => {
     return apiCall.options(['config', 'scans'], { params: { type: scanType } }).then(response => {
       return response.data
     })
   },
-  scanEngine: id => {
-    return apiCall.get(['config', 'scan', id]).then(response => {
-      return response.data.item
+  search: data => {
+    return apiCall.post('config/scans/search', data).then(response => {
+      return response.data
     })
   },
-  scanEngineOptions: id => {
-    return apiCall.options(['config', 'scan', id]).then(response => {
+  create: data => {
+    return apiCall.post('config/scans', data).then(response => {
       return response.data
     })
   },
-  createScanEngine: data => {
-    return apiCall.post('config/scans', data).then(response => {
+
+  item: id => {
+    return apiCall.get(['config', 'scan', id]).then(response => {
+      return response.data.item
+    })
+  },
+  itemOptions: id => {
+    return apiCall.options(['config', 'scan', id]).then(response => {
       return response.data
     })
   },
-  updateScanEngine: data => {
+  update: data => {
     return apiCall.patch(['config', 'scan', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteScanEngine: id => {
+  delete: id => {
     return apiCall.delete(['config', 'scan', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
new file mode 100644
index 000000000000..7eb78fee1ac4
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
@@ -0,0 +1,171 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center mb-0">
+        {{ $t('Scan Engines') }}
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_scanner_definition" />
+      </h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-dropdown :text="$t('New Scan Engine')" variant="outline-primary">
+          <b-dropdown-item v-for="(text, scanType) in types" :key="scanType"
+            :to="{ name: 'newScanEngine', params: { scanType } }"
+          >{{ text }}</b-dropdown-item>
+        </b-dropdown>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Scan EngineO?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+import { types } from '../config'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search),
+    types
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js
index 170b078d8729..ca8d0f706cbd 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js
@@ -49,3 +49,79 @@ export const useItemTitleBadge = (props, context, form) => {
 export { useRouter } from '../_router'
 
 export { useStore } from '../_store'
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('scanEngines', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Name', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'ip',
+      label: 'IP Address', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'port',
+      label: 'Port', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'type',
+      label: 'Type', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'ip',
+      text: i18n.t('IP Address'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'port',
+      text: i18n.t('Port'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'type',
+      text: i18n.t('Type'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'not_equals', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_store.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_store.js
index 0960d64cfe51..d64d635e18d8 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_store.js
@@ -46,7 +46,7 @@ const getters = {
 const actions = {
   optionsById: ({ commit }, id) => {
     commit('ITEM_REQUEST')
-    return api.scanEngineOptions(id).then(response => {
+    return api.itemOptions(id).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -56,7 +56,7 @@ const actions = {
   },
   optionsByScanType: ({ commit }, scanType) => {
     commit('ITEM_REQUEST')
-    return api.scanEnginesOptions(scanType).then(response => {
+    return api.listOptions(scanType).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -69,7 +69,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.scanEngine(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -79,7 +79,7 @@ const actions = {
   },
   createScanEngine: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createScanEngine(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -89,7 +89,7 @@ const actions = {
   },
   updateScanEngine: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateScanEngine(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -99,23 +99,13 @@ const actions = {
   },
   deleteScanEngine: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteScanEngine(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
       throw err
     })
-  },
-  testScanEngine: ({ commit }, data) => {
-    commit('ITEM_REQUEST')
-    return api.testScanEngine(data).then(response => {
-      commit('ITEM_SUCCESS')
-      return response
-    }).catch(err => {
-      commit('ITEM_ERROR', err.response)
-      throw err
-    })
   }
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/config.js b/html/pfappserver/root/src/views/Configuration/scanEngines/config.js
new file mode 100644
index 000000000000..c058646404da
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/config.js
@@ -0,0 +1,13 @@
+import i18n from '@/utils/locale'
+
+export const types = {
+  nessus:   i18n.t('Nessus'),
+  nessus6:  i18n.t('Nessus 6'),
+  openvas:  i18n.t('OpenVAS'),
+  rapid7:   i18n.t('Rapid7'),
+  wmi:      i18n.t('WMI')
+}
+
+export const typeOptions = Object.keys(types)
+  .sort((a, b) => types[a].localeCompare(types[b]))
+  .map(key => ({ value: key, text: types[key] }))

From 9e71ed2eda3c32d4541d0a6b78e2b980d513078f Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 10:56:11 -0400
Subject: [PATCH 41/72] add advanced search to security events

---
 .../_components/ScansWmiRulesList.vue         |   0
 .../_components/SecurityEventsList.vue        |  84 --------
 .../Configuration/securityEvents/_api.js      |  28 +--
 .../securityEvents/_components/TheSearch.vue  | 184 ++++++++++++++++++
 .../_components/ToggleStatus.js               |  14 +-
 .../_composables/useCollection.js             |  80 ++++++++
 .../Configuration/securityEvents/_router.js   |   5 +-
 .../Configuration/securityEvents/_store.js    |  18 +-
 8 files changed, 301 insertions(+), 112 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/ScansWmiRulesList.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/SecurityEventsList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/views/Configuration/_components/ScansWmiRulesList.vue b/html/pfappserver/root/src/views/Configuration/_components/ScansWmiRulesList.vue
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/html/pfappserver/root/src/views/Configuration/_components/SecurityEventsList.vue b/html/pfappserver/root/src/views/Configuration/_components/SecurityEventsList.vue
deleted file mode 100644
index df5a092bc646..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/SecurityEventsList.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">
-            {{ $t('Security Events') }}
-            <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_security_events" />
-          </h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newSecurityEvent' }">{{ $t('New Security Event') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No security events found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Security Event?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-          <b-dropdown size="sm" :text="$t('Preview')" variant="outline-primary">
-            <b-dropdown-item v-for="(connectionProfile, index) in connectionProfiles" :key="index" :href="`/config/profile/${connectionProfile.id}/preview/security_events/${item.template}.html`" target="_blank">{{ connectionProfile.id }}</b-dropdown-item>
-          </b-dropdown>
-        </span>
-      </template>
-      <template v-slot:cell(enabled)="item">
-        <toggle-status :value="item.enabled"
-          :disabled="item.id === 'defaults' || isLoading"
-          :item="item" />
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonHelp from '@/components/pfButtonHelp'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/securityEvent'
-import { ToggleStatus } from '@/views/Configuration/securityEvents/_components/'
-
-export default {
-  name: 'security-events-list',
-  components: {
-    pfButtonDelete,
-    pfButtonHelp,
-    pfConfigList,
-    pfEmptyTable,
-    ToggleStatus
-  },
-  data () {
-    return {
-      config: config(this),
-      connectionProfiles: []
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_security_events/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneSecurityEvent', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_security_events/deleteSecurityEvent', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  },
-  created () {
-    this.$store.dispatch(`$_connection_profiles/all`).then(data => {
-      this.connectionProfiles = data
-    })
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_api.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_api.js
index 58c76cc968de..42833370abe2 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_api.js
@@ -1,38 +1,44 @@
 import apiCall from '@/utils/api'
 
 export default {
-  securityEvents: params => {
+  list: params => {
     return apiCall.get('config/security_events', { params }).then(response => {
       return response.data
     })
   },
-  securityEventsOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/security_events').then(response => {
       return response.data
     })
   },
-  securityEvent: id => {
-    return apiCall.get(['config', 'security_event', id]).then(response => {
-      return response.data.item
+  search: data => {
+    return apiCall.post('config/security_events/search', data).then(response => {
+      return response.data
     })
   },
-  securityEventOptions: id => {
-    return apiCall.options(['config', 'security_event', id]).then(response => {
+  create: data => {
+    return apiCall.post('config/security_events', data).then(response => {
       return response.data
     })
   },
-  createSecurityEvent: data => {
-    return apiCall.post('config/security_events', data).then(response => {
+
+  item: id => {
+    return apiCall.get(['config', 'security_event', id]).then(response => {
+      return response.data.item
+    })
+  },
+  itemOptions: id => {
+    return apiCall.options(['config', 'security_event', id]).then(response => {
       return response.data
     })
   },
-  updateSecurityEvent: data => {
+  update: data => {
     const patch = data.quiet ? 'patchQuiet' : 'patch'
     return apiCall[patch](['config', 'security_event', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteSecurityEvent: id => {
+  delete: id => {
     return apiCall.delete(['config', 'security_event', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue
new file mode 100644
index 000000000000..73fccfabfeb2
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue
@@ -0,0 +1,184 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center mb-0">
+        {{ $t('Security Events') }}
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_security_events" />
+      </h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New Security Event') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(enabled)="{ item }">
+          <toggle-status :value="item.enabled" :disabled="isLoading"
+            :item="item" @input="item.enabled = $event" />
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Security Event?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+            <b-dropdown :text="$t('Preview')"
+              size="sm" variant="outline-primary" class="mr-1" right>
+              <b-dropdown-header class="text-secondary">{{ $t('Connection Profile') }}</b-dropdown-header>
+              <b-dropdown-item v-for="(connectionProfile, index) in connectionProfiles" :key="index"
+                :href="`/config/profile/${connectionProfile.id}/preview/security_events/${item.template}.html`" target="_blank"
+              >{{ connectionProfile.id }}</b-dropdown-item>
+            </b-dropdown>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import ToggleStatus from './ToggleStatus'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable,
+  ToggleStatus
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  const connectionProfiles = ref([])
+  $store.dispatch(`$_connection_profiles/all`).then(data => {
+    connectionProfiles.value = data
+  })
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search),
+    connectionProfiles
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/ToggleStatus.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/ToggleStatus.js
index b361b3769a1c..d0142c54a806 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/ToggleStatus.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/ToggleStatus.js
@@ -13,15 +13,16 @@ export const props = {
       {
         value: 'N', label: i18n.t('Disabled'),
         color: 'var(--danger)', icon: 'times',
-        promise: (value, props) => {
+        promise: (value, props, context) => {
           const { item } = toRefs(props)
           return store.dispatch('$_security_events/disableSecurityEvent', { quiet: true, ...item.value })
             .then(() => {
-              store.dispatch('notification/info', { message: i18n.t('Security event <strong>{desc}</strong> disabled.', item.value) })
+              store.dispatch('notification/info', { message: i18n.t('Security event <code>{desc}</code> disabled.', item.value) })
+              context.emit('input', 'N')
             })
             .catch(err => {
               const { response: { data: { message: errMsg } = {} } = {} } = err
-              let message = i18n.t('Security event <strong>{desc}</strong> was not disabled', item.value)
+              let message = i18n.t('Security event <code>{desc}</code> was not disabled.', item.value)
               if (errMsg) message += ` (${errMsg})`
               store.dispatch('notification/danger', { message })
             })
@@ -30,15 +31,16 @@ export const props = {
       {
         value: 'Y', label: i18n.t('Enabled'),
         color: 'var(--success)', icon: 'check',
-        promise: (value, props) => {
+        promise: (value, props, context) => {
           const { item } = toRefs(props)
           return store.dispatch('$_security_events/enableSecurityEvent', { quiet: true, ...item.value })
             .then(() => {
-              store.dispatch('notification/info', { message: i18n.t('Security event <strong>{desc}</strong> enabled.', item.value) })
+              store.dispatch('notification/info', { message: i18n.t('Security event <code>{desc}</code> enabled.', item.value) })
+              context.emit('input', 'Y')
             })
             .catch(err => {
               const { response: { data: { message: errMsg } = {} } = {} } = err
-              let message = i18n.t('Security event <strong>{desc}</strong> was not enabled', item.value)
+              let message = i18n.t('Security event <code>{desc}</code> was not enabled.', item.value)
               if (errMsg) message += ` (${errMsg})`
               store.dispatch('notification/danger', { message })
             })
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js
index 8f7ce588e087..a3db48f98509 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js
@@ -22,3 +22,83 @@ export const useItemTitle = (props) => {
 export { useRouter } from '../_router'
 
 export { useStore } from '../_store'
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('securityEvents', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'enabled',
+      label: 'Status', // i18n defer
+      visible: true
+    },
+    {
+      key: 'id',
+      label: 'ID', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'desc',
+      label: 'Description', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'priority',
+      label: 'Priority',
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'template',
+      label: 'Template', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'description',
+      text: i18n.t('Description'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'template',
+      text: i18n.t('Template'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'not_equals', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_router.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_router.js
index 9a9972f8a953..2a447badc055 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_router.js
@@ -3,7 +3,7 @@ import SecurityEventsStoreModule from './_store'
 import ConnectionProfilesStoreModule from '../connectionProfiles/_store'
 import NetworkBehaviorPoliciesStoreModule from '../networkBehaviorPolicy/_store'
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/SecurityEventsList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const useRouter = $router => {
@@ -13,6 +13,7 @@ export const useRouter = $router => {
       .push({ name: 'security_event', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneSecurityEvent', params }),
+    goToNew: params => $router.push({ name: 'newSecurityEvent', params })
   }
 }
 
@@ -30,7 +31,7 @@ export default [
   {
     path: 'security_events',
     name: 'security_events',
-    component: TheList,
+    component: TheSearch,
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_store.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_store.js
index 62f0a75ca0df..f7bf74dce5ea 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_store.js
@@ -53,14 +53,14 @@ const actions = {
       sort: 'id',
       fields: ['id'].join(',')
     }
-    return api.securityEvents(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.securityEventOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -68,7 +68,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.securityEventsOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -82,7 +82,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.securityEvent(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -96,7 +96,7 @@ const actions = {
       data = JSON.parse(JSON.stringify(data)) // dereference
       data.triggers = recomposeTriggers(data.triggers)
     }
-    return api.createSecurityEvent(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -110,7 +110,7 @@ const actions = {
       data = JSON.parse(JSON.stringify(data)) // dereference
       data.triggers = recomposeTriggers(data.triggers)
     }
-    return api.updateSecurityEvent(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -122,7 +122,7 @@ const actions = {
     commit('ITEM_REQUEST')
     const { id, quiet = false } = data
     const _data = { id, enabled: 'Y', quiet }
-    return api.updateSecurityEvent(_data).then(response => {
+    return api.update(_data).then(response => {
       commit('ITEM_ENABLED', _data)
       commit('$_config_security_events_searchable/ITEM_UPDATED', { key: 'id', id, prop: 'enabled', data: 'Y' }, { root: true })
       return response
@@ -135,7 +135,7 @@ const actions = {
     commit('ITEM_REQUEST')
     const { id, quiet = false } = data
     const _data = { id, enabled: 'N', quiet }
-    return api.updateSecurityEvent(_data).then(response => {
+    return api.update(_data).then(response => {
       commit('ITEM_DISABLED', _data)
       commit('$_config_security_events_searchable/ITEM_UPDATED', { key: 'id', id, prop: 'enabled', data: 'N' }, { root: true })
       return response
@@ -146,7 +146,7 @@ const actions = {
   },
   deleteSecurityEvent: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteSecurityEvent(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {

From 84d9d160fc626d1b810d53a8a0fe59d9ecdb0a28 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 10:56:38 -0400
Subject: [PATCH 42/72] fix outer rule

---
 .../root/src/components/new/BaseSearchInputAdvanced.vue       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/html/pfappserver/root/src/components/new/BaseSearchInputAdvanced.vue b/html/pfappserver/root/src/components/new/BaseSearchInputAdvanced.vue
index a9827b82b465..6630136e76c1 100644
--- a/html/pfappserver/root/src/components/new/BaseSearchInputAdvanced.vue
+++ b/html/pfappserver/root/src/components/new/BaseSearchInputAdvanced.vue
@@ -105,9 +105,9 @@ const setup = (props, context) => {
   const onAddOuterRule = () => {
     const rule = { values: [{ field: fields.value[0].value, op: null, value: null }] }
     if (value.value.values && value.value.values.constructor === Array)
-      emit('input', [...value.value.values, rule])
+      emit('input', { op: 'and', values: [...value.value.values, rule] })
     else
-      emit('input', [rule])
+      emit('input', { op: 'and', values: [rule] })
   }
 
   const onDeleteRule = (oIndex, iIndex) => {

From 53434b2dc28a25bf7d08c62843f61628fe3f5fdf Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 10:57:08 -0400
Subject: [PATCH 43/72] fixes

---
 .../src/views/Configuration/firewalls/_api.js | 21 ++++++++++---------
 .../scanEngines/_components/TheSearch.vue     |  2 +-
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_api.js b/html/pfappserver/root/src/views/Configuration/firewalls/_api.js
index 6420a405022a..39a1f1db7708 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_api.js
@@ -11,6 +11,17 @@ export default {
       return response.data
     })
   },
+  search: data => {
+    return apiCall.post('config/firewalls/search', data).then(response => {
+      return response.data
+    })
+  },
+  create: data => {
+    return apiCall.post('config/firewalls', data).then(response => {
+      return response.data
+    })
+  },
+
   item: id => {
     return apiCall.get(['config', 'firewall', id]).then(response => {
       return response.data.item
@@ -21,11 +32,6 @@ export default {
       return response.data
     })
   },
-  create: data => {
-    return apiCall.post('config/firewalls', data).then(response => {
-      return response.data
-    })
-  },
   update: data => {
     return apiCall.patch(['config', 'firewall', data.id], data).then(response => {
       return response.data
@@ -33,10 +39,5 @@ export default {
   },
   delete: id => {
     return apiCall.delete(['config', 'firewall', id])
-  },
-  search: data => {
-    return apiCall.post('config/firewalls/search', data).then(response => {
-      return response.data
-    })
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
index 7eb78fee1ac4..d3c045af9354 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
@@ -69,7 +69,7 @@
             <base-button-confirm v-if="!item.not_deletable"
               size="sm" variant="outline-danger" class="my-1 mr-1" reverse
               :disabled="isLoading"
-              :confirm="$t('Delete Scan EngineO?')"
+              :confirm="$t('Delete Scan Engine?')"
               @click="onRemove(item.id)"
             >{{ $t('Delete') }}</base-button-confirm>
             <b-button

From b6fe3f46b06871fce4c9ebf0b9b3eb13c8a8d887 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 11:07:33 -0400
Subject: [PATCH 44/72] add advanced search to self service

---
 .../_components/SelfServicesList.vue          |  68 --------
 .../views/Configuration/selfServices/_api.js  |  28 +--
 .../selfServices/_components/TheSearch.vue    | 165 ++++++++++++++++++
 .../_composables/useCollection.js             |  57 ++++++
 .../Configuration/selfServices/_router.js     |   7 +-
 .../Configuration/selfServices/_store.js      |  14 +-
 6 files changed, 250 insertions(+), 89 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/SelfServicesList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/views/Configuration/_components/SelfServicesList.vue b/html/pfappserver/root/src/views/Configuration/_components/SelfServicesList.vue
deleted file mode 100644
index 988bee30dc67..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/SelfServicesList.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">
-            {{ $t('Self Service') }}
-            <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_devices_registration" />
-          </h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newSelfService' }">{{ $t('New Self Service') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No Self Services found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Self Service?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonHelp from '@/components/pfButtonHelp'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/selfService'
-
-export default {
-  name: 'self-services-list',
-  components: {
-    pfButtonDelete,
-    pfButtonHelp,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_self_services/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneSelfService', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_self_services/deleteSelfService', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_api.js b/html/pfappserver/root/src/views/Configuration/selfServices/_api.js
index 478e6b670b8c..24f206e4f532 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_api.js
@@ -1,37 +1,43 @@
 import apiCall from '@/utils/api'
 
 export default {
-  selfServices: params => {
+  list: params => {
     return apiCall.get('config/self_services', { params }).then(response => {
       return response.data
     })
   },
-  selfServicesOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/self_services').then(response => {
       return response.data
     })
   },
-  selfService: id => {
-    return apiCall.get(['config', 'self_service', id]).then(response => {
-      return response.data.item
+  search: data => {
+    return apiCall.post('config/self_services/search', data).then(response => {
+      return response.data
     })
   },
-  selfServiceOptions: id => {
-    return apiCall.options(['config', 'self_service', id]).then(response => {
+  create: data => {
+    return apiCall.post('config/self_services', data).then(response => {
       return response.data
     })
   },
-  createSelfService: data => {
-    return apiCall.post('config/self_services', data).then(response => {
+
+  item: id => {
+    return apiCall.get(['config', 'self_service', id]).then(response => {
+      return response.data.item
+    })
+  },
+  itemOptions: id => {
+    return apiCall.options(['config', 'self_service', id]).then(response => {
       return response.data
     })
   },
-  updateSelfService: data => {
+  update: data => {
     return apiCall.patch(['config', 'self_service', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteSelfService: id => {
+  delete: id => {
     return apiCall.delete(['config', 'self_service', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue
new file mode 100644
index 000000000000..3eb1a1e807d9
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue
@@ -0,0 +1,165 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center mb-0">
+        {{ $t('Self Service') }}
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_devices_registration" />
+      </h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New Self Service') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Self Service?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js
index b51b19727582..ab6b9d407c2c 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js
@@ -22,3 +22,60 @@ export const useItemTitle = (props) => {
 export { useRouter } from '../_router'
 
 export { useStore } from '../_store'
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('selfServices', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'description',
+      label: 'Description', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'description',
+      text: i18n.t('Description'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'not_equals', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_router.js b/html/pfappserver/root/src/views/Configuration/selfServices/_router.js
index d74dcb04b375..e8061eb7b1d9 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_router.js
@@ -1,7 +1,7 @@
 import store from '@/store'
 import StoreModule from './_store'
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/SelfServicesList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const useRouter = $router => {
@@ -10,7 +10,8 @@ export const useRouter = $router => {
     goToItem: params => $router
       .push({ name: 'self_service', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: params => $router.push({ name: 'cloneSelfService', params })
+    goToClone: params => $router.push({ name: 'cloneSelfService', params }),
+    goToNew: params => $router.push({ name: 'newSelfService', params })
   }
 }
 
@@ -24,7 +25,7 @@ export default [
   {
     path: 'self_services',
     name: 'self_services',
-    component: TheList,
+    component: TheSearch,
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_store.js b/html/pfappserver/root/src/views/Configuration/selfServices/_store.js
index 80e343649da8..8e56bd594aad 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_store.js
@@ -49,14 +49,14 @@ const actions = {
       sort: 'id',
       fields: ['id', 'description'].join(',')
     }
-    return api.selfServices(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.selfServiceOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -64,7 +64,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.selfServicesOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -78,7 +78,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.selfService(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -88,7 +88,7 @@ const actions = {
   },
   createSelfService: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createSelfService(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -98,7 +98,7 @@ const actions = {
   },
   updateSelfService: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateSelfService(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -108,7 +108,7 @@ const actions = {
   },
   deleteSelfService: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteSelfService(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {

From 45cac6aeb76e43d3ab143899035376eaac3afbef Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 12:27:25 -0400
Subject: [PATCH 45/72] add advanced search to switches

---
 .../_components/NetworkDevicesTabs.vue        |   8 +-
 .../_components/SwitchesList.vue              | 101 ------
 .../src/views/Configuration/switches/_api.js  |  36 +-
 .../switches/_components/TheSearch.vue        | 327 ++++++++++++++++++
 .../switches/_composables/useCollection.js    |  89 +++++
 .../views/Configuration/switches/_router.js   |   1 +
 .../views/Configuration/switches/_store.js    |  18 +-
 7 files changed, 451 insertions(+), 129 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/SwitchesList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/views/Configuration/_components/NetworkDevicesTabs.vue b/html/pfappserver/root/src/views/Configuration/_components/NetworkDevicesTabs.vue
index d7a2e8bb869d..54d964c0cbd2 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/NetworkDevicesTabs.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/NetworkDevicesTabs.vue
@@ -6,9 +6,9 @@
         <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_network_devices_definition_switches_conf" />
       </h4>
     </b-card-header>
-    <b-tabs ref="tabs" v-model="tabIndex" card>
+    <b-tabs ref="tabs" v-model="tabIndex" card lazy>
       <b-tab :title="$t('Switches')" @click="changeTab('switches')" no-body>
-        <switches-list storeName="$_switches" />
+        <switches-search storeName="$_switches" />
       </b-tab>
       <b-tab :title="$t('Switch Groups')" @click="changeTab('switch_groups')" no-body>
         <switch-groups-list storeName="$_switch_groups" />
@@ -19,14 +19,14 @@
 
 <script>
 import pfButtonHelp from '@/components/pfButtonHelp'
-import SwitchesList from './SwitchesList'
+import SwitchesSearch from '../switches/_components/TheSearch'
 import SwitchGroupsList from './SwitchGroupsList'
 
 export default {
   name: 'network-device-tabs',
   components: {
     pfButtonHelp,
-    SwitchesList,
+    SwitchesSearch,
     SwitchGroupsList
   },
   props: {
diff --git a/html/pfappserver/root/src/views/Configuration/_components/SwitchesList.vue b/html/pfappserver/root/src/views/Configuration/_components/SwitchesList.vue
deleted file mode 100644
index 5526aca26f4c..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/SwitchesList.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-  <pf-config-list
-    ref="pfConfigList"
-    :config="config"
-  >
-    <template v-slot:buttonAdd>
-      <b-dropdown :text="$t('New Switch')" class="mr-1" variant="outline-primary" no-flip>
-        <b-dropdown-header class="text-secondary">{{ $t('To group') }}</b-dropdown-header>
-          <b-dropdown-item v-for="(switchGroup, index) in switchGroups" :key="index"
-            :to="{ name: 'newSwitch', params: { switchGroup: switchGroup.id } }">{{ switchGroup.id }}</b-dropdown-item>
-      </b-dropdown>
-      <b-button variant="outline-primary" :to="{ name: 'importSwitch' }">{{ $t('Import from CSV') }}</b-button>
-    </template>
-    <template v-slot:emptySearch="state">
-      <pf-empty-table :is-loading="state.isLoading">{{ $t('No switches found') }}</pf-empty-table>
-    </template>
-    <template v-slot:cell(type)="item">
-      <template v-if="switchTemplates.includes(item.type)">
-        <b-link :to="{ name: 'switchTemplate', params: { id: item.type } }" v-b-tooltip.hover.top.d300 :title="$t('View Switch Template')">{{ item.type }}</b-link>
-      </template>
-      <template v-else>
-        {{ item.type }}
-      </template>
-    </template>
-    <template v-slot:cell(buttons)="item">
-      <span class="float-right text-nowrap text-right">
-        <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Switch?')" @on-delete="remove(item)" reverse/>
-        <b-button size="sm" variant="outline-secondary" class="mr-1" @click.stop.prevent="invalidate(item)">{{ $t('Invalidate Cache') }}</b-button>
-        <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-      </span>
-    </template>
-  </pf-config-list>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/switch'
-
-export default {
-  name: 'switches-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      switchGroups: [], // all switches
-      switchTemplates: [], // all switch templates
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_switches/isLoading']
-    }
-  },
-  methods: {
-    init () {
-      this.$store.dispatch('$_switches/optionsBySwitchGroup').then(switchGroupOptions => {
-        const { meta: { type: { allowed: switchGroups = [] } = {} } = {} } = switchGroupOptions
-        switchGroups.map(switchGroup => {
-          const { options: switchGroupMembers } = switchGroup
-          switchGroupMembers.map(switchGroupMember => {
-              const { is_template, value } = switchGroupMember
-              if (is_template) {
-                this.switchTemplates.push(value)
-              }
-          })
-        })
-      })
-      this.$store.dispatch('$_switch_groups/all').then(switchGroups => {
-        this.switchGroups = switchGroups.sort((a, b) => a.id.localeCompare(b.id))
-      })
-    },
-    clone (item) {
-      this.$router.push({ name: 'cloneSwitch', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_switches/deleteSwitch', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    },
-    invalidate (item) {
-      this.$store.dispatch('$_switches/invalidateSwitchCache', item.id).then(() => {
-        this.$store.dispatch('notification/info', { message: this.$i18n.t('Switch <code>{id}</code> cache invalidated', item) })
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      }).catch(() => {
-        this.$store.dispatch('notification/danger', { message: this.$i18n.t('Switch <code>{id}</code> cache could not be invalidated', item) })
-      })
-    }
-  },
-  mounted () {
-    this.init()
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_api.js b/html/pfappserver/root/src/views/Configuration/switches/_api.js
index 03c878a875b9..aaa97a139fef 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/switches/_api.js
@@ -1,12 +1,12 @@
 import apiCall from '@/utils/api'
 
 export default {
-  switches: params => {
+  list: params => {
     return apiCall.get(['config', 'switches'], { params: { ...params, raw: 1 } }).then(response => {
       return response.data
     })
   },
-  switchesOptions: switchGroup => {
+  listOptions: switchGroup => {
     if (switchGroup) {
       return apiCall.options(['config', 'switches'], { params: { type: switchGroup } }).then(response => {
         return response.data
@@ -17,42 +17,48 @@ export default {
       })
     }
   },
-  switchesBulkImport: body => {
+  search: data => {
+    return apiCall.post('config/switches/search', data).then(response => {
+      return response.data
+    })
+  },
+  bulkImport: body => {
     return apiCall.post('config/switches/bulk_import', body).then(response => {
       return response.data.items
     })
   },
-  switche: id => {
+  create: data => {
+    const post = data.quiet ? 'postQuiet' : 'post'
+    return apiCall[post]('config/switches', data).then(response => {
+      return response.data
+    })
+  },
+
+  item: id => {
     return apiCall.get(['config', 'switch', id], { params: { skip_inheritance: true } }).then(response => {
       return response.data.item
     })
   },
-  switcheQuiet: id => {
+  itemQuiet: id => {
     return apiCall.getQuiet(['config', 'switch', id], { params: { skip_inheritance: true } }).then(response => {
       return response.data.item
     })
   },
-  switchOptions: id => {
+  itemOptions: id => {
     return apiCall.options(['config', 'switch', id]).then(response => {
       return response.data
     })
   },
-  createSwitch: data => {
-    const post = data.quiet ? 'postQuiet' : 'post'
-    return apiCall[post]('config/switches', data).then(response => {
-      return response.data
-    })
-  },
-  updateSwitch: data => {
+  update: data => {
     const patch = data.quiet ? 'patchQuiet' : 'patch'
     return apiCall[patch](['config', 'switch', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteSwitch: id => {
+  delete: id => {
     return apiCall.delete(['config', 'switch', id])
   },
-  invalidateSwitchCache: id => {
+  invalidateCache: id => {
     return apiCall.post(['config', 'switch', id, 'invalidate_cache'])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
new file mode 100644
index 000000000000..e6e8cdeb2d6f
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
@@ -0,0 +1,327 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('Switches') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-dropdown :text="$t('New Switch')"
+          variant="outline-primary" class="mr-1">
+          <b-dropdown-header class="text-secondary">{{ $t('To Group') }}</b-dropdown-header>
+          <b-dropdown-item v-for="(switchGroup, index) in switchGroups" :key="index"
+            :to="{ name: 'newSwitch', params: { switchGroup: switchGroup.id } }">{{ switchGroup.id }}</b-dropdown-item>
+        </b-dropdown>
+        <b-button variant="outline-primary" class="mr-1" :to="{ name: 'importSwitch' }">{{ $t('Import CSV') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(group)="{ value }">
+          <b-link :to="{ name: 'switch_group', params: { id: value } }">{{ value }}</b-link>
+        </template>
+        <template #cell(type)="{ item }">
+          <template v-if="switchTemplates.includes(item.type)">
+            <b-link :to="{ name: 'switchTemplate', params: { id: item.type } }" v-b-tooltip.hover.top.d300 :title="$t('View Switch Template')">{{ item.type }}</b-link>
+          </template>
+          <template v-else>
+            {{ item.type }}
+          </template>
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Switch?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-secondary" class="mr-1"
+              :disabled="isLoading"
+              @click.stop.prevent="onInvalidateCache(item)"
+            >{{ $t('Invalidate Cache') }}</b-button>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              :disabled="isLoading"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+import i18n from '@/utils/locale'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onInvalidateCache = item => {
+    $store.dispatch('$_switches/invalidateSwitchCache', item.id)
+      .then(() => {
+        $store.dispatch('notification/info', { message: i18n.t('Switch <code>{id}</code> cache invalidated.', item) })
+        reSearch()
+      })
+      .catch(() => {
+        $store.dispatch('notification/danger', { message: i18n.t('Switch <code>{id}</code> cache could not be invalidated.', item) })
+      })
+    }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  const switchGroups = ref([])
+  $store.dispatch('$_switch_groups/all')
+    .then(_switchGroups => {
+      switchGroups.value = _switchGroups.sort((a, b) => a.id.localeCompare(b.id))
+    })
+
+  const switchTemplates = ref([])
+  $store.dispatch('$_switches/optionsBySwitchGroup')
+    .then(switchGroupOptions => {
+      const { meta: { type: { allowed: switchGroups = [] } = {} } = {} } = switchGroupOptions
+      switchGroups.map(switchGroup => {
+        const { options: switchGroupMembers } = switchGroup
+        switchGroupMembers.map(switchGroupMember => {
+            const { is_template, value } = switchGroupMember
+            if (is_template) {
+              switchTemplates.value.push(value)
+            }
+        })
+      })
+    })
+
+  return {
+    useSearch,
+    tableRef,
+    onBulkExport,
+    onInvalidateCache,
+    onRemove,
+    ...router,
+    ...selected,
+    ...toRefs(search),
+    switchGroups,
+    switchTemplates
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
+
+
+
+
+
+<!--
+<template>
+  <pf-config-list
+    ref="pfConfigList"
+    :config="config"
+  >
+    <template v-slot:buttonAdd>
+      <b-dropdown :text="$t('New Switch')" class="mr-1" variant="outline-primary" no-flip>
+        <b-dropdown-header class="text-secondary">{{ $t('To group') }}</b-dropdown-header>
+          <b-dropdown-item v-for="(switchGroup, index) in switchGroups" :key="index"
+            :to="{ name: 'newSwitch', params: { switchGroup: switchGroup.id } }">{{ switchGroup.id }}</b-dropdown-item>
+      </b-dropdown>
+      <b-button variant="outline-primary" :to="{ name: 'importSwitch' }">{{ $t('Import from CSV') }}</b-button>
+    </template>
+    <template v-slot:emptySearch="state">
+      <pf-empty-table :is-loading="state.isLoading">{{ $t('No switches found') }}</pf-empty-table>
+    </template>
+    <template v-slot:cell(type)="item">
+      <template v-if="switchTemplates.includes(item.type)">
+        <b-link :to="{ name: 'switchTemplate', params: { id: item.type } }" v-b-tooltip.hover.top.d300 :title="$t('View Switch Template')">{{ item.type }}</b-link>
+      </template>
+      <template v-else>
+        {{ item.type }}
+      </template>
+    </template>
+    <template v-slot:cell(buttons)="item">
+      <span class="float-right text-nowrap text-right">
+        <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Switch?')" @on-delete="remove(item)" reverse/>
+        <b-button size="sm" variant="outline-secondary" class="mr-1" @click.stop.prevent="invalidate(item)">{{ $t('Invalidate Cache') }}</b-button>
+        <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
+      </span>
+    </template>
+  </pf-config-list>
+</template>
+
+<script>
+import pfButtonDelete from '@/components/pfButtonDelete'
+import pfConfigList from '@/components/pfConfigList'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import { config } from '../_config/switch'
+
+export default {
+  name: 'switches-list',
+  components: {
+    pfButtonDelete,
+    pfConfigList,
+    pfEmptyTable
+  },
+  data () {
+    return {
+      switchGroups: [], // all switches
+      switchTemplates: [], // all switch templates
+      config: config(this)
+    }
+  },
+  computed: {
+    isLoading () {
+      return this.$store.getters['$_switches/isLoading']
+    }
+  },
+  methods: {
+    init () {
+      this.$store.dispatch('$_switches/optionsBySwitchGroup').then(switchGroupOptions => {
+        const { meta: { type: { allowed: switchGroups = [] } = {} } = {} } = switchGroupOptions
+        switchGroups.map(switchGroup => {
+          const { options: switchGroupMembers } = switchGroup
+          switchGroupMembers.map(switchGroupMember => {
+              const { is_template, value } = switchGroupMember
+              if (is_template) {
+                this.switchTemplates.push(value)
+              }
+          })
+        })
+      })
+      this.$store.dispatch('$_switch_groups/all').then(switchGroups => {
+        this.switchGroups = switchGroups.sort((a, b) => a.id.localeCompare(b.id))
+      })
+    },
+    clone (item) {
+      this.$router.push({ name: 'cloneSwitch', params: { id: item.id } })
+    },
+    remove (item) {
+      this.$store.dispatch('$_switches/deleteSwitch', item.id).then(() => {
+        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
+        refreshList() // soft reload
+      })
+    },
+    invalidate (item) {
+      this.$store.dispatch('$_switches/invalidateSwitchCache', item.id).then(() => {
+        this.$store.dispatch('notification/info', { message: this.$i18n.t('Switch <code>{id}</code> cache invalidated', item) })
+        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
+        refreshList() // soft reload
+      }).catch(() => {
+        this.$store.dispatch('notification/danger', { message: this.$i18n.t('Switch <code>{id}</code> cache could not be invalidated', item) })
+      })
+    }
+  },
+  mounted () {
+    this.init()
+  }
+}
+</script>
+-->
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js
index 200841192e08..51bf39d154bf 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js
@@ -39,3 +39,92 @@ export const useItemTitle = (props) => {
 export { useRouter } from '../_router'
 
 export { useStore } from '../_store'
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('switches', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'description',
+      label: 'Description', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'group',
+      label: 'Group', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true,
+      formatter: value => (value || 'default') // fallback to 'default' group
+    },
+    {
+      key: 'type',
+      label: 'Type', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'mode',
+      label: 'Mode', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'description',
+      text: i18n.t('Description'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'mode',
+      text: i18n.t('Mode'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'type',
+      text: i18n.t('Type'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'not_equals', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_router.js b/html/pfappserver/root/src/views/Configuration/switches/_router.js
index dca57715a876..41167e2d1fe7 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/switches/_router.js
@@ -14,6 +14,7 @@ export const useRouter = $router => {
       .push({ name: 'switch', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneSwitch', params }),
+    goToNew: params => $router.push({ name: 'newSwitch', params })
   }
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_store.js b/html/pfappserver/root/src/views/Configuration/switches/_store.js
index 47215611959c..0b191c7dfc40 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/switches/_store.js
@@ -45,13 +45,13 @@ const actions = {
       sort: 'id',
       fields: ['id', 'description', 'class'].join(',')
     }
-    return api.switches(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   optionsById: ({ commit }, id) => {
     commit('ITEM_REQUEST')
-    return api.switchOptions(id).then(response => {
+    return api.itemOptions(id).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -61,7 +61,7 @@ const actions = {
   },
   optionsBySwitchGroup: ({ commit }, switchGroup) => {
     commit('ITEM_REQUEST')
-    return api.switchesOptions(switchGroup).then(response => {
+    return api.listOptions(switchGroup).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -74,7 +74,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.switche(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(state.cache[id]))
     }).catch((err) => {
@@ -84,7 +84,7 @@ const actions = {
   },
   createSwitch: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createSwitch(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -94,7 +94,7 @@ const actions = {
   },
   updateSwitch: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateSwitch(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -104,7 +104,7 @@ const actions = {
   },
   deleteSwitch: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteSwitch(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {
@@ -114,7 +114,7 @@ const actions = {
   },
   invalidateSwitchCache: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.invalidateSwitchCache(data).then(response => {
+    return api.invalidateCache(data).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch(err => {
@@ -124,7 +124,7 @@ const actions = {
   },
   bulkImport: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.switchesBulkImport(data).then(response => {
+    return api.bulkImport(data).then(response => {
       commit('ITEM_BULK_SUCCESS', response)
       return response
     }).catch(err => {

From 808b18a4f47aeabff75a492ab3e88f9e611e7dea Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 12:29:01 -0400
Subject: [PATCH 46/72] cleanup

---
 .../switches/_components/TheSearch.vue        | 108 ------------------
 1 file changed, 108 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
index e6e8cdeb2d6f..fe778910fc34 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
@@ -217,111 +217,3 @@ export default {
   setup
 }
 </script>
-
-
-
-
-
-<!--
-<template>
-  <pf-config-list
-    ref="pfConfigList"
-    :config="config"
-  >
-    <template v-slot:buttonAdd>
-      <b-dropdown :text="$t('New Switch')" class="mr-1" variant="outline-primary" no-flip>
-        <b-dropdown-header class="text-secondary">{{ $t('To group') }}</b-dropdown-header>
-          <b-dropdown-item v-for="(switchGroup, index) in switchGroups" :key="index"
-            :to="{ name: 'newSwitch', params: { switchGroup: switchGroup.id } }">{{ switchGroup.id }}</b-dropdown-item>
-      </b-dropdown>
-      <b-button variant="outline-primary" :to="{ name: 'importSwitch' }">{{ $t('Import from CSV') }}</b-button>
-    </template>
-    <template v-slot:emptySearch="state">
-      <pf-empty-table :is-loading="state.isLoading">{{ $t('No switches found') }}</pf-empty-table>
-    </template>
-    <template v-slot:cell(type)="item">
-      <template v-if="switchTemplates.includes(item.type)">
-        <b-link :to="{ name: 'switchTemplate', params: { id: item.type } }" v-b-tooltip.hover.top.d300 :title="$t('View Switch Template')">{{ item.type }}</b-link>
-      </template>
-      <template v-else>
-        {{ item.type }}
-      </template>
-    </template>
-    <template v-slot:cell(buttons)="item">
-      <span class="float-right text-nowrap text-right">
-        <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Switch?')" @on-delete="remove(item)" reverse/>
-        <b-button size="sm" variant="outline-secondary" class="mr-1" @click.stop.prevent="invalidate(item)">{{ $t('Invalidate Cache') }}</b-button>
-        <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-      </span>
-    </template>
-  </pf-config-list>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/switch'
-
-export default {
-  name: 'switches-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      switchGroups: [], // all switches
-      switchTemplates: [], // all switch templates
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_switches/isLoading']
-    }
-  },
-  methods: {
-    init () {
-      this.$store.dispatch('$_switches/optionsBySwitchGroup').then(switchGroupOptions => {
-        const { meta: { type: { allowed: switchGroups = [] } = {} } = {} } = switchGroupOptions
-        switchGroups.map(switchGroup => {
-          const { options: switchGroupMembers } = switchGroup
-          switchGroupMembers.map(switchGroupMember => {
-              const { is_template, value } = switchGroupMember
-              if (is_template) {
-                this.switchTemplates.push(value)
-              }
-          })
-        })
-      })
-      this.$store.dispatch('$_switch_groups/all').then(switchGroups => {
-        this.switchGroups = switchGroups.sort((a, b) => a.id.localeCompare(b.id))
-      })
-    },
-    clone (item) {
-      this.$router.push({ name: 'cloneSwitch', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_switches/deleteSwitch', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    },
-    invalidate (item) {
-      this.$store.dispatch('$_switches/invalidateSwitchCache', item.id).then(() => {
-        this.$store.dispatch('notification/info', { message: this.$i18n.t('Switch <code>{id}</code> cache invalidated', item) })
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      }).catch(() => {
-        this.$store.dispatch('notification/danger', { message: this.$i18n.t('Switch <code>{id}</code> cache could not be invalidated', item) })
-      })
-    }
-  },
-  mounted () {
-    this.init()
-  }
-}
-</script>
--->
\ No newline at end of file

From 7d63d9af74d12c8c3f9ee20c812640c526672c2d Mon Sep 17 00:00:00 2001
From: James Rouzier <jrouzier@inverse.ca>
Date: Wed, 16 Jun 2021 12:29:48 -0400
Subject: [PATCH 47/72] Update the description field of groups

---
 html/pfappserver/lib/pfappserver/Form/Config/Switch.pm | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/html/pfappserver/lib/pfappserver/Form/Config/Switch.pm b/html/pfappserver/lib/pfappserver/Form/Config/Switch.pm
index d44c544ea92f..7f01e576cffa 100644
--- a/html/pfappserver/lib/pfappserver/Form/Config/Switch.pm
+++ b/html/pfappserver/lib/pfappserver/Form/Config/Switch.pm
@@ -691,7 +691,7 @@ sub options_groups {
     push @couples, ('' => 'None');
     my $cs = pf::ConfigStore::SwitchGroup->new;
     my @groups = @{$cs->readAll("id")};
-    push @couples, map { $_->{id} => $_->{description} } @groups;
+    push @couples, map { $_->{id} => "$_->{id} - ($_->{description})" } @groups;
 
     return @couples;
 }

From 23391dfd8f0e21de0c846b00a0ef4c007f410cc3 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 13:14:00 -0400
Subject: [PATCH 48/72] add advanced search to switch groups

---
 .../_components/NetworkDevicesTabs.vue        |   8 +-
 .../_components/SwitchGroupsList.vue          |  56 ----
 .../views/Configuration/switchGroups/_api.js  |  30 ++-
 .../switchGroups/_components/TheSearch.vue    | 245 ++++++++++++++++++
 .../_composables/useCollection.js             |  81 ++++++
 .../Configuration/switchGroups/_router.js     |   1 +
 .../Configuration/switchGroups/_store.js      |  18 +-
 7 files changed, 358 insertions(+), 81 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/SwitchGroupsList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/views/Configuration/_components/NetworkDevicesTabs.vue b/html/pfappserver/root/src/views/Configuration/_components/NetworkDevicesTabs.vue
index 54d964c0cbd2..51eb7de27a6d 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/NetworkDevicesTabs.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/NetworkDevicesTabs.vue
@@ -8,10 +8,10 @@
     </b-card-header>
     <b-tabs ref="tabs" v-model="tabIndex" card lazy>
       <b-tab :title="$t('Switches')" @click="changeTab('switches')" no-body>
-        <switches-search storeName="$_switches" />
+        <switches-search />
       </b-tab>
       <b-tab :title="$t('Switch Groups')" @click="changeTab('switch_groups')" no-body>
-        <switch-groups-list storeName="$_switch_groups" />
+        <switch-groups-search />
       </b-tab>
     </b-tabs>
   </b-card>
@@ -20,14 +20,14 @@
 <script>
 import pfButtonHelp from '@/components/pfButtonHelp'
 import SwitchesSearch from '../switches/_components/TheSearch'
-import SwitchGroupsList from './SwitchGroupsList'
+import SwitchGroupsSearch from '../switchGroups/_components/TheSearch'
 
 export default {
   name: 'network-device-tabs',
   components: {
     pfButtonHelp,
     SwitchesSearch,
-    SwitchGroupsList
+    SwitchGroupsSearch
   },
   props: {
     tab: {
diff --git a/html/pfappserver/root/src/views/Configuration/_components/SwitchGroupsList.vue b/html/pfappserver/root/src/views/Configuration/_components/SwitchGroupsList.vue
deleted file mode 100644
index 5ea78fc3c7cc..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/SwitchGroupsList.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <pf-config-list
-    ref="pfConfigList"
-    :config="config"
-  >
-    <template v-slot:buttonAdd>
-      <b-button variant="outline-primary" :to="{ name: 'newSwitchGroup' }">{{ $t('New Switch Group') }}</b-button>
-    </template>
-    <template v-slot:emptySearch="state">
-      <pf-empty-table :is-loading="state.isLoading">{{ $t('No switch groups found') }}</pf-empty-table>
-    </template>
-    <template v-slot:cell(buttons)="item">
-      <span class="float-right text-nowrap">
-        <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Switch Group?')" @on-delete="remove(item)" reverse/>
-        <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-      </span>
-    </template>
-  </pf-config-list>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/switchGroup'
-
-export default {
-  name: 'switch-groups-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_switch_groups/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneSwitchGroup', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_switch_groups/deleteSwitchGroup', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_api.js b/html/pfappserver/root/src/views/Configuration/switchGroups/_api.js
index a2bb87ad6b0c..b088e5bac7a4 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_api.js
@@ -1,42 +1,48 @@
 import apiCall from '@/utils/api'
 
 export default {
-  switchGroups: params => {
+  list: params => {
     return apiCall.get(['config', 'switch_groups'], { params: { ...params, raw: 1 } }).then(response => {
       return response.data
     })
   },
-  switchGroupsOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/switch_groups').then(response => {
       return response.data
     })
   },
-  switchGroup: id => {
+  search: data => {
+    return apiCall.post('config/switch_groups/search', data).then(response => {
+      return response.data
+    })
+  },
+  create: data => {
+    return apiCall.post('config/switch_groups', data).then(response => {
+      return response.data
+    })
+  },
+
+  item: id => {
     return apiCall.get(['config', 'switch_group', id], { params: { skip_inheritance: true } }).then(response => {
       return response.data.item
     })
   },
-  switchGroupMembers: id => {
+  itemMembers: id => {
     return apiCall.get(['config', 'switch_group', id, 'members']).then(response => {
       return response.data.items
     })
   },
-  switchGroupOptions: id => {
+  itemOptions: id => {
     return apiCall.options(['config', 'switch_group', id]).then(response => {
       return response.data
     })
   },
-  createSwitchGroup: data => {
-    return apiCall.post('config/switch_groups', data).then(response => {
-      return response.data
-    })
-  },
-  updateSwitchGroup: data => {
+  update: data => {
     return apiCall.patch(['config', 'switch_group', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteSwitchGroup: id => {
+  delete: id => {
     return apiCall.delete(['config', 'switch_group', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
new file mode 100644
index 000000000000..bc695376dbb4
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
@@ -0,0 +1,245 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('Switch Groups') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New Switch Group') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(type)="{ item }">
+          <template v-if="switchTemplates.includes(item.type)">
+            <b-link :to="{ name: 'switchTemplate', params: { id: item.type } }" v-b-tooltip.hover.top.d300 :title="$t('View Switch Template')">{{ item.type }}</b-link>
+          </template>
+          <template v-else>
+            {{ item.type }}
+          </template>
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Switch Group?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              :disabled="isLoading"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  const switchTemplates = ref([])
+  $store.dispatch('$_switches/optionsBySwitchGroup')
+    .then(switchGroupOptions => {
+      const { meta: { type: { allowed: switchGroups = [] } = {} } = {} } = switchGroupOptions
+      switchGroups.map(switchGroup => {
+        const { options: switchGroupMembers } = switchGroup
+        switchGroupMembers.map(switchGroupMember => {
+            const { is_template, value } = switchGroupMember
+            if (is_template) {
+              switchTemplates.value.push(value)
+            }
+        })
+      })
+    })
+
+  return {
+    useSearch,
+    tableRef,
+    onBulkExport,
+    onRemove,
+    ...router,
+    ...selected,
+    ...toRefs(search),
+    switchTemplates
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
+
+<!--
+
+<template>
+  <pf-config-list
+    ref="pfConfigList"
+    :config="config"
+  >
+    <template v-slot:buttonAdd>
+      <b-button variant="outline-primary" :to="{ name: 'newSwitchGroup' }">{{ $t('New Switch Group') }}</b-button>
+    </template>
+    <template v-slot:emptySearch="state">
+      <pf-empty-table :is-loading="state.isLoading">{{ $t('No switch groups found') }}</pf-empty-table>
+    </template>
+    <template v-slot:cell(buttons)="item">
+      <span class="float-right text-nowrap">
+        <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Switch Group?')" @on-delete="remove(item)" reverse/>
+        <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
+      </span>
+    </template>
+  </pf-config-list>
+</template>
+
+<script>
+import pfButtonDelete from '@/components/pfButtonDelete'
+import pfConfigList from '@/components/pfConfigList'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import { config } from '../_config/switchGroup'
+
+export default {
+  name: 'switch-groups-list',
+  components: {
+    pfButtonDelete,
+    pfConfigList,
+    pfEmptyTable
+  },
+  data () {
+    return {
+      config: config(this)
+    }
+  },
+  computed: {
+    isLoading () {
+      return this.$store.getters['$_switch_groups/isLoading']
+    }
+  },
+  methods: {
+    clone (item) {
+      this.$router.push({ name: 'cloneSwitchGroup', params: { id: item.id } })
+    },
+    remove (item) {
+      this.$store.dispatch('$_switch_groups/deleteSwitchGroup', item.id).then(() => {
+        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
+        refreshList() // soft reload
+      })
+    }
+  }
+}
+</script>
+-->
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js
index b379b10227a9..950029df41b5 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js
@@ -40,3 +40,84 @@ export const useItemTitle = (props) => {
 export { useRouter } from '../_router'
 
 export { useStore } from '../_store'
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('switchGroups', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'description',
+      label: 'Description', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'type',
+      label: 'Type', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'mode',
+      label: 'Mode', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'description',
+      text: i18n.t('Description'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'mode',
+      text: i18n.t('Mode'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'type',
+      text: i18n.t('Type'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'not_equals', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_router.js b/html/pfappserver/root/src/views/Configuration/switchGroups/_router.js
index 5cb2386d7ba4..b8bc44d99a1d 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_router.js
@@ -13,6 +13,7 @@ export const useRouter = $router => {
       .push({ name: 'switch_group', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneSwitchGroup', params }),
+    goToNew: params => $router.push({ name: 'newSwitchGroup', params })
   }
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_store.js b/html/pfappserver/root/src/views/Configuration/switchGroups/_store.js
index 19f98b357797..e2c1dd908239 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_store.js
@@ -46,14 +46,14 @@ const actions = {
       fields: ['id', 'description'].join(','),
       limit: 1000
     }
-    return api.switchGroups(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.switchGroupOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -61,7 +61,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.switchGroupsOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -75,9 +75,9 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.switchGroup(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
-      api.switchGroupMembers(id).then(members => { // Fetch members
+      api.itemMembers(id).then(members => { // Fetch members
         commit('ITEM_UPDATED', { id, prop: 'members', data: members })
       })
       return JSON.parse(JSON.stringify(state.cache[id]))
@@ -88,7 +88,7 @@ const actions = {
   },
   getSwitchGroupMembers: ({ state, commit }, id) => {
     commit('ITEM_REQUEST')
-    return api.switchGroupMembers(id).then(members => {
+    return api.itemMembers(id).then(members => {
       commit('ITEM_UPDATED', { id, prop: 'members', data: members })
       return state.cache[id].members
     }).catch(err => {
@@ -98,7 +98,7 @@ const actions = {
   },
   createSwitchGroup: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createSwitchGroup(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -108,7 +108,7 @@ const actions = {
   },
   updateSwitchGroup: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateSwitchGroup(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -118,7 +118,7 @@ const actions = {
   },
   deleteSwitchGroup: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteSwitchGroup(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {

From fd94c890a9c0cb4efa107af4457f7c02e96ef618 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 13:24:47 -0400
Subject: [PATCH 49/72] add advanced search to switch templates

---
 .../_components/SwitchTemplatesList.vue       |  63 -------
 .../Configuration/switchTemplates/_api.js     |  22 ++-
 .../switchTemplates/_components/TheSearch.vue | 161 ++++++++++++++++++
 .../_composables/useCollection.js             |  63 +++++++
 .../Configuration/switchTemplates/_router.js  |   5 +-
 .../Configuration/switchTemplates/_store.js   |  12 +-
 6 files changed, 247 insertions(+), 79 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/SwitchTemplatesList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/views/Configuration/_components/SwitchTemplatesList.vue b/html/pfappserver/root/src/views/Configuration/_components/SwitchTemplatesList.vue
deleted file mode 100644
index 8da52cab1f38..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/SwitchTemplatesList.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0" v-t="'Switch Templates'"></h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newSwitchTemplate' }">{{ $t('New Switch Template') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No switch templates found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Switch Template?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/switchTemplate'
-
-export default {
-  name: 'switch-templates-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this) // ../_config/switchTemplate
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_switch_templates/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneSwitchTemplate', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_switch_templates/deleteSwitchTemplate', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_api.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_api.js
index de3df18cc356..d8643857bb6d 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_api.js
@@ -1,32 +1,38 @@
 import apiCall from '@/utils/api'
 
 export default {
-  switchTemplates: params => {
+  list: params => {
     return apiCall.get('config/template_switches', { params }).then(response => {
       return response.data
     })
   },
-  switchTemplatesOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/template_switches').then(response => {
       return response.data
     })
   },
-  switchTemplate: id => {
-    return apiCall.get(['config', 'template_switch', id]).then(response => {
-      return response.data.item
+  search: data => {
+    return apiCall.post('config/template_switches/search', data).then(response => {
+      return response.data
     })
   },
-  createSwitchTemplate: data => {
+  create: data => {
     return apiCall.post('config/template_switches', data).then(response => {
       return response.data
     })
   },
-  updateSwitchTemplate: data => {
+
+  item: id => {
+    return apiCall.get(['config', 'template_switch', id]).then(response => {
+      return response.data.item
+    })
+  },
+  update: data => {
     return apiCall.patch(['config', 'template_switch', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteSwitchTemplate: id => {
+  delete: id => {
     return apiCall.delete(['config', 'template_switch', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue
new file mode 100644
index 000000000000..bad13e9597aa
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue
@@ -0,0 +1,161 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('Switch Templates') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New Switch Template') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Switch Template?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              :disabled="isLoading"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onBulkExport,
+    onRemove,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js
index 018c4ab3f8f3..1852dcb657a5 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js
@@ -22,3 +22,66 @@ export const useItemTitle = (props) => {
 export { useRouter } from '../_router'
 
 export { useStore } from '../_store'
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('switchTemplates', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'description',
+      label: 'Description', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'radiusDisconnect',
+      label: 'RADIUS Disconnect', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      key: 'description',
+      label: 'Description', // i18n defer
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'not_equals', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_router.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_router.js
index a268edc975f4..bd0aef3c92a1 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_router.js
@@ -1,7 +1,7 @@
 import store from '@/store'
 import StoreModule from './_store'
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/SwitchTemplatesList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const useRouter = $router => {
@@ -11,6 +11,7 @@ export const useRouter = $router => {
       .push({ name: 'switchTemplate', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneSwitchTemplate', params }),
+    goToNew: params => $router.push({ name: 'newSwitchTemplate', params })
   }
 }
 
@@ -24,7 +25,7 @@ export default [
   {
     path: 'switch_templates',
     name: 'switchTemplates',
-    component: TheList,
+    component: TheSearch,
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_store.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_store.js
index bb44fb91d89e..0787cc26dacc 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_store.js
@@ -49,13 +49,13 @@ const actions = {
       sort: 'id',
       fields: ['id'].join(',')
     }
-    return api.switchTemplates(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   options: ({ commit }) => {
     commit('ITEM_REQUEST')
-    return api.switchTemplatesOptions().then(response => {
+    return api.listOptions().then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -68,7 +68,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.switchTemplate(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -78,7 +78,7 @@ const actions = {
   },
   createSwitchTemplate: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createSwitchTemplate(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -88,7 +88,7 @@ const actions = {
   },
   updateSwitchTemplate: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateSwitchTemplate(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -98,7 +98,7 @@ const actions = {
   },
   deleteSwitchTemplate: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteSwitchTemplate(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {

From 12fc4a56d69aa2a3ab757280e1e63310fe04e29d Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 13:39:59 -0400
Subject: [PATCH 50/72] add advanced search to syslog forwarders

---
 .../_components/SyslogForwardersList.vue      |  67 -----
 .../Configuration/syslogForwarders/_api.js    |  28 ++-
 .../_components/TheSearch.vue                 | 233 ++++++++++++++++++
 .../_composables/useCollection.js             |  58 +++++
 .../Configuration/syslogForwarders/_router.js |   5 +-
 .../Configuration/syslogForwarders/_store.js  |  14 +-
 6 files changed, 318 insertions(+), 87 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/SyslogForwardersList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/views/Configuration/_components/SyslogForwardersList.vue b/html/pfappserver/root/src/views/Configuration/_components/SyslogForwardersList.vue
deleted file mode 100644
index 68a32c0a6a4a..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/SyslogForwardersList.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0" v-t="'Syslog Entries'"></h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newSyslogForwarder', params: { syslogForwarderType: 'server' } }">{{ $t('New Syslog Entry') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No syslog entries found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Syslog Entry?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-      <template v-slot:cell(status)="item">
-        <icon name="circle" :class="{ 'text-success': item.status === 'enabled', 'text-danger': item.status === 'disabled' }"
-          v-b-tooltip.hover.left.d300 :title="$t(item.status)"></icon>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/syslogForwarder'
-
-export default {
-  name: 'syslog-forwarders-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this) // ../_config/syslogForwarder
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_syslog_forwarders/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneSyslogForwarder', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_syslog_forwarders/deleteSyslogForwarder', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_api.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_api.js
index 4379417cd6c8..b8d0e4e5f881 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_api.js
@@ -1,37 +1,43 @@
 import apiCall from '@/utils/api'
 
 export default {
-  syslogForwarders: params => {
+  list: params => {
     return apiCall.get('config/syslog_forwarders', { params }).then(response => {
       return response.data
     })
   },
-  syslogForwardersOptions: syslogForwarderType => {
+  listOptions: syslogForwarderType => {
     return apiCall.options(['config', 'syslog_forwarders'], { params: { type: syslogForwarderType } }).then(response => {
       return response.data
     })
   },
-  syslogForwarder: id => {
-    return apiCall.get(['config', 'syslog_forwarder', id]).then(response => {
-      return response.data.item
+  search: data => {
+    return apiCall.post('config/syslog_forwarders/search', data).then(response => {
+      return response.data
     })
   },
-  syslogForwarderOptions: id => {
-    return apiCall.options(['config', 'syslog_forwarder', id]).then(response => {
+  create: data => {
+    return apiCall.post('config/syslog_forwarders', data).then(response => {
       return response.data
     })
   },
-  createSyslogForwarder: data => {
-    return apiCall.post('config/syslog_forwarders', data).then(response => {
+
+  item: id => {
+    return apiCall.get(['config', 'syslog_forwarder', id]).then(response => {
+      return response.data.item
+    })
+  },
+  itemOptions: id => {
+    return apiCall.options(['config', 'syslog_forwarder', id]).then(response => {
       return response.data
     })
   },
-  updateSyslogForwarder: data => {
+  update: data => {
     return apiCall.patch(['config', 'syslog_forwarder', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteSyslogForwarder: id => {
+  delete: id => {
     return apiCall.delete(['config', 'syslog_forwarder', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
new file mode 100644
index 000000000000..e540824dbff1
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
@@ -0,0 +1,233 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('Syslog Entries') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew({ syslogForwarderType: 'server' })">{{ $t('New Syslog Entry') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Syslog Entry?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              :disabled="isLoading"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onBulkExport,
+    onRemove,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
+
+
+
+<!--
+<template>
+  <b-card no-body>
+    <pf-config-list
+      ref="pfConfigList"
+      :config="config"
+    >
+      <template v-slot:pageHeader>
+        <b-card-header>
+          <h4 class="mb-0" v-t="'Syslog Entries'"></h4>
+        </b-card-header>
+      </template>
+      <template v-slot:buttonAdd>
+        <b-button variant="outline-primary" :to="{ name: 'newSyslogForwarder', params: { syslogForwarderType: 'server' } }">{{ $t('New Syslog Entry') }}</b-button>
+      </template>
+      <template v-slot:emptySearch="state">
+        <pf-empty-table :is-loading="state.isLoading">{{ $t('No syslog entries found') }}</pf-empty-table>
+      </template>
+      <template v-slot:cell(buttons)="item">
+        <span class="float-right text-nowrap">
+          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Syslog Entry?')" @on-delete="remove(item)" reverse/>
+          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
+        </span>
+      </template>
+      <template v-slot:cell(status)="item">
+        <icon name="circle" :class="{ 'text-success': item.status === 'enabled', 'text-danger': item.status === 'disabled' }"
+          v-b-tooltip.hover.left.d300 :title="$t(item.status)"></icon>
+      </template>
+    </pf-config-list>
+  </b-card>
+</template>
+
+<script>
+import pfButtonDelete from '@/components/pfButtonDelete'
+import pfConfigList from '@/components/pfConfigList'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import { config } from '../_config/syslogForwarder'
+
+export default {
+  name: 'syslog-forwarders-list',
+  components: {
+    pfButtonDelete,
+    pfConfigList,
+    pfEmptyTable
+  },
+  data () {
+    return {
+      config: config(this) // ../_config/syslogForwarder
+    }
+  },
+  computed: {
+    isLoading () {
+      return this.$store.getters['$_syslog_forwarders/isLoading']
+    }
+  },
+  methods: {
+    clone (item) {
+      this.$router.push({ name: 'cloneSyslogForwarder', params: { id: item.id } })
+    },
+    remove (item) {
+      this.$store.dispatch('$_syslog_forwarders/deleteSyslogForwarder', item.id).then(() => {
+        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
+        refreshList() // soft reload
+      })
+    }
+  }
+}
+</script>
+-->
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
index 1497d9730314..e7be814424a7 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
@@ -46,3 +46,61 @@ export const useItemTitleBadge = (props, context, form) => {
 export { useRouter } from '../_router'
 
 export { useStore } from '../_store'
+
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('syslogForwarders', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Syslog Name', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'type',
+      label: 'Type', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Syslog Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'type',
+      text: i18n.t('Type'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'not_equals', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_router.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_router.js
index b889ac8f21ce..3f457c5a32fa 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_router.js
@@ -1,7 +1,7 @@
 import store from '@/store'
 import StoreModule from './_store'
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/SyslogForwardersList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const useRouter = $router => {
@@ -11,6 +11,7 @@ export const useRouter = $router => {
       .push({ name: 'syslogForwarder', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneSyslogForwarder', params }),
+    goToNew: params => $router.push({ name: 'newSyslogForwarder', params })
   }
 }
 
@@ -24,7 +25,7 @@ export default [
   {
     path: 'syslog',
     name: 'syslogForwarders',
-    component: TheList,
+    component: TheSearch,
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_store.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_store.js
index 6c0209781510..21ce49d187f4 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_store.js
@@ -49,13 +49,13 @@ const actions = {
       sort: 'id',
       fields: ['id', 'type'].join(',')
     }
-    return api.syslogForwarders(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   optionsById: ({ commit }, id) => {
     commit('ITEM_REQUEST')
-    return api.syslogForwarderOptions(id).then(response => {
+    return api.itemOptions(id).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -65,7 +65,7 @@ const actions = {
   },
   optionsBySyslogForwarderType: ({ commit }, syslogForwarderType) => {
     commit('ITEM_REQUEST')
-    return api.syslogForwardersOptions(syslogForwarderType).then(response => {
+    return api.listOptions(syslogForwarderType).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -78,7 +78,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.syslogForwarder(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -88,7 +88,7 @@ const actions = {
   },
   createSyslogForwarder: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createSyslogForwarder(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -98,7 +98,7 @@ const actions = {
   },
   updateSyslogForwarder: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateSyslogForwarder(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -108,7 +108,7 @@ const actions = {
   },
   deleteSyslogForwarder: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteSyslogForwarder(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {

From a5145afab784830af99cdf9ccabf10c2f88167be Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 14:11:42 -0400
Subject: [PATCH 51/72] add advanced search to syslog parsers

---
 .../_components/SyslogParsersList.vue         |  82 --------
 .../views/Configuration/syslogParsers/_api.js |  39 ++--
 .../syslogParsers/_components/TheSearch.vue   | 182 ++++++++++++++++++
 .../syslogParsers/_components/ToggleStatus.js |  30 ++-
 .../_composables/useCollection.js             |  63 ++++++
 .../Configuration/syslogParsers/_router.js    |   5 +-
 .../Configuration/syslogParsers/_store.js     |  24 +--
 .../Configuration/syslogParsers/config.js     |  17 +-
 8 files changed, 320 insertions(+), 122 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/SyslogParsersList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/views/Configuration/_components/SyslogParsersList.vue b/html/pfappserver/root/src/views/Configuration/_components/SyslogParsersList.vue
deleted file mode 100644
index bc72f6da5d8d..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/SyslogParsersList.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0" v-t="'Syslog Parsers'"></h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-dropdown :text="$t('New Syslog Parser')" variant="outline-primary">
-          <b-dropdown-item :to="{ name: 'newSyslogParser', params: { syslogParserType: 'dhcp' } }">DHCP</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newSyslogParser', params: { syslogParserType: 'fortianalyser' } }">FortiAnalyzer</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newSyslogParser', params: { syslogParserType: 'nexpose' } }">Nexpose</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newSyslogParser', params: { syslogParserType: 'regex' } }">Regex</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newSyslogParser', params: { syslogParserType: 'security_onion' } }">Security Onion</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newSyslogParser', params: { syslogParserType: 'snort' } }">Snort</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newSyslogParser', params: { syslogParserType: 'suricata' } }">Suricata</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'newSyslogParser', params: { syslogParserType: 'suricata_md5' } }">Suricata MD5</b-dropdown-item>
-        </b-dropdown>
-        <pf-button-service service="pfdetect" class="ml-1" restart start stop :disabled="isLoading"></pf-button-service>
-        <pf-button-service service="pfqueue" class="ml-1" restart start stop :disabled="isLoading"></pf-button-service>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No syslog parsers found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Syslog Parser?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-      <template v-slot:cell(status)="item">
-         <toggle-status :value="item.status" :disabled="isLoading"
-          :item="item" :searchable-store-name="$refs.pfConfigList.searchableStoreName" /> 
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonService from '@/components/pfButtonService'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/syslogParser'
-import { ToggleStatus } from '@/views/Configuration/syslogParsers/_components/'
-
-export default {
-  name: 'syslog-parsers-list',
-  components: {
-    pfButtonDelete,
-    pfButtonService,
-    pfConfigList,
-    pfEmptyTable,
-    ToggleStatus
-  },
-  data () {
-    return {
-      config: config(this) // ../_config/syslogParser
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_syslog_parsers/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneSyslogParser', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_syslog_parsers/deleteSyslogParser', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_api.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_api.js
index 0c8e52bb7478..184f7b302b8b 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_api.js
@@ -1,42 +1,49 @@
 import apiCall from '@/utils/api'
 
 export default {
-  syslogParsers: params => {
+  list: params => {
     return apiCall.get('config/syslog_parsers', { params }).then(response => {
       return response.data
     })
   },
-  syslogParsersOptions: syslogParserType => {
+  listOptions: syslogParserType => {
     return apiCall.options(['config', 'syslog_parsers'], { params: { type: syslogParserType } }).then(response => {
       return response.data
     })
   },
-  syslogParser: id => {
-    return apiCall.get(['config', 'syslog_parser', id]).then(response => {
-      return response.data.item
-    })
-  },
-  syslogParserOptions: id => {
-    return apiCall.options(['config', 'syslog_parser', id]).then(response => {
+  search: data => {
+    return apiCall.post('config/syslog_parsers/search', data).then(response => {
       return response.data
     })
   },
-  createSyslogParser: data => {
+  create: data => {
     return apiCall.post('config/syslog_parsers', data).then(response => {
       return response.data
     })
   },
-  updateSyslogParser: data => {
-    return apiCall.patch(['config', 'syslog_parser', data.id], data).then(response => {
+  dryRunItem: data => {
+    return apiCall.post('config/syslog_parsers/dry_run', data).then(response => {
       return response.data
     })
   },
-  deleteSyslogParser: id => {
-    return apiCall.delete(['config', 'syslog_parser', id])
+
+  item: id => {
+    return apiCall.get(['config', 'syslog_parser', id]).then(response => {
+      return response.data.item
+    })
   },
-  dryRunSyslogParser: data => {
-    return apiCall.post('config/syslog_parsers/dry_run', data).then(response => {
+  itemOptions: id => {
+    return apiCall.options(['config', 'syslog_parser', id]).then(response => {
       return response.data
     })
+  },
+  update: data => {
+    const patch = data.quiet ? 'patchQuiet' : 'patch'
+    return apiCall[patch](['config', 'syslog_parser', data.id], data).then(response => {
+      return response.data
+    })
+  },
+  delete: id => {
+    return apiCall.delete(['config', 'syslog_parser', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue
new file mode 100644
index 000000000000..4797e48c0f64
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue
@@ -0,0 +1,182 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('Syslog Parsers') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-dropdown :text="$t('New Syslog Parser')" variant="outline-primary">
+          <b-dropdown-item v-for="({ text, value }) in typeOptions" :key="value"
+            :to="{ name: 'newSyslogParser', params: { syslogParserType: value } }"
+          >{{ text }}</b-dropdown-item>
+        </b-dropdown>
+        <base-button-service
+          service="pfdetect" restart start stop
+          class="ml-1" />
+        <base-button-service
+          service="pfqueue" restart start stop
+          class="ml-1" />
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Syslog Parser?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+        <template #cell(status)="{ item }">
+          <toggle-status :value="item.status" :disabled="isLoading"
+            :item="item" @input="item.status = $event" />
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+import ToggleStatus from './ToggleStatus'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonService,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable,
+  ToggleStatus
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+import { typeOptions } from '../config'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search),
+    typeOptions
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/ToggleStatus.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/ToggleStatus.js
index aba3899ba34c..68cb873e6a79 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/ToggleStatus.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/ToggleStatus.js
@@ -13,26 +13,38 @@ export const props = {
       {
         value: 'disabled', label: i18n.t('Disabled'),
         color: 'var(--danger)', icon: 'times',
-        promise: (value, props) => {
-          const { item, searchableStoreName } = toRefs(props)
+        promise: (value, props, context) => {
+          const { item } = toRefs(props)
           return store.dispatch('$_syslog_parsers/disableSyslogParser', item.value)
             .then(() => {
-              // update searcahble store
-              store.dispatch(`${searchableStoreName.value}/updateItem`, { key: 'id', id: item.value.id, prop: 'status', data: 'disabled' })
+              store.dispatch('notification/info', { message: i18n.t('Syslog Parser <code>{id}</code> disabled.', item.value) })
+              context.emit('input', 'disabled')
+            })
+            .catch(err => {
+              const { response: { data: { message: errMsg } = {} } = {} } = err
+              let message = i18n.t('Syslog Parser <code>{id}</code> was not disabled.', item.value)
+              if (errMsg) message += ` (${errMsg})`
+              store.dispatch('notification/danger', { message })
             })
         }
       },
       {
         value: 'enabled', label: i18n.t('Enabled'),
         color: 'var(--success)', icon: 'check',
-        promise: (value, props) => {
-          const { item, searchableStoreName } = toRefs(props)
+        promise: (value, props, context) => {
+          const { item } = toRefs(props)
           return store.dispatch('$_syslog_parsers/enableSyslogParser', item.value)
             .then(() => {
-              // update searcahble store
-              store.dispatch(`${searchableStoreName.value}/updateItem`, { key: 'id', id: item.value.id, prop: 'status', data: 'enabled' })
+              store.dispatch('notification/info', { message: i18n.t('Syslog Parser <code>{id}</code> enabled.', item.value) })
+              context.emit('input', 'enabled')
             })
-        }
+            .catch(err => {
+              const { response: { data: { message: errMsg } = {} } = {} } = err
+              let message = i18n.t('Syslog Parser <code>{id}</code> was not enabled.', item.value)
+              if (errMsg) message += ` (${errMsg})`
+              store.dispatch('notification/danger', { message })
+            })
+      }
       }
     ])
   },
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js
index f5db129acb3d..807959d614df 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js
@@ -46,3 +46,66 @@ export const useItemTitleBadge = (props, context, form) => {
 export { useRouter } from '../_router'
 
 export { useStore } from '../_store'
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('syslogParsers', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'status',
+      label: 'Status', // i18n defer
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'id',
+      label: 'Detector', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'type',
+      label: 'Type', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Detector'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'type',
+      text: i18n.t('Type'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'not_equals', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_router.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_router.js
index d8e84e351b8c..b7c7d2b4e7f4 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_router.js
@@ -1,7 +1,7 @@
 import store from '@/store'
 import StoreModule from './_store'
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/SyslogParsersList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const useRouter = $router => {
@@ -11,6 +11,7 @@ export const useRouter = $router => {
       .push({ name: 'syslogParser', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneSyslogParser', params }),
+    goToNew: params => $router.push({ name: 'newSyslogParser', params })
   }
 }
 
@@ -24,7 +25,7 @@ export default [
   {
     path: 'pfdetect',
     name: 'syslogParsers',
-    component: TheList,
+    component: TheSearch,
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_store.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_store.js
index 03eaaec06f6e..4749ec29aab0 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_store.js
@@ -50,13 +50,13 @@ const actions = {
       sort: 'id',
       fields: ['id', 'path', 'status', 'type'].join(',')
     }
-    return api.syslogParsers(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   optionsById: ({ commit }, id) => {
     commit('ITEM_REQUEST')
-    return api.syslogParserOptions(id).then(response => {
+    return api.itemOptions(id).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -66,7 +66,7 @@ const actions = {
   },
   optionsBySyslogParserType: ({ commit }, syslogParserType) => {
     commit('ITEM_REQUEST')
-    return api.syslogParsersOptions(syslogParserType).then(response => {
+    return api.listOptions(syslogParserType).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch((err) => {
@@ -78,7 +78,7 @@ const actions = {
     if (state.cache[id])
       return state.cache[id]
     commit('ITEM_REQUEST')
-    return api.syslogParser(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return state.cache[id]
     }).catch((err) => {
@@ -88,7 +88,7 @@ const actions = {
   },
   createSyslogParser: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createSyslogParser(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -98,7 +98,7 @@ const actions = {
   },
   updateSyslogParser: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateSyslogParser(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -108,8 +108,8 @@ const actions = {
   },
   enableSyslogParser: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    const _data = { id: data.id, status: 'enabled' }
-    return api.updateSyslogParser(_data).then(response => {
+    const _data = { id: data.id, status: 'enabled', quiet: true }
+    return api.update(_data).then(response => {
       commit('ITEM_ENABLED', data)
       return response
     }).catch(err => {
@@ -119,8 +119,8 @@ const actions = {
   },
   disableSyslogParser: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    const _data = { id: data.id, status: 'disabled' }
-    return api.updateSyslogParser(_data).then(response => {
+    const _data = { id: data.id, status: 'disabled', quiet: true }
+    return api.update(_data).then(response => {
       commit('ITEM_DISABLED', data)
       return response
     }).catch(err => {
@@ -130,7 +130,7 @@ const actions = {
   },
   deleteSyslogParser: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteSyslogParser(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {
@@ -140,7 +140,7 @@ const actions = {
   },
   dryRunSyslogParser: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DRYRUN)
-    return api.dryRunSyslogParser(data).then(response => {
+    return api.dryRunItem(data).then(response => {
       commit('ITEM_SUCCESS')
       return response
     }).catch(err => {
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/config.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/config.js
index 508b66205af2..96f06a3c701c 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/config.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/config.js
@@ -1,7 +1,22 @@
 import { pfFieldType } from '@/globals/pfField'
 import i18n from '@/utils/locale'
 
-export const regexRuleActions = {
+export const types = {
+  dhcp:           i18n.t('DHCP'),
+  fortianalyser:  i18n.t('FortiAnalyzer'),
+  nexpose:        i18n.t('Nexpose'),
+  regex:          i18n.t('Regex'),
+  security_onion: i18n.t('Security Onion'),
+  snort:          i18n.t('Snort'),
+  suricata:       i18n.t('Suricata'),
+  suricata_md5:   i18n.t('Suricata MD5')
+}
+
+export const typeOptions = Object.keys(types)
+  .sort((a, b) => types[a].localeCompare(types[b]))
+  .map(key => ({ value: key, text: types[key] }))
+
+  export const regexRuleActions = {
   add_person: {
     value: 'add_person',
     text: i18n.t('Create new user account'),

From 428cdcf5203d57802d6b281c8f7a48fdb3bdbf63 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 14:12:18 -0400
Subject: [PATCH 52/72] cleanup

---
 .../switchGroups/_components/TheSearch.vue    | 60 ----------------
 .../_components/TheSearch.vue                 | 72 -------------------
 2 files changed, 132 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
index bc695376dbb4..584bcfbb15dc 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
@@ -183,63 +183,3 @@ export default {
   setup
 }
 </script>
-
-<!--
-
-<template>
-  <pf-config-list
-    ref="pfConfigList"
-    :config="config"
-  >
-    <template v-slot:buttonAdd>
-      <b-button variant="outline-primary" :to="{ name: 'newSwitchGroup' }">{{ $t('New Switch Group') }}</b-button>
-    </template>
-    <template v-slot:emptySearch="state">
-      <pf-empty-table :is-loading="state.isLoading">{{ $t('No switch groups found') }}</pf-empty-table>
-    </template>
-    <template v-slot:cell(buttons)="item">
-      <span class="float-right text-nowrap">
-        <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Switch Group?')" @on-delete="remove(item)" reverse/>
-        <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-      </span>
-    </template>
-  </pf-config-list>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/switchGroup'
-
-export default {
-  name: 'switch-groups-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this)
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_switch_groups/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneSwitchGroup', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_switch_groups/deleteSwitchGroup', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
--->
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
index e540824dbff1..15265af9cb1a 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
@@ -159,75 +159,3 @@ export default {
   setup
 }
 </script>
-
-
-
-<!--
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0" v-t="'Syslog Entries'"></h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newSyslogForwarder', params: { syslogForwarderType: 'server' } }">{{ $t('New Syslog Entry') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No syslog entries found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Syslog Entry?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-      <template v-slot:cell(status)="item">
-        <icon name="circle" :class="{ 'text-success': item.status === 'enabled', 'text-danger': item.status === 'disabled' }"
-          v-b-tooltip.hover.left.d300 :title="$t(item.status)"></icon>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/syslogForwarder'
-
-export default {
-  name: 'syslog-forwarders-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this) // ../_config/syslogForwarder
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_syslog_forwarders/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneSyslogForwarder', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_syslog_forwarders/deleteSyslogForwarder', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
--->
\ No newline at end of file

From d37498252f1ab5e093b883a510f2b75e89b734eb Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 14:48:10 -0400
Subject: [PATCH 53/72] add advanced search to traffic shaping

---
 .../_components/NetworksTabs.vue              |   6 +-
 .../_components/TrafficShapingsList.vue       |  75 -------
 .../networks/trafficShapingPolicies/_api.js   |  28 +--
 .../_components/TheSearch.vue                 | 184 ++++++++++++++++++
 .../_composables/useCollection.js             |  78 +++++++-
 .../trafficShapingPolicies/_router.js         |   3 +-
 .../networks/trafficShapingPolicies/_store.js |  14 +-
 .../_composables/useCollection.js             |   1 -
 8 files changed, 283 insertions(+), 106 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/TrafficShapingsList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/views/Configuration/_components/NetworksTabs.vue b/html/pfappserver/root/src/views/Configuration/_components/NetworksTabs.vue
index d93d1aa2b778..efd135d73b54 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/NetworksTabs.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/NetworksTabs.vue
@@ -14,7 +14,7 @@
         <inline-view />
       </b-tab>
       <b-tab :title="$t('Inline Traffic Shaping')" @click="changeTab('traffic_shapings')">
-        <traffic-shapings-list />
+        <traffic-shaping-policies-search />
       </b-tab>
       <b-tab :title="$t('Fencing')" @click="changeTab('fencing')">
         <fencing-view />
@@ -30,7 +30,7 @@
 import NetworkView from '../networks/network/_components/TheView'
 import InterfacesList from './InterfacesList'
 import InlineView from '../networks/inline/_components/TheView'
-import TrafficShapingsList from './TrafficShapingsList'
+import TrafficShapingPoliciesSearch from '../networks/trafficShapingPolicies/_components/TheSearch'
 import FencingView from '../networks/fencing/_components/TheView'
 import ParkingView from '../networks/parking/_components/TheView'
 
@@ -40,7 +40,7 @@ export default {
     NetworkView,
     InterfacesList,
     InlineView,
-    TrafficShapingsList,
+    TrafficShapingPoliciesSearch,
     FencingView,
     ParkingView
   },
diff --git a/html/pfappserver/root/src/views/Configuration/_components/TrafficShapingsList.vue b/html/pfappserver/root/src/views/Configuration/_components/TrafficShapingsList.vue
deleted file mode 100644
index 28984ab44335..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/TrafficShapingsList.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 v-t="'Inline Traffic Shaping Policy'" class="mb-0"></h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-dropdown :text="$t('New Traffic Shaping Policy')" variant="outline-primary" :disabled="roles.length === 0">
-          <b-dropdown-item v-for="role in roles" :key="role" :to="{ name: 'newTrafficShaping', params: { role: role } }">{{ role }}</b-dropdown-item>
-        </b-dropdown>
-      </template>
-      <template v-slot:emptySearch="state">
-          <pf-empty-table :is-loading="state.isLoading">{{ $t('No traffic shaping policies found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Traffic Shaping Policy?')" @on-delete="remove(item)" reverse/>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/trafficShapingPolicy'
-
-export default {
-  name: 'traffic-shappings-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this), // ../_config/trafficShapingPolicy
-      roles: []
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_roles/isLoading']
-    }
-  },
-  methods: {
-    init () {
-      this.$store.dispatch('$_roles/all').then(roles => {
-        const _roles = roles.map(role => role.id)
-        this.$store.dispatch('$_traffic_shaping_policies/all').then(policies => {
-          const _policies = policies.map(policy => policy.id)
-          this.roles = _roles.filter(role => !(_policies.includes(role)))
-        })
-      })
-    },
-    remove (item) {
-      this.$store.dispatch('$_traffic_shaping_policies/deleteTrafficShapingPolicy', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-        this.init()
-      })
-    }
-  },
-  mounted () {
-    this.init()
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_api.js b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_api.js
index 02bc1b346d2c..4f8a7a4e7248 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_api.js
@@ -1,37 +1,43 @@
 import apiCall from '@/utils/api'
 
 export default {
-  trafficShapingPolicies: params => {
+  list: params => {
     return apiCall.get('config/traffic_shaping_policies', { params }).then(response => {
       return response.data
     })
   },
-  trafficShapingPoliciesOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/traffic_shaping_policies').then(response => {
       return response.data
     })
   },
-  trafficShapingPolicy: id => {
-    return apiCall.get(['config', 'traffic_shaping_policy', id]).then(response => {
-      return response.data.item
+  search: data => {
+    return apiCall.post('config/traffic_shaping_policies/search', data).then(response => {
+      return response.data
     })
   },
-  trafficShapingPolicyOptions: id => {
-    return apiCall.options(['config', 'traffic_shaping_policy', id]).then(response => {
+  create: data => {
+    return apiCall.post('config/traffic_shaping_policies', data).then(response => {
       return response.data
     })
   },
-  createTrafficShapingPolicy: data => {
-    return apiCall.post('config/traffic_shaping_policies', data).then(response => {
+
+  item: id => {
+    return apiCall.get(['config', 'traffic_shaping_policy', id]).then(response => {
+      return response.data.item
+    })
+  },
+  itemOptions: id => {
+    return apiCall.options(['config', 'traffic_shaping_policy', id]).then(response => {
       return response.data
     })
   },
-  updateTrafficShapingPolicy: data => {
+  update: data => {
     return apiCall.patch(['config', 'traffic_shaping_policy', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteTrafficShapingPolicy: id => {
+  delete: id => {
     return apiCall.delete(['config', 'traffic_shaping_policy', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue
new file mode 100644
index 000000000000..0b9fb9a2dd75
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue
@@ -0,0 +1,184 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('Inline Traffic Shaping Policy') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-dropdown :text="$t('New Traffic Shaping Policy')"
+          :disabled="roles.length === 0"
+          variant="outline-primary" class="mr-1">
+          <b-dropdown-header class="text-secondary">{{ $t('To Role') }}</b-dropdown-header>
+          <b-dropdown-item v-for="(role, index) in roles" :key="index"
+            :to="{ name: 'newTrafficShaping', params: { role } }">{{ role }}</b-dropdown-item>
+        </b-dropdown>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(group)="{ value }">
+          <b-link :to="{ name: 'switch_group', params: { id: value } }">{{ value }}</b-link>
+        </template>
+        <template #cell(type)="{ item }">
+          <template v-if="switchTemplates.includes(item.type)">
+            <b-link :to="{ name: 'switchTemplate', params: { id: item.type } }" v-b-tooltip.hover.top.d300 :title="$t('View Switch Template')">{{ item.type }}</b-link>
+          </template>
+          <template v-else>
+            {{ item.type }}
+          </template>
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Traffic Shaping Policy?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  const roles = ref([])
+  $store.dispatch('$_roles/all')
+    .then(_roles => {
+      const __roles = _roles.map(role => role.id)
+      $store.dispatch('$_traffic_shaping_policies/all').then(policies => {
+        const _policies = policies.map(policy => policy.id)
+        roles.value = __roles.filter(role => !(_policies.includes(role)))
+      })
+    })
+
+  return {
+    useSearch,
+    tableRef,
+    onBulkExport,
+    onRemove,
+    ...router,
+    ...selected,
+    ...toRefs(search),
+    roles
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js
index 90eaeaea2c11..025ea84a134f 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js
@@ -17,20 +17,82 @@ export const useItemTitle = (props) => {
   return computed(() => {
     switch (true) {
       case !isNew.value:
-        return i18n.t('Traffic Shaping Policy <code>{id}</code>', { role: id.value })
+        return i18n.t('Traffic Shaping Policy <code>{id}</code>', { id: id.value })
       default:
         return i18n.t('New Traffic Shaping Policy')
     }
   })
 }
 
-export const useItemTitleBadge = (props) => {
-  const {
-    role
-  } = toRefs(props)
-  return role
-}
-
 export { useRouter } from '../_router'
 
 export { useStore } from '../_store'
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('trafficShapingPolicies', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'Role', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'upload',
+      label: 'Upload', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'download',
+      label: 'Download', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Role'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'upload',
+      text: i18n.t('Upload'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'download',
+      text: i18n.t('Download'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'not_equals', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_router.js b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_router.js
index d0eef9c7c58c..ebcb6c4e1bc5 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_router.js
@@ -7,7 +7,8 @@ export const useRouter = $router => {
     goToCollection: () => $router.push({ name: 'traffic_shapings' }),
     goToItem: params => $router
       .push({ name: 'traffic_shaping', params })
-      .catch(e => { if (e.name !== "NavigationDuplicated") throw e })
+      .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
+    goToNew: () => $router.push({ name: 'newTrafficShaping' })
   }
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_store.js b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_store.js
index 6ee4a5ac6707..caacf37c30c2 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_store.js
@@ -45,14 +45,14 @@ const actions = {
       sort: 'id',
       fields: ['id', 'description'].join(',')
     }
-    return api.trafficShapingPolicies(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.trafficShapingPolicyOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -60,7 +60,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.trafficShapingPoliciesOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -74,7 +74,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.trafficShapingPolicy(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -84,7 +84,7 @@ const actions = {
   },
   createTrafficShapingPolicy: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createTrafficShapingPolicy(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -94,7 +94,7 @@ const actions = {
   },
   updateTrafficShapingPolicy: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateTrafficShapingPolicy(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -104,7 +104,7 @@ const actions = {
   },
   deleteTrafficShapingPolicy: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteTrafficShapingPolicy(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
index e7be814424a7..680f83d1c6ee 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
@@ -47,7 +47,6 @@ export { useRouter } from '../_router'
 
 export { useStore } from '../_store'
 
-
 import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
 import makeSearch from '@/views/Configuration/_store/factory/search'
 import api from '../_api'

From 3f9e2702447937c3821cffe747107c13e3fd08f4 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 15:02:29 -0400
Subject: [PATCH 54/72] add advanced search to wmi rules

---
 .../Configuration/_components/ScansTabs.vue   |   6 +-
 .../_components/WmiRulesList.vue              |  72 --------
 .../src/views/Configuration/wmiRules/_api.js  |  28 +--
 .../wmiRules/_components/TheSearch.vue        | 168 ++++++++++++++++++
 .../wmiRules/_composables/useCollection.js    |  64 +++++++
 .../views/Configuration/wmiRules/_router.js   |   1 +
 .../views/Configuration/wmiRules/_store.js    |  14 +-
 7 files changed, 260 insertions(+), 93 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/WmiRulesList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/views/Configuration/_components/ScansTabs.vue b/html/pfappserver/root/src/views/Configuration/_components/ScansTabs.vue
index aac7ad4d32d1..5a6ae969d675 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/ScansTabs.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/ScansTabs.vue
@@ -8,7 +8,7 @@
         <scan-engines-search />
       </b-tab>
       <b-tab :title="$t('WMI Rules')" @click="changeTab('wmi_rules')">
-        <wmi-rules-list />
+        <wmi-rules-search />
       </b-tab>
     </b-tabs>
   </b-card>
@@ -16,13 +16,13 @@
 
 <script>
 import ScanEnginesSearch from '../scanEngines/_components/TheSearch'
-import WmiRulesList from './WmiRulesList'
+import WmiRulesSearch from '../wmiRules/_components/TheSearch'
 
 export default {
   name: 'scan-tabs',
   components: {
     ScanEnginesSearch,
-    WmiRulesList
+    WmiRulesSearch
   },
   props: {
     tab: {
diff --git a/html/pfappserver/root/src/views/Configuration/_components/WmiRulesList.vue b/html/pfappserver/root/src/views/Configuration/_components/WmiRulesList.vue
deleted file mode 100644
index c64aaa051f08..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/WmiRulesList.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0">
-            {{ $t('WMI Rules') }}
-            <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_wmi_rules_definition" />
-          </h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newWmiRule' }">{{ $t('New WMI Rule') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No WMI rules found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(on_tab)="item">
-        <icon name="circle" :class="{ 'text-success': item.on_tab === '1', 'text-danger': item.on_tab !== '1' }"
-          v-b-tooltip.hover.left.d300 :title="$t(item.on_tab)"></icon>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete WMI Rule?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonHelp from '@/components/pfButtonHelp'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/wmiRule'
-
-export default {
-  name: 'wmi-rules-list',
-  components: {
-    pfButtonDelete,
-    pfButtonHelp,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this) // ../_config/wmiRule
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_wmi_rules/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneWmiRule', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_wmi_rules/deleteWmiRule', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_api.js b/html/pfappserver/root/src/views/Configuration/wmiRules/_api.js
index a8c5dc96b0c1..6fa5f2cf0d02 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_api.js
@@ -1,37 +1,43 @@
 import apiCall from '@/utils/api'
 
 export default {
-  wmiRules: params => {
+  list: params => {
     return apiCall.get('config/wmi_rules', { params }).then(response => {
       return response.data
     })
   },
-  wmiRulesOptions: () => {
+  listOptions: () => {
     return apiCall.options('config/wmi_rules').then(response => {
       return response.data
     })
   },
-  wmiRule: id => {
-    return apiCall.get(['config', 'wmi_rule', id]).then(response => {
-      return response.data.item
+  search: data => {
+    return apiCall.post('config/wmi_rules/search', data).then(response => {
+      return response.data
     })
   },
-  wmiRuleOptions: id => {
-    return apiCall.options(['config', 'wmi_rule', id]).then(response => {
+  create: data => {
+    return apiCall.post('config/wmi_rules', data).then(response => {
       return response.data
     })
   },
-  createWmiRule: data => {
-    return apiCall.post('config/wmi_rules', data).then(response => {
+
+  item: id => {
+    return apiCall.get(['config', 'wmi_rule', id]).then(response => {
+      return response.data.item
+    })
+  },
+  itemOptions: id => {
+    return apiCall.options(['config', 'wmi_rule', id]).then(response => {
       return response.data
     })
   },
-  updateWmiRule: data => {
+  update: data => {
     return apiCall.patch(['config', 'wmi_rule', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteWmiRule: id => {
+  delete: id => {
     return apiCall.delete(['config', 'wmi_rule', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue
new file mode 100644
index 000000000000..dbb69fcb1755
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue
@@ -0,0 +1,168 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center mb-0">
+        {{ $t('WMI Rules') }}
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_wmi_rules_definition" />
+      </h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New WMI Rule') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete WMI Rule?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+        <template #cell(on_tab)="{ item }">
+          <icon name="circle"
+            :class="{ 'text-success': item.on_tab === '1', 'text-danger': item.on_tab !== '1' }"
+            v-b-tooltip.hover.left.d300 :title="$t(item.on_tab)" />
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onBulkExport,
+    onRemove,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js
index cfe06ec3d5cc..4709bfee11ec 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js
@@ -22,3 +22,67 @@ export const useItemTitle = (props) => {
 export { useRouter } from '../_router'
 
 export { useStore } from '../_store'
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('wmiRules', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'WMI Rule', // i18n defer
+      searchable: true,
+      required: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'namespace',
+      label: 'Namespace', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'on_tab',
+      label: 'On Node Tab', // i18n defer
+      sortable: true,
+      visible: true
+    },
+
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('WMI Rule'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'namespace',
+      text: i18n.t('Namespace'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'not_equals', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_router.js b/html/pfappserver/root/src/views/Configuration/wmiRules/_router.js
index 711c78d56d04..032e1a3e834d 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_router.js
@@ -11,6 +11,7 @@ export const useRouter = $router => {
       .push({ name: 'wmiRule', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneWmiRule', params }),
+    goToNew: () => $router.push({ name: 'newWmiRule' })
   }
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_store.js b/html/pfappserver/root/src/views/Configuration/wmiRules/_store.js
index 7b24bc1ffc43..baf0bd1e0dcc 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_store.js
@@ -49,14 +49,14 @@ const actions = {
       sort: 'id',
       fields: ['id'].join(',')
     }
-    return api.wmiRules(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
   options: ({ commit }, id) => {
     commit('ITEM_REQUEST')
     if (id) {
-      return api.wmiRuleOptions(id).then(response => {
+      return api.itemOptions(id).then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -64,7 +64,7 @@ const actions = {
         throw err
       })
     } else {
-      return api.wmiRulesOptions().then(response => {
+      return api.listOptions().then(response => {
         commit('ITEM_SUCCESS')
         return response
       }).catch((err) => {
@@ -78,7 +78,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.wmiRule(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -88,7 +88,7 @@ const actions = {
   },
   createWmiRule: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createWmiRule(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -98,7 +98,7 @@ const actions = {
   },
   updateWmiRule: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateWmiRule(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -108,7 +108,7 @@ const actions = {
   },
   deleteWmiRule: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteWmiRule(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {

From 44c91c4a6ca6f861d8f3631b96517b23b568dffd Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 15:16:22 -0400
Subject: [PATCH 55/72] add advanced search to wrix

---
 .../_components/WrixLocationsList.vue         |  63 -------
 .../root/src/views/Configuration/wrix/_api.js |  20 ++-
 .../wrix/_components/TheSearch.vue            | 160 ++++++++++++++++++
 .../wrix/_composables/useCollection.js        |  76 +++++++++
 .../src/views/Configuration/wrix/_router.js   |   5 +-
 .../src/views/Configuration/wrix/_store.js    |  10 +-
 6 files changed, 257 insertions(+), 77 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_components/WrixLocationsList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/views/Configuration/_components/WrixLocationsList.vue b/html/pfappserver/root/src/views/Configuration/_components/WrixLocationsList.vue
deleted file mode 100644
index c54eb4d33bb4..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_components/WrixLocationsList.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <b-card no-body>
-    <pf-config-list
-      ref="pfConfigList"
-      :config="config"
-    >
-      <template v-slot:pageHeader>
-        <b-card-header>
-          <h4 class="mb-0" v-t="'WRIX'"></h4>
-        </b-card-header>
-      </template>
-      <template v-slot:buttonAdd>
-        <b-button variant="outline-primary" :to="{ name: 'newWrixLocation' }">{{ $t('New WRIX Location') }}</b-button>
-      </template>
-      <template v-slot:emptySearch="state">
-        <pf-empty-table :is-loading="state.isLoading">{{ $t('No WRIX locations found') }}</pf-empty-table>
-      </template>
-      <template v-slot:cell(buttons)="item">
-        <span class="float-right text-nowrap">
-          <pf-button-delete size="sm" v-if="!item.not_deletable" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete WRIX Location?')" @on-delete="remove(item)" reverse/>
-          <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="clone(item)">{{ $t('Clone') }}</b-button>
-        </span>
-      </template>
-    </pf-config-list>
-  </b-card>
-</template>
-
-<script>
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfConfigList from '@/components/pfConfigList'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import { config } from '../_config/wrixLocation'
-
-export default {
-  name: 'wrix-locations-list',
-  components: {
-    pfButtonDelete,
-    pfConfigList,
-    pfEmptyTable
-  },
-  data () {
-    return {
-      config: config(this) // ../_config/wrixLocation
-    }
-  },
-  computed: {
-    isLoading () {
-      return this.$store.getters['$_wrix_locations/isLoading']
-    }
-  },
-  methods: {
-    clone (item) {
-      this.$router.push({ name: 'cloneWrixLocation', params: { id: item.id } })
-    },
-    remove (item) {
-      this.$store.dispatch('$_wrix_locations/deleteWrixLocation', item.id).then(() => {
-        const { $refs: { pfConfigList: { refreshList = () => {} } = {} } = {} } = this
-        refreshList() // soft reload
-      })
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_api.js b/html/pfappserver/root/src/views/Configuration/wrix/_api.js
index 72030c52feef..335b370d221e 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_api.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_api.js
@@ -1,27 +1,33 @@
 import apiCall from '@/utils/api'
 
 export default {
-  wrixLocations: params => {
+  list: params => {
     return apiCall.get('wrix_locations', { params }).then(response => {
       return response.data
     })
   },
-  wrixLocation: id => {
-    return apiCall.get(['wrix_location', id]).then(response => {
-      return response.data.item
+  search: data => {
+    return apiCall.post('wrix_locations/search', data).then(response => {
+      return response.data
     })
   },
-  createWrixLocation: data => {
+  create: data => {
     return apiCall.post('wrix_locations', data).then(response => {
       return response.data
     })
   },
-  updateWrixLocation: data => {
+
+  item: id => {
+    return apiCall.get(['wrix_location', id]).then(response => {
+      return response.data.item
+    })
+  },
+  update: data => {
     return apiCall.patch(['wrix_location', data.id], data).then(response => {
       return response.data
     })
   },
-  deleteWrixLocation: id => {
+  delete: id => {
     return apiCall.delete(['wrix_location', id])
   }
 }
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue
new file mode 100644
index 000000000000..96bc7962c6e8
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue
@@ -0,0 +1,160 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="mb-0">{{ $t('WRIX') }}</h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New WRIX Location') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete WRIX Location?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns
+} from '@/components/new/'
+import pfEmptyTable from '@/components/pfEmptyTable'
+
+const components = {
+  BaseButtonConfirm,
+  BaseSearch,
+  BaseSearchInputColumns,
+  pfEmptyTable
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    $store.dispatch('$_admin_roles/deleteAdminRole', id)
+      .then(() => {
+        reSearch()
+      })
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onBulkExport,
+    onRemove,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js
index 4153d5a80c9f..d037106480df 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js
@@ -22,3 +22,79 @@ export const useItemTitle = (props) => {
 export { useRouter } from '../_router'
 
 export { useStore } from '../_store'
+
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
+import api from '../_api'
+export const useSearch = makeSearch('wrixLocations', {
+  api,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      label: 'WRIX Identifier', // i18n defer
+      searchable: true,
+      required: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'Provider_Identifier',
+      label: 'Provider Identifier', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'Location_Identifier',
+      label: 'Location Identifier', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'Service_Provider_Brand',
+      label: 'Service Provider Brand', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('WRIX Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'Provider_Identifier',
+      text: i18n.t('Provider Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'Location_Identifier',
+      text: i18n.t('Location Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'Service_Provider_Brand',
+      text: i18n.t('Service Provider Brand'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id',
+  defaultCondition: () => ({ op: 'and', values: [
+    { op: 'or', values: [
+      { field: 'id', op: 'not_equals', value: null }
+    ] }
+  ] })
+})
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_router.js b/html/pfappserver/root/src/views/Configuration/wrix/_router.js
index d1fc7df4ee2b..33a131c5257b 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_router.js
@@ -1,7 +1,7 @@
 import store from '@/store'
 import StoreModule from './_store'
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ '../_components/WrixLocationsList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const useRouter = $router => {
@@ -11,6 +11,7 @@ export const useRouter = $router => {
       .push({ name: 'wrixLocation', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
     goToClone: params => $router.push({ name: 'cloneWrixLocation', params }),
+    goToNew: () => $router.push({ name: 'newWrixLocation' })
   }
 }
 
@@ -24,7 +25,7 @@ export default [
   {
     path: 'wrix',
     name: 'wrixLocations',
-    component: TheList,
+    component: TheSearch,
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_store.js b/html/pfappserver/root/src/views/Configuration/wrix/_store.js
index 41b167e8a083..1f2ea1b34a6f 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_store.js
@@ -47,7 +47,7 @@ const actions = {
       sort: 'id',
       fields: ['id', 'type'].join(',')
     }
-    return api.wrixLocations(params).then(response => {
+    return api.list(params).then(response => {
       return response.items
     })
   },
@@ -56,7 +56,7 @@ const actions = {
       return Promise.resolve(state.cache[id]).then(cache => JSON.parse(JSON.stringify(cache)))
     }
     commit('ITEM_REQUEST')
-    return api.wrixLocation(id).then(item => {
+    return api.item(id).then(item => {
       commit('ITEM_REPLACED', item)
       return JSON.parse(JSON.stringify(item))
     }).catch((err) => {
@@ -66,7 +66,7 @@ const actions = {
   },
   createWrixLocation: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.createWrixLocation(data).then(response => {
+    return api.create(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -76,7 +76,7 @@ const actions = {
   },
   updateWrixLocation: ({ commit }, data) => {
     commit('ITEM_REQUEST')
-    return api.updateWrixLocation(data).then(response => {
+    return api.update(data).then(response => {
       commit('ITEM_REPLACED', data)
       return response
     }).catch(err => {
@@ -86,7 +86,7 @@ const actions = {
   },
   deleteWrixLocation: ({ commit }, data) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.deleteWrixLocation(data).then(response => {
+    return api.delete(data).then(response => {
       commit('ITEM_DESTROYED', data)
       return response
     }).catch(err => {

From 918603568577296421dc9c923cd06928e637503d Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 16 Jun 2021 16:10:42 -0400
Subject: [PATCH 56/72] remove unused components

---
 .../root/src/components/pfButtonDelete.vue    | 119 ---------
 .../root/src/components/pfButtonHelp.vue      |  54 ----
 .../root/src/components/pfButtonSave.vue      |  45 ----
 .../root/src/components/pfButtonService.vue   | 228 ----------------
 .../root/src/components/pfConfigList.vue      | 218 ----------------
 .../root/src/components/pfFormLogin.vue       |  10 +-
 .../root/src/components/pfTableSortable.vue   | 247 ------------------
 .../_components/InterfacesList.vue            |  38 ++-
 .../_components/NetworkDevicesTabs.vue        |   8 +-
 .../_components/PortalModulesList.vue         |  27 +-
 .../roles/_components/TheList.vue             |   6 +-
 .../tenants/_components/TheList.vue           |   6 +-
 .../network/_components/TheList.vue           |  23 +-
 .../views/Nodes/_components/NodesSearch.vue   |  11 +-
 .../views/Status/_components/Dashboard.vue    |   9 +-
 15 files changed, 89 insertions(+), 960 deletions(-)
 delete mode 100644 html/pfappserver/root/src/components/pfButtonDelete.vue
 delete mode 100644 html/pfappserver/root/src/components/pfButtonHelp.vue
 delete mode 100644 html/pfappserver/root/src/components/pfButtonSave.vue
 delete mode 100644 html/pfappserver/root/src/components/pfButtonService.vue
 delete mode 100644 html/pfappserver/root/src/components/pfConfigList.vue
 delete mode 100644 html/pfappserver/root/src/components/pfTableSortable.vue

diff --git a/html/pfappserver/root/src/components/pfButtonDelete.vue b/html/pfappserver/root/src/components/pfButtonDelete.vue
deleted file mode 100644
index 70e5ee0fff4e..000000000000
--- a/html/pfappserver/root/src/components/pfButtonDelete.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-  <b-button-group
-    :size="size" @mouseleave="stopInterrupt($event)"
-    :class="['d-inline-flex', {'flex-row-reverse': reverse}]">
-    <b-button
-      v-if="!localInterrupt"
-      type="button"
-      :variant="variant"
-      :disabled="disabled"
-      @click.stop="startInterrupt($event)"
-      ><slot>{{ $t('Delete') }}</slot></b-button>
-    <b-button
-      v-if="localInterrupt"
-      type="button"
-      variant="outline-danger"
-      class="text-nowrap"
-      disabled
-      >{{ confirm }}</b-button>
-    <b-button
-      v-if="localInterrupt"
-      type="button"
-      variant="danger"
-      @click.stop="onDelete($event)"
-      @mousemove="startInterrupt($event)"
-      @mouseover="startInterrupt($event)"
-      ><slot>{{ $t('Delete') }}</slot></b-button>
-  </b-button-group>
-</template>
-
-<script>
-import i18n from '@/utils/locale'
-
-export default {
-  name: 'pf-button-delete',
-  props: {
-    variant: {
-      type: String,
-      default: 'danger'
-    },
-    size: {
-      type: String,
-      default: ''
-    },
-    confirm: {
-      type: String,
-      default: i18n.t('Are you sure?')
-    },
-    interrupt: {
-      type: Boolean,
-      default: false
-    },
-    timeout: {
-      type: Number,
-      default: 3000
-    },
-    disabled: {
-      type: [Boolean, Function],
-      default: false
-    },
-    reverse: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      localInterrupt: this.interrupt
-    }
-  },
-  watch: {
-    interrupt: {
-      handler: function (a) {
-        this.localInterrupt = a
-      },
-      immediate: true
-    }
-
-  },
-  methods: {
-    startInterrupt () {
-      if (this.timerStop) clearTimeout(this.timerStop)
-      this.localInterrupt = true
-      this.timerStop = setTimeout(this.stopInterrupt, this.timeout)
-    },
-    stopInterrupt () {
-      if (this.timerStop) clearTimeout(this.timerStop)
-      this.localInterrupt = false
-    },
-    onDelete (event) {
-      // emit to parent
-      this.$emit('on-delete', event)
-    }
-  },
-  beforeUnmount () {
-    if (this.timerStop) {
-      clearTimeout(this.timerStop)
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.btn-group.flex-row-reverse {
-  > .btn {
-    &:not(:last-child):not(.dropdown-toggle) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-top-right-radius: $btn-border-radius;
-      border-bottom-right-radius: $btn-border-radius;
-    }
-    &:not(:first-child):not(.dropdown-toggle) {
-      border-top-left-radius: $btn-border-radius;
-      border-bottom-left-radius: $btn-border-radius;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-}
-</style>
diff --git a/html/pfappserver/root/src/components/pfButtonHelp.vue b/html/pfappserver/root/src/components/pfButtonHelp.vue
deleted file mode 100644
index b61361081f79..000000000000
--- a/html/pfappserver/root/src/components/pfButtonHelp.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <span @click="loadHelp()">
-    <icon class="pf-button-help text-secondary" name="regular/question-circle"
-      :title="$t('Click to view {documentName}', { documentName })" v-b-tooltip.hover.top.d300
-      v-bind="$attrs"
-    ></icon>
-  </span>
-</template>
-
-<script>
-export default {
-  name: 'pfButtonHelp',
-  props: {
-    url: {
-      type: String,
-      default: 'PacketFence_Administration_Guide.html#_about_this_guide'
-    }
-  },
-  computed: {
-    index () {
-      return this.$store.getters['documentation/index']
-    },
-    urlByParts () {
-      const [ path, hash ] = this.url.split('#')
-      return { path, hash: `#${hash}` }
-    },
-    documentName () {
-      const { path } = this.urlByParts
-      let document = this.index.find(d => d.name === path)
-      if (document && Object.keys(document).length > 0) {
-        return document.name.replace(/\.html/g, '').replace(/_/g, ' ').replace(/^PacketFence /, '')
-      }
-      return path
-    }
-  },
-  methods: {
-    loadHelp () {
-      const { path, hash } = this.urlByParts
-      this.$store.dispatch('documentation/openViewer')
-      this.$store.dispatch('documentation/setPath', path)
-      this.$store.dispatch('documentation/setHash', hash)
-    }
-  }
-}
-</script>
-
-<style>
-  .pf-button-help {
-    cursor: pointer;
-  }
-  .pf-button-help:hover {
-    fill: var(--primary);
-  }
-</style>
diff --git a/html/pfappserver/root/src/components/pfButtonSave.vue b/html/pfappserver/root/src/components/pfButtonSave.vue
deleted file mode 100644
index bf325744b0cc..000000000000
--- a/html/pfappserver/root/src/components/pfButtonSave.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <b-button ref="saveButton" type="submit"
-    :disabled="disabled || isLoading" :style="{ minWidth: btnWidth }" :variant="variant"
-    v-bind="$attrs"
-  >
-    <icon name="circle-notch" spin v-if="isLoading"></icon>
-    <template v-else>
-      <slot>{{ $t('Save') }}</slot>
-    </template>
-  </b-button>
-</template>
-
-<script>
-export default {
-  name: 'pf-button-save',
-  props: {
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    variant: {
-      type: String,
-      default: 'primary'
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      btnWidth: 0
-    }
-  },
-  watch: {
-    isLoading: {
-      handler: function (newValue) {
-        if (newValue) {
-          this.btnWidth = (this.$refs.saveButton.clientWidth + 2) + 'px'
-        }
-      }
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/components/pfButtonService.vue b/html/pfappserver/root/src/components/pfButtonService.vue
deleted file mode 100644
index ab87145892bf..000000000000
--- a/html/pfappserver/root/src/components/pfButtonService.vue
+++ /dev/null
@@ -1,228 +0,0 @@
-<template>
-  <b-dropdown ref="serviceButton"
-    :text="service"
-    :variant="buttonVariant"
-    v-bind="$attrs"
-    :disabled="isError"
-  >
-    <template v-slot:button-content>
-      <icon :name="buttonIcon.name" :spin="buttonIcon.spin" class="mr-1"></icon>
-      {{ buttonText }}
-    </template>
-    <b-dropdown-form v-if="!hideDetails">
-      <b-row class="row-nowrap">
-        <b-col cols="auto">
-          <b-badge v-if="status.alive && status.pid" pill variant="success">{{ status.pid }}</b-badge>
-          <icon v-else class="text-danger" name="circle"></icon>
-        </b-col>
-        <b-col class="pl-0">{{ $t('Alive') }}</b-col>
-      </b-row>
-      <b-row class="row-nowrap">
-        <b-col cols="auto"><icon :class="(status.enabled) ? 'text-success' : 'text-danger'" name="circle"></icon></b-col>
-        <b-col class="pl-0">{{ $t('Enabled') }}</b-col>
-      </b-row>
-      <b-row class="row-nowrap">
-        <b-col cols="auto"><icon :class="(status.managed) ? 'text-success' : 'text-danger'" name="circle"></icon></b-col>
-        <b-col class="pl-0">{{ $t('Managed') }}</b-col>
-      </b-row>
-    </b-dropdown-form>
-    <b-dropdown-divider v-if="!isLoading && !hideDetails"></b-dropdown-divider>
-    <b-dropdown-item v-if="canEnable" @click="doEnable"><icon name="toggle-on" class="mr-1" @click.stop="onClick"></icon> {{ $t('Enable') }}</b-dropdown-item>
-    <b-dropdown-item v-if="canDisable" @click="doDisable"><icon name="toggle-off" class="mr-1" @click.stop="onClick"></icon> {{ $t('Disable') }}</b-dropdown-item>
-    <b-dropdown-item v-if="canRestart" @click="doRestart"><icon name="redo" class="mr-1" @click.stop="onClick"></icon> {{ $t('Restart') }}</b-dropdown-item>
-    <b-dropdown-item v-if="canStart" @click="doStart"><icon name="play" class="mr-1" @click.stop="onClick"></icon> {{ $t('Start') }}</b-dropdown-item>
-    <b-dropdown-item v-if="canStop" @click="doStop"><icon name="stop" class="mr-1" @click.stop="onClick"></icon> {{ $t('Stop') }}</b-dropdown-item>
-  </b-dropdown>
-</template>
-
-<script>
-import { blacklistedServices } from '@/store/modules/services'
-
-export default {
-  name: 'pf-button-service',
-  props: {
-    service: {
-      type: String,
-      default: null
-    },
-    hideDetails: {
-      type: Boolean,
-      default: false
-    },
-    enable: {
-      type: Boolean,
-      default: false
-    },
-    disable: {
-      type: Boolean,
-      default: false
-    },
-    restart: {
-      type: Boolean,
-      default: false
-    },
-    start: {
-      type: Boolean,
-      default: false
-    },
-    stop: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    status () {
-      const { $store: { state: { services: { cache: { [this.service]: service } = {} } = {} } = {} } = {} } = this
-      return service || { status: 'loading' }
-    },
-    canEnable () {
-      return (this.enable && !this.status.enabled && !this.isLoading)
-    },
-    canDisable () {
-      return (this.disable && this.status.enabled && !this.isLoading)
-    },
-    canRestart () {
-      return (this.restart && this.status.alive && !this.isLoading)
-    },
-    canStart () {
-      return (this.start && !this.status.alive && !this.isLoading)
-    },
-    canStop () {
-      return (this.stop && this.status.alive && !this.isLoading)
-    },
-    isLoading () {
-      const { status: { status } = {} } = this
-      if (status) {
-        return !['success', 'error'].includes(status)
-      }
-      return true
-    },
-    isEnabling () {
-      return (this.status.status === 'enabling')
-    },
-    isDisabling () {
-      return (this.status.status === 'disabling')
-    },
-    isRestarting () {
-      return (this.status.status === 'restarting')
-    },
-    isStarting () {
-      return (this.status.status === 'starting')
-    },
-    isStopping () {
-      return (this.status.status === 'stopping')
-    },
-    isRunning () {
-      return (this.status.alive)
-    },
-    isError () {
-      return (this.status.status === 'error') || blacklistedServices.find(bls => bls === this.service)
-    },
-    buttonVariant () {
-      switch (true) {
-        case this.isLoading:
-          return 'outline-secondary'
-          // break
-        case this.isRunning:
-          return 'outline-success'
-          // break
-        default:
-          return 'outline-danger'
-          // break
-      }
-    },
-    buttonIcon () {
-      switch (true) {
-        case this.isEnabling:
-        case this.isDisabling:
-        case this.isRestarting:
-        case this.isStarting:
-        case this.isStopping:
-        case this.isLoading:
-          return { name: 'circle-notch', spin: true }
-          // break
-        case this.isError:
-          return { name: 'exclamation-circle', spin: false }
-          // break
-        default:
-          return { name: 'circle', spin: false }
-          // break
-      }
-    },
-    buttonText () {
-      switch (true) {
-        case this.isEnabling:
-          return this.$i18n.t('Enabling {service}', { service: this.service })
-          // break
-        case this.isDisabling:
-          return this.$i18n.t('Disabling {service}', { service: this.service })
-          // break
-        case this.isRestarting:
-          return this.$i18n.t('Restarting {service}', { service: this.service })
-          // break
-        case this.isStarting:
-          return this.$i18n.t('Starting {service}', { service: this.service })
-          // break
-        case this.isStopping:
-          return this.$i18n.t('Stopping {service}', { service: this.service })
-          // break
-        default:
-          return this.service
-          // break
-      }
-    }
-  },
-  methods: {
-    doEnable () {
-      this.$store.dispatch('services/enableService', this.service).then(() => {
-        this.$store.dispatch('notification/info', { message: this.$i18n.t('Service <code>{service}</code> enabled.', { service: this.service }) })
-        this.$emit('enable', this.service)
-      }).catch(() => {
-        this.$store.dispatch('notification/danger', { message: this.$i18n.t('Failed to enable service <code>{service}</code>. See the server error logs for more information.', { service: this.service }) })
-      })
-    },
-    doDisable () {
-      this.$store.dispatch('services/disableService', this.service).then(() => {
-        this.$store.dispatch('notification/info', { message: this.$i18n.t('Service <code>{service}</code> disabled.', { service: this.service }) })
-        this.$emit('disable', this.service)
-      }).catch(() => {
-        this.$store.dispatch('notification/danger', { message: this.$i18n.t('Failed to disable service <code>{service}</code>. See the server error logs for more information.', { service: this.service }) })
-      })
-    },
-    doRestart () {
-      this.$store.dispatch('services/restartService', this.service).then(() => {
-        this.$store.dispatch('notification/info', { message: this.$i18n.t('Service <code>{service}</code> restarted.', { service: this.service }) })
-        this.$emit('restart', this.service)
-      }).catch(() => {
-        this.$store.dispatch('notification/danger', { message: this.$i18n.t('Failed to restart service <code>{service}</code>.  See the server error logs for more information.', { service: this.service }) })
-      })
-    },
-    doStart () {
-      this.$store.dispatch('services/startService', this.service).then(() => {
-        this.$store.dispatch('notification/info', { message: this.$i18n.t('Service <code>{service}</code> started.', { service: this.service }) })
-        this.$emit('start', this.service)
-      }).catch(() => {
-        this.$store.dispatch('notification/danger', { message: this.$i18n.t('Failed to start service <code>{service}</code>.  See the server error logs for more information.', { service: this.service }) })
-      })
-    },
-    doStop () {
-      this.$store.dispatch('services/stopService', this.service).then(() => {
-        this.$store.dispatch('notification/info', { message: this.$i18n.t('Service <code>{service}</code> killed.', { service: this.service }) })
-        this.$emit('stop', this.service)
-      }).catch(() => {
-        this.$store.dispatch('notification/danger', { message: this.$i18n.t('Failed to kill service <code>{service}</code>.  See the server error logs for more information.s', { service: this.service }) })
-      })
-    },
-    onClick (event) {
-      event.stopPropagation()
-      this.$nextTick(() => {
-        this.$refs.serviceButton.show() // keep open on click
-      })
-    }
-  },
-  created () {
-    if (this.$can('read', 'services'))
-      this.$store.dispatch('services/getService', this.service)
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/components/pfConfigList.vue b/html/pfappserver/root/src/components/pfConfigList.vue
deleted file mode 100644
index bf578ae5af77..000000000000
--- a/html/pfappserver/root/src/components/pfConfigList.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-<template>
-  <div>
-    <slot name="pageHeader"></slot>
-    <pf-search ref="pfSearch"
-      :quick-with-fields="false"
-      :quick-placeholder="$t(config.searchPlaceholder)"
-      :fields="fields"
-      :store="$store"
-      :advanced-mode="false"
-      :condition="condition"
-      @submit-search="onSearch"
-      @reset-search="onReset"
-    ></pf-search>
-    <div class="card-body pt-0">
-      <b-row>
-        <b-col cols="auto" class="mr-auto mb-3">
-          <slot name="buttonAdd"></slot>
-        </b-col>
-      </b-row>
-      <b-row align-h="end" align-v="center">
-        <b-col>
-          <b-dropdown size="sm" variant="link" :boundary="$refs.container" no-caret>
-            <template v-slot:button-content>
-              <icon name="columns" v-b-tooltip.hover.top.d300.window :title="$t('Visible Columns')"></icon>
-            </template>
-            <template v-for="column in columns">
-              <template v-if="column.label">
-                <b-dropdown-item :key="column.key" v-if="column.locked" disabled>
-                  <icon class="position-absolute mt-1" name="thumbtack"></icon>
-                  <span class="ml-4">{{ $t(column.label) }}</span>
-                </b-dropdown-item>
-                <a :key="column.key" v-else href="javascript:void(0)" :disabled="column.locked" class="dropdown-item" @click.stop="toggleColumn(column)">
-                  <icon class="position-absolute mt-1" name="check" v-show="column.visible"></icon>
-                  <span class="ml-4">{{ $t(column.label) }}</span>
-                </a>
-              </template>
-            </template>
-          </b-dropdown>
-        </b-col>
-        <b-col cols="auto">
-          <b-container fluid>
-            <b-row align-v="center">
-              <b-form inline class="mb-0">
-                <b-form-select class="mb-3 mr-3" size="sm" v-model="pageSizeLimit" :options="[25,50,100,200,500,1000]" :disabled="isLoading"
-                  @input="onPageSizeChange" />
-              </b-form>
-              <b-pagination class="mr-3" align="right" :per-page="pageSizeLimit" :total-rows="totalRows" v-model="currentPage" :disabled="isLoading"
-                @change="onPageChange" />
-              <base-button-export-csv class="mb-3" :filename="`${$route.path.slice(1).replace('/', '-')}.csv`" :disabled="isLoading"
-                :columns="columns" :data="items"
-              />
-            </b-row>
-          </b-container>
-        </b-col>
-      </b-row>
-      <slot name="tableHeader"></slot>
-
-      <pf-table-sortable v-if="sortable"
-        :items="items"
-        :fields="visibleColumns"
-        @row-clicked="onRowClick"
-        hover
-        striped
-        @end="sort"
-      >
-        <template v-slot:empty>
-          <slot name="emptySearch" v-bind="{ isLoading }">
-            <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
-          </slot>
-        </template>
-        <!-- Proxy all possible column slots ([field]) into pf-table-sortable slots -->
-        <template v-for="column in config.columns" v-slot:[cell(column.key)]="item">
-          <slot :name="cell(column.key)" v-bind="item">{{ item[column.key] }}</slot>
-        </template>
-      </pf-table-sortable>
-
-      <b-table class="table-clickable" v-else
-        :items="items"
-        :fields="visibleColumns"
-        :sort-by="sortBy"
-        :sort-desc="sortDesc"
-        :hover="items.length > 0"
-        @sort-changed="onSortingChanged"
-        @row-clicked="onRowClick"
-        show-empty
-        responsive
-        fixed
-        sort-icon-left
-        striped
-      >
-        <template v-slot:empty>
-          <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
-          </slot>
-        </template>
-        <!-- Proxy all possible column slots ([field], HEAD_[field], FOOT_[field]) into b-table slots -->
-        <template v-for="column in config.columns" v-slot:[cell(column.key)]="data">
-          <slot :name="cell(column.key)" v-bind="data.item">{{ data.item[column.key] }}</slot>
-        </template>
-        <template v-for="column in config.columns" v-slot:[head(column.key)]="data">
-          <slot :name="head(column.key)">{{ $t(data.label) }}</slot>
-        </template>
-        <template v-for="column in config.columns" v-slot:[foot(column.key)]="data">
-          <slot :name="foot(column.key)">{{ $t(data.label) }}</slot>
-        </template>
-      </b-table>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import {
-  BaseButtonExportCsv
-} from '@/components/new/'
-import pfMixinSearchable from '@/components/pfMixinSearchable'
-import pfEmptyTable from '@/components/pfEmptyTable'
-import pfSearch from '@/components/pfSearch'
-import pfTableSortable from '@/components/pfTableSortable'
-
-export default {
-  name: 'pf-config-list',
-  mixins: [
-    pfMixinSearchable
-  ],
-  components: {
-    BaseButtonExportCsv,
-    pfEmptyTable,
-    pfSearch,
-    pfTableSortable
-  },
-  props: {
-    config: {
-      type: Object,
-      default: () => ({
-        columns: [],
-        fields: [],
-        rowClickRoute () { return {} },
-        searchPlaceholder: 'Search',
-        searchableOptions: {
-          searchApiEndpoint: null,
-          defaultSortKeys: [],
-          defaultSearchCondition: {
-            op: 'and',
-            values: [{
-              op: 'or',
-              values: [
-                { field: 'id', op: 'contains', value: null },
-                { field: 'notes', op: 'contains', value: null }
-              ]
-            }]
-          },
-          defaultRoute: { name: null }
-        },
-        searchableQuickCondition: (quickCondition) => {
-          return {
-            op: 'and',
-            values: [
-              {
-                op: 'or',
-                values: [
-                  { field: 'id', op: 'contains', value: quickCondition },
-                  { field: 'notes', op: 'contains', value: quickCondition }
-                ]
-              }
-            ]
-          }
-        }
-      })
-    },
-    tableValues: {
-      type: Array,
-      default: () => { return [] }
-    },
-    sortable: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    fields () {
-      return this.config.fields
-    },
-    columns () {
-      return this.config.columns
-    },
-    searchableOptions () {
-      return this.config.searchableOptions
-    },
-    searchableQuickCondition () {
-      return this.config.searchableQuickCondition
-    }
-  },
-  methods: {
-    head (name) {
-      return `head(${name})`
-    },
-    cell (name) {
-      return `cell(${name})`
-    },
-    foot (name) {
-      return `foot(${name})`
-    },
-    onRowClick (item, index) {
-      this.$router.push(this.config.rowClickRoute(item, index))
-    },
-    resetSearch () {
-      this.$refs.pfSearch.onReset()
-    },
-    submitSearch () {
-      this.$refs.pfSearch.onSubmit()
-    },
-    refreshList () {
-      this.resetSearch()
-    }
-  }
-}
-</script>
diff --git a/html/pfappserver/root/src/components/pfFormLogin.vue b/html/pfappserver/root/src/components/pfFormLogin.vue
index 13ff8dd93bd3..1cb8ca72f1fc 100644
--- a/html/pfappserver/root/src/components/pfFormLogin.vue
+++ b/html/pfappserver/root/src/components/pfFormLogin.vue
@@ -26,7 +26,9 @@
                 </template>
                 <template v-else>
                   <b-link variant="outline-secondary" @click="logout" v-if="modal">{{ $t('Use a different username') }}</b-link>
-                  <pf-button-save type="submit" class="ml-2" variant="primary" :isLoading="isLoading" :disabled="!validForm">{{ $t('Login') }}</pf-button-save>
+                  <base-button-save type="submit" :isLoading="isLoading" :disabled="!validForm" variant="primary">
+                    {{ $t('Login') }}
+                  </base-button-save>
                 </template>
             </template>
         </component>
@@ -34,14 +36,16 @@
 </template>
 
 <script>
-import pfButtonSave from '@/components/pfButtonSave'
+import {
+  BaseButtonSave
+} from '@/components/new/'
 
 const EXPIRATION_DELAY = 60 * 1000 // in miliseconds
 
 export default {
   name: 'pf-form-login',
   components: {
-    pfButtonSave
+    BaseButtonSave
   },
   data () {
     return {
diff --git a/html/pfappserver/root/src/components/pfTableSortable.vue b/html/pfappserver/root/src/components/pfTableSortable.vue
deleted file mode 100644
index 4107bd406996..000000000000
--- a/html/pfappserver/root/src/components/pfTableSortable.vue
+++ /dev/null
@@ -1,247 +0,0 @@
-<template>
-  <div class="pf-table-sortable" :class="{ 'hover': hover, 'striped': striped }">
-
-    <!-- head -->
-    <b-row class="pf-table-sortable-head">
-      <b-col cols="1">
-        <icon name="sort" class="text-secondary"></icon>
-      </b-col>
-      <b-col v-for="(field, fieldIndex) in visibleFields" :key="fieldIndex">
-        {{ $t(field.label) }}
-      </b-col>
-    </b-row>
-    <b-row v-if="!items || items.length === 0"
-      class="pf-table-sortable-empty justify-content-md-center"
-    >
-      <b-col cols="12" md="auto">
-        <slot name="empty" :is-loading="isLoading">
-          <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
-        </slot>
-      </b-col>
-    </b-row>
-
-    <!-- body -->
-    <template v-else>
-      <b-row v-for="(item, itemIndex) in notSortableItems" :key="itemIndex"
-        class="pf-table-sortable-row"
-      >
-        <b-col class="draghandle" cols="1">
-          <icon class="draghandle-icon" name="lock"></icon>
-          <span class="draghandle-index font-weight-bold">{{ itemIndex + 1 }}</span>
-        </b-col>
-        <b-col v-for="(field, fieldIndex) in visibleFields" :key="fieldIndex" @click.stop="clickRow(item)">
-          <slot :name="cell(field.key)" v-bind="item">{{ formatted(item, field) }}</slot>
-        </b-col>
-      </b-row>
-      <draggable
-        v-model="sortableItems"
-        handle=".draghandle"
-        dragClass="dragclass"
-        @start="onDraggable('start', $event)"
-        @add="onDraggable('add', $event)"
-        @remove="onDraggable('remove', $event)"
-        @update="onDraggable('update', $event)"
-        @end="onDraggable('end', $event)"
-        @choose="onDraggable('choose', $event)"
-        @sort="onDraggable('sort', $event)"
-        @filter="onDraggable('filter', $event)"
-        @clone="onDraggable('clone', $event)"
-      >
-        <b-row v-for="(item, itemIndex) in sortableItems" :key="itemIndex"
-          class="pf-table-sortable-row"
-        >
-          <b-col class="draghandle" cols="1">
-            <icon v-if="disabled" name="lock"></icon>
-            <template v-else>
-              <icon class="draghandle-icon" :name="(sortableItems.length == 1 || item.not_sortable) ? 'lock' : 'th'" v-b-tooltip.hover.left.d300 :title="$t('Click and drag to re-order')"></icon>
-              <span class="draghandle-index">{{ notSortableItems.length + itemIndex + 1 }}</span>
-            </template>
-          </b-col>
-          <b-col v-for="(field, fieldIndex) in visibleFields" :key="fieldIndex" @click.stop="clickRow(item)">
-            <slot :name="cell(field.key)" v-bind="item">{{ formatted(item, field) }}</slot>
-          </b-col>
-        </b-row>
-      </draggable>
-    </template>
-
-  </div>
-</template>
-
-<script>
-const draggable = () => import('vuedraggable')
-import pfEmptyTable from '@/components/pfEmptyTable'
-
-export default {
-  name: 'pf-table-sortable',
-  components: {
-    draggable,
-    pfEmptyTable
-  },
-  props: {
-    items: {
-      type: Array,
-      default: () => { return null },
-      required: false
-    },
-    fields: {
-      type: Array,
-      default: () => { return [] },
-      required: true
-    },
-    hover: {
-      type: Boolean,
-      default: false
-    },
-    striped: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      drag: false // true ondrag
-    }
-  },
-  computed: {
-    visibleFields () {
-      return this.fields.filter(field => field.locked || field.visible)
-    },
-    sortableItems () {
-      return this.items.filter(item => !item.not_sortable)
-    },
-    notSortableItems () {
-      return this.items.filter(item => item.not_sortable)
-    }
-  },
-  methods: {
-    cell (name) {
-      return `cell(${name})`
-    },
-    clickRow (item) {
-      this.$emit('row-clicked', item)
-    },
-    onDraggable (type, event) {
-      if (type === 'end') { // increment indexes past not_sortable
-        let { oldIndex, newIndex } = event
-        const shift = this.items.filter(item => 'not_sortable' in item && item.not_sortable).length
-        oldIndex += shift
-        newIndex += shift
-        event = { ...event, oldIndex, newIndex }
-      }
-      switch (type) {
-        case 'start':
-          this.drag = true
-          break
-        case 'end':
-          this.drag = false
-          break
-      }
-      this.$emit(type, event)
-    },
-    formatted (item, field) {
-      if ('formatter' in field) {
-        return field.formatter(item)
-      }
-      return item[field.key]
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.pf-table-sortable {
-  color: #495057;
-  border-spacing: 2px;
-  .draghandle {
-    cursor: grab;
-    line-height: 1em;
-  }
-  .dragclass {
-    padding-top: .25rem !important;
-    padding-bottom: .0625rem !important;
-    background-color: $primary !important;
-    path, /* svg icons */
-    * {
-      color: $white !important;
-      border-color: transparent !important;
-    }
-    button.btn {
-      border: 1px solid $white !important;
-      border-color: $white !important;
-      color: $white !important;
-    }
-    input,
-    select,
-    .multiselect__single {
-      color: $primary !important;
-    }
-    .pf-form-fields-input-group {
-      border-color: transparent !important;
-    }
-  }
-  .pf-table-sortable-empty {
-    background-color: rgba(0,0,0,.05);
-    vertical-align: top;
-  }
-  .pf-table-sortable-head {
-    border-top: 1px solid #dee2e6;
-    border-bottom: 2px solid #dee2e6;
-    font-weight: bold;
-    vertical-align: middle;
-    & > div {
-      vertical-align: bottom;
-    }
-  }
-  .pf-table-sortable-row {
-    border-top: 1px solid #dee2e6;
-    cursor: pointer;
-    & .draghandle-icon,
-    &:hover .draghandle-index {
-      display: none;
-    }
-    & .draghandle-index,
-    &:hover .draghandle-icon {
-      display: inline;
-    }
-  }
-  .pf-table-sortable-empty,
-  .pf-table-sortable-head,
-  .pf-table-sortable-row {
-    border-color: #dee2e6;
-    margin: 0;
-    & > .col {
-      align-self: center!important;
-      padding: .75rem;
-    }
-    & > .col-1 {
-      align-self: center!important;
-      max-width: 50px;
-      padding: .75rem;
-      vertical-align: middle;
-    }
-  }
-  &.striped {
-    .pf-table-sortable-row {
-      &:nth-of-type(odd) {
-        background-color: rgba(0,0,0,.05);
-      }
-    }
-  }
-  &.hover {
-    .pf-table-sortable-row {
-      &:hover {
-        background-color: rgba(0,0,0,.075);
-        color: #495057;
-      }
-    }
-  }
-}
-</style>
diff --git a/html/pfappserver/root/src/views/Configuration/_components/InterfacesList.vue b/html/pfappserver/root/src/views/Configuration/_components/InterfacesList.vue
index 6178615d431c..1e9cf53d6023 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/InterfacesList.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/InterfacesList.vue
@@ -52,7 +52,12 @@
             <span v-if="item.item.vlan"
               class="float-right text-nowrap"
             >
-              <pf-button-delete size="sm" variant="outline-danger" class="mr-1" :disabled="isInterfacesLoading" :confirm="$t('Delete VLAN?')" @on-delete="removeInterface(item.item)" reverse/>
+              <base-button-confirm
+                size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+                :disabled="isInterfacesLoading"
+                :confirm="$t('Delete VLAN?')"
+                @click="removeInterface(item.item)"
+              >{{ $t('Delete') }}</base-button-confirm>
               <b-button size="sm" variant="outline-primary" class="mr-1" :disabled="isInterfacesLoading" @click.stop.prevent="cloneInterface(item.item)">{{ $t('Clone') }}</b-button>
             </span>
             <span v-else
@@ -80,9 +85,9 @@
         <b-row align-h="end" align-v="start" class="mb-3">
           <b-col cols="auto" class="mr-auto"></b-col>
           <b-col cols="auto">
-            <pf-button-service service="iptables" class="mr-1" restart start stop></pf-button-service>
-            <pf-button-service service="pfdhcp" class="mr-1" restart start stop></pf-button-service>
-            <pf-button-service service="pfdns" class="mr-1" restart start stop></pf-button-service>
+            <base-button-service service="iptables" restart start stop class="mr-1" />
+            <base-button-service service="pfdhcp" restart start stop class="mr-1" />
+            <base-button-service service="pfdns" restart start stop class="mr-1" />
           </b-col>
         </b-row>
         <b-table class="table-clickable"
@@ -128,10 +133,10 @@
             <b-button variant="outline-primary" class="mr-1" :to="{ name: 'newRoutedNetwork' }">{{ $t('New Routed Network') }}</b-button>
           </b-col>
           <b-col cols="auto">
-            <pf-button-service service="keepalived" class="mr-1" restart start stop></pf-button-service>
-            <pf-button-service service="iptables" class="mr-1" restart start stop></pf-button-service>
-            <pf-button-service service="pfdhcp" class="mr-1" restart start stop></pf-button-service>
-            <pf-button-service service="pfdns" class="mr-1" restart start stop></pf-button-service>
+            <base-button-service service="keepalived" restart start stop class="mr-1" />
+            <base-button-service service="iptables" restart start stop class="mr-1" />
+            <base-button-service service="pfdhcp" restart start stop class="mr-1" />
+            <base-button-service service="pfdns" restart start stop class="mr-1" />
           </b-col>
         </b-row>
         <b-table class="table-clickable"
@@ -158,7 +163,12 @@
           </template>
           <template v-slot:cell(buttons)="item">
             <span class="float-right text-nowrap">
-              <pf-button-delete size="sm" variant="outline-danger" class="mr-1" :disabled="isRoutedNetworksLoading" :confirm="$t('Delete Routed Network?')" @on-delete="removeRoutedNetwork(item.item)" reverse/>
+              <base-button-confirm
+                size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+                :disabled="isRoutedNetworksLoading"
+                :confirm="$t('Delete Routed Network?')"
+                @click="removeRoutedNetwork(item.item)"
+              >{{ $t('Delete') }}</base-button-confirm>
               <b-button size="sm" variant="outline-primary" class="mr-1" :disabled="isRoutedNetworksLoading" @click.stop.prevent="cloneRoutedNetwork(item.item)">{{ $t('Clone') }}</b-button>
             </span>
           </template>
@@ -169,9 +179,11 @@
 </template>
 
 <script>
+import {
+  BaseButtonConfirm,
+  BaseButtonService
+} from '@/components/new/'
 import network from '@/utils/network'
-import pfButtonDelete from '@/components/pfButtonDelete'
-import pfButtonService from '@/components/pfButtonService'
 import pfEmptyTable from '@/components/pfEmptyTable'
 import { ToggleStatus } from '@/views/Configuration/networks/interfaces/_components/'
 import { columns as columnsInterface } from '../_config/interface'
@@ -181,8 +193,8 @@ import { columns as columnsRoutedNetwork } from '../_config/routedNetwork'
 export default {
   name: 'interfaces-list',
   components: {
-    pfButtonDelete,
-    pfButtonService,
+    BaseButtonConfirm,
+    BaseButtonService,
     pfEmptyTable,
     ToggleStatus
   },
diff --git a/html/pfappserver/root/src/views/Configuration/_components/NetworkDevicesTabs.vue b/html/pfappserver/root/src/views/Configuration/_components/NetworkDevicesTabs.vue
index 51eb7de27a6d..e2e99a4943ea 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/NetworkDevicesTabs.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/NetworkDevicesTabs.vue
@@ -3,7 +3,7 @@
     <b-card-header>
       <h4 class="mb-0">
         {{ $t('Network Devices') }}
-        <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_network_devices_definition_switches_conf" />
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_network_devices_definition_switches_conf" />
       </h4>
     </b-card-header>
     <b-tabs ref="tabs" v-model="tabIndex" card lazy>
@@ -18,14 +18,16 @@
 </template>
 
 <script>
-import pfButtonHelp from '@/components/pfButtonHelp'
+import {
+  BaseButtonHelp
+} from '@/components/new/'
 import SwitchesSearch from '../switches/_components/TheSearch'
 import SwitchGroupsSearch from '../switchGroups/_components/TheSearch'
 
 export default {
   name: 'network-device-tabs',
   components: {
-    pfButtonHelp,
+    BaseButtonHelp,
     SwitchesSearch,
     SwitchGroupsSearch
   },
diff --git a/html/pfappserver/root/src/views/Configuration/_components/PortalModulesList.vue b/html/pfappserver/root/src/views/Configuration/_components/PortalModulesList.vue
index 1032ba40f1c7..781901647050 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/PortalModulesList.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/PortalModulesList.vue
@@ -3,7 +3,7 @@
     <b-card-header>
       <h4 class="mb-0">
         {{ $t('Portal Modules') }}
-        <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_portal_modules" />
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_portal_modules" />
       </h4>
     </b-card-header>
     <!-- Visual representation of portal modules -->
@@ -11,9 +11,16 @@
       <b-tab v-for="rootModule in rootModules" :key="rootModule.id" :title="rootModule.description">
         <b-form-row class="justify-content-end">
           <b-button variant="link" @click="minimize = !minimize"><icon :name="minimize ? 'expand' : 'compress'"></icon></b-button>
-          <pf-button-delete class="mr-1" :disabled="isLoading" :confirm="$t('Delete Module?')" @on-delete="remove(rootModule.id)" reverse/>
+          <base-button-confirm
+            variant="outline-danger" class="my-1 mr-1" reverse
+            :disabled="isLoading"
+            :confirm="$t('Delete Module?')"
+            @click="remove(rootModule.id)"
+          >{{ $t('Delete') }}</base-button-confirm>
           <b-form @submit.prevent="save(rootModule)">
-            <pf-button-save :isLoading="isLoading" v-t="'Save'"></pf-button-save>
+            <base-button-save type="submit" :isLoading="isLoading">
+              {{ $t('Save') }}
+            </base-button-save>
           </b-form>
         </b-form-row>
         <div class="position-relative">
@@ -73,12 +80,14 @@
 </template>
 
 <script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseButtonSave
+} from '@/components/new/'
 import pfMixinSearchable from '@/components/pfMixinSearchable'
 const draggable = () => import('vuedraggable')
 import PortalModule from './PortalModule'
-import pfButtonHelp from '@/components/pfButtonHelp'
-import pfButtonSave from '@/components/pfButtonSave'
-import pfButtonDelete from '@/components/pfButtonDelete'
 import scroll100 from '@/directives/scroll-100'
 import {
   columns,
@@ -95,9 +104,9 @@ export default {
   components: {
     draggable,
     PortalModule,
-    pfButtonHelp,
-    pfButtonSave,
-    pfButtonDelete
+    BaseButtonConfirm,
+    BaseButtonHelp,
+    BaseButtonSave
   },
   directives: {
     scroll100
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_components/TheList.vue b/html/pfappserver/root/src/views/Configuration/roles/_components/TheList.vue
index 2c5fa884807b..9a6f5d25e7b5 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_components/TheList.vue
+++ b/html/pfappserver/root/src/views/Configuration/roles/_components/TheList.vue
@@ -10,7 +10,7 @@
       </div>
       <h4 class="mb-0">
         {{ $t('Roles') }}
-        <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_introduction_to_role_based_access_control" />
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_introduction_to_role_based_access_control" />
       </h4>
     </b-card-header>
     <div class="card-body">
@@ -174,6 +174,7 @@
 import {
   BaseButtonConfirm,
   BaseButtonExportCsv,
+  BaseButtonHelp,
   BaseButtonSaveSearch,
   BaseInputToggleAdvancedMode,
   BaseSearchInputBasic,
@@ -182,12 +183,12 @@ import {
   BaseSearchInputLimit,
   BaseSearchInputPage,
 } from '@/components/new/'
-import pfButtonHelp from '@/components/pfButtonHelp'
 import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonExportCsv,
+  BaseButtonHelp,
   BaseButtonSaveSearch,
   BaseInputToggleAdvancedMode,
   BaseSearchInputBasic,
@@ -195,7 +196,6 @@ const components = {
   BaseSearchInputColumns,
   BaseSearchInputLimit,
   BaseSearchInputPage,
-  pfButtonHelp,
   pfEmptyTable
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheList.vue b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheList.vue
index 405bf5f36515..e2ee246a824a 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheList.vue
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheList.vue
@@ -10,7 +10,7 @@
       </div>
       <h4 class="mb-0">
         {{ $t('Tenants') }}
-        <pf-button-help class="ml-1" url="PacketFence_Installation_Guide.html#_tenants" />
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_tenants" />
       </h4>
     </b-card-header>
     <div class="card-body">
@@ -123,6 +123,7 @@
 import {
   BaseButtonConfirm,
   BaseButtonExportCsv,
+  BaseButtonHelp,
   BaseButtonSaveSearch,
   BaseInputToggleAdvancedMode,
   BaseSearchInputBasic,
@@ -131,12 +132,12 @@ import {
   BaseSearchInputLimit,
   BaseSearchInputPage,
 } from '@/components/new/'
-import pfButtonHelp from '@/components/pfButtonHelp'
 import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonExportCsv,
+  BaseButtonHelp,
   BaseButtonSaveSearch,
   BaseInputToggleAdvancedMode,
   BaseSearchInputBasic,
@@ -144,7 +145,6 @@ const components = {
   BaseSearchInputColumns,
   BaseSearchInputLimit,
   BaseSearchInputPage,
-  pfButtonHelp,
   pfEmptyTable
 }
 
diff --git a/html/pfappserver/root/src/views/Configurator/network/_components/TheList.vue b/html/pfappserver/root/src/views/Configurator/network/_components/TheList.vue
index 68dc1a111754..4e7a5da02c5f 100644
--- a/html/pfappserver/root/src/views/Configurator/network/_components/TheList.vue
+++ b/html/pfappserver/root/src/views/Configurator/network/_components/TheList.vue
@@ -21,7 +21,7 @@
           <pf-empty-table :is-loading="isLoading">{{ $t('No interfaces found') }}</pf-empty-table>
         </template>
         <template v-slot:cell(is_running)="{ item }">
-          <toggle-status :value="item.is_running" 
+          <toggle-status :value="item.is_running"
           :disabled="item.type === 'management' || isLoading"
           :item="item" />
         </template>
@@ -47,7 +47,12 @@
           <span v-if="item.vlan"
             class="float-right text-nowrap"
           >
-            <pf-button-delete size="sm" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete VLAN?')" @on-delete="removeInterface(item)" reverse/>
+            <base-button-confirm
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete VLAN?')"
+              @click="removeInterface(item)"
+            >{{ $t('Delete') }}</base-button-confirm>
             <b-button size="sm" variant="outline-primary" class="mr-1" :disabled="isLoading" @click.stop.prevent="cloneInterface(item)">{{ $t('Clone') }}</b-button>
           </span>
           <span v-else
@@ -70,7 +75,7 @@
              @click="detectManagementInterface"
            >
              {{ $t('Detect Management Interface') }}
-           </base-button-save>          
+           </base-button-save>
          </b-col>
       </b-row>
 
@@ -102,17 +107,18 @@
 
 <script>
 import {
+  BaseButtonConfirm,
   BaseButtonSave,
   BaseForm,
   BaseFormGroupChosenMultiple,
   BaseFormGroupInput
 } from '@/components/new/'
 import pfButton from '@/components/pfButton'
-import pfButtonDelete from '@/components/pfButtonDelete'
 import pfEmptyTable from '@/components/pfEmptyTable'
 import { ToggleStatus } from '@/views/Configuration/networks/interfaces/_components/'
 
 const components = {
+  BaseButtonConfirm,
   BaseButtonSave,
   BaseForm,
 
@@ -120,7 +126,6 @@ const components = {
   FormGroupHostname:   BaseFormGroupInput,
   FormGroupDnsServers: BaseFormGroupChosenMultiple,
   pfButton,
-  pfButtonDelete,
   pfEmptyTable,
   ToggleStatus
 }
@@ -211,7 +216,7 @@ const { root: { $router, $store } = {} } = context
 
   const isDetecting = ref(false)
   const isLoading = computed(() => $store.getters['$_interfaces/isLoading'])
-  
+
   const hostname = computed(() => $store.state.system.hostname)
 
   $store.dispatch(`$_interfaces/all`)
@@ -223,7 +228,7 @@ const { root: { $router, $store } = {} } = context
     })
   )
 
-  const rebootAlert = computed(() => ((isLoading.value || form.value.hostname === hostname.value) 
+  const rebootAlert = computed(() => ((isLoading.value || form.value.hostname === hostname.value)
     ? null
     : `<span class="text-warning">${i18n.t('Please reboot the server at the end of the configuration wizard to apply changes.')}</span>`
   ))
@@ -247,7 +252,7 @@ const { root: { $router, $store } = {} } = context
         $store.dispatch('notification/danger', {
           icon: 'exclamation-triangle',
           message: i18n.t('Management interface <code>{id}</code> found.', management_interface)
-        })          
+        })
         $store.dispatch('$_interfaces/updateInterface', management_interface)
           .finally(() => {
             isDetecting.value = false
@@ -258,7 +263,7 @@ const { root: { $router, $store } = {} } = context
           icon: 'exclamation-triangle',
           message: i18n.t('Management interface not found.')
         })
-        isDetecting.value = false          
+        isDetecting.value = false
       }
     }
   }
diff --git a/html/pfappserver/root/src/views/Nodes/_components/NodesSearch.vue b/html/pfappserver/root/src/views/Nodes/_components/NodesSearch.vue
index 1deede5b8f83..3a20380fdbb3 100644
--- a/html/pfappserver/root/src/views/Nodes/_components/NodesSearch.vue
+++ b/html/pfappserver/root/src/views/Nodes/_components/NodesSearch.vue
@@ -170,7 +170,12 @@
         </template>
         <template v-slot:cell(buttons)="item">
           <span class="float-right text-nowrap text-right">
-            <pf-button-delete size="sm" variant="outline-danger" class="mr-1" :disabled="isLoading" :confirm="$t('Delete Node?')" @on-delete="remove(item.item)" reverse/>
+            <base-button-confirm
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Node?')"
+              @click="remove(item.item)"
+            >{{ $t('Delete') }}</base-button-confirm>
           </span>
         </template>
         <template v-slot:empty>
@@ -193,9 +198,9 @@
 
 <script>
 import {
+  BaseButtonConfirm,
   BaseButtonExportCsv
 } from '@/components/new/'
-import pfButtonDelete from '@/components/pfButtonDelete'
 import pfEmptyTable from '@/components/pfEmptyTable'
 import pfMixinSearchable from '@/components/pfMixinSearchable'
 import pfMixinSelectable from '@/components/pfMixinSelectable'
@@ -214,8 +219,8 @@ export default {
     pfMixinSearchable
   ],
   components: {
+    BaseButtonConfirm,
     BaseButtonExportCsv,
-    pfButtonDelete,
     pfEmptyTable,
     pfFingerbankScore,
     pfFormToggle
diff --git a/html/pfappserver/root/src/views/Status/_components/Dashboard.vue b/html/pfappserver/root/src/views/Status/_components/Dashboard.vue
index 15921bf8b02d..17173dc86911 100644
--- a/html/pfappserver/root/src/views/Status/_components/Dashboard.vue
+++ b/html/pfappserver/root/src/views/Status/_components/Dashboard.vue
@@ -3,7 +3,8 @@
       <b-alert variant="danger" :show="chartsError" fade>
         <h4 class="alert-heading" v-t="'Error'"></h4>
         <p>{{ $t('The charts of the dasboard are currently not available.') }}</p>
-        <pf-button-service service="netdata" class="mr-1" v-can:read="'services'" restart start></pf-button-service>
+        <base-button-service v-can:read="'services'"
+          service="netdata" restart start stop class="mr-1" />
       </b-alert>
       <b-tabs nav-class="nav-fill">
         <b-tab v-for="(section, sectionIndex) in sections" :title="section.name" :key="`${section.name}-${sectionIndex}`">
@@ -62,14 +63,16 @@
 <script>
 import Badge from './Badge'
 import Chart, { modes, libs, palettes } from './Chart'
-import pfButtonService from '@/components/pfButtonService'
+import {
+  BaseButtonService
+} from '@/components/new/'
 
 export default {
   name: 'dashboard',
   components: {
     Badge,
     Chart,
-    pfButtonService
+    BaseButtonService
   },
   props: {
     storeName: { // from router

From 46960d9ac57f297bf87a9515bc88b6a8290459fd Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 17 Jun 2021 07:13:13 -0400
Subject: [PATCH 57/72] remove old config

---
 .../src/views/Configuration/_config/pki/ca.js | 102 -----------
 .../views/Configuration/_config/pki/cert.js   | 165 ------------------
 .../views/Configuration/_config/pki/index.js  |  84 ---------
 .../Configuration/_config/pki/profile.js      |  93 ----------
 .../Configuration/_config/pki/revokedCert.js  | 141 ---------------
 .../src/views/Configuration/_config/realm.js  | 107 ------------
 .../Configuration/_config/securityEvent.js    |  93 ----------
 .../Configuration/_config/selfService.js      |  76 --------
 .../src/views/Configuration/_config/switch.js | 114 ------------
 .../Configuration/_config/switchGroup.js      |  52 ------
 .../Configuration/_config/switchTemplate.js   |  81 ---------
 .../Configuration/_config/syslogForwarder.js  |  80 ---------
 .../Configuration/_config/syslogParser.js     |  81 ---------
 .../_config/trafficShapingPolicy.js           |  63 -------
 .../views/Configuration/_config/wmiRule.js    |  82 ---------
 .../Configuration/_config/wrixLocation.js     |  61 -------
 16 files changed, 1475 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/pki/ca.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/pki/cert.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/pki/index.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/pki/profile.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/pki/revokedCert.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/realm.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/securityEvent.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/selfService.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/switch.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/switchGroup.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/switchTemplate.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/syslogForwarder.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/syslogParser.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/trafficShapingPolicy.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/wmiRule.js
 delete mode 100644 html/pfappserver/root/src/views/Configuration/_config/wrixLocation.js

diff --git a/html/pfappserver/root/src/views/Configuration/_config/pki/ca.js b/html/pfappserver/root/src/views/Configuration/_config/pki/ca.js
deleted file mode 100644
index 0c3fcafea51f..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/pki/ca.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'ID',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'cn',
-    label: 'Common Name', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'mail',
-    label: 'Email', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'organisation',
-    label: 'Organisation', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'ID',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'cn',
-    text: i18n.t('Common Name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'mail',
-    text: i18n.t('Email'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'organisation',
-    text: i18n.t('Organisation'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'pkiCa', params: { id: item.ID } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier, common name, email or organisation'),
-    searchableOptions: {
-      searchApiEndpoint: 'pki/cas',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'cn', op: 'contains', value: null },
-            { field: 'mail', op: 'contains', value: null },
-            { field: 'organisation', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'pkiCas' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'cn', op: 'contains', value: quickCondition },
-              { field: 'mail', op: 'contains', value: quickCondition },
-              { field: 'organisation', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/pki/cert.js b/html/pfappserver/root/src/views/Configuration/_config/pki/cert.js
deleted file mode 100644
index 88b743262df2..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/pki/cert.js
+++ /dev/null
@@ -1,165 +0,0 @@
-import store from '@/store'
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'ID',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'ca_id',
-    required: true
-  },
-  {
-    key: 'ca_name',
-    label: 'Certificate Authority', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'profile_id',
-    required: true
-  },
-  {
-    key: 'profile_name',
-    label: 'Template', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'cn',
-    label: 'Common Name', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'mail',
-    label: 'Email', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'valid_until',
-    label: 'Valid Until', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'ID',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'ca_id',
-    text: i18n.t('Certificate Authority Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'ca_name',
-    text: i18n.t('Certificate Authority Name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'profile_id',
-    text: i18n.t('Template Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'profile_name',
-    text: i18n.t('Template Name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'cn',
-    text: i18n.t('Common Name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'mail',
-    text: i18n.t('Email'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'pkiCert', params: { id: item.ID } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier, certificate authority, template, common name or email'),
-    searchableOptions: {
-      searchApiEndpoint: 'pki/certs',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'ca_name', op: 'contains', value: null },
-            { field: 'profile_name', op: 'contains', value: null },
-            { field: 'cn', op: 'contains', value: null },
-            { field: 'mail', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'pkiCerts' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'ca_name', op: 'contains', value: quickCondition },
-              { field: 'profile_name', op: 'contains', value: quickCondition },
-              { field: 'cn', op: 'contains', value: quickCondition },
-              { field: 'mail', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
-
-export const download = (id, password, filename='cert.p12') => {
-  return new Promise((resolve, reject) => {
-    store.dispatch('$_pkis/downloadCert', { id, password }).then(arrayBuffer => {
-      const blob = new Blob([arrayBuffer], { type: 'application/x-pkcs12' })
-      if (window.navigator.msSaveOrOpenBlob) {
-        window.navigator.msSaveBlob(blob, filename)
-      } else {
-        let elem = window.document.createElement('a')
-        elem.href = window.URL.createObjectURL(blob)
-        elem.download = filename
-        document.body.appendChild(elem)
-        elem.click()
-        document.body.removeChild(elem)
-      }
-      resolve()
-    }).catch(e => {
-      reject(e)
-    })
-  })
-}
-
-export const revoke = (id, reason) => {
-  return store.dispatch('$_pkis/revokeCert', { id, reason })
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/pki/index.js b/html/pfappserver/root/src/views/Configuration/_config/pki/index.js
deleted file mode 100644
index b56172dd1cf6..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/pki/index.js
+++ /dev/null
@@ -1,84 +0,0 @@
-export const digests = [
-  { value: '0', text: 'UnknownSignatureAlgorithm' },
-  { value: '1', text: 'MD2WithRSA' },
-  { value: '2', text: 'MD5WithRSA' },
-  { value: '3', text: 'SHA1WithRSA' },
-  { value: '4', text: 'SHA256WithRSA' },
-  { value: '5', text: 'SHA384WithRSA' },
-  { value: '6', text: 'SHA512WithRSA' },
-  { value: '7', text: 'DSAWithSHA1' },
-  { value: '8', text: 'DSAWithSHA256' },
-  { value: '9', text: 'ECDSAWithSHA1' },
-  { value: '10', text: 'ECDSAWithSHA256' },
-  { value: '11', text: 'ECDSAWithSHA384' },
-  { value: '12', text: 'ECDSAWithSHA512' },
-  { value: '13', text: 'SHA256WithRSAPSS' },
-  { value: '14', text: 'SHA384WithRSAPSS' },
-  { value: '15', text: 'SHA512WithRSAPSS' },
-  { value: '16', text: 'PureEd25519' }
-]
-
-export const keyTypes = [
-  { value: '0', text: 'KEY_ECDSA' },
-  { value: '1', text: 'KEY_RSA' },
-  { value: '2', text: 'KEY_DSA' }
-]
-
-export const keySizes = {
-  0: [ // KEY_ECDSA
-    { value: '256', text: '256' },
-    { value: '384', text: '384' },
-    { value: '521', text: '521' }
-  ],
-  1: [ // KEY_RSA
-    { value: '2048', text: '2048' },
-    { value: '4096', text: '4096' }
-  ],
-  2: [ // KEY_DSA
-    { value: '1024', text: '1024' },
-    { value: '2048', text: '2048' },
-    { value: '3072', text: '3072' }
-  ]
-}
-
-export const keyUsages = [
-  { value: '1', text: 'DigitalSignature' },
-  { value: '2', text: 'ContentCommitment' },
-  { value: '4', text: 'KeyEncipherment' },
-  { value: '8', text: 'DataEncipherment' },
-  { value: '16', text: 'KeyAgreement' },
-  { value: '32', text: 'CertSign' },
-  { value: '64', text: 'CRLSign' },
-  { value: '128', text: 'EncipherOnly' },
-  { value: '256', text: 'DecipherOnly' }
-]
-
-export const extendedKeyUsages = [
-  { value: '0', text: 'Any' },
-  { value: '1', text: 'ServerAuth' },
-  { value: '2', text: 'ClientAuth' },
-  { value: '3', text: 'CodeSigning' },
-  { value: '4', text: 'EmailProtection' },
-  { value: '5', text: 'IPSECEndSystem' },
-  { value: '6', text: 'IPSECTunnel' },
-  { value: '7', text: 'IPSECUser' },
-  { value: '8', text: 'TimeStamping' },
-  { value: '9', text: 'OCSPSigning' },
-  { value: '10', text: 'MicrosoftServerGatedCrypto' },
-  { value: '11', text: 'NetscapeServerGatedCrypto' },
-  { value: '12', text: 'MicrosoftCommercialCodeSigning' },
-  { value: '13', text: 'MicrosoftKernelCodeSigning' }
-]
-
-export const revokeReasons = [
-  { value: '0', text: 'Unspecified' },
-  { value: '1', text: 'KeyCompromise' },
-  { value: '2', text: 'CACompromise' },
-  { value: '3', text: 'AffiliationChanged' },
-  { value: '4', text: 'Superseded' },
-  { value: '5', text: 'CessationOfOperation' },
-  { value: '6', text: 'CertificateHold' },
-  { value: '8', text: 'RemoveFromCRL' },
-  { value: '9', text: 'PrivilegeWithdrawn' },
-  { value: '10', text: 'AACompromise' }
-]
diff --git a/html/pfappserver/root/src/views/Configuration/_config/pki/profile.js b/html/pfappserver/root/src/views/Configuration/_config/pki/profile.js
deleted file mode 100644
index 490152291e28..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/pki/profile.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'ID',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'ca_id',
-    required: true
-  },
-  {
-    key: 'ca_name',
-    label: 'Certificate Authority', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'name',
-    label: 'Name', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'ID',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'ca_name',
-    text: i18n.t('Certificate Authority'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'name',
-    text: i18n.t('Name'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'pkiProfile', params: { id: item.ID } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier, certificate authority or name'),
-    searchableOptions: {
-      searchApiEndpoint: 'pki/profiles',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'ca_name', op: 'contains', value: null },
-            { field: 'name', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'pkiProfiles' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'ca_name', op: 'contains', value: quickCondition },
-              { field: 'name', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/pki/revokedCert.js b/html/pfappserver/root/src/views/Configuration/_config/pki/revokedCert.js
deleted file mode 100644
index d30ff1c87e0d..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/pki/revokedCert.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'ID',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'ca_id',
-    required: true
-  },
-  {
-    key: 'ca_name',
-    label: 'Certificate Authority', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'profile_id',
-    required: true
-  },
-  {
-    key: 'profile_name',
-    label: 'Template', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'cn',
-    label: 'Common Name', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'mail',
-    label: 'Email', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'revoked',
-    label: 'Revoked', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'crl_reason',
-    label: 'Reason', // i18n defer
-    sortable: true,
-    sortByFormatted: true,
-    visible: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'ID',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'ca_id',
-    text: i18n.t('Certificate Authority Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'ca_name',
-    text: i18n.t('Certificate Authority Name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'profile_id',
-    text: i18n.t('Template Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'profile_name',
-    text: i18n.t('Template Name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'cn',
-    text: i18n.t('Common Name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'mail',
-    text: i18n.t('Email'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'pkiRevokedCert', params: { id: item.ID } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier, certificate authority, template, common name or email'),
-    searchableOptions: {
-      searchApiEndpoint: 'pki/revokedcerts',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'ca_name', op: 'contains', value: null },
-            { field: 'profile_name', op: 'contains', value: null },
-            { field: 'cn', op: 'contains', value: null },
-            { field: 'mail', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'pkiRevokedCerts' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'ca_name', op: 'contains', value: quickCondition },
-              { field: 'profile_name', op: 'contains', value: quickCondition },
-              { field: 'cn', op: 'contains', value: quickCondition },
-              { field: 'mail', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/realm.js b/html/pfappserver/root/src/views/Configuration/_config/realm.js
deleted file mode 100644
index ed9ed84738b6..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/realm.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Name', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'regex',
-    label: 'Regex Realm', // i18n defer
-    visible: true
-  },
-  {
-    key: 'eap',
-    label: 'eap configuration',
-    visible: true
-  },
-  {
-    key: 'domain',
-    label: 'Domain', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'radius_auth',
-    label: 'RADIUS Authentication', // i18n defer
-    visible: true
-  },
-  {
-    key: 'radius_acct',
-    label: 'RADIUS Accounting', // i18n defer
-    visible: true
-  },
-  {
-    key: 'portal_strip_username',
-    label: 'Strip Portal', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'admin_strip_username',
-    label: 'Strip Admin', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'radius_strip_username',
-    label: 'Strip RADIUS', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'realm', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by name'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/realms',
-      defaultSortKeys: [], // use natural ordering
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'realms' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/securityEvent.js b/html/pfappserver/root/src/views/Configuration/_config/securityEvent.js
deleted file mode 100644
index ed35a7b66685..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/securityEvent.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'enabled',
-    label: 'Status', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'id',
-    label: 'ID',
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'desc',
-    label: 'Description', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'priority',
-    label: 'Priority',
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'template',
-    label: 'Template', // i18n defer
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'description',
-    text: i18n.t('Description'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'security_event', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier or description'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/security_events',
-      defaultSortKeys: [],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'desc', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'security_events' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'desc', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/selfService.js b/html/pfappserver/root/src/views/Configuration/_config/selfService.js
deleted file mode 100644
index 6e91f6a5e7c9..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/selfService.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'description',
-    label: 'Description', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'description',
-    text: i18n.t('Description'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'self_service', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier or description'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/self_services',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'description', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'self_services' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'description', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/switch.js b/html/pfappserver/root/src/views/Configuration/_config/switch.js
deleted file mode 100644
index 6322042d374e..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/switch.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'description',
-    label: 'Description', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'group',
-    label: 'Group', // i18n defer
-    sortable: true,
-    visible: true,
-    formatter: (value, key, item) => {
-      if (!value) item.group = i18n.t('default')
-    }
-  },
-  {
-    key: 'type',
-    label: 'Type', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'mode',
-    label: 'Mode', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'description',
-    text: i18n.t('Description'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'mode',
-    text: i18n.t('Mode'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'type',
-    text: i18n.t('Type'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'switch', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier or description'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/switches',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'description', op: 'contains', value: null },
-            { field: 'type', op: 'contains', value: null },
-            { field: 'mode', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'switches' },
-      extraFields: {
-        raw: 1
-      }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'description', op: 'contains', value: quickCondition },
-              { field: 'type', op: 'contains', value: quickCondition },
-              { field: 'mode', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/switchGroup.js b/html/pfappserver/root/src/views/Configuration/_config/switchGroup.js
deleted file mode 100644
index 1061c828b802..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/switchGroup.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import i18n from '@/utils/locale'
-import {
-  columns,
-  fields
-} from './switch'
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'switch_group', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by identifier or description'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/switch_groups',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'description', op: 'contains', value: null },
-            { field: 'type', op: 'contains', value: null },
-            { field: 'mode', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'switch_groups' },
-      extraFields: {
-        raw: 1
-      }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'description', op: 'contains', value: quickCondition },
-              { field: 'type', op: 'contains', value: quickCondition },
-              { field: 'mode', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/switchTemplate.js b/html/pfappserver/root/src/views/Configuration/_config/switchTemplate.js
deleted file mode 100644
index a6020187b4b8..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/switchTemplate.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'description',
-    label: 'Description', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'radiusDisconnect',
-    label: 'RADIUS Disconnect', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    key: 'description',
-    label: 'Description', // i18n defer
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'switchTemplate', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by Identifier or Description'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/template_switches',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'description', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'switchTemplates' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: quickCondition },
-            { field: 'description', op: 'contains', value: quickCondition }
-          ]
-        }]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/syslogForwarder.js b/html/pfappserver/root/src/views/Configuration/_config/syslogForwarder.js
deleted file mode 100644
index b420d83220bf..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/syslogForwarder.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Syslog Name', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'type',
-    label: 'Type', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Syslog Name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'type',
-    text: i18n.t('Type'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'syslogForwarder', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by Syslog name or type'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/syslog_forwarders',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'type', op: 'contains', value: null },
-            { field: 'proto', op: 'contains', value: null },
-            { field: 'host', op: 'contains', value: null },
-            { field: 'port', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'syslogForwarders' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: quickCondition },
-            { field: 'type', op: 'contains', value: quickCondition },
-            { field: 'proto', op: 'contains', value: quickCondition },
-            { field: 'host', op: 'contains', value: quickCondition },
-            { field: 'port', op: 'contains', value: quickCondition }
-          ]
-        }]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/syslogParser.js b/html/pfappserver/root/src/views/Configuration/_config/syslogParser.js
deleted file mode 100644
index c011a4e7ed38..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/syslogParser.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'status',
-    label: 'Status', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'id',
-    label: 'Detector', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'type',
-    label: 'Type', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    sortable: false,
-    visible: true,
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Detector'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'type',
-    text: i18n.t('Type'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'syslogParser', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by detector or type'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/syslog_parsers',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'type', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'syslogParsers' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: quickCondition },
-            { field: 'type', op: 'contains', value: quickCondition }
-          ]
-        }]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/trafficShapingPolicy.js b/html/pfappserver/root/src/views/Configuration/_config/trafficShapingPolicy.js
deleted file mode 100644
index eb8fd24e68ef..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/trafficShapingPolicy.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'Traffic Shaping Policy Name', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Traffic Shaping Policy Name'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'traffic_shaping', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by name'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/traffic_shaping_policies',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'traffic_shapings' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/wmiRule.js b/html/pfappserver/root/src/views/Configuration/_config/wmiRule.js
deleted file mode 100644
index a47625b9b098..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/wmiRule.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'WMI Rule', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'namespace',
-    label: 'Namespace', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'on_tab',
-    label: 'On Node Tab', // i18n defer
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('WMI Rule'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'namespace',
-    text: i18n.t('Namespace'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'wmiRule', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by WMI rule or namespace'),
-    searchableOptions: {
-      searchApiEndpoint: 'config/wmi_rules',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null },
-            { field: 'namespace', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'wmiRules' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [
-          {
-            op: 'or',
-            values: [
-              { field: 'id', op: 'contains', value: quickCondition },
-              { field: 'namespace', op: 'contains', value: quickCondition }
-            ]
-          }
-        ]
-      }
-    }
-  }
-}
diff --git a/html/pfappserver/root/src/views/Configuration/_config/wrixLocation.js b/html/pfappserver/root/src/views/Configuration/_config/wrixLocation.js
deleted file mode 100644
index 328c7d18533f..000000000000
--- a/html/pfappserver/root/src/views/Configuration/_config/wrixLocation.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    label: 'WRIX Identifier', // i18n defer
-    required: true,
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    label: '',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('WRIX Identifier'),
-    types: [conditionType.SUBSTRING]
-  }
-]
-
-export const config = () => {
-  return {
-    columns,
-    fields,
-    rowClickRoute (item) {
-      return { name: 'wrixLocation', params: { id: item.id } }
-    },
-    searchPlaceholder: i18n.t('Search by WRIX Identifier'),
-    searchableOptions: {
-      searchApiEndpoint: 'wrix_locations',
-      defaultSortKeys: ['id'],
-      defaultSearchCondition: {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: null }
-          ]
-        }]
-      },
-      defaultRoute: { name: 'wrixLocations' }
-    },
-    searchableQuickCondition: (quickCondition) => {
-      return {
-        op: 'and',
-        values: [{
-          op: 'or',
-          values: [
-            { field: 'id', op: 'contains', value: quickCondition }
-          ]
-        }]
-      }
-    }
-  }
-}

From 683061d94d1ca1a2d15c671399fa9a7c64f1acfa Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 17 Jun 2021 07:30:27 -0400
Subject: [PATCH 58/72] minimize default search condition

---
 .../Configuration/_store/factory/search.js    |  8 ++++++--
 .../adminRoles/_composables/useCollection.js  | 20 +------------------
 .../_composables/useCollection.js             |  9 +--------
 .../_composables/useCollection.js             |  8 +-------
 .../domains/_composables/useCollection.js     |  8 +-------
 .../_composables/useCollection.js             |  8 +-------
 .../_composables/useCollection.js             |  8 +-------
 .../devices/_composables/useCollection.js     |  7 +------
 .../_composables/useCollection.js             |  7 +------
 .../dhcpVendors/_composables/useCollection.js |  7 +------
 .../_composables/useCollection.js             |  7 +------
 .../_composables/useCollection.js             |  7 +------
 .../macVendors/_composables/useCollection.js  |  7 +------
 .../userAgents/_composables/useCollection.js  |  7 +------
 .../firewalls/_composables/useCollection.js   |  9 +--------
 .../_composables/useCollection.js             |  8 +-------
 .../_composables/useCollection.js             |  9 +--------
 .../_composables/useCollection.js             |  8 +-------
 .../_composables/useCollection.js             |  7 +------
 .../pki/cas/_composables/useCollection.js     |  5 +----
 .../pki/certs/_composables/useCollection.js   |  6 +-----
 .../profiles/_composables/useCollection.js    |  4 +---
 .../_composables/useCollection.js             |  6 +-----
 .../_composables/useCollection.js             |  8 +-------
 .../_composables/useCollection.js             |  8 +-------
 .../radius/eap/_composables/useCollection.js  |  7 +------
 .../radius/fast/_composables/useCollection.js |  7 +------
 .../radius/ocsp/_composables/useCollection.js |  7 +------
 .../radius/ssl/_composables/useCollection.js  |  7 +------
 .../radius/tls/_composables/useCollection.js  |  7 +------
 .../realms/_composables/useCollection.js      |  7 +------
 .../scanEngines/_composables/useCollection.js |  7 +------
 .../_composables/useCollection.js             |  7 +------
 .../_composables/useCollection.js             |  7 +------
 .../sources/_composables/useCollection.js     |  9 +--------
 .../_composables/useCollection.js             |  7 +------
 .../_composables/useCollection.js             |  7 +------
 .../switches/_composables/useCollection.js    |  7 +------
 .../_composables/useCollection.js             |  7 +------
 .../_composables/useCollection.js             |  7 +------
 .../wmiRules/_composables/useCollection.js    |  7 +------
 .../wrix/_composables/useCollection.js        |  7 +------
 42 files changed, 47 insertions(+), 270 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/_store/factory/search.js b/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
index 742e4144dec9..b4706635e925 100644
--- a/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
+++ b/html/pfappserver/root/src/views/Configuration/_store/factory/search.js
@@ -43,11 +43,15 @@ const factory = (uuid, options = {}) => {
         columns: [],
         fields: [],
         page: 1,
-        sortBy: 'id',
+        sortBy: null, // use natural order
         sortDesc: false,
         limit: 25,
         limits: [10, 25, 50, 100, 200, 500, 1000],
-        defaultCondition: () => ([{ values: [] }]),
+        defaultCondition: () => ({ op: 'and', values: [
+          { op: 'or', values: [
+            { field: 'id', op: 'not_equals', value: null }
+          ] }
+        ] }),
         requestInterceptor: (request) => request,
         responseInterceptor: (response) => response,
         errorInterceptor: (error) => { throw (error) },
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
index 5ca83047c7ad..d26e8d994c1e 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
@@ -67,23 +67,5 @@ export const useSearch = makeSearch('adminRoles', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'not_equals', value: null }
-    ] }
-  ]
-  }),
-/*
-  requestInterceptor: request => {
-    // append query in request to omit NONE, ALL, ALL_PF_ONLY from request
-    request.query.values = [
-      ...request.query.values,
-      { op: 'or', values: [ { field: 'id', op: 'not_equals', value: 'NONE' } ] },
-      { op: 'or', values: [ { field: 'id', op: 'not_equals', value: 'ALL' } ] },
-      { op: 'or', values: [ { field: 'id', op: 'not_equals', value: 'ALL_PF_ONLY' } ] }
-    ]
-    return request
-  }
-*/
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
index 26367326f282..496ae843e461 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
@@ -79,12 +79,5 @@ export const useSearch = makeSearch('billingTiers', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null },
-      { field: 'name', op: 'contains', value: null },
-      { field: 'description', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js
index 9bd9a2651169..3270fd47cbad 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js
@@ -86,11 +86,5 @@ export const useSearch = makeSearch('connectionProfiles', {
       text: i18n.t('Description'),
       types: [conditionType.SUBSTRING]
     }
-  ],
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null },
-      { field: 'description', op: 'contains', value: null }
-    ] }
-  ] })
+  ]
 })
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
index 40724f0fc503..79e8eec8a0de 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
@@ -78,11 +78,5 @@ export const useSearch = makeSearch('domains', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null },
-      { field: 'workgroup', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
index 0f57115bc25b..0442c00f96fc 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
@@ -110,11 +110,5 @@ export const useSearch = makeSearch('filterEngines', {
       text: i18n.t('Description'),
       types: [conditionType.SUBSTRING]
     }
-  ],
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null },
-      { field: 'description', op: 'contains', value: null }
-    ] }
-  ] })
+  ]
 })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
index 895ddcfce31c..ba33327e49f5 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
@@ -96,11 +96,5 @@ export const useSearch = makeSearch('fingerbankCombinations', {
       types: [conditionType.INTEGER]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null },
-      { field: 'device_id', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
index 8de2a2d51be5..e4589ce684e9 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
@@ -102,10 +102,5 @@ export const useSearch = makeSearch('fingerbankDevices', {
       types: [conditionType.INTEGER]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'parent_id', op: 'equals', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
index a5ccb13682a8..67f9fd07da84 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
@@ -90,10 +90,5 @@ export const useSearch = makeSearch('fingerbankDhcpFingerprints', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
index e775c148599a..67e9e6b52336 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
@@ -90,10 +90,5 @@ export const useSearch = makeSearch('fingerbankDhcpVendors', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
index 70800e1caead..fffc10d54d22 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
@@ -98,10 +98,5 @@ export const useSearch = makeSearch('fingerbankDhcpv6Enterprises', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
index dcd5c5ee5ee0..c56de1134f63 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
@@ -90,10 +90,5 @@ export const useSearch = makeSearch('fingerbankDhcpv6Fingerprints', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
index b2403504c1a5..42a28289713b 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
@@ -102,10 +102,5 @@ export const useSearch = makeSearch('fingerbankMacVendors', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'equals', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
index b583ba30e7c8..c8b9f203249a 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
@@ -90,10 +90,5 @@ export const useSearch = makeSearch('fingerbankUserAgents', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
index b02a95dfbdb2..fbcfc8a1b997 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
@@ -103,12 +103,5 @@ export const useSearch = makeSearch('firewalls', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null },
-      { field: 'port', op: 'contains', value: null },
-      { field: 'type', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
index dccd312480c7..5369d264429f 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
@@ -91,11 +91,5 @@ export const useSearch = makeSearch('floatingDevices', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null },
-      { field: 'ip', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js
index 28fc76b5ad67..99dee63155ed 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js
@@ -70,12 +70,5 @@ export const useSearch = makeSearch('maintenanceTasks', {
       text: i18n.t('Schedule'),
       types: [conditionType.SUBSTRING]
     }
-  ],
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null },
-      { field: 'description', op: 'contains', value: null },
-      { field: 'schedule', op: 'contains', value: null }
-    ] }
-  ] })
+  ]
 })
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js
index 9d8fc6d5016f..145bcab022eb 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js
@@ -76,11 +76,5 @@ export const useSearch = makeSearch('networkBehaviourPolicies', {
       types: [conditionType.SUBSTRING]
     },
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null },
-      { field: 'description', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js
index 025ea84a134f..fd1e7fad6fbf 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js
@@ -89,10 +89,5 @@ export const useSearch = makeSearch('trafficShapingPolicies', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'not_equals', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js
index 0b5c10dcf3d9..9048903e1b4c 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js
@@ -100,10 +100,7 @@ export const useSearch = makeSearch('pkiCas', {
   sortBy: 'id',
   defaultCondition: () => ({ op: 'and', values: [
     { op: 'or', values: [
-      { field: 'ID', op: 'contains', value: null },
-      { field: 'cn', op: 'contains', value: null },
-      { field: 'mail', op: 'contains', value: null },
-      { field: 'organisation', op: 'contains', value: null }
+      { field: 'ID', op: 'not_equals', value: null }
     ] }
   ] })
 })
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js
index ec2c44ccdee3..37a46aac0213 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js
@@ -146,11 +146,7 @@ export const useSearch = makeSearch('pkiCerts', {
   sortBy: 'id',
   defaultCondition: () => ({ op: 'and', values: [
     { op: 'or', values: [
-      { field: 'ID', op: 'contains', value: null },
-      { field: 'ca_name', op: 'contains', value: null },
-      { field: 'profile_name', op: 'contains', value: null },
-      { field: 'cn', op: 'contains', value: null },
-      { field: 'mail', op: 'contains', value: null }
+      { field: 'ID', op: 'not_equals', value: null }
     ] }
   ] })
 })
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js
index 413a47f94522..e873c64bb332 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js
@@ -104,9 +104,7 @@ export const useSearch = makeSearch('pkiProfiles', {
   sortBy: 'id',
   defaultCondition: () => ({ op: 'and', values: [
     { op: 'or', values: [
-      { field: 'ID', op: 'contains', value: null },
-      { field: 'ca_name', op: 'contains', value: null },
-      { field: 'name', op: 'contains', value: null }
+      { field: 'ID', op: 'not_equals', value: null }
     ] }
   ] })
 })
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
index cca50aa3b85e..5f752e8c6e23 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
@@ -136,11 +136,7 @@ export const useSearch = makeSearch('pkiRevokedCerts', {
   sortBy: 'id',
   defaultCondition: () => ({ op: 'and', values: [
     { op: 'or', values: [
-      { field: 'ID', op: 'contains', value: null },
-      { field: 'ca_name', op: 'contains', value: null },
-      { field: 'profile_name', op: 'contains', value: null },
-      { field: 'cn', op: 'contains', value: null },
-      { field: 'mail', op: 'contains', value: null }
+      { field: 'ID', op: 'not_equals', value: null }
     ] }
   ] })
 })
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
index 4a356c349ec3..6f14f5888a80 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
@@ -93,11 +93,5 @@ export const useSearch = makeSearch('pkiProviders', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null },
-      { field: 'type', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js
index 6df763c782e6..63290d1b800e 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js
@@ -100,11 +100,5 @@ export const useSearch = makeSearch('provisioners', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null },
-      { field: 'description', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js
index 72e3c8ca0ff3..577b40c04d68 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js
@@ -95,10 +95,5 @@ export const useSearch = makeSearch('radiusEap', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js
index b3672f005468..fd7205fe2cfd 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js
@@ -67,10 +67,5 @@ export const useSearch = makeSearch('radiusFast', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js
index 726f8046f05b..b2c7385198e4 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js
@@ -60,10 +60,5 @@ export const useSearch = makeSearch('radiusOcsp', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js
index c084ea1c943b..bbdaac7fd1a6 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js
@@ -60,11 +60,6 @@ export const useSearch = makeSearch('radiusSsl', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
 
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js
index 487f719bcd41..83808f69c77b 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js
@@ -74,11 +74,6 @@ export const useSearch = makeSearch('radiusTls', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
 
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
index 6d0e05248a08..2eb8cce7ee14 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
@@ -126,10 +126,5 @@ export const useSearch = makeSearch('realms', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'not_equals', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js
index ca8d0f706cbd..4c30fe2f6ce5 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js
@@ -118,10 +118,5 @@ export const useSearch = makeSearch('scanEngines', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'not_equals', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js
index a3db48f98509..90f4c21742bf 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js
@@ -95,10 +95,5 @@ export const useSearch = makeSearch('securityEvents', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'not_equals', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js
index ab6b9d407c2c..bae94f8b7b52 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js
@@ -72,10 +72,5 @@ export const useSearch = makeSearch('selfServices', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'not_equals', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js
index 97b862815514..0e64a4d3e798 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js
@@ -115,12 +115,5 @@ export const useSearch = makeSearch('sources', {
       text: i18n.t('Type'),
       types: [conditionType.SUBSTRING]
     }
-  ],
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'contains', value: null },
-      { field: 'description', op: 'contains', value: null },
-      { field: 'type', op: 'contains', value: null }
-    ] }
-  ] })
+  ]
 })
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js
index 950029df41b5..a236cbb38bf8 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js
@@ -114,10 +114,5 @@ export const useSearch = makeSearch('switchGroups', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'not_equals', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js
index 1852dcb657a5..33d763739db6 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js
@@ -78,10 +78,5 @@ export const useSearch = makeSearch('switchTemplates', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'not_equals', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js
index 51bf39d154bf..9a69ecfe9749 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js
@@ -121,10 +121,5 @@ export const useSearch = makeSearch('switches', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'not_equals', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
index 680f83d1c6ee..fb5b5eaf0b8a 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
@@ -96,10 +96,5 @@ export const useSearch = makeSearch('syslogForwarders', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'not_equals', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js
index 807959d614df..8f8419b18b50 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js
@@ -102,10 +102,5 @@ export const useSearch = makeSearch('syslogParsers', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'not_equals', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js
index 4709bfee11ec..e119f69ca21d 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js
@@ -79,10 +79,5 @@ export const useSearch = makeSearch('wmiRules', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'not_equals', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js
index d037106480df..544c7360c55a 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js
@@ -91,10 +91,5 @@ export const useSearch = makeSearch('wrixLocations', {
       types: [conditionType.SUBSTRING]
     }
   ],
-  sortBy: 'id',
-  defaultCondition: () => ({ op: 'and', values: [
-    { op: 'or', values: [
-      { field: 'id', op: 'not_equals', value: null }
-    ] }
-  ] })
+  sortBy: 'id'
 })

From f4e56073564c6899d6123f58f8984ffc7b6e66ac Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 17 Jun 2021 08:11:40 -0400
Subject: [PATCH 59/72] useStore to delete from search

---
 .../fingerbank/devices/_components/TheSearch.vue    | 13 ++++++++-----
 .../Configuration/fingerbank/devices/_store.js      |  6 +++---
 .../dhcpFingerprints/_components/TheSearch.vue      | 13 ++++++++-----
 .../fingerbank/dhcpFingerprints/_store.js           |  6 +++---
 .../dhcpVendors/_components/TheSearch.vue           | 13 ++++++++-----
 .../Configuration/fingerbank/dhcpVendors/_store.js  |  6 +++---
 .../dhcpv6Enterprises/_components/TheSearch.vue     | 13 ++++++++-----
 .../fingerbank/dhcpv6Enterprises/_store.js          |  6 +++---
 .../dhcpv6Fingerprints/_components/TheSearch.vue    | 13 ++++++++-----
 .../fingerbank/dhcpv6Fingerprints/_store.js         |  6 +++---
 .../fingerbank/macVendors/_components/TheSearch.vue | 13 ++++++++-----
 .../Configuration/fingerbank/macVendors/_store.js   |  6 +++---
 .../fingerbank/userAgents/_components/TheSearch.vue | 13 ++++++++-----
 .../Configuration/fingerbank/userAgents/_store.js   |  6 +++---
 .../firewalls/_components/TheSearch.vue             | 12 +++++++-----
 .../src/views/Configuration/firewalls/_store.js     |  6 +++---
 .../floatingDevices/_components/TheSearch.vue       | 12 +++++++-----
 .../views/Configuration/floatingDevices/_store.js   |  6 +++---
 .../_components/TheSearch.vue                       | 12 +++++++-----
 .../networks/trafficShapingPolicies/_store.js       |  6 +++---
 .../pkiProviders/_components/TheSearch.vue          | 12 +++++++-----
 .../src/views/Configuration/pkiProviders/_store.js  |  6 +++---
 .../provisioners/_components/TheSearch.vue          | 12 +++++++-----
 .../src/views/Configuration/provisioners/_store.js  |  6 +++---
 .../radius/eap/_components/TheSearch.vue            | 12 +++++++-----
 .../radius/fast/_components/TheSearch.vue           | 12 +++++++-----
 .../radius/ocsp/_components/TheSearch.vue           | 12 +++++++-----
 .../radius/ssl/_components/TheSearch.vue            | 12 +++++++-----
 .../src/views/Configuration/radius/ssl/_store.js    |  6 +++---
 .../radius/tls/_components/TheSearch.vue            | 12 +++++++-----
 .../scanEngines/_components/TheSearch.vue           | 12 +++++++-----
 .../src/views/Configuration/scanEngines/_store.js   |  6 +++---
 .../securityEvents/_components/TheSearch.vue        | 12 +++++++-----
 .../selfServices/_components/TheSearch.vue          | 12 +++++++-----
 .../src/views/Configuration/selfServices/_store.js  |  6 +++---
 .../switchGroups/_components/TheSearch.vue          | 12 +++++++-----
 .../src/views/Configuration/switchGroups/_store.js  |  6 +++---
 .../switchTemplates/_components/TheSearch.vue       | 12 +++++++-----
 .../views/Configuration/switchTemplates/_store.js   |  6 +++---
 .../switches/_components/TheSearch.vue              | 12 +++++++-----
 .../root/src/views/Configuration/switches/_store.js |  6 +++---
 .../syslogForwarders/_components/TheSearch.vue      | 12 +++++++-----
 .../views/Configuration/syslogForwarders/_store.js  |  6 +++---
 .../syslogParsers/_components/TheSearch.vue         | 13 ++++++++-----
 .../syslogParsers/_components/ToggleStatus.js       |  3 ---
 .../src/views/Configuration/syslogParsers/_store.js |  6 +++---
 .../wmiRules/_components/TheSearch.vue              | 12 +++++++-----
 .../root/src/views/Configuration/wmiRules/_store.js |  6 +++---
 .../Configuration/wrix/_components/TheSearch.vue    | 12 +++++++-----
 .../root/src/views/Configuration/wrix/_store.js     |  6 +++---
 50 files changed, 263 insertions(+), 204 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue
index d30d20bab5b1..7998677171a4 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue
@@ -143,7 +143,7 @@ import { ref, toRefs, watch } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -153,6 +153,11 @@ const setup = (props, context) => {
   } = toRefs(props)
 
   const { root: { $router, $store } = {} } = context
+
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
   const {
     goToClone,
@@ -182,10 +187,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   const onCloneClicked = item => goToClone({ scope: 'local', id: item.id })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_store.js
index b6b2cb308a91..912a908d4870 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_store.js
@@ -79,10 +79,10 @@ export const actions = {
       throw err
     })
   },
-  deleteDevice: ({ commit }, data) => {
+  deleteDevice: ({ commit }, id) => {
     commit('DEVICE_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('DEVICE_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('DEVICE_DESTROYED', id)
       return response
     }).catch(err => {
       commit('DEVICE_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue
index fb137111e847..1f0582155622 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue
@@ -119,7 +119,7 @@ import { ref, toRefs, watch } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -128,6 +128,11 @@ const setup = (props, context) => {
   } = toRefs(props)
 
   const { root: { $router, $store } = {} } = context
+
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
   const {
     goToClone,
@@ -157,10 +162,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   const onCloneClicked = item => goToClone({ scope: 'local', id: item.id })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_store.js
index 15602b387a1e..45ada6f5574a 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_store.js
@@ -79,10 +79,10 @@ export const actions = {
       throw err
     })
   },
-  deleteDhcpFingerprint: ({ commit }, data) => {
+  deleteDhcpFingerprint: ({ commit }, id) => {
     commit('DHCP_FINGERPRINT_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('DHCP_FINGERPRINT_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('DHCP_FINGERPRINT_DESTROYED', id)
       return response
     }).catch(err => {
       commit('DHCP_FINGERPRINT_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue
index 3a4fd3ee757f..66bc457fc8da 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue
@@ -119,7 +119,7 @@ import { ref, toRefs, watch } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -128,6 +128,11 @@ const setup = (props, context) => {
   } = toRefs(props)
 
   const { root: { $router, $store } = {} } = context
+
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
   const {
     goToClone,
@@ -157,10 +162,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   const onCloneClicked = item => goToClone({ scope: 'local', id: item.id })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_store.js
index 3c2c3260618c..ccb171a3380e 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_store.js
@@ -79,10 +79,10 @@ export const actions = {
       throw err
     })
   },
-  deleteDhcpVendor: ({ commit }, data) => {
+  deleteDhcpVendor: ({ commit }, id) => {
     commit('DHCP_VENDOR_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('DHCP_VENDOR_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('DHCP_VENDOR_DESTROYED', id)
       return response
     }).catch(err => {
       commit('DHCP_VENDOR_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue
index 0d71702b05d0..81f9aa1806a4 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue
@@ -119,7 +119,7 @@ import { ref, toRefs, watch } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -128,6 +128,11 @@ const setup = (props, context) => {
   } = toRefs(props)
 
   const { root: { $router, $store } = {} } = context
+
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
   const {
     goToClone,
@@ -157,10 +162,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   const onCloneClicked = item => goToClone({ scope: 'local', id: item.id })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_store.js
index 9d97c41e589d..5b6679df5696 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_store.js
@@ -79,10 +79,10 @@ export const actions = {
       throw err
     })
   },
-  deleteDhcpv6Enterprise: ({ commit }, data) => {
+  deleteDhcpv6Enterprise: ({ commit }, id) => {
     commit('DHCPV6_ENTERPRISE_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('DHCPV6_ENTERPRISE_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('DHCPV6_ENTERPRISE_DESTROYED', id)
       return response
     }).catch(err => {
       commit('DHCPV6_ENTERPRISE_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue
index 32a748e3ff01..0d73131b6138 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue
@@ -119,7 +119,7 @@ import { ref, toRefs, watch } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -128,6 +128,11 @@ const setup = (props, context) => {
   } = toRefs(props)
 
   const { root: { $router, $store } = {} } = context
+
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
   const {
     goToClone,
@@ -157,10 +162,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   const onCloneClicked = item => goToClone({ scope: 'local', id: item.id })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_store.js
index 487824d3b9d8..710b00475ddb 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_store.js
@@ -79,10 +79,10 @@ export const actions = {
       throw err
     })
   },
-  deleteDhcpv6Fingerprint: ({ commit }, data) => {
+  deleteDhcpv6Fingerprint: ({ commit }, id) => {
     commit('DHCPV6_FINGERPRINT_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('DHCPV6_FINGERPRINT_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('DHCPV6_FINGERPRINT_DESTROYED', id)
       return response
     }).catch(err => {
       commit('DHCPV6_FINGERPRINT_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue
index 4dfa7b186de1..8f9f1509724e 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue
@@ -119,7 +119,7 @@ import { ref, toRefs, watch } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -128,6 +128,11 @@ const setup = (props, context) => {
   } = toRefs(props)
 
   const { root: { $router, $store } = {} } = context
+
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
   const {
     goToClone,
@@ -157,10 +162,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   const onCloneClicked = item => goToClone({ scope: 'local', id: item.id })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_store.js
index f4b347a76381..35ad28d86238 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_store.js
@@ -79,10 +79,10 @@ export const actions = {
       throw err
     })
   },
-  deleteMacVendor: ({ commit }, data) => {
+  deleteMacVendor: ({ commit }, id) => {
     commit('MAC_VENDOR_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('MAC_VENDOR_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('MAC_VENDOR_DESTROYED', id)
       return response
     }).catch(err => {
       commit('MAC_VENDOR_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue
index 55cbcc816e87..556b1e405a8a 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue
@@ -119,7 +119,7 @@ import { ref, toRefs, watch } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -128,6 +128,11 @@ const setup = (props, context) => {
   } = toRefs(props)
 
   const { root: { $router, $store } = {} } = context
+
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
   const {
     goToClone,
@@ -157,10 +162,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   const onCloneClicked = item => goToClone({ scope: 'local', id: item.id })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_store.js b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_store.js
index 2165f319097a..cbbc6c439287 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_store.js
@@ -79,10 +79,10 @@ export const actions = {
       throw err
     })
   },
-  deleteUserAgent: ({ commit }, data) => {
+  deleteUserAgent: ({ commit }, id) => {
     commit('USER_AGENT_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('USER_AGENT_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('USER_AGENT_DESTROYED', id)
       return response
     }).catch(err => {
       commit('USER_AGENT_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
index a8f4065c9f64..dc259bd7c368 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
@@ -109,7 +109,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 import { types } from '../config'
 
 const setup = (props, context) => {
@@ -125,6 +125,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -140,10 +144,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_store.js b/html/pfappserver/root/src/views/Configuration/firewalls/_store.js
index 0cac9c2b9908..697294dc458c 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_store.js
@@ -106,10 +106,10 @@ const actions = {
       throw err
     })
   },
-  deleteFirewall: ({ commit }, data) => {
+  deleteFirewall: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('ITEM_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
index a745abc46dcc..7f65bddce303 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
@@ -108,7 +108,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -123,6 +123,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -138,10 +142,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_store.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/_store.js
index f1a8c71161e3..b7b08181a535 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_store.js
@@ -97,10 +97,10 @@ const actions = {
       throw err
     })
   },
-  deleteFloatingDevice: ({ commit }, data) => {
+  deleteFloatingDevice: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('ITEM_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue
index 0b9fb9a2dd75..054eb8d3777e 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue
@@ -116,7 +116,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -131,6 +131,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -146,10 +150,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   const roles = ref([])
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_store.js b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_store.js
index caacf37c30c2..5e0617e4d575 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_store.js
@@ -102,10 +102,10 @@ const actions = {
       throw err
     })
   },
-  deleteTrafficShapingPolicy: ({ commit }, data) => {
+  deleteTrafficShapingPolicy: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('ITEM_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
index d0174607b678..87c307503653 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
@@ -109,7 +109,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 import { pkiProvidersTypeOptions } from '../config'
 
 const setup = (props, context) => {
@@ -125,6 +125,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -140,10 +144,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_store.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/_store.js
index 03ac2d1cb668..9b0d6151d888 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_store.js
@@ -116,10 +116,10 @@ const actions = {
       throw err
     })
   },
-  deletePkiProvider: ({ commit }, data) => {
+  deletePkiProvider: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('ITEM_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue
index e0b77a6b2b9d..df5128512123 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue
@@ -112,7 +112,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 import { provisioningTypeOptions } from '../config'
 
 const setup = (props, context) => {
@@ -128,6 +128,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -143,10 +147,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_store.js b/html/pfappserver/root/src/views/Configuration/provisioners/_store.js
index 8cd9bbcc1eda..b298964c2411 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_store.js
@@ -106,10 +106,10 @@ const actions = {
       throw err
     })
   },
-  deleteProvisioning: ({ commit }, data) => {
+  deleteProvisioning: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('ITEM_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheSearch.vue
index e604066b72af..2c4423f3b561 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheSearch.vue
@@ -111,7 +111,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -126,6 +126,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -141,10 +145,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheSearch.vue
index e2e83b1a98f4..1417e5558d09 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheSearch.vue
@@ -111,7 +111,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -126,6 +126,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -141,10 +145,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheSearch.vue
index 74cb88fdc9a3..96b8df8876ee 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheSearch.vue
@@ -111,7 +111,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -126,6 +126,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -141,10 +145,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheSearch.vue
index 01b2c863fab5..6a20b1471d82 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheSearch.vue
@@ -111,7 +111,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -126,6 +126,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -141,10 +145,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_store.js b/html/pfappserver/root/src/views/Configuration/radius/ssl/_store.js
index fb7844200c4f..b9b601a22c46 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_store.js
@@ -104,10 +104,10 @@ const actions = {
       throw err
     })
   },
-  deleteRadiusSsl: ({ commit }, data) => {
+  deleteRadiusSsl: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('ITEM_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheSearch.vue
index 68d584a6de58..ccbf6f61431b 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheSearch.vue
@@ -111,7 +111,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -126,6 +126,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -141,10 +145,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
index d3c045af9354..0ef5c6432e10 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
@@ -112,7 +112,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 import { types } from '../config'
 
 const setup = (props, context) => {
@@ -128,6 +128,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -143,10 +147,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_store.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_store.js
index d64d635e18d8..f0771159ac7c 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_store.js
@@ -97,10 +97,10 @@ const actions = {
       throw err
     })
   },
-  deleteScanEngine: ({ commit }, data) => {
+  deleteScanEngine: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('ITEM_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue
index 73fccfabfeb2..47cb51d95326 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue
@@ -121,7 +121,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -136,6 +136,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -151,10 +155,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   const connectionProfiles = ref([])
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue
index 3eb1a1e807d9..106b35b204c3 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue
@@ -108,7 +108,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -123,6 +123,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -138,10 +142,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_store.js b/html/pfappserver/root/src/views/Configuration/selfServices/_store.js
index 8e56bd594aad..c0d3ec27ee83 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_store.js
@@ -106,10 +106,10 @@ const actions = {
       throw err
     })
   },
-  deleteSelfService: ({ commit }, data) => {
+  deleteSelfService: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('ITEM_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
index 584bcfbb15dc..40494c76a8da 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
@@ -112,7 +112,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -127,6 +127,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -142,10 +146,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   const switchTemplates = ref([])
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_store.js b/html/pfappserver/root/src/views/Configuration/switchGroups/_store.js
index e2c1dd908239..8a4012e24d84 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_store.js
@@ -116,10 +116,10 @@ const actions = {
       throw err
     })
   },
-  deleteSwitchGroup: ({ commit }, data) => {
+  deleteSwitchGroup: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('ITEM_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue
index bad13e9597aa..f837799cd636 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue
@@ -104,7 +104,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -119,6 +119,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -134,10 +138,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_store.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_store.js
index 0787cc26dacc..9babc5586621 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_store.js
@@ -96,10 +96,10 @@ const actions = {
       throw err
     })
   },
-  deleteSwitchTemplate: ({ commit }, data) => {
+  deleteSwitchTemplate: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('ITEM_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
index fe778910fc34..b8f15f226ae3 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
@@ -126,7 +126,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 import i18n from '@/utils/locale'
 
 const setup = (props, context) => {
@@ -142,6 +142,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -168,10 +172,8 @@ const setup = (props, context) => {
     }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   const switchGroups = ref([])
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_store.js b/html/pfappserver/root/src/views/Configuration/switches/_store.js
index 0b191c7dfc40..bbe34622d260 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/switches/_store.js
@@ -102,10 +102,10 @@ const actions = {
       throw err
     })
   },
-  deleteSwitch: ({ commit }, data) => {
+  deleteSwitch: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('ITEM_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
index 15265af9cb1a..fa6be0aab055 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
@@ -104,7 +104,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -119,6 +119,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -134,10 +138,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_store.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_store.js
index 21ce49d187f4..1444cf468174 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_store.js
@@ -106,10 +106,10 @@ const actions = {
       throw err
     })
   },
-  deleteSyslogForwarder: ({ commit }, data) => {
+  deleteSyslogForwarder: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('ITEM_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue
index 4797e48c0f64..0db695beec21 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue
@@ -123,7 +123,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 import { typeOptions } from '../config'
 
 const setup = (props, context) => {
@@ -139,6 +139,11 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -154,10 +159,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/ToggleStatus.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/ToggleStatus.js
index 68cb873e6a79..f33f7333f241 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/ToggleStatus.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/ToggleStatus.js
@@ -54,9 +54,6 @@ export const props = {
   },
   item: {
     type: Object
-  },
-  searchableStoreName: {
-    type: String
   }
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_store.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_store.js
index 4749ec29aab0..47a776083f2e 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_store.js
@@ -128,10 +128,10 @@ const actions = {
       throw err
     })
   },
-  deleteSyslogParser: ({ commit }, data) => {
+  deleteSyslogParser: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('ITEM_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue
index dbb69fcb1755..62523ea6fbc0 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue
@@ -111,7 +111,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -126,6 +126,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -141,10 +145,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_store.js b/html/pfappserver/root/src/views/Configuration/wmiRules/_store.js
index baf0bd1e0dcc..e6582d6ec28d 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_store.js
@@ -106,10 +106,10 @@ const actions = {
       throw err
     })
   },
-  deleteWmiRule: ({ commit }, data) => {
+  deleteWmiRule: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('ITEM_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue
index 96bc7962c6e8..4bbfd0b5b1b6 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue
@@ -103,7 +103,7 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
@@ -118,6 +118,10 @@ const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const router = useRouter($router)
 
   const tableRef = ref(null)
@@ -133,10 +137,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteAdminRole', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_store.js b/html/pfappserver/root/src/views/Configuration/wrix/_store.js
index 1f2ea1b34a6f..c34bd9cd4f46 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_store.js
@@ -84,10 +84,10 @@ const actions = {
       throw err
     })
   },
-  deleteWrixLocation: ({ commit }, data) => {
+  deleteWrixLocation: ({ commit }, id) => {
     commit('ITEM_REQUEST', types.DELETING)
-    return api.delete(data).then(response => {
-      commit('ITEM_DESTROYED', data)
+    return api.delete(id).then(response => {
+      commit('ITEM_DESTROYED', id)
       return response
     }).catch(err => {
       commit('ITEM_ERROR', err.response)

From 24ef0ef6b7e0974f791b518e874307cedb5c3f88 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 17 Jun 2021 08:16:15 -0400
Subject: [PATCH 60/72] fix linting errors

---
 .../root/src/views/Configuration/_store/preferences.js     | 7 +++----
 .../Configuration/fingerbank/dhcpv6Enterprises/_router.js  | 1 -
 .../views/Configuration/fingerbank/macVendors/_router.js   | 1 -
 .../sslCertificates/_composables/useCollection.js          | 1 -
 .../views/Configuration/tenants/_composables/useStore.js   | 2 +-
 5 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/_store/preferences.js b/html/pfappserver/root/src/views/Configuration/_store/preferences.js
index 2f2298242aa4..37cc7f853245 100644
--- a/html/pfappserver/root/src/views/Configuration/_store/preferences.js
+++ b/html/pfappserver/root/src/views/Configuration/_store/preferences.js
@@ -1,6 +1,5 @@
-import { customRef, ref, watch } from '@vue/composition-api'
+import { customRef } from '@vue/composition-api'
 import { defineStore } from 'pinia'
-import { createDebouncer } from 'promised-debounce'
 import store from '@/store' // required for 'system/version'
 import apiCall from '@/utils/api'
 
@@ -94,13 +93,13 @@ export const useStore = defineStore({
       if (JSON.stringify(value) === JSON.stringify(this.cache[id]))
         return Promise.resolve(this.cache[id])
       if (value === undefined) {
-        return api.removePreference(id).then(item => {
+        return api.removePreference(id).then(() => {
           this.cache[id] = undefined
           return this.cache[id]
         })
       }
       else {
-        return api.setPreference(id, value).then(item => {
+        return api.setPreference(id, value).then(() => {
           this.cache[id] = value
           return this.cache[id]
         })
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_router.js
index 7193a5377880..edce4633471c 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_router.js
@@ -1,4 +1,3 @@
-import { toRefs } from '@vue/composition-api'
 import store from '@/store'
 import { TheTabs } from '../_components/'
 const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_router.js b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_router.js
index f3dff386d4e9..299705a00bf2 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_router.js
@@ -1,4 +1,3 @@
-import { toRefs } from '@vue/composition-api'
 import store from '@/store'
 import { TheTabs } from '../_components/'
 const TheView = () => import(/* webpackChunkName: "Fingerbank" */ './_components/TheView')
diff --git a/html/pfappserver/root/src/views/Configuration/sslCertificates/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/sslCertificates/_composables/useCollection.js
index 5cbf0e3e0e23..166cd15e27af 100644
--- a/html/pfappserver/root/src/views/Configuration/sslCertificates/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/sslCertificates/_composables/useCollection.js
@@ -1,5 +1,4 @@
 import { computed, toRefs } from '@vue/composition-api'
-import i18n from '@/utils/locale'
 
 export const useItemTitle = (props) => {
   const {
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useStore.js b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useStore.js
index 40861a07f6d1..c23d813b20ba 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useStore.js
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useStore.js
@@ -16,7 +16,7 @@ export default defineStore({
   },
 
   actions: {
-    getCollection: (state) => {
+    getCollection: () => {
 
     }
   }

From 3e8978c4e2399a486147bedf8b256e21b4c3ed6b Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 17 Jun 2021 08:21:19 -0400
Subject: [PATCH 61/72] fix domain delete

---
 .../Configuration/domains/_components/TheSearch.vue  | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
index c01984bc1743..740482d6999b 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
@@ -127,12 +127,16 @@ import { ref, toRefs } from '@vue/composition-api'
 import { useBootstrapTableSelected } from '@/composables/useBootstrap'
 import { useTableColumnsItems } from '@/composables/useCsv'
 import { useDownload } from '@/composables/useDownload'
-import { useSearch, useRouter } from '../_composables/useCollection'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
 
 const setup = (props, context) => {
 
   const { root: { $router, $store } = {} } = context
 
+  const {
+    deleteItem
+  } = useStore($store)
+
   const search = useSearch()
   const {
     reSearch
@@ -157,10 +161,8 @@ const setup = (props, context) => {
   }
 
   const onRemove = id => {
-    $store.dispatch('$_admin_roles/deleteDomain', id)
-      .then(() => {
-        reSearch()
-      })
+    deleteItem({ id })
+      .then(() => reSearch())
   }
 
   return {

From 76b6a6a3e57ebfde2034b2d9e362783e77a849f7 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 17 Jun 2021 08:44:58 -0400
Subject: [PATCH 62/72] replace empty table

---
 .../Configuration/adminRoles/_components/TheSearch.vue |  8 ++++----
 .../billingTiers/_components/TheSearch.vue             |  8 ++++----
 .../connectionProfiles/_components/TheSearch.vue       |  6 +++---
 .../Configuration/domains/_components/TheSearch.vue    |  8 ++++----
 .../filterEngines/_components/TheSearch.vue            |  6 +++---
 .../fingerbank/combinations/_components/TheSearch.vue  |  8 ++++----
 .../fingerbank/devices/_components/TheSearch.vue       | 10 +++++-----
 .../dhcpFingerprints/_components/TheSearch.vue         |  8 ++++----
 .../fingerbank/dhcpVendors/_components/TheSearch.vue   |  8 ++++----
 .../dhcpv6Enterprises/_components/TheSearch.vue        |  8 ++++----
 .../dhcpv6Fingerprints/_components/TheSearch.vue       |  8 ++++----
 .../fingerbank/macVendors/_components/TheSearch.vue    |  8 ++++----
 .../fingerbank/userAgents/_components/TheSearch.vue    |  8 ++++----
 .../Configuration/firewalls/_components/TheSearch.vue  |  8 ++++----
 .../floatingDevices/_components/TheSearch.vue          |  8 ++++----
 .../maintenanceTasks/_components/TheSearch.vue         |  8 ++++----
 .../networkBehaviorPolicy/_components/TheSearch.vue    |  8 ++++----
 .../trafficShapingPolicies/_components/TheSearch.vue   |  8 ++++----
 .../pkiProviders/_components/TheSearch.vue             |  8 ++++----
 .../provisioners/_components/TheSearch.vue             |  8 ++++----
 .../Configuration/realms/_components/TheSearch.vue     |  2 --
 .../Configuration/realms/_components/TheTable.vue      |  8 ++++----
 .../scanEngines/_components/TheSearch.vue              |  8 ++++----
 .../securityEvents/_components/TheSearch.vue           |  8 ++++----
 .../selfServices/_components/TheSearch.vue             |  8 ++++----
 .../Configuration/sources/_components/TheSearch.vue    |  2 --
 .../Configuration/sources/_components/TheTable.vue     |  8 ++++----
 .../switchGroups/_components/TheSearch.vue             |  8 ++++----
 .../switchTemplates/_components/TheSearch.vue          |  8 ++++----
 .../Configuration/switches/_components/TheSearch.vue   |  8 ++++----
 .../syslogForwarders/_components/TheSearch.vue         |  8 ++++----
 .../syslogParsers/_components/TheSearch.vue            |  8 ++++----
 .../Configuration/wmiRules/_components/TheSearch.vue   |  8 ++++----
 .../views/Configuration/wrix/_components/TheSearch.vue |  8 ++++----
 34 files changed, 127 insertions(+), 131 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
index 20d9a202706b..501a996817ca 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
@@ -31,7 +31,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -93,16 +93,16 @@ import {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 import { ref, toRefs } from '@vue/composition-api'
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue
index b818b6e18021..a4ec34fcff55 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue
@@ -30,7 +30,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -92,16 +92,16 @@ import {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 import { ref, toRefs } from '@vue/composition-api'
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
index 141a2c1de043..23a8c5a70c76 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
@@ -26,7 +26,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -99,9 +99,9 @@ import {
   BaseButtonHelp,
   BaseSearch,
   BaseSearchInputColumns,
+  BaseTableEmpty,
   BaseTableSortable
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 import ToggleStatus from './ToggleStatus'
 
 const components = {
@@ -109,8 +109,8 @@ const components = {
   BaseButtonHelp,
   BaseSearch,
   BaseSearchInputColumns,
+  BaseTableEmpty,
   BaseTableSortable,
-  pfEmptyTable,
   ToggleStatus
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
index 740482d6999b..76c49f62164e 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
@@ -30,7 +30,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -102,10 +102,10 @@ import {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
 import BaseButtonJoin from './BaseButtonJoin'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
@@ -113,7 +113,7 @@ const components = {
   BaseButtonJoin,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 const props = {
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
index 822718884605..9b08015cebcf 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
@@ -25,7 +25,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -97,9 +97,9 @@ import {
   BaseButtonHelp,
   BaseSearch,
   BaseSearchInputColumns,
+  BaseTableEmpty,
   BaseTableSortable
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 import ToggleStatus from './ToggleStatus'
 
 const components = {
@@ -107,8 +107,8 @@ const components = {
   BaseButtonHelp,
   BaseSearch,
   BaseSearchInputColumns,
+  BaseTableEmpty,
   BaseTableSortable,
-  pfEmptyTable,
   ToggleStatus
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheSearch.vue
index aa219b9e9b4a..17933c5947db 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheSearch.vue
@@ -29,7 +29,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -93,16 +93,16 @@
 import {
   BaseButtonConfirm,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 import pfFingerbankScore from '@/components/pfFingerbankScore'
 
 const components = {
   BaseButtonConfirm,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable,
+  BaseTableEmpty,
   pfFingerbankScore
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue
index 7998677171a4..af928104434b 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue
@@ -43,7 +43,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -117,17 +117,17 @@
 import {
   BaseButtonConfirm,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
 import BreadCrumb from './BreadCrumb'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseSearch,
   BaseSearchInputColumns,
-  BreadCrumb,
-  pfEmptyTable
+  BaseTableEmpty,
+  BreadCrumb
 }
 
 const props = {
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue
index 1f0582155622..1dda354db53f 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue
@@ -37,7 +37,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -98,15 +98,15 @@
 import {
   BaseButtonConfirm,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 const props = {
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue
index 66bc457fc8da..d14a234e39f7 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue
@@ -37,7 +37,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -98,15 +98,15 @@
 import {
   BaseButtonConfirm,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 const props = {
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue
index 81f9aa1806a4..afdc262a58d7 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue
@@ -37,7 +37,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -98,15 +98,15 @@
 import {
   BaseButtonConfirm,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 const props = {
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue
index 0d73131b6138..b7aa27074233 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue
@@ -37,7 +37,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -98,15 +98,15 @@
 import {
   BaseButtonConfirm,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 const props = {
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue
index 8f9f1509724e..a712c3ba4266 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue
@@ -37,7 +37,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -98,15 +98,15 @@
 import {
   BaseButtonConfirm,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 const props = {
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue
index 556b1e405a8a..b12101eb880d 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue
@@ -37,7 +37,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -98,15 +98,15 @@
 import {
   BaseButtonConfirm,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 const props = {
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
index dc259bd7c368..8d1863724677 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
@@ -31,7 +31,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -93,16 +93,16 @@ import {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 import { ref, toRefs } from '@vue/composition-api'
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
index 7f65bddce303..bf1fd146b8f7 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
@@ -30,7 +30,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -92,16 +92,16 @@ import {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 import { ref, toRefs } from '@vue/composition-api'
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheSearch.vue
index 905f407cb2f9..93982950c4a5 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheSearch.vue
@@ -24,7 +24,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -83,9 +83,9 @@ import {
   BaseButtonHelp,
   BaseButtonService,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 import ToggleStatus from './ToggleStatus'
 
 const components = {
@@ -94,7 +94,7 @@ const components = {
   BaseButtonService,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable,
+  BaseTableEmpty,
   ToggleStatus
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
index 0fb3fe246206..e30114e43eaf 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
@@ -32,7 +32,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -100,9 +100,9 @@ import {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 import ToggleStatus from './ToggleStatus'
 
 const components = {
@@ -110,7 +110,7 @@ const components = {
   BaseButtonHelp,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable,
+  BaseTableEmpty,
   ToggleStatus
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue
index 054eb8d3777e..d810263f0896 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue
@@ -33,7 +33,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -101,15 +101,15 @@
 import {
   BaseButtonConfirm,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 import { ref, toRefs } from '@vue/composition-api'
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
index 87c307503653..030b5d8233a3 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
@@ -31,7 +31,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -93,16 +93,16 @@ import {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 import { ref, toRefs } from '@vue/composition-api'
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue
index df5128512123..dcddacb3f357 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue
@@ -34,7 +34,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -96,16 +96,16 @@ import {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 import { ref, toRefs } from '@vue/composition-api'
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/realms/_components/TheSearch.vue
index eea634ebea8b..fd135f80498e 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/realms/_components/TheSearch.vue
@@ -39,7 +39,6 @@ import {
   BaseSearchInputColumns,
   BaseTableSortable
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 import TheTable from './TheTable'
 
 const components = {
@@ -49,7 +48,6 @@ const components = {
   BaseSearch,
   BaseSearchInputColumns,
   BaseTableSortable,
-  pfEmptyTable,
   TheTable
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_components/TheTable.vue b/html/pfappserver/root/src/views/Configuration/realms/_components/TheTable.vue
index 27d7665047aa..accc3ba6d345 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_components/TheTable.vue
+++ b/html/pfappserver/root/src/views/Configuration/realms/_components/TheTable.vue
@@ -16,7 +16,7 @@
     >
       <template v-slot:empty>
         <slot name="emptySearch" v-bind="{ isLoading }">
-            <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
         </slot>
       </template>
       <template #head(selected)>
@@ -99,16 +99,16 @@ import {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearchInputColumns,
+  BaseTableEmpty,
   BaseTableSortable
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearchInputColumns,
-  BaseTableSortable,
-  pfEmptyTable
+  BaseTableEmpty,
+  BaseTableSortable
 }
 
 const props = {
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
index 0ef5c6432e10..8955b130cc8b 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
@@ -34,7 +34,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -96,16 +96,16 @@ import {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 import { ref, toRefs } from '@vue/composition-api'
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue
index 47cb51d95326..5157d5e323bc 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue
@@ -30,7 +30,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -103,17 +103,17 @@ import {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
 import ToggleStatus from './ToggleStatus'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable,
+  BaseTableEmpty,
   ToggleStatus
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue
index 106b35b204c3..bf616ccfb7e6 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue
@@ -30,7 +30,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -92,16 +92,16 @@ import {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 import { ref, toRefs } from '@vue/composition-api'
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/TheSearch.vue
index 414f9fa98501..f22bd3651670 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/TheSearch.vue
@@ -89,7 +89,6 @@ import {
   BaseSearchInputColumns,
   BaseTableSortable
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 import TheTable from './TheTable'
 
 const components = {
@@ -98,7 +97,6 @@ const components = {
   BaseSearch,
   BaseSearchInputColumns,
   BaseTableSortable,
-  pfEmptyTable,
   TheTable
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue
index 361b9db46207..fca7edf663ee 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue
@@ -16,7 +16,7 @@
     >
       <template v-slot:empty>
         <slot name="emptySearch" v-bind="{ isLoading }">
-            <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+          <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
         </slot>
       </template>
       <template #head(selected)>
@@ -79,16 +79,16 @@ import {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearchInputColumns,
+  BaseTableEmpty,
   BaseTableSortable
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseButtonHelp,
   BaseSearchInputColumns,
-  BaseTableSortable,
-  pfEmptyTable
+  BaseTableEmpty,
+  BaseTableSortable
 }
 
 const props = {
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
index 40494c76a8da..c1b761ebff8a 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
@@ -27,7 +27,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -97,15 +97,15 @@
 import {
   BaseButtonConfirm,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 import { ref, toRefs } from '@vue/composition-api'
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue
index f837799cd636..c5caccbf5b99 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue
@@ -27,7 +27,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -89,15 +89,15 @@
 import {
   BaseButtonConfirm,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 import { ref, toRefs } from '@vue/composition-api'
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
index b8f15f226ae3..5d46ac9609f6 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
@@ -33,7 +33,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -111,15 +111,15 @@
 import {
   BaseButtonConfirm,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 import { ref, toRefs } from '@vue/composition-api'
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
index fa6be0aab055..59ce50c20832 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
@@ -27,7 +27,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -89,15 +89,15 @@
 import {
   BaseButtonConfirm,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 import { ref, toRefs } from '@vue/composition-api'
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue
index 0db695beec21..ce58f1463bb2 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue
@@ -37,7 +37,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -104,9 +104,9 @@ import {
   BaseButtonHelp,
   BaseButtonService,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 import ToggleStatus from './ToggleStatus'
 
 const components = {
@@ -115,7 +115,7 @@ const components = {
   BaseButtonService,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable,
+  BaseTableEmpty,
   ToggleStatus
 }
 
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue
index 62523ea6fbc0..e9c3eb98aa58 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue
@@ -30,7 +30,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -96,15 +96,15 @@
 import {
   BaseButtonConfirm,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 import { ref, toRefs } from '@vue/composition-api'
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue
index 4bbfd0b5b1b6..75a58a805184 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue
@@ -27,7 +27,7 @@
       >
         <template v-slot:empty>
           <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
           </slot>
         </template>
         <template #head(selected)>
@@ -88,15 +88,15 @@
 import {
   BaseButtonConfirm,
   BaseSearch,
-  BaseSearchInputColumns
+  BaseSearchInputColumns,
+  BaseTableEmpty
 } from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
 
 const components = {
   BaseButtonConfirm,
   BaseSearch,
   BaseSearchInputColumns,
-  pfEmptyTable
+  BaseTableEmpty
 }
 
 import { ref, toRefs } from '@vue/composition-api'

From cb2bee69ce20fd6030b7fb8146e4dcee4ab9d506 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 17 Jun 2021 09:21:41 -0400
Subject: [PATCH 63/72] add advanced search to tenants

---
 .../tenants/_components/TheList.vue           | 193 ------------------
 .../tenants/_components/TheSearch.vue         | 167 +++++++++++++++
 .../tenants/_composables/useCollection.js     |  80 ++++++--
 .../views/Configuration/tenants/_router.js    |   7 +-
 .../src/views/Configuration/tenants/config.js |  62 ------
 5 files changed, 239 insertions(+), 270 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/tenants/_components/TheList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/tenants/_components/TheSearch.vue
 delete mode 100644 html/pfappserver/root/src/views/Configuration/tenants/config.js

diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheList.vue b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheList.vue
deleted file mode 100644
index e2ee246a824a..000000000000
--- a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheList.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<template>
-  <b-card no-body>
-    <b-card-header>
-      <div class="float-right">
-        <base-input-toggle-advanced-mode
-          v-model="advancedMode"
-          :disabled="isLoading"
-          label-left
-        />
-      </div>
-      <h4 class="mb-0">
-        {{ $t('Tenants') }}
-        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_tenants" />
-      </h4>
-    </b-card-header>
-    <div class="card-body">
-      <transition name="fade" mode="out-in">
-        <div v-if="advancedMode">
-          <b-form @submit.prevent="onSearchAdvanced" @reset.prevent="onSearchReset">
-            <base-search-input-advanced
-              v-model="conditionAdvanced"
-              :disabled="isLoading"
-              :fields="fields"
-              @reset="onSearchReset"
-              @search="onSearchAdvanced"
-            />
-            <b-container fluid class="text-right mt-3 px-0">
-              <b-button class="mr-1" type="reset" variant="secondary" :disabled="isLoading">{{ $t('Clear') }}</b-button>
-              <base-button-save-search
-                save-search-namespace="tenants-advanced"
-                v-model="conditionAdvanced"
-                :disabled="isLoading"
-                @search="onSearchAdvanced"
-              />
-            </b-container>
-          </b-form>
-        </div>
-        <base-search-input-basic v-else
-          save-search-namespace="tenants-basic"
-          v-model="conditionBasic"
-          :disabled="isLoading"
-          :placeholder="$t('Search by name or description')"
-          @reset="onSearchReset"
-          @search="onSearchBasic"
-        />
-      </transition>
-    </div>
-    <div class="card-body pt-0">
-      <b-row>
-        <b-col cols="auto" class="mr-auto mb-3">
-          <b-button variant="outline-primary" :to="{ name: 'newTenant' }">{{ $t('New Tenant') }}</b-button>
-        </b-col>
-      </b-row>
-      <b-row align-h="end" align-v="center">
-        <b-col>
-          <base-search-input-columns
-            v-model="columns"
-            :disabled="isLoading"
-          />
-        </b-col>
-        <b-col cols="auto">
-          <b-container fluid>
-            <b-row align-v="center">
-              <base-search-input-limit
-                v-model="limit"
-                size="md"
-                :limits="limits"
-                :disabled="isLoading"
-              />
-              <base-search-input-page
-                v-model="page"
-                :limit="limit"
-                :total-rows="totalRows"
-                :disabled="isLoading"
-              />
-              <base-button-export-csv
-                class="mb-3" size="md"
-                :filename="`${$route.path.slice(1).replace('/', '-')}.csv`"
-                :disabled="isLoading"
-                :columns="columns" :data="items"
-              />
-            </b-row>
-          </b-container>
-        </b-col>
-      </b-row>
-      <b-table
-        :busy="isLoading"
-        :hover="items.length > 0"
-        :items="items"
-        :fields="visibleColumns"
-        :sort-by="sortBy"
-        :sort-desc="sortDesc"
-        @sort-changed="onSortChanged"
-        @row-clicked="onRowClicked"
-        show-empty
-        responsive
-        no-local-sorting
-        sort-icon-left
-        fixed
-        striped
-      >
-        <template v-slot:empty>
-          <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
-          </slot>
-        </template>
-        <template v-slot:cell(buttons)="{ item }">
-          <span class="float-right text-nowrap text-right">
-            <base-button-confirm v-if="!item.not_deletable"
-              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
-              :disabled="isLoading"
-              :confirm="$t('Delete Tenant?')"
-              @click="onRemove(item.id)"
-            >{{ $t('Delete') }}</base-button-confirm>
-            <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="onClone(item.id)">{{ $t('Clone') }}</b-button>
-          </span>
-        </template>
-      </b-table>
-    </div>
-  </b-card>
-</template>
-<script>
-import {
-  BaseButtonConfirm,
-  BaseButtonExportCsv,
-  BaseButtonHelp,
-  BaseButtonSaveSearch,
-  BaseInputToggleAdvancedMode,
-  BaseSearchInputBasic,
-  BaseSearchInputAdvanced,
-  BaseSearchInputColumns,
-  BaseSearchInputLimit,
-  BaseSearchInputPage,
-} from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
-
-const components = {
-  BaseButtonConfirm,
-  BaseButtonExportCsv,
-  BaseButtonHelp,
-  BaseButtonSaveSearch,
-  BaseInputToggleAdvancedMode,
-  BaseSearchInputBasic,
-  BaseSearchInputAdvanced,
-  BaseSearchInputColumns,
-  BaseSearchInputLimit,
-  BaseSearchInputPage,
-  pfEmptyTable
-}
-
-import { useSearch, useRouter } from '../_composables/useCollection'
-
-const setup = (props, context) => {
-
-  const { root: { $router, $store } = {} } = context
-
-  const search = useSearch(props, context)
-  const {
-    reSearch
-  } = search
-
-  const onRowClicked = item => {
-    const {
-      goToItem
-    } = useRouter($router)
-    goToItem(item)
-  }
-
-  const onClone = id => {
-    $router.push({ name: 'cloneTenant', params: { id } })
-  }
-
-  const onRemove = id => {
-    $store.dispatch('$_tenants/deleteTenant', id)
-      .then(() => reSearch())
-  }
-
-  return {
-    onRowClicked,
-    onClone,
-    onRemove,
-    ...search
-  }
-}
-
-// @vue/component
-export default {
-  name: 'the-list',
-  inheritAttrs: false,
-  components,
-  setup
-}
-</script>
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheSearch.vue
new file mode 100644
index 000000000000..a0c7929bdab3
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheSearch.vue
@@ -0,0 +1,167 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center mb-0">
+        {{ $t('Tenants') }}
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_tenants" />
+      </h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New Tenant') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef"
+        :busy="isLoading"
+        :hover="items.length > 0"
+        :items="items"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        class="mb-0"
+        show-empty
+        no-local-sorting
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Tenant?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+          </span>
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableEmpty
+} from '@/components/new/'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableEmpty
+}
+
+import { ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const {
+    deleteItem
+  } = useStore($store)
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const onRemove = id => {
+    deleteItem({ id })
+      .then(() => reSearch())
+  }
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search)
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
index 47c7efb7ca95..08a7baa1384e 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
@@ -25,18 +25,74 @@ export { useRouter } from '../_router'
 
 export { useStore } from '../_store'
 
-import { useSearch as useConfigurationSearch } from '@/views/Configuration/_composables/useSearch'
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
 import api from '../_api'
-import {
-  columns,
-  fields
-} from '../config'
-export const useSearch = (props, context, options) => useConfigurationSearch(props, context, {
-  id: 'tenants',
+export const useSearch = makeSearch('tenants', {
   api,
-  columns,
-  fields,
-  sortBy: 'id',
-  defaultCondition: () => ([{ values: [{ field: 'name', op: 'contains', value: null }] }]),
-  ...options,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      class: 'text-nowrap',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'name',
+      label: 'Name', // i18n defer
+      sortable: true,
+      visible: true,
+      searchable: true
+    },
+    {
+      key: 'domain_name',
+      label: 'Domain Name', // i18n defer
+      sortable: true,
+      visible: true,
+      searchable: true
+    },
+    {
+      key: 'portal_domain_name',
+      label: 'Portal Domain Name', // i18n defer
+      sortable: true,
+      visible: true,
+      searchable: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Identifier'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'name',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'domain_name',
+      text: i18n.t('Domain name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'portal_domain_name',
+      text: i18n.t('Portal domain name'),
+      types: [conditionType.SUBSTRING]
+    }
+  ],
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_router.js b/html/pfappserver/root/src/views/Configuration/tenants/_router.js
index 90beef48ac50..d15d5c0b7407 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_router.js
@@ -1,7 +1,7 @@
 import store from '@/store'
 import StoreModule from './_store'
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ './_components/TheList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const useRouter = $router => {
@@ -10,7 +10,8 @@ export const useRouter = $router => {
     goToItem: params => $router
       .push({ name: 'tenant', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: params => $router.push({ name: 'cloneTenant', params })
+    goToClone: params => $router.push({ name: 'cloneTenant', params }),
+    goToNew: () => $router.push({ name: 'newTenant' })
   }
 }
 
@@ -24,7 +25,7 @@ export default [
   {
     path: 'tenants',
     name: 'tenants',
-    component: TheList,
+    component: TheSearch,
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/config.js b/html/pfappserver/root/src/views/Configuration/tenants/config.js
deleted file mode 100644
index 50043fa81729..000000000000
--- a/html/pfappserver/root/src/views/Configuration/tenants/config.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    class: 'text-nowrap',
-    label: i18n.t('Identifier'),
-    required: true,
-    sortable: true,
-    visible: true,
-    searchable: true
-  },
-  {
-    key: 'name',
-    label: i18n.t('Name'),
-    sortable: true,
-    visible: true,
-    searchable: true
-  },
-  {
-    key: 'domain_name',
-    label: i18n.t('Domain name'),
-    sortable: true,
-    visible: true,
-    searchable: true
-  },
-  {
-    key: 'portal_domain_name',
-    label: i18n.t('Portal domain name'),
-    sortable: true,
-    visible: true,
-    searchable: true
-  },
-  {
-    key: 'buttons',
-    locked: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Identifier'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'name',
-    text: i18n.t('Name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'domain_name',
-    text: i18n.t('Domain name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'portal_domain_name',
-    text: i18n.t('Portal domain name'),
-    types: [conditionType.SUBSTRING]
-  }
-]

From 607a57c91fcc695448278396742fbbc9d674dc6a Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 17 Jun 2021 10:10:13 -0400
Subject: [PATCH 64/72] add advanced search to roles

---
 .../roles/_components/TheList.vue             | 371 ------------------
 .../roles/_components/TheSearch.vue           | 324 +++++++++++++++
 .../roles/_composables/useCollection.js       |  76 +++-
 .../src/views/Configuration/roles/_router.js  |   7 +-
 .../src/views/Configuration/roles/config.js   |  80 +---
 5 files changed, 402 insertions(+), 456 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/roles/_components/TheList.vue
 create mode 100644 html/pfappserver/root/src/views/Configuration/roles/_components/TheSearch.vue

diff --git a/html/pfappserver/root/src/views/Configuration/roles/_components/TheList.vue b/html/pfappserver/root/src/views/Configuration/roles/_components/TheList.vue
deleted file mode 100644
index 9a6f5d25e7b5..000000000000
--- a/html/pfappserver/root/src/views/Configuration/roles/_components/TheList.vue
+++ /dev/null
@@ -1,371 +0,0 @@
-<template>
-  <b-card no-body>
-    <b-card-header>
-      <div class="float-right">
-        <base-input-toggle-advanced-mode
-          v-model="advancedMode"
-          :disabled="isLoading"
-          label-left
-        />
-      </div>
-      <h4 class="mb-0">
-        {{ $t('Roles') }}
-        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_introduction_to_role_based_access_control" />
-      </h4>
-    </b-card-header>
-    <div class="card-body">
-      <transition name="fade" mode="out-in">
-        <div v-if="advancedMode">
-          <b-form @submit.prevent="onSearchAdvanced" @reset.prevent="onSearchReset">
-            <base-search-input-advanced
-              v-model="conditionAdvanced"
-              :disabled="isLoading"
-              :fields="fields"
-              @reset="onSearchReset"
-              @search="onSearchAdvanced"
-            />
-            <b-container fluid class="text-right mt-3 px-0">
-              <b-button class="mr-1" type="reset" variant="secondary" :disabled="isLoading">{{ $t('Clear') }}</b-button>
-              <base-button-save-search
-                save-search-namespace="roles-advanced"
-                v-model="conditionAdvanced"
-                :disabled="isLoading"
-                @search="onSearchAdvanced"
-              />
-            </b-container>
-          </b-form>
-        </div>
-        <base-search-input-basic v-else
-          save-search-namespace="roles-basic"
-          v-model="conditionBasic"
-          :disabled="isLoading"
-          :placeholder="$t('Search by name or description')"
-          @reset="onSearchReset"
-          @search="onSearchBasic"
-        />
-      </transition>
-    </div>
-    <div class="card-body pt-0">
-      <b-row>
-        <b-col cols="auto" class="mr-auto mb-3">
-          <b-button variant="outline-primary" :to="{ name: 'newRole' }">{{ $t('New Role') }}</b-button>
-        </b-col>
-      </b-row>
-      <b-row align-h="end" align-v="center">
-        <b-col>
-          <base-search-input-columns
-            v-model="columns"
-            :disabled="isLoading"
-          />
-        </b-col>
-        <b-col cols="auto">
-          <b-container fluid>
-            <b-row align-v="center">
-              <base-search-input-limit
-                v-model="limit"
-                size="md"
-                :limits="limits"
-                :disabled="isLoading"
-              />
-              <base-search-input-page
-                v-model="page"
-                :limit="limit"
-                :total-rows="totalRows"
-                :disabled="isLoading"
-              />
-              <base-button-export-csv
-                class="mb-3" size="md"
-                :filename="`${$route.path.slice(1).replace('/', '-')}.csv`"
-                :disabled="isLoading"
-                :columns="columns" :data="itemsTree"
-              />
-            </b-row>
-          </b-container>
-        </b-col>
-      </b-row>
-      <b-table
-        class="the-tree-list"
-        :busy="isLoading"
-        :hover="itemsTree.length > 0"
-        :items="itemsTree"
-        :fields="visibleColumns"
-        :sort-by="sortBy"
-        :sort-desc="sortDesc"
-        @sort-changed="onSortChanged"
-        @row-clicked="onRowClicked"
-        show-empty
-        small
-        borderless
-        responsive
-        no-local-sorting
-        sort-icon-left
-        fixed
-        striped
-      >
-        <template v-slot:empty>
-          <slot name="emptySearch" v-bind="{ isLoading }">
-              <pf-empty-table :is-loading="isLoading">{{ $t('No results found') }}</pf-empty-table>
-          </slot>
-        </template>
-        <template v-slot:cell(id)="{ item }">
-          <icon v-for="(icon, i) in item._tree" :key="i"
-            v-bind="icon" />
-          <b-link v-if="item.children"
-            :class="(collapsedNodes.includes(item.id)) ? 'text-danger' : 'text-secondary'"
-             @click.stop="onToggleNode(item.id)"
-          >
-            <icon v-bind="item._icon" />
-          </b-link>
-          <icon v-else
-            v-bind="item._icon" />
-          {{ item.id }}
-        </template>
-        <template v-slot:cell(buttons)="{ item }">
-          <span class="float-right text-nowrap text-right">
-            <base-button-confirm v-if="!item.not_deletable"
-              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
-              :disabled="isLoading"
-              :confirm="$t('Delete Role?')"
-              @click="onRemove(item.id)"
-            >{{ $t('Delete') }}</base-button-confirm>
-            <b-button size="sm" variant="outline-primary" class="mr-1" @click.stop.prevent="onClone(item.id)">{{ $t('Clone') }}</b-button>
-            <b-button v-if="isInline" size="sm" variant="outline-primary" class="mr-1" :to="trafficShapingRoute(item.id)">{{ $t('Traffic Shaping') }}</b-button>
-          </span>
-        </template>
-      </b-table>
-      <b-modal v-model="showDeleteErrorsModal" size="lg"
-        centered lazy scrollable
-        :no-close-on-backdrop="isLoading"
-        :no-close-on-esc="isLoading"
-      >
-        <template v-slot:modal-title>
-          {{ $t('Delete Role') }} <b-badge variant="secondary">{{ deleteId }}</b-badge>
-        </template>
-        <b-media no-body class="alert alert-danger">
-          <template v-slot:aside>
-            <icon name="exclamation-triangle" scale="2"/>
-          </template>
-          <div class="mx-2">{{ $t('The role could not be deleted. Either manually handle the following errors and try again, or re-reassign the resources to another existing role.') }}</div>
-        </b-media>
-        <h5>{{ $t('Role is still in use for:') }}</h5>
-        <b-row v-for="error in deleteErrors" :key="error.reason">
-          <b-col cols="auto" class="mr-auto">{{ reasons[error.reason] }}</b-col>
-          <b-col cols="auto">{{ error.reason }}</b-col>
-        </b-row>
-        <template v-slot:modal-footer>
-          <b-row class="w-100">
-            <b-col cols="auto" class="mr-auto pl-0">
-              <b-form-select size="sm" class="d-inline"
-                v-model="reassignRole"
-                :options="reassignableRoles"
-              />
-              <b-button size="sm" class="ml-1" variant="outline-primary"  @click="reAssign()" :disabled="isLoading">{{ $i18n.t('Reassign Role') }}</b-button>
-            </b-col>
-            <b-col cols="auto" class="pr-0">
-              <b-button variant="secondary"  @click="showDeleteErrorsModal = false" :disabled="isLoading">{{ $i18n.t('Fix Manually') }}</b-button>
-            </b-col>
-          </b-row>
-        </template>
-      </b-modal>
-    </div>
-  </b-card>
-</template>
-<script>
-import {
-  BaseButtonConfirm,
-  BaseButtonExportCsv,
-  BaseButtonHelp,
-  BaseButtonSaveSearch,
-  BaseInputToggleAdvancedMode,
-  BaseSearchInputBasic,
-  BaseSearchInputAdvanced,
-  BaseSearchInputColumns,
-  BaseSearchInputLimit,
-  BaseSearchInputPage,
-} from '@/components/new/'
-import pfEmptyTable from '@/components/pfEmptyTable'
-
-const components = {
-  BaseButtonConfirm,
-  BaseButtonExportCsv,
-  BaseButtonHelp,
-  BaseButtonSaveSearch,
-  BaseInputToggleAdvancedMode,
-  BaseSearchInputBasic,
-  BaseSearchInputAdvanced,
-  BaseSearchInputColumns,
-  BaseSearchInputLimit,
-  BaseSearchInputPage,
-  pfEmptyTable
-}
-
-import { computed, ref } from '@vue/composition-api'
-import { useSearch, useRouter } from '../_composables/useCollection'
-import { useNodeInheritance } from '../_composables/useNodeInheritance'
-import { reasons } from '../config'
-
-const setup = (props, context) => {
-
-  const { root: { $router, $store } = {} } = context
-
-  const search = useSearch(props, context)
-  const {
-    reSearch,
-    items,
-    sortBy,
-    sortDesc,
-    onSearchBasic: _onSearchBasic,
-    onSearchAdvanced: _onSearchAdvanced,
-    onSearchReset: _onSearchReset
-  } = search
-
-  const onSearchBasic = () => {
-    clearExpandedNodes()
-    return _onSearchBasic()
-  }
-
-  const onSearchAdvanced = () => {
-    clearExpandedNodes()
-    return _onSearchAdvanced()
-  }
-
-  const onSearchReset = () => {
-    clearExpandedNodes()
-    return _onSearchReset()
-  }
-
-  const onRowClicked = item => {
-    const {
-      goToItem
-    } = useRouter($router)
-    goToItem(item)
-  }
-
-  const onClone = id => {
-    $router.push({ name: 'cloneRole', params: { id } })
-  }
-
-  const deleteId = ref(null)
-  const deleteErrors = ref(null)
-  const showDeleteErrorsModal = ref(false)
-  const onRemove = id => {
-    $store.dispatch('$_roles/deleteRole', id)
-      .then(() => reSearch())
-      .catch(error => {
-        const { response: { data: { errors = [] } = {} } = {} } = error
-        if (errors.length) {
-          deleteId.value = id
-          deleteErrors.value = errors
-          showDeleteErrorsModal.value = true
-        }
-      })
-  }
-
-  const reassignRole = ref('default')
-  const reassignableRoles = computed(() => {
-    return items.value
-      .filter(role => role.id !== deleteId.value)
-      .map(role => ({ text: role.id, value: role.id }))
-  })
-  const reAssign = () => {
-    $store.dispatch('$_roles/reassignRole', { from: deleteId.value, to: reassignRole.value })
-      .then(() => {
-        showDeleteErrorsModal.value = false
-        // cascade delete
-        onRemove(deleteId.value)
-      })
-  }
-
-  const _trafficShapingPolicies = ref([])
-  $store.dispatch('$_traffic_shaping_policies/all')
-    .then(response => {
-      _trafficShapingPolicies.value = response.map(policy => policy.id)
-    })
-
-  const trafficShapingRoute = id => {
-    return (_trafficShapingPolicies.value.includes(id))
-      ? { name: 'traffic_shaping', params: { id } } // exists
-      : { name: 'newTrafficShaping', params: { role: id } } // not exists
-  }
-
-  const isInline = computed(() => $store.getters['system/isInline'])
-
-  const {
-    collapsedNodes,
-    clearExpandedNodes,
-    onToggleNode,
-    itemsTree,
-  } = useNodeInheritance(items, sortBy, sortDesc)
-
-  return {
-    onSearchBasic,
-    onSearchAdvanced,
-    onSearchReset,
-    onRowClicked,
-    onClone,
-    onRemove,
-    deleteId,
-    deleteErrors,
-    showDeleteErrorsModal,
-    reassignRole,
-    reassignableRoles,
-    reasons,
-    reAssign,
-    trafficShapingRoute,
-    isInline,
-
-    collapsedNodes,
-    clearExpandedNodes,
-    onToggleNode,
-    itemsTree,
-
-    ...search
-  }
-}
-
-// @vue/component
-export default {
-  name: 'the-list',
-  inheritAttrs: false,
-  components,
-  setup
-}
-</script>
-
-<style lang="scss">
-$table-cell-height: 2.5 * $spacer !default;
-
-.the-tree-list {
-  thead[role="rowgroup"] {
-    border-bottom: 1px solid #dee2e6 !important;
-  }
-  tr[role="row"],
-  tr[role="row"] > th[role="columnheader"] {
-    cursor: pointer;
-    outline-width: 0;
-    td[role="cell"] {
-      height: $table-cell-height;
-      padding: 0 0.3rem;
-      word-wrap: nowrap;
-      div[variant="link"] {
-        line-height: 1em;
-      }
-    }
-    td[aria-colindex="1"] {
-      svg.fa-icon:not(.nav-icon) {
-        min-width: $table-cell-height;
-        height: auto;
-        max-height: $table-cell-height/2;
-        margin: 0.25rem 0;
-      }
-      svg.nav-icon {
-        height: $table-cell-height;
-        color: $gray-500;
-      }
-    }
-  }
-  .table-row-disabled {
-    opacity: 0.6;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/roles/_components/TheSearch.vue
new file mode 100644
index 000000000000..31b440899309
--- /dev/null
+++ b/html/pfappserver/root/src/views/Configuration/roles/_components/TheSearch.vue
@@ -0,0 +1,324 @@
+<template>
+  <b-card no-body>
+    <b-card-header>
+      <h4 class="d-flex align-items-center mb-0">
+        {{ $t('Roles') }}
+        <base-button-help class="text-black-50 ml-1" url="PacketFence_Installation_Guide.html#_introduction_to_role_based_access_control" />
+      </h4>
+    </b-card-header>
+    <div class="card-body">
+      <base-search :use-search="useSearch">
+        <b-button variant="outline-primary" @click="goToNew">{{ $t('New Role') }}</b-button>
+      </base-search>
+      <b-table ref="tableRef" class="the-tree-list mb-0"
+        :busy="isLoading"
+        :hover="itemsTree.length > 0"
+        :items="itemsTree"
+        :fields="visibleColumns"
+        :sort-by="sortBy"
+        :sort-desc="sortDesc"
+        @sort-changed="setSort"
+        @row-clicked="goToItem"
+        borderless
+        show-empty
+        small
+        no-local-sorting
+        response
+        sort-icon-left
+        fixed
+        striped
+        selectable
+        @row-selected="onRowSelected"
+      >
+        <template v-slot:empty>
+          <slot name="emptySearch" v-bind="{ isLoading }">
+            <base-table-empty :is-loading="isLoading">{{ $t('No results found') }}</base-table-empty>
+          </slot>
+        </template>
+        <template #head(selected)>
+          <span @click.stop.prevent="onAllSelected">
+            <template v-if="selected.length > 0">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #cell(selected)="{ index, rowSelected }">
+          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+            <template v-if="rowSelected">
+              <icon name="check-square" class="bg-white text-success" scale="1.125" />
+            </template>
+            <template v-else>
+              <icon name="square" class="border border-1 border-gray bg-white text-light" scale="1.125" />
+            </template>
+          </span>
+        </template>
+        <template #head(buttons)>
+          <base-search-input-columns
+            :disabled="isLoading"
+            :value="columns"
+            @input="setColumns"
+          />
+        </template>
+        <template #cell(buttons)="{ item }">
+          <span class="float-right text-nowrap text-right">
+            <base-button-confirm v-if="!item.not_deletable"
+              size="sm" variant="outline-danger" class="my-1 mr-1" reverse
+              :disabled="isLoading"
+              :confirm="$t('Delete Tenant?')"
+              @click="onRemove(item.id)"
+            >{{ $t('Delete') }}</base-button-confirm>
+            <b-button
+              size="sm" variant="outline-primary" class="mr-1"
+              @click.stop.prevent="goToClone(item)"
+            >{{ $t('Clone') }}</b-button>
+            <b-button v-if="isInline"
+              size="sm" variant="outline-primary" class="mr-1"
+              :to="trafficShapingRoute(item.id)"
+            >{{ $t('Traffic Shaping') }}</b-button>
+          </span>
+        </template>
+        <template #cell(id)="{ item }">
+          <icon v-for="(icon, i) in item._tree" :key="i"
+            v-bind="icon" />
+          <b-link v-if="item.children"
+            :class="(collapsedNodes.includes(item.id)) ? 'text-danger' : 'text-secondary'"
+             @click.stop="onToggleNode(item.id)"
+          >
+            <icon v-bind="item._icon" />
+          </b-link>
+          <icon v-else
+            v-bind="item._icon" />
+          {{ item.id }}
+        </template>
+      </b-table>
+      <b-container fluid v-if="selected.length"
+        class="mt-3 p-0">
+        <b-dropdown variant="outline-primary" toggle-class="text-decoration-none">
+          <template #button-content>
+            {{ $t('{num} selected', { num: selected.length }) }}
+          </template>
+          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        </b-dropdown>
+      </b-container>
+    </div>
+
+    <b-modal v-model="showDeleteErrorsModal" size="lg"
+      centered lazy scrollable
+      :no-close-on-backdrop="isLoading"
+      :no-close-on-esc="isLoading"
+    >
+      <template v-slot:modal-title>
+        {{ $t('Delete Role') }} <b-badge variant="secondary">{{ deleteId }}</b-badge>
+      </template>
+      <b-media no-body class="alert alert-danger">
+        <template v-slot:aside>
+          <icon name="exclamation-triangle" scale="2"/>
+        </template>
+        <div class="mx-2">{{ $t('The role could not be deleted. Either manually handle the following errors and try again, or re-reassign the resources to another existing role.') }}</div>
+      </b-media>
+      <h5>{{ $t('Role is still in use for:') }}</h5>
+      <b-row v-for="error in deleteErrors" :key="error.reason">
+        <b-col cols="auto" class="mr-auto">{{ reasons[error.reason] }}</b-col>
+        <b-col cols="auto">{{ error.reason }}</b-col>
+      </b-row>
+      <template v-slot:modal-footer>
+        <b-row class="w-100">
+          <b-col cols="auto" class="mr-auto pl-0">
+            <b-form-select size="sm" class="d-inline"
+              v-model="reassignRole"
+              :options="reassignableRoles"
+            />
+            <b-button size="sm" class="ml-1" variant="outline-primary"  @click="reAssign()" :disabled="isLoading">{{ $i18n.t('Reassign Role') }}</b-button>
+          </b-col>
+          <b-col cols="auto" class="pr-0">
+            <b-button variant="secondary"  @click="showDeleteErrorsModal = false" :disabled="isLoading">{{ $i18n.t('Fix Manually') }}</b-button>
+          </b-col>
+        </b-row>
+      </template>
+    </b-modal>
+  </b-card>
+</template>
+<script>
+import {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableEmpty
+} from '@/components/new/'
+
+const components = {
+  BaseButtonConfirm,
+  BaseButtonHelp,
+  BaseSearch,
+  BaseSearchInputColumns,
+  BaseTableEmpty
+}
+
+import { computed, ref, toRefs } from '@vue/composition-api'
+import { useBootstrapTableSelected } from '@/composables/useBootstrap'
+import { useTableColumnsItems } from '@/composables/useCsv'
+import { useDownload } from '@/composables/useDownload'
+import { useSearch, useStore, useRouter } from '../_composables/useCollection'
+import { useNodeInheritance } from '../_composables/useNodeInheritance'
+import { reasons } from '../config'
+
+const setup = (props, context) => {
+
+  const search = useSearch()
+  const {
+    reSearch,
+    sortBy,
+    sortDesc
+  } = search
+  const {
+    items,
+    visibleColumns
+  } = toRefs(search)
+
+  const { root: { $router, $store } = {} } = context
+
+  const {
+    deleteItem
+  } = useStore($store)
+
+  const router = useRouter($router)
+
+  const tableRef = ref(null)
+  const selected = useBootstrapTableSelected(tableRef, items)
+  const {
+    selectedItems
+  } = selected
+
+  const onBulkExport = () => {
+    const filename = `${$router.currentRoute.path.slice(1).replace('/', '-')}-${(new Date()).toISOString()}.csv`
+    const csv = useTableColumnsItems(visibleColumns.value, selectedItems.value)
+    useDownload(filename, csv, 'text/csv')
+  }
+
+  const deleteId = ref(null)
+  const deleteErrors = ref(null)
+  const showDeleteErrorsModal = ref(false)
+  const onRemove = id => {
+    deleteItem({ id })
+      .then(() => reSearch())
+      .catch(error => {
+        const { response: { data: { errors = [] } = {} } = {} } = error
+        if (errors.length) {
+          deleteId.value = id
+          deleteErrors.value = errors
+          showDeleteErrorsModal.value = true
+        }
+      })
+  }
+
+  const reassignRole = ref('default')
+  const reassignableRoles = computed(() => {
+    return items.value
+      .filter(role => role.id !== deleteId.value)
+      .map(role => ({ text: role.id, value: role.id }))
+  })
+  const reAssign = () => {
+    $store.dispatch('$_roles/reassignRole', { from: deleteId.value, to: reassignRole.value })
+      .then(() => {
+        showDeleteErrorsModal.value = false
+        // cascade delete
+        onRemove(deleteId.value)
+      })
+  }
+
+  const _trafficShapingPolicies = ref([])
+  $store.dispatch('$_traffic_shaping_policies/all')
+    .then(response => {
+      _trafficShapingPolicies.value = response.map(policy => policy.id)
+    })
+
+  const trafficShapingRoute = id => {
+    return (_trafficShapingPolicies.value.includes(id))
+      ? { name: 'traffic_shaping', params: { id } } // exists
+      : { name: 'newTrafficShaping', params: { role: id } } // not exists
+  }
+
+  const isInline = computed(() => $store.getters['system/isInline'])
+
+  const {
+    collapsedNodes,
+    clearExpandedNodes,
+    onToggleNode,
+    itemsTree,
+  } = useNodeInheritance(items, sortBy, sortDesc)
+
+  return {
+    useSearch,
+    tableRef,
+    onRemove,
+    onBulkExport,
+    ...router,
+    ...selected,
+    ...toRefs(search),
+    deleteId,
+    deleteErrors,
+    showDeleteErrorsModal,
+    reassignRole,
+    reassignableRoles,
+    reasons,
+    reAssign,
+    trafficShapingRoute,
+    isInline,
+
+    collapsedNodes,
+    clearExpandedNodes,
+    onToggleNode,
+    itemsTree
+  }
+}
+
+// @vue/component
+export default {
+  name: 'the-search',
+  inheritAttrs: false,
+  components,
+  setup
+}
+</script>
+
+<style lang="scss">
+$table-cell-height: 2.5 * $spacer !default;
+
+.the-tree-list {
+  thead[role="rowgroup"] {
+    border-bottom: 1px solid #dee2e6 !important;
+  }
+  tr[role="row"],
+  tr[role="row"] > th[role="columnheader"] {
+    cursor: pointer;
+    outline-width: 0;
+    td[role="cell"] {
+      height: $table-cell-height;
+      padding: 0 0.3rem;
+      word-wrap: nowrap;
+      div[variant="link"] {
+        line-height: 1em;
+      }
+    }
+    td[aria-colindex="2"] {
+      svg.fa-icon:not(.nav-icon) {
+        min-width: $table-cell-height;
+        height: auto;
+        max-height: $table-cell-height/2;
+        margin: 0.25rem 0;
+      }
+      svg.nav-icon {
+        height: $table-cell-height;
+        color: $gray-500;
+      }
+    }
+  }
+  .table-row-disabled {
+    opacity: 0.6;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js
index f39b2dae57fa..c56d0e46cc6a 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js
@@ -23,18 +23,70 @@ export { useRouter } from '../_router'
 
 export { useStore } from '../_store'
 
-import { useSearch as useConfigurationSearch } from '@/views/Configuration/_composables/useSearch'
+import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
+import makeSearch from '@/views/Configuration/_store/factory/search'
 import api from '../_api'
-import {
-  columns,
-  fields
-} from '../config'
-export const useSearch = (props, context, options) => useConfigurationSearch(props, context, {
-  id: 'roles',
+export const useSearch = makeSearch('roles', {
   api,
-  columns,
-  fields,
-  sortBy: 'id',
-  defaultCondition: () => ([{ values: [{ field: 'parent_id', op: 'equals', value: null }] }]),
-  ...options,
+  columns: [
+    {
+      key: 'selected',
+      thStyle: 'text-align: center; width: 40px;', tdClass: 'p-0',
+      locked: true
+    },
+    {
+      key: 'id',
+      class: 'text-nowrap',
+      label: 'Identifier', // i18n defer
+      required: true,
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'notes',
+      label: 'Description', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'max_nodes_per_pid',
+      label: 'Max nodes per user', // i18n defer
+      searchable: true,
+      sortable: true,
+      visible: true
+    },
+    {
+      key: 'buttons',
+      class: 'text-right p-0',
+      locked: true
+    },
+    {
+      key: 'children',
+      required: true
+    },
+    {
+      key: 'parent_id',
+      required: true
+    }
+  ],
+  fields: [
+    {
+      value: 'id',
+      text: i18n.t('Name'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'notes',
+      text: i18n.t('Description'),
+      types: [conditionType.SUBSTRING]
+    },
+    {
+      value: 'parent_id',
+      text: i18n.t('Parent Role'),
+      types: [conditionType.ROLE]
+    }
+  ],
+  sortBy: 'id'
 })
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_router.js b/html/pfappserver/root/src/views/Configuration/roles/_router.js
index 2b872f41adc3..8951dba28eac 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_router.js
+++ b/html/pfappserver/root/src/views/Configuration/roles/_router.js
@@ -2,7 +2,7 @@ import store from '@/store'
 import RolesStoreModule from './_store'
 import TrafficShapingPoliciesStoreModule from '../networks/trafficShapingPolicies/_store'
 
-const TheList = () => import(/* webpackChunkName: "Configuration" */ './_components/TheList')
+const TheSearch = () => import(/* webpackChunkName: "Configuration" */ './_components/TheSearch')
 const TheView = () => import(/* webpackChunkName: "Configuration" */ './_components/TheView')
 
 export const useRouter = $router => {
@@ -11,7 +11,8 @@ export const useRouter = $router => {
     goToItem: params => $router
       .push({ name: 'role', params })
       .catch(e => { if (e.name !== "NavigationDuplicated") throw e }),
-    goToClone: params => $router.push({ name: 'cloneRole', params })
+    goToClone: params => $router.push({ name: 'cloneRole', params }),
+    goToNew: () => $router.push({ name: 'newRole' })
   }
 }
 
@@ -27,7 +28,7 @@ export default [
   {
     path: 'roles',
     name: 'roles',
-    component: TheList,
+    component: TheSearch,
     beforeEnter
   },
   {
diff --git a/html/pfappserver/root/src/views/Configuration/roles/config.js b/html/pfappserver/root/src/views/Configuration/roles/config.js
index bc9920c1b13c..2d5366241d37 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/config.js
+++ b/html/pfappserver/root/src/views/Configuration/roles/config.js
@@ -1,78 +1,18 @@
 import i18n from '@/utils/locale'
-import { pfSearchConditionType as conditionType } from '@/globals/pfSearch'
-
-export const columns = [
-  {
-    key: 'id',
-    class: 'text-nowrap',
-    label: i18n.t('Name'),
-    required: true,
-    sortable: true,
-    visible: true,
-    searchable: true
-  },
-  {
-    key: 'notes',
-    label: i18n.t('Description'),
-    sortable: true,
-    visible: true,
-    searchable: true
-  },
-  {
-    key: 'max_nodes_per_pid',
-    label: i18n.t('Max nodes per user'),
-    sortable: true,
-    visible: true
-  },
-  {
-    key: 'buttons',
-    locked: true
-  },
-  {
-    key: 'children',
-    required: true
-  },
-  {
-    key: 'parent_id',
-    required: true
-  },
-  {
-    key: 'not_deletable',
-    required: true
-  }
-]
-
-export const fields = [
-  {
-    value: 'id',
-    text: i18n.t('Name'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'notes',
-    text: i18n.t('Description'),
-    types: [conditionType.SUBSTRING]
-  },
-  {
-    value: 'parent_id',
-    text: i18n.t('Parent Role'),
-    types: [conditionType.ROLE]
-  }
-]
 
 //  map friendly reasons,
 //  backend reports 1+ reason(s) for delete failure.
 //  see: lib/pf/UnifiedApi/Controller/Config/Roles.pm
 export const reasons = {
-  ADMIN_ROLES_IN_USE: i18n.t('Admin Roles'),
-  BILLING_TIERS_IN_USE: i18n.t('Billing Tiers'),
-  FIREWALL_SSO_IN_USE: i18n.t('Firewall SSO'),
+  ADMIN_ROLES_IN_USE:         i18n.t('Admin Roles'),
+  BILLING_TIERS_IN_USE:       i18n.t('Billing Tiers'),
+  FIREWALL_SSO_IN_USE:        i18n.t('Firewall SSO'),
   NODE_BYPASS_ROLE_ID_IN_USE: i18n.t('Node Bypass Role'),
-  NODE_CATEGORY_ID_IN_USE: i18n.t('Node Category'),
-  PASSWORD_CATEGORY_IN_USE: i18n.t('Password Category'),
-  PROVISIONING_IN_USE: i18n.t('Provisioning'),
-  SCAN_IN_USE: i18n.t('Scans'),
-  SECURITY_EVENTS_IN_USE: i18n.t('Security Events'),
-  SELFSERVICE_IN_USE: i18n.t('Self Service'),
-  SWITCH_IN_USE: i18n.t('Switches')
+  NODE_CATEGORY_ID_IN_USE:    i18n.t('Node Category'),
+  PASSWORD_CATEGORY_IN_USE:   i18n.t('Password Category'),
+  PROVISIONING_IN_USE:        i18n.t('Provisioning'),
+  SCAN_IN_USE:                i18n.t('Scans'),
+  SECURITY_EVENTS_IN_USE:     i18n.t('Security Events'),
+  SELFSERVICE_IN_USE:         i18n.t('Self Service'),
+  SWITCH_IN_USE:              i18n.t('Switches')
 }

From d0a2bf002b6621ef02167f0c10b5db41b44f41ba Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 17 Jun 2021 10:10:49 -0400
Subject: [PATCH 65/72] fixes

---
 .../views/Configuration/realms/_composables/useCollection.js | 3 ---
 .../Configuration/tenants/_composables/useCollection.js      | 5 +++++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
index 2eb8cce7ee14..9e8acebcea26 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
@@ -85,21 +85,18 @@ export const useSearch = makeSearch('realms', {
     {
       key: 'portal_strip_username',
       label: 'Strip Portal', // i18n defer
-      searchable: true,
       sortable: true,
       visible: true
     },
     {
       key: 'admin_strip_username',
       label: 'Strip Admin', // i18n defer
-      searchable: true,
       sortable: true,
       visible: true
     },
     {
       key: 'radius_strip_username',
       label: 'Strip RADIUS', // i18n defer
-      searchable: true,
       sortable: true,
       visible: true
     },
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
index 08a7baa1384e..c5fd2f772260 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
@@ -70,6 +70,11 @@ export const useSearch = makeSearch('tenants', {
       key: 'buttons',
       class: 'text-right p-0',
       locked: true
+    },
+    {
+      key: 'not_deletable',
+      required: true,
+      visible: false
     }
   ],
   fields: [

From 3eaa2ae2d9d96ab5d87df1e7de09b435455ca96f Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 17 Jun 2021 10:13:57 -0400
Subject: [PATCH 66/72] remove unused

---
 .../tenants/_composables/useStore.js          | 23 -------------------
 1 file changed, 23 deletions(-)
 delete mode 100644 html/pfappserver/root/src/views/Configuration/tenants/_composables/useStore.js

diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useStore.js b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useStore.js
deleted file mode 100644
index c23d813b20ba..000000000000
--- a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useStore.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { defineStore } from 'pinia'
-
-export default defineStore({
-  id: 'tenants',
-
-  state() {
-    return {
-      cache: null,
-      status: null,
-      message: null
-    }
-  },
-
-  getters: {
-
-  },
-
-  actions: {
-    getCollection: () => {
-
-    }
-  }
-})
\ No newline at end of file

From f6845ad09c2d4cd8795f5cddb217b6037fa1029b Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Thu, 17 Jun 2021 10:27:00 -0400
Subject: [PATCH 67/72] adjust style

---
 .../src/views/Configuration/_components/PortalModulesList.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/html/pfappserver/root/src/views/Configuration/_components/PortalModulesList.vue b/html/pfappserver/root/src/views/Configuration/_components/PortalModulesList.vue
index 781901647050..3d800157552d 100644
--- a/html/pfappserver/root/src/views/Configuration/_components/PortalModulesList.vue
+++ b/html/pfappserver/root/src/views/Configuration/_components/PortalModulesList.vue
@@ -12,7 +12,7 @@
         <b-form-row class="justify-content-end">
           <b-button variant="link" @click="minimize = !minimize"><icon :name="minimize ? 'expand' : 'compress'"></icon></b-button>
           <base-button-confirm
-            variant="outline-danger" class="my-1 mr-1" reverse
+            variant="outline-danger" class="mr-1" reverse
             :disabled="isLoading"
             :confirm="$t('Delete Module?')"
             @click="remove(rootModule.id)"

From 347bc6ae6531ba541e50745fd1a9a1cd322cfc0b Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 23 Jun 2021 08:23:32 -0400
Subject: [PATCH 68/72] update pinia

---
 html/pfappserver/root/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/html/pfappserver/root/package.json b/html/pfappserver/root/package.json
index bd096d4ea8bf..b848039f160e 100644
--- a/html/pfappserver/root/package.json
+++ b/html/pfappserver/root/package.json
@@ -20,7 +20,7 @@
     "messageformat": "^2.3.0",
     "mime-types": "^2.1.30",
     "papaparse": "5.3.0",
-    "pinia": "^0.4.1",
+    "pinia": "^0.5.2",
     "plotly.js-basic-dist-min": "^1.58.2",
     "promised-debounce": "^0.4.2",
     "typeface-b612-mono": "1.1.13",

From 55f6a53e2a8d17f89a6e153772b243b9b7f97802 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 23 Jun 2021 08:41:13 -0400
Subject: [PATCH 69/72] localize "Export to CSV"

---
 .../views/Configuration/adminRoles/_components/TheSearch.vue    | 2 +-
 .../views/Configuration/billingTiers/_components/TheSearch.vue  | 2 +-
 .../Configuration/connectionProfiles/_components/TheSearch.vue  | 2 +-
 .../src/views/Configuration/domains/_components/TheSearch.vue   | 2 +-
 .../views/Configuration/filterEngines/_components/TheSearch.vue | 2 +-
 .../fingerbank/combinations/_components/TheSearch.vue           | 2 +-
 .../Configuration/fingerbank/devices/_components/TheSearch.vue  | 2 +-
 .../fingerbank/dhcpFingerprints/_components/TheSearch.vue       | 2 +-
 .../fingerbank/dhcpVendors/_components/TheSearch.vue            | 2 +-
 .../fingerbank/dhcpv6Enterprises/_components/TheSearch.vue      | 2 +-
 .../fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue     | 2 +-
 .../fingerbank/macVendors/_components/TheSearch.vue             | 2 +-
 .../fingerbank/userAgents/_components/TheSearch.vue             | 2 +-
 .../src/views/Configuration/firewalls/_components/TheSearch.vue | 2 +-
 .../Configuration/floatingDevices/_components/TheSearch.vue     | 2 +-
 .../Configuration/maintenanceTasks/_components/TheSearch.vue    | 2 +-
 .../networkBehaviorPolicy/_components/TheSearch.vue             | 2 +-
 .../networks/trafficShapingPolicies/_components/TheSearch.vue   | 2 +-
 .../src/views/Configuration/pki/cas/_components/TheSearch.vue   | 2 +-
 .../src/views/Configuration/pki/certs/_components/TheSearch.vue | 2 +-
 .../views/Configuration/pki/profiles/_components/TheSearch.vue  | 2 +-
 .../Configuration/pki/revokedCerts/_components/TheSearch.vue    | 2 +-
 .../views/Configuration/pkiProviders/_components/TheSearch.vue  | 2 +-
 .../views/Configuration/provisioners/_components/TheSearch.vue  | 2 +-
 .../views/Configuration/radius/eap/_components/TheSearch.vue    | 2 +-
 .../views/Configuration/radius/fast/_components/TheSearch.vue   | 2 +-
 .../views/Configuration/radius/ocsp/_components/TheSearch.vue   | 2 +-
 .../views/Configuration/radius/ssl/_components/TheSearch.vue    | 2 +-
 .../views/Configuration/radius/tls/_components/TheSearch.vue    | 2 +-
 .../src/views/Configuration/realms/_components/TheTable.vue     | 2 +-
 .../src/views/Configuration/roles/_components/TheSearch.vue     | 2 +-
 .../views/Configuration/scanEngines/_components/TheSearch.vue   | 2 +-
 .../Configuration/securityEvents/_components/TheSearch.vue      | 2 +-
 .../views/Configuration/selfServices/_components/TheSearch.vue  | 2 +-
 .../src/views/Configuration/sources/_components/TheTable.vue    | 2 +-
 .../views/Configuration/switchGroups/_components/TheSearch.vue  | 2 +-
 .../Configuration/switchTemplates/_components/TheSearch.vue     | 2 +-
 .../src/views/Configuration/switches/_components/TheSearch.vue  | 2 +-
 .../Configuration/syslogForwarders/_components/TheSearch.vue    | 2 +-
 .../views/Configuration/syslogParsers/_components/TheSearch.vue | 2 +-
 .../src/views/Configuration/tenants/_components/TheSearch.vue   | 2 +-
 .../src/views/Configuration/wmiRules/_components/TheSearch.vue  | 2 +-
 .../root/src/views/Configuration/wrix/_components/TheSearch.vue | 2 +-
 43 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
index 501a996817ca..5d1f4a4c93d8 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
@@ -82,7 +82,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue
index a4ec34fcff55..33defd21107c 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue
@@ -81,7 +81,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
index 23a8c5a70c76..0c2ef90df3fa 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
@@ -87,7 +87,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
index 76c49f62164e..9f78c7bff638 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
@@ -91,7 +91,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
index 9b08015cebcf..24b89f5570b4 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
@@ -85,7 +85,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheSearch.vue
index 17933c5947db..eaef7beb3e1c 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheSearch.vue
@@ -83,7 +83,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue
index af928104434b..4383227b60cd 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue
@@ -107,7 +107,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue
index 1dda354db53f..9edf74099d0e 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue
@@ -88,7 +88,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue
index d14a234e39f7..4bbe98ad8b82 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue
@@ -88,7 +88,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue
index afdc262a58d7..294e32bf5f31 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue
@@ -88,7 +88,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue
index b7aa27074233..026e99622b4b 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue
@@ -88,7 +88,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue
index a712c3ba4266..540a640e6005 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue
@@ -88,7 +88,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue
index b12101eb880d..a8f90633380a 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue
@@ -88,7 +88,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
index 8d1863724677..d38c58e0e0be 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
@@ -82,7 +82,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
index bf1fd146b8f7..d10fbd049f10 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
@@ -81,7 +81,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheSearch.vue
index 93982950c4a5..e800f7bdf064 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheSearch.vue
@@ -71,7 +71,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
index e30114e43eaf..81b4e89b2e4b 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
@@ -89,7 +89,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue
index d810263f0896..dc8a3c0f51f2 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue
@@ -91,7 +91,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
index 1ce4384c4485..a9d28bb07182 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
@@ -93,7 +93,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
index 8d3c271d638d..1efa105c76a7 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
@@ -95,7 +95,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
index 33841bc8ec75..d46473872def 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
@@ -93,7 +93,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
index 19f0816173c6..651f88ec3d63 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
@@ -78,7 +78,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
index 030b5d8233a3..b175bf19deec 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
@@ -82,7 +82,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue
index dcddacb3f357..6016f8888f80 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue
@@ -85,7 +85,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheSearch.vue
index 2c4423f3b561..344b86ff3872 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheSearch.vue
@@ -82,7 +82,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheSearch.vue
index 1417e5558d09..4ac0a50fe465 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheSearch.vue
@@ -82,7 +82,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheSearch.vue
index 96b8df8876ee..858f56930588 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheSearch.vue
@@ -82,7 +82,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheSearch.vue
index 6a20b1471d82..17bb202c302c 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheSearch.vue
@@ -82,7 +82,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheSearch.vue
index ccbf6f61431b..c789bf10f125 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheSearch.vue
@@ -82,7 +82,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_components/TheTable.vue b/html/pfappserver/root/src/views/Configuration/realms/_components/TheTable.vue
index accc3ba6d345..1e9dec7517a2 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_components/TheTable.vue
+++ b/html/pfappserver/root/src/views/Configuration/realms/_components/TheTable.vue
@@ -89,7 +89,7 @@
         <template #button-content>
           {{ $t('{num} selected', { num: selected.length }) }}
         </template>
-        <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
       </b-dropdown>
     </b-container>
   </div>
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/roles/_components/TheSearch.vue
index 31b440899309..586ed81b171a 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/roles/_components/TheSearch.vue
@@ -100,7 +100,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
index 8955b130cc8b..210f05ec7da8 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
@@ -85,7 +85,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue
index 5157d5e323bc..5849c9f701b0 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue
@@ -92,7 +92,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue
index bf616ccfb7e6..7a8d28784831 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue
@@ -81,7 +81,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue
index fca7edf663ee..ef4bda4645d9 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue
@@ -69,7 +69,7 @@
         <template #button-content>
           {{ $t('{num} selected', { num: selected.length }) }}
         </template>
-        <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+        <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
       </b-dropdown>
     </b-container>
   </div>
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
index c1b761ebff8a..800adbd636f6 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
@@ -87,7 +87,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue
index c5caccbf5b99..b2f7221c0ad5 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue
@@ -79,7 +79,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
index 5d46ac9609f6..f7a3375bc306 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
@@ -101,7 +101,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
index 59ce50c20832..afe90821bf02 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
@@ -79,7 +79,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue
index ce58f1463bb2..57a1f1c3c2b5 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue
@@ -92,7 +92,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheSearch.vue
index a0c7929bdab3..739d590f16b5 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheSearch.vue
@@ -81,7 +81,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue
index e9c3eb98aa58..6c8ca7f29bf1 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue
@@ -86,7 +86,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue
index 75a58a805184..ff4a92ab1b4f 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue
@@ -78,7 +78,7 @@
           <template #button-content>
             {{ $t('{num} selected', { num: selected.length }) }}
           </template>
-          <b-dropdown-item @click="onBulkExport">Export to CSV</b-dropdown-item>
+          <b-dropdown-item @click="onBulkExport">{{ $t('Export to CSV') }}</b-dropdown-item>
         </b-dropdown>
       </b-container>
     </div>

From 4332fe38c83b6d522e9d9dff5f149417b012e528 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 23 Jun 2021 08:58:11 -0400
Subject: [PATCH 70/72] localize "-copy"

---
 .../root/src/views/Configuration/adminRoles/_store.js          | 3 ++-
 .../root/src/views/Configuration/billingTiers/_store.js        | 3 ++-
 .../root/src/views/Configuration/connectionProfiles/_store.js  | 3 ++-
 .../root/src/views/Configuration/filterEngines/_store.js       | 3 ++-
 .../root/src/views/Configuration/firewalls/_store.js           | 3 ++-
 .../src/views/Configuration/networkBehaviorPolicy/_store.js    | 3 ++-
 .../root/src/views/Configuration/pkiProviders/_store.js        | 3 ++-
 .../root/src/views/Configuration/portalModules/_store.js       | 3 ++-
 .../root/src/views/Configuration/provisioners/_store.js        | 3 ++-
 .../root/src/views/Configuration/radius/eap/_store.js          | 3 ++-
 .../root/src/views/Configuration/radius/fast/_store.js         | 3 ++-
 .../root/src/views/Configuration/radius/ocsp/_store.js         | 3 ++-
 .../root/src/views/Configuration/radius/ssl/_store.js          | 3 ++-
 .../root/src/views/Configuration/radius/tls/_store.js          | 3 ++-
 html/pfappserver/root/src/views/Configuration/realms/_store.js | 3 ++-
 html/pfappserver/root/src/views/Configuration/roles/_store.js  | 3 ++-
 .../root/src/views/Configuration/scanEngines/_store.js         | 3 ++-
 .../root/src/views/Configuration/securityEvents/_store.js      | 3 ++-
 .../root/src/views/Configuration/selfServices/_store.js        | 3 ++-
 .../pfappserver/root/src/views/Configuration/sources/_store.js | 3 ++-
 .../root/src/views/Configuration/switchTemplates/_store.js     | 3 ++-
 .../root/src/views/Configuration/syslogForwarders/_store.js    | 3 ++-
 .../root/src/views/Configuration/syslogParsers/_store.js       | 3 ++-
 .../pfappserver/root/src/views/Configuration/tenants/_store.js | 3 ++-
 .../root/src/views/Configuration/wmiRules/_store.js            | 3 ++-
 html/pfappserver/root/src/views/Configuration/wrix/_store.js   | 3 ++-
 26 files changed, 52 insertions(+), 26 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_store.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_store.js
index d2796d1d6bf0..6a212e3b33a3 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_admin_roles/createAdminRole', params),
     getItem: params => $store.dispatch('$_admin_roles/getAdminRole', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_admin_roles/options', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_store.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_store.js
index 3b7b0bd43958..d9ed94217dbc 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_billing_tiers/createBillingTier', params),
     getItem: params => $store.dispatch('$_billing_tiers/getBillingTier', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_billing_tiers/options', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_store.js b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_store.js
index 791a62333113..dfc51ca161fd 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -14,7 +15,7 @@ export const useStore = $store => {
     sortItems: params => $store.dispatch('$_connection_profiles/sortConnectionProfiles', params.items),
     getItem: params => $store.dispatch('$_connection_profiles/getConnectionProfile', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_connection_profiles/options', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_store.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_store.js
index bb5a7fd67299..700507242ab0 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_store.js
@@ -4,6 +4,7 @@
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
 import store from '@/store'
+import i18n from '@/utils/locale'
 import api, { apiFactory } from './_api'
 
 export const useStore = $store => {
@@ -21,7 +22,7 @@ export const useStore = $store => {
     sortItems: params => $store.dispatch('$_filter_engines/sortItems', params),
     getItem: params => $store.dispatch('$_filter_engines/getFilterEngine', params).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_filter_engines/options', params),
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_store.js b/html/pfappserver/root/src/views/Configuration/firewalls/_store.js
index 697294dc458c..471e60fa5ce7 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_firewalls/createFirewall', params),
     getItem: params => $store.dispatch('$_firewalls/getFirewall', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_firewalls/optionsById', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_store.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_store.js
index a9f3ebdccfbd..3cebe4012f0c 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_network_behavior_policies/createNetworkBehaviorPolicy', params),
     getItem: params => $store.dispatch('$_network_behavior_policies/getNetworkBehaviorPolicy', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_network_behavior_policies/options', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_store.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/_store.js
index 9b0d6151d888..fe6489646df2 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_pki_providers/createPkiProvider', params),
     getItem: params => $store.dispatch('$_pki_providers/getPkiProvider', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_pki_providers/optionsById', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/portalModules/_store.js b/html/pfappserver/root/src/views/Configuration/portalModules/_store.js
index 98421adf698f..d1a2c0e69f63 100644
--- a/html/pfappserver/root/src/views/Configuration/portalModules/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/portalModules/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_portalmodules/createPortalModule', params),
     getItem: params => $store.dispatch('$_portalmodules/getPortalModule', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_portalmodules/optionsById', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_store.js b/html/pfappserver/root/src/views/Configuration/provisioners/_store.js
index b298964c2411..a3050fdb0207 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_provisionings/createProvisioning', params),
     getItem: params => $store.dispatch('$_provisionings/getProvisioning', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_provisionings/optionsById', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_store.js b/html/pfappserver/root/src/views/Configuration/radius/eap/_store.js
index def170ce4b52..18f8b1c63734 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_radius_eap/createRadiusEap', params),
     getItem: params => $store.dispatch('$_radius_eap/getRadiusEap', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_radius_eap/options', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_store.js b/html/pfappserver/root/src/views/Configuration/radius/fast/_store.js
index c75d83701203..dd99ad27dd57 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_radius_fast/createRadiusFast', params),
     getItem: params => $store.dispatch('$_radius_fast/getRadiusFast', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_radius_fast/options', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_store.js b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_store.js
index 332d31e1c768..91e939c8cb9f 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_radius_ocsp/createRadiusOcsp', params),
     getItem: params => $store.dispatch('$_radius_ocsp/getRadiusOcsp', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_radius_ocsp/options', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_store.js b/html/pfappserver/root/src/views/Configuration/radius/ssl/_store.js
index b9b601a22c46..566b57b78033 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_radius_ssl/createRadiusSsl', params),
     getItem: params => $store.dispatch('$_radius_ssl/getRadiusSsl', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_radius_ssl/options', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_store.js b/html/pfappserver/root/src/views/Configuration/radius/tls/_store.js
index 9249d3026cca..2c6d782944c1 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_radius_tls/createRadiusTls', params),
     getItem: params => $store.dispatch('$_radius_tls/getRadiusTls', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_radius_tls/options', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_store.js b/html/pfappserver/root/src/views/Configuration/realms/_store.js
index 44776f3683f1..31b7148ab3a2 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/realms/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import { apiFactory } from './_api'
 
 export const useStore = $store => {
@@ -17,7 +18,7 @@ export const useStore = $store => {
     sortItems: params => $store.dispatch('$_realms/sortRealms', params),
     getItem: params => $store.dispatch('$_realms/getRealm', params).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_realms/options', params),
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_store.js b/html/pfappserver/root/src/views/Configuration/roles/_store.js
index 9faff9215fd7..26b24ee6da58 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/roles/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_roles/createRole', params),
     getItem: params => $store.dispatch('$_roles/getRole', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_roles/options', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_store.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_store.js
index f0771159ac7c..cb7b9185e930 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_scans/createScanEngine', params),
     getItem: params => $store.dispatch('$_scans/getScanEngine', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_scans/optionsById', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_store.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_store.js
index f7bf74dce5ea..9dc00b5bf13d 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 import {
   decomposeTriggers,
@@ -17,7 +18,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_security_events/createSecurityEvent', params),
     getItem: params => $store.dispatch('$_security_events/getSecurityEvent', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_security_events/options', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_store.js b/html/pfappserver/root/src/views/Configuration/selfServices/_store.js
index c0d3ec27ee83..f65bb011fa24 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_self_services/createSelfService', params),
     getItem: params => $store.dispatch('$_self_services/getSelfService', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_self_services/options', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_store.js b/html/pfappserver/root/src/views/Configuration/sources/_store.js
index 254d5fa0f629..82d758a2f80b 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -14,7 +15,7 @@ export const useStore = $store => {
     sortItems: params => $store.dispatch('$_sources/sortAuthenticationSources', params.items),
     getItem: params => $store.dispatch('$_sources/getAuthenticationSource', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_sources/optionsById', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_store.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_store.js
index 9babc5586621..496f5eed1dfa 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_switch_templates/createSwitchTemplate', params),
     getItem: params => $store.dispatch('$_switch_templates/getSwitchTemplate', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_switch_templates/options', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_store.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_store.js
index 1444cf468174..19934c478aa1 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_syslog_forwarders/createSyslogForwarder', params),
     getItem: params => $store.dispatch('$_syslog_forwarders/getSyslogForwarder', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_syslog_forwarders/optionsById', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_store.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_store.js
index 47a776083f2e..2f6e1f329044 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_syslog_parsers/createSyslogParser', params),
     getItem: params => $store.dispatch('$_syslog_parsers/getSyslogParser', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_syslog_parsers/optionsById', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_store.js b/html/pfappserver/root/src/views/Configuration/tenants/_store.js
index e9c49e3d6bba..fd348ad5e792 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_tenants/createTenant', params),
     getItem: params => $store.dispatch('$_tenants/getTenant', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_tenants/options', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_store.js b/html/pfappserver/root/src/views/Configuration/wmiRules/_store.js
index e6582d6ec28d..9af7883500b8 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -13,7 +14,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_wmi_rules/createWmiRule', params),
     getItem: params => $store.dispatch('$_wmi_rules/getWmiRule', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     getItemOptions: params => $store.dispatch('$_wmi_rules/options', params.id),
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_store.js b/html/pfappserver/root/src/views/Configuration/wrix/_store.js
index c34bd9cd4f46..797ec752dab4 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_store.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_store.js
@@ -3,6 +3,7 @@
 */
 import Vue from 'vue'
 import { computed } from '@vue/composition-api'
+import i18n from '@/utils/locale'
 import api from './_api'
 
 export const useStore = $store => {
@@ -12,7 +13,7 @@ export const useStore = $store => {
     createItem: params => $store.dispatch('$_wrix_locations/createWrixLocation', params),
     getItem: params => $store.dispatch('$_wrix_locations/getWrixLocation', params.id).then(item => {
       return (params.isClone)
-        ? { ...item, id: `${item.id}-copy`, not_deletable: false }
+        ? { ...item, id: `${item.id}-${i18n.t('copy')}`, not_deletable: false }
         : item
     }),
     updateItem: params => $store.dispatch('$_wrix_locations/updateWrixLocation', params),

From a866fdfd9593acf0bcdc719e9466ae72170f1152 Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 23 Jun 2021 09:46:39 -0400
Subject: [PATCH 71/72] reset preferences on login/logout

---
 .../root/src/views/Configuration/_store/preferences.js      | 3 +++
 html/pfappserver/root/src/views/Login/_router/index.js      | 6 ++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/_store/preferences.js b/html/pfappserver/root/src/views/Configuration/_store/preferences.js
index 37cc7f853245..3ae561bd72c3 100644
--- a/html/pfappserver/root/src/views/Configuration/_store/preferences.js
+++ b/html/pfappserver/root/src/views/Configuration/_store/preferences.js
@@ -104,6 +104,9 @@ export const useStore = defineStore({
           return this.cache[id]
         })
       }
+    },
+    reset() {
+      this.cache = {}
     }
   }
 })
diff --git a/html/pfappserver/root/src/views/Login/_router/index.js b/html/pfappserver/root/src/views/Login/_router/index.js
index 2c0dbf9b47a0..c345ffa3ef29 100644
--- a/html/pfappserver/root/src/views/Login/_router/index.js
+++ b/html/pfappserver/root/src/views/Login/_router/index.js
@@ -1,4 +1,5 @@
-import { reset as resetStore } from '@/store'
+import { reset as resetVuexStore } from '@/store'
+import { useStore as usePreferencesStore } from '@/views/Configuration/_store/preferences'
 import LoginView from '../'
 
 const route = {
@@ -7,7 +8,8 @@ const route = {
   name: 'login',
   component: LoginView,
   beforeEnter: (to, from, next) => {
-    resetStore()
+    usePreferencesStore().reset()
+    resetVuexStore()
     next()
   }
 }

From 43b5a61f81c0c7dd1c16c4c2a09a3f70b222f9be Mon Sep 17 00:00:00 2001
From: Darren Satkunas <darren@satkunas.com>
Date: Wed, 23 Jun 2021 10:01:48 -0400
Subject: [PATCH 72/72] adjust cell styling

---
 .../views/Configuration/adminRoles/_components/TheSearch.vue    | 2 +-
 .../Configuration/adminRoles/_composables/useCollection.js      | 2 +-
 .../views/Configuration/billingTiers/_components/TheSearch.vue  | 2 +-
 .../Configuration/billingTiers/_composables/useCollection.js    | 2 +-
 .../Configuration/connectionProfiles/_components/TheSearch.vue  | 2 +-
 .../connectionProfiles/_composables/useCollection.js            | 2 +-
 .../src/views/Configuration/domains/_components/TheSearch.vue   | 2 +-
 .../views/Configuration/domains/_composables/useCollection.js   | 2 +-
 .../views/Configuration/filterEngines/_components/TheSearch.vue | 2 +-
 .../Configuration/filterEngines/_composables/useCollection.js   | 2 +-
 .../fingerbank/combinations/_components/TheSearch.vue           | 2 +-
 .../fingerbank/combinations/_composables/useCollection.js       | 2 +-
 .../Configuration/fingerbank/devices/_components/TheSearch.vue  | 2 +-
 .../fingerbank/devices/_composables/useCollection.js            | 2 +-
 .../fingerbank/dhcpFingerprints/_components/TheSearch.vue       | 2 +-
 .../fingerbank/dhcpFingerprints/_composables/useCollection.js   | 2 +-
 .../fingerbank/dhcpVendors/_components/TheSearch.vue            | 2 +-
 .../fingerbank/dhcpVendors/_composables/useCollection.js        | 2 +-
 .../fingerbank/dhcpv6Enterprises/_components/TheSearch.vue      | 2 +-
 .../fingerbank/dhcpv6Enterprises/_composables/useCollection.js  | 2 +-
 .../fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue     | 2 +-
 .../fingerbank/dhcpv6Fingerprints/_composables/useCollection.js | 2 +-
 .../fingerbank/macVendors/_components/TheSearch.vue             | 2 +-
 .../fingerbank/macVendors/_composables/useCollection.js         | 2 +-
 .../fingerbank/userAgents/_components/TheSearch.vue             | 2 +-
 .../fingerbank/userAgents/_composables/useCollection.js         | 2 +-
 .../src/views/Configuration/firewalls/_components/TheSearch.vue | 2 +-
 .../views/Configuration/firewalls/_composables/useCollection.js | 2 +-
 .../Configuration/floatingDevices/_components/TheSearch.vue     | 2 +-
 .../Configuration/floatingDevices/_composables/useCollection.js | 2 +-
 .../Configuration/maintenanceTasks/_components/TheSearch.vue    | 2 +-
 .../maintenanceTasks/_composables/useCollection.js              | 2 +-
 .../networkBehaviorPolicy/_components/TheSearch.vue             | 2 +-
 .../networkBehaviorPolicy/_composables/useCollection.js         | 2 +-
 .../networks/trafficShapingPolicies/_components/TheSearch.vue   | 2 +-
 .../trafficShapingPolicies/_composables/useCollection.js        | 2 +-
 .../src/views/Configuration/pki/cas/_components/TheSearch.vue   | 2 +-
 .../views/Configuration/pki/cas/_composables/useCollection.js   | 2 +-
 .../src/views/Configuration/pki/certs/_components/TheSearch.vue | 2 +-
 .../views/Configuration/pki/certs/_composables/useCollection.js | 2 +-
 .../views/Configuration/pki/profiles/_components/TheSearch.vue  | 2 +-
 .../Configuration/pki/profiles/_composables/useCollection.js    | 2 +-
 .../Configuration/pki/revokedCerts/_components/TheSearch.vue    | 2 +-
 .../pki/revokedCerts/_composables/useCollection.js              | 2 +-
 .../views/Configuration/pkiProviders/_components/TheSearch.vue  | 2 +-
 .../Configuration/pkiProviders/_composables/useCollection.js    | 2 +-
 .../views/Configuration/provisioners/_components/TheSearch.vue  | 2 +-
 .../Configuration/provisioners/_composables/useCollection.js    | 2 +-
 .../views/Configuration/radius/eap/_components/TheSearch.vue    | 2 +-
 .../Configuration/radius/eap/_composables/useCollection.js      | 2 +-
 .../views/Configuration/radius/fast/_components/TheSearch.vue   | 2 +-
 .../Configuration/radius/fast/_composables/useCollection.js     | 2 +-
 .../views/Configuration/radius/ocsp/_components/TheSearch.vue   | 2 +-
 .../Configuration/radius/ocsp/_composables/useCollection.js     | 2 +-
 .../views/Configuration/radius/ssl/_components/TheSearch.vue    | 2 +-
 .../Configuration/radius/ssl/_composables/useCollection.js      | 2 +-
 .../views/Configuration/radius/tls/_components/TheSearch.vue    | 2 +-
 .../Configuration/radius/tls/_composables/useCollection.js      | 2 +-
 .../src/views/Configuration/realms/_components/TheTable.vue     | 2 +-
 .../views/Configuration/realms/_composables/useCollection.js    | 2 +-
 .../src/views/Configuration/roles/_components/TheSearch.vue     | 2 +-
 .../src/views/Configuration/roles/_composables/useCollection.js | 2 +-
 .../views/Configuration/scanEngines/_components/TheSearch.vue   | 2 +-
 .../Configuration/scanEngines/_composables/useCollection.js     | 2 +-
 .../Configuration/securityEvents/_components/TheSearch.vue      | 2 +-
 .../Configuration/securityEvents/_composables/useCollection.js  | 2 +-
 .../views/Configuration/selfServices/_components/TheSearch.vue  | 2 +-
 .../Configuration/selfServices/_composables/useCollection.js    | 2 +-
 .../src/views/Configuration/sources/_components/TheTable.vue    | 2 +-
 .../views/Configuration/sources/_composables/useCollection.js   | 2 +-
 .../views/Configuration/switchGroups/_components/TheSearch.vue  | 2 +-
 .../Configuration/switchGroups/_composables/useCollection.js    | 2 +-
 .../Configuration/switchTemplates/_components/TheSearch.vue     | 2 +-
 .../Configuration/switchTemplates/_composables/useCollection.js | 2 +-
 .../src/views/Configuration/switches/_components/TheSearch.vue  | 2 +-
 .../views/Configuration/switches/_composables/useCollection.js  | 2 +-
 .../Configuration/syslogForwarders/_components/TheSearch.vue    | 2 +-
 .../syslogForwarders/_composables/useCollection.js              | 2 +-
 .../views/Configuration/syslogParsers/_components/TheSearch.vue | 2 +-
 .../Configuration/syslogParsers/_composables/useCollection.js   | 2 +-
 .../src/views/Configuration/tenants/_components/TheSearch.vue   | 2 +-
 .../views/Configuration/tenants/_composables/useCollection.js   | 2 +-
 .../src/views/Configuration/wmiRules/_components/TheSearch.vue  | 2 +-
 .../views/Configuration/wmiRules/_composables/useCollection.js  | 2 +-
 .../root/src/views/Configuration/wrix/_components/TheSearch.vue | 2 +-
 .../src/views/Configuration/wrix/_composables/useCollection.js  | 2 +-
 86 files changed, 86 insertions(+), 86 deletions(-)

diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
index 5d1f4a4c93d8..4056dee33fe3 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_components/TheSearch.vue
@@ -45,7 +45,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
index d26e8d994c1e..75e94937d4d9 100644
--- a/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/adminRoles/_composables/useCollection.js
@@ -31,7 +31,7 @@ export const useSearch = makeSearch('adminRoles', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue
index 33defd21107c..c1295ea98eb8 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_components/TheSearch.vue
@@ -44,7 +44,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
index 496ae843e461..afb509739dac 100644
--- a/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/billingTiers/_composables/useCollection.js
@@ -31,7 +31,7 @@ export const useSearch = makeSearch('billingTiers', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
index 0c2ef90df3fa..ebf9a69ad08f 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_components/TheSearch.vue
@@ -40,7 +40,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js
index 3270fd47cbad..1a8f546a6ee2 100644
--- a/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/connectionProfiles/_composables/useCollection.js
@@ -38,7 +38,7 @@ export const useSearch = makeSearch('connectionProfiles', {
   columns: [ // output uses natural order (w/ sortable drag-drop), ensure NO columns are 'sortable: true'
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
index 9f78c7bff638..c0ac6466ba18 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/domains/_components/TheSearch.vue
@@ -44,7 +44,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
index 79e8eec8a0de..ca143dd16cd0 100644
--- a/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/domains/_composables/useCollection.js
@@ -31,7 +31,7 @@ export const useSearch = makeSearch('domains', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
index 24b89f5570b4..ad5942644f53 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_components/TheSearch.vue
@@ -46,7 +46,7 @@
           />
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
index 0442c00f96fc..dd7690cef9fa 100644
--- a/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/filterEngines/_composables/useCollection.js
@@ -49,7 +49,7 @@ export const useSearch = makeSearch('filterEngines', {
   columns: [ // output uses natural order (w/ sortable drag-drop), ensure NO columns are 'sortable: true'
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheSearch.vue
index eaef7beb3e1c..c5872d31f424 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_components/TheSearch.vue
@@ -43,7 +43,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
index ba33327e49f5..c724509b37f6 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/combinations/_composables/useCollection.js
@@ -42,7 +42,7 @@ export const useSearch = makeSearch('fingerbankCombinations', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue
index 4383227b60cd..588ee28ca200 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_components/TheSearch.vue
@@ -57,7 +57,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
index e4589ce684e9..51eda0b7c600 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/devices/_composables/useCollection.js
@@ -43,7 +43,7 @@ export const useSearch = makeSearch('fingerbankDevices', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue
index 9edf74099d0e..6039e649cd2e 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_components/TheSearch.vue
@@ -51,7 +51,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
index 67f9fd07da84..ea424da072b5 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpFingerprints/_composables/useCollection.js
@@ -42,7 +42,7 @@ export const useSearch = makeSearch('fingerbankDhcpFingerprints', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue
index 4bbe98ad8b82..391e19f6c41e 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_components/TheSearch.vue
@@ -51,7 +51,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
index 67e9e6b52336..8b214f76a499 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpVendors/_composables/useCollection.js
@@ -42,7 +42,7 @@ export const useSearch = makeSearch('fingerbankDhcpVendors', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue
index 294e32bf5f31..c9f5aa58510d 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_components/TheSearch.vue
@@ -51,7 +51,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
index fffc10d54d22..774e2a3e9baf 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Enterprises/_composables/useCollection.js
@@ -42,7 +42,7 @@ export const useSearch = makeSearch('fingerbankDhcpv6Enterprises', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue
index 026e99622b4b..2fa9ef6929cb 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_components/TheSearch.vue
@@ -51,7 +51,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
index c56de1134f63..9959b7407ae2 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/dhcpv6Fingerprints/_composables/useCollection.js
@@ -42,7 +42,7 @@ export const useSearch = makeSearch('fingerbankDhcpv6Fingerprints', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue
index 540a640e6005..8b33d7628e3a 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_components/TheSearch.vue
@@ -51,7 +51,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
index 42a28289713b..b8d101de699f 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/macVendors/_composables/useCollection.js
@@ -42,7 +42,7 @@ export const useSearch = makeSearch('fingerbankMacVendors', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue
index a8f90633380a..da57d83f8f40 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_components/TheSearch.vue
@@ -51,7 +51,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
index c8b9f203249a..9e32ed14bd29 100644
--- a/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/fingerbank/userAgents/_composables/useCollection.js
@@ -42,7 +42,7 @@ export const useSearch = makeSearch('fingerbankUserAgents', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
index d38c58e0e0be..9f3713de6a98 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_components/TheSearch.vue
@@ -45,7 +45,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
index fbcfc8a1b997..6a9c365e6280 100644
--- a/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/firewalls/_composables/useCollection.js
@@ -55,7 +55,7 @@ export const useSearch = makeSearch('firewalls', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
index d10fbd049f10..75a612895a66 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_components/TheSearch.vue
@@ -44,7 +44,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
index 5369d264429f..7d11b9933e35 100644
--- a/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/floatingDevices/_composables/useCollection.js
@@ -31,7 +31,7 @@ export const useSearch = makeSearch('floatingDevices', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheSearch.vue
index e800f7bdf064..63e7a89879a2 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_components/TheSearch.vue
@@ -45,7 +45,7 @@
           />
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js
index 99dee63155ed..116f67938aa0 100644
--- a/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/maintenanceTasks/_composables/useCollection.js
@@ -21,7 +21,7 @@ export const useSearch = makeSearch('maintenanceTasks', {
   columns: [ // output uses natural order (w/ sortable drag-drop), ensure NO columns are 'sortable: true'
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
index 81b4e89b2e4b..573bb5d04fa2 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_components/TheSearch.vue
@@ -53,7 +53,7 @@
           />
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js
index 145bcab022eb..6a0ff9418c91 100644
--- a/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/networkBehaviorPolicy/_composables/useCollection.js
@@ -34,7 +34,7 @@ export const useSearch = makeSearch('networkBehaviourPolicies', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue
index dc8a3c0f51f2..b6fa039b9183 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_components/TheSearch.vue
@@ -47,7 +47,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js
index fd1e7fad6fbf..d6add4ee0b22 100644
--- a/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/networks/trafficShapingPolicies/_composables/useCollection.js
@@ -36,7 +36,7 @@ export const useSearch = makeSearch('trafficShapingPolicies', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
index a9d28bb07182..478b28a2d143 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_components/TheSearch.vue
@@ -52,7 +52,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js
index 9048903e1b4c..713880f119f6 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/cas/_composables/useCollection.js
@@ -37,7 +37,7 @@ export const useSearch = makeSearch('pkiCas', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
index 1efa105c76a7..ca5bcec1ab3e 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_components/TheSearch.vue
@@ -54,7 +54,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js
index 37a46aac0213..3ff55f75affc 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/certs/_composables/useCollection.js
@@ -47,7 +47,7 @@ export const useSearch = makeSearch('pkiCerts', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
index d46473872def..31df69583a29 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_components/TheSearch.vue
@@ -54,7 +54,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js
index e873c64bb332..138b7d861958 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/profiles/_composables/useCollection.js
@@ -50,7 +50,7 @@ export const useSearch = makeSearch('pkiProfiles', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
index 651f88ec3d63..40c32f59eb2d 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_components/TheSearch.vue
@@ -49,7 +49,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
index 5f752e8c6e23..2480c605afde 100644
--- a/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pki/revokedCerts/_composables/useCollection.js
@@ -27,7 +27,7 @@ export const useSearch = makeSearch('pkiRevokedCerts', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
index b175bf19deec..cb8561d32fad 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_components/TheSearch.vue
@@ -45,7 +45,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
index 6f14f5888a80..89a4a8c125f7 100644
--- a/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/pkiProviders/_composables/useCollection.js
@@ -56,7 +56,7 @@ export const useSearch = makeSearch('pkiProviders', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue
index 6016f8888f80..d94b3d04511b 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_components/TheSearch.vue
@@ -48,7 +48,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js
index 63290d1b800e..bc5751b9b1f2 100644
--- a/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/provisioners/_composables/useCollection.js
@@ -56,7 +56,7 @@ export const useSearch = makeSearch('provisioners', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheSearch.vue
index 344b86ff3872..c7ba69990915 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_components/TheSearch.vue
@@ -45,7 +45,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js
index 577b40c04d68..d93096066388 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/eap/_composables/useCollection.js
@@ -31,7 +31,7 @@ export const useSearch = makeSearch('radiusEap', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheSearch.vue
index 4ac0a50fe465..79c8aafc643b 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_components/TheSearch.vue
@@ -45,7 +45,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js
index fd7205fe2cfd..8242ed9be7b2 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/fast/_composables/useCollection.js
@@ -31,7 +31,7 @@ export const useSearch = makeSearch('radiusFast', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheSearch.vue
index 858f56930588..7ed53e9589b9 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_components/TheSearch.vue
@@ -45,7 +45,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js
index b2c7385198e4..5155bbbe28e4 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ocsp/_composables/useCollection.js
@@ -31,7 +31,7 @@ export const useSearch = makeSearch('radiusOcsp', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheSearch.vue
index 17bb202c302c..886c6256f09e 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_components/TheSearch.vue
@@ -45,7 +45,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js
index bbdaac7fd1a6..9740c1e427a2 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/ssl/_composables/useCollection.js
@@ -31,7 +31,7 @@ export const useSearch = makeSearch('radiusSsl', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheSearch.vue
index c789bf10f125..e896f189cbfc 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_components/TheSearch.vue
@@ -45,7 +45,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js
index 83808f69c77b..beb31f421437 100644
--- a/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/radius/tls/_composables/useCollection.js
@@ -31,7 +31,7 @@ export const useSearch = makeSearch('radiusTls', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_components/TheTable.vue b/html/pfappserver/root/src/views/Configuration/realms/_components/TheTable.vue
index 1e9dec7517a2..0afb3348b2c6 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_components/TheTable.vue
+++ b/html/pfappserver/root/src/views/Configuration/realms/_components/TheTable.vue
@@ -37,7 +37,7 @@
         />
       </template>
       <template #cell(selected)="{ index, rowSelected }">
-        <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+        <span @click.stop="onItemSelected(index)">
           <template v-if="rowSelected">
             <icon name="check-square" class="bg-white text-success" scale="1.125" />
           </template>
diff --git a/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
index 9e8acebcea26..35e9cc2b56e7 100644
--- a/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/realms/_composables/useCollection.js
@@ -40,7 +40,7 @@ export const useSearch = makeSearch('realms', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/roles/_components/TheSearch.vue
index 586ed81b171a..e96199553a02 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/roles/_components/TheSearch.vue
@@ -46,7 +46,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js
index c56d0e46cc6a..cb18da53b156 100644
--- a/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/roles/_composables/useCollection.js
@@ -31,7 +31,7 @@ export const useSearch = makeSearch('roles', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'text-align: center; width: 40px;', tdClass: 'p-0',
+      thStyle: 'text-align: center; width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
index 210f05ec7da8..936730afb9e3 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_components/TheSearch.vue
@@ -48,7 +48,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js
index 4c30fe2f6ce5..6a1ab1c7c4a9 100644
--- a/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/scanEngines/_composables/useCollection.js
@@ -58,7 +58,7 @@ export const useSearch = makeSearch('scanEngines', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue
index 5849c9f701b0..872f2d7f9663 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_components/TheSearch.vue
@@ -44,7 +44,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js
index 90f4c21742bf..2aefc7262c40 100644
--- a/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/securityEvents/_composables/useCollection.js
@@ -31,7 +31,7 @@ export const useSearch = makeSearch('securityEvents', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue
index 7a8d28784831..278071a6cc98 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_components/TheSearch.vue
@@ -44,7 +44,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js
index bae94f8b7b52..dad5a8eff063 100644
--- a/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/selfServices/_composables/useCollection.js
@@ -31,7 +31,7 @@ export const useSearch = makeSearch('selfServices', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue b/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue
index ef4bda4645d9..fb05f6993c3d 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue
+++ b/html/pfappserver/root/src/views/Configuration/sources/_components/TheTable.vue
@@ -37,7 +37,7 @@
         />
       </template>
       <template #cell(selected)="{ index, rowSelected }">
-        <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+        <span @click.stop="onItemSelected(index)">
           <template v-if="rowSelected">
             <icon name="check-square" class="bg-white text-success" scale="1.125" />
           </template>
diff --git a/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js
index 0e64a4d3e798..8bcaf6102dd7 100644
--- a/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/sources/_composables/useCollection.js
@@ -56,7 +56,7 @@ export const useSearch = makeSearch('sources', {
   columns: [ // output uses natural order (w/ sortable drag-drop), ensure NO columns are 'sortable: true'
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
index 800adbd636f6..9977ef10b5a7 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_components/TheSearch.vue
@@ -41,7 +41,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js
index a236cbb38bf8..c584ea3d531c 100644
--- a/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/switchGroups/_composables/useCollection.js
@@ -49,7 +49,7 @@ export const useSearch = makeSearch('switchGroups', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue
index b2f7221c0ad5..82fc6a7afb93 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_components/TheSearch.vue
@@ -41,7 +41,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js
index 33d763739db6..23c76efbb88b 100644
--- a/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/switchTemplates/_composables/useCollection.js
@@ -31,7 +31,7 @@ export const useSearch = makeSearch('switchTemplates', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
index f7a3375bc306..0736c0173693 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/switches/_components/TheSearch.vue
@@ -47,7 +47,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js
index 9a69ecfe9749..3e4e2fe9224b 100644
--- a/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/switches/_composables/useCollection.js
@@ -48,7 +48,7 @@ export const useSearch = makeSearch('switches', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
index afe90821bf02..551d03155f6c 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_components/TheSearch.vue
@@ -41,7 +41,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
index fb5b5eaf0b8a..aadf504dcbe2 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogForwarders/_composables/useCollection.js
@@ -55,7 +55,7 @@ export const useSearch = makeSearch('syslogForwarders', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue
index 57a1f1c3c2b5..84037eae252e 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_components/TheSearch.vue
@@ -51,7 +51,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js
index 8f8419b18b50..7014b31a9058 100644
--- a/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/syslogParsers/_composables/useCollection.js
@@ -55,7 +55,7 @@ export const useSearch = makeSearch('syslogParsers', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheSearch.vue
index 739d590f16b5..e51ffea60b0b 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_components/TheSearch.vue
@@ -44,7 +44,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
index c5fd2f772260..f71c708b6c39 100644
--- a/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/tenants/_composables/useCollection.js
@@ -33,7 +33,7 @@ export const useSearch = makeSearch('tenants', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue
index 6c8ca7f29bf1..1edc1cb758db 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_components/TheSearch.vue
@@ -44,7 +44,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js
index e119f69ca21d..148347fb0795 100644
--- a/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/wmiRules/_composables/useCollection.js
@@ -31,7 +31,7 @@ export const useSearch = makeSearch('wmiRules', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue
index ff4a92ab1b4f..593d6ab7a8df 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_components/TheSearch.vue
@@ -41,7 +41,7 @@
           </span>
         </template>
         <template #cell(selected)="{ index, rowSelected }">
-          <span @click.stop="onItemSelected(index)" style="padding: 12px;">
+          <span @click.stop="onItemSelected(index)">
             <template v-if="rowSelected">
               <icon name="check-square" class="bg-white text-success" scale="1.125" />
             </template>
diff --git a/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js b/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js
index 544c7360c55a..99513425ed57 100644
--- a/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js
+++ b/html/pfappserver/root/src/views/Configuration/wrix/_composables/useCollection.js
@@ -31,7 +31,7 @@ export const useSearch = makeSearch('wrixLocations', {
   columns: [
     {
       key: 'selected',
-      thStyle: 'width: 40px;', tdClass: 'p-0',
+      thStyle: 'width: 40px;', tdClass: 'text-center',
       locked: true
     },
     {