wes
/
inventory-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move Sidebar logic to main

Browse Source
main
Wes Holland 12 months ago
parent 5977cbae77
commit bef1ebdae7
7 changed files with 187 additions and 192 deletions
Show Stats Download Patch File Download Diff File

5
.idea/.gitignore vendored
Unescape View File

@ -6,3 +6,8 @@
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml
/dataSources.xml
/inspectionProfiles/
/sqldialects.xml
/codeStyles/
/prettier.xml

15
.idea/dataSources.xml
Unescape View File

@ -1,15 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="DataSourceManagerImpl" format="xml" multifile-model="true">
<data-source source="LOCAL" name="inventory-app.db" uuid="a0dc3bc5-119e-4708-b51f-2c3820c30deb">
<driver-ref>sqlite.xerial</driver-ref>
<synchronize>true</synchronize>
<jdbc-driver>org.sqlite.JDBC</jdbc-driver>
<jdbc-url>jdbc:sqlite:inventory-app.db</jdbc-url>
<working-dir>$ProjectFileDir$</working-dir>
<driver-properties>
<property name="foreign_keys" value="true" />
</driver-properties>
</data-source>
</component>
</project>

20
.idea/inspectionProfiles/Project_Default.xml
Unescape View File

@ -1,20 +0,0 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myValues">
<value>
<list size="3">
<item index="0" class="java.lang.String" itemvalue="x-show" />
<item index="1" class="java.lang.String" itemvalue="x-model" />
<item index="2" class="java.lang.String" itemvalue="x-data" />
</list>
</value>
</option>
<option name="myCustomValuesEnabled" value="true" />
</inspection_tool>
<inspection_tool class="RsUnusedImport" enabled="true" level="WARNING" enabled_by_default="true">
<option name="enableOnlyIfProcMacrosEnabled" value="false" />
</inspection_tool>
</profile>
</component>

7
.idea/sqldialects.xml
Unescape View File

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="SqlDialectMappings">
<file url="file://$PROJECT_DIR$/migrations/20241107225934_initial.sql" dialect="SQLite" />
<file url="PROJECT" dialect="SQLite" />
</component>
</project>

145
templates/catalog/catalog.html
Unescape View File

@ -3,92 +3,77 @@
{% block content %}
<div class="relative h-auto" x-data="{ show_sidebar: false }"
x-on:form-submit-success="show_sidebar = false;"
>
<div class="absolute w-screen h-full" x-show="show_sidebar">
<div class="relative w-full h-full bg-neutral-300 backdrop-blur-md opacity-90 py-4 z-10">
</div>
<div class="py-2 px-4 absolute rounded-tl-xl inset-y-0 right-0 bg-slate-100 opacity-100 w-11/12 max-w-[40rem] z-20">
<div class="flex">
<div class="flex-1 inline-flex items-center">
<h2 class="text-lg font-semibold uppercase">Add Item</h2>
</div>
<button
class="inline-flex items-center whitespace-nowrap p-2 text-sm font-medium tracking-wide text-neutral-900 transition focus:outline-none focus:ring-4 focus:ring-dark-cyan dark:border-neutral-900 dark:text-slate-100"
@click="show_sidebar = ! show_sidebar"
<div class="relative h-auto mx-auto max-w-[68.75rem] w-[95vw] px-4 py-4">
<div class="flex space-x-4">
<div class="relative mb-4 max-w-56 content-center">
<label
for="item-filter"
class="sr-only mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Search
</label>
<div
class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3"
>
<svg
class="h-4 w-4 text-gray-500 dark:text-gray-400"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 20 20"
>
<span class="sr-only">Close Sidebar</span>
X
</button>
</div>
<div>
<div
hx-get="/item/create"
hx-trigger="load"
hx-swap="outerHTML"
></div>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
/>
</svg>
</div>
<input
id="item-filter"
class="block w-full rounded-lg border border-gray-300 bg-slate-100 p-4 ps-10 text-sm text-neutral-900 focus:border-paynes-gray focus:ring-paynes-gray dark:bg-neutral-900 dark:text-slate-100"
type="search"
name="q"
placeholder="Filter"
aria-label="Filter"
value='{{ query.search.as_deref().unwrap_or("") }}'
hx-get="/items"
hx-trigger="search, keyup delay:500ms changed"
hx-target="#items"
hx-push-url="true"
/>
</div>
</div>
<div class="relative h-auto mx-auto max-w-[68.75rem] w-[95vw] px-4 py-4">
<div class="flex space-x-4">
<div class="relative mb-4 max-w-56 content-center">
<label
for="item-filter"
class="sr-only mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Search
</label>
<div
class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3"
>
<svg
class="h-4 w-4 text-gray-500 dark:text-gray-400"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 20 20"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
/>
</svg>
</div>
<input
id="item-filter"
class="block w-full rounded-lg border border-gray-300 bg-slate-100 p-4 ps-10 text-sm text-neutral-900 focus:border-paynes-gray focus:ring-paynes-gray dark:bg-neutral-900 dark:text-slate-100"
type="search"
name="q"
placeholder="Filter"
aria-label="Filter"
value='{{ query.search.as_deref().unwrap_or("") }}'
hx-get="/items"
hx-trigger="search, keyup delay:500ms changed"
hx-target="#items"
hx-push-url="true"
/>
</div>
<div class="flex items-center">
<button
class="mb-2 me-2 rounded-lg bg-paynes-gray px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
@click="show_sidebar = ! show_sidebar"
>
Add
</button>
</div>
</div>
<div id="items" class="container">
{% include "catalog-item-table.html" %}
<div class="flex items-center">
<button
class="mb-2 me-2 rounded-lg bg-paynes-gray px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
@click="showSidebar('item-create-form')"
>
Add
</button>
</div>
</div>
<div id="items" class="container">
{% include "catalog-item-table.html" %}
</div>
</div>
{% endblock %}
{% block sidebar_title %}
<h2 class="text-lg font-semibold uppercase" x-show="sidebar.content === 'item-create-form'">Add Item</h2>
{% endblock %}
{% block sidebar_content %}
<div x-show="sidebar.content === 'item-create-form'"
x-on:form-submit-success="hideSidebar()"
>
<div
hx-get="/item/create"
hx-trigger="load"
hx-swap="outerHTML"
></div>
</div>
{% endblock %}

