Customizing Abp Modules #2215

0

enisn created 2 years ago

Support Team .NET Developer

Hi @MILLENNIUM,

Customize the users that displayed for each user.

I couldn't get it what you mean. Do you want to make custom profiles for users to be shown for each user?

Show only sub set of users that in a specific role or applied a custom condition

You can replace IContactAppService and impement your own logic to return contact list to UI.

[Dependency(ReplaceServices = true)]
[ExposeServices(typeof(IContactAppService))]
public class MyCustomContactAppService : ChatAppService, IContactAppService
{
    private IConversationRepository conversationRepository;
    public Task<List<ChatContactDto>> GetContactsAsync(GetContactsInput input)
    {
        // TODO: Your own implementation
    }

    public Task<int> GetTotalUnreadMessageCountAsync()
    {
        return conversationRepository.GetTotalUnreadMessageCountAsync(CurrentUser.GetId());
    }
}

Add voice messages to the chat

Chat Module doesn't provide a full-featured messaging app. So, currenctly voice message feature isn't supported.

Customize the front end template and their styles

You can replace /Pages/Chat/Index.cshtml to change entire UI. You can see https://docs.abp.io/en/abp/latest/UI/AspNetCore/Customization-User-Interface#overriding-a-razor-page-cshtml for more.

Just place following Index.cshtml page to your web application under /Pages/Chat/

@page "/Chat"
@using Microsoft.AspNetCore.Mvc.Localization
@using Volo.Abp.AspNetCore.Mvc.UI.Packages.SignalR
@using Volo.Chat.Localization
@using Volo.Chat.Web.Pages.Chat
@model IndexModel
@inject IHtmlLocalizer<ChatResource> L
@{
    ViewBag.PageTitle = L["Chat"];
}
@section styles {
    <abp-style-bundle name="@typeof(IndexModel).FullName">
        <abp-style src="/Pages/Chat/index.css"/>
    </abp-style-bundle>
}
@section scripts {
    <abp-script-bundle name="@typeof(IndexModel).FullName">
        <abp-script src="/client-proxies/chat-proxy.js" />
        <abp-script src="/Pages/Chat/index.js" />
    </abp-script-bundle>
}
<div id="chat_wrapper">
    <div class="container-fluid">
        <div class="row rounded-lg overflow-hidden shadow bor der">
            <!-- Users box-->
            <div class="col-3 col-md-5 col-lg-4 px-0">
                <div class="border-end">
                    <div class="p-3 bg-light border-bottom">
                        <div class="row">
                            @*<div class="col-auto">
                                <div class="btn-group">
                                   <img src="https://avatars.dicebear.com/v2/human/volos.svg" alt="user" width="32" class="rounded-circle border-primary" style="border: 2px solid">
                                </div>
                            </div>*@
                            <div class="col">
                                <input id="Contacts_Filter" type="search" class="form-control form-control-sm" id="search-input" placeholder="@L["SearchInContacts"].Value" aria-label="@L["SearchInContacts"].Value" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-owns="algolia-autocomplete-listbox-0" dir="auto">
                            </div>
                        </div>
                    </div>

                    <div class="messages-box m-0 p-0" style=" height: calc(100vh - 390px); overflow-y: auto;">
                        <div class="list-group rounded-0" id="contact_list">

                        </div>
                    </div>
                </div>
            </div>
            <!-- Chat Box-->
            <div class="col-9 col-md-7 col-lg-8 px-0">

                <div class="p-3 bg-light border-bottom">
                    <div class="row">
                        <div class="col">
                            <div class="row">
                                <div class="col-auto">
                                    @*<img src="https://avatars.dicebear.com/v2/human/volo.svg" alt="user" width="32" class="rounded-circle   border-secondary" style="border: 2px solid">*@
                                    <canvas id="Conversation_Avatar" class="rounded-circle" width="27" height="27"></canvas>
                                </div>
                                <div class="col pt-1" style="line-height: 1.2;">
                                    <strong id="Conversation_Title" class="font-weight-bold"></strong><br>
                                    <small id="Conversation_Info"></small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="chat_conversation_wrapper" class="chat-box m-0 p-0" style="  height: calc(100vh - 390px); overflow-y: auto;">
                    <div class="chat-box-container p-4" id="chat_conversation">

                    </div>
                </div>

                <!-- Typing area -->
                <form id="Send_Message_Form" action="#" class="bg-light border-top m-0">
                    <div class="p-3">
                        <input id="userId" name="userId" hidden value="" />
                        <textarea id="Chat_Message_Box" name="message" type="text" placeholder="@L["TypeMessage"].Value" class="form-control rounded py-2 bg-white"></textarea>
                        <div class="form-checkfloat-start mt-3">
                            <input type="checkbox" class="form-check-input" id="Send_On_Enter">
                            <label class="form-check-label" for="Send_On_Enter">@L["SendOnEnter"].Value</label>
                        </div>
                        <div class="mt-2 text-end">
                            <button id="Send_Message_Button" disabled type="submit" class="btn btn-primary px-3">@L["Send"] <i class="fa fa-paper-plane ms-2"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

1

MILLENNIUM created 2 years ago

Ok Thank you You answered my question regarding the backend, My Question in front end UI is in Angular app

0

bunyamin created 2 years ago

Hello,

If you can download the source code, you can add it to your project and customize it as you see fit.

If you do not have access to the source code, you can replace the chat component with 'Chat.ChatComponent'. For more details, please refer to the docs

3 Answer(s)