87 lines
3.6 KiB
Vue
Executable File
87 lines
3.6 KiB
Vue
Executable File
<template>
|
|
<div class="mx-2 p-2">
|
|
<div class="flex justify-between items-center flex-wrap flex-center mb-4">
|
|
<a href="#" class="btn" @click="$router.back()">Back</a>
|
|
<div>
|
|
<a class="btn-secondary btn-small mr-2" @click="reorderList(true, 'date')">
|
|
<svg-vue icon="order-time" class="" />
|
|
<svg-vue icon="arrow" v-bind:class="{ arrowUp: !this.orderDate }" class="transform m-0 rotate-90 transition duration-300 ease-in-out" />
|
|
</a>
|
|
<a class="btn-secondary btn-small" @click="reorderList(true, 'alpha')">
|
|
<svg-vue icon="order-alpha" class="" />
|
|
<svg-vue icon="arrow" v-bind:class="{ arrowUp: !this.orderAlpha }" class="transform m-0 rotate-90 transition duration-300 ease-in-out" />
|
|
</a>
|
|
</div>
|
|
<router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
|
|
</div>
|
|
<Loader v-if="loading" />
|
|
<div v-else class="flex flex-wrap -m-2">
|
|
<div v-if="memos.lenght === 0">
|
|
<p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
|
|
</div>
|
|
<router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="flex-initial sm:mx-auto md:w-1/2 md:mx-0 lg:w-1/3 xl:w-1/4 mb-4 no-underline">
|
|
<div class="card sm:max-w-124">
|
|
<div class="-m-4">
|
|
<img :src="memo.data.attributes.thumbnail_cover_image.data.attributes.path" alt="" class="w-full rounded rounded-b-none">
|
|
</div>
|
|
<div class="h-full flex flex-col mt-6">
|
|
<h1 class="text-xl text-marine">{{ memo.data.name }}</h1>
|
|
<span class="mt-auto self-end bg-gray-400 text-white tag">{{ memo.data.last_updated }}</span>
|
|
</div>
|
|
</div>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Loader from '../../components/Loader'
|
|
|
|
export default {
|
|
name: 'MemoIndex',
|
|
components: {
|
|
Loader
|
|
},
|
|
data: function () {
|
|
return {
|
|
loading: true,
|
|
memos: null,
|
|
orderDate: false,
|
|
orderAlpha: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
// eslint-disable-next-line no-undef
|
|
axios.get('/api/memos')
|
|
.then(response => {
|
|
this.memos = response.data.data
|
|
this.reorderList()
|
|
this.loading = false
|
|
})
|
|
.catch(() => {
|
|
this.loading = false
|
|
console.log('Unable to fetch memos.')
|
|
})
|
|
},
|
|
methods: {
|
|
reorderList(btn = false, types = 'date') {
|
|
if(btn && types === 'date') {
|
|
this.orderDate = !this.orderDate
|
|
} else if (btn && types === 'alpha') {
|
|
this.orderAlpha = !this.orderAlpha
|
|
}
|
|
|
|
if(this.orderDate && types === 'date') {
|
|
this.memos.sort((a, b) => a.data.last_updated_timestamp - b.data.last_updated_timestamp)
|
|
} else if (this.orderAlpha && types === 'alpha') {
|
|
this.memos.sort((a, b) => a.data.name.localeCompare(b.data.name))
|
|
} else if(types === 'alpha') {
|
|
this.memos.sort((a, b) => b.data.name.localeCompare(a.data.name))
|
|
} else {
|
|
this.memos.sort((a, b) => b.data.last_updated_timestamp - a.data.last_updated_timestamp)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|