66
templates/item/item.html
Unescape View File

@ -4,44 +4,6 @@
{% block content %}
<div class="relative h-auto"
x-data="{ show_sidebar: false, sidebar_content: 'negative-adjustment-form' }"
x-on:form-submit-success="show_sidebar = false;"
>
<div class="absolute w-screen h-lvh" x-show="show_sidebar">
<div class="relative w-full h-full bg-neutral-300 backdrop-blur-md opacity-90 py-4 z-10">
</div>
<div class="py-2 px-4 absolute rounded-tl-xl inset-y-0 right-0 bg-slate-100 opacity-100 w-11/12 max-w-[40rem] z-20">
<div class="flex">
<div class="flex-1 inline-flex items-center">
<h2 class="text-lg font-semibold uppercase" x-show="sidebar_content === 'negative-adjustment-form'">Negative Adjustment</h2>
<h2 class="text-lg font-semibold uppercase" x-show="sidebar_content === 'positive-adjustment-form'">Positive Adjustment</h2>
</div>
<button
class="inline-flex items-center whitespace-nowrap p-2 text-sm font-medium tracking-wide text-neutral-900 transition focus:outline-none focus:ring-4 focus:ring-dark-cyan dark:border-neutral-900 dark:text-slate-100"
@click="show_sidebar = ! show_sidebar"
>
<span class="sr-only">Close Sidebar</span>
X
</button>
</div>
<div x-show="sidebar_content === 'positive-adjustment-form'">
<div
hx-get="/item/{{item_id}}/adjustment/positive"
hx-trigger="load"
hx-swap="outerHTML"
></div>
</div>
<div x-show="sidebar_content === 'negative-adjustment-form'">
<div
hx-get="/item/{{item_id}}/adjustment/negative"
hx-trigger="load"
hx-swap="outerHTML"
></div>
</div>
</div>
</div>
<div class="relative h-auto mx-auto max-w-[68.75rem] w-[95vw] px-4 py-4">
<h2 class="mb-4 flex items-center text-4xl font-extrabold">
@ -65,13 +27,13 @@
<div class="flex justify-evenly">
<button
class="mb-2 me-2 rounded-lg bg-paynes-gray px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
@click="sidebar_content = 'negative-adjustment-form'; show_sidebar = true"
@click="showSidebar('negative-adjustment-form')"
>
Minus
</button>
<button
class="mb-2 me-2 rounded-lg bg-paynes-gray px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
@click="sidebar_content = 'positive-adjustment-form'; show_sidebar = true"
@click="showSidebar('positive-adjustment-form')"
>
Plus
</button>
@ -90,3 +52,27 @@
</div>
{% endblock %}
{% block sidebar_title %}
<h2 class="text-lg font-semibold uppercase" x-show="sidebar.content === 'negative-adjustment-form'">Negative Adjustment</h2>
<h2 class="text-lg font-semibold uppercase" x-show="sidebar.content === 'positive-adjustment-form'">Positive Adjustment</h2>
{% endblock %}
{% block sidebar_content %}
<div x-on:form-submit-success="hideSidebar()">
<div x-show="sidebar.content === 'positive-adjustment-form'">
<div
hx-get="/item/{{item_id}}/adjustment/positive"
hx-trigger="load"
hx-swap="outerHTML"
></div>
</div>
<div x-show="sidebar.content === 'negative-adjustment-form'">
<div
hx-get="/item/{{item_id}}/adjustment/negative"
hx-trigger="load"
hx-swap="outerHTML"
></div>
</div>
</div>
{% endblock %}

