andrzej
/
sub-manager-frontend
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

editSubmission, styling

This commit is contained in:
Andrzej Stepien 2023-09-12 11:38:45 +02:00
parent ca851e5347
commit eadc0ce9e6
11 changed files with 240 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/APIcalls.mjs
View File

@ -31,6 +31,14 @@ export const getPublications = async () => {
console.error(error)
}
}
export const getResponses = async () => {
try {
const res = await API.get("responses")
return res
} catch (error) {
console.error(error)
}
}
export const requestEdit = async (data,type) => {
try {
const res = await API.post(`/${type}/edit`,data)

7
src/Components/Dropdown.jsx
View File

@ -1,12 +1,11 @@
export default (props) => {
console.log('options')
console.dir(props.options)
const optionsRendered = props.options?.map((e,i)=>{
return <option key={i} value={e}>{e}</option>
return <option key={i} value={e[0]}>{e[1]}</option>
})
return <select name={props.name} value={props.value} onChange={props.handleChange}>
return <select name={props.name} value={props.value} onChange={props?.handleChange}>
{optionsRendered}
</select>
}

13
src/loaders.mjs
View File

@ -1,4 +1,4 @@
import {getStories,getPublications,getSubmissions} from './APIcalls.mjs'
import {getStories,getPublications,getSubmissions, getResponses} from './APIcalls.mjs'
export async function publicationsLoader (){
let publications = await getPublications()
@ -14,4 +14,13 @@ export async function submissionsLoader(){
let submissions = await getSubmissions()
submissions=submissions.data
return { submissions }
}
}
export async function editSubmissionLoader(){
const {stories} = await storiesLoader()
const {publications} = await publicationsLoader()
const {submissions} = await submissionsLoader()
let responses = await getResponses()
responses = responses.data
return { stories, publications, submissions, responses}
}

11
src/main.jsx
View File

@ -7,13 +7,14 @@ import Story from './routes/story';
import Stories from './routes/stories';
import Publication from './routes/publication';
import Publications from './routes/publications';
import { storiesLoader,publicationsLoader,submissionsLoader } from './loaders.mjs';
import { storiesLoader,publicationsLoader,submissionsLoader, editSubmissionLoader } from './loaders.mjs';
import EditStory, {action as editStoryAction } from './routes/editStory';
import EditPublication, {action as editPublicationAction} from './routes/editPublication';
import CreateStory, {action as createStoryAction} from './routes/createStory';
import CreatePublication, {action as createPublicationAction} from './routes/createPublication';
import { action as deleteStoryAction } from './routes/deleteStory';
import { action as deletePublicationAction } from './routes/deletePublication';
import EditSubmission, {action as editSubmissionAction} from './routes/editSubmission';
import './styles/index.css'
import {
createBrowserRouter,
@ -29,6 +30,7 @@ const router = createBrowserRouter([
{
path: "/stories",
element: <Stories/>,
id:"stories",
loader: storiesLoader
},
{
@ -38,6 +40,7 @@ const router = createBrowserRouter([
},
{
path: "/publications",
id:"publications",
element: <Publications/>,
loader: publicationsLoader
},
@ -63,6 +66,12 @@ const router = createBrowserRouter([
loader: publicationsLoader,
action: editPublicationAction
},
{
path:"/submission/:submissionId/edit",
element: <EditSubmission/>,
loader: editSubmissionLoader,
action: editSubmissionAction
},
{
path:"/story/create",
element: <CreateStory/>,

11
src/routes/editPublication.jsx
View File

@ -23,6 +23,7 @@ export default function EditPublication(){
<>
<PageHeader super={`Publication #${publicationData.id}`} heading="EDIT"/>
<Form method="post" id="publication-form">
<label>Title:
<input
placeholder='title'
aria-label="Title"
@ -30,6 +31,8 @@ export default function EditPublication(){
name="title"
defaultValue={publicationData.title}
/>
</label>
<label> Website:
<input
placeholder='1000'
aria-label="Website:"
@ -38,8 +41,12 @@ export default function EditPublication(){
name="link"
defaultValue={publicationData.link}
/>
<button type="submit">SAVE</button>
<button type="button">CANCEL</button>
</label>
<div id="bottom-button-container">
<button type="submit">SAVE</button>
<button type="button">CANCEL</button>
</div>
</Form>
</>

7
src/routes/editStory.jsx
View File

@ -23,6 +23,7 @@ export default function EditStory(){
<>
<PageHeader super={`Story #${storyData.id}`} heading="EDIT"/>
<Form method="post" id="story-form">
<label> Title:
<input
placeholder='title'
aria-label="Title"
@ -30,6 +31,8 @@ export default function EditStory(){
name="title"
defaultValue={storyData.title}
/>
</label>
<label> Wordcount:
<input
placeholder='1000'
aria-label="Wordcount"
@ -38,8 +41,12 @@ export default function EditStory(){
name="word_count"
defaultValue={storyData.word_count}
/>
</label>
<div id="bottom-button-container">
<button type="submit">SAVE</button>
<button type="button">CANCEL</button>
</div>
</Form>
</>

75
src/routes/editSubmission.jsx Normal file
View File

@ -0,0 +1,75 @@
import { Form, useLoaderData, useParams, redirect } from "react-router-dom";
import PageHeader from "../Components/PageHeader";
import { requestEdit } from "../APIcalls.mjs";
import Dropdown from "../Components/Dropdown";
import { useEffect,useState } from "react";
export async function action({request,params}){
const formData = await request.formData()
const data = Object.fromEntries(formData)
data.id=parseInt(params.submissionId)
console.dir(data)
await requestEdit(data,'submission')
return redirect(`/submissions`)
}
export default function EditSubmission(){
const { submissionId } = useParams()
const { submissions, stories, publications, responses } = useLoaderData()
const submissionData = submissions.find(row=>row.id==submissionId)
const [data,setData] = useState({
story_id:submissionData.story_id,
pub_id:submissionData.pub_id,
date_submitted:submissionData.date_submitted,
date_responded:submissionData.date_responded,
response_id:submissionData.response_id
})
const storiesOptions = stories?.map(row=>[row.id,row.title])
const publicationsOptions = publications?.map(row=>[row.id,row.title])
const responsesOptions = responses?.map(row=>[row.id,row.response])
const handleChange = (event) => {
const value = event.target.value
setData({
...data,
[event.target.name]: value
})
}
return(
<>
<PageHeader super={`Submission #${submissionData.id}`} heading="EDIT"/>
<Form method="post" id="submission-form">
<label> Story:
<Dropdown name="story_id" value={data.story_id} options={storiesOptions} handleChange={handleChange}/>
</label>
<label> Publication:
<Dropdown name="pub_id" value={data.pub_id} options={publicationsOptions} handleChange={handleChange}/>
</label>
<label> Date submitted:
<input name="date_submitted" type="date" value={data.date_submitted} onChange={handleChange}/>
</label>
<label> Date responded:
<input name="date_responded" type="date" value={data.date_responded} onChange={handleChange}/>
</label>
<label> Status:
<Dropdown name="response_id" value={data.response_id} options={responsesOptions} handleChange={handleChange}/>
</label>
<div id="bottom-button-container">
<button type="submit">SAVE</button>
<button type="button">CANCEL</button>
</div>
</Form>
</>
)
}

81
src/routes/story.jsx
View File

@ -1,45 +1,48 @@
import { useLoaderData, useParams, Link,Form } from "react-router-dom";
import { useLoaderData, useParams, Link, Form } from "react-router-dom";
import Table from "../Components/Table";
import PageHeader from "../Components/PageHeader";
import { submissionsTableOptions } from "./submissions.jsx";
import { useState, useEffect } from "react";
const { filterList=[...filterList],highlights,clickables } = submissionsTableOptions
export default function Story(){
const { storyId } = useParams()
const { stories } = useLoaderData()
const storyData = stories.find(row=>row.id==storyId)
return(
<>
<div id="page">
<PageHeader super={'Story#'+storyId} heading={storyData.title}/>
<div>Wordcount: {storyData.word_count}</div>
<Table
data={storyData.submissions}
filterList={[...filterList,'story']}
highlights={highlights}
clickables={clickables}
sortByDefault='date_submitted'
header='Submissions:'
></Table>
<Link to={`/story/${storyData.id}/edit`}>EDIT</Link>
<Form
method="post"
action="delete"
onSubmit={(event) => {
if (
!confirm(
"Please confirm you want to delete this record."
)
) {
event.preventDefault();
}
}}
>
<button type="submit">Delete</button>
</Form>
</div>
</>
)
const { filterList = [...filterList], highlights, clickables } = submissionsTableOptions
export default function Story() {
const { storyId } = useParams()
const { stories } = useLoaderData()
const storyData = stories.find(row => row.id == storyId)
return (
<>
<div id="page">
<PageHeader super={'Story#' + storyId} heading={storyData.title} />
<div>Wordcount: {storyData.word_count}</div>
<Table
data={storyData.submissions}
filterList={[...filterList, 'story']}
highlights={highlights}
clickables={clickables}
sortByDefault='date_submitted'
header='Submissions:'
></Table>
<Form
method="post"
action="delete"
onSubmit={(event) => {
if (
!confirm(
"Please confirm you want to delete this record."
)
) {
event.preventDefault();
}
}}
>
<button type="submit">Delete</button>
</Form>
<Form>
<Link to={`/story/${storyData.id}/edit`}>EDIT</Link>
</Form>
</div>
</>
)
}

5
src/routes/submissions.jsx
View File

@ -32,8 +32,11 @@ export function Submissions(){
const clickables = [
['story',(row)=>{
return `../../story/${row.story_id}`}],
['publication',(row)=>{return `../../publication/${row.pub_id}`}]
['publication',(row)=>{return `../../publication/${row.pub_id}`}],
['id',(row)=>{return `../../submission/${row.id}/edit`}]
]
return(
<>

70
src/styles/Form.css Normal file
View File

@ -0,0 +1,70 @@
form{
--bg-color: hsl(var(--color-2),var(--lightest));
--fg-color: hsl(var(--color-3),var(--off-white));
font-size: 2rem;
background-color: var(--bg-color);
box-shadow: var(--box-shadow);
border-radius: 2rem;
padding:2rem;
width:max-content;
margin:auto;
}
fieldset{
width: fit-content;
padding:8px;
}
label{
border-radius: 1rem;
padding:1rem;
width:100%;
display:flex;
gap:3rem;
justify-content:space-between;
align-items: center;
font-weight: bold;
}
fieldset > label{
justify-content: flex-start;
font-weight: normal;
}
legend{
font-weight: bold;
}
input,select {
max-width: 30rem;
float:right;
font-size: 2rem;
padding:1rem;
border-radius: 1rem;
margin:1rem;
margin-left:2rem;
background-color: var(--fg-color);
box-shadow: var(--box-shadow-light);
}
form button, form a{
float:right;
font-size: 3.2rem;
padding: 1rem;
border-radius: 2rem;
box-shadow: var(--box-shadow);
margin:1rem;
margin-top: 4rem;
background-color: hsl(var(--color-3),var(--light));
}
form button:hover{
background-color: hsl(var(--color-3),var(--lightest));
}
#bottom-button-container{
width:fit-content;
margin:auto;
}
input[type=date]{
font-family: inherit;
}
input[type=text]{
width:fit-content;
}

1
src/styles/index.css
View File

@ -1,5 +1,6 @@
@import 'Table.css';
@import 'Variables.css';
@import 'Form.css';
*,
*::before,
*::after {