views almost done

src/components/view/router.ts

@@ -11,7 +11,19 @@ const model = sentenceModel(db)
 router.get('/sentences', async (req, res) => {
     const { orderBy, order, lastId } = req.query
     const sentences: Sentence[] = await model.list({ orderBy, order, last: lastId })
-    return res.render('list', { sentences })
+    return res.render('list', { sentences, orderBy: orderBy ?? null, order })
+})
+
+router.get('/sentence/create', async (req, res) => {
+    const { text, category } = req.body
+    const id = await model.create({ text, category })
+    return res.redirect('/public/sentence/' + id)
+})
+
+router.get('/sentence/:id/delete', async (req, res) => {
+    const { id } = req.params
+    await model.del(id)
+    return res.redirect('/public/sentences')
 })
 
 router.get('/sentence/:id/update', async (req, res) => {
@@ -21,10 +33,10 @@ router.get('/sentence/:id/update', async (req, res) => {
     return res.render('sentence', { sentence })
 })
 
-router.get('/sentence/:id/delete', async (req, res) => {
+router.get('/sentence/:id/edit', async (req, res) => {
     const { id } = req.params
-    await model.del(id)
+    const sentence: Sentence = await model.getById(id)
-    return res.redirect('/sentences')
+    return res.render('form_sentence', { sentence })
 })
 
 router.get('/sentence/:id', async (req, res) => {
@@ -33,11 +45,7 @@ router.get('/sentence/:id', async (req, res) => {
     return res.render('sentence', { sentence })
 })
 
-router.get('/sentence', async (req, res) => {
+router.get('/sentence', (_req, res) => res.render('form_sentence', { sentence: {} }))
-    const { text, category } = req.body
-    const id = await model.create({ text, category })
-    return res.redirect('/sentence/' + id)
-})
 
 // EJS views
 router.get('/', (_req, res) => res.render('index'))

src/views/list.ejs

@@ -27,9 +27,9 @@
                 <% if (sentences && sentences.length> 0) { %>
                     <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
 
-                        <div class="btn-group mr-2" role="group" aria-label="First group">
+                        <div class="btn-group mx-2" role="group" aria-label="First group">
-                            <a href="/sentences?page=0&orderBy">
+                            <a href="/public/sentences">
-                                <button type="button" class="btn btn-secondary">Unsorted
+                                <button type="button" class="btn btn-secondary">reset
                                 </button>
                             </a>
                         </div>
@@ -40,12 +40,18 @@
                                 Sort categories
                             </button>
                             <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-                                <a class="dropdown-item" href="/sentences">ASC</a>
+                                <a class="dropdown-item" href="/public/sentences?orderBy=category&order=asc">ASC</a>
-                                <a class="dropdown-item" href="#">DESC</a>
+                                <a class="dropdown-item" href="/public/sentences?orderBy=category&order=desc">DESC</a>
                             </div>
                         </div>
 
-                        <a href="/sentences/1"><button type="button" class="btn btn-secondary mr-2">Next</button></a>
+                        <a href=<%= `/public/sentences?lastId=${sentences[sentences.length - 1].id}` + (orderBy ? `&orderBy=${orderBy}&order=${order || 'asc'}` : '')%>> 
+                            <button type="button" class="btn btn-secondary mx-2">Next</button>
+                        </a>
+
+                        <a href="/public/sentence"> 
+                            <button type="button" class="btn btn-secondary mx-2">New sentence</button>
+                        </a>
                     </div>
 
                     <table id="datatable" class="table table-striped mt-5" style="width:100%">
@@ -54,7 +60,6 @@
                                 <th>ID</th>
                                 <th>Text</th>
                                 <th>Category</th>
-                                <th>Actions</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -69,15 +74,6 @@
                                     <td>
                                         <%= sentence.category %>
                                     </td>
-                                    <td>
-                                        <div class="btn-group" role="group" aria-label="First group">
-                                            <a href=<%='/public/sentence/' + sentence.id %>>
-                                                <button type="button" class="btn btn-primary">Edit</button>
-                                            </a>
-                                            <a href=<%='/public/sentence/' + sentence.id + '/delete' %>><button
-                                                    type="button" class="btn btn-primary">Delete</button></a>
-                                        </div>
-                                    </td>
                                 </tr>
                                 <% } %>
                         </tbody>

src/views/sentence.ejs

@@ -18,32 +18,29 @@
 
   <body>
     <div class="d-flex flex-column h-100 flex-grow-1">
-      <h1 class="mt-5 align-self-center flex-grow-1">
+      <h3 class="mt-5 align-self-center flex-grow-1">
-        Sentence <%= sentence.id %>
+        <%= sentence.text %>
-      </h1>
+      </h3>
-      <h1 class="mt-2 align-self-center flex-grow-1">
+      <h3 class="mt-3 align-self-center flex-grow-1">
-        Sentence <%= sentence.text %>
+        <%= sentence.category %>
-      </h1>
+      </h3>
-      <h1 class="mt-2 align-self-center flex-grow-1">
-        Sentence <%= sentence.category %>
-      </h1>
       <div
         class="btn-group mt-5 align-self-center flex-grow-1"
         role="group"
         aria-label="First group"
       >
-        <a href="/sentences?page=0&orderBy"
+        <a href=<%= "/public/sentence/" + sentence.id + '/edit' %> class="mx-2"
           ><button type="button" class="mr-2 btn btn-primary">Edit</button></a
         >
-        <a href="/sentences?page=0&orderBy"
+        <a href=<%= "/public/sentence/" + sentence.id + '/delete' %> class="mx-2"
           ><button type="button" class="btn btn-primary mr-2">Delete</button></a
         >
       </div>
 
-      <a href="/sentences?page=0&orderBy"
+      <a href=<%= "/public/sentences" %> class="mt-5 align-self-center flex-grow-1 mr-2"
         ><button
           type="button"
-          class="btn btn-primary mt-5 align-self-center flex-grow-1 mr-2"
+          class="btn btn-primary "
         >
           Sentences
         </button></a