pixelfed/resources/assets/components/groups/partials/SelfGroups.vue

<template>
    <div class="my-groups-component">
        <div class="list-container">
            <div v-if="isLoaded">
                <div class="list-group">
                    <a
                        v-for="(group, index) in groups" :key="'rec:'+group.id+':'+index"
                        class="list-group-item text-decoration-none"
                        :href="group.url">
                        <group-list-card
                        	:group="group"
                        	:truncateDescriptionLength="140"
                        	:showStats="true" />
                        <!-- <div class="media align-items-center">
                            <img v-if="group.metadata && group.metadata.hasOwnProperty('header')" :src="group.metadata.header.url" class="mr-3 border rounded" style="width: 100px; height: 60px;object-fit: cover;padding:5px;">

                            <div v-else class="mr-3 border rounded" style="width: 100px; height: 60px;padding: 5px;">
                            	<div class="bg-primary d-flex align-items-center justify-content-center" style="width: 100%; height:100%;">
                            		<i class="fal fa-users text-white fa-lg"></i>
                            	</div>
                            </div>

                            <div class="media-body">
                            	<p class="h5 font-weight-bold mb-1 text-dark">
                            		{{ group.name || 'Untitled Group' }}
                            	</p>

                            	<p class="text-muted small mb-1 read-more">
                            		{{ truncate(group.description) }}
                            	</p>

                            	<p class="mb-0">
                            		<span class="text-muted mr-2">
                            			<i class="far fa-users"></i>
                            			<strong class="small">{{ prettyCount(group.member_count) }}</strong>
                            		</span>

                            		<span class="member-label">
                            			{{ group.self.role }}
                            		</span>

                            		<span v-if="!group.local" class="remote-label ml-2">
                            			<i class="fal fa-globe"></i> Remote
                            		</span>
                            	</p>
                            </div>
                        </div> -->
                    </a>
                </div>

                <p v-if="canLoadMore">
                	<button
                		class="btn btn-primary btn-block font-weight-bold mt-3"
                		@click.prevent="loadMore"
                		:disabled="loadingMore">
                		Load more
                	</button>
                </p>
            </div>

            <div v-else class="d-flex justify-content-center">
            	<b-spinner/>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
	import GroupListCard from './GroupListCard.vue';

    export default {
        props: {
            profile: {
                type: Object
            }
        },

        components: {
			"group-list-card": GroupListCard
		},

        data() {
            return {
                isLoaded: false,
                groups: [],
                canLoadMore: false,
                loadingMore: false,
                page: 1
            }
        },

        mounted() {
            this.fetchSelf();
        },

        methods: {
            fetchSelf() {
                axios.get('/api/v0/groups/self/list')
                .then(res => {
                	let data = res.data.filter(g => {
                		return g.hasOwnProperty('id') && g.hasOwnProperty('url');
                	})
                    this.groups = data;
                    this.canLoadMore = res.data.length == 4;
                    this.page++;
                    this.isLoaded = true;
                });
            },

            loadMore() {
            	this.loadingMore = true;
            	axios.get('/api/v0/groups/self/list', {
            		params: {
            			page: this.page
            		}
            	})
                .then(res => {
                	let data = res.data.filter(g => {
                		return g.hasOwnProperty('id') && g.hasOwnProperty('url');
                	})
                    this.groups.push(...data);
                    this.canLoadMore = res.data.length == 4;
                    this.page++;
            		this.loadingMore = false;
                });
            },

            prettyCount(val) {
            	return App.util.format.count(val);
            },

            truncate(str) {
            	if(str.length <= 140) {
            		return str;
            	}

            	return str.substr(0, 140) + ' ...';
            }
        }
    }
</script>

<style lang="scss" scoped>
    .my-groups-component {
    	.list-container {
    		margin-bottom: 30vh;
    	}

		.member-label {
			padding: 2px 5px;
			font-size: 12px;
			color: rgba(75, 119, 190, 1);
			background:rgba(137, 196, 244, 0.2);
			border:1px solid rgba(137, 196, 244, 0.3);
			font-weight:400;
			text-transform: capitalize;
			border-radius: 3px;
		}

		.remote-label {
			padding: 2px 5px;
			font-size: 12px;
			color: #4B5563;
			background: #F3F4F6;
			border:1px solid #E5E7EB;
			font-weight:400;
			text-transform: capitalize;
			border-radius: 3px;
		}
    }
</style>