fix mess in pagelist, add more options to customize page lists, fix layout in files

src/components/page_list/page_list.js

@@ -1,61 +1,61 @@
 import SelectableList from 'src/components/selectable_list/selectable_list.vue'
 
 const PageList = {
-   components: {
-      SelectableList
-   },
-   props: {
-      box_only: {
-         type: Boolean,
-         default: false
-      },
-      page_size: {
-         type: Number,
-         default: 50
-      },
-      fetch_page: {
-         type: Function,
-         default: async () => []
-      },
-      single_page: {
-         type: Boolean,
-         default: false
+  components: {
+    SelectableList
+  },
+  props: {
+    box_only: {
+      type: Boolean,
+      default: false
+    },
+    page_size: {
+      type: Number,
+      default: 50
+    },
+    fetch_page: {
+      type: Function,
+      default: async () => []
+    },
+    single_page: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      page_index: 1,
+      items: [],
+      can_load_more: true,
+      is_loading: false
+    }
+  },
+  methods: {
+    reset () {
+      this.can_load_more = true
+      this.page_index = 1
+      this.items = []
+      this.is_loading = false
+      this.load_more() // load one page
+    },
+    load_more () {
+      if (!this.is_loading && this.can_load_more) {
+        this.is_loading = true
+        this.fetch_page(this.$store, {
+          page: this.page_index++,
+          page_size: this.page_size
+        }).then(items => {
+          this.items = [...this.items, ...items]
+          this.is_loading = false
+        })
       }
-   },
-   data () {
-      return {
-         page_index: 1,
-         items: [],
-         can_load_more: true,
-         gliter: 0,
-      }
-   },
-   methods: {
-      reset () {
-         this.can_load_more = true
-         this.page_index = 1
-         this.items = []
-         this.load_more() // load one page
-      },
-      load_more () {
-         this.gliter++
-         const iter = this.gliter
-         this.fetch_page(this.$store, {
-            page: this.page_index++,
-            page_size: this.page_size
-         }).then((items) => {
-            // ignore if another request was already dispatched
-            if (iter == this.gliter) {
-               this.items = [...this.items, ...items]
-            }
-         })
-      },
-      selected () {
-         return this.$refs.list.selected
-      }
-   },
-   mounted () {
-      this.reset()
-   }
+    },
+    selected () {
+      return this.$refs.list.selected
+    }
+  },
+  mounted () {
+    this.reset()
+  }
 }
 export default PageList

src/components/page_list/page_list.vue

@@ -18,6 +18,20 @@
           v-bind="slotProps"
         />
       </template>
+      <template #load="slotProps">
+        <slot
+          v-if="is_loading"
+          name="load"
+          v-bind="slotProps"
+        />
+      </template>
+      <template #empty="slotProps">
+        <slot
+          v-if="items.length == 0 && !is_loading"
+          name="empty"
+          v-bind="slotProps"
+        />
+      </template>
     </SelectableList>
     <div v-if="!single_page">
       <button
@@ -28,7 +42,6 @@
       >
         {{ $t('page_list.load_more') }}
       </button>
-      <p> prev first next </p>
     </div>
   </div>
 </template>

src/components/settings_modal/admin_tabs/admin_card.vue

@@ -17,67 +17,88 @@
         </div>
         <div
           v-else
-          class="setting-item"
         >
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="top_level_expanded = false"
-          >
-            {{ $t('admin_dash.users.collapse_user') }}
-          </button><br>
-          <div v-if="is_local">
-            <Checkbox
-              :model-value="is_admin"
-              @update:model-value="v => toggle_admin(v)"
+          <ul class="setting-list">
+            <li>
+              <button
+                class="button button-default btn"
+                type="button"
+                @click="top_level_expanded = false"
+              >
+                {{ $t('admin_dash.users.collapse_user') }}
+              </button>
+            </li>
+            <li
+              v-if="is_local"
             >
-              {{ $t('admin_dash.users.is_admin') }}
-            </Checkbox><br>
-            <Checkbox
-              :model-value="is_moderator"
-              @update:model-value="v => toggle_moderator(v)"
+              <Checkbox
+                :model-value="is_admin"
+                @update:model-value="v => toggle_admin(v)"
+              >
+                {{ $t('admin_dash.users.is_admin') }}
+              </Checkbox>
+            </li>
+            <li
+              v-if="is_local"
+            >
+              <Checkbox
+                :model-value="is_moderator"
+                @update:model-value="v => toggle_moderator(v)"
+              >
+                {{ $t('admin_dash.users.is_moderator') }}
+              </Checkbox>
+            </li>
+            <li
+              v-if="is_local && !just_confirmed && !is_confirmed"
             >
