page list instead of hoc withloadmore

src/components/settings_modal/admin_tabs/admin_card.js

@@ -8,6 +8,9 @@ const AdminCard = {
     }
   },
   computed: {
+    isLoaded () {
+      return typeof(this.user) !== 'undefined'
+    },
     user () {
       return this.$store.getters.findUser(this.userId)
     },

src/components/settings_modal/admin_tabs/admin_card.vue

@@ -1,4 +1,12 @@
 <template>
+  <div
+    v-if="!isLoaded"
+  >
+    loading user...
+  </div>
+  <div
+    v-else
+  >
   <BasicUserCard :user="user">
     <div class="admin-card-content-container">
       <!--<button
@@ -29,6 +37,7 @@
       </button>-->
     </div>
   </BasicUserCard>
+  </div>
 </template>
 
 <script src="./admin_card.js"></script>

src/components/settings_modal/admin_tabs/users_tab.js

@@ -2,34 +2,11 @@
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
 import BasicUserCard from 'src/components/basic_user_card/basic_user_card.vue'
-import withLoadMore from 'src/components/../hocs/with_load_more/with_load_more'
-import SelectableList from 'src/components/selectable_list/selectable_list.vue'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import AdminCard from 'src/components/settings_modal/admin_tabs/admin_card.vue'
-//import  { ref } from 'vue'
+import PageList from 'src/components/page_list/page_list.vue'
 
-const UserList = withLoadMore({
-  fetch: (props, $store) => {
-     console.log('fetch', props)
-     return $store.dispatch('fetchAdminUsers')
-  },
-  select: (props, $store) => {
-     console.log('select', props)
-     const filterMethod = typeof props.filterMethod === 'function' ? props.filterMethod : () => true
-     const users = $store.state.users.users.filter(user => user.id !== $store.state.users.currentUser.id && filterMethod(user))
-     console.log('users', users)
-     return users
-  },
-  destroy: () => {},
-  childPropName: 'items'
-})(SelectableList)
 
-const UserSortStrategy = Object.freeze({
-   NONE: 0,
-   NICKNAME: 1,
-   DISPLAYNAME: 2,
-   JOINED: 3
-})
 
 const UsersTab = {
    provide () {
@@ -40,13 +17,17 @@ const UsersTab = {
    },
    data() {
       return {
-         filterTerms: [],
-         users: [],
-         sortStrategy: UserSortStrategy.NONE,
-         sortAscending: true,
+         filters: {
+            local: false,
+            external: false,
+            active: false,
+            need_approval: false,
+            unconfirmed: false,
+            deactivated: false,
+            is_admin: false,
+            is_moderator: false
+         },
          expandedUser: null,
-         filterActive: 'active_only',
-         filterLocal: 'local_only',
          loading: false
       }
    },
@@ -54,47 +35,39 @@ const UsersTab = {
       Checkbox,
       Select,
       BasicUserCard,
-      UserList,
+      PageList,
       ProgressButton, 
       AdminCard,
    },
    computed: {
-   knownDomains () {
-      return this.$store.state.instance.knownDomains
-    },
-    user () {
-      return this.$store.state.users.currentUser
-    }
    },
    methods: {
+      delete_selection () {
+         console.log('delete selection')
+      },
+      delete_user () {},
+      fetch_page (store, opts) {
+         opts.query = ""
+         console.log('current filters:', this.filters)
+         opts.filters = this.filters
+         opts.name = ""
+         opts.email = ""
+         const users = store.dispatch('fetchAdminUsers', opts)
+         console.log('users', users)
+         return users
+      },
+      reset () {
+        this.$refs.userList.reset()
+      },
+      toggleLocal () {
+         console.log('toggle local')
+         this.filters.local = !this.filters.local
+         this.reset()
+      }
    },
    mounted() {
       console.log("mounted")
-      /*const store = this.$store;
-  const moduleTree = buildModuleTree(store._modules.root);
-  console.log(JSON.stringify(moduleTree, null, 2));*/
    }
 }
-/*function buildModuleTree(module, path = []) {
-  const fullPath = path.join('/') || 'root';
 
-  const moduleInfo = {
-    path: fullPath,
-    namespaced: module.namespaced,
-    state: Object.keys(module.state),
-    actions: module._rawModule.actions ? Object.keys(module._rawModule.actions) : [],
-    mutations: module._rawModule.mutations ? Object.keys(module._rawModule.mutations) : [],
-    getters: module._rawModule.getters ? Object.keys(module._rawModule.getters) : [],
-    modules: []
-  };
-
-  if (module._children) {
-    for (const key in module._children) {
-      const child = module._children[key];
-      moduleInfo.modules.push(buildModuleTree(child, path.concat(key)));
-    }
-  }
-
-  return moduleInfo;
-}*/
 export default UsersTab

src/components/settings_modal/admin_tabs/users_tab.vue

@@ -1,14 +1,101 @@
 <template>
-  <div :label="$t('admin_dash.tabs.instance')">
-    <UserList
+  <div :label="$t('admin_dash.tabs.users')">
+    <Checkbox
+      :model-value="filters[local]"
+      @update:model-value="v => {filters.local = v; reset();}"
+    >
+      only local
+    </Checkbox><br>
+    <Checkbox
+      :model-value="filters[external]"
+      @update:model-value="v => {filters.external = v; reset();}"
+    >
+      only external
+    </Checkbox><br>
+    <Checkbox
+      :model-value="filters[active]"
+      @update:model-value="v => {filters.active = v; reset();}"
+    >
+      only active
+    </Checkbox><br>
+    <Checkbox
+      :model-value="filters[need_approval]"
+      @update:model-value="v => {filters.need_approval = v; reset();}"
+    >
+      only unconfirmed
+    </Checkbox><br>
+    <Checkbox
+      :model-value="filters[deactivated]"
+      @update:model-value="v => {filters.deactivated = v; reset();}"
+    >
+      only deactivated
+    </Checkbox><br>
+    <Checkbox
+      :model-value="filters[is_admin]"
+      @update:model-value="v => {filters.is_admin = v; reset();}"
+    >
+      only if admin
+    </Checkbox><br>
+    <Checkbox
+      :model-value="filters[is_moderator]"
+      @update:model-value="v => {filters.is_moderator = v; reset();}"
+    >
+      only if moderator
+    </Checkbox><br>
+    <button
+      class="button button-default btn"
+      type="button"
+      @click="delete_selection"
+    >
+      {{ $t('admin_dash.users.activate') }}
+    </button>
+    <button
+      class="button button-default btn"
+      type="button"
+      @click="activate_selection"
+    >
+      {{ $t('admin_dash.users.deactivate') }}
+    </button>
+    <button
+      class="button button-default btn"
+      type="button"
+      @click="deactivate_selection"
+    >
+      {{ $t('admin_dash.users.delete') }}
+    </button>
+    <PageList
+      ref="userList"
       :refresh="true"
       :get-key="i => i"
-      :boxOnly="true"
+      :box-only="true"
+      :page-size="50"
+      :fetch-page="(store, opts) => this.fetch_page(store, opts)"
     >
       <template #item="{item}">
-        <AdminCard :userId="item.id" />
+        <AdminCard :user-id="item.id" />
+        <button
+          class="button button-default btn"
+          type="button"
+          @click="delete_user"
+        >
+          {{ $t('admin_dash.users.activate') }}
+        </button>
+        <button
+          class="button button-default btn"
+          type="button"
+          @click="activate_user"
+        >
+          {{ $t('admin_dash.users.deactivate') }}
+        </button>
+        <button
+          class="button button-default btn"
+          type="button"
+          @click="deactivate_user"
+        >
+          {{ $t('admin_dash.users.delete') }}
+        </button>
       </template>
-    </UserList>
+    </PageList>
   </div>
 </template>
 <script src="./users_tab.js"></script>