diff --git a/src/components/decks/deck-dialog/deck-dialog.tsx b/src/components/decks/deck-dialog/deck-dialog.tsx index e9b3897..e529f47 100644 --- a/src/components/decks/deck-dialog/deck-dialog.tsx +++ b/src/components/decks/deck-dialog/deck-dialog.tsx @@ -29,6 +29,7 @@ export const DeckDialog = ({ }) const onSubmit = handleSubmit(data => { onConfirm(data) + dialogProps.onOpenChange?.(false) reset() }) const handleCancel = () => { diff --git a/src/components/decks/decks-table.module.scss b/src/components/decks/decks-table.module.scss new file mode 100644 index 0000000..64afbbd --- /dev/null +++ b/src/components/decks/decks-table.module.scss @@ -0,0 +1,5 @@ +.iconsContainer { + display: flex; + gap: 10px; + align-items: center; +} diff --git a/src/components/decks/decks-table.tsx b/src/components/decks/decks-table.tsx index cc14eb6..c29e1ac 100644 --- a/src/components/decks/decks-table.tsx +++ b/src/components/decks/decks-table.tsx @@ -1,6 +1,10 @@ import { Link } from 'react-router-dom' +import s from './decks-table.module.scss' + +import { Edit2Outline, PlayCircleOutline, TrashOutline } from '@/assets' import { + Button, Column, Table, TableBody, @@ -11,7 +15,6 @@ import { } from '@/components' import { Deck } from '@/services/decks' import { formatDate } from '@/utils' - const columns: Column[] = [ { key: 'name', @@ -37,8 +40,14 @@ const columns: Column[] = [ type Props = { decks: Deck[] | undefined + onDeleteClick: (id: string) => void + currentUserId: string + onEditClick: (id: string) => void } -export const DecksTable = ({ decks }: Props) => { +export const DecksTable = ({ decks, onEditClick, onDeleteClick, currentUserId }: Props) => { + const handleEditClick = (id: string) => () => onEditClick(id) + const handleDeleteClick = (id: string) => () => onDeleteClick(id) + return ( @@ -53,7 +62,23 @@ export const DecksTable = ({ decks }: Props) => { {deck.cardsCount} {formatDate(deck.updated)} {deck.author.name} - ... + +
+ + {deck.author.id === currentUserId && ( + <> + + + + )} +
+
))} diff --git a/src/pages/decks-page/decks-page.tsx b/src/pages/decks-page/decks-page.tsx index bc4192e..b4ec4ed 100644 --- a/src/pages/decks-page/decks-page.tsx +++ b/src/pages/decks-page/decks-page.tsx @@ -3,10 +3,18 @@ import { useState } from 'react' import s from './decks-page.module.scss' import { Button, Page, Slider, TextField, Typography } from '@/components' +import { DeckDialog } from '@/components/decks/deck-dialog' import { DecksTable } from '@/components/decks/decks-table' +import { DeleteDeckDialog } from '@/components/decks/delete-deck-dialog' import { Pagination } from '@/components/ui/pagination' import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs' -import { Tab, useGetDecksQuery } from '@/services/decks' +import { + Tab, + useCreateDeckMutation, + useDeleteDeckMutation, + useGetDecksQuery, + useUpdateDeckMutation, +} from '@/services/decks' import { selectDecksCurrentPage, selectDecksCurrentTab, @@ -15,9 +23,15 @@ import { selectDecksSearch, } from '@/services/decks/decks.selectors.ts' import { decksSlice } from '@/services/decks/decks.slice.ts' -import { useAppDispatch, useAppSelector } from '@/services/store.ts' +import { useAppDispatch, useAppSelector } from '@/services/store' export const DecksPage = () => { + const [showCreateModal, setShowCreateModal] = useState(false) + const [deckToDeleteId, setDeckToDeleteId] = useState(null) + const [deckToEditId, setDeckToEditId] = useState(null) + + const showEditModal = !!deckToEditId + const dispatch = useAppDispatch() const currentPage = useAppSelector(selectDecksCurrentPage) const minCards = useAppSelector(selectDecksMinCards) @@ -30,14 +44,19 @@ export const DecksPage = () => { const setSearch = (search: string) => dispatch(decksSlice.actions.setSearch(search)) const setCurrentTab = (tab: Tab) => dispatch(decksSlice.actions.setCurrentTab(tab)) + const resetFilters = () => { + dispatch(decksSlice.actions.resetFilters()) + setRangeValue([0, decks?.maxCardsCount || undefined]) + } + const [rangeValue, setRangeValue] = useState([minCards, maxCards]) const handleSliderCommitted = (value: number[]) => { setMinCards(value[0]) setMaxCards(value[1]) } - - const authorId = currentTab === 'my' ? 'f2be95b9-4d07-4751-a775-bd612fc9553a' : undefined + const currentUserId = 'f2be95b9-4d07-4751-a775-bd612fc9553a' + const authorId = currentTab === 'my' ? currentUserId : undefined const { data: decks } = useGetDecksQuery({ currentPage, @@ -47,14 +66,51 @@ export const DecksPage = () => { authorId, }) + const showConfirmDeleteModal = !!deckToDeleteId + const deckToDeleteName = decks?.items?.find(deck => deck.id === deckToDeleteId)?.name + + const deckToEdit = decks?.items?.find(deck => deck.id === deckToEditId) + + const [createDeck] = useCreateDeckMutation() + const [deleteDeck] = useDeleteDeckMutation() + const [updateDeck] = useUpdateDeckMutation() + const openCreateModal = () => setShowCreateModal(true) + if (!decks) return
loading...
return ( + setDeckToDeleteId(null)} + deckName={deckToDeleteName ?? 'Selected deck'} + onCancel={() => setDeckToDeleteId(null)} + onConfirm={() => { + deleteDeck({ id: deckToDeleteId ?? '' }) + setDeckToDeleteId(null) + }} + /> + setDeckToEditId(null)} + onConfirm={data => { + if (!deckToEditId) return + + updateDeck({ id: deckToEditId, ...data }) + }} + defaultValues={deckToEdit} + key={deckToEditId} + />
Decks - + + setShowCreateModal(false)} + />
@@ -71,9 +127,16 @@ export const DecksPage = () => { min={0} max={decks?.maxCardsCount || 0} /> - +
- + & { id: Deck['id'] } + export type Tab = 'all' | 'my'