Show item count

projectcitybuild · Jan 15, 2025 · d4e1dac · d4e1dac
1 parent d84b9e3
commit d4e1dac
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 76 deletions.
diff --git a/resources/js/manage/Components/InfinitePagination.vue b/resources/js/manage/Components/InfinitePagination.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="T">
 import { Paginated } from '../Data/Paginated'
-import { onMounted, ref, watch } from 'vue'
+import { onBeforeMount, onMounted, ref, watch } from 'vue'
 import axios, { AxiosResponse } from 'axios'
 import { useIntersectionObserver, watchDebounced } from '@vueuse/core'
 
@@ -11,9 +11,10 @@ interface Props {
     query?: object,
     path?: string,
 }
-
 const props = defineProps<Props>()
 
+const itemCount = defineModel('count')
+
 const items = ref<T[]>(props.initial?.data ?? [])
 const currentPage = ref(props.initial?.current_page ?? 1)
 const reachedEnd = ref(props.initial?.next_page_url == null ?? false)
@@ -71,6 +72,7 @@ const loadFirstPage = async () => {
     reachedEnd.value = false
 
     items.value = await load()
+    itemCount.value = items.value.length
 }
 
 const loadNextPage = async () => {
@@ -80,6 +82,7 @@ const loadNextPage = async () => {
         ...items.value,
         ...await load(),
     ]
+    itemCount.value = items.value.length
 }
 
 const { stop } = useIntersectionObserver(
@@ -94,6 +97,8 @@ onMounted(() => {
         loadFirstPage()
     }
 })
+
+onBeforeMount(() => itemCount.value = items.value.length)
 </script>
 
 <template>

diff --git a/resources/js/manage/Pages/Accounts/AccountList.vue b/resources/js/manage/Pages/Accounts/AccountList.vue
@@ -20,6 +20,7 @@ defineProps<Props>()
 
 const filterExpanded = ref(false)
 const query = ref({})
