Add note scaffold
This commit is contained in:
@@ -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="[&_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 [&:has([role=checkbox])]:pr-0 [&>[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 [&:has([role=checkbox])]:pr-0 [&>[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 [&:has([role=checkbox])]:pr-0 [&>[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 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] w-[100px]">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="[&_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 %}
|
||||
Reference in New Issue
Block a user