Merge pull request #52 from OkunaOrg/feature/missing-actions

Feature/post-comment-actions

components/actions/post-comment-more-actions/OkPostCommentMoreActions.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="ok-has-background-primary is-semi-rounded">
+        <div
+                class="box ok-has-background-primary-highlight is-paddingless">
+            <ok-delete-post-comment-tile :post="post" :post-comment="postComment" @onPostCommentDeleted="onPostCommentDeleted" v-if="canDeletePostComment"></ok-delete-post-comment-tile>
+            <ok-report-post-comment-tile :post="post" :post-comment="postComment" :on-post-comment-reported="onPostCommentReported"></ok-report-post-comment-tile>
+        </div>
+    </div>
+</template>
+
+
+<script lang="ts">
+    import { Component, Prop, Vue } from "nuxt-property-decorator"
+    import { IPost } from "~/models/posts/post/IPost";
+    import { BehaviorSubject } from "~/node_modules/rxjs";
+    import { IUser } from "~/models/auth/user/IUser";
+    import { TYPES } from "~/services/inversify-types";
+    import { IUserService } from "~/services/user/IUserService";
+    import { okunaContainer } from "~/services/inversify";
+    import { IPostComment } from '~/models/posts/post-comment/IPostComment';
+    import OkDeletePostCommentTile from '~/components/tiles/action/OkDeletePostCommentTile.vue';
+    import OkReportPostCommentTile from '~/components/tiles/action/OkReportPostCommentTile.vue';
+
+    @Component({
+        name: "OkPostCommentMoreActions",
+        components: {
+            OkReportPostCommentTile,
+            OkDeletePostCommentTile
+        },
+        subscriptions: function () {
+            return {
+                loggedInUser: this["userService"].loggedInUser
+            }
+        }
+    })
+    export default class OkPostCommentMoreActions extends Vue {
+
+
+        @Prop({
+            type: Object,
+            required: false
+        }) readonly post: IPost;
+
+        @Prop({
+            type: Object,
+            required: false
+        }) readonly postComment: IPostComment;
+
+        @Prop({
+            type: Function,
+            required: false
+        }) readonly onPostCommentReported: (postComment: IPostComment, post: IPost) => void;
+
+
+        $observables!: {
+            loggedInUser: BehaviorSubject<IUser | undefined>
+        };
+
+        private userService: IUserService = okunaContainer.get<IUserService>(TYPES.UserService);
+
+
+        onPostCommentDeleted(postComment: IPostComment, post: IPost) {
+            this.$emit("onPostCommentDeleted", postComment, post);
+        }
+
+        get canDeletePostComment() {
+            return this.$observables.loggedInUser.value.canDeletePostComment(this.postComment, this.post);
+        }
+
+    }
+</script>

components/buttons/OkFollowButton.vue

@@ -3,7 +3,7 @@
             :disabled="requestInProgress"
             @click="onWantsToToggleFollow"
             class="button is-rounded ok-has-background-accent has-text-white has-text-weight-bold">
-        {{ user.isFollowing ? 'Unfollow' : user.isFollowed ? "Follow back" : "Follow"}}
+        {{ buttonText }}
     </button>
 </template>
 
@@ -19,6 +19,15 @@
     import { okunaContainer } from "~/services/inversify";
     import { TYPES } from "~/services/inversify-types";
     import { IUtilsService } from "~/services/utils/IUtilsService";