+const itemCount = ref(0)
 
 const form = useForm({
     username: null,
@@ -93,7 +94,13 @@ watch(
             </Card>
 
             <Card class="grow">
-                <div class="p-4 flex justify-end items-center">
+                <div class="p-4 flex justify-between items-center">
+                    <div>
+                        <span v-if="accounts" class="text-sm text-gray-500">
+                            Showing <strong>{{ itemCount }}</strong> of <strong>{{ accounts?.total ?? 0 }}</strong>
+                        </span>
+                    </div>
+
                     <div class="flex gap-2">
                         <OutlinedButton
                             variant="secondary"
@@ -126,6 +133,7 @@ watch(
                     <InfinitePagination
                         :initial="accounts"
                         :query="query"
+                        v-model:count="itemCount"
                         v-slot="source"
                         class="border-t border-gray-200"
                     >

diff --git a/resources/js/manage/Pages/Badges/BadgeList.vue b/resources/js/manage/Pages/Badges/BadgeList.vue
@@ -9,13 +9,15 @@ import Card from '../../Components/Card.vue'
 import FilledButton from '../../Components/FilledButton.vue'
 import SvgIcon from '../../Components/SvgIcon.vue'
 import SpinnerRow from '../../Components/SpinnerRow.vue'
+import { ref } from 'vue'
 
 interface Props {
     success?: string,
     badges?: Paginated<Badge>,
 }
-
 defineProps<Props>()
+
+const itemCount = ref(0)
 </script>
 
 <template>
@@ -25,11 +27,13 @@ defineProps<Props>()
         <SuccessAlert v-if="success" :message="success" class="mb-4"/>
 
         <Card>
-            <div
-                class="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 p-4">
-                <div class="w-full md:w-1/2">
-
+            <div class="flex flex-row items-center justify-between p-4">
+                <div>
+                    <span v-if="badges" class="text-sm text-gray-500">
+                        Showing <strong>{{ itemCount }}</strong> of <strong>{{ badges?.total ?? 0 }}</strong>
+                    </span>
                 </div>
+
                 <div>
                     <Link href="/manage/badges/create">
                         <FilledButton variant="primary">
@@ -47,6 +51,7 @@ defineProps<Props>()
 
                 <InfinitePagination
                     :initial="badges"
+                    v-model:count="itemCount"
                     v-slot="source"
                 >
                     <BadgeListTable :badges="source.data"/>

diff --git a/resources/js/manage/Pages/Donations/DonationList.vue b/resources/js/manage/Pages/Donations/DonationList.vue
@@ -9,13 +9,15 @@ import Card from '../../Components/Card.vue'
 import FilledButton from '../../Components/FilledButton.vue'
 import SvgIcon from '../../Components/SvgIcon.vue'
 import SpinnerRow from '../../Components/SpinnerRow.vue'
+import { ref } from 'vue'
 
 interface Props {
     success?: string,
     donations?: Paginated<Donation>,
 }
-
 defineProps<Props>()
+
+const itemCount = ref(0)
 </script>
 
 <template>
@@ -25,11 +27,13 @@ defineProps<Props>()
         <SuccessAlert v-if="success" :message="success" class="mb-4"/>
 
         <Card>
-            <div
-                class="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 p-4">
-                <div class="w-full md:w-1/2">
-
+            <div class="flex flex-row items-center justify-between p-4">
+                <div>
+                    <span v-if="donations" class="text-sm text-gray-500">
+                        Showing <strong>{{ itemCount }}</strong> of <strong>{{ donations?.total ?? 0 }}</strong>
+                    </span>
                 </div>
+
                 <div>
                     <Link href="/manage/donations/create">
                         <FilledButton variant="primary">
@@ -47,6 +51,7 @@ defineProps<Props>()
 
                 <InfinitePagination
                     :initial="donations"
+                    v-model:count="itemCount"
                     v-slot="source"
                 >
                     <DonationListTable :donations="source.data"/>

diff --git a/resources/js/manage/Pages/Groups/GroupList.vue b/resources/js/manage/Pages/Groups/GroupList.vue
@@ -23,10 +23,11 @@ defineProps<Props>()
         <SuccessAlert v-if="success" :message="success" class="mb-4"/>
 
         <Card>
-            <div
-                class="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 p-4">
-                <div class="w-full md:w-1/2">
-
+            <div class="flex flex-row items-center justify-between p-4">
+                <div>
+                    <span v-if="groups" class="text-sm text-gray-500">
+                        Showing <strong>{{ groups.length }}</strong> of <strong>{{ groups?.length ?? 0 }}</strong>
+                    </span>
                 </div>
                 <div>
                     <Link

diff --git a/resources/js/manage/Pages/IPBans/IPBanList.vue b/resources/js/manage/Pages/IPBans/IPBanList.vue
@@ -9,12 +9,15 @@ import SuccessAlert from '../../Components/SuccessAlert.vue'
 import FilledButton from '../../Components/FilledButton.vue'
 import SvgIcon from '../../Components/SvgIcon.vue'
 import SpinnerRow from '../../Components/SpinnerRow.vue'
+import { ref } from 'vue'
 
 interface Props {
     bans?: Paginated<IPBan>,
     success?: string,
 }
 defineProps<Props>()
+
+const itemCount = ref(0)
 </script>
 
 <template>
@@ -24,29 +27,11 @@ defineProps<Props>()
 
     <section>
         <Card>
-            <div
-                class="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 p-4">
-                <div class="w-full md:w-1/2">
-                    <form class="flex items-center">
-                        <label for="simple-search" class="sr-only">Search</label>
-                        <div class="relative w-full">
-                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-                                <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400"
-                                     fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                                    <path fill-rule="evenodd"
-                                          d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-                                          clip-rule="evenodd"/>
-                                </svg>
-                            </div>
-                            <input
-                                type="text"
-                                id="simple-search"
-                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                                placeholder="UUID / Name..."
-                                required
-                            >
-                        </div>
-                    </form>
+            <div class="flex flex-row items-center justify-between p-4">
+                <div>
+                    <span v-if="bans" class="text-sm text-gray-500">
+                        Showing <strong>{{ itemCount }}</strong> of <strong>{{ bans?.total ?? 0 }}</strong>
+                    </span>
                 </div>
                 <div>
                     <Link href="/manage/ip-bans/create">
@@ -65,6 +50,7 @@ defineProps<Props>()
 
                 <InfinitePagination
                     :initial="bans"
+                    v-model:count="itemCount"
                     v-slot="source"
                 >
                     <IPBanListTable :bans="source.data"/>

diff --git a/resources/js/manage/Pages/PlayerBans/PlayerBanList.vue b/resources/js/manage/Pages/PlayerBans/PlayerBanList.vue
@@ -9,12 +9,15 @@ import SuccessAlert from '../../Components/SuccessAlert.vue'
 import FilledButton from '../../Components/FilledButton.vue'
 import SvgIcon from '../../Components/SvgIcon.vue'
 import SpinnerRow from '../../Components/SpinnerRow.vue'
+import { ref } from 'vue'
 
 interface Props {
     bans?: Paginated<PlayerBan>,
     success?: string,
 }
 defineProps<Props>()
+
+const itemCount = ref(0)
 </script>
 
 <template>
@@ -24,29 +27,11 @@ defineProps<Props>()
 
     <section>
         <Card>
-            <div
-                class="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 p-4">
-                <div class="w-full md:w-1/2">
-                    <form class="flex items-center">
-                        <label for="simple-search" class="sr-only">Search</label>
-                        <div class="relative w-full">
-                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-                                <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400"
-                                     fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                                    <path fill-rule="evenodd"
-                                          d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-                                          clip-rule="evenodd"/>
-                                </svg>
-                            </div>
-                            <input
-                                type="text"
-                                id="simple-search"
-                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                                placeholder="UUID / Name..."
-                                required
-                            >
-                        </div>
-                    </form>
+            <div class="flex flex-row items-center justify-between p-4">
+                <div>
+                    <span v-if="bans" class="text-sm text-gray-500">
+                        Showing <strong>{{ itemCount }}</strong> of <strong>{{ bans?.total ?? 0 }}</strong>
+                    </span>
                 </div>
                 <div>
                     <Link href="/manage/player-bans/create">
@@ -65,6 +50,7 @@ defineProps<Props>()
 
                 <InfinitePagination
                     :initial="bans"
+                    v-model:count="itemCount"
                     v-slot="source"
                 >
                     <BanListTable :bans="source.data"/>

diff --git a/resources/js/manage/Pages/Players/PlayerList.vue b/resources/js/manage/Pages/Players/PlayerList.vue
@@ -9,12 +9,15 @@ import Card from '../../Components/Card.vue'
 import FilledButton from '../../Components/FilledButton.vue'
 import SvgIcon from '../../Components/SvgIcon.vue'
 import SpinnerRow from '../../Components/SpinnerRow.vue'
+import { ref } from 'vue'
 
 interface Props {
     success?: string,
     players?: Paginated<Player>,
 }
 defineProps<Props>()
+
+const itemCount = ref(0)
 </script>
 
 <template>
@@ -24,11 +27,13 @@ defineProps<Props>()
         <SuccessAlert v-if="success" :message="success" class="mb-4"/>
 
         <Card>
-            <div
-                class="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 p-4">
-                <div class="w-full md:w-1/2">
-
+            <div class="flex flex-row items-center justify-between p-4">
+                <div>
+                    <span v-if="players" class="text-sm text-gray-500">
+                        Showing <strong>{{ itemCount }}</strong> of <strong>{{ players?.total ?? 0 }}</strong>
+                    </span>
                 </div>
+
                 <div>
                     <Link href="/manage/players/create">
                         <FilledButton variant="primary">
@@ -46,6 +51,7 @@ defineProps<Props>()
 
                 <InfinitePagination
                     :initial="players"
+                    v-model:count="itemCount"
                     v-slot="source"
                 >
                     <PlayerListTable :players="source.data"/>

diff --git a/resources/js/manage/Pages/Warnings/WarningList.vue b/resources/js/manage/Pages/Warnings/WarningList.vue
@@ -9,12 +9,15 @@ import Card from '../../Components/Card.vue'
 import FilledButton from '../../Components/FilledButton.vue'
 import SvgIcon from '../../Components/SvgIcon.vue'
 import SpinnerRow from '../../Components/SpinnerRow.vue'
+import { ref } from 'vue'
 
 interface Props {
     success?: string,
     warnings?: Paginated<PlayerWarning>,
 }
 defineProps<Props>()
+
+const itemCount = ref(0)
 </script>
 
 <template>
@@ -24,10 +27,11 @@ defineProps<Props>()
         <SuccessAlert v-if="success" :message="success" class="mb-4"/>
 
         <Card>
-            <div
-                class="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 p-4">
-                <div class="w-full md:w-1/2">
-
+            <div class="flex flex-row items-center justify-between p-4">
+                <div>
+                    <span v-if="warnings" class="text-sm text-gray-500">
+                        Showing <strong>{{ itemCount }}</strong> of <strong>{{ warnings?.total ?? 0 }}</strong>
+                    </span>
                 </div>
                 <div>
                     <Link href="/manage/warnings/create">
@@ -46,6 +50,7 @@ defineProps<Props>()
 
                 <InfinitePagination
                     :initial="warnings"
+                    v-model:count="itemCount"
                     v-slot="source"
                 >
                     <WarningListTable :warnings="source.data"/>