WIP: Implement admin CRUD
This commit is contained in:
Björn Fromme
@@ -7,7 +7,7 @@
|
||||
<div class="flex justify-between border-b border-gray-200 pb-2 mb-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
{{ icon('alert', 'w-8 h-8') }}
|
||||
<span class="text-lg font-medium" {{ stimulus_target('confirmation-modal', 'title') }}></span>
|
||||
<span class="text-xl font-bold" {{ stimulus_target('confirmation-modal', 'title') }}></span>
|
||||
</div>
|
||||
<button class="inline-block" {{ stimulus_action('confirmation-modal', 'hide') }}>
|
||||
{{ icon('close', 'w-8 h-8') }}
|
||||
@@ -15,7 +15,7 @@
|
||||
</div>
|
||||
<form method="post" {{ stimulus_target('confirmation-modal', 'form') }}>
|
||||
<div {{ stimulus_target('confirmation-modal', 'content') }}></div>
|
||||
<div class="mt-6 flex items-center space-x-8">
|
||||
<div class="mt-6 flex items-center justify-between">
|
||||
<button type="submit" class="btn">
|
||||
Ja
|
||||
</button>
|
||||
|
||||
@@ -1,27 +1,83 @@
|
||||
{% extends 'knp_menu.html.twig' %}
|
||||
|
||||
{% block list %}
|
||||
{% if item.hasChildren and options.depth is not same as(0) and item.displayChildren %}
|
||||
{% if item.level == 0 %}
|
||||
<div class="min-h-full flex grow flex-col gap-y-5 overflow-y-scroll lg:border-r border-gray-200 bg-white md:pr-6">
|
||||
<nav class="flex flex-1 flex-col">
|
||||
<ul role="list" class="space-y-1">
|
||||
{{ block('children') }}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{% else %}
|
||||
<ul class="{{ html_classes('mt-1 px-2', { 'hidden': not matcher.isCurrent(item) }) }}" {{ stimulus_target('sidebar-menu', 'submenu') }}>
|
||||
{{ block('children') }}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block item %}
|
||||
{% if item.displayed %}
|
||||
<li>
|
||||
{%- if item.hasChildren and item.displayChildren %}
|
||||
<div {{ stimulus_controller('sidebar-menu', {'expanded': matcher.isAncestor(item)}, {'closed': 'hidden', 'iconClosed': 'text-gray-400', 'iconExpanded': 'text-gray-500'}) }}>
|
||||
{%- endif %}
|
||||
{%- if item.uri is not empty %}
|
||||
{{ block('linkElement') }}
|
||||
{%- else %}
|
||||
{{ block('spanElement') }}
|
||||
{%- endif %}
|
||||
{{ block('list') }}
|
||||
{%- if item.hasChildren and item.displayChildren %}
|
||||
</div>
|
||||
{%- endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block linkElement %}
|
||||
{% import _self as knp_menu %}
|
||||
<a href="{{ item.uri }}"
|
||||
class="{{ html_classes('', {
|
||||
'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold text-gray-700 hover:bg-gray-50': item.level == 1,
|
||||
'block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700 hover:bg-gray-50': item.level > 1,
|
||||
'bg-gray-50': matcher.isCurrent(item) or matcher.isAncestor(item)
|
||||
}) }}"
|
||||
{{ knp_menu.attributes(item.linkAttributes) }}>
|
||||
{{ block('label') }}
|
||||
</a>
|
||||
{% endblock %}
|
||||
|
||||
{% block spanElement %}
|
||||
{% import _self as knp_menu %}
|
||||
{% if item.hasChildren %}
|
||||
<button type="button"
|
||||
{{ stimulus_action('sidebar-menu', 'toggleSubmenu') }}
|
||||
{{ stimulus_target('sidebar-menu', 'button') }}
|
||||
{{ knp_menu.attributes(item.linkAttributes) }}
|
||||
class="{{ html_classes('hover:bg-gray-50 flex items-center w-full text-left rounded-md p-2 gap-x-3 text-sm leading-6 font-semibold text-gray-700', { 'bg-gray-50': matcher.isAncestor(item) }) }}"
|
||||
aria-expanded="false">
|
||||
{{ block('label') }}
|
||||
</button>
|
||||
{% elseif item.label == '%DIVIDER%' %}
|
||||
<hr class="my-4 h-px bg-gray-200">
|
||||
{% else %}
|
||||
<div class="hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold text-gray-700" role="button">
|
||||
{{ block('label') }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block label %}
|
||||
{% apply spaceless %}
|
||||
{% if item.extras.icon is defined %}
|
||||
{{ icon(item.extras.icon, 'w-5 h-5') }}
|
||||
{% if item.extras.icon_only is defined and false == item.extras.icon_only %}
|
||||
<span class="flex-1">{{ item.label|raw }}</span>
|
||||
{% endif %}
|
||||
{{ icon(item.extras.icon, 'h-6 w-6 shrink-0 text-gray-400') }}
|
||||
{{ item.label|raw }}
|
||||
{% else %}
|
||||
{{ item.label|raw }}
|
||||
{% endif %}
|
||||
{% endapply %}
|
||||
{% endblock %}
|
||||
|
||||
{% block spanElement %}
|
||||
<div class="icon-section" role="button">
|
||||
{% if item.extras.icon is defined %}
|
||||
{{ icon(item.extras.icon, 'w-5 h-5') }}
|
||||
{% if item.extras.icon_only is defined and false == item.extras.icon_only %}
|
||||
<span class="flex-1">{{ item.label|raw }}</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{{ item.label|raw }}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
<div class="fixed top-0 left-0 inset-x-0 z-50 bg-white shadow-sm">
|
||||
<div class="container px-8 py-4 flex items-center justify-between">
|
||||
<a href="{{ path(app.user.defaultRoute) }}" title="Home">
|
||||
<div class="flex items-center space-x-4">
|
||||
<img src="{{ asset('build/images/logo.svg') }}" alt="" class="block w-auto h-8">
|
||||
</div>
|
||||
</a>
|
||||
<nav class="hidden md:block font-medium">
|
||||
{% block header_menu %}{% endblock %}
|
||||
</nav>
|
||||
<button type="button"
|
||||
class="md:hidden"
|
||||
{{ stimulus_controller('mobilenav', [], [], { 'mobilenav': '#mobilenav' }) }}
|
||||
{{ stimulus_action('mobilenav', 'trigger', null, { 'mode': 'open' }) }}>
|
||||
{{ icon('menu', 'w-8 h-8') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,68 +0,0 @@
|
||||
<div class="flex grow flex-col gap-y-5 overflow-y-scroll md:border-r border-gray-200 bg-white px-6">
|
||||
<nav class="flex flex-1 flex-col">
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li>
|
||||
<!-- Current: "bg-gray-50", Default: "hover:bg-gray-50" -->
|
||||
<a href="#" class="bg-gray-50 block rounded-md py-2 pr-2 pl-10 text-sm leading-6 font-semibold text-gray-700">Dashboard</a>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<button type="button" class="hover:bg-gray-50 flex items-center w-full text-left rounded-md p-2 gap-x-3 text-sm leading-6 font-semibold text-gray-700" aria-controls="sub-menu-1" aria-expanded="false">
|
||||
<!-- Expanded: "rotate-90 text-gray-500", Collapsed: "text-gray-400" -->
|
||||
<svg class="text-gray-400 h-5 w-5 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Teams
|
||||
</button>
|
||||
<!-- Expandable link section, show/hide based on state. -->
|
||||
<ul class="mt-1 px-2" id="sub-menu-1">
|
||||
<li>
|
||||
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700">Engineering</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700">Human Resources</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700">Customer Success</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<button type="button" class="hover:bg-gray-50 flex items-center w-full text-left rounded-md p-2 gap-x-3 text-sm leading-6 font-semibold text-gray-700" aria-controls="sub-menu-2" aria-expanded="false">
|
||||
<!-- Expanded: "rotate-90 text-gray-500", Collapsed: "text-gray-400" -->
|
||||
<svg class="text-gray-400 h-5 w-5 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Projects
|
||||
</button>
|
||||
<!-- Expandable link section, show/hide based on state. -->
|
||||
<ul class="mt-1 px-2" id="sub-menu-2">
|
||||
<li>
|
||||
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700">GraphQL API</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700">iOS App</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700">Android App</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700">New Customer Portal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-10 text-sm leading-6 font-semibold text-gray-700">Calendar</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-10 text-sm leading-6 font-semibold text-gray-700">Documents</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-10 text-sm leading-6 font-semibold text-gray-700">Reports</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
Reference in New Issue
Block a user