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>
2026-11-02 18:46:53 +00:00 · 2022-08-25 15:42:20 +01:00
1 parent 3be7d9cb5c
commit c5633bf54a
@@ -0,0 +1,148 @@
+<template>
+  <CContainer>
+    <CRow>
+      <CInputGroup>
+        <CFormInput placeholder="Search" aria-label="Filter comics by name" v-model="this.filters.search_string"/>
+        <CButton type="button" :color="(!filters.filter_read && !filters.filter_unread? 'primary' : 'secondary')" variant="outline" @click="filters.filter_read=false; filters.filter_unread=false">All</CButton>
+        <CButton type="button" :color="(filters.filter_read && !filters.filter_unread? 'primary' : 'secondary')" variant="outline" @click="filters.filter_read=true; filters.filter_unread=false">Read</CButton>
+        <CButton type="button" :color="(!filters.filter_read && filters.filter_unread? 'primary' : 'secondary')" variant="outline" @click="filters.filter_read=false; filters.filter_unread=true">Un-read</CButton>
+        <CDropdown variant="input-group">
+          <CDropdownToggle color="secondary" variant="outline">Action</CDropdownToggle>
+          <CDropdownMenu>
+            <CDropdownItem @click="markAll('mark_unread')"><font-awesome-icon icon='book' />Mark Un-read</CDropdownItem>
+            <CDropdownItem @click="markAll('mark_read')"><font-awesome-icon icon='book-open' />Mark read</CDropdownItem>
+          </CDropdownMenu>
+        </CDropdown>
+      </CInputGroup>
+    </CRow>
+    <CRow>
+      <template v-if="loading">
+        <CCol>
+          <CProgress class="mt-3" >
+            <CProgressBar color="success" variant="striped" animated  :value="100"/>
+          </CProgress>
+        </CCol>
+      </template>
+      <template v-else>
+        <template v-for="comic in filteredComics" :key="comic.selector" >
+          <comic-card :data="comic" @updateComicList="updateComicList" @markPreviousRead="markPreviousRead" @updateThumbnail="updateThumbnail" />
+        </template>
+      </template>
+    </CRow>
+  </CContainer>
+</template>
+
+<script>
+import ComicCard from "@/components/ComicCard";
+import api from '@/api'
+import store from "@/store";
+
+export default {
+  name: "TheComicList",
+  components: {ComicCard},
+  data () {
+    return {
+      comics: [],
+      breadcrumbs: [
+        {id: 0, selector: '', name: 'Home'}
+      ],
+      filters: {
+        search_string: '',
+        filter_read: false,
+        filter_unread: false
+      },
+      loading: true
+  }},
+  props: {
+    selector: String
+  },
+  methods: {
+    updateComicList () {
+      this.loading = true
+      let comic_list_url = '/api/browse/'
+      if (this.selector) {
+        comic_list_url += this.selector + '/'
+      }
+      api.get(comic_list_url)
+      .then(response => {
+        this.comics = response.data
+        this.loading = false
+      })
+      .catch((error) => {console.log(error)})
+    },
+    markPreviousRead (selector) {
+      let selectors = []
+      this.comics.every((item) => {
+        if (item.selector === selector) {
+          selectors.push(item.selector)
+          return false
+        } else {
+          if (item.type === 'ComicBook') {
+            selectors.push(item.selector)
+          }
+          return true
+        }
+      })
+      let payload = { selectors: selectors }
+      api.put('/api/action/mark_read/', payload).then(() => {
+        this.updateComicList()
+      })
+    },
+    markAll (action) {
+      let selectors = []
+      this.comics.filter(item => item.type === 'ComicBook').forEach((item) => {selectors.push(item.selector)})
+      let payload = { selectors: selectors }
+      api.put('/api/action/' + action + '/', payload).then(() => {
+        this.updateComicList()
+      })
+    },
+    updateThumbnail(resp){
+      this.comics.find(i => i.selector === resp.selector).thumbnail = resp.thumbnail
+    }
+  },
+  computed: {
+    filteredComics() {
+      let filtered_comics = [...this.comics]
+      if (this.filters.search_string) {
+        filtered_comics = filtered_comics.filter(comic => {
+          return comic.title.toLowerCase().includes(this.filters.search_string.toLowerCase()) })
+      }
+      if (this.filters.filter_read) {
+        filtered_comics = filtered_comics.filter(comic => comic.finished )
+      }
+      if (this.filters.filter_unread) {
+        filtered_comics = filtered_comics.filter(comic => comic.unread )
+      }
+      return filtered_comics
+    }
+  },
+  mounted () {
+    this.updateComicList()
+  },
+  beforeUpdate() {
+    let filter_id = ( this.selector ? this.selector : 'home')
+    if (filter_id in store.state.filters) {
+      this.filters = store.state.filters[filter_id]
+    } else {
+      this.filters = {
+        search_string: '',
+        filter_read: false,
+        filter_unread: false
+      }
+      store.state.filters[filter_id] = this.filters
+    }
+  },
+  watch: {
+    filters() {
+      let filter_id = ( this.selector ? this.selector : 'home')
+      store.state.filters[filter_id] = this.filters
+    }
+  },
+}
+</script>
+
+<style scoped>
+.dropdown-item {
+  cursor: pointer;
+}
+</style>