feat: add spells

src/app/App.tsx

@@ -9,11 +9,13 @@ import { useTechniqueStore } from '@/shared/store/TechniqueStore';
 import { useArenaStore } from '@/shared/store/ArenaStore';
 import { useEnemyStore } from '@/shared/store/EnemyStore';
 import { useTeamStore } from "@/shared/store/TeamStore";
+import { useSpellStore } from "@/shared/store/SpellStore";
 
 const App: FC = () => {
   const { getRaceList } = useRaceStore()
   const { getClassList } = useClassStore()
   const { getTechniqueList } = useTechniqueStore()
+  const { getSpellList } = useSpellStore()
   const { getArenaList } = useArenaStore()
   const { getEnemyList } = useEnemyStore()
   const { getTeamList } = useTeamStore()
@@ -22,6 +24,7 @@ const App: FC = () => {
     getRaceList()
     getClassList()
     getTechniqueList()
+    getSpellList()
     getArenaList()
     getEnemyList()
     getTeamList()

src/app/router/RouterPaths.ts

@@ -7,6 +7,7 @@ const pathBase = {
   map: '/map',
   event: '/event',
   branch: '/branch',
+  spell: '/spell',
 }
 
 export const pathRoutes = {
@@ -26,6 +27,12 @@ export const pathRoutes = {
     create: `${ pathBase.technique }/create`,
     application: `${ pathBase.technique }/application`,
   },
+  spell: {
+    base: `${ pathBase.spell }`,
+    edit: `${ pathBase.spell }/edit`,
+    create: `${ pathBase.spell }/create`,
+    application: `${ pathBase.spell }/application`,
+  },
   enemy: {
     base: `${ pathBase.enemy }`,
     edit: `${ pathBase.enemy }/edit`,

src/app/router/Routers.ts

@@ -30,6 +30,9 @@ import EnemyTeamForm from "@/widgets/Enemy/EnemyTeamForm";
 import TeamForm from "@/widgets/Team/TeamForm";
 import { Roles } from "@/shared/enums";
 import BranchCreate from "@/pages/branch/BranchCreate";
+import SpellList from "@/pages/spell/SpellList";
+import SpellCreate from "@/pages/spell/SpellCreate";
+import SpellEdit from "@/pages/spell/SpellEdit";
 
 
 export const Routers = [
@@ -91,6 +94,26 @@ export const Routers = [
     Roles: [Roles.Admin],
   },
 
+  // Spell
+  {
+    path: pathRoutes.spell.base,
+    Component: SpellList,
+    Layout: Default,
+    Roles: [Roles.Admin],
+  },
+  {
+    path: pathRoutes.spell.create,
+    Component: SpellCreate,
+    Layout: Default,
+    Roles: [Roles.Admin],
+  },
+  {
+    path: `${ pathRoutes.spell.edit }/:id`,
+    Component: SpellEdit,
+    Layout: Default,
+    Roles: [Roles.Admin],
+  },
+
   // Enemy
   {
     path: pathRoutes.enemy.base,

src/pages/home/Home.tsx

@@ -9,17 +9,23 @@ const Home: FC = () => {
       <h3 className='mb_30'>Админка</h3>
 
       <div className="block_column align-start">
-        <Link to={ pathRoutes.arena.base } className='td_underline tab_active text_title'>Арена</Link>
-        <Link to={ pathRoutes.technique.base } className='td_underline tab_active text_title'>Техники</Link>
-        <Link to={ pathRoutes.hero.base } className='td_underline tab_active text_title'>Игроки</Link>
-        <Link to={ pathRoutes.enemy.base } className='td_underline tab_active text_title'>Противники</Link>
-        <Link to={ pathRoutes.item.base } className='td_underline tab_active text_title'>Предметы</Link>
-        <Link to={ pathRoutes.event.base } className='td_underline tab_active text_title'>События</Link>
+        <Link to={ pathRoutes.arena.base } className='tab_active text_title'>Арена ☠️</Link>
+        <Link to={ pathRoutes.enemy.base } className='tab_active text_title'>Противники ☠️</Link>
+        <Link to={ pathRoutes.hero.base } className='tab_active text_title'>Игроки 👤</Link>
+        <br/>
+
+        <Link to={ pathRoutes.technique.base } className='tab_active text_title'>Техники ⚔️</Link>
+        <Link to={ pathRoutes.branch.base } className='tab_active text_title'>Ветки техник ⚔️</Link>
+        <Link to={ pathRoutes.spell.base } className='tab_active text_title'>Заклинания 🔮</Link>
+        <br/>
 
+        <Link to={ pathRoutes.item.base } className='tab_active text_title'>Предметы</Link>
+        <Link to={ pathRoutes.event.base } className='tab_active text_title'>События</Link>
         <br/>
+
         <p className='text_title'>(Ниже в разработке)</p>
-        <Link to={ pathRoutes.map.base } className='td_underline tab_active text_title'>Карта</Link>
-        <Link to={ pathRoutes.branch.base } className='td_underline tab_active text_title'>Ветка навыков</Link>
+        <Link to={ pathRoutes.map.base } className='tab_active text_title'>Карта</Link>
+        <Link to={ pathRoutes.branch.base } className='tab_active text_title'>Ветки заклинаний 🔮</Link>
       </div>
     </div>
   );

src/pages/spell/SpellCreate.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import SpellForm from "@/widgets/Spell/SpellForm";
+
+const SpellCreate: FC = () => {
+  return (
+    <div className='main__block block_column p_40 w_100p'>
+      <h3 className='mb_30'>Конструктор заклинаний</h3>
+
+      <div className="block_row gap_20 w_100p technique__wrap">
+        <SpellForm/>
+      </div>
+    </div>
+  );
+};
+
+export default SpellCreate;

src/pages/spell/SpellEdit.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { useParams } from "react-router-dom";
+import SpellForm from "@/widgets/Spell/SpellForm";
+
+const SpellEdit: FC = () => {
+  const { id } = useParams()
+
+  return (
+    <div className='main__block block_column p_40 w_100p'>
+      <h3 className='mb_30'>Редактирование заклинания</h3>
+
+      <div className="block_row gap_20 w_100p technique__wrap">
+        <SpellForm id={ id ? Number(id) : undefined }/>
+      </div>
+    </div>
+  );
+};
+
+export default SpellEdit;

src/pages/spell/SpellList.tsx

@@ -0,0 +1,63 @@
+import React, { FC, useEffect, useState } from 'react';
+import { SpellType } from "@/shared/types/spell";
+import Table from "@/shared/ui/Table/Table";
+import { SpellColumn } from "@/widgets/Spell/Spell.column";
+import { Link } from "react-router-dom";
+import { pathRoutes } from "@/app";
+import { MenuItem, Select } from "@mui/material";
+import { useSpellFilter } from "@/shared/store/Spell";
+import { useSpellStore } from "@/shared/store/SpellStore";
+import { ElementDamage } from "@/widgets";
+
+const SpellList: FC = () => {
+  const [filterList, setFilterList] = useState<SpellType[] | []>([])
+
+  const { spellList } = useSpellStore()
+  const { filter, setFilter } = useSpellFilter()
+
+  useEffect(() => {
+    if (filter.type_damage) {
+      setFilterList(spellList.filter((spell) => spell.type_damage === filter.type_damage))
+    } else if (filter.name) {
+      setFilterList(spellList.filter((spell) => {
+        return spell.name.toLowerCase().includes(filter.name?.toLowerCase() || '')
+      }))
+    } else {
+      setFilterList(spellList)
+    }
+  }, [filter, spellList]);
+
+  return (
+    <div className='main__block block_column p_40 w_100p'>
+      <h3 className='mb_30'>Список заклинаний</h3>
+
+      <div className='block_row w_100p'>
+        <div className="block_column align-start w_100p">
+          <label>Раса</label>
+          <input className='w_100p' type='text' placeholder='Поиск по названию..'
+                 onChange={ (e) => setFilter({ ...filter, name: e.target.value }) }/>
+        </div>
+
+        <div className="block_column align-start w_100p">
+          <label>Стихия</label>
+          <Select className='w_100p' value={ filter.type_damage } onChange={ (e) => setFilter({ ...filter, type_damage: e.target.value }) }>
+            <MenuItem value=''>Любая стихия</MenuItem>
+            { ElementDamage.map(({ value, label, disabled }) => {
+              if (!disabled) return <MenuItem value={ value } key={ value } disabled={ disabled }>{ label }</MenuItem>
+            }) }
+          </Select>
+        </div>
+      </div>
+
+      <Table rows={ filterList } columns={ SpellColumn } style={ { isHeader: true } }/>
+
+      <div className="block_row justify-end w_100p mt_10">
+        <Link to={ pathRoutes.spell.create }>
+          <button className='button'>Создать</button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default SpellList;

src/pages/spell/index.ts

@@ -0,0 +1,3 @@
+export * from './SpellCreate'
+export * from './SpellEdit'
+export * from './SpellList'

src/shared/api/index.ts

@@ -0,0 +1,11 @@
+export * from './arena'
+export * from './axios'
+export * from './class'
+export * from './enemy'
+export * from './event'
+export * from './hero'
+export * from './item'
+export * from './race'
+export * from './spell'
+export * from './team'
+export * from './technique'

src/shared/api/spell.ts

@@ -0,0 +1,129 @@
+import { AxiosResponse } from "axios";
+import axiosInstance from "@/shared/api/axios";
+import { SpellBranchType, SpellEffectType, SpellType } from "@/shared/types/spell";
+
+type allSpellQueryType = {
+  hidden?: boolean,
+  race_id?: number
+  class_id?: number,
+  hero_id?: number,
+}
+
+export const fetchAllSpell = async ({ race_id, class_id, hidden, hero_id }: allSpellQueryType) => {
+  const response: AxiosResponse<SpellType[]> = await axiosInstance.get(
+    `/spell`,
+    {
+      params: { race_id, class_id, hidden, hero_id }
+    }
+  )
+
+  return response
+}
+
+export const fetchOneSpell = async (spell_id: number) => {
+  const response: AxiosResponse<SpellType> = await axiosInstance.get(
+    `/spell/${ spell_id }`,
+  )
+
+  return response
+}
+
+export const createSpell = async (spell: SpellType) => {
+  const response: AxiosResponse<SpellType> = await axiosInstance.post(
+    `/spell`,
+    { ...spell },
+  )
+
+  return response
+}
+
+export const updateSpell = async (spell: SpellType, spell_id: number) => {
+  const response: AxiosResponse<SpellType> = await axiosInstance.put(
+    `/spell/${ spell_id }`,
+    { ...spell },
+  )
+
+  return response
+}
+
+
+// Effects
+export const fetchAllSpellEffect = async (spell_id: number) => {
+  const response: AxiosResponse<SpellType[]> = await axiosInstance.get(
+    `/spell/${ spell_id }/effect`,
+  )
+
+  return response
+}
+
+export const createSpellEffect = async (effect: SpellEffectType, spell_id: number) => {
+  const response: AxiosResponse<SpellType> = await axiosInstance.post(
+    `/spell/${ spell_id }/effect`,
+    { ...effect },
+  )
+
+  return response
+}
+
+export const updateSpellEffect = async (effect: SpellEffectType, effect_id: number, spell_id: number) => {
+  const response: AxiosResponse<SpellType> = await axiosInstance.put(
+    `/spell/${ spell_id }/effect/${ effect_id }`,
+    { ...effect },
+  )
+
+  return response
+}
+
+
+export const deleteSpellEffect = async (effect_id: number, spell_id: number) => {
+  const response: AxiosResponse<SpellType[]> = await axiosInstance.delete(
+    `/spell/${ spell_id }/effect/${ effect_id }`,
+  )
+
+  return response
+}
+
+
+// Branch
+export const fetchAllBranchSpell = async () => {
+  const response: AxiosResponse<SpellBranchType[]> = await axiosInstance.get(
+    `/spell/branch/`,
+  )
+
+  return response
+}
+
+export const fetchOneBranchSpell = async (branch_id: number) => {
+  const response: AxiosResponse<SpellBranchType> = await axiosInstance.get(
+    `/spell/branch/${ branch_id }`,
+  )
+
+  return response
+}
+
+export const createBranchSpell = async (data: SpellBranchType) => {
+  const response: AxiosResponse<SpellBranchType> = await axiosInstance.post(
+    `/spell/branch`,
+    { ...data },
+  )
+
+  return response
+}
+
+export const updateBranchSpell = async (data: SpellBranchType, branch_id: number) => {
+  const response: AxiosResponse<SpellBranchType> = await axiosInstance.put(
+    `/spell/branch/${ branch_id }`,
+    { ...data },
+  )
+
+  return response
+}
+
+
+export const deleteBranchSpell = async (branch_id: number) => {
+  const response: AxiosResponse = await axiosInstance.delete(
+    `/spell/branch/${ branch_id }`,
+  )
+
+  return response
+}

src/shared/store/Spell/BranchStore.ts

@@ -0,0 +1,18 @@
+import { SpellBranchType } from "@/shared/types";
+import { create } from "zustand";
+import { fetchAllBranchSpell } from "@/shared/api/spell";
+
+interface SpellBranchState {
+  spellBranchList: SpellBranchType[]
+  getSpellBranchList: () => Promise<void>
+  clearSpellBranchList: () => void
+}
+
+export const useSpellBranchStore = create<SpellBranchState>((set, get) => ({
+  spellBranchList: [],
+  getSpellBranchList: async () => {
+    const res = await fetchAllBranchSpell()
+    if (res.data) set({ spellBranchList: res.data })
+  },
+  clearSpellBranchList: () => set({ spellBranchList: [] }),
+}))