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>

51
templates/catalog/catalog.html
Unescape View File

@ -3,36 +3,7 @@
{% 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"
>
<span class="sr-only">Close Sidebar</span>
X
</button>
</div>
<div>
<div
hx-get="/item/create"
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">
<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
@ -77,7 +48,7 @@
<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"
@click="showSidebar('item-create-form')"
>
Add
</button>
@ -87,8 +58,22 @@
<div id="items" class="container">
{% include "catalog-item-table.html" %}
</div>
</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 %}

115
templates/main.html
Unescape View File

@ -66,33 +66,7 @@
</header>
<main class="bg-slate-100 text-neutral-900 dark:bg-neutral-900 dark:text-slate-100">
<script>
function toastsHandler() {
return {
notices: [],
visible: [],
add(notice) {
notice.id = Date.now()
this.notices.push(notice)
this.fire(notice.id)
},
fire(id) {
this.visible.push(this.notices.find(notice => notice.id == id))
const timeShown = 2000 * this.visible.length
setTimeout(() => {
this.remove(id)
}, timeShown)
},
remove(id) {
const notice = this.visible.find(notice => notice.id == id)
const index = this.visible.indexOf(notice)
this.visible.splice(index, 1)
const index2 = this.notices.indexOf(notice)
this.notices.splice(index2, 1)
}
}
}
</script>
<!-- Toasts -->
<div
x-data="toastsHandler()"
class="absolute flex flex-col justify-start h-full w-screen z-40 py-4"
@ -119,10 +93,97 @@
</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: [],
visible: [],
add(notice) {
notice.id = Date.now()
this.notices.push(notice)
this.fire(notice.id)
},
fire(id) {
this.visible.push(this.notices.find(notice => notice.id == id))
const timeShown = 2000 * this.visible.length
setTimeout(() => {
this.remove(id)
}, timeShown)
},
remove(id) {
const notice = this.visible.find(notice => notice.id == id)
const index = this.visible.indexOf(notice)
this.visible.splice(index, 1)
const index2 = this.notices.indexOf(notice)
this.notices.splice(index2, 1)
}
}
}
</script>
</main>
<footer>
</footer>

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.