summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/sass/main.sass3
-rw-r--r--components/Pagination.vue8
-rw-r--r--pages/admin/index.vue21
-rw-r--r--pages/admin/models.vue21
-rw-r--r--pages/admin/reports.vue21
-rw-r--r--store/users.js12
-rw-r--r--store/warnings.js1
7 files changed, 70 insertions, 17 deletions
diff --git a/assets/sass/main.sass b/assets/sass/main.sass
index 6c74fbe..b9191cb 100644
--- a/assets/sass/main.sass
+++ b/assets/sass/main.sass
@@ -17,3 +17,6 @@ html.dark-mode
.dark\:border-b-1
border-bottom-width: 1px
+
+.max-w-100
+ max-width: 100px
diff --git a/components/Pagination.vue b/components/Pagination.vue
index e751dd8..7925ab0 100644
--- a/components/Pagination.vue
+++ b/components/Pagination.vue
@@ -4,7 +4,7 @@
ul.flex.list-style-none.items-center.justify-center
li.page-item(:class="{'cursor-not-allowed opacity-20 page-item disabled': page < 1}")
a.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800(
- :href="(page == 0) ? '#' : '/?page='+incrPage(-1)"
+ :href="(page == 0) ? '#' : (path ?? '/')+'?page='+incrPage(-1)"
class="hover:text-gray-800 hover:bg-gray-200 focus:shadow-none dark:text-white"
)
span.sr-only Previous
@@ -12,12 +12,12 @@
path(fill-rule="evenodd", d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z", clip-rule="evenodd")
li.page-item(v-for="i in pages")
a.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800(
- :href="'/?page='+(i-1)" aria-current="page"
+ :href="(path ?? '/')+'?page='+(i-1)" aria-current="page"
:class="{'hover:text-gray-800 hover:bg-gray-200 focus:shadow-none dark:text-white': true, 'bg-green-500 text-green-50 hover:text-green-50': page == (i-1)}"
) {{ i-1 }}
li.page-item(:class="{'cursor-not-allowed opacity-20 page-item disabled': page == pages-1}")
a.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800(
- :href="(page == (pages-1)) ? '#' : '/?page='+incrPage(1)"
+ :href="(page == (pages-1)) ? '#' : (path ?? '/')+'?page='+incrPage(1)"
class="hover:text-gray-800 hover:bg-gray-200 focus:shadow-none dark:text-white"
)
span.sr-only Next
@@ -28,7 +28,7 @@
<script>
export default {
name: "Pagination",
- props: ["page", "pages"],
+ props: ["page", "pages", "path"],
methods: {
incrPage(value) {
return Number(this.page) + value;
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index 679f82f..e08f819 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -10,12 +10,14 @@
:fields="users"
path="/users/"
)
+ pagination(:page="page" :pages="pages" v-if="count" path="/admin")
</template>
<script>
import { mapGetters } from "vuex";
import AdminSidebar from "@/components/AdminSidebar.vue";
+import Pagination from "@/components/Pagination.vue";
import VTable from "@/components/VTable.vue";
export default {
@@ -23,9 +25,19 @@ export default {
head: { title: "Admin panel · Verden" },
computed: {
...mapGetters("auth", ["isLogged", "me"]),
- ...mapGetters("users", ["users"]),
+ ...mapGetters("users", ["users", "count"]),
+ },
+ data() {
+ return {
+ page: 0,
+ pages: 0,
+ };
+ },
+ components: {
+ AdminSidebar,
+ pagination: Pagination,
+ "v-table": VTable,
},
- components: { AdminSidebar, "v-table": VTable },
async mounted() {
await this.$store.dispatch("auth/findMe");
@@ -33,7 +45,10 @@ export default {
window.location.href = "/";
}
- this.$store.dispatch("users/getUsers", { page: 0 });
+ this.page = this.$route.query.page ?? 0;
+ this.$store.dispatch("users/getUsers", this.page).then(() => {
+ this.pages = Math.ceil(this.count / 20);
+ });
},
};
</script>
diff --git a/pages/admin/models.vue b/pages/admin/models.vue
index 86b463b..66f20cf 100644
--- a/pages/admin/models.vue
+++ b/pages/admin/models.vue
@@ -10,12 +10,14 @@
:fields="models"
path="/models/"
)
+ pagination(:page="page" :pages="pages" v-if="count" path="/admin/models")
</template>
<script>
import { mapGetters } from "vuex";
import AdminSidebar from "@/components/AdminSidebar.vue";
+import Pagination from "@/components/Pagination.vue";
import VTable from "@/components/VTable.vue";
export default {
@@ -23,9 +25,19 @@ export default {
head: { title: "Models · Verden" },
computed: {
...mapGetters("auth", ["isLogged", "me"]),
- ...mapGetters("models", ["models"]),
+ ...mapGetters("models", ["models", "count"]),
+ },
+ data() {
+ return {
+ page: 0,
+ pages: 0,
+ };
+ },
+ components: {
+ AdminSidebar,
+ pagination: Pagination,
+ "v-table": VTable,
},
- components: { AdminSidebar, "v-table": VTable },
async mounted() {
await this.$store.dispatch("auth/findMe");
@@ -33,7 +45,10 @@ export default {
window.location.href = "/";
}
- this.$store.dispatch("models/getModels", 0);
+ this.page = this.$route.query.page ?? 0;
+ this.$store.dispatch("models/getModels", this.page).then(() => {
+ this.pages = Math.ceil(this.count / 20);
+ });
},
};
</script>
diff --git a/pages/admin/reports.vue b/pages/admin/reports.vue
index 7d49a40..074360a 100644
--- a/pages/admin/reports.vue
+++ b/pages/admin/reports.vue
@@ -9,12 +9,14 @@
:keys="['id', 'model_id', 'created', 'updated', 'user', 'resolved', 'note', 'admin_note']"
:fields="warnings"
)
+ pagination(:page="page" :pages="pages" v-if="count" path="/admin/reports")
</template>
<script>
import { mapGetters } from "vuex";
import AdminSidebar from "@/components/AdminSidebar.vue";
+import Pagination from "@/components/Pagination.vue";
import VTable from "@/components/VTable.vue";
export default {
@@ -22,9 +24,19 @@ export default {
head: { title: "Models · Verden" },
computed: {
...mapGetters("auth", ["isLogged", "me"]),
- ...mapGetters("warnings", ["warnings"]),
+ ...mapGetters("warnings", ["warnings", "count"]),
+ },
+ data() {
+ return {
+ page: 0,
+ pages: 0,
+ };
+ },
+ components: {
+ AdminSidebar,
+ pagination: Pagination,
+ "v-table": VTable,
},
- components: { AdminSidebar, "v-table": VTable },
async mounted() {
await this.$store.dispatch("auth/findMe");
@@ -32,7 +44,10 @@ export default {
window.location.href = "/";
}
- this.$store.dispatch("warnings/getWarnings", 0);
+ this.page = this.$route.query.page ?? 0;
+ this.$store.dispatch("warnings/getWarnings", this.page).then(() => {
+ this.pages = Math.ceil(this.count / 20);
+ });
},
};
</script>
diff --git a/store/users.js b/store/users.js
index df2b596..44f041c 100644
--- a/store/users.js
+++ b/store/users.js
@@ -1,16 +1,21 @@
export const state = () => ({
users: [],
+ count: 0,
});
export const getters = {
users: (state) => {
return state.users;
},
+ count: (state) => {
+ return state.count;
+ },
};
export const mutations = {
saveUsers: (state, value) => {
- state.users = value;
+ state.users = value.results;
+ state.count = value.count;
},
};
@@ -144,11 +149,10 @@ export const actions = {
return res;
},
// Get users
- async getUsers({ commit, rootGetters }, data) {
+ async getUsers({ commit, rootGetters }, page) {
commit("loadingStatus", true, { root: true });
let res = { status: 0, data: null };
let api = this.$config.api;
- const page = data.page ? data.page : 0;
await fetch(`${api}/v1/users?page=${page}`, {
headers: {
@@ -159,7 +163,7 @@ export const actions = {
.then(async (response) => {
res.status = response.status;
res.data = await response.json();
- commit("saveUsers", res.data.results);
+ commit("saveUsers", res.data);
})
.catch((e) => {
res.status = e.status;
diff --git a/store/warnings.js b/store/warnings.js
index 2d3aa99..1e8fe07 100644
--- a/store/warnings.js
+++ b/store/warnings.js
@@ -1,5 +1,6 @@
export const state = () => ({
warnings: [],
+ count: 0,
});
export const getters = {
generated by cgit v1.2.3-18-g5258 (git 2.32.0) at 2024-11-21 21:42:59 +0000