-              {{ $t('admin_dash.users.is_moderator') }}
-            </Checkbox><br>
-            <div v-if="!just_confirmed && !is_confirmed">
               <button
                 class="button button-default btn"
                 type="button"
                 @click="confirm_user()"
               >
                 {{ $t('admin_dash.users.is_confirmed') }}
-              </button><br>
+              </button>
+            </li>
+            <li
+              v-if="is_local && !just_confirmed && !is_confirmed"
+            >
               <button
                 class="button button-default btn"
                 type="button"
                 @click="resend_confirmation_email()"
               >
                 {{ $t('admin_dash.users.resend_confirmation_email') }}
-              </button><br>
-            </div>
-            <div v-if="!is_approved">
+              </button>
+            </li>
+            <li
+              v-if="is_local && !is_approved"
+            >
               <button
                 class="button button-default btn"
                 type="button"
                 @click="toggle_approval(true)"
               >
                 {{ $t('admin_dash.users.approve') }}
-              </button><br>
-            </div>
-          </div>
-          <Checkbox
-            :model-value="is_activated"
-            @update:model-value="v => toggle_activation(v)"
-          >
-            {{ $t('admin_dash.users.is_active') }}
-          </Checkbox><br>
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="delete_user()"
-          >
-            {{ $t('admin_dash.users.delete_user') }}
-          </button>
+              </button>
+            </li>
+            <li>
+              <Checkbox
+                :model-value="is_activated"
+                @update:model-value="v => toggle_activation(v)"
+              >
+                {{ $t('admin_dash.users.is_active') }}
+              </Checkbox>
+            </li>
+            <li>
+              <button
+                class="button button-default btn"
+                type="button"
+                @click="delete_user()"
+              >
+                {{ $t('admin_dash.users.delete_user') }}
+              </button>
+            </li>
+          </ul>
         </div>
         <div v-if="!timeline_expanded">
           <button
@@ -111,6 +132,12 @@
             <template #item="{item}">
               <AdminStatusCard :status_details="item" />
             </template>
+            <template #empty>
+              <p> {{ $t('admin_dash.users.user_has_no_posts') }} </p>
+            </template>
+            <template #load>
+              <p> {{ $t('admin_dash.users.loading') }} </p>
+            </template>
           </PageList>
         </div>
         <div v-if="!json_expanded">

src/components/settings_modal/admin_tabs/admin_status_card.js

