Add note scaffold

2026-07-26 14:45:55 +03:00
parent e376ed950b
commit d640ce35b6
20 changed files with 604 additions and 8 deletions
@@ -0,0 +1,108 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{% block title %}{% endblock title %}</title>
+
+  <script src="https://unpkg.com/htmx.org@2.0.0/dist/htmx.min.js"></script>
+  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
+  {% block head %}
+
+  {% endblock head %}
+</head>
+
+<body class="min-h-screen bg-background font-sans antialiased">
+    <div class="relative flex min-h-screen flex-col bg-background">
+        <div class="themes-wrapper bg-background">
+            <main>
+                <div class="flex flex-1 flex-col gap-4 p-5 pt-5">
+                    <h1 class="scroll-m-20 text-3xl font-bold tracking-tight">
+                        {% block page_title %}{% endblock page_title %}
+                    </h1>
+                    {% block content %}
+                    {% endblock content %}
+                </div>
+            </main>
+        </div>
+    </div>
+  {% block js %}
+
+  {% endblock js %}
+
+  <script>
+  htmx.defineExtension('submitjson', {
+        onEvent: function (name, evt) {
+            if (name === "htmx:configRequest") {
+                evt.detail.headers['Content-Type'] = "application/json"
+            }
+        },
+        encodeParameters: function (xhr, parameters, elt) {
+                const json = {};
+                for (const [key, inputValue] of Object.entries(parameters)) {
+                    let origInputType = elt.querySelector(`[name=${key}]`).type;
+                    const customType = elt.querySelector(`[name=${key}]`).getAttribute("custom_type");
+
+                    let value = inputValue;
+                    if (customType == "array" && !Array.isArray(inputValue)) {
+                        value = [inputValue]
+                    }
+
+                    if (origInputType === 'number') {
+                        if (Array.isArray(value)) {
+                            json[key] = Object.values(value).map(str => parseFloat(str))
+                        } else {
+                            json[key] = parseFloat(value)
+                        }
+                    } else if (origInputType === 'checkbox') {
+                        const val = elt.querySelector(`[name=${key}]`).checked;
+                        json[key] = val
+                    } else if (customType === 'blob') {
+                        json[key] = value.split(",").map(num => parseInt(num, 10));
+                    } else {
+                        json[key] = value;
+                    }
+                }
+                return JSON.stringify(json);
+            }
+  })
+  function confirmDelete(event, delete_url, redirect_to) {
+        event.preventDefault();
+        if (confirm("Are you sure you want to delete this item?")) {
+            var xhr = new XMLHttpRequest();
+            xhr.open("DELETE", delete_url, true);
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    window.location.href = redirect_to;
+                }
+            };
+            xhr.send();
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+            document.querySelectorAll('.add-more').forEach(button => {
+                button.addEventListener('click', function () {
+                    const group = this.getAttribute('data-group');
+                    const first = document.getElementById(`${group}-inputs`).querySelector('input');
+                    if (first) {
+                        const clonedInput = first.cloneNode();
+                        clonedInput.value = '';
+                        const container = document.getElementById(`${group}-inputs`);
+                        container.appendChild(clonedInput);
+                    } 
+                });
+            });
+    });
+
+    document.body.addEventListener('htmx:responseError', function (event) {
+        const target = document.querySelector('#error-message');
+        const errorResponse = event.detail.xhr.response;
+        target.innerHTML = errorResponse
+    });
+  </script>
+</body>
+
+</html>
@@ -0,0 +1,37 @@
+{% extends "base.html" %}
+
+{% block title %}
+Create note
+{% endblock title %}
+
+{% block page_title %}
+Create new note
+{% endblock page_title %}
+
+{% block content %}
+<div class="mb-10">
+    <div id="error-message" class="mt-4 text-sm text-red-600"></div>
+    <form hx-post="/notes" hx-ext="submitjson" class="flex-1 lg:max-w-2xl">
+        <div class="space-y-2">
+    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":r2l:-form-item">user_id</label>
+    <input class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm md:text-sm" min="-2147483648" max="2147483647" id="user_id" name="user_id" type="number" value=""  step="1" />
+</div>
+        <div class="space-y-2">
+    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":r2l:-form-item">title</label>
+    <input class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm md:text-sm" id="title" name="title" type="text" value=""  />
+</div>
+        <div class="space-y-2">
+    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":r2l:-form-item">content</label>
+    <input class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm md:text-sm" id="content" name="content" type="text" value=""  />
+</div>
+        <div class="mt-5">
+            <button class=" text-xs py-3 px-6 rounded-lg bg-gray-900 text-white" type="submit">Submit</button>
+        </div>
+
+    </form>
+</div>
+{% endblock content %}
+
+{% block js %}
+
+{% endblock js %}
@@ -0,0 +1,43 @@
+{% extends "base.html" %}
+
+{% block title %}
+Edit note: {{ item.id }}
+{% endblock title %}
+
+{% block page_title %}
+Edit note: {{ item.id }}
+{% endblock page_title %}
+
+{% block content %}
+<div class="mb-10">
+    <div id="error-message" class="mt-4 text-sm text-red-600"></div>
+    <form hx-put="/notes/{{ item.id }}" hx-ext="submitjson" hx-target="#success-message" class="flex-1 lg:max-w-2xl">
+        <div class="space-y-2">
+    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":r2l:-form-item">user_id</label>
+    <input class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm md:text-sm" min="-2147483648" max="2147483647" id="user_id" name="user_id" type="number" value="{{item.user_id}}"  step="1" />
+</div>
+        <div class="space-y-2">
+    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":r2l:-form-item">title</label>
+    <input class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm md:text-sm" id="title" name="title" type="text" value="{{item.title}}"  />
+</div>
+        <div class="space-y-2">
+    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":r2l:-form-item">content</label>
+    <input class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm md:text-sm" id="content" name="content" type="text" value="{{item.content}}"  />
+</div>
+        <div>
+            <div class="mt-5">
+                <button class=" text-xs py-3 px-6 rounded-lg bg-gray-900 text-white" type="submit">Submit</button>
+                <button class="text-xs py-3 px-6 rounded-lg bg-red-600 text-white"
+                            onclick="confirmDelete(event, '/notes/{{ item.id }}', '/notes' )">Delete</button>
+            </div>
+        </div>
+    </form>
+    <div id="success-message" class="mt-4"></div>
+    <br />
+    <a href="/notes">Back to note</a>
+</div>
+{% endblock content %}
+
+{% block js %}
+
+{% endblock js %}
@@ -0,0 +1,86 @@
+{% extends "base.html" %}
+
+{% block title %}
+List of note
+{% endblock title %}
+
+{% block page_title %}
+note
+{% endblock page_title %}
+
+{% block content %}
+<div class="mb-10">
+
+    {% if items %}
+
+    <div class="mb-5">
+        <div class="relative w-full overflow-auto">
+            <table class="w-full caption-bottom text-sm">
+                <thead class="[&amp;_tr]:border-b">
+                    <tr class="border-b transition-colors hover:bg-muted/50">
+                        <th class="h-10 px-2 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 [&amp;>[role=checkbox]]:translate-y-[2px] w-[100px]">
+                            {{"user_id" | capitalize }}
+                        </th>
+                        <th class="h-10 px-2 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 [&amp;>[role=checkbox]]:translate-y-[2px] w-[100px]">
+                            {{"title" | capitalize }}
+                        </th>
+                        <th class="h-10 px-2 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 [&amp;>[role=checkbox]]:translate-y-[2px] w-[100px]">
+                            {{"content" | capitalize }}
+                        </th>
+                        <th class="h-10 px-2 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 [&amp;>[role=checkbox]]:translate-y-[2px] w-[100px]">
+                           Actions
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="[&amp;_tr:last-child]:border-0">
+                   {% for item in items %}
+                    <tr class="border-b transition-colors hover:bg-muted/50">
+                        <td
+                            class="p-2 align-middle  font-medium">
+                            {{item.user_id | escape }}
+                        </td>
+                        <td
+                            class="p-2 align-middle  font-medium">
+                            {{item.title | escape }}
+                        </td>
+                        <td
+                            class="p-2 align-middle  font-medium">
+                            {{item.content | escape }}
+                        </td>
+                        <td>
+                            <a href="/notes/{{ item.id }}/edit">Edit</a>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    
+        <div class="flex">
+            <div class="ml-auto  p-4">
+                <a href="/notes/new"
+                    class="mt-5 bg-blue-500 text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+                    Create
+                </a>
+            </div>
+        </div>
+    </div>
+
+    {% else %}
+
+    <div class="mt-10 flex items-center justify-center">
+        <div class="bg-white rounded-lg shadow-lg p-8 max-w-4xl w-full flex flex-col items-center">
+            <h3 class="font-bold text-lg">Nothing Here Yet</h3>
+            There are no records to display. Add a new record to get started!
+            <a href="/notes/new"
+            class="mt-5 bg-blue-500 text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+            Create
+        </a>
+        </div>
+    </div>
+   
+    {% endif %}
+
+    
+</div>
+{% endblock content %}
@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+
+{% block title %}
+View note: {{ item.id }}
+{% endblock title %}
+
+{% block page_title %}
+View note: {{ item.id }}
+{% endblock page_title %}
+
+
+{% block content %}
+<div class="mb-10">
+    <div>
+    <label><b>{{"user_id" | capitalize }}:</b> {{item.user_id}}</label>
+    </div>
+<div>
+    <label><b>{{"title" | capitalize }}:</b> {{item.title}}</label>
+    </div>
+<div>
+    <label><b>{{"content" | capitalize }}:</b> {{item.content}}</label>
+    </div>
+<br />
+<a href="/notes">Back to notes</a>
+</div>
+{% endblock content %}