mirror of
https://github.com/Shchoholiev/shopping-assistant-web-client.git
synced 2025-04-04 16:49:36 +00:00
Merge pull request #11 from Shchoholiev/feature/SA-109-Development-Task-WebClient
Feature/SA-109 Add Chat pages and product search
This commit is contained in:
Mykhailo Bilodid
GitHub
commit
e80db0abb9
@ -3,12 +3,16 @@
|
||||
public class Messages
|
||||
{
|
||||
|
||||
public required string Id { get; set; }
|
||||
public string Id { get; set; }
|
||||
|
||||
public required string Text { get; set; }
|
||||
public string Text { get; set; }
|
||||
|
||||
public required string Role { get; set; }
|
||||
public string Role { get; set; }
|
||||
|
||||
public required string CreatedById { get; set; }
|
||||
public string CreatedById { get; set; }
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -99,7 +99,7 @@ public class ApiClient
|
||||
public async IAsyncEnumerable<ServerSentEvent> GetServerSentEventStreamed(string url, Object obj, CancellationToken cancellationToken)
|
||||
{
|
||||
await SetAuthenticationAsync();
|
||||
|
||||
var count = 0; //
|
||||
var requestUrl = $"{_httpClient.BaseAddress}{url}";
|
||||
var response = await _httpClient.PostAsJsonAsync(requestUrl, obj);
|
||||
using var responseStream = await response.Content.ReadAsStreamAsync();
|
||||
@ -109,9 +109,14 @@ public class ApiClient
|
||||
while (!cancellationToken.IsCancellationRequested)
|
||||
{
|
||||
var jsonChunk = await reader.ReadLineAsync(cancellationToken);
|
||||
count += 1; //
|
||||
if (count >=5 ){ //
|
||||
break; //
|
||||
}; //
|
||||
if (jsonChunk == null) continue;
|
||||
if (jsonChunk.StartsWith("event: "))
|
||||
{
|
||||
count = 0; //
|
||||
var type = jsonChunk.Substring("event: ".Length);
|
||||
switch(type)
|
||||
{
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
@page "/chat/{chatId}"
|
||||
|
||||
@inject IHttpClientFactory ClientFactory
|
||||
@inject IJSRuntime JSRuntime
|
||||
|
||||
<PageTitle>Gift for Jessica</PageTitle>
|
||||
<PageTitle>@name</PageTitle>
|
||||
|
||||
<div class="right_frame" id="rightFrame">
|
||||
|
||||
@ -16,30 +17,35 @@
|
||||
|
||||
|
||||
<div class="new_chat">
|
||||
<div class="chat_message">
|
||||
|
||||
<div class="title_one_frame">@name</div>
|
||||
|
||||
<div class="title_one_frame">Gift for Jessica</div>
|
||||
<div class="chat_message" @ref="chatMessageRef">
|
||||
|
||||
<ul class="chat_box">
|
||||
|
||||
@if(!isLoading && Messages!=null){
|
||||
@if (!isLoading && Messages != null)
|
||||
{
|
||||
|
||||
@foreach (var item in Messages){
|
||||
@foreach (var item in Messages)
|
||||
{
|
||||
|
||||
if(item.Role!="User"){
|
||||
if (item.Role != "User")
|
||||
{
|
||||
|
||||
<li class=" chat_incoming">
|
||||
<p>@item.Text</p>
|
||||
</li>
|
||||
<li class=" chat_incoming">
|
||||
<p>@item.Text</p>
|
||||
</li>
|
||||
|
||||
}else{
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
<li class="chat_outgoing">
|
||||
<p>@item.Text</p>
|
||||
</li>
|
||||
<li class="chat_outgoing">
|
||||
<p>@item.Text</p>
|
||||
</li>
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -52,21 +58,27 @@
|
||||
|
||||
<div class="possible_options">
|
||||
|
||||
<div class="tite_options">Several possible options</div>
|
||||
@if (Suggestion.Count != 0)
|
||||
{
|
||||
|
||||
<div class="options">
|
||||
<div class="tite_options">Several possible options</div>
|
||||
|
||||
<div class="topic_options">
|
||||
HDMI
|
||||
</div>
|
||||
<div class="topic_options">
|
||||
VGA
|
||||
</div>
|
||||
<div class="topic_options">
|
||||
DisplayPort
|
||||
</div>
|
||||
<div class="options">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@foreach (var item in Suggestion)
|
||||
{
|
||||
|
||||
<div @onclick="() => ClickOption(item)" class="topic_options">
|
||||
@item
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
@ -84,8 +96,15 @@
|
||||
|
||||
<script>
|
||||
|
||||
window.scrollToBottom = function (element) {
|
||||
if (element) {
|
||||
element.scrollTop = 9999;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('button_open').addEventListener('click', changetyle);
|
||||
|
||||
</script>
|
||||
@code {
|
||||
|
||||
@ -100,8 +119,21 @@
|
||||
{
|
||||
if (e.Code == "Enter" || e.Code == "NumpadEnter")
|
||||
{
|
||||
AddNewMessage();
|
||||
AddNewMessage();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private ElementReference chatMessageRef;
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
await JSRuntime.InvokeVoidAsync("scrollToBottom", chatMessageRef);
|
||||
}
|
||||
|
||||
|
||||
private void ClickOption(string item)
|
||||
{
|
||||
inputValue = item;
|
||||
}
|
||||
|
||||
}
|
||||
@ -3,7 +3,9 @@ using ShoppingAssistantWebClient.Web.Models;
|
||||
using GraphQL;
|
||||
using Newtonsoft.Json;
|
||||
using ShoppingAssistantWebClient.Web.Network;
|
||||
|
||||
using ShoppingAssistantWebClient.Web.Models.Input;
|
||||
using ShoppingAssistantWebClient.Web.Models.Enums;
|
||||
using System.Text.RegularExpressions;
|
||||
namespace ShoppingAssistantWebClient.Web.Pages;
|
||||
|
||||
public partial class Chat : ComponentBase
|
||||
@ -11,10 +13,20 @@ public partial class Chat : ComponentBase
|
||||
|
||||
[Inject]
|
||||
private ApiClient _apiClient { get; set; }
|
||||
[Inject]
|
||||
private NavigationManager Navigation { get; set; }
|
||||
|
||||
public List<Messages> Messages { get; set; }
|
||||
public List<String> Suggestion { get; set; } = new List<String>();
|
||||
|
||||
public Messages Message { get; set; }
|
||||
|
||||
private CancellationTokenSource cancelTokenSource;
|
||||
|
||||
private MessageCreateDto messageCreateDto;
|
||||
public bool isLoading = true;
|
||||
private string inputValue = "";
|
||||
private string name = "";
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await LoadMessages();
|
||||
@ -23,79 +35,135 @@ public partial class Chat : ComponentBase
|
||||
|
||||
private async Task LoadMessages()
|
||||
{
|
||||
|
||||
|
||||
isLoading = true;
|
||||
int pageNumber = 1;
|
||||
string wishlistId = chatId;
|
||||
var request = new GraphQLRequest
|
||||
{
|
||||
Query = @"query MessagesPageFromPersonalWishlist($wishlistId: String!, $pageNumber: Int!, $pageSize: Int!) {
|
||||
messagesPageFromPersonalWishlist( wishlistId: $wishlistId, pageNumber: $pageNumber, pageSize: $pageSize)
|
||||
{
|
||||
items {
|
||||
id
|
||||
text
|
||||
role
|
||||
createdById
|
||||
}
|
||||
try{
|
||||
string wishlistId = chatId;
|
||||
|
||||
var request = new GraphQLRequest
|
||||
{
|
||||
Query = @"query PersonalWishlist( $wishlistId: String!) {
|
||||
personalWishlist(wishlistId: $wishlistId) {
|
||||
name
|
||||
}
|
||||
}",
|
||||
|
||||
Variables = new
|
||||
{
|
||||
wishlistId,
|
||||
pageNumber,
|
||||
pageSize = 20
|
||||
}
|
||||
};
|
||||
try{
|
||||
Variables = new
|
||||
{
|
||||
wishlistId,
|
||||
}
|
||||
};
|
||||
|
||||
var response = await _apiClient.QueryAsync(request);
|
||||
var responseData = response.Data;
|
||||
var responseData = response.Data;
|
||||
name = responseData.personalWishlist.name;
|
||||
|
||||
|
||||
isLoading = true;
|
||||
int pageNumber = 1;
|
||||
request = new GraphQLRequest
|
||||
{
|
||||
Query = @"query MessagesPageFromPersonalWishlist($wishlistId: String!, $pageNumber: Int!, $pageSize: Int!) {
|
||||
messagesPageFromPersonalWishlist( wishlistId: $wishlistId, pageNumber: $pageNumber, pageSize: $pageSize)
|
||||
{
|
||||
items {
|
||||
id
|
||||
text
|
||||
role
|
||||
createdById
|
||||
}
|
||||
}
|
||||
}",
|
||||
|
||||
Variables = new
|
||||
{
|
||||
wishlistId,
|
||||
pageNumber,
|
||||
pageSize = 200
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
response = await _apiClient.QueryAsync(request);
|
||||
responseData = response.Data;
|
||||
var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.messagesPageFromPersonalWishlist.items);
|
||||
this.Messages = JsonConvert.DeserializeObject<List<Messages>>(jsonCategoriesResponse);
|
||||
Messages.Reverse();
|
||||
isLoading = false;
|
||||
|
||||
}catch{
|
||||
|
||||
}catch(Exception ex){
|
||||
Console.WriteLine($"Error : {ex.Message}");
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
private async Task AddNewMessage()
|
||||
private async Task AddNewMessage()
|
||||
{
|
||||
try{
|
||||
messageCreateDto = new MessageCreateDto { Text = inputValue };;
|
||||
Message = new Messages();
|
||||
Message.Text = inputValue;
|
||||
Message.Role = "User";
|
||||
Message.Id = "";
|
||||
Message.CreatedById = "";
|
||||
inputValue = "";
|
||||
Suggestion = new List<String>();
|
||||
Messages.Add(Message);
|
||||
StateHasChanged();
|
||||
|
||||
cancelTokenSource = new CancellationTokenSource();
|
||||
var cancellationToken = cancelTokenSource.Token;
|
||||
|
||||
var serverSentEvent = _apiClient.GetServerSentEventStreamed($"ProductsSearch/search/{chatId}", messageCreateDto, cancellationToken);
|
||||
bool first = true;
|
||||
|
||||
await foreach (var sseEvent in serverSentEvent.WithCancellation(cancellationToken))
|
||||
{
|
||||
Console.WriteLine($"Received SSE Event: {sseEvent.Event}, Data: {sseEvent.Data}");
|
||||
|
||||
isLoading = true;
|
||||
var pageNumber = 1;
|
||||
var wishlistId = chatId;
|
||||
var text = inputValue;
|
||||
inputValue="";
|
||||
var request = new GraphQLRequest
|
||||
|
||||
if(sseEvent.Event == SearchEventType.Message){
|
||||
|
||||
string input = sseEvent.Data;
|
||||
Regex regex = new Regex("\"(.*?)\"");
|
||||
Match match = regex.Match(input);
|
||||
string result = match.Groups[1].Value;
|
||||
|
||||
|
||||
|
||||
Message = new Messages();
|
||||
Message.Text = result;
|
||||
Message.Role = "bot";
|
||||
Message.Id = "";
|
||||
Message.CreatedById = "";
|
||||
|
||||
if (first)
|
||||
{
|
||||
Query = @"mutation AddMessageToPersonalWishlist($wishlistId: String!, $text: String!) {
|
||||
addMessageToPersonalWishlist(wishlistId: $wishlistId, dto: { text: $text }) {
|
||||
id
|
||||
text
|
||||
role
|
||||
createdById
|
||||
}
|
||||
}
|
||||
",
|
||||
Messages.Add(Message);
|
||||
first = false;
|
||||
}
|
||||
else
|
||||
{
|
||||
var lengt = Messages.Count();
|
||||
Messages[lengt-1].Text += Message.Text;
|
||||
}
|
||||
|
||||
Variables = new
|
||||
{
|
||||
wishlistId,
|
||||
text
|
||||
}
|
||||
};
|
||||
StateHasChanged();
|
||||
|
||||
}else if(sseEvent.Event == SearchEventType.Product){
|
||||
|
||||
var url = $"/chat/{chatId}/product";
|
||||
Navigation.NavigateTo(url);
|
||||
|
||||
}else if(sseEvent.Event == SearchEventType.Suggestion){
|
||||
|
||||
Suggestion.Add(sseEvent.Data);
|
||||
}
|
||||
|
||||
var response = await _apiClient.QueryAsync(request);
|
||||
await LoadMessages();
|
||||
}
|
||||
|
||||
}catch(Exception ex){
|
||||
Console.WriteLine($"Error : {ex.Message}");
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -56,7 +56,6 @@
|
||||
}
|
||||
|
||||
.possible_options {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
bottom: 5.5em;
|
||||
margin-left: 25%;
|
||||
@ -84,6 +83,7 @@
|
||||
margin: 0em 0.6em;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input_messages {
|
||||
@ -117,7 +117,7 @@
|
||||
.chat_message {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 5.5em);
|
||||
height: calc(100% - 8em);
|
||||
width: 100%;
|
||||
}
|
||||
.chat_message::-webkit-scrollbar {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
@page "/"
|
||||
|
||||
<PageTitle>New Chat</PageTitle>
|
||||
|
||||
<div class="right_frame" id="rightFrame">
|
||||
@ -12,8 +11,9 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@if(isLoading == false){
|
||||
|
||||
<div class="new_chat">
|
||||
<div class="new_chat">
|
||||
<div class="chat_message">
|
||||
<div class="title_one_frame">New chat</div>
|
||||
<div class="title_two_frame">What you're looking for</div>
|
||||
@ -59,6 +59,17 @@
|
||||
|
||||
</div>
|
||||
|
||||
}else{
|
||||
|
||||
<div class="new_chat">
|
||||
|
||||
<img class="loading" src="/images/loading.svg" alt="Loading chat">
|
||||
|
||||
</div>
|
||||
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -87,6 +98,18 @@
|
||||
choose = "Product";
|
||||
|
||||
}
|
||||
function myJavaScriptFunction(wishlistId) {
|
||||
|
||||
UpdateMenu(wishlistId);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
document.getElementById('choose_gift').addEventListener('click', switchGift);
|
||||
document.getElementById('choose_product').addEventListener('click', switchProduct);
|
||||
@ -102,4 +125,12 @@
|
||||
private void Сhoose_gift() {
|
||||
selectedChoice = "Gift";
|
||||
}
|
||||
|
||||
private async Task UpdateSideMenu(string wishlistId)
|
||||
{
|
||||
|
||||
await JSRuntime.InvokeVoidAsync("myJavaScriptFunction", wishlistId);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using ShoppingAssistantWebClient.Web.Models;
|
||||
using ShoppingAssistantWebClient.Web.Models.ProductSearch;
|
||||
using ShoppingAssistantWebClient.Web.Models.Input;
|
||||
using GraphQL;
|
||||
using Newtonsoft.Json;
|
||||
using ShoppingAssistantWebClient.Web.Network;
|
||||
|
||||
using System;
|
||||
using Microsoft.JSInterop;
|
||||
|
||||
namespace ShoppingAssistantWebClient.Web.Pages
|
||||
{
|
||||
@ -13,44 +16,104 @@ namespace ShoppingAssistantWebClient.Web.Pages
|
||||
[Inject]
|
||||
private ApiClient _apiClient { get; set; }
|
||||
[Inject]
|
||||
|
||||
private NavigationManager Navigation { get; set; }
|
||||
[Inject]
|
||||
protected IJSRuntime JSRuntime { get; set; }
|
||||
|
||||
private MessageCreateDto messageCreateDto;
|
||||
|
||||
private CancellationTokenSource cancelTokenSource;
|
||||
|
||||
private string inputValue = "";
|
||||
public bool isLoading = true;
|
||||
public bool isLoading;
|
||||
|
||||
|
||||
private async Task CreateNewChat() {
|
||||
|
||||
if(inputValue!=""){
|
||||
|
||||
var type = selectedChoice;
|
||||
|
||||
var firstMessageText= inputValue;
|
||||
var request = new GraphQLRequest
|
||||
try
|
||||
{
|
||||
Query = @"mutation StartPersonalWishlist($type: String!, $firstMessageText: String!) {
|
||||
startPersonalWishlist(dto: { type: $type, firstMessageText: $firstMessageText }) {
|
||||
id
|
||||
}
|
||||
}
|
||||
",
|
||||
|
||||
Variables = new
|
||||
if (string.IsNullOrWhiteSpace(inputValue))
|
||||
{
|
||||
type,
|
||||
firstMessageText
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
var response = await _apiClient.QueryAsync(request);
|
||||
var responseData = response.Data;
|
||||
var chat_id = responseData.startPersonalWishlist.id;
|
||||
var url = $"/chat/{chat_id}";
|
||||
Navigation.NavigateTo(url);
|
||||
isLoading = true;
|
||||
StateHasChanged();
|
||||
messageCreateDto = new MessageCreateDto { Text = inputValue };
|
||||
var type = selectedChoice;
|
||||
var firstMessageText = $"What are you looking for?";
|
||||
|
||||
}
|
||||
|
||||
var request = new GraphQLRequest
|
||||
{
|
||||
Query = @"
|
||||
mutation StartPersonalWishlist($type: String!, $firstMessageText: String!) {
|
||||
startPersonalWishlist(dto: { type: $type, firstMessageText: $firstMessageText }) {
|
||||
id
|
||||
}
|
||||
}",
|
||||
Variables = new
|
||||
{
|
||||
type,
|
||||
firstMessageText
|
||||
}
|
||||
};
|
||||
|
||||
var response = await _apiClient.QueryAsync(request);
|
||||
var responseData = response.Data;
|
||||
var chatId = responseData?.startPersonalWishlist?.id;
|
||||
string wishlistId1 = chatId;
|
||||
|
||||
var text = inputValue;
|
||||
|
||||
cancelTokenSource = new CancellationTokenSource();
|
||||
var cancellationToken = cancelTokenSource.Token;
|
||||
|
||||
var serverSentEvent = _apiClient.GetServerSentEventStreamed($"ProductsSearch/search/{chatId}", messageCreateDto, cancellationToken);
|
||||
|
||||
await foreach (var sseEvent in serverSentEvent.WithCancellation(cancellationToken))
|
||||
{
|
||||
// Handle each ServerSentEvent as needed
|
||||
Console.WriteLine($"Received SSE Event: {sseEvent.Event}, Data: {sseEvent.Data}");
|
||||
}
|
||||
|
||||
string wishlistId = chatId;
|
||||
|
||||
request = new GraphQLRequest
|
||||
{
|
||||
Query = @"mutation GenerateNameForPersonalWishlist($wishlistId: String!) {
|
||||
generateNameForPersonalWishlist(wishlistId: $wishlistId) {
|
||||
id
|
||||
name
|
||||
}
|
||||
}",
|
||||
Variables = new
|
||||
{
|
||||
wishlistId
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
response = await _apiClient.QueryAsync(request);
|
||||
|
||||
isLoading = false;
|
||||
StateHasChanged();
|
||||
|
||||
await UpdateSideMenu(wishlistId1);
|
||||
var url = $"/chat/{chatId}";
|
||||
Navigation.NavigateTo(url);
|
||||
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
// Handle exceptions appropriately
|
||||
Console.WriteLine($"Error in CreateNewChat: {ex.Message}");
|
||||
}
|
||||
finally
|
||||
{
|
||||
isLoading = false;
|
||||
cancelTokenSource?.Dispose();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -17,7 +17,16 @@
|
||||
cursor: pointer;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.loading {
|
||||
margin: 0 auto;
|
||||
margin-top: 25%;
|
||||
height: 10em;
|
||||
width: 10em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.button_open_menu span {
|
||||
width: 20px;
|
||||
height: 1.5px;
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
@using Models.GlobalInstances
|
||||
@using System.Linq
|
||||
@using Microsoft.AspNetCore.Components
|
||||
@using Microsoft.JSInterop
|
||||
@inject NavigationManager Navigation
|
||||
@inject IJSRuntime JSRuntime;
|
||||
|
||||
<div id="leftframe" class="left_frame">
|
||||
|
||||
@ -16,7 +20,8 @@
|
||||
<span></span>
|
||||
</a>
|
||||
|
||||
<div class="elements_wishlisht">
|
||||
|
||||
<div class="elements_wishlisht" id="elements_wishlisht" >
|
||||
|
||||
<div class="add_chat" @onclick="RedirectToNewChat" >
|
||||
<div>
|
||||
@ -29,15 +34,15 @@
|
||||
|
||||
@if(!isLoading){
|
||||
|
||||
@foreach (var item in Wishlists)
|
||||
@foreach (var item in Wishlists)
|
||||
{
|
||||
<section class="cont_wishlist">
|
||||
<div @onclick="() => RedirectToPage(item.Id)" class="wishlist_name" >@item.Name</div>
|
||||
<img @onclick="() => DeleteWishlist(item.Id)" class="button_delete_chat" src="/images/icon_delete.svg" alt="Delete wishlist">
|
||||
<img @onclick="() => RedirectToCard(item.Id)" class="button_open_card" src="/images/icon_open_card.svg" alt="Card open">
|
||||
|
||||
<section class="cont_wishlist @(selectedWishlistId == item.Id ? "selected_wishlist" : "")">
|
||||
<div class="wishlist_name" @onclick="() => RedirectToPage(item.Id)">@item.Name</div>
|
||||
<img class="button_delete_chat" @onclick="() => DeleteWishlist(item.Id)" src="/images/icon_delete.svg" alt="Delete wishlist">
|
||||
<img class="button_open_card" @onclick="() => RedirectToCard(item.Id)" src="/images/icon_open_card.svg" alt="Card open">
|
||||
</section>
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</div>
|
||||
@ -81,31 +86,99 @@
|
||||
}
|
||||
document.getElementById('button_close').addEventListener('click', changetyle);
|
||||
|
||||
/*
|
||||
window.getScrollTop = function (element) {
|
||||
return element.scrollTop;
|
||||
};
|
||||
|
||||
window.getOffsetHeight = function (element) {
|
||||
return element.offsetHeight;
|
||||
};
|
||||
|
||||
window.getScrollHeight = function (element) {
|
||||
return element.scrollHeight;
|
||||
};
|
||||
|
||||
window.setScrollTop = function (element, scrollTop) {
|
||||
element.scrollTop = scrollTop;
|
||||
};
|
||||
*/
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function UpdateMenu(wishlistId)
|
||||
{
|
||||
|
||||
DotNet.invokeMethodAsync('ShoppingAssistantWebClient.Web', 'Update', wishlistId);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@code {
|
||||
|
||||
[Parameter] public string chatId { get; set; }
|
||||
|
||||
|
||||
private string selectedWishlistId;
|
||||
|
||||
|
||||
private static NavMenu _app;
|
||||
|
||||
public NavMenu ()
|
||||
{
|
||||
_app = this;
|
||||
|
||||
}
|
||||
|
||||
[JSInvokable]
|
||||
public static void Update(string wishlistId)
|
||||
{
|
||||
_app.LoadMenus(1,200);
|
||||
_app.selectedWishlistId=wishlistId;
|
||||
}
|
||||
|
||||
private void RedirectToPage(string itemId) {
|
||||
var url = $"/chat/{itemId}";
|
||||
Navigation.NavigateTo(url);
|
||||
}
|
||||
_app.selectedWishlistId = itemId;
|
||||
var url = $"/chat/{itemId}";
|
||||
Navigation.NavigateTo(url);
|
||||
}
|
||||
private void RedirectToNewChat() {
|
||||
var url = $"/";
|
||||
Navigation.NavigateTo(url);
|
||||
}
|
||||
var url = $"/";
|
||||
Navigation.NavigateTo(url);
|
||||
}
|
||||
private void RedirectToCard(string itemId) {
|
||||
var url = $"/chat/{itemId}/cart";
|
||||
Navigation.NavigateTo(url);
|
||||
}
|
||||
var url = $"/chat/{itemId}/cart";
|
||||
Navigation.NavigateTo(url);
|
||||
}
|
||||
private async void DeleteWishlist(string itemId) {
|
||||
|
||||
await DeleteWish(itemId);
|
||||
|
||||
}
|
||||
|
||||
public void UpdateSideMenu()
|
||||
{
|
||||
StateHasChanged();
|
||||
}
|
||||
/*
|
||||
private int savedScrollTop = 0;
|
||||
|
||||
private ElementReference wishlishtRef;
|
||||
|
||||
private async Task OnScroll()
|
||||
{
|
||||
var scrollTop = await JSRuntime.InvokeAsync<int>("getScrollTop", wishlishtRef);
|
||||
var offsetHeight = await JSRuntime.InvokeAsync<int>("getOffsetHeight", wishlishtRef);
|
||||
var scrollHeight = await JSRuntime.InvokeAsync<int>("getScrollHeight", wishlishtRef);
|
||||
|
||||
if (scrollTop + offsetHeight > scrollHeight - 100)
|
||||
{
|
||||
savedScrollTop = scrollTop;
|
||||
currentPage++;
|
||||
await LoadMenus(currentPage, pageSize);
|
||||
await InvokeAsync(() => JSRuntime.InvokeVoidAsync("setScrollTop", wishlishtRef, savedScrollTop));
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -13,58 +13,81 @@ namespace ShoppingAssistantWebClient.Web.Shared
|
||||
private ApiClient _apiClient { get; set; }
|
||||
public List<Wishlist> Wishlists { get; set; }
|
||||
public bool isLoading = true;
|
||||
|
||||
public int pageSize { get; set; }
|
||||
public int currentPage { get; set; }
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await LoadMenus();
|
||||
pageSize = 200;
|
||||
currentPage = 1;
|
||||
Wishlists = new List<Wishlist>();
|
||||
await LoadMenus(currentPage, pageSize);
|
||||
|
||||
}
|
||||
private async Task LoadMenus()
|
||||
public async Task LoadMenus(int pageNumber, int pageSize )
|
||||
{
|
||||
isLoading = true;
|
||||
var pageNumber = 1;
|
||||
var request = new GraphQLRequest
|
||||
{
|
||||
Query = @"query PersonalWishlistsPage( $pageNumber: Int!, $pageSize: Int!) {
|
||||
personalWishlistsPage(pageNumber: $pageNumber, pageSize: $pageSize) {
|
||||
items {
|
||||
id
|
||||
name
|
||||
}
|
||||
}
|
||||
}",
|
||||
|
||||
Variables = new
|
||||
try{
|
||||
isLoading = true;
|
||||
var request = new GraphQLRequest
|
||||
{
|
||||
pageNumber,
|
||||
pageSize = 10,
|
||||
}
|
||||
};
|
||||
Query = @"query PersonalWishlistsPage( $pageNumber: Int!, $pageSize: Int!) {
|
||||
personalWishlistsPage(pageNumber: $pageNumber, pageSize: $pageSize) {
|
||||
items {
|
||||
id
|
||||
name
|
||||
}
|
||||
}
|
||||
}",
|
||||
|
||||
var response = await _apiClient.QueryAsync(request);
|
||||
var responseData = response.Data;
|
||||
var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.personalWishlistsPage.items);
|
||||
this.Wishlists = JsonConvert.DeserializeObject<List<Wishlist>>(jsonCategoriesResponse);
|
||||
isLoading = false;
|
||||
Variables = new
|
||||
{
|
||||
pageNumber,
|
||||
pageSize,
|
||||
}
|
||||
};
|
||||
|
||||
var response = await _apiClient.QueryAsync(request);
|
||||
var responseData = response.Data;
|
||||
var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.personalWishlistsPage.items);
|
||||
this.Wishlists = JsonConvert.DeserializeObject<List<Wishlist>>(jsonCategoriesResponse);
|
||||
Wishlists.Reverse();
|
||||
isLoading = false;
|
||||
StateHasChanged();
|
||||
|
||||
}catch(Exception ex){
|
||||
Console.WriteLine($"Error : {ex.Message}");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
protected async Task DeleteWish(string wishlistId)
|
||||
{
|
||||
var request = new GraphQLRequest
|
||||
{
|
||||
Query = @"mutation DeletePersonalWishlist($wishlistId: String!) {
|
||||
deletePersonalWishlist(wishlistId: $wishlistId) {
|
||||
id
|
||||
}
|
||||
}
|
||||
",
|
||||
|
||||
Variables = new
|
||||
try{
|
||||
var request = new GraphQLRequest
|
||||
{
|
||||
wishlistId
|
||||
}
|
||||
};
|
||||
Query = @"mutation DeletePersonalWishlist($wishlistId: String!) {
|
||||
deletePersonalWishlist(wishlistId: $wishlistId) {
|
||||
id
|
||||
}
|
||||
}
|
||||
",
|
||||
|
||||
var response = await _apiClient.QueryAsync(request);
|
||||
await LoadMenus();
|
||||
Variables = new
|
||||
{
|
||||
wishlistId
|
||||
}
|
||||
};
|
||||
|
||||
var response = await _apiClient.QueryAsync(request);
|
||||
await LoadMenus(currentPage, pageSize);
|
||||
var url = $"/";
|
||||
Navigation.NavigateTo(url);
|
||||
|
||||
}catch(Exception ex){
|
||||
Console.WriteLine($"Error : {ex.Message}");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
|
||||
.left_frame {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 5em;
|
||||
position: relative;
|
||||
@ -12,26 +12,35 @@
|
||||
align-items: center;
|
||||
padding-bottom: 1.5%;
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 5em;
|
||||
top: 5em;
|
||||
bottom: 0;
|
||||
border: 1.5px solid;
|
||||
border-color: #0052CC;
|
||||
border-radius: 0.6em;
|
||||
padding-top: 1.5%;
|
||||
}
|
||||
|
||||
.elements_wishlisht {
|
||||
|
||||
position: absolute;
|
||||
overflow-y: auto;
|
||||
top: 2.43em;
|
||||
width: 100%;
|
||||
bottom: 4em;
|
||||
bottom: 3.8em;
|
||||
padding-left: 1.25em;
|
||||
padding-right: 1.25em;
|
||||
padding-bottom: 3.8em;
|
||||
}
|
||||
|
||||
.wishlist_names {
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.info_user {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
@ -46,6 +55,7 @@
|
||||
padding-right: 1.25em;
|
||||
border-top: 1px solid #0165FF;
|
||||
}
|
||||
|
||||
.logo_name {
|
||||
padding-top: 0.5em;
|
||||
padding-left: 0.3em;
|
||||
@ -56,11 +66,13 @@
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
float: left;
|
||||
height: 3.25em;
|
||||
width: 3.25em;
|
||||
}
|
||||
|
||||
.wishlist_name {
|
||||
padding-left: 0.7em;
|
||||
padding-right: 5em;
|
||||
@ -68,10 +80,11 @@
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
height: 2.5em;
|
||||
height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cont_wishlist {
|
||||
margin-top: 0.4375em;
|
||||
margin-bottom: 0.4375em;
|
||||
@ -79,23 +92,64 @@
|
||||
border-radius: 0.6em;
|
||||
font-size: 1.1em;
|
||||
width: 100%;
|
||||
height:2.5em;
|
||||
height: 2.5em;
|
||||
|
||||
}
|
||||
|
||||
.cont_wishlist:hover {
|
||||
|
||||
background-color: #e6e6e6;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.cont_wishlist:hover .button_delete_chat{
|
||||
|
||||
.cont_wishlist:hover .button_delete_chat {
|
||||
visibility: visible;
|
||||
}
|
||||
.cont_wishlist:hover .button_open_card{
|
||||
|
||||
.cont_wishlist:hover .button_open_card {
|
||||
visibility: visible;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.selected_wishlist {
|
||||
margin-top: 0.4375em;
|
||||
margin-bottom: 0.4375em;
|
||||
color: black;
|
||||
border-radius: 0.6em;
|
||||
font-size: 1.1em;
|
||||
width: 100%;
|
||||
height: 2.5em;
|
||||
background-color: #e6e6e6;
|
||||
transition: 0.2s;
|
||||
|
||||
}
|
||||
|
||||
.sel_del {
|
||||
visibility: visible;
|
||||
cursor: pointer;
|
||||
margin-top: 0.55em;
|
||||
margin-right: 1em;
|
||||
float: right;
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.selected_card{
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
margin-top: 0.55em;
|
||||
margin-right: 1em;
|
||||
float: right;
|
||||
visibility: visible;
|
||||
height: 1.4em;
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
.button_delete_chat {
|
||||
cursor: pointer;
|
||||
margin-top: 0.55em;
|
||||
margin-top: 0.55em;
|
||||
margin-right: 1em;
|
||||
float: right;
|
||||
position: relative;
|
||||
@ -103,6 +157,7 @@
|
||||
height: 1.4em;
|
||||
width: 1.4em;
|
||||
}
|
||||
|
||||
.button_open_card {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
@ -114,14 +169,17 @@
|
||||
height: 1.4em;
|
||||
width: 1.5em;
|
||||
}
|
||||
.elements_wishlisht::-webkit-scrollbar {
|
||||
|
||||
.wishlist_names::-webkit-scrollbar {
|
||||
border-radius: 20px;
|
||||
width: 0.2em;
|
||||
}
|
||||
|
||||
.elements_wishlisht::-webkit-scrollbar-thumb {
|
||||
background-color: #0052CC; /* Колір позиції покажчика */
|
||||
border-radius: 10px; /* Закруглення країв позиції покажчика */
|
||||
.wishlist_names::-webkit-scrollbar-thumb {
|
||||
background-color: #0052CC;
|
||||
/* Колір позиції покажчика */
|
||||
border-radius: 10px;
|
||||
/* Закруглення країв позиції покажчика */
|
||||
width: 0.2em;
|
||||
}
|
||||
|
||||
@ -131,10 +189,11 @@
|
||||
border-radius: 0.6em;
|
||||
font-size: 1.2em;
|
||||
width: 100%;
|
||||
height:2.5em;
|
||||
height: 2.5em;
|
||||
cursor: pointer;
|
||||
line-height: 2.5em;
|
||||
}
|
||||
|
||||
.add_chat div {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -143,11 +202,12 @@
|
||||
text-decoration: none;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.plus {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: -0.1em;
|
||||
font-size: 1.9em;
|
||||
font-size: 1.9em;
|
||||
}
|
||||
|
||||
.user_name {
|
||||
@ -156,12 +216,14 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info_user img {
|
||||
float: left;
|
||||
border-radius: 50%;
|
||||
width: 2.3em;
|
||||
height: 2.3em;
|
||||
}
|
||||
|
||||
.button_close_menu {
|
||||
position: relative;
|
||||
width: 1.43em;
|
||||
@ -171,6 +233,7 @@
|
||||
margin-top: 0.5em;
|
||||
margin-right: 1.30em;
|
||||
}
|
||||
|
||||
.button_close_menu span {
|
||||
width: 20px;
|
||||
height: 1.5px;
|
||||
@ -180,9 +243,11 @@
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #4E4E4E;
|
||||
}
|
||||
|
||||
.button_close_menu span:nth-of-type(2) {
|
||||
top: calc(50% - 5px);
|
||||
}
|
||||
|
||||
.button_close_menu span:nth-of-type(3) {
|
||||
top: calc(50% + 5px);
|
||||
}
|
||||
42
ShoppingAssistantWebClient.Web/wwwroot/images/loading.svg
Normal file
42
ShoppingAssistantWebClient.Web/wwwroot/images/loading.svg
Normal file
@ -0,0 +1,42 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="602.000000pt" height="597.000000pt" viewBox="0 0 602.000000 597.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,597.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M2819 5887 c-104 -30 -199 -113 -247 -215 -22 -48 -27 -71 -27 -142
|
||||
0 -105 28 -173 105 -254 74 -79 150 -111 260 -111 72 0 94 4 145 28 79 37 156
|
||||
114 192 191 24 52 28 74 28 146 0 71 -4 94 -27 142 -77 166 -267 261 -429 215z"/>
|
||||
<path d="M4083 5579 c-203 -64 -333 -300 -279 -509 40 -155 147 -257 308 -295
|
||||
252 -59 480 80 521 318 28 163 -56 334 -213 435 -110 71 -221 88 -337 51z"/>
|
||||
<path d="M1493 5496 c-116 -38 -189 -113 -225 -229 -24 -80 -21 -174 7 -245
|
||||
21 -51 88 -112 164 -149 81 -38 211 -44 296 -13 81 30 165 114 190 191 56 164
|
||||
-20 351 -172 425 -67 33 -191 43 -260 20z"/>
|
||||
<path d="M5061 4675 c-366 -103 -489 -487 -241 -758 86 -94 189 -148 315 -166
|
||||
202 -29 380 72 473 266 36 76 37 81 37 188 0 131 -20 191 -94 288 -115 150
|
||||
-326 228 -490 182z"/>
|
||||
<path d="M532 4508 c-51 -17 -124 -89 -157 -155 -26 -50 -30 -69 -30 -138 0
|
||||
-71 4 -89 33 -147 37 -75 73 -110 151 -146 46 -21 63 -24 130 -20 90 6 152 32
|
||||
212 90 62 60 83 116 84 218 0 73 -4 92 -27 136 -32 61 -94 119 -157 147 -54
|
||||
24 -187 32 -239 15z"/>
|
||||
<path d="M5440 3389 c-145 -25 -278 -125 -344 -261 -94 -190 -59 -406 89 -554
|
||||
194 -195 490 -191 683 10 66 68 105 136 127 223 83 319 -222 639 -555 582z"/>
|
||||
<path d="M218 3187 c-132 -37 -217 -162 -206 -301 13 -163 137 -267 303 -254
|
||||
103 9 187 64 229 151 55 112 41 216 -40 306 -81 90 -185 126 -286 98z"/>
|
||||
<path d="M5085 2120 c-164 -34 -301 -145 -383 -311 -103 -208 -72 -411 85
|
||||
-568 101 -101 244 -161 383 -161 228 0 444 155 516 370 27 82 25 225 -4 312
|
||||
-87 253 -347 409 -597 358z"/>
|
||||
<path d="M539 1877 c-72 -20 -129 -75 -166 -157 -19 -43 -22 -168 -5 -227 15
|
||||
-50 82 -122 143 -155 58 -30 186 -33 239 -4 63 33 115 83 145 137 26 47 30 64
|
||||
30 134 0 63 -5 89 -23 122 -30 57 -86 111 -139 135 -56 25 -164 32 -224 15z"/>
|
||||
<path d="M1509 870 c-20 -11 -49 -34 -64 -52 -36 -42 -85 -146 -85 -178 0 -78
|
||||
56 -161 134 -203 63 -33 166 -31 228 5 98 58 144 191 100 290 -25 58 -87 127
|
||||
-129 145 -47 19 -141 16 -184 -7z"/>
|
||||
<path d="M2822 537 c-49 -15 -127 -90 -147 -139 -56 -139 19 -302 159 -343 62
|
||||
-19 90 -19 152 0 140 41 214 197 161 337 -22 57 -100 132 -153 147 -48 13
|
||||
-128 13 -172 -2z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
Loading…
Reference in New Issue
Block a user