New Frontend in Vue with drf interface (#72)

* frontend rewrite with vie initial commit

* got ComicCard.vue working nice.

* got TheComicList.vue working.

* added router and basic config

* getting jwt stuff working.

* login with jwt now working.

* implemented browse api call

* implemented browse api recievers

* jwt token is now updating automatically.

* removed code for jwt testing.

* enabled browsing

* breadcrumbs working

* adding django webpack loader

* linking up navigation

* fixes for ComicCard.vue stying

* added thumbnail view

* added thumbnail generation and handling.

* detached breadcrumbs

* fix breadcrumbs

* added first stages of reader

* reader view is working.

* reader is now working with keyboard shortcuts

* implemented setting read page.

* implemented pagination on comic reader.

* hide elements that shouldn't be shown.

* fixed the ComicCard.vue to use as little space as possible.

* fix navbar browse link

* added RecentView.vue and added manual option for breadcrumbs

* updated rest api to handle recent comics.

* most functionality of recent comics done

* modified comicstatus relation to use uuid relation and implemented mark read and unread for batches.

* added functions to TheRecentTable.vue

* added feed link to TheRecentTable.vue

* fixes for comicstatus updates.

* added constraints to comicstatus

* update to python packages.

* some changes for django 4, also removed django-recaptcha2 as it doesnt support django 4.

* some fixes and updates to ComicCard.vue

* cleaned up generate_directory. fixed bug where pages not visible on first call.

* cleaned up generate_directory. fixed bug where pages not visible on first call.

* cleaned up generate_directory. fixed bug where pages not visible on first call.

* cleaned up generate_directory.

* added silk stubs

* fix for re-requesting thumbnail after getting it already.

* fix for removing stale comics.
adding leeway to access token.

* mark read and unread

* added filtering to comic list.

* stored filtering state.

* stored filtering state.

* added next functionality to login.

* cleanup LoginView.vue

* bump font-awesome.

* working on AccountView.vue

* fixed form submission on LoginView.vue

* account page should now be working.

* hide users option if not superuser.

* added pdf support

* make pdf resize.

* added touch controls to pdf reader

* added touch controls to comic reader

* beginnings of routing between issues.

* fixes for navigating pages.

* fixes for navigating pages.

* fixes for navigating pages.

* renamed HomeView.vue to BrowseView.vue

* stubs for users page added. api ready

* users page further functinality

* fix for notification

* fix for notification

* moved messages to parent.

* form to add users

* added error handling

* removed console logging

* classification in base directory should be lowest

* renamed usermisc to classification to be more consistent with what it does.

* renamed usermisc to classification to be more consistent with what it does.

* added functionality to change classification of directories.

* merged rss_id api into account api.

* merged breadcrumbs api into browse api.

* clears some warnings from console.

* fixed read/unread rendering.

* added build script and starting lint

* fixing lint errors

* fixing lint errors

* fixing lint errors

* fixing lint errors

* fixing lint errors

* fixing lint errors

* fixing lint errors

* fixing lint errors

* fixing navigation bugs

* cleanup and fixes

* fixed generated tooltips over calling.

* fixed classifications.

* initial setup now working

* fix navbar branding

* fix favicon

* added beta build script.

* fixes to get ready for production

* optimisations for loading new comics.

* added loading indicators to TheComicList.vue

* lint fixes

* made two methods static. may use them elsewhere.

* fix for scanning files.

* version updates.

* fixes for production

* fixes for production

Co-authored-by: Peter Dwyer <peter.dwyer@clanwilliamhealth.com>

frontend/src/views/UserView.vue

@@ -0,0 +1,81 @@
+<template>
+  <the-breadcrumbs :manual_crumbs="this.crumbs" />
+  <CContainer>
+    <alert-messages :messages="messages" />
+    <user-list :users="users" v-if="!userid"/>
+    <user-edit v-if="user_data" :user="user_data" @add-message="addMessage"/>
+    <add-user v-if="!userid" @user-added="updateUsers" @add-message="addMessage"/>
+  </CContainer>
+</template>
+
+<script>
+import TheBreadcrumbs from "@/components/TheBreadcrumbs";
+import UserList from "@/components/UserList";
+import api from "@/api";
+import UserEdit from "@/components/UserEdit";
+import alertMessages from "@/components/AlertMessages";
+import AddUser from "@/components/AddUser";
+import router from "@/router";
+
+const default_crumbs = [
+  {id: 0, selector: '', name: 'Home'},
+  {id: 1, route: {'name': 'user'}, name: 'Users'}
+]
+export default {
+  name: "UserView",
+  components: {AddUser, alertMessages, UserEdit, UserList, TheBreadcrumbs},
+  props: {
+    userid: String
+  },
+  data () {
+    return {
+      crumbs: [...default_crumbs],
+      users: [],
+      viewUserList: true,
+      user_data: null,
+      messages: []
+  }},
+  methods: {
+    updateUsers() {
+      api.get('/api/users/').then(response => {
+        this.users = response.data
+      })
+    },
+    getUser() {
+      api.get('/api/users/' + this.userid + '/').then(response => {
+        this.user_data = response.data
+        this.crumbs.push({id: 1, selector: '', name: response.data.username})
+      }).catch(() => {
+        this.messages.push({
+          color: 'danger',
+          text: 'User with id "' + this.userid + '" does not exist.'
+        })
+        router.push({name: 'user'})
+      })
+    },
+    addMessage(message){
+      this.messages.push(message)
+    }
+  },
+  mounted() {
+    this.updateUsers()
+    if (this.userid){
+      this.getUser()
+    }
+  },
+  beforeUpdate() {
+    this.updateUsers()
+    this.crumbs = [...default_crumbs]
+    if (this.userid){
+      this.getUser()
+    } else {
+      this.user_data = null
+      this.crumbs = default_crumbs
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>