pixelfed/resources/views/admin/curated-register/partials/activity-log.blade.php

<template v-if="loaded">
@if($email_verified_at === null)
<div class="alert alert-danger mb-3">
    <p class="mb-0 font-weight-bold">Applicant has not verified their email address yet, action can not be taken at this time.</p>
</div>
@elseif($is_closed != true)
<div class="d-flex justify-content-between flex-column flex-md-row mb-4" style="gap:1rem">
    <button
        class="btn btn-success bg-gradient-success rounded-pill"
        v-on:click.prevent="handleAction('approve', $event)">
        Approve
    </button>
    <button
        class="btn btn-danger bg-gradient-danger rounded-pill flex-grow-1"
        v-on:click.prevent="handleAction('reject', $event)">
        Reject
    </button>
    <button
        class="btn rounded-pill px-md-5"
        :class="[ composeFormOpen ? 'btn-dark bg-gradient-dark' : 'btn-outline-dark' ]"
        v-on:click.prevent="handleAction('request', $event)">
        Request details
    </button>
    <button
        class="btn rounded-pill px-md-5"
        :class="[ messageFormOpen ? 'btn-dark bg-gradient-dark' : 'btn-outline-dark' ]"
        v-on:click.prevent="handleAction('message', $event)">
        Message
    </button>
</div>

@else
    @if($is_rejected == true)
    <p>Application was <span class="font-weight-bold text-danger">rejected</span> on {{ $action_taken_at }}</p>
    @elseif($is_approved == true)
    <p>Application was <span class="font-weight-bold text-success">approved</span> on {{ $action_taken_at }}</p>
    @else
    <p>Application was closed on {{ $action_taken_at }}</p>
    @endif
@endif

    <transition name="fade">
        <div v-show="composeFormOpen">
            <div class="card">
                <div class="card-body pt-0">
                    <p class="lead font-weight-bold text-center">Request Additional Details</p>
                    <p class="text-muted">Use this form to request additional details. Once you press Send, we'll send the potential user an email with a special link they can visit with a form that they can provide additional details with. You can also Preview the email before it's sent.</p>

                    <div v-if="responseTemplates && responseTemplates.length" class="my-3">
                        <p class="small font-weight-bold mb-1">Template Responses</p>

                        <div class="d-grid">
                            <template v-for="tmpl in responseTemplates">
                                <button
                                    class="btn btn-lighter btn-sm py-1 font-weight-bold rounded-lg text-dark border border-muted px-3"
                                    style="font-size: 13px;"
                                    @click="useTemplate(tmpl)">
                                    <i class="far fa-plus mr-1 text-muted"></i> @{{ tmpl.name.slice(0, 25) }}
                                </button>
                            </template>
                        </div>
                    </div>

                    <div class="request-form">
                        <div class="form-group">
                            <label for="requestDetailsMessageInput" class="small text-muted">Your Message:</label>
                            <textarea
                                class="form-control text-dark"
                                id="requestDetailsMessageInput"
                                rows="5"
                                v-model="composeMessage"
                                style="white-space: pre-wrap;"
                                placeholder="Enter your additional detail message here...">
                            </textarea>
                            <p class="help-text small text-right">
                                <span>@{{ composeMessage && composeMessage.length ? composeMessage.length : 0 }}</span>
                                <span>/</span>
                                <span>2000</span>
                            </p>
                        </div>
                        <div class="d-flex">
                            <button
                                type="button"
                                class="btn btn-primary rounded-pill btn-sm px-4"
                                v-on:click.prevent="handleSend()">
                                Send
                            </button>
                            <a
                                class="btn btn-dark rounded-pill btn-sm px-4"
                                :href="previewDetailsMessageUrl"
                                target="_blank">
                                Preview
                            </a>
                            <a
                                v-if="composeMessage && composeMessage.length"
                                class="btn btn-outline-danger text-danger rounded-pill btn-sm px-4"
                                @click="composeMessage = null">
                                Clear
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition>

    <transition name="fade">
        <div v-show="messageFormOpen">
            <div class="card">
                <div class="card-body pt-0">
                    <p class="lead font-weight-bold text-center">Send Message</p>
                    <p class="text-muted">Use this form to send a message to the applicant. Once you press Send, we'll send the potential user an email with your message. You can also Preview the email before it's sent.</p>

                    <div v-if="responseTemplates && responseTemplates.length" class="my-3">
                        <p class="small font-weight-bold mb-1">Template Responses</p>

                        <div class="d-grid">
                            <template v-for="tmpl in responseTemplates">
                                <button
                                    class="btn btn-lighter btn-sm py-1 font-weight-bold rounded-lg text-dark border border-muted px-3"
                                    style="font-size: 13px;"
                                    @click="useTemplateMessage(tmpl)">
                                    <i class="far fa-plus mr-1 text-muted"></i> @{{ tmpl.name.slice(0, 25) }}
                                </button>
                            </template>
                        </div>
                    </div>

                    <div class="request-form">
                        <div class="form-group">
                            <label for="sendMessageInput" class="small text-muted">Your Message:</label>
                            <textarea
                                class="form-control text-dark"
                                id="sendMessageInput"
                                rows="5"
                                v-model="messageBody"
                                style="white-space: pre-wrap;"
                                placeholder="Enter your message here...">
                            </textarea>
                            <p class="help-text small text-right">
                                <span>@{{ messageBody && messageBody.length ? messageBody.length : 0 }}</span>
                                <span>/</span>
                                <span>500</span>
                            </p>
                        </div>
                        <div class="d-flex">
                            <button
                                type="button"
                                class="btn btn-primary rounded-pill btn-sm px-4"
                                v-on:click.prevent="handleMessageSend()">
                                Send
                            </button>
                            <a
                                class="btn btn-dark rounded-pill btn-sm px-4"
                                :href="previewMessageUrl"
                                target="_blank">
                                Preview
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition>

    <div class="card border">
        <div class="card-body">
            <p class="text-center font-weight-bold">Activity Log</p>
            <div class="activity-log">
                <div v-if="!loaded" class="d-flex justify-content-center align-items-center py-5 my-5">
                    <b-spinner />
                </div>

                <template v-else>
                    <div
                        v-for="activity in activities"
                        class="activity-log-item"
                        :key="activity.timestamp">
                        <div v-if="activity.action === 'approved'" class="activity-log-item-icon bg-success">
                            <i class="far fa-check fa-lg text-white"></i>
                        </div>
                        <div v-else-if="activity.action === 'rejected'" class="activity-log-item-icon bg-danger">
                            <i class="far fa-times fa-lg text-white"></i>
                        </div>
                        <div v-else-if="activity.action === 'request_details'" class="activity-log-item-icon bg-lighter">
                            <i class="fas fa-exclamation fa-lg text-dark"></i>
                        </div>
                        <div v-else class="activity-log-item-icon">
                            <i class="fas fa-circle"></i>
                        </div>
                        <div class="activity-log-item-date">@{{ parseDate(activity.timestamp) }}<span>@{{ parseTime(activity.timestamp) }}</span></div>
                        <div class="activity-log-item-content"><span class="activity-log-item-content-title">@{{ activity.title }}</span><span class="activity-log-item-content-message" v-if="activity.message">@{{ strLimit(activity.message) }}</span></div>
                        <div class="d-flex" style="gap: 1rem;">
                            <div v-if="activity.link">
                                <a href="#" class="activity-log-item-content-link text-muted" @click.prevent="openModal(activity)">Details</a>
                            </div>
                            <div v-if="activity.user_response">
                                <a href="#" class="activity-log-item-content-link" @click.prevent="openUserResponse(activity)">View User Response</a>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>
