|
@@ -9,13 +9,14 @@
|
|
|
|
|
|
import Modal from '$lib/components/common/Modal.svelte';
|
|
|
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
|
|
+ import Spinner from '$lib/components/common/Spinner.svelte';
|
|
|
|
|
|
const i18n = getContext('i18n');
|
|
|
|
|
|
export let show = false;
|
|
|
export let user;
|
|
|
|
|
|
- let chats = [];
|
|
|
+ let chats = null;
|
|
|
|
|
|
const deleteChatHandler = async (chatId) => {
|
|
|
const res = await deleteChatById(localStorage.token, chatId).catch((error) => {
|
|
@@ -31,6 +32,8 @@
|
|
|
chats = await getChatListByUserId(localStorage.token, user.id);
|
|
|
}
|
|
|
})();
|
|
|
+ } else {
|
|
|
+ chats = null;
|
|
|
}
|
|
|
|
|
|
let sortKey = 'updated_at'; // default sort key
|
|
@@ -46,33 +49,32 @@
|
|
|
</script>
|
|
|
|
|
|
<Modal size="lg" bind:show>
|
|
|
- <div>
|
|
|
- <div class=" flex justify-between dark:text-gray-300 px-5 py-4">
|
|
|
- <div class=" text-lg font-medium self-center capitalize">
|
|
|
- {$i18n.t("{{user}}'s Chats", { user: user.name })}
|
|
|
- </div>
|
|
|
- <button
|
|
|
- class="self-center"
|
|
|
- on:click={() => {
|
|
|
- show = false;
|
|
|
- }}
|
|
|
- >
|
|
|
- <svg
|
|
|
- xmlns="http://www.w3.org/2000/svg"
|
|
|
- viewBox="0 0 20 20"
|
|
|
- fill="currentColor"
|
|
|
- class="w-5 h-5"
|
|
|
- >
|
|
|
- <path
|
|
|
- d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
|
|
|
- />
|
|
|
- </svg>
|
|
|
- </button>
|
|
|
+ <div class=" flex justify-between dark:text-gray-300 px-5 pt-4">
|
|
|
+ <div class=" text-lg font-medium self-center capitalize">
|
|
|
+ {$i18n.t("{{user}}'s Chats", { user: user.name })}
|
|
|
</div>
|
|
|
- <hr class=" dark:border-gray-850" />
|
|
|
+ <button
|
|
|
+ class="self-center"
|
|
|
+ on:click={() => {
|
|
|
+ show = false;
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ viewBox="0 0 20 20"
|
|
|
+ fill="currentColor"
|
|
|
+ class="w-5 h-5"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="flex flex-col md:flex-row w-full px-5 py-4 md:space-x-4 dark:text-gray-200">
|
|
|
- <div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
|
|
|
+ <div class="flex flex-col md:flex-row w-full px-5 pt-2 pb-4 md:space-x-4 dark:text-gray-200">
|
|
|
+ <div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
|
|
|
+ {#if chats}
|
|
|
{#if chats.length > 0}
|
|
|
<div class="text-left text-sm w-full mb-4 max-h-[22rem] overflow-y-scroll">
|
|
|
<div class="relative overflow-x-auto">
|
|
@@ -176,7 +178,9 @@
|
|
|
{$i18n.t('has no conversations.')}
|
|
|
</div>
|
|
|
{/if}
|
|
|
- </div>
|
|
|
+ {:else}
|
|
|
+ <Spinner />
|
|
|
+ {/if}
|
|
|
</div>
|
|
|
</div>
|
|
|
</Modal>
|