Update Groups components

This commit is contained in:
Daniel Supernault 2024-10-05 23:57:48 -06:00
parent b89896052c
commit 3c09a6ed2a
No known key found for this signature in database
GPG key ID: 23740873EE6F76A1
5 changed files with 83 additions and 69 deletions

View file

@ -209,8 +209,8 @@
permissionChecked: false,
membershipCategories: [
{ key: 'Public', value: 'public' },
{ key: 'Private', value: 'private' },
{ key: 'Local', value: 'local' },
// { key: 'Private', value: 'private' },
// { key: 'Local', value: 'local' },
],
}
},

View file

@ -343,7 +343,8 @@
childReplyContent: null,
postingChildComment: false,
loadingChildComments: false,
replyChildMinId: undefined
replyChildMinId: undefined,
replyCursorId: null
}
},
@ -584,6 +585,7 @@
}
this.replyChildId = status.id;
this.replyCursorId = status.id
this.replyChildIndex = index;
if(!status.hasOwnProperty('replies_loaded') || !status.replies_loaded) {
@ -591,7 +593,9 @@
this.fetchChildReplies(status, index);
});
} else {
this.$nextTick(() => {
this.fetchChildReplies(status, index);
});
}
},
@ -600,7 +604,7 @@
params: {
gid: this.groupId,
sid: status.id,
cid: 1,
cid: this.replyCursorId,
limit: 3
}
}).then(res => {

View file

@ -17,6 +17,7 @@
:profile="profile"
:showGroupHeader="showGroupHeader"
:showGroupChevron="showGroupChevron"
v-on:delete="statusDeleted"
/>
<div>

View file

@ -1,63 +1,50 @@
<template>
<div class="col-12 col-md-9" style="overflow:hidden">
<div class="row h-100 bg-light justify-content-center">
<div class="col-12 col-md-10 col-lg-7">
<div v-if="!initalLoad">
<p class="text-center mt-5 pt-5 font-weight-bold">Loading...</p>
</div>
<div v-else class="px-5">
<div v-if="emptyFeed">
<div class="jumbotron mt-5">
<h1 class="display-4">Hello 👋</h1>
<h3 class="font-weight-light">Welcome to Pixelfed Groups!</h3>
<p class="lead">Groups are a way to participate in like minded communities and topics.</p>
<hr class="my-4">
<p>Anyone can create and manage their own group as long as it abides by our <a href="#">community guidelines</a>.</p>
<p class="text-center mb-0">
<router-link to="/groups/discover" class="btn btn-primary btn-lg rounded-pill">
Discover Groups
</router-link>
</p>
</div>
</div>
<div class="row bg-light justify-content-center">
<div class="col-12 flex-shrink-1">
<div class="my-4 px-3">
<p class="h1 font-weight-bold mb-1">Groups Feed</p>
<p class="lead text-muted mb-0">Recent posts from your groups</p>
</div>
</div>
</div>
<div class="row h-100 bg-light justify-content-center">
<div class="col-12 col-md-10 col-lg-6">
<div v-if="emptyFeed" class="mt-5">
<h1 class="font-weight-bold">Welcome to Pixelfed Groups!</h1>
<p class="lead">Groups are a way to participate in like minded communities and topics.</p>
<hr class="my-4">
<p>Anyone can create and manage their own group as long as it abides by our <a href="/site/kb/community-guidelines" target="_blank">community guidelines</a>.</p>
<p class="text-center mb-0">
<router-link to="/groups/discover" class="btn btn-primary btn-lg rounded-pill">
Discover Groups
</router-link>
</p>
</div>
<div v-else>
<div class="my-4">
<p class="h1 font-weight-bold mb-1">Groups Feed</p>
<p class="lead text-muted mb-0">Recent posts from your groups</p>
</div>
<div v-else>
<div class="my-3">
<group-status
v-for="(status, index) in feed"
:key="'gs:' + status.id + index"
:prestatus="status"
:profile="profile"
:show-group-header="true"
:group="status.group"
:group-id="status.group.id" />
<div class="my-3">
<group-status
v-for="(status, index) in feed"
:key="'gs:' + status.id + index"
:prestatus="status"
:profile="profile"
:show-group-header="true"
:group="status.group"
:group-id="status.group.id" />
<div v-if="feed.length > 2">
<infinite-loading @infinite="infiniteFeed" :distance="800">
<div slot="no-more" class="my-3">
<p class="lead font-weight-bold pt-5">You have reached the end of this feed</p>
<div style="height: 10rem;"></div>
</div>
<div slot="no-results"></div>
</infinite-loading>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="col-12 col-md-4">
<div class="mt-5 media align-items-center">
<div class="mr-3">
<i class="fas fa-info-circle fa-2x text-lighter"></i>
</div>
<p class="media-body text-muted mb-0 font-weight-light">Groups are in beta, some <a href="#" class="font-weight-bold">limitations</a> apply.</p>
</div>
</div> -->
<div v-if="feed.length > 2">
<infinite-loading @infinite="infiniteFeed" :distance="800">
<div slot="no-more" class="my-3">
<p class="lead font-weight-bold pt-5">You have reached the end of this feed</p>
<div style="height: 10rem;"></div>
</div>
<div slot="no-results"></div>
</infinite-loading>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

View file

@ -110,12 +110,12 @@
<span class="fas fa-ellipsis-h text-lighter"></span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">View Post</a>
<a class="dropdown-item" href="#">View Profile</a>
<a class="dropdown-item" href="#">Copy Link</a>
<a class="dropdown-item" :href="statusUrl()">View Post</a>
<a class="dropdown-item" :href="profileUrl()">View Profile</a>
<!-- <a class="dropdown-item" href="#">Copy Link</a> -->
<a class="dropdown-item" href="#" @click.prevent="sendReport()">Report</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" href="#">Delete</a>
<a class="dropdown-item text-danger" href="#" @click.prevent="onDelete()">Delete</a>
</div>
</div>
<!-- <button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu()">
@ -171,12 +171,12 @@
return App.util.format.count(count);
},
statusUrl(status) {
return '/groups/' + status.gid + '/p/' + status.id;
statusUrl() {
return '/groups/' + this.status.gid + '/p/' + this.status.id;
},
profileUrl(status) {
return '/groups/' + status.gid + '/user/' + status.account.id;
profileUrl() {
return '/groups/' + this.status.gid + '/user/' + this.status.account.id;
},
timestampFormat(timestamp) {
@ -268,6 +268,28 @@
swal("Cancelled", "Your report was not submitted.", "error");
}
});
},
onDelete() {
swal({
title: "Delete Post Confirmation",
text: 'Are you sure you want to delete this post?',
icon: "warning",
dangerMode: true,
buttons: true
}).then((confirm) => {
if(confirm) {
axios.post('/api/v0/groups/status/delete', {
id: this.status.id,
gid: this.status.gid,
})
.then(res => {
this.$emit('delete', this.status)
})
.catch(err => {
console.log(err)
})
}
});
}
}
}