feat: nice isLoading view
This commit is contained in:
@@ -1,12 +1,12 @@
|
||||
import { useAppContext } from "@/providers/AuthProvider";
|
||||
import apiClient from "@/services/api";
|
||||
import { cn } from "@/utils/class-merge";
|
||||
import { CalendarDaysIcon, ListBulletIcon, UserIcon } from "@heroicons/react/24/solid";
|
||||
import { FunctionComponent, h } from "preact";
|
||||
import { useLocation } from "preact-iso";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import { tv } from "tailwind-variants";
|
||||
import classes from "./menu.module.scss";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import apiClient from "@/services/api";
|
||||
import { useAppContext } from "@/providers/AuthProvider";
|
||||
|
||||
interface UserProfile {
|
||||
username: string;
|
||||
@@ -72,7 +72,7 @@ const Avatar: FunctionComponent = () => {
|
||||
}
|
||||
}, [isLoggedIn.value]);
|
||||
|
||||
return (
|
||||
return username ? (
|
||||
<button
|
||||
onClick={() => route("/profile/settings")}
|
||||
class={cn("hidden h-32 w-full cursor-pointer overflow-hidden opacity-100 transition-[height,opacity] md:block", {
|
||||
@@ -91,7 +91,7 @@ const Avatar: FunctionComponent = () => {
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
) : null;
|
||||
};
|
||||
|
||||
interface MenuItems {
|
||||
|
||||
@@ -374,223 +374,215 @@ const ProfileCalendar: FunctionComponent = () => {
|
||||
month: { className: calendarStyles.month },
|
||||
year: { className: calendarStyles.year },
|
||||
};
|
||||
if (isLoading)
|
||||
return (
|
||||
<div class="flex h-full w-full flex-1 flex-col items-center justify-center">
|
||||
<div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div class="flex w-full flex-col items-center">
|
||||
{isLoading ? (
|
||||
<div class="flex w-full flex-1 items-center justify-center">
|
||||
<div class="text-2xl">Загрузка...</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<ModalTags
|
||||
refreshTags={fetchTags}
|
||||
isOpen={openModalTags}
|
||||
setIsOpen={setOpenModalTags}
|
||||
tagsList={example_tags}
|
||||
value={tags}
|
||||
onClose={() => {
|
||||
setTags({ first: 0, second: 0, overdue: false });
|
||||
}}
|
||||
onChange={setTags}
|
||||
/>
|
||||
<ModalCalendar
|
||||
isOpen={openModalCalendar}
|
||||
setIsOpen={setOpenModalCalendar}
|
||||
onClose={() => {
|
||||
if (isEdit && !isEditModal) setCalendarDate(null);
|
||||
}}
|
||||
onChange={(e) => isEditModal && setCalendarDate(e.value)}
|
||||
value={calendarDate!}
|
||||
/>
|
||||
<ModalWindow
|
||||
isOpen={openModal}
|
||||
setIsOpen={setIsOpen}
|
||||
onClose={() => {
|
||||
setIsEdit(false);
|
||||
setEditContent(null);
|
||||
setSelectedPriority(4);
|
||||
setIsEditModal(false);
|
||||
setTags({ first: 0, second: 0, overdue: false });
|
||||
setCalendarDate(null);
|
||||
<ModalTags
|
||||
refreshTags={fetchTags}
|
||||
isOpen={openModalTags}
|
||||
setIsOpen={setOpenModalTags}
|
||||
tagsList={example_tags}
|
||||
value={tags}
|
||||
onClose={() => {
|
||||
setTags({ first: 0, second: 0, overdue: false });
|
||||
}}
|
||||
onChange={setTags}
|
||||
/>
|
||||
<ModalCalendar
|
||||
isOpen={openModalCalendar}
|
||||
setIsOpen={setOpenModalCalendar}
|
||||
onClose={() => {
|
||||
if (isEdit && !isEditModal) setCalendarDate(null);
|
||||
}}
|
||||
onChange={(e) => isEditModal && setCalendarDate(e.value)}
|
||||
value={calendarDate!}
|
||||
/>
|
||||
<ModalWindow
|
||||
isOpen={openModal}
|
||||
setIsOpen={setIsOpen}
|
||||
onClose={() => {
|
||||
setIsEdit(false);
|
||||
setEditContent(null);
|
||||
setSelectedPriority(4);
|
||||
setIsEditModal(false);
|
||||
setTags({ first: 0, second: 0, overdue: false });
|
||||
setCalendarDate(null);
|
||||
}}
|
||||
>
|
||||
{isEdit && editContent && (
|
||||
<form
|
||||
class="flex h-full w-full flex-col items-start justify-between"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
if (isEditModal) handleSubmit(saveTask)();
|
||||
else setIsEditModal(!isEditModal);
|
||||
}}
|
||||
>
|
||||
{isEdit && editContent && (
|
||||
<form
|
||||
class="flex h-full w-full flex-col items-start justify-between"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
if (isEditModal) handleSubmit(saveTask)();
|
||||
else setIsEditModal(!isEditModal);
|
||||
<div class="flex w-full flex-row items-start justify-between">
|
||||
<div class="flex flex-1 flex-col gap-1 pe-2">
|
||||
<input
|
||||
class={cn("w-full p-2 text-2xl outline-0", {
|
||||
"rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
|
||||
})}
|
||||
disabled={!isEditModal}
|
||||
placeholder="Название"
|
||||
{...register("name", {
|
||||
required: "Заполните название",
|
||||
maxLength: { value: 20, message: "Максимум 20 символов в названии" },
|
||||
})}
|
||||
/>
|
||||
<textarea
|
||||
class={cn("h-[5rem] w-full resize-none p-2 outline-0", {
|
||||
"rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
|
||||
})}
|
||||
disabled={!isEditModal}
|
||||
placeholder={isEditModal ? "Описание" : ""}
|
||||
{...register("description", {
|
||||
maxLength: { value: 200, message: "Максимум 200 символов в описании" },
|
||||
})}
|
||||
/>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
|
||||
hidden
|
||||
{...register("date")}
|
||||
/>
|
||||
<input type="checkbox" hidden {...register("checked")} />
|
||||
</div>
|
||||
<div class="flex flex-row gap-4">
|
||||
<div
|
||||
className="flex cursor-pointer flex-col items-center gap-3"
|
||||
onClick={() => {
|
||||
if (isEditModal) {
|
||||
handleSubmit(saveTask)();
|
||||
setIsEditModal(!isEditModal);
|
||||
} else setIsEditModal(!isEditModal);
|
||||
}}
|
||||
>
|
||||
{isEditModal ? (
|
||||
<>
|
||||
<InboxArrowDownIcon class="size-6" />
|
||||
<p class="text-[0.7rem]">Сохранить</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PencilIcon class="size-6" />
|
||||
<p class="text-[0.7rem]">Редактировать</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="flex cursor-pointer flex-col items-center gap-3"
|
||||
onClick={() => setShowDeleteDialog(true)}
|
||||
>
|
||||
<TrashIcon class="size-6" />
|
||||
<p class="text-[0.7rem]">Удалить</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{errors.name && <p class="text-red-500">{errors.name.message}</p>}
|
||||
{errors.description && <p class="text-red-500">{errors.description.message}</p>}
|
||||
{errors.date && <p class="text-red-500">{errors.date.message}</p>}
|
||||
{errors.subject && <p class="text-red-500">{errors.subject.message}</p>}
|
||||
<div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
|
||||
<div
|
||||
class={cn("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
|
||||
"cursor-pointer": isEditModal,
|
||||
})}
|
||||
onClick={() => {
|
||||
if (!isEditModal) return;
|
||||
setOpenModalCalendar(true);
|
||||
setCalendarDate(editContent.date);
|
||||
}}
|
||||
>
|
||||
<div class="flex w-full flex-row items-start justify-between">
|
||||
<div class="flex flex-1 flex-col gap-1 pe-2">
|
||||
<input
|
||||
class={cn("w-full p-2 text-2xl outline-0", {
|
||||
"rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
|
||||
})}
|
||||
disabled={!isEditModal}
|
||||
placeholder="Название"
|
||||
{...register("name", {
|
||||
required: "Заполните название",
|
||||
maxLength: { value: 20, message: "Максимум 20 символов в названии" },
|
||||
})}
|
||||
/>
|
||||
<textarea
|
||||
class={cn("h-[5rem] w-full resize-none p-2 outline-0", {
|
||||
"rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
|
||||
})}
|
||||
disabled={!isEditModal}
|
||||
placeholder={isEditModal ? "Описание" : ""}
|
||||
{...register("description", {
|
||||
maxLength: { value: 200, message: "Максимум 200 символов в описании" },
|
||||
})}
|
||||
/>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
|
||||
hidden
|
||||
{...register("date")}
|
||||
/>
|
||||
<input type="checkbox" hidden {...register("checked")} />
|
||||
</div>
|
||||
<div class="flex flex-row gap-4">
|
||||
<div
|
||||
className="flex cursor-pointer flex-col items-center gap-3"
|
||||
onClick={() => {
|
||||
if (isEditModal) {
|
||||
handleSubmit(saveTask)();
|
||||
setIsEditModal(!isEditModal);
|
||||
} else setIsEditModal(!isEditModal);
|
||||
}}
|
||||
>
|
||||
{isEditModal ? (
|
||||
<>
|
||||
<InboxArrowDownIcon class="size-6" />
|
||||
<p class="text-[0.7rem]">Сохранить</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PencilIcon class="size-6" />
|
||||
<p class="text-[0.7rem]">Редактировать</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="flex cursor-pointer flex-col items-center gap-3"
|
||||
onClick={() => setShowDeleteDialog(true)}
|
||||
>
|
||||
<TrashIcon class="size-6" />
|
||||
<p class="text-[0.7rem]">Удалить</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{errors.name && <p class="text-red-500">{errors.name.message}</p>}
|
||||
{errors.description && <p class="text-red-500">{errors.description.message}</p>}
|
||||
{errors.date && <p class="text-red-500">{errors.date.message}</p>}
|
||||
{errors.subject && <p class="text-red-500">{errors.subject.message}</p>}
|
||||
<div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
|
||||
<div
|
||||
class={cn(
|
||||
"flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1",
|
||||
{
|
||||
"cursor-pointer": isEditModal,
|
||||
}
|
||||
)}
|
||||
onClick={() => {
|
||||
if (!isEditModal) return;
|
||||
setOpenModalCalendar(true);
|
||||
setCalendarDate(editContent.date);
|
||||
}}
|
||||
>
|
||||
<CalendarDaysIcon class="size-10" />
|
||||
<p>
|
||||
{Intl.DateTimeFormat("ru-RU", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}).format(calendarDate!)}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class={cn(
|
||||
"flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2",
|
||||
{
|
||||
"cursor-pointer": isEditModal,
|
||||
}
|
||||
)}
|
||||
onClick={() => {
|
||||
if (!isEditModal) return;
|
||||
setTags({ first: editContent.subject.id, second: editContent.taskType.id, overdue: false });
|
||||
setOpenModalTags(true);
|
||||
}}
|
||||
>
|
||||
<p class="flex flex-row gap-2">
|
||||
<BookOpenIcon class="size-5" />
|
||||
{editContent.subject.name}
|
||||
</p>
|
||||
<p class="flex flex-row gap-2">
|
||||
<DocumentDuplicateIcon class="size-5" />
|
||||
{editContent.taskType.name}
|
||||
</p>
|
||||
</div>
|
||||
<Dropdown
|
||||
disabled={!isEditModal}
|
||||
pt={DropdownStyles}
|
||||
options={priorities}
|
||||
value={selectedPriority}
|
||||
onChange={(e) => setSelectedPriority(e.value)}
|
||||
itemTemplate={selectedPriorityTemplate}
|
||||
valueTemplate={selectedPriorityTemplate}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</ModalWindow>
|
||||
<Dialog
|
||||
isOpen={showDeleteDialog}
|
||||
setIsOpen={setShowDeleteDialog}
|
||||
title="Удаление задачи"
|
||||
onConfirm={handleDeleteTask}
|
||||
confirmText="Удалить"
|
||||
cancelText="Отмена"
|
||||
>
|
||||
<p class="mb-6 text-sm sm:text-[1rem]">"Вы уверены, что хотите удалить эту задачу?"</p>
|
||||
</Dialog>
|
||||
<Calendar
|
||||
value={currentDate}
|
||||
onChange={(e) => setCurrentDate(e ? e.value! : new Date())}
|
||||
inline
|
||||
pt={pt}
|
||||
dateTemplate={dateTemplate}
|
||||
className="[&_.p-datepicker]:!border-0 [&_.p-datepicker-calendar]:border-separate [&_.p-datepicker-calendar]:border-spacing-2 [&_td]:rounded-lg [&_td]:border [&_td]:border-[rgba(251,194,199,0.38)]"
|
||||
/>
|
||||
|
||||
<div class="mt-8 w-full px-4">
|
||||
<h2 class="mb-4 text-2xl font-semibold">Задачи на {formatDate(currentDate)}</h2>
|
||||
{selectedTasks.length > 0 ? (
|
||||
<div class="flex flex-col gap-4">
|
||||
{selectedTasks.map((task) => (
|
||||
<Task
|
||||
key={task.id}
|
||||
name={task.name}
|
||||
checked={task.checked}
|
||||
priority={task.priority}
|
||||
overdue={task.date < new Date()}
|
||||
onClick={() => handleViewTask(task.id)}
|
||||
onMarkClick={() => handleTaskCheck(task.id)}
|
||||
/>
|
||||
))}
|
||||
<CalendarDaysIcon class="size-10" />
|
||||
<p>
|
||||
{Intl.DateTimeFormat("ru-RU", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}).format(calendarDate!)}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div class="rounded-lg bg-[rgba(251,194,199,0.2)] p-4 text-center">На этот день задач нет</div>
|
||||
)}
|
||||
<div
|
||||
class={cn("flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2", {
|
||||
"cursor-pointer": isEditModal,
|
||||
})}
|
||||
onClick={() => {
|
||||
if (!isEditModal) return;
|
||||
setTags({ first: editContent.subject.id, second: editContent.taskType.id, overdue: false });
|
||||
setOpenModalTags(true);
|
||||
}}
|
||||
>
|
||||
<p class="flex flex-row gap-2">
|
||||
<BookOpenIcon class="size-5" />
|
||||
{editContent.subject.name}
|
||||
</p>
|
||||
<p class="flex flex-row gap-2">
|
||||
<DocumentDuplicateIcon class="size-5" />
|
||||
{editContent.taskType.name}
|
||||
</p>
|
||||
</div>
|
||||
<Dropdown
|
||||
disabled={!isEditModal}
|
||||
pt={DropdownStyles}
|
||||
options={priorities}
|
||||
value={selectedPriority}
|
||||
onChange={(e) => setSelectedPriority(e.value)}
|
||||
itemTemplate={selectedPriorityTemplate}
|
||||
valueTemplate={selectedPriorityTemplate}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</ModalWindow>
|
||||
<Dialog
|
||||
isOpen={showDeleteDialog}
|
||||
setIsOpen={setShowDeleteDialog}
|
||||
title="Удаление задачи"
|
||||
onConfirm={handleDeleteTask}
|
||||
confirmText="Удалить"
|
||||
cancelText="Отмена"
|
||||
>
|
||||
<p class="mb-6 text-sm sm:text-[1rem]">"Вы уверены, что хотите удалить эту задачу?"</p>
|
||||
</Dialog>
|
||||
<Calendar
|
||||
value={currentDate}
|
||||
onChange={(e) => setCurrentDate(e ? e.value! : new Date())}
|
||||
inline
|
||||
pt={pt}
|
||||
dateTemplate={dateTemplate}
|
||||
className="[&_.p-datepicker]:!border-0 [&_.p-datepicker-calendar]:border-separate [&_.p-datepicker-calendar]:border-spacing-2 [&_td]:rounded-lg [&_td]:border [&_td]:border-[rgba(251,194,199,0.38)]"
|
||||
/>
|
||||
|
||||
<div class="mt-8 w-full px-4">
|
||||
<h2 class="mb-4 text-2xl font-semibold">Задачи на {formatDate(currentDate)}</h2>
|
||||
{selectedTasks.length > 0 ? (
|
||||
<div class="flex flex-col gap-4">
|
||||
{selectedTasks.map((task) => (
|
||||
<Task
|
||||
key={task.id}
|
||||
name={task.name}
|
||||
checked={task.checked}
|
||||
priority={task.priority}
|
||||
overdue={task.date < new Date()}
|
||||
onClick={() => handleViewTask(task.id)}
|
||||
onMarkClick={() => handleTaskCheck(task.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
) : (
|
||||
<div class="rounded-lg bg-[rgba(251,194,199,0.2)] p-4 text-center">На этот день задач нет</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -62,6 +62,12 @@ const ProfileSettings: FunctionComponent = () => {
|
||||
console.error("Logout failed:", error);
|
||||
}
|
||||
};
|
||||
if (!userData.username)
|
||||
return (
|
||||
<div class="flex h-full w-full flex-1 flex-col items-center justify-center">
|
||||
<div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div class={classes.container}>
|
||||
<ModalSettings isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} onClose={fetchUserData} />
|
||||
@@ -100,4 +106,6 @@ const ProfileSettings: FunctionComponent = () => {
|
||||
);
|
||||
};
|
||||
|
||||
ProfileSettings.displayName = "ProfileSettings";
|
||||
|
||||
export default withTitle(UrlsTitle.PROFILE, ProfileSettings);
|
||||
|
||||
@@ -385,26 +385,27 @@ const ProfileTasks: FunctionComponent = () => {
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading)
|
||||
return (
|
||||
<div class="flex h-full w-full flex-1 flex-col items-center justify-center">
|
||||
<div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div class={classes.container}>
|
||||
{isLoading ? (
|
||||
<div class="flex w-full flex-1 items-center justify-center">
|
||||
<div class="text-2xl">Загрузка...</div>
|
||||
</div>
|
||||
) : (
|
||||
<ModalTags
|
||||
refreshTags={fetchTags}
|
||||
zIndex={70}
|
||||
isOpen={openModalTags}
|
||||
setIsOpen={setOpenModalTags}
|
||||
tagsList={example_tags}
|
||||
value={tags}
|
||||
onClose={() => {
|
||||
if (!isCreating) setTags({ first: 0, second: 0, overdue: false });
|
||||
}}
|
||||
onChange={setTags}
|
||||
/>
|
||||
)}
|
||||
<ModalTags
|
||||
refreshTags={fetchTags}
|
||||
zIndex={70}
|
||||
isOpen={openModalTags}
|
||||
setIsOpen={setOpenModalTags}
|
||||
tagsList={example_tags}
|
||||
value={tags}
|
||||
onClose={() => {
|
||||
if (!isCreating) setTags({ first: 0, second: 0, overdue: false });
|
||||
}}
|
||||
onChange={setTags}
|
||||
/>
|
||||
<ModalCalendar
|
||||
zIndex={80}
|
||||
isOpen={openModalCalendar}
|
||||
|
||||
Reference in New Issue
Block a user