Use our store value for number of torrents and implemented a getter in the sidebar action button component and action call from the torrentList component.
This commit is contained in:
		@@ -44,10 +44,15 @@
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import storage from '@/storage.js'
 | 
			
		||||
import store from '@/store'
 | 
			
		||||
import { sortableSize } from '@/utils.js'
 | 
			
		||||
import { searchTorrents, addMagnet } from '@/api.js'
 | 
			
		||||
 | 
			
		||||
import SeasonedButton from '@/components/ui/SeasonedButton.vue'
 | 
			
		||||
import SeasonedInput from '@/components/ui/SeasonedInput.vue'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  components: { SeasonedButton, SeasonedInput },
 | 
			
		||||
  props: {
 | 
			
		||||
    query: {
 | 
			
		||||
      type: String,
 | 
			
		||||
@@ -64,21 +69,31 @@ export default {
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      listLoaded: false,
 | 
			
		||||
      torrents: undefined,
 | 
			
		||||
      torrents: [],
 | 
			
		||||
      torrentResponse: undefined,
 | 
			
		||||
      currentPage: 0,
 | 
			
		||||
      prevCol: '',
 | 
			
		||||
      direction: false,
 | 
			
		||||
      release_types: ['all'],
 | 
			
		||||
      selectedRelaseType: 'all'
 | 
			
		||||
      selectedRelaseType: 'all',
 | 
			
		||||
      editSearchQuery: false,
 | 
			
		||||
      editedSearchQuery: ''
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  beforeMount() {
 | 
			
		||||
    if (localStorage.getItem('admin')) {
 | 
			
		||||
      this.fetchTorrents()
 | 
			
		||||
    }
 | 
			
		||||
    store.dispatch('torrentModule/reset')
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    ostekake() {
 | 
			
		||||
      this.torrents = []
 | 
			
		||||
      this.toggleEditSearchQuery()
 | 
			
		||||
    },
 | 
			
		||||
    toggleEditSearchQuery() {
 | 
			
		||||
      this.editSearchQuery = !this.editSearchQuery;
 | 
			
		||||
    },
 | 
			
		||||
    expand(event, name) {
 | 
			
		||||
      const existingExpandedElement = document.getElementsByClassName('expanded')[0]
 | 
			
		||||
 | 
			
		||||
@@ -184,8 +199,16 @@ export default {
 | 
			
		||||
      this.torrents = torrents.filter(torrent => torrent.release_type.includes(item))
 | 
			
		||||
      this.sortTable(this.prevCol, true)
 | 
			
		||||
    },
 | 
			
		||||
    fetchTorrents(){
 | 
			
		||||
      searchTorrents(this.query, 'all', this.currentPage, storage.token)
 | 
			
		||||
    updateResultCountInStore() {
 | 
			
		||||
      store.dispatch('torrentModule/setResults', this.torrents)
 | 
			
		||||
      store.dispatch('torrentModule/setResultCount', this.torrentResponse.length)
 | 
			
		||||
    },
 | 
			
		||||
    fetchTorrents(query=undefined){
 | 
			
		||||
      this.listLoaded = false;
 | 
			
		||||
 | 
			
		||||
      console.log('query: ', query || this.query)
 | 
			
		||||
      searchTorrents(query || this.query, 'all', this.currentPage, storage.token)
 | 
			
		||||
//      Promise.resolve({"success":true,"results":[]})
 | 
			
		||||
      .then(resp => {
 | 
			
		||||
          let data = resp.data;
 | 
			
		||||
          console.log('data results', data.results);
 | 
			
		||||
@@ -194,6 +217,7 @@ export default {
 | 
			
		||||
          this.listLoaded = true;
 | 
			
		||||
      })
 | 
			
		||||
      .then(this.findRelaseTypes)
 | 
			
		||||
      .then(this.updateResultCountInStore)
 | 
			
		||||
      .catch(e => {
 | 
			
		||||
        const error = e.toString()
 | 
			
		||||
        this.errorMessage = error.indexOf('401') != -1 ? 'Permission denied' : 'Nothing found';
 | 
			
		||||
@@ -227,16 +251,39 @@ export default {
 | 
			
		||||
@import "./src/scss/media-queries";
 | 
			
		||||
@import "./src/scss/elements";
 | 
			
		||||
 | 
			
		||||
.title {
 | 
			
		||||
  margin: 0;
 | 
			
		||||
.torrentHeader {
 | 
			
		||||
  display: flex;
 | 
			
		||||
  align-items: center;
 | 
			
		||||
  justify-content: center;
 | 
			
		||||
  padding-bottom: 20px;
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  &-text {
 | 
			
		||||
    font-weight: 400;
 | 
			
		||||
    text-transform: uppercase;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
    font-size: 14px;
 | 
			
		||||
    color: $c-green;
 | 
			
		||||
  padding-bottom: 20px;
 | 
			
		||||
  @include tablet-min{
 | 
			
		||||
    font-size: 16px;
 | 
			
		||||
    text-align: center;
 | 
			
		||||
 | 
			
		||||
    @include tablet-min {
 | 
			
		||||
      font-size: 16px
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    &.editable {
 | 
			
		||||
      cursor: pointer;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  &-editIcon {
 | 
			
		||||
    margin-left: 10px;
 | 
			
		||||
    margin-top: -3px;
 | 
			
		||||
    width: 22px;
 | 
			
		||||
    height: 22px;
 | 
			
		||||
 | 
			
		||||
    &:hover {
 | 
			
		||||
      fill: $c-green;
 | 
			
		||||
      cursor: pointer;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -6,11 +6,19 @@
 | 
			
		||||
        <use v-else :xlink:href="iconRef"></use>
 | 
			
		||||
      </svg>
 | 
			
		||||
      <span class="action-text">{{ active && textActive ? textActive : text }}</span> 
 | 
			
		||||
      <div v-if="torrentResults"
 | 
			
		||||
            style="display: flex;
 | 
			
		||||
                   flex-grow: 2;
 | 
			
		||||
                   width: 2rem;
 | 
			
		||||
                   ">
 | 
			
		||||
        <span style="width: 100%; text-align: right;" v-if="getTorrentResultCount !== null">{{ getTorrentResultCount }} results</span></div>
 | 
			
		||||
    </a>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import store from '@/store'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  props: {
 | 
			
		||||
    iconRef: {
 | 
			
		||||
@@ -33,6 +41,14 @@ export default {
 | 
			
		||||
      type: String,
 | 
			
		||||
      required: false
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  computed: {
 | 
			
		||||
    torrentResults() {
 | 
			
		||||
      return this.text.toLowerCase().includes('torrents')
 | 
			
		||||
    },
 | 
			
		||||
    getTorrentResultCount() {
 | 
			
		||||
      return store.getters['torrentModule/resultCount']
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user