Sha256: 03e2dd6c88309f63a5436282d5cec505c60a3b6ded34c2b68530695fa17ea78d
Contents?: true
Size: 1.63 KB
Versions: 4
Compression:
Stored size: 1.63 KB
Contents
<template>
<div>
<transition name="fade" mode="out-in">
<div key="list-placeholder" v-if="isLoading">
<div class="flex flex-col items-center w-full animate-pulse">
<div class="h-12 bg-gray-200 rounded w-full mb-3"></div>
<div class="h-12 bg-gray-200 rounded w-full mb-3"></div>
<div class="h-12 bg-gray-200 rounded w-full mb-3"></div>
</div>
</div>
<div key="empty-list" class="pt-4 text-center" v-else-if="isEmpty">
No pages found
</div>
<div key="list" v-else>
<list-item
v-for="page in previewablePages"
:key="page.id"
:page="page"
@on-update="fetch"
@on-clone="fetch"
@on-delete="fetch"
@on-dropdown-toggle="onDropdownToggle"
/>
</div>
</transition>
</div>
</template>
<script>
import GroupedDropdownsMixin from '@/mixins/grouped-dropdowns'
import ListItem from './list-item'
export default {
name: 'PageList',
mixins: [GroupedDropdownsMixin],
components: { ListItem },
props: {
q: { type: String, required: false },
},
data() {
return { pages: [], isLoading: true }
},
computed: {
isEmpty() {
return this.previewablePages.length === 0
},
previewablePages() {
return this.pages.filter((page) => !!page.previewUrl && !page.static)
},
},
methods: {
async fetch() {
this.isLoading = true
this.pages = await this.services.page.findAll({ q: this.q })
this.isLoading = false
},
},
watch: {
q: {
immediate: true,
handler() {
this.fetch()
},
},
},
}
</script>
Version data entries
4 entries across 4 versions & 1 rubygems