Init project
This commit is contained in:
3
templates/news/_form.html.twig
Normal file
3
templates/news/_form.html.twig
Normal file
@@ -0,0 +1,3 @@
|
||||
{{ form_start(form) }}
|
||||
{{ form_widget(form) }}
|
||||
{{ form_end(form) }}
|
||||
90
templates/news/add.html.twig
Normal file
90
templates/news/add.html.twig
Normal file
@@ -0,0 +1,90 @@
|
||||
{% extends 'base_admin.html.twig' %}
|
||||
{% block body %}
|
||||
<main class="lg:pl-72">
|
||||
<div class="xl:pr-96">
|
||||
<div
|
||||
class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6"
|
||||
data-controller="news--image-selector"
|
||||
data-image-selector-target="container"
|
||||
>
|
||||
{% for message in app.flashes('error') %}
|
||||
<div class="mb-4 rounded-md bg-red-50 p-4">
|
||||
<div class="flex">
|
||||
<div class="shrink-0">
|
||||
<svg
|
||||
class="size-5 text-red-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewbox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-red-800">
|
||||
{{ message }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{{ form_start(form) }}
|
||||
{{ form_widget(form) }}
|
||||
|
||||
<div class="mt-4">
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="dialog"
|
||||
type="button"
|
||||
class="rounded-md bg-amber-600 px-4 py-2.5 text-sm font-semibold text-white"
|
||||
>
|
||||
Ajouter des images
|
||||
</button>
|
||||
<span
|
||||
data-news--image-selector-target="count"
|
||||
class="text-sm text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
0 sélectionnée(s)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="selected-images-preview"
|
||||
data-news--image-selector-target="preview"
|
||||
class="mt-4 flex gap-3 flex-wrap"
|
||||
></div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded-md bg-amber-600 px-4 py-2.5 text-sm font-semibold text-white"
|
||||
>
|
||||
Enregistrer l'actualité
|
||||
</button>
|
||||
</div>
|
||||
{{ form_end(form) }}
|
||||
{% include 'component/add-images-modal.html.twig' %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<aside
|
||||
class="fixed inset-y-0 right-0 hidden w-96 overflow-y-auto border-l border-gray-200 px-4 py-6 sm:px-6 lg:px-8 xl:block dark:border-white/10"
|
||||
>
|
||||
<!-- Secondary column (hidden on smaller screens) -->
|
||||
<a
|
||||
href="{{ path('admin_news_index') }}"
|
||||
class="rounded-md bg-amber-600 px-4 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-amber-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 dark:bg-amber-500 dark:shadow-none dark:hover:bg-amber-400 dark:focus-visible:outline-amber-500"
|
||||
>
|
||||
Retour
|
||||
</a>
|
||||
</aside>
|
||||
{% endblock %}
|
||||
79
templates/news/edit.html.twig
Normal file
79
templates/news/edit.html.twig
Normal file
@@ -0,0 +1,79 @@
|
||||
{% extends 'base_admin.html.twig' %}
|
||||
{% block body %}
|
||||
<main class="lg:pl-72">
|
||||
<div class="xl:pr-96">
|
||||
<div
|
||||
class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6"
|
||||
data-controller="news--edit-image-selector"
|
||||
data-news--edit-image-selector-target="container"
|
||||
>
|
||||
<!-- Main Area -->
|
||||
|
||||
{{ form_start(form) }}
|
||||
{{ form_widget(form) }}
|
||||
|
||||
<div class="mt-4">
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="edit-news-image-dialog"
|
||||
type="button"
|
||||
class="rounded-md bg-amber-600 px-4 py-2.5 text-sm font-semibold text-white"
|
||||
>
|
||||
Modifier les images
|
||||
</button>
|
||||
<span
|
||||
data-news--edit-image-selector-target="count"
|
||||
class="text-sm text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
0 sélectionnée(s)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Conteneur des inputs cachés gérés par Stimulus -->
|
||||
<div id="hidden-inputs-container">
|
||||
{% for img in selectedImages %}
|
||||
<input type="hidden" name="selectedImages[]" value="{{ img.id }}" />
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Zone de preview -->
|
||||
<div
|
||||
id="selected-images-preview"
|
||||
data-news--edit-image-selector-target="preview"
|
||||
class="mt-4 flex gap-3 flex-wrap"
|
||||
>
|
||||
{% for img in selectedImages %}
|
||||
<img
|
||||
src="{{ asset(img.url) }}"
|
||||
data-id="{{ img.id }}"
|
||||
class="w-20 h-20 rounded object-cover cursor-move"
|
||||
/>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded-md bg-amber-600 px-4 py-2.5 text-sm font-semibold text-white"
|
||||
>
|
||||
Enregistrer l'actualité
|
||||
</button>
|
||||
</div>
|
||||
{{ form_end(form) }}
|
||||
{% include 'component/edit-images-modal.html.twig' %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<aside
|
||||
class="fixed inset-y-0 right-0 hidden w-96 overflow-y-auto border-l border-gray-200 px-4 py-6 sm:px-6 lg:px-8 xl:block dark:border-white/10"
|
||||
>
|
||||
<!-- Secondary column (hidden on smaller screens) -->
|
||||
<a
|
||||
href="{{ path('admin_news_index') }}"
|
||||
class="rounded-md bg-amber-600 px-4 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-amber-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 dark:bg-amber-500 dark:shadow-none dark:hover:bg-amber-400 dark:focus-visible:outline-amber-500"
|
||||
>
|
||||
Retour
|
||||
</a>
|
||||
</aside>
|
||||
{% endblock %}
|
||||
276
templates/news/index.html.twig
Normal file
276
templates/news/index.html.twig
Normal file
@@ -0,0 +1,276 @@
|
||||
{% extends 'base_admin.html.twig' %}
|
||||
{% block body %}
|
||||
<div data-controller="news--delete">
|
||||
<main class="lg:pl-72">
|
||||
<div class="xl:pr-96">
|
||||
<div class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6">
|
||||
<!-- Main area -->
|
||||
<div class="bg-white py-6 sm:py-8">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
{% if news is empty %}
|
||||
<div class="text-center mt-60">
|
||||
<svg
|
||||
viewbox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
class="mx-auto size-12 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
|
||||
stroke-width="2"
|
||||
vector-effect="non-scaling-stroke"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<h3 class="mt-2 text-sm font-semibold text-gray-900">
|
||||
Pas d'actualité
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Commencez par ajouter une nouvelle actualité.
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<a
|
||||
class="inline-flex items-center rounded-md bg-amber-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-amber-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600"
|
||||
href="{{ path('admin_news_add') }}"
|
||||
>
|
||||
Ajouter des actualités
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div
|
||||
class="mx-auto mt-16 grid max-w-2xl auto-rows-fr grid-cols-1 gap-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3"
|
||||
data-controller="news--sortable"
|
||||
data-news--sortable-url-value="{{
|
||||
path(
|
||||
'admin_news_reorder'
|
||||
)
|
||||
}}"
|
||||
>
|
||||
{% for new in news %}
|
||||
<article
|
||||
class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 px-8 pt-80 pb-8 sm:pt-48 lg:pt-80"
|
||||
data-news--sortable-target="item"
|
||||
data-id="{{ new.id }}"
|
||||
>
|
||||
{% if new.getNewsImages is not empty %}
|
||||
<img
|
||||
src="{{ new.getNewsImages[0].getImage().getUrl() }}"
|
||||
alt=""
|
||||
class="absolute inset-0 -z-10 size-full object-cover"
|
||||
/>
|
||||
{% else %}
|
||||
<div
|
||||
class="flex justify-center items-center absolute inset-0 -z-10 text-amber-500"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewbox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-1/2 h-1/2 object-cover"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{% endif %}
|
||||
<!-- BANDEAU -->
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full flex justify-end p-3 bg-black/40 backdrop-blur-sm opacity-100 z-50 items-center"
|
||||
>
|
||||
<!-- Icône move -->
|
||||
<span
|
||||
class="text-amber-500 cursor-move mx-2"
|
||||
data-news--sortable-target="handle"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewbox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<form
|
||||
action="{{
|
||||
path(
|
||||
'admin_news_toggle_active',
|
||||
{
|
||||
id: new.id
|
||||
}
|
||||
)
|
||||
}}"
|
||||
method="POST"
|
||||
class="flex items-center"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="_token"
|
||||
value="{{ csrf_token('toggle' ~ new.id) }}"
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="active"
|
||||
value="{{ new.isActive ? 1 : 0 }}"
|
||||
/>
|
||||
<button type="submit" class="mx-2 cursor-pointer">
|
||||
{% if new.isActive %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewbox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6 text-red-500"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
{% else %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewbox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6 text-green-500"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m4.5 12.75 6 6 9-13.5"
|
||||
/>
|
||||
</svg>
|
||||
{% endif %}
|
||||
</button>
|
||||
</form>
|
||||
<!-- Icône éditer -->
|
||||
<a
|
||||
href="{{
|
||||
path(
|
||||
'admin_news_edit',
|
||||
{
|
||||
id: new.id
|
||||
}
|
||||
)
|
||||
}}"
|
||||
class="text-amber-500 mx-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewbox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<!-- Icône supprimer -->
|
||||
<button
|
||||
class="text-red-500 cursor-pointer mx-2"
|
||||
data-action="news--delete#open"
|
||||
data-url="{{
|
||||
path(
|
||||
'admin_news_delete',
|
||||
{
|
||||
id: new.id
|
||||
}
|
||||
)
|
||||
}}"
|
||||
data-token="{{ csrf_token('delete' ~ new.id) }}"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewbox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{% if new.isActive == 0 %}
|
||||
<div
|
||||
class="absolute inset-0 -z-10 bg-linear-to-t from-gray-900 via-gray-800/70"
|
||||
></div>
|
||||
<div
|
||||
class="absolute inset-0 -z-10 rounded-2xl inset-ring inset-ring-gray-800/30"
|
||||
></div>
|
||||
{% else %}
|
||||
<div
|
||||
class="absolute inset-0 -z-10 bg-linear-to-t from-gray-900 via-gray-900/40"
|
||||
></div>
|
||||
<div
|
||||
class="absolute inset-0 -z-10 rounded-2xl inset-ring inset-ring-gray-900/10"
|
||||
></div>
|
||||
{% endif %}
|
||||
|
||||
<!-- FOOTER -->
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm/6 text-gray-300"
|
||||
>
|
||||
<time
|
||||
datetime="{{ new.updatedAt|date('Y-m-d') }}"
|
||||
class="mr-8"
|
||||
>
|
||||
{{ new.updatedAt|date('d M Y') }}
|
||||
</time>
|
||||
</div>
|
||||
<h3 class="mt-3 text-lg/6 font-semibold text-white">
|
||||
<a href="#">
|
||||
<span class="absolute inset-0"></span>
|
||||
{{ new.title }}
|
||||
</a>
|
||||
</h3>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'component/confirm-delete-news.html.twig' %}
|
||||
</main>
|
||||
</div>
|
||||
<aside
|
||||
class="fixed inset-y-0 right-0 hidden w-96 overflow-y-auto border-l border-gray-200 px-4 py-6 sm:px-6 lg:px-8 xl:block dark:border-white/10"
|
||||
>
|
||||
<!-- Secondary column (hidden on smaller screens) -->
|
||||
<a
|
||||
href="{{ path('admin_news_add') }}"
|
||||
class="rounded-md bg-amber-600 px-4 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-amber-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 dark:bg-amber-500 dark:shadow-none dark:hover:bg-amber-400 dark:focus-visible:outline-amber-500"
|
||||
>
|
||||
Ajouter une actualité
|
||||
</a>
|
||||
</aside>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user