editSubmission, styling

src/APIcalls.mjs

@@ -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)

src/Components/Dropdown.jsx

@@ -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>
 }

src/loaders.mjs

@@ -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()
@@ -15,3 +15,12 @@ export async function submissionsLoader(){
     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}
+}

src/main.jsx

@@ -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/>,

src/routes/editPublication.jsx

@@ -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>
+            </label>
-        <button type="button">CANCEL</button>
+            <div id="bottom-button-container">
+            <button type="submit">SAVE</button>
+            <button type="button">CANCEL</button>
+            </div>
+        
         </Form>
         
         </>

src/routes/editStory.jsx

@@ -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>
         
         </>

src/routes/editSubmission.jsx

@@ -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>
+        
+        </>
+    )
+
+}

src/routes/story.jsx

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

src/routes/submissions.jsx

@@ -32,9 +32,12 @@ 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(
         <>
         <PageHeader heading="Submissions"/>

src/styles/Form.css

@@ -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;
+}

src/styles/index.css

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