<template v-else>
    <div class="card card-body d-flex justify-content-center align-items-center py-5">
        <b-spinner />
    </div>
</template>

@push('scripts')
<script type="text/javascript">
    let app = new Vue({
        el: '#panel',

        data() {
            return {
                loaded: false,
                activities: [],
                composeFormOpen: false,
                messageFormOpen: false,
                composeMessage: null,
                messageBody: null,
                responseTemplates: [],
            }
        },

        mounted() {
            setTimeout(() => {
                this.fetchResponseTemplates();
                this.fetchActivities();
            }, 1000)
        },

        computed: {
            previewDetailsMessageUrl() {
                return `/i/admin/curated-onboarding/show/{{$id}}/preview-details-message?message=${encodeURIComponent(this.composeMessage)}`;
            },
            previewMessageUrl() {
                return `/i/admin/curated-onboarding/show/{{$id}}/preview-message?message=${encodeURIComponent(this.messageBody)}`;
            }
        },

        methods: {
            parseDate(timestamp) {
                const date = new Date(timestamp);

                return date.toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: 'short',
                    day: 'numeric'
                });
            },

            parseTime(timestamp) {
                const date = new Date(timestamp);

                return date.toLocaleTimeString('en-US', {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: true
                });
            },

            strLimit(str, len = 15) {
                if(str && str.length) {
                    return str.slice(0, len) + (str.length > 15 ? '...' : '');
                }
                return str;
            },

            fetchResponseTemplates() {
                axios.get('/i/admin/api/curated-onboarding/templates/get')
                .then(res => {
                    this.responseTemplates = res.data;
                })
            },

            fetchActivities() {
                axios.get('/i/admin/api/curated-onboarding/show/{{$id}}/activity-log')
                .then(res => {
                    this.activities = res.data;
                })
                .finally(() => {
                    this.loaded = true;
                })
            },

            handleAction(action, $event) {
                $event.currentTarget?.blur();

                switch(action) {
                    case 'approve':
                        this.handleApprove();
                    break;

                    case 'reject':
                        this.handleReject();
                    break;

                    case 'request':
                        this.messageFormOpen = false;
                        this.composeFormOpen = !this.composeFormOpen;
                    break;

                    case 'message':
                        this.composeFormOpen = false;
                        this.messageFormOpen = !this.messageFormOpen;
                    break;
                }
            },

            handleApprove() {
                swal({
                    title: "Approve Request?",
                    text: "The user application request will be approved.",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                }).then((willApprove) => {
                    if(willApprove) {
                        this.handleApproveAction();
                    } else {
                        swal("Approval Cancelled!", "The application approval has been cancelled. If you change your mind, you can easily approve or reject this application in the future.", "success");

                    }
                })
            },

            handleReject() {
                swal({
                    title: "Are you sure?",
                    text: "The user application request will be rejected.",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willReject) => {
                    if (willReject) {
                        swal({
                            title: "Choose Action",
                            text: "You can provide a rejection email, or simply silently reject",
                            icon: "warning",
                            buttons: {
                                cancel: "Cancel",
                                reject: {
                                    text: "Reject with email",
                                    value: "reject-email"
                                },
                                silent: {
                                    text: "Silently Reject",
                                    value: "reject-silent"
                                }
                            },
                            dangerMode: true,
                        })
                        .then(res => {
                            if(!res) {
                                swal("Rejection Cancelled!", "The application rejection has been cancelled. If you change your mind, you can easily reject this application in the future.", "success");
                            } else {
                                this.handleRejectAction(res);
                            }
                        })
                    } else {
                        swal("Rejection Cancelled!", "The application rejection has been cancelled. If you change your mind, you can easily reject this application in the future.", "success");
                    }
                });
            },

            handleRejectAction(action) {
                axios.post('/i/admin/api/curated-onboarding/show/{{$id}}/reject', {
                    action: action
                }).then(res => {
                    window.location.href = '/i/admin/curated-onboarding/home?a=rj';
                    console.log(res);
                })
            },

            handleApproveAction() {
                axios.post('/i/admin/api/curated-onboarding/show/{{$id}}/approve')
                .then(res => {
                    window.location.href = '/i/admin/curated-onboarding/home?a=aj';
                })
            },

            handlePreview() {
                axios.post('/i/admin/api/curated-onboarding/show/{{$id}}/message/preview', {
                    message: this.composeMessage
                })
                .then(res => {
                    console.log(res.data);
                })
            },

            handleSend() {
                swal({
                    title: "Confirm",
                    text: "Are you sure you want to send this request to this user?",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                }).then((hasConfirmed) => {
                    if(hasConfirmed) {
                        this.composeFormOpen = false;
                        this.loaded = false;
                        axios.post('/i/admin/api/curated-onboarding/show/{{$id}}/message/send', {
                            message: this.composeMessage
                        })
                        .then(res => {
                            this.composeMessage = null;
                            swal('Successfully sent!','', 'success');
                            this.fetchActivities();
                        })
                    }
                })
            },

            openModal(activity) {
                swal(activity.title, activity.message)
            },

            openUserResponse(activity) {
                swal('User Response', activity.user_response.message)
            },

            useTemplate(tmpl) {
                this.composeMessage = tmpl.content;
            },

            useTemplateMessage(tmpl) {
                this.messageBody = tmpl.content;
            },
        }
    });

