Campaign Index and Create/Edit form

app/Http/Controllers/CampaignController.php

@@ -7,6 +7,7 @@
 use App\Models\Campaign;
 use App\Models\User;
 use App\Models\Character;
+use App\Models\Adventure;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Inertia\Inertia;
@@ -19,18 +20,30 @@ class CampaignController extends Controller
      */
     public function index(Request $request)
     {
-        $campaigns = Auth::user()->campaigns()->get();
-
-        return view('campaign.index', compact('campaigns'));
+        $characters = Character::where('user_id', Auth::user()->id)->get();
+        $campaigns = Auth::user()
+            ->campaigns()
+            ->get();
+        $campaigns->load('characters')->where('user_id', Auth::user()->id);
+        return Inertia::render('Campaign/Campaign', compact('campaigns', 'characters'));
     }
 
     /**
      * @param \Illuminate\Http\Request $request
-     * @return \Illuminate\Http\Response
+     * @return \Inertia\Response
      */
     public function create(Request $request)
     {
-        return view('campaign.create');
+        $data = $request->validate([
+            'search' => 'sometimes|string',
+        ]);
+        $search = $data['search'] ?? '';
+        $adventures = Adventure::filtered($search)->get(['id', 'title', 'code']);
+        $characters = Character::where('user_id', Auth::user()->id)->get();
+        return Inertia::render(
+            'Campaign/Create/CampaignCreate',
+            compact('characters', 'adventures')
+        );
     }
 
     /**
@@ -40,10 +53,13 @@ public function create(Request $request)
     public function store(CampaignStoreRequest $request)
     {
         $data = $request->validated();
+        // TODO: Look into using prepareForValidation in Request Validator
+        $data['adventure_id'] = $data['adventure']['id'];
+        unset($data['adventure']['id']);
 
         $campaign = Campaign::create($data);
 
-        //user joins capaign
+        //user joins campaign
         $user = Auth::user();
 
         if ($request->has('character_id')) {

app/Http/Requests/CampaignStoreRequest.php

@@ -24,9 +24,9 @@ public function authorize()
     public function rules()
     {
         return [
-            'adventure_id' => ['required', 'integer', 'exists:adventures,id'],
+            'adventure.id' => ['required', 'integer', 'exists:adventures,id'],
             'title' => ['required', 'string'],
-            'character_id' => ['sometimes','exists:characters,id']
+            'character_id' => ['sometimes', 'exists:characters,id'],
         ];
     }
 }

resources/js/Components/Form/CampaignCreateForm.test.js

@@ -0,0 +1,66 @@
+import {fireEvent, render, screen} from '@testing-library/react'
+import {characterData} from 'Mock/character-data'
+import React from 'react'
+
+import CampaignCreateForm from './CampaignCreateForm'
+
+const mockFunction = jest.fn()
+
+const editProps = {
+    type: 'Edit',
+    onCloserDrawer: mockFunction,
+    editData: {
+        title: 'Campaign1',
+        character_id: 1,
+        adventure: 0,
+    },
+    editId: 0,
+    characters: characterData,
+    adventures: [],
+}
+
+const createProps = {
+    type: 'Create',
+    adventures: [
+        {id: 1, title: 'adventure1'},
+        {id: 2, title: 'adventure2'},
+    ],
+    characters: [
+        {id: 1, name: 'John'},
+        {id: 2, name: 'John2'},
+    ],
+}
+
+describe('<CampaignCreateForm />', () => {
+    it('edit component should render and close', () => {
+        const component = render(<CampaignCreateForm {...editProps} />)
+        expect(component).toBeDefined()
+        fireEvent.click(screen.getByText('Cancel'))
+    })
+    it('create component should render', () => {
+        const component = render(<CampaignCreateForm {...createProps} />)
+        expect(component).toBeDefined()
+    })
+    it('create component fields test', () => {
+        render(<CampaignCreateForm {...createProps} />)
+        const adventureInputField = document.querySelector('#adventures')
+        const titleField = document.querySelector('#title')
+        const characterField = document.querySelector('input[name="Assigned Character"]')
+
+        fireEvent.change(adventureInputField, {target: {value: 2}})
+        fireEvent.change(titleField, {target: {value: '123'}})
+        fireEvent.change(characterField, {target: {value: createProps.characters[1]}})
+
+        fireEvent.click(screen.getByText('Create'))
+    })
+    it('edit component fields test', () => {
+        render(<CampaignCreateForm {...editProps} />)
+        const adventureInputField = document.querySelector('#adventures')
+        const titleField = document.querySelector('#title')
+        const characterField = document.querySelector('input[name="Assigned Character"]')
+        fireEvent.change(adventureInputField, {target: {value: 2}})
+        fireEvent.change(titleField, {target: {value: '123'}})
+        fireEvent.change(characterField, {target: {value: createProps.characters[1]}})
+        fireEvent.click(screen.getByText('Save'))
+    })
+})

resources/js/Components/Form/CampaignCreateForm.tsx

@@ -0,0 +1,141 @@
+import {useForm} from '@inertiajs/inertia-react'
+import {Button, Grid, TextField, Typography} from '@mui/material'
+import {Autocomplete, ErrorText, Select} from 'Components'
+import React from 'react'
+import styled from 'styled-components'
+import {adventureType} from 'Types/adventure-data'
+import {CampaignData} from 'Types/campaign-data'
+import {CharacterData} from 'Types/character-data'
+import route from 'ziggy-js'
+
+type CampaignCreateFormPropType = {
+    type: 'Edit' | 'Create'
+    onCloseDrawer?: () => void
+    editData?: CampaignData
+    editId?: number
+    adventures: adventureType[]
+    characters: CharacterData[]
+}
+
+type CampaignFormDataType = {
+    title: string | undefined
+    character_id: number | null
+    adventure: adventureType | undefined
+    [key: string]: any
+}
+
+const StyledGrid = styled(Grid)`
+    margin-bottom: 16px;
+`
+
+const CampaignCreateForm = ({
+    type,
+    onCloseDrawer,
+    editData,
+    editId = 0,
+    adventures,
+    characters,
+}: CampaignCreateFormPropType) => {
+    const CAMPAIGN_CREATE_FORM_INITIAL_VALUE: CampaignFormDataType = {
+        title: '',
+        character_id: null,
+        adventure: undefined,
+    }
+    const CAMPAIGN_INITIAL_VALUE: CampaignFormDataType =
+        type === 'Create'
+            ? CAMPAIGN_CREATE_FORM_INITIAL_VALUE
+            : {
+                  title: editData?.title,
+                  character_id: editData?.character_id || null,
+                  adventure: editData?.adventure || undefined,
+              }
+
+    const {data, setData, errors, put, post} =
+        useForm<CampaignFormDataType>(CAMPAIGN_INITIAL_VALUE)
+
+    return (
+        <>
+            <Grid justifyContent='flex-start' container spacing={2}>
+                <Grid item xs={12}>
+                    <Typography>
+                        Fill out the following fields with your campaign details.
+                    </Typography>
+                </Grid>
+                <StyledGrid item xs={12} md={type === 'Edit' ? 12 : 5}>
+                    <TextField
+                        fullWidth
+                        id='title'
+                        label='Title'
+                        name='Title'
+                        value={data.title}
+                        onChange={(e) => setData('title', e.target.value)}
+                    />
+                    {errors?.title && <ErrorText message={errors?.title} />}
+                </StyledGrid>
+                {type === 'Create' && <StyledGrid item md={2} />}
+                <StyledGrid item xs={12} md={type === 'Edit' ? 12 : 5}>
+                    <Select
+                        id='character_id'
+                        label='Assigned Character'
+                        name='Assigned Character'
+                        value={data.character_id}
+                        onChange={(e) =>
+                            setData('character_id', parseInt(e.target.value))
+                        }
+                        options={characters}
+                    />
+                    {errors?.character_id && <ErrorText message={errors?.character_id} />}
+                </StyledGrid>
+                <StyledGrid item xs={12} md={type === 'Edit' ? 12 : 5}>
+                    <Autocomplete
+                        label='Adventure'
+                        id='adventures'
+                        fieldKey='adventures'
+                        onChange={(_, value) => setData('adventure', value)}
+                        defaultValue={data.adventure}
+                        getOptionLabel={(option) => `${option.code} - ${option.title}`}
+                        options={adventures}
+                        resetUrl={
+                            type === 'Create'
+                                ? route('campaign.create')
+                                : route('campaign.index')
+                        }
+                    />
+                    {errors['adventure.id'] && (
+                        <ErrorText message={errors['adventure.id']} />
+                    )}
+                </StyledGrid>
+            </Grid>
+            <Grid container spacing={4}>
+                <Grid item xs={4}>
+                    <Button onClick={() => onCloseDrawer && onCloseDrawer()} fullWidth>
+                        Cancel
+                    </Button>
+                </Grid>
+                <Grid item xs={4} />
+                <Grid item xs={4}>
+                    <Button
+                        variant='contained'
+                        fullWidth
+                        onClick={() => {
+                            if (type === 'Create') {
+                                post(route('campaign.store'))
+                            }
+                            if (type === 'Edit') {
+                                put(route('campaign.update', [editId]))
+                                if (onCloseDrawer) {
+                                    onCloseDrawer()
+                                }
+                            }
+                        }}>
+                        {type === 'Create' ? 'Create' : 'Save'}
+                    </Button>
+                </Grid>
+                {type === 'Create' && <StyledGrid item md={2} />}
+            </Grid>
+        </>
+    )
+}
+
+CampaignCreateForm.displayName = 'CampaignCreateForm'
+export default CampaignCreateForm

resources/js/Components/Form/index.ts

@@ -1,4 +1,5 @@
 export {default as BulkEntryCreateForm} from './BulkEntryCreateForm'
+export {default as CampaignCreateForm} from './CampaignCreateForm'
 export {default as CharacterCreateForm} from './CharacterCreateForm'
 export {default as CharacterImportForm} from './CharacterImportForm'
 export {default as DmEntryCreateForm} from './DmEntryCreateForm'

resources/js/Components/Table/CampaignTable/CampaignTable.test.js

@@ -0,0 +1,35 @@
+import {fireEvent, render, screen} from '@testing-library/react'
+import {campaignData} from 'Mock/campaign-data'
+import React from 'react'
+
+import CampaignTable from './CampaignTable'
+
+const mockFunction = jest.fn()
+const props = {
+    data: campaignData,
+    setEditData: mockFunction,
+    setEditId: mockFunction,
+    setIsEditDrawerOpen: mockFunction,
+}
+
+describe('CampaignTable', () => {
+    it('Component should render', () => {
+        const component = render(<CampaignTable {...props} />)
+        expect(component).toBeDefined()
+    })
+    it('Pagination handleChangePage should work', () => {
+        render(<CampaignTable {...props} />)
+        fireEvent.click(screen.getByTitle('Go to next page'))
+    })
+    it('Pagination 5 click should work', () => {
+        render(<CampaignTable {...props} />)
+        fireEvent.click(screen.getByLabelText('10'))
+        fireEvent.click(screen.getByDisplayValue('10'))
+    })
+    it('Edit Icon', () => {
+        render(<CampaignTable {...props} />)
+        const editIcon = document.querySelector('[data-testid="EditIcon"]')
+        fireEvent.click(editIcon)
+        expect(mockFunction).toBeCalled()
+    })
+})