@igea/oac_frontend 1.0.13 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igea/oac_frontend",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Frontend service for the OAC project",
   "main": "src/index.js",
   "scripts": {
@@ -20,7 +20,7 @@
   },
   "homepage": "https://github.com/chpigea/oac_frontend#readme",
   "dependencies": {
-    "@igea/oac_jwt_helpers": "1.0.6",
+    "@igea/oac_jwt_helpers": "1.0.10",
     "axios": "1.10.0",
     "cookie-parser": "1.4.7",
     "express": "5.1.0",

package/src/controllers/users.js

@@ -7,14 +7,11 @@ module.exports = function(serviceName) {
      * @route   GET /users/manage: redirect to the users page with list of users
      */
     router.get('/manage', (req, res) => {
+        let user = req.user;
         res.render('users/manage.twig', { 
             root: serviceName, 
             title: 'User Management',
-            users: [
-                { id: 1, name: 'alice',     role: 'admin' },
-                { id: 2, name: 'bob',       role: 'user' },
-                { id: 3, name: 'charlie',   role: 'user' },
-            ]
+            cur_id: user.id || 0
         });
     });
 
@@ -22,7 +19,13 @@ module.exports = function(serviceName) {
      * @route   GET /users/:id: redirect to the user page with user details
      */
     router.get('/:id', (req, res) => {
-
+        let user = req.user;
+        res.render('users/edit.twig', { 
+            root: serviceName, 
+            title: 'User Edit',
+            id: req.params.id,
+            cur_id: user.id || 0
+        });
     });
 
     /**

package/src/locales/en.json

@@ -19,6 +19,11 @@
             "delete": "Delete",
             "new": "New"
         },
+        "edit": {
+            "title": "User",
+            "update": "Update",
+            "new": "New"
+        },
         "profile": {
             "title": "Profile"
         },

package/src/locales/it.json

@@ -19,6 +19,11 @@
             "delete": "Elimina",
             "new": "Nuovo"
         },
+        "edit": {
+            "title": "Utente",
+            "update": "Modifica",
+            "new": "Nuovo"
+        },
         "profile": {
             "title": "Profilo"
         },

package/src/public/js/app/vue-users-manage.js

@@ -10,6 +10,7 @@ document.addEventListener('DOMContentLoaded', () => {
         data() {
             return {
                 root: el.dataset.root,
+                cur_id: parseInt(el.dataset.cur_id) || 0,
                 labels: {
                     role_sudo: el.dataset.role_sudo,
                     role_admin: el.dataset.role_admin,
@@ -48,7 +49,10 @@ document.addEventListener('DOMContentLoaded', () => {
                 this.users = this.users.filter(user => user.id !== userId);
             },
             editUser(userId) {
-                window.location.href = `/${this.root}/users/edit/${userId}`;
+                window.location.href = `/${this.root}/users/${userId}`;
+            },
+            newUser() {
+                window.location.href = `/${this.root}/users/0`;
             }
         }
     });

package/src/views/users/edit.twig

@@ -0,0 +1,27 @@
+{% set showSidebar = true %}
+{% extends "../base.twig" %}
+
+{% block extendHead %}
+    <script src="/{{ root }}/js/app/vue-users-edit.js"></script>
+{% endblock %}
+
+{% block content %}
+
+    <div id="edit-user"
+        data-root="{{ root }}"
+        data-role_sudo="{{ t('users.role.sudo') }}" 
+        data-role_admin="{{ t('users.role.admin') }}" 
+        data-role_editor="{{ t('users.role.editor') }}" 
+        data-role_reader="{{ t('users.role.reader') }}" 
+    >
+        <h2 style="display:flex; justify-content:space-between; align-items:center;">
+            {% if id == 0 %}
+                <span>{{ t('users.edit.title') }}: {{ t('users.edit.new') }}</span>
+            {% else %}
+                <span>{{ t('users.edit.title') }} #{{id}}: {{ t('users.edit.update') }}</span>
+            {% endif %}
+        </h2>
+
+    </div>
+
+{% endblock %}

package/src/views/users/manage.twig

@@ -8,45 +8,51 @@
 
 {% block content %}
 
-    <h2 style="display:flex; justify-content:space-between; align-items:center;">
-        <span>{{ t('users.manage.title') }}</span>
-        <i style="color:gray; cursor:pointer; font-size:24px;"
-            class="fa-solid fa-user-plus" title="{{ t('users.manage.new') }}"></i>
-    </h2>
-    <table id="manage-users" class="table"
+    <div id="manage-users"
         data-root="{{ root }}"
         data-role_sudo="{{ t('users.role.sudo') }}" 
         data-role_admin="{{ t('users.role.admin') }}" 
         data-role_editor="{{ t('users.role.editor') }}" 
         data-role_reader="{{ t('users.role.reader') }}" 
+        data-cur_id="{{ cur_id }}"
     >
-        <thead>
-            <tr>
-                <td>#</td>
-                <td>{{ t('users.manage.name') }}</td>
-                <td>{{ t('users.manage.surname') }}</td>
-                <td>{{ t('users.manage.username') }}</td>
-                <td>{{ t('users.manage.email') }}</td>
-                <td>{{ t('users.manage.role') }}</td>
-                <td></td>
-                <td></td>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="user in users">
-                <td v-text="user.id"></td>
-                <td v-text="user.name"></td>
-                <td v-text="user.surname"></td>
-                <td v-text="user.username"></td>
-                <td v-text="user.email"></td>
-                <td v-text="roleByCode(user.role)"></td>
-                <td @click="editUser(user.id)"><i style="cursor:pointer; color:blue" 
-                    class="fa-solid fa-pen-to-square" title="{{ t('users.manage.edit') }}"></i>
-                </td>
-                <td @click="deleteUser(user.id)"><i style="cursor:pointer; color:red" 
-                    class="fa-solid fa-trash-can" title="{{ t('users.manage.delete') }}"></i>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+        <h2 style="display:flex; justify-content:space-between; align-items:center;">
+            <span>{{ t('users.manage.title') }}</span>
+            <i @click="newUser()" style="color:gray; cursor:pointer; font-size:24px;"
+                class="fa-solid fa-user-plus" title="{{ t('users.manage.new') }}"></i>
+        </h2>
+        <table class="table">
+            <thead>
+                <tr>
+                    <td>#</td>
+                    <td>{{ t('users.manage.name') }}</td>
+                    <td>{{ t('users.manage.surname') }}</td>
+                    <td>{{ t('users.manage.username') }}</td>
+                    <td>{{ t('users.manage.email') }}</td>
+                    <td>{{ t('users.manage.role') }}</td>
+                    <td></td>
+                    <td></td>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="user in users">
+                    <td v-text="user.id"></td>
+                    <td v-text="user.name"></td>
+                    <td v-text="user.surname"></td>
+                    <td v-text="user.username"></td>
+                    <td v-text="user.email"></td>
+                    <td v-text="roleByCode(user.role)"></td>
+                    <td @click="editUser(user.id)"><i style="cursor:pointer; color:blue" 
+                        class="fa-solid fa-pen-to-square" title="{{ t('users.manage.edit') }}"></i>
+                    </td>
+                    <td v-if="cur_id != user.id" @click="deleteUser(user.id)">
+                        <i style="cursor:pointer; color:red" 
+                            class="fa-solid fa-trash-can" title="{{ t('users.manage.delete') }}">
+                        </i>
+                    </td>
+                    <td v-else></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 {% endblock %}