Arc-hive-list/src/components/archiveList.vue

<!--
This file is part of ArciveList.

# SPDX-FileCopyrightText: 2021 Hangar.org
# SPDX-License-Identifier: AGPL-3.0-or-later
-->


<template>
<div>
  <Search></Search>

  <section class="collections-list">

    <header>
      <h2>Latest in collections</h2>
    </header>

    <main class="">
      <article class="">

        <ul class="accordion"
            data-responsive-accordion-tabs="accordion small-accordion"
            data-multi-expand="true"
            data-allow-all-closed="true"
            data-deep-link="true">
          <li class="accordion-item title"
              data-accordion-item disabled>
            <a href="#" class="accordion-title">
              <ul class="">
                <li class="title"
                    v-on:click="setActiveColumn('title')">
                  Title
                  <span class="ascToggle"
                        v-bind:class="{activeColumn: isActiveCol('title')}">
                    <font-awesome-icon :icon="getOrderIcon('title')" size="1x" />
                  </span>
                </li>
                <li class="curator"
                    v-on:click="setActiveColumn('artist')">
                  Artist
                  <span class="ascToggle"
                        v-bind:class="{activeColumn: isActiveCol('artist')}">
                    <font-awesome-icon :icon="getOrderIcon('artist')" size="1x" />
                  </span>
                </li>
                <li class="collection-name"
                    v-on:click="setActiveColumn('collection')">
                  Collection
                  <span class="ascToggle"
                        v-bind:class="{activeColumn: isActiveCol('collection')}">
                    <font-awesome-icon :icon="getOrderIcon('collection')" size="1x" />
                  </span>
                </li>
                <li class="date"
                    v-on:click="setActiveColumn('date')">
                  Date
                  <span class="ascToggle"
                        v-bind:class="{activeColumn: isActiveCol('date')}">
                    <font-awesome-icon :icon="getOrderIcon('date')" size="1x" />
                  </span>
                </li>
              </ul>
            </a>
            <div class="accordion-content"
                 data-tab-content>
              <figure>
              </figure>
              <p>
              </p>
            </div>
          </li>
          <li v-for="site in sites"
              class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">
              <ul class="">
                <li class="title">
                  {{ site.title }}
                </li>
                <li class="curator">
                  {{ site.currator }}
                </li>
                <li class="collection-name">
                  {{ site.collection }}
                </li>
                <li class="date">
                  {{ site.project_date }}
                </li>
              </ul>
            </a>
            <aside class="accordion-content" data-tab-content>
             <section>
              <figure>
                <img :src="site.thumbnail" />
              </figure>
              <p>
                <span v-html="site.summary"></span>
                <a class="button small"
                   :href="site.url">
                  View
                </a>
              </p>
             </section>
            </aside>
          </li>
        </ul>
        <div class="load_more"
             v-if="more_sites_to_display"
             v-on:click="loadMoreSites()">
          <button>
            Load more
          </button>
        </div>
      </article>
    </main>
    <aside>
      <nav>
      </nav>
    </aside>
  </section>
</div>
</template>


<script>
import axios from 'axios';
import { mapMutations, mapGetters } from 'vuex'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faLongArrowAltUp } from '@fortawesome/free-solid-svg-icons'
import { faLongArrowAltDown } from '@fortawesome/free-solid-svg-icons'
import Search from './search.vue';
export default {
  name: "List",
  components: {
    FontAwesomeIcon,
    Search
  },
  data() {
    return {
      columns_order: {'title': 'asc', 'artist': 'asc', 'collection': 'asc', 'date': 'asc'},
      active_column: 'date',
      //faSortAlphaUp: faSortAlphaUp,
      //faSortAlphaDown: faSortAlphaDown,
      faLongArrowAltUp: faLongArrowAltUp,
      faLongArrowAltDown: faLongArrowAltDown,
      //faArrowsV: faArrowsV,
    };
  },
  created() {

  },
  ready: function () {

  },
  mounted() {
    var payload = {
              'sites': JSON.parse(this.collections),
              'column_name': this.active_column,
              'order': this.columns_order[this.active_column]}
    this.setSites(payload)
  },
  methods: {
    setActiveColumn: function(name) {
      if (this.active_column == name) {
        this.columns_order[name] = this.columns_order[name] == 'asc' ? 'desc' : 'asc'
      } else {
        this.active_column = name
      }
      this.setColumnOrder({'column_name': name, 'order': this.columns_order[name]})
    },
    isActiveCol: function(name) {
      return name == this.active_column ? true : false
    },
    getOrderIcon: function(name) {
      return this.columns_order[name] == 'asc' ? faLongArrowAltUp : faLongArrowAltDown
    },
    loadMoreSites() {
      console.log('loading')
      this.incrementPageCount()
    },
    ...mapGetters([
      'getDisplayedSites', 'getPageSize', 'getPageCount'
    ]),
    ...mapMutations([
      'setSites', 'setColumnOrder', 'incrementPageCount'
    ]),
  },
  watched: {

  },
  computed: {
    sites: function() {
      return this.getDisplayedSites().slice(0, this.getPageCount() *  this.page_size)
    },
    more_sites_to_display: function() {
      if (this.getDisplayedSites().length > this.getPageCount() * this.page_size) {
        return true
      }
      return false
    }
  }
};
</script>

<style scoped>
.ascToggle {
  color: lightgray;
}
.activeColumn {
  color: black;
}
</style>