User page

3 files changed, 76 insertions, 2 deletions

diff --git a/components/ModelBoxCard.vue b/components/ModelBoxCard.vue
index a6085b7..110c234 100644
--- a/components/ModelBoxCard.vue
+++ b/components/ModelBoxCard.vue
@@ -17,7 +17,7 @@
         .mr-3.float-left
           user-avatar(:data="model.author")
         p.leading-8
-          a.text-green-800(class="hover:text-green-700" :href="'/users/'+model.author.username")
+          a.text-green-800(class="hover:text-green-700" :href="'/user/'+model.author_id")
             | @
             span.underline {{ model.author.username }}
 
diff --git a/pages/models/_id/index.vue b/pages/models/_id/index.vue
index 238aea7..cfa11b2 100644
--- a/pages/models/_id/index.vue
+++ b/pages/models/_id/index.vue
@@ -43,7 +43,7 @@
             .mr-3.float-left
               user-avatar(:data="model.author")
             p.leading-8
-              a.text-green-800(class="hover:text-green-700" :href="'/users/'+model.author.username")
+              a.text-green-800(class="hover:text-green-700" :href="'/user/'+model.author_id")
                 | @
                 span.underline {{ model.author.username }}
       .description.mt-3
diff --git a/pages/user/_id.vue b/pages/user/_id.vue
new file mode 100644
index 0000000..be282af
--- /dev/null
+++ b/pages/user/_id.vue
@@ -0,0 +1,74 @@
+<template lang="pug">
+  .mx-auto.w-90p.py-6#modelpage(class="sm:px-6 lg:px-8 md:max-w-7xl")
+    .flex.mb-10(v-if="user.username")
+      user-avatar(:data="user" big="1")
+      .grid.pl-7
+        h1.text-2xl.font-bold.self-end.flex(:title="user.username+' is an admin'") {{ user.name }} 
+          svg(v-if="user.is_staff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#dc2626" class="ml-2 mt-1 w-6 h-6")
+            path(fill-rule="evenodd" d="M12.516 2.17a.75.75 0 00-1.032 0 11.209 11.209 0 01-7.877 3.08.75.75 0 00-.722.515A12.74 12.74 0 002.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 00.374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 00-.722-.516l-.143.001c-2.996 0-5.717-1.17-7.734-3.08zm3.094 8.016a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd")
+
+        h2.text-md.text-gray-500 @{{ user.username }}
+
+    model-loading(v-if="isLoading")
+    section(v-else)
+      div(v-if="models.length > 0")
+        h4.mb-1.text-lg My models
+        .grid.grid-cols-1.gap-4(class="md:grid-cols-4")
+          model-box-card(
+            v-for="model in models"
+            :key="model.id"
+            :model="model"
+          )
+      h4.text-lg(v-else) No models found
+
+</template>
+
+<script>
+import UserAvatar from "@/components/UserAvatar.vue";
+import FilePreview from "@/components/FilePreview.vue";
+import ModelLoading from "@/components/ModelLoading.vue";
+import ModelBoxCard from "@/components/ModelBoxCard.vue";
+
+import { mapGetters } from "vuex";
+
+export default {
+  name: "UserPageView",
+  layout: "default",
+  data() {
+    return {
+      id: 0,
+      user: {},
+      models: [],
+    };
+  },
+  head() {
+    return {
+      title: this.user.username + " · Verden",
+    };
+  },
+  components: {
+    "user-avatar": UserAvatar,
+    "file-preview": FilePreview,
+    "model-loading": ModelLoading,
+    "model-box-card": ModelBoxCard,
+  },
+  computed: {
+    ...mapGetters(["isLoading"]),
+  },
+  created() {
+    this.id = this.$route.params.id;
+
+    this.$store.dispatch("users/findById", this.id).then((response) => {
+      if (response.status != 200) {
+        window.location.href = "/";
+      } else {
+        this.user = response.data;
+      }
+    });
+
+    this.$store.dispatch("users/findModels", this.id).then((response) => {
+      if (response.status == 200) this.models = response.data.results;
+    });
+  },
+};
+</script>