TourIAm/TIAMSharedUI/Pages/User/CardComponents/ProductCardComponent.razor

@using BlazorAnimation
@using TIAM.Core.Enums
@using TIAM.Entities.Products
@using TIAM.Entities.Profiles
@using TIAM.Entities.ServiceProviders
@using TIAM.Entities.Transfers
@using TIAM.Entities.Users
@using TIAM.Models.Dtos.Users
@using TIAM.Services
@using TIAMSharedUI.Shared.Components.Cards
@using TIAMWebApp.Shared.Application.Interfaces
@using TIAMWebApp.Shared.Application.Models.ClientSide.UI
@using TIAMWebApp.Shared.Application.Models.PageModels
@using TIAMWebApp.Shared.Application.Services
@inject IServiceProviderDataService ServiceProviderDataService
@inject IUserDataService UserDataService;
@inject AdminSignalRClient AdminSignalRClient;
@inject IJSRuntime JsRuntime;

<div class="e-card cw-480">
    <div class="e-main d-flex align-items-center">
        @* <div class="flex-shrink-0">
            <img class="e-photo" src="_content/TIAMSharedUI/images/defaultavatar_60.png" alt="" />
        </div> *@

        <div class="flex-shrink-0">
            <a href="api/pictures/1" download="data:image/png;base64,@ImageSource" target="_top">

                <img class="align-self-center img-fluid"
                     src="data:image/png;base64,@ImageSource" width="128" />
            </a>
        </div>

        <div class="e-info flex-grow-1 ms-3">
            <div class="e-name">@($"{Context.Name}")</div>
            <p class="e-title"><i class="fa-solid fa-at"></i> @Context.Profile.EmailAddress</p>
            <p class="e-title"><i class="fa-solid fa-location-dot"></i> @Context.Profile.Address.AddressText</p>
        </div>
    </div>

    <hr class="hr" />

    <div class="row">
        <div class="col-12 col-md-6">
            <h4>Information</h4>

            @RenderDetailsItem("fa-solid fa-user", "Contact Name", productProfile.FullName)

        </div>

        <div class="col-12 col-md-6">
            <h4>Affiliate information</h4>
            @{
                if (Context.ServiceProviderId != null)
                {
                    var _url = $"{Setting.BaseUrl}/public/transfer/{Context.ServiceProvider.AffiliateId}/{Context.Id}";
                    <a href="@_url" target="_blank">@_url</a>
                    <DxButton Context="ButtonContext" CssClass="btn-primary" Click="() => CopyUrl(_url)"><i class="fa-solid fa-copy"></i></DxButton>
                    // <DxButton CssClass="btn btn-primary" Click="() => CopyUrl(_url)">Copy referral url</DxButton>
                   
                }
            }
        </div>

        <div class="col-12 col-md-6">
            
        </div>
        <div class="col-3 col-md-2">
            <DxButton CssClass="btn btn-primary" Click="ChangeName" Enabled="@isSaveActive"> Save</DxButton>
        </div>

        <p>@msg</p>
    </div>
</div>

<script>
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            console.log('Copied to clipboard successfully!');
        }, function (err) {
            alert('Could not copy text: ' + err);
        });
    }
</script>

@code {
    [Parameter] public Product Context { get; set; }

    [Parameter] public EventCallback<string> DataChanged { get; set; }

    public string ImageSource { get; set; } = "";
    AccordionExpandMode ExpandMode { get; set; } = AccordionExpandMode.SingleOrNone;
    AccordionExpandCollapseAction ExpandCollapseAction { get; set; } = AccordionExpandCollapseAction.HeaderClick;

    private Profile productProfile = new Profile();

    string msg;
    private bool isSaveActive = false;

    private async Task CopyUrl(string url)
    {

        await JsRuntime.InvokeVoidAsync("copyToClipboard", url);
    }

    void OnPasswordConfirmed(string password)
    {


    }

    protected async Task ChangeName()
    {

        isSaveActive = false;


        await DataChanged.InvokeAsync(msg);
    }



    protected override async Task OnInitializedAsync()
    {
        var productOwner = await AdminSignalRClient.GetByIdAsync<List<Company>>(SignalRTags.GetCompaniesById, Context.ServiceProviderId);
        if (productOwner != null)
        {
            ImageSource = await ServiceProviderDataService.GetQRCodeByProductIdAndOwnerAffiliateIdAsync(new Guid[] { productOwner[0].AffiliateId, Context.Id });
        }
        var ProductProfiles = await AdminSignalRClient.GetByIdAsync<List<Profile>>(SignalRTags.GetProfileById, Context.ProfileId);
        if (ProductProfiles != null)
        {
            productProfile = ProductProfiles[0];
        }
        await base.OnInitializedAsync();
    }

    protected override async Task OnParametersSetAsync()
    {

        await base.OnParametersSetAsync();
    }

    RenderFragment RenderDetailsItem(string iconCssClass, string caption, string value)
    {
        return @<div class="d-flex m-1 align-items-center">
        <div class="icon-container flex-shrink-0">
            <span class="dxbl-image m-1 @iconCssClass"></span>
        </div>
        <div class="text-container m-1 flex-grow-1 ms-2">
            <label>@caption:</label>
            <div>@value</div>
        </div>
    </div>;
    }

    private void RefreshComponent()
    {
        StateHasChanged();
    }
}