@@ -1,6 +1,6 @@
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
-import StatusBody from 'src/components/status_body/status_body.vue'
+import Status from 'src/components/status/status.vue'
 import { parseStatus } from 'src/services/entity_normalizer/entity_normalizer.service.js'
 
 const AdminStatusCard = {
@@ -30,7 +30,7 @@ const AdminStatusCard = {
    components: {
       Checkbox,
       Select,
-      StatusBody,
+      Status,
    },
    mounted () {
       this.$store.dispatch('adminChangeStatusScope', { opts: { id: this.status_details.id }}).then(res => parseStatus(res)).then(s => this.status_cache = s)

src/components/settings_modal/admin_tabs/admin_status_card.vue

@@ -1,55 +1,80 @@
 <template>
   <div class="setting-item">
     <h2> {{ $t('admin_dash.users.title_info') }}: </h2>
-    <span> {{ $t('admin_dash.users.status_id') }}: {{ status_details.id }} </span>
-    <span> {{ $t('admin_dash.users.created_at') }}: {{ status_details.created_at }} </span>
-    <span v-if="typeof(status_details.edited_at) !== 'undefined'"> {{ $t('admin_dash.users.edited_at') }}: {{ status_details.edited_at }} </span>
+    <ul
+      class="setting-list"
+    >
+      <li>
+        <span> {{ $t('admin_dash.users.status_id') }}: {{ status_details.id }} </span>
+      </li>
+      <li>
+        <span> {{ $t('admin_dash.users.created_at') }}: {{ new Date(status_details.created_at).toLocaleString() }} </span>
+      </li>
+      <li>
+        <span v-if="status_details.edited_at !== null"> {{ $t('admin_dash.users.edited_at') }}: {{ new Date(status_details.edited_at).toLocaleString() }} </span>
+      </li>
+    </ul>
     <h2> {{ $t('admin_dash.users.title_content') }}: </h2>
-    <div>
-      <StatusBody
-        v-if="typeof(status_cache) !== 'undefined'"
-        :status="status_cache"
-      />
-    </div>
-    <button
-      class="button button-default btn"
-      type="button"
-      @click="delete_status(status.id)"
+    <ul
+      class="setting-list"
     >
-      {{ $t('admin_dash.users.delete_status') }}
-    </button><br>
-    <Checkbox
-      :model-value="is_sensitive"
-      @update:model-value="v => change_sensitivity(v)"
-    >
-      {{ $t('admin_dash.users.content_nsfw') }}
-    </Checkbox>
-    <Select
-      :model-value="visibility"
-      @update:model-value="v => change_visibility(v)"
-    >
-      <option
-        value="public"
-      >
-        {{ $t('admin_dash.users.scope_public') }}
-      </option>
-      <option
-        value="unlisted"
-      >
-        {{ $t('admin_dash.users.scope_unlisted') }}
-      </option>
-      <option
-        value="private"
-      >
-        {{ $t('admin_dash.users.scope_private') }}
-      </option>
-      <option
-        value="direct"
-      >
-        {{ $t('admin_dash.users.scope_direct') }}
-      </option>
-    </Select><br>
-    <a :href="status_details.url"> {{ $t('admin_dash.users.link_source') }} </a>
+      <li>
+        <Status
+          v-if="typeof(status_cache) !== 'undefined'"
+          class="Notification"
+          :compact="true"
+          :statusoid="status_cache"
+          @interacted="false"
+        />
+      </li>
+      <li>
+        <button
+          class="button button-default btn"
+          type="button"
+          @click="delete_status(status.id)"
+        >
+          {{ $t('admin_dash.users.delete_status') }}
+        </button>
+      </li>
+      <li>
+        <Checkbox
+          :model-value="is_sensitive"
+          @update:model-value="v => change_sensitivity(v)"
+        >
+          {{ $t('admin_dash.users.content_nsfw') }}
+        </Checkbox>
+      </li>
+      <li>
+        <Select
+          :model-value="visibility"
+          @update:model-value="v => change_visibility(v)"
+        >
+          <option
+            value="public"
+          >
+            {{ $t('admin_dash.users.scope_public') }}
+          </option>
+          <option
+            value="unlisted"
+          >
+            {{ $t('admin_dash.users.scope_unlisted') }}
+          </option>
+          <option
+            value="private"
+          >
+            {{ $t('admin_dash.users.scope_private') }}
+          </option>
+          <option
+            value="direct"
+          >
+            {{ $t('admin_dash.users.scope_direct') }}
+          </option>
+        </Select>
+      </li>
+      <li>
+        <a :href="status_details.url"> {{ $t('admin_dash.users.link_source') }} </a>
+      </li>
+    </ul>
     <div v-if="!json_expanded">
       <button
         class="button button-default btn"

src/components/settings_modal/admin_tabs/users_tab.js

@@ -15,9 +15,8 @@ const UsersTab = {
   },
   data() {
     return {
-      /* filters must match the filter options below initially, or the ui is gonna have a computer moment
-       * no, i won't fix this
-       * */
+      init: false, /* avoid fetching before our filters got initialized */
+      /* adjust filters_... options here, mounted() will adjust the other flags accordingly */
       filters_origin: 'local',
       filters_activity: 'all',
       filters_permission: 'all',
@@ -104,6 +103,7 @@ const UsersTab = {
       this.reset()
     },
     fetch_page (store, opts) {
+      if(!this.init) return new Promise(() => [])
       const users = store.dispatch('fetchAdminUsers', { ...opts, ...{
         query: this.filters_query,
         filters: this.filters,
@@ -134,6 +134,8 @@ const UsersTab = {
     this.update_origin(this.filters_origin)
     this.update_activity(this.filters_activity)
     this.update_permission(this.filters_permission)
+    this.init = true
+    this.reset()
   }
 }
 

src/i18n/en.json

@@ -1187,7 +1187,8 @@
       "title_database": "Database",
       "title_details": "Details",
       "title_filter_user_search": "Filter User Search",
-      "title_users": "Users"
+      "title_users": "Users",
+      "user_has_no_posts": "User has no posts"
     },
     "limits": {
       "arbitrary_limits": "Arbitrary limits",