Support token-based pagination

src/App.vue

@@ -86,10 +86,16 @@ export default {
           );
         }
       } else {
-        this.$toastr.e(
-          error.response.statusText + ' (' + error.response.status + ')',
-          this.$t('condition.server_error'),
-        );
+        if (
+          error.response.headers['content-type'] === 'application/problem+json'
+        ) {
+          this.$toastr.w(error.response.data.detail, error.response.data.title);
+        } else {
+          this.$toastr.e(
+            error.response.statusText + ' (' + error.response.status + ')',
+            this.$t('condition.server_error'),
+          );
+        }
       }
       return Promise.reject(error);
     });

src/views/administration/accessmanagement/Teams/TeamDetails.vue

@@ -279,14 +279,16 @@ export default {
       });
     },
     async createApiKey() {
-      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_TEAM}/${this.team.uuid}/key`;
+      const endpoint = `${this.$api.BASE_URL}/api/v2/teams/${encodeURIComponent(this.team.name)}/api-keys`;
       try {
-        const response = await this.axios.put(endpoint);
+        const response = await this.axios.post(endpoint, {});
+        const responseData = await response.data;
+
         this.$toastr.s(this.$t('message.updated'));
         await this.popup(
           this.$t('admin.new_api_key_title'),
           this.$t('admin.new_api_key'),
-          response.data.key,
+          responseData.key,
         );
         this.syncVariables('addKey', response.data);
       } catch (error) {

src/views/administration/accessmanagement/Teams/index.vue

@@ -2,17 +2,21 @@
   <b-card no-body :header="header">
     <b-card-body>
       <div id="customToolbar">
-        <b-button size="md" variant="outline-primary" v-b-modal.createTeamModal>
-          <span class="fa fa-plus"></span> {{ $t('admin.create_team') }}
-        </b-button>
+        <text-filter-pill
+          ref="nameFilterPill"
+          :field-name="'name'"
+          :field-label="'Name'"
+          :operators="['contains']"
+          v-model="nameFilter"
+        />
       </div>
-      <bootstrap-table
+      <token-paginated-table
         ref="table"
+        :base-url="tableDataUrl"
         :columns="columns"
-        :data="data"
         :options="options"
-      >
-      </bootstrap-table>
+        :response-data-field="'teams'"
+      />
     </b-card-body>
     <create-team-modal v-on:refreshTable="refreshTable" />
   </b-card>
@@ -21,10 +25,12 @@
 <script>
 import xssFilters from 'xss-filters';
 import common from '../../../../shared/common';
+import TokenPaginatedTable from '@/views/components/TokenPaginatedTable.vue';
 import CreateTeamModal from '../CreateTeamModal';
 import bootstrapTableMixin from '../../../../mixins/bootstrapTableMixin';
 import EventBus from '../../../../shared/eventbus';
 import TeamDetails from './TeamDetails.vue';
+import TextFilterPill from '@/views/components/TextFilterPill.vue';
 
 export default {
   name: 'TeamsView',
@@ -33,6 +39,8 @@ export default {
   },
   mixins: [bootstrapTableMixin],
   components: {
+    TextFilterPill,
+    TokenPaginatedTable,
     CreateTeamModal,
   },
   mounted() {
@@ -50,6 +58,7 @@ export default {
   },
   data() {
     return {
+      nameFilter: null,
       rowEvents: {
         update: 'admin:teams:rowUpdate',
         delete: 'admin:teams:rowDeleted',
@@ -65,7 +74,7 @@ export default {
         },
         {
           title: this.$t('admin.api_keys'),
-          field: 'apiKeys',
+          field: 'api_keys',
           sortable: false,
           formatter(value) {
             return value
@@ -79,35 +88,9 @@ export default {
           title: this.$t('admin.members'),
           field: 'members',
           sortable: false,
-          formatter(value, row) {
-            let count = 0;
-            if (row.managedUsers) {
-              count += row.managedUsers.length;
-            }
-            if (row.ldapUsers) {
-              count += row.ldapUsers.length;
-            }
-            if (row.oidcUsers) {
-              count += row.oidcUsers.length;
-            }
-            return count;
-          },
         },
       ],
-      data: [],
       options: {
-        search: true,
-        showColumns: true,
-        showRefresh: true,
-        pagination: true,
-        silentSort: false,
-        sidePagination: 'server',
-        queryParamsType: 'pageSize',
-        pageList: '[10, 25, 50, 100]',
-        pageSize: 10,
-        icons: {
-          refresh: 'fa-refresh',
-        },
         detailView: true,
         detailViewIcon: false,
         detailViewByClick: true,
@@ -120,19 +103,22 @@ export default {
         },
         onExpandRow: this.vueFormatterInit,
         toolbar: '#customToolbar',
-        responseHandler: function (res, xhr) {
-          res.total = xhr.getResponseHeader('X-Total-Count');
-          return res;
-        },
-        url: `${this.$api.BASE_URL}/${this.$api.URL_TEAM}`,
       },
     };
   },
+  computed: {
+    tableDataUrl() {
+      const url = new URL('http://localhost:8080/api/v2/teams');
+      if (this.nameFilter) {
+        url.searchParams.set('name_contains', this.nameFilter.value);
+      }
+
+      return url.toString();
+    },
+  },
   methods: {
-    refreshTable: function () {
-      this.$refs.table.refresh({
-        silent: true,
-      });
+    refreshTable: async function () {
+      await this.$refs.table.refreshCurrentPage();
     },
   },
 };

src/views/components/TextFilterPill.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="filter-pill-wrapper">
+    <b-dropdown
+      :id="`text-filter-pill-${fieldName}`"
+      class="filter-pill"
+      ref="dropdown"
+      size="sm"
+      variant="outline-primary"
+      no-caret
+      boundary="viewport"
+      @show="onDropdownShow"
+      @hide="onDropdownHide"
+    >
+      <template #button-content>
+        <div class="d-flex align-items-center">
+          <span v-if="!hasFilter">
+            {{ fieldLabel }}
+            <span class="fa fa-filter"></span>
+          </span>
+          <span v-else>
+            {{ fieldLabel }} <em>{{ operatorAbbrev }}</em
+            >&nbsp;<code>"{{ value.value }}"</code>
+          </span>
+
+          <b-button
+            class="btn-filter-pill-clear"
+            v-if="hasFilter"
+            size="sm"
+            :title="`Clear ${fieldLabel} filter`"
+            @click.stop="clearFilter"
+          >
+            <span class="fa fa-remove"></span>
+          </b-button>
+        </div>
+      </template>
+      <b-dropdown-form class="filter-pill-form pt-2 pb-2" @submit.stop.prevent>
+        <b-input-group class="mb-2">
+          <b-input-group-prepend>
+            <b-form-select
+              :id="`text-filter-pill-operator-${fieldName}`"
+              v-model="tmpOperator"
+              :options="operators"
+              :disabled="operators.length < 2"
+              size="sm"
+            ></b-form-select>
+          </b-input-group-prepend>
+          <b-form-input
+            :id="`text-filter-pill-value-${fieldName}`"
+            ref="valueInput"
+            v-model="tmpValue"
+            :maxlength="maxLength"
+            size="sm"
+            @keyup.enter="applyFilter"
+          ></b-form-input>
+        </b-input-group>
+        <div class="d-flex justify-content-end">
+          <b-button
+            variant="primary"
+            size="sm"
+            @click="applyFilter"
+            :disabled="!tmpValue"
+            >Apply
+          </b-button>
+        </div>
+      </b-dropdown-form>
+    </b-dropdown>
+  </div>
+</template>
+
+<script>
+const supportedOperators = [
+  {
+    name: 'equals',
+    symbol: '=',
+  },
+  {
+    name: 'contains',
+    symbol: '~',
+  },
+];
+
+export default {
+  name: 'TextFilterPill',
+  props: {
+    fieldName: {
+      type: String,
+      required: true,
+    },
+    fieldLabel: {
+      type: String,
+      required: true,
+    },
+    operators: {
+      type: Array,
+      validator: (value) => {
+        if (!value) {
+          return false;
+        }
+
+        for (const operator of value) {
+          if (!supportedOperators.find((op) => op.name === operator)) {
+            console.error(`Unknown operator ${operator}`);
+            return false;
+          }
+        }
+
+        return true;
+      },
+      default: () => supportedOperators.map((op) => op.name),
+    },
+    maxLength: {
+      type: Number,
+      default: () => 255,
+    },
+    value: {
+      type: Object,
+      default: () => null,
+    },
+  },
+  data() {
+    return {
+      tmpOperator: this.operators[0],
+      tmpValue: '',
+    };
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        if (val && val.operator && val.value) {
+          this.tmpOperator = val.operator;
+          this.tmpValue = val.value;
+        } else {
+          this.tmpOperator = this.operators[0];
+          this.tmpValue = '';
+        }
+      },
+    },
+  },
+  computed: {
+    hasFilter() {
+      return this.value && this.value.operator && this.value.value;
+    },
+    operatorAbbrev() {
+      return supportedOperators.find((op) => op.name === this.tmpOperator).name;
+    },
+  },
+  methods: {
+    onDropdownShow() {
+      this.$nextTick(() => {
+        if (this.$refs.valueInput) {
+          this.$refs.valueInput.focus();
+        }
+      });
+    },
+    onDropdownHide() {
+      if (!this.hasFilter) {
+        this.tmpOperator = this.operators[0];
+        this.tmpValue = '';
+      }
+    },
+    applyFilter() {
+      if (!this.tmpValue) {
+        return;
+      }
+
+      this.$emit('input', {
+        operator: this.tmpOperator,
+        value: this.tmpValue,
+      });
+      this.$refs.dropdown.hide();
+    },
+    clearFilter() {
+      this.tmpOperator = this.operators[0];
+      this.tmpValue = '';
+      this.$emit('input', null);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.filter-pill-wrapper {
+  display: inline-block;
+}
+
+.filter-pill-wrapper >>> .btn-outline-primary {
+  border-radius: 20px;
+}
+
+.filter-pill-form {
+  min-width: 280px;
+}
+
+.btn-filter-pill-clear {
+  line-height: 1;
+  border: none !important;
+  padding: 2px !important;
+  margin-left: 8px !important;
+  border-radius: 50%;
+}
+
+.btn-filter-pill-clear:hover {
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  color: white !important;
+}
+
+.btn-filter-pill-clear:focus {
+  box-shadow: none !important;
+}
+</style>