</script>
@endpush

@push('styles')
<style type="text/css">
    .activity-log-item {
        border-left: 1px solid #e5e5e5;
        position: relative;
        padding: 2rem 1.5rem .5rem 2.5rem;
        font-size: .9rem;
        margin-left: 3rem;
        min-height: 5rem
    }
    .activity-log-item:last-child {
        padding-bottom: 4rem
    }
    .activity-log-item .activity-log-item-date {
        margin-bottom: .5rem;
        font-weight: bold;
        color: var(--primary);
    }
    .activity-log-item .activity-log-item-date span {
        color: #888;
        font-size: 85%;
        padding-left: .4rem;
        font-weight: 300;
    }
    .activity-log-item .activity-log-item-content {
        padding: .5rem .8rem;
        background-color: #f4f4f4;
        border-radius: .5rem;
    }
    .activity-log-item .activity-log-item-content span {
        display:block;
        color:#666;
    }
    .activity-log-item .activity-log-item-icon {
        line-height:2.6rem;
        position:absolute;
        left:-1.3rem;
        width:2.6rem;
        height:2.6rem;
        text-align:center;
        border-radius:50%;
        font-size:1.1rem;
        background-color:#fff;
        color:#fff
    }
    .activity-log-item .activity-log-item-icon {
        color:#e5e5e5;
        border:1px solid #e5e5e5;
        font-size:.6rem
    }
    .activity-log-item-content-title {
        font-weight: 500;
        font-size: 15px;
        color: #000000 !important;
    }
    .activity-log-item-content-message {
        font-weight: 400;
        font-size: 13px;
    }
    @media(min-width:992px) {
        .activity-log-item {
            margin-left:10rem
        }
        .activity-log-item .activity-log-item-date {
            position:absolute;
            left:-10rem;
            width:7.5rem;
            text-align:right
        }
        .activity-log-item .activity-log-item-date span {
            display:block
        }
    }
</style>
@endpush