121
templates/main.html
Unescape View File

@ -66,7 +66,98 @@
</header>
<main class="bg-slate-100 text-neutral-900 dark:bg-neutral-900 dark:text-slate-100">
<!-- Toasts -->
<div
x-data="toastsHandler()"
class="absolute flex flex-col justify-start h-full w-screen z-40 py-4"
@notice.window="add($event.detail)"
style="pointer-events:none">
<template x-for="notice of notices" :key="notice.id">
<div
x-show="visible.includes(notice)"
x-transition:enter="transition ease-in duration-200"
x-transition:enter-start="transform opacity-0 -translate-y-2"
x-transition:enter-end="transform opacity-100"
x-transition:leave="transition ease-out duration-500"
x-transition:leave-start="transform translate-y-0 opacity-100"
x-transition:leave-end="transform -translate-y-full opacity-0"
@click="remove(notice.id)"
class="rounded mb-4 mx-auto w-56 p-1 flex items-center justify-center text-white shadow-lg font-bold text-sm cursor-pointer"
:class="{
'bg-green-500': notice.type === 'info',
'bg-cerise': notice.type === 'error'
}"
style="pointer-events:all"
x-text="notice.text">
</div>
</template>
</div>
<!-- Main -->
<div x-data="sidebarHandler()">
<!-- Sidebar -->
<div class="relative h-auto">
<div class="absolute inset-x-0 h-lvh bg-neutral-300 opacity-90 z-10"
x-show="sidebar.show"
x-transition:enter="transition ease-in duration-200"
x-transition:enter-start="transform opacity-0"
x-transition:enter-end="transform opacity-90"
x-transition:leave="transition ease-out duration-500"
x-transition:leave-start="transform opacity-90"
x-transition:leave-end="transform opacity-0"
></div>
<div class="py-2 px-4 absolute rounded-tl-xl inset-y-0 right-0 bg-slate-100 opacity-100 w-11/12 h-lvh max-w-[40rem] z-20"
x-show="sidebar.show"
x-transition:enter="transition ease-in duration-200"
x-transition:enter-start="transform translate-x-full opacity-0"
x-transition:enter-end="transform translate-x-0 opacity-100"
x-transition:leave="transition ease-out duration-500"
x-transition:leave-start="transform translate-x-0 opacity-100"
x-transition:leave-end="transform translate-x-full opacity-0"
>
<div class="flex">
<div class="flex-1 inline-flex items-center">
{% block sidebar_title %}
<h2 class="text-lg font-semibold uppercase">None</h2>
{% endblock %}
</div>
<button
class="inline-flex items-center whitespace-nowrap p-2 text-sm font-medium tracking-wide text-neutral-900 transition focus:outline-none focus:ring-4 focus:ring-dark-cyan dark:border-neutral-900 dark:text-slate-100"
@click="hideSidebar()"
>
<span class="sr-only">Close Sidebar</span>
X
</button>
</div>
{% block sidebar_content %}
<p>None</p>
{% endblock %}
</div>
<!-- Content -->
{% block content %}
<p>Content Missing</p>
{% endblock %}
</div>
<script>
function sidebarHandler() {
return {
sidebar: {
show: false,
content: 'none',
},
showSidebar(content) {
this.sidebar.show = true;
this.sidebar.content = content;
},
hideSidebar() {
this.sidebar.show = false;
}
}
}
function toastsHandler() {
return {
notices: [],
@ -93,36 +184,6 @@
}
}
</script>
<div
x-data="toastsHandler()"
class="absolute flex flex-col justify-start h-full w-screen z-40 py-4"
@notice.window="add($event.detail)"
style="pointer-events:none">
<template x-for="notice of notices" :key="notice.id">
<div
x-show="visible.includes(notice)"
x-transition:enter="transition ease-in duration-200"
x-transition:enter-start="transform opacity-0 -translate-y-2"
x-transition:enter-end="transform opacity-100"
x-transition:leave="transition ease-out duration-500"
x-transition:leave-start="transform translate-y-0 opacity-100"
x-transition:leave-end="transform -translate-y-full opacity-0"
@click="remove(notice.id)"
class="rounded mb-4 mx-auto w-56 p-1 flex items-center justify-center text-white shadow-lg font-bold text-sm cursor-pointer"
:class="{
'bg-green-500': notice.type === 'info',
'bg-cerise': notice.type === 'error'
}"
style="pointer-events:all"
x-text="notice.text">
</div>
</template>
</div>
{% block content %}
<p>Content Missing</p>
{% endblock %}
</main>
<footer>
</footer>

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.