Make screen slugs editable

src/data/screens.js

@@ -7,12 +7,18 @@ function slugify(value) {
     .replace(/-{2,}/g, '-');
 }
 
-async function uniqueScreenSlug(pool, baseSlug) {
+async function uniqueScreenSlug(pool, baseSlug, excludeId) {
   const start = baseSlug || `screen-${Date.now()}`;
   let candidate = start;
   let counter = 2;
   while (true) {
-    const [rows] = await pool.query('SELECT id FROM screens WHERE slug = ?', [candidate]);
+    const params = [candidate];
+    let sql = 'SELECT id FROM screens WHERE slug = ?';
+    if (excludeId !== undefined && excludeId !== null) {
+      sql += ' AND id <> ?';
+      params.push(excludeId);
+    }
+    const [rows] = await pool.query(sql, params);
     if (!rows.length) {
       return candidate;
     }

src/webui.js

@@ -1457,8 +1457,9 @@ async function start() {
       if (!name) {
         return res.status(400).send('Screen name is required.');
       }
+      const slugInput = String(req.body.slug || '').trim();
       const playlistId = req.body.playlist_id ? Number(req.body.playlist_id) : null;
-      const slug = await common.uniqueScreenSlug(pool, common.slugify(name));
+      const slug = await common.uniqueScreenSlug(pool, common.slugify(slugInput || name));
       const actorId = getAuditUserId(req);
       await pool.query('INSERT INTO screens (name, slug, playlist_id, created_by, modified_by) VALUES (?, ?, ?, ?, ?)', [name, slug, playlistId, actorId, actorId]);
       res.redirect('/admin/screens?message=' + encodeURIComponent('Screen created.'));
@@ -1477,8 +1478,10 @@ async function start() {
       if (!screen) {
         return res.status(404).send('Screen not found');
       }
+      const slugInput = String(req.body.slug || '').trim();
       const playlistId = req.body.playlist_id ? Number(req.body.playlist_id) : null;
-      await pool.query('UPDATE screens SET name = ?, playlist_id = ?, modified_by = ? WHERE id = ?', [name, playlistId, getAuditUserId(req), screen.id]);
+      const slug = await common.uniqueScreenSlug(pool, common.slugify(slugInput || name), screen.id);
+      await pool.query('UPDATE screens SET name = ?, slug = ?, playlist_id = ?, modified_by = ? WHERE id = ?', [name, slug, playlistId, getAuditUserId(req), screen.id]);
       res.redirect('/admin/screens?edit=' + screen.id + '&message=' + encodeURIComponent('Screen updated.'));
     } catch (error) {
       next(error);

src/webui/public/js/slide-form.js

@@ -538,6 +538,7 @@
       }
 
       showToast(savedMessage || 'Saved slide.');
+      window.location.href = response.url || slideForm.action;
     } finally {
       submitting = false;
     }

src/webui/views/screens/add.hbs

@@ -7,10 +7,13 @@
 </div>
 
 <div class="card">
-  <form method="post" action="/admin/screens" data-async-save>
+  <form method="post" action="/admin/screens" data-async-save data-async-save-reload>
     <label>Name
       <input name="name" placeholder="Front desk TV" required />
     </label>
+    <label>Slug
+      <input name="slug" placeholder="front-desk-tv" />
+    </label>
     <label>Playlist
       <select name="playlist_id">
         <option value="">-- not assigned --</option>

src/webui/views/screens/edit.hbs

@@ -8,10 +8,13 @@
 
 <div class="card">
   <h3>Edit screen</h3>
-  <form id="screen-edit-form" class="screen-edit-form" method="post" action="/admin/screens/{{screen.id}}" data-async-save>
+  <form id="screen-edit-form" class="screen-edit-form" method="post" action="/admin/screens/{{screen.id}}" data-async-save data-async-save-reload>
     <label>Name
       <input name="name" value="{{screen.name}}" required />
     </label>
+    <label>Slug
+      <input name="slug" value="{{screen.slug}}" />
+    </label>
     <label>Playlist
       <select name="playlist_id">
         <option value="">-- not assigned --</option>