+    import { UserVisibility } from "~/models/auth/user/lib/UserVisibility";
+    import { ILocalizationService } from "~/services/localization/ILocalizationService";
+
+    enum OkFollowButtonType {
+        follow,
+        unfollow,
+        requestToFollow,
+        cancelRequestToFollow,
+    }
 
     @Component({
         name: "OkFollowButton",
@@ -36,16 +45,87 @@
 
         private userService: IUserService = okunaContainer.get<IUserService>(TYPES.UserService);
         private utilsService: IUtilsService = okunaContainer.get<IUtilsService>(TYPES.UtilsService);
+        private localizationService: ILocalizationService = okunaContainer.get<ILocalizationService>(TYPES.LocalizationService);
         private requestOperation?: CancelableOperation<any>;
 
 
-        onWantsToToggleFollow() {
+        get buttonType(): OkFollowButtonType {
             if (this.user.isFollowing) {
-                // Unfollow
-                this.unfollowUser();
+                return OkFollowButtonType.unfollow;
+            } else if (this.user.visibility != UserVisibility.private || this.user.isFollowing) {
+                return OkFollowButtonType.unfollow;
             } else {
-                // Follow
-                this.followUser();
+                return this.user.isFollowRequested ? OkFollowButtonType.cancelRequestToFollow : OkFollowButtonType.requestToFollow;
+            }
+        }
+
+        get buttonText() {
+            switch (this.buttonType) {
+                case OkFollowButtonType.unfollow:
+                    return this.localizationService.localize("global.keywords.unfollow");
+                case OkFollowButtonType.follow:
+                    return this.localizationService.localize("global.keywords.follow");
+                case OkFollowButtonType.requestToFollow:
+                    return this.localizationService.localize("global.snippets.request_to_follow");
+                case OkFollowButtonType.cancelRequestToFollow:
+                    return this.localizationService.localize("global.snippets.cancel_request_to_follow");
+            }
+        }
+
+        onClicked() {
+            switch (this.buttonType) {
+                case OkFollowButtonType.unfollow:
+                    this.unfollowUser();
+                    return;
+                case OkFollowButtonType.follow:
+                    this.followUser();
+                    return;
+                case OkFollowButtonType.requestToFollow:
+                    this.requestToFollowUser();
+                    return;
+                case OkFollowButtonType.cancelRequestToFollow:
+                    this.cancelRequestToFollowUser();
+                    return;
+            }
+        }
+
+        private async requestToFollowUser() {
+            if (this.requestInProgress) return;
+            this.requestInProgress = true;
+
+
+            try {
+                this.requestOperation = CancelableOperation.fromPromise(this.userService.requestToFollowUser({
+                    user: this.user
+                }));
+
+                await this.requestOperation.value;
+
+            } catch (error) {
+                this.utilsService.handleErrorWithToast(error);
+            } finally {
+                this.requestOperation = null;
+                this.requestInProgress = false;
+            }
+        }
+
+        private async cancelRequestToFollowUser() {
+            if (this.requestInProgress) return;
+            this.requestInProgress = true;
+
+
+            try {
+                this.requestOperation = CancelableOperation.fromPromise(this.userService.cancelRequestToFollowUser({
+                    user: this.user
+                }));
+
+                await this.requestOperation.value;
+
+            } catch (error) {
+                this.utilsService.handleErrorWithToast(error);
+            } finally {
+                this.requestOperation = null;
+                this.requestInProgress = false;
             }
         }
 

components/post-theatre/post-theatre-sidebar/components/post-comments/OkPostComments.vue

@@ -6,6 +6,7 @@
                 <ok-post-comment :post="post" :post-comment="postComment"
                                  :show-replies="true"
                                  @onWantsToReply="onWantsToReplyToComment"
+                                 @onPostCommentDeleted="onPostCommentDeleted"
                                  @onWantsToReplyToReply="onWantsToReplyToReply"
                 ></ok-post-comment>
             </div>
@@ -29,6 +30,7 @@
                                      :linked-post-comment-id.sync="linkedPostCommentId"
                                      :linked-post-comment-reply-id.sync="linkedPostCommentReplyId"
                                      :highlighted-post-comment-id.sync="highlightedPostCommentId"
+                                     @onPostCommentDeleted="onPostCommentDeleted"
                                      @onWantsToReply="onWantsToReplyToComment"
                                      @onWantsToReplyToReply="onWantsToReplyToReply"
                     ></ok-post-comment>
@@ -44,7 +46,7 @@
 </style>
 
 <script lang="ts">
-    import { Component, Prop, Vue, Watch } from "nuxt-property-decorator"
+    import { Component, Prop, Vue } from "nuxt-property-decorator"
     import VueRouter, { Route } from "vue-router";
     import { IUserService } from "~/services/user/IUserService";
     import { TYPES } from "~/services/inversify-types";
@@ -70,7 +72,8 @@
     import { IHistoryService } from "~/services/history/IHistoryService";
     import {
         OnCommentedPostParams,
-        ReplyToCommentParams, ReplyToReplyParams
+        ReplyToCommentParams,
+        ReplyToReplyParams
     } from "~/components/post-theatre/post-theatre-sidebar/lib/PostTheatreEventParams";
 
 
@@ -171,6 +174,11 @@
             this.$emit("onWantsToReplyToReply", params);
         }
 
+        onPostCommentDeleted(postComment: IPostComment, post: IPost){
+            const indexOfItem = this.postComments.indexOf(postComment);
+            if (indexOfItem > -1) this.postComments.splice(indexOfItem, 1);
+        }
+
         updateHighlightedPostCommentId() {
             if (!this.linkedPostCommentReplyId && !this.linkedPostCommentId) return;
             this.highlightedPostCommentId = this.linkedPostCommentReplyId ? this.linkedPostCommentReplyId : this.linkedPostCommentId;

components/post-theatre/post-theatre-sidebar/components/post-comments/components/post-comment/OkPostComment.vue

@@ -31,6 +31,7 @@
         <ok-post-comment-inline-actions :post="post" :post-comment="postComment"
                                         :expanded-replies="expandedReplies"
                                         @onWantsToReply="onWantsToReply"
+                                        @onPostCommentDeleted="onPostCommentDeleted"
                                         @onWantsToToggleReplies="onWantsToToggleReplies"
                                         v-if="showActions"></ok-post-comment-inline-actions>
         <ok-post-comment-replies :post="post" :post-comment="postComment"
@@ -131,13 +132,17 @@
 
 
         onWantsToReply() {
-            let params : ReplyToCommentParams = {
+            let params: ReplyToCommentParams = {
                 postComment: this.postComment,
                 post: this.post
             };
             this.$emit("onWantsToReply", params);
         }
 
+        onPostCommentDeleted(postComment, post) {
+            this.$emit("onPostCommentDeleted", postComment, post)
+        }
+
         onWantsToReplyToReply(params: ReplyToReplyParams) {
             this.$emit("onWantsToReplyToReply", params);
         }

components/post-theatre/post-theatre-sidebar/components/post-comments/components/post-comment/components/post-comment-inline-actions/OkPostCommentInlineActions.vue

@@ -1,6 +1,7 @@
 <template>
     <nav class="level has-padding-top-10 is-mobile">
-        <div class="level-item has-cursor-pointer ok-has-border-right-primary-highlight" role="button" v-if="postComment.repliesCount"
+        <div class="level-item has-cursor-pointer ok-has-border-right-primary-highlight" role="button"
+             v-if="postComment.repliesCount"
              @click="onWantsToToggleReplies">
             <span class="ok-has-text-primary-invert-60 has-text-weight-bold is-size-7">
                 {{ repliesText }}
@@ -12,7 +13,8 @@
         <div class="level-item has-text-centered has-cursor-pointer" role="button" @click="onWantsToReply">
             <span class="ok-has-text-primary-invert-60 has-text-weight-bold is-size-7">Reply</span>
         </div>
-        <div class="level-item has-text-centered has-cursor-pointer" role="button" aria-label="Options">
+        <div class="level-item has-text-centered has-cursor-pointer" role="button" aria-label="Options"
+             @click="onWantsToOpenMoreActions" tabindex="0">
             <ok-more-horizontal class="ok-svg-icon-primary-invert-60 is-icon-2x"></ok-more-horizontal>
         </div>
     </nav>
@@ -30,7 +32,10 @@
     import OkSmartText from "~/components/smart-text/OkSmartText.vue";
     import OkUserAvatar from "~/components/avatars/user-avatar/OkUserAvatar.vue";
     import OkReactToPostCommentButton
-        from '~/components/post-theatre/post-theatre-sidebar/components/post-comments/components/post-comment/components/post-comment-inline-actions/components/ReactToPostCommentButton.vue';
+        from "~/components/post-theatre/post-theatre-sidebar/components/post-comments/components/post-comment/components/post-comment-inline-actions/components/ReactToPostCommentButton.vue";
+    import { IModalService } from "~/services/modal/IModalService";
+    import { TYPES } from "~/services/inversify-types";
+    import { okunaContainer } from "~/services/inversify";
 
 
     @Component({
@@ -46,6 +51,7 @@
         @Prop(Object) readonly postComment: IPostComment;
         @Prop(Boolean) readonly expandedReplies: boolean;
 
+        private modalService: IModalService = okunaContainer.get<IModalService>(TYPES.ModalService);
 
         onWantsToReply() {
             this.$emit("onWantsToReply", this.postComment, this.post);
@@ -55,6 +61,16 @@
             this.$emit("onWantsToToggleReplies", this.postComment, this.post);
         }
 
+        onWantsToOpenMoreActions() {
+            this.modalService.openPostCommentActionsModal({
+                postComment: this.postComment,
+                post: this.post,
+                onPostCommentDeleted: (postComment, post) => {
+                    this.$emit("onPostCommentDeleted", postComment, post);
+                }
+            });
+        }
+
         get repliesText() {
             return this.expandedReplies ? this.$t("components.post_comment.collapse_replies") : this.$t("components.post_comment.replies_count", {
                 repliesCount: this.postComment.repliesCount