chore(front/url-shrinker): convert url-shrinker to svelte

src/assets/views/url-shrinker.njk

@@ -1,75 +0,0 @@
-{% extends 'layouts' %}
-
-{% set title = app.name + ' - Shrink URL' %}
-
-{% block scripts %}
-    <script src="/js/url-shrinker.js"></script>
-{% endblock %}
-
-{% block body %}
-    <h1>Shrink URLs</h1>
-    <p>For security reasons, shrinked URLs cannot be deleted.</p>
-
-    <div class="container">
-        <section class="panel">
-            <h2><i data-feather="crosshair"></i> Shrink a URL</h2>
-
-            <form action="{{ route('shrink-url') }}" method="POST" id="url-shrink-form">
-                {{ macros.field(_locals, 'text', 'target_url', '', 'Target URL', 'Only valid URLs starting with http:// or https://', validation_attributes='required') }}
-
-                {{ macros.field(_locals, 'checkbox', 'autogen_url', '', 'Generate url automatically', null, validation_attributes='checked') }}
-                {{ macros.field(_locals, 'text', 'slug', '', 'Custom url slug', 'Example: bear sets url to https://'+default_domain+'/bear', validation_attributes='disabled') }}
-
-                {{ macros.csrf(getCsrfToken) }}
-
-                <button type="submit"><i data-feather="link"></i> Shrink URL</button>
-            </form>
-
-            {% set url = flash('url') %}
-            {% if url | length %}
-                <div class="copyable-text">
-                    <div class="title">URL</div>
-                    <div class="content">{{ url }}</div>
-                    <button class="copy-button"><i data-feather="copy"></i></button>
-                </div>
-            {% endif %}
-        </section>
-
-
-        <section class="panel">
-            <h2><i data-feather="link"></i> URL list</h2>
-
-            {{ macros.paginate(urls.pagination, 'url-shrinker', 3) }}
-
-            <table class="data-table">
-                <thead>
-                <tr>
-                    <th>#</th>
-                    <th class="table-col-grow">Target</th>
-                    <th>Actions</th>
-                </tr>
-                </thead>
-
-                <tbody>
-                {% for url in urls %}
-                    <tr>
-                        <td>{{ url.id }}</td>
-                        <td class="table-col-grow-cell"><a href="{{ url.getURL() }}"><pre>{{ url.target_url }}</pre></a></td>
-                        <td class="actions">
-                            <div>
-                                <button class="copy-button" data-content="{{ url.getURL() }}"><i data-feather="copy"></i> <span class="tip">Copy URL</span></button>
-                            </div>
-                        </td>
-                    </tr>
-                {% else %}
-                    <tr>
-                        <td colspan="3" class="center">You haven't shrunk any url yet.</td>
-                    </tr>
-                {% endfor %}
-                </tbody>
-            </table>
-
-            {{ macros.paginate(urls.pagination, 'url-shrinker', 3) }}
-        </section>
-    </div>
-{% endblock %}

src/assets/views/url-shrinker.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    import {locals} from "../ts/stores.js";
+    import {route} from "../../common/Routing";
+    import BaseTemplate from "./templates/BaseTemplate.svelte";
+    import Icon from "./utils/Icon.svelte"
+    import Form from "./utils/Form.svelte";
+    import Field from "./utils/Field.svelte";
+    import CopyableText from "./components/CopyableText.svelte";
+    import Pagination from "./components/Pagination.svelte";
+
+    let autogenUrl;
+</script>
+
+<BaseTemplate title="{$locals.app.name} - Shrink URL" description="Make your URLs shorter." noH1>
+    <h1>Shrink URLs</h1>
+
+    <section class="panel">
+        <h2>
+            <Icon name="shrink"/>
+            Shrink a URL
+        </h2>
+        <p>For security reasons, shrinked URLs cannot be deleted.</p>
+
+        <Form action="{route('shrink-url')}" submitText="Shrink URL" submitIcon="shrink">
+            <Field type="text" name="target_url" placeholder="Target URL" icon="link"
+                   hint="Only valid URLs starting with http:// or https://" required/>
+
+            <Field type="checkbox" name="autogen_url" placeholder="Generate url automatically"
+                   icon="zap"
+                   bind:value={autogenUrl} initialValue={true}/>
+            {#if !autogenUrl}
+                <Field type="text" name="slug" placeholder="Custom url slug" icon="link"
+                       hint="Example: beautiful_image.jpg sets url to https://{$locals.default_domain}/beautiful_image.jpg"/>
+            {/if}
+        </Form>
+
+        {#if $locals.flash.url}
+            <CopyableText title="URL" content={$locals.flash.url}/>
+        {/if}
+    </section>
+
+
+    <section class="panel">
+        <h2>
+            <Icon name="link"/>
+            URL list
+        </h2>
+
+        <Pagination pagination={$locals.pagination} routeName="url-shrinker" contextSize={3}/>
+
+        <table class="data-table">
+            <thead>
+            <tr>
+                <th>#</th>
+                <th class="col-grow">Target</th>
+                <th>Actions</th>
+            </tr>
+            </thead>
+
+            <tbody>
+            {#each $locals.urls as url}
+                <tr>
+                    <td>{url.id}</td>
+                    <td class="col-grow-cell">
+                        <a href="{url.url}">
+                            <pre>{url.target_url}</pre>
+                        </a>
+                    </td>
+                    <td class="actions">
+                        <CopyableText content="{url.url}" buttonMode/>
+                    </td>
+                </tr>
+            {:else}
+                <tr>
+                    <td colspan="3" class="center">You haven't shrunk any url yet.</td>
+                </tr>
+            {/each}
+            </tbody>
+        </table>
+
+        <Pagination pagination={$locals.pagination} routeName="url-shrinker" contextSize={3}/>
+    </section>
+</BaseTemplate>

src/controllers/URLRedirectController.ts

@@ -18,10 +18,15 @@ export default class URLRedirectController extends Controller {
     protected async getUrlShrinker(req: Request, res: Response): Promise<void> {
         const user = req.as(RequireAuthMiddleware).getUser();
         const allowedDomains = config.get<string[]>('allowed_url_domains');
+        const urls = await URLRedirect.paginateForUser(req, 25, user.getOrFail('id'));
         res.render('url-shrinker', {
             allowed_domains: allowedDomains,
             default_domain: allowedDomains[config.get<number>('default_url_domain_for_urls')],
-            urls: await URLRedirect.paginateForUser(req, 25, user.getOrFail('id')),
+            urls: urls.map(url => ({
+                ...url,
+                url: url.getURL(),
+            })),
+            pagination: urls.pagination?.serialize(),
         });
     }
 

src/models/URLRedirect.ts

@@ -3,6 +3,7 @@ import {Request} from "express";
 import User from "swaf/auth/models/User";
 import {route} from "swaf/common/Routing";
 import Model from "swaf/db/Model";
+import {ModelQueryResult} from "swaf/db/ModelQuery";
 
 import FileModel from "./FileModel.js";
 
@@ -15,7 +16,11 @@ export default class URLRedirect extends Model {
         return await this.select().where('slug', slug).first();
     }
 
-    public static async paginateForUser(req: Request, perPage: number, user_id: number): Promise<URLRedirect[]> {
+    public static async paginateForUser(
+        req: Request,
+        perPage: number,
+        user_id: number,
+    ): Promise<ModelQueryResult<URLRedirect>> {
         req.params.sortBy = 'created_at';
         req.params.sortDirection = 'DESC';
         return await this.paginate(req, perPage, this.select().where('user_id', user_id));