Optimalizace zobrazovani seznamu, popup se zktakou po pridani

VERSION

-2.2.2
+2.3.0

lib/PZ/Controller/Shortcut.pm

@@ -72,7 +72,7 @@ sub create ($c) {
 
     $c->render(
         status  => 201,
-        openapi => { id => $shortcut->id },
+        openapi => { $shortcut->get_columns },
     );
 }
 
@@ -103,7 +103,7 @@ sub list ($c) {
     SHORTCUT:
     foreach my $shortcut ( $c->user->shortcuts(
         { deleted  => undef },
-        { order_by => 'shortcut' },
+        { order_by => {-desc => 'created'} },
     ) ) {
         push @shortcuts, $c->spec_filter(
             { $shortcut->get_columns }, 'Shortcut'

openapi.yaml

@@ -27,6 +27,9 @@ components:
           type: integer
           readOnly: true
           maxLength: 8
+        created:
+          type: string
+          description: Datum přidání
         shortcut:
           type: string
           description: Zkratka
@@ -91,6 +94,10 @@ paths:
       responses:
         201:
           description: Shortcut created
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Shortcut'
     get:
       tags:
       - shortcuts

templates/shortcuts.html.ep

@@ -32,6 +32,7 @@
   <thead>
     <tr>
       <th class="text-left">Zkratka</th>
+      <th class="text-left">Přidano</th>
       <th class="text-left">URL</th>
       <th class="text-left">Přesměrování</th>
       <th class="text-left">Kliky</th>
@@ -41,6 +42,7 @@
   <tbody>
   <tr v-for="shortcut in shortcuts" >
     <td class="text-bold w-32" @click="showEdit(shortcut)" >{{shortcut.shortcut}}</td>
+    <td class="text-bold w-32" @click="showEdit(shortcut)" >{{ formatTimestamp(shortcut.created) }}</td>
     <td v-bind:title="shortcut.url" @click="showEdit(shortcut)" >{{ stripURL(shortcut.url) }}</td>
     <td class="w-24" @click="showEdit(shortcut)">{{ shortcut.code == 301 ? '301 trvalé' : '302 dočasné'}}</td>
     <td class="w-16 text-right" @click="showEdit(shortcut)">{{shortcut.counter}}</td>
@@ -144,6 +146,7 @@
 </div>
 
 <script type="module">
+  const MAX_URL_LENGTH = 50;
   const BASE_URL = "/api/shortcuts";
   const API_HEADERS     = {
       "Content-Type": "application/json",
@@ -185,8 +188,11 @@
           })
             .then( response => {
               if ( response.status == 201 ) {
-                this.shortcut = {}
+                this.shortcut = {};
                 app.fetchData();
+                response.json().then(json => {
+                    this.showInfo(json)
+                })
               }
               else {
                 response.json().then(json => {
@@ -238,10 +244,15 @@
         },
 
         stripURL: function(url) {
-            const urlObj = new URL(url);
-            urlObj.search = '';
-            urlObj.hash = '';
-            return urlObj.toString();
+            if ( url.length > MAX_URL_LENGTH ) {
+                url = url.substring(0, MAX_URL_LENGTH) + '...';
+            }
+            return url;
+        },
+
+        formatTimestamp: function(timestamp) {
+            timestamp = new Date(timestamp);
+            return timestamp.toLocaleDateString('cs-CZ');
         },
 
         showDelete: function(shortcut) {
@@ -250,7 +261,6 @@
         },
 
         showInfo: function(shortcut) {
-            this.selectedShortcut = shortcut;
             this.selectedShortcut.full_url = 'https://<%= config->{domain} %>/'+ shortcut.shortcut ;
             this.shortcutInfoVisible = true;
             navigator.clipboard.writeText(this.selectedShortcut.full_url);