Диалоговые окна удаления в работодателях и рекламе

Андрей Ларионов
1 parent 86a17538a5
Showing 3 changed files with 111 additions and 4 deletions Side-by-side Diff
resources/views/admin/employer/index.blade.php
resources/views/admin/reclames/index.blade.php
resources/views/admin/reclames/modal.blade.php
@@ -43,7 +43,7 @@
                 console.log('click button');
                 let id = e.target.id;
                 let form = document.getElementById("form_modal_del");
-                form.action = "<?=$_SERVER['HTTP_REFERER']?>/delete/"+e.target.getAttribute('data-employer')+'/'+e.target.getAttribute('data-user');
+                form.action = "<?=$_SERVER['REDIRECT_URL']?>/delete/"+e.target.getAttribute('data-employer')+'/'+e.target.getAttribute('data-user');
                 //document.getElementById("title_modal").innerHTML = id;
                 console.log(e.target.getAttribute('data-employer'));
                 console.log(e.target.getAttribute('data-user'));
@@ -29,6 +29,26 @@
             });
         });
     </script>
+
+    <script>
+        const btns = document.querySelectorAll('.btn_del');
+        btns.forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                console.log('click button');
+                //let id = e.target.id;
+                let form = document.getElementById("form_modal_del");
+                form.action = "<?=$_SERVER['REDIRECT_URL'];?>/delete/"+e.target.getAttribute('data-reclame');
+                //document.getElementById("title_modal").innerHTML = id;
+                console.log(e.target.getAttribute('data-employer'));
+                console.log(e.target.getAttribute('data-user'));
+
+            });
+        });
+    </script>
+@endsection
+
+@section('modal')
+@include('admin.reclames.modal')
 @endsection
  
 @section('search')
@@ -41,6 +61,7 @@
         Добавить рекламу
     </a>
     <br>
+    <pre><? //print_r($_SERVER);?></pre>
     <div class="w-full overflow-hidden rounded-lg shadow-xs" id="ajax_block">
  
         <div class="w-full overflow-x-auto">
@@ -91,13 +112,12 @@
                                 @method('DELETE')
                                 @if ($reclame->is_hidden)
                                     <img class="btn-eye" name="btn_close_{{$reclame->id}}" data-status="close" data-id="{{$reclame->id}}" src="{{asset('/assets/img/close-eye.png')}}" style="width:25px; float:left; margin: 0px 5px 0px 5px; cursor: pointer;" />
-                                    <p style="float:left">|</p>
                                 @else
                                     <img class="btn-eye" name="btn_open_{{$reclame->id}}" data-status="open" data-id="{{$reclame->id}}" src="{{asset('/assets/img/open-eye.png')}}" style="width:25px; float: left; margin: 0px 5px 0px 5px; cursor: pointer;"/>
-                                    <p style="float:left">|</p>
                                 @endif
  
-                                <input class="btn btn-danger" type="submit" style="float:left" value="Удалить"/>
+                                <a @click="openModal" style="cursor: pointer;" data-reclame="{{$reclame->id}}" class="btn_del btn btn-danger">| Удалить</a>
+                                <!--<input class="btn btn-danger" type="submit" style="float:left" value="Удалить"/>-->
                             </form>
                         </td>
                     </tr>
@@ -0,0 +1,87 @@
+<!-- Modal backdrop. This what you want to place close to the closing body tag -->
+<div
+    x-show="isModalOpen"
+    x-transition:enter="transition ease-out duration-150"
+    x-transition:enter-start="opacity-0"
+    x-transition:enter-end="opacity-100"
+    x-transition:leave="transition ease-in duration-150"
+    x-transition:leave-start="opacity-100"
+    x-transition:leave-end="opacity-0"
+    class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
+>
+    <!-- Modal -->
+    <div
+        x-show="isModalOpen"
+        x-transition:enter="transition ease-out duration-150"
+        x-transition:enter-start="opacity-0 transform translate-y-1/2"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="transition ease-in duration-150"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0  transform translate-y-1/2"
+        @click.away="closeModal"
+        @keydown.escape="closeModal"
+        class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-xl"
+        role="dialog"
+        id="modal"
+    >
+        <!-- Remove header if you don't want a close icon. Use modal body to place modal tile. -->
+        <header class="flex justify-end">
+            <button
+                class="inline-flex items-center justify-center w-6 h-6 text-gray-400 transition-colors duration-150 rounded dark:hover:text-gray-200 hover: hover:text-gray-700"
+                aria-label="close"
+                @click="closeModal"
+            >
+                <svg
+                    class="w-4 h-4"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    role="img"
+                    aria-hidden="true"
+                >
+                    <path
+                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                        clip-rule="evenodd"
+                        fill-rule="evenodd"
+                    ></path>
+                </svg>
+            </button>
+        </header>
+        <!-- Modal body -->
+        <div class="mt-4 mb-6">
+            <!-- Modal title -->
+            <p
+                class="mb-2 text-lg font-semibold text-gray-700 dark:text-gray-300"
+            >
+                Вы действительно хотите удалить данную рекламу?
+            </p>
+            <!-- Modal description -->
+            <p class="text-sm text-gray-700 dark:text-gray-400">
+                Это приведет к удалению всей информации о рекламе<br>
+                на данном проекте.
+            </p>
+        </div>
+        <footer
+            class="flex flex-col items-center justify-end px-6 py-3 -mx-6 -mb-4 space-y-4 sm:space-y-0 sm:space-x-6 sm:flex-row bg-gray-50 dark:bg-gray-800"
+        >
+            <button
+                @click="closeModal"
+                class="w-full px-5 py-3 text-sm font-medium leading-5 text-white text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 sm:px-4 sm:py-2 sm:w-auto active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:outline-none focus:shadow-outline-gray"
+            >
+                Отмена
+            </button>
+                <form id="form_modal_del" name="form_modal_del" action="/employer-profile/delete/{employer}/{user}" method="POST">
+                    @csrf
+                    @method('DELETE')
+                    <p id="url"></p>
+                    <button
+                        type="submit"
+                        class="w-full px-5 py-3 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg sm:w-auto sm:px-4 sm:py-2 active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
+                    >
+                        Удалить
+                    </button>
+                </form>
+
+        </footer>
+    </div>
+</div>
+<!-- End of modal backdrop -->
...	...	@@ -43,7 +43,7 @@
43	43	console.log('click button');
44	44	let id = e.target.id;
45	45	let form = document.getElementById("form_modal_del");
46		- form.action = "<?=$_SERVER['HTTP_REFERER']?>/delete/"+e.target.getAttribute('data-employer')+'/'+e.target.getAttribute('data-user');
	46	+ form.action = "<?=$_SERVER['REDIRECT_URL']?>/delete/"+e.target.getAttribute('data-employer')+'/'+e.target.getAttribute('data-user');
47	47	//document.getElementById("title_modal").innerHTML = id;
48	48	console.log(e.target.getAttribute('data-employer'));
49	49	console.log(e.target.getAttribute('data-user'));
...	...	@@ -29,6 +29,26 @@
29	29	});
30	30	});
31	31	</script>
	32	+
	33	+ <script>
	34	+ const btns = document.querySelectorAll('.btn_del');
	35	+ btns.forEach(btn => {
	36	+ btn.addEventListener('click', (e) => {
	37	+ console.log('click button');
	38	+ //let id = e.target.id;
	39	+ let form = document.getElementById("form_modal_del");
	40	+ form.action = "<?=$_SERVER['REDIRECT_URL'];?>/delete/"+e.target.getAttribute('data-reclame');
	41	+ //document.getElementById("title_modal").innerHTML = id;
	42	+ console.log(e.target.getAttribute('data-employer'));
	43	+ console.log(e.target.getAttribute('data-user'));
	44	+
	45	+ });
	46	+ });
	47	+ </script>
	48	+@endsection
	49	+
	50	+@section('modal')
	51	+@include('admin.reclames.modal')
32	52	@endsection
33	53
34	54	@section('search')
...	...	@@ -41,6 +61,7 @@
41	61	Добавить рекламу
42	62	</a>
43	63	<br>
	64	+ <pre><? //print_r($_SERVER);?></pre>
44	65	<div class="w-full overflow-hidden rounded-lg shadow-xs" id="ajax_block">
45	66
46	67	<div class="w-full overflow-x-auto">
...	...	@@ -91,13 +112,12 @@
91	112	@method('DELETE')
92	113	@if ($reclame->is_hidden)
93	114	<img class="btn-eye" name="btn_close_{{$reclame->id}}" data-status="close" data-id="{{$reclame->id}}" src="{{asset('/assets/img/close-eye.png')}}" style="width:25px; float:left; margin: 0px 5px 0px 5px; cursor: pointer;" />
94		- <p style="float:left">\|</p>
95	115	@else
96	116	<img class="btn-eye" name="btn_open_{{$reclame->id}}" data-status="open" data-id="{{$reclame->id}}" src="{{asset('/assets/img/open-eye.png')}}" style="width:25px; float: left; margin: 0px 5px 0px 5px; cursor: pointer;"/>
97		- <p style="float:left">\|</p>
98	117	@endif
99	118
100		- <input class="btn btn-danger" type="submit" style="float:left" value="Удалить"/>
	119	+ <a @click="openModal" style="cursor: pointer;" data-reclame="{{$reclame->id}}" class="btn_del btn btn-danger">\| Удалить</a>
	120	+ <!--<input class="btn btn-danger" type="submit" style="float:left" value="Удалить"/>-->
101	121	</form>
102	122	</td>
103	123	</tr>
...	...	@@ -0,0 +1,87 @@
	1	+<!-- Modal backdrop. This what you want to place close to the closing body tag -->
	2	+<div
	3	+ x-show="isModalOpen"
	4	+ x-transition:enter="transition ease-out duration-150"
	5	+ x-transition:enter-start="opacity-0"
	6	+ x-transition:enter-end="opacity-100"
	7	+ x-transition:leave="transition ease-in duration-150"
	8	+ x-transition:leave-start="opacity-100"
	9	+ x-transition:leave-end="opacity-0"
	10	+ class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
	11	+>
	12	+ <!-- Modal -->
	13	+ <div
	14	+ x-show="isModalOpen"
	15	+ x-transition:enter="transition ease-out duration-150"
	16	+ x-transition:enter-start="opacity-0 transform translate-y-1/2"
	17	+ x-transition:enter-end="opacity-100"
	18	+ x-transition:leave="transition ease-in duration-150"
	19	+ x-transition:leave-start="opacity-100"
	20	+ x-transition:leave-end="opacity-0 transform translate-y-1/2"
	21	+ @click.away="closeModal"
	22	+ @keydown.escape="closeModal"
	23	+ class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-xl"
	24	+ role="dialog"
	25	+ id="modal"
	26	+ >
	27	+ <!-- Remove header if you don't want a close icon. Use modal body to place modal tile. -->
	28	+ <header class="flex justify-end">
	29	+ <button
	30	+ class="inline-flex items-center justify-center w-6 h-6 text-gray-400 transition-colors duration-150 rounded dark:hover:text-gray-200 hover: hover:text-gray-700"
	31	+ aria-label="close"
	32	+ @click="closeModal"
	33	+ >
	34	+ <svg
	35	+ class="w-4 h-4"
	36	+ fill="currentColor"
	37	+ viewBox="0 0 20 20"
	38	+ role="img"
	39	+ aria-hidden="true"
	40	+ >
	41	+ <path
	42	+ d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
	43	+ clip-rule="evenodd"
	44	+ fill-rule="evenodd"
	45	+ ></path>
	46	+ </svg>
	47	+ </button>
	48	+ </header>
	49	+ <!-- Modal body -->
	50	+ <div class="mt-4 mb-6">
	51	+ <!-- Modal title -->
	52	+ <p
	53	+ class="mb-2 text-lg font-semibold text-gray-700 dark:text-gray-300"
	54	+ >
	55	+ Вы действительно хотите удалить данную рекламу?
	56	+ </p>
	57	+ <!-- Modal description -->
	58	+ <p class="text-sm text-gray-700 dark:text-gray-400">
	59	+ Это приведет к удалению всей информации о рекламе<br>
	60	+ на данном проекте.
	61	+ </p>
	62	+ </div>
	63	+ <footer
	64	+ class="flex flex-col items-center justify-end px-6 py-3 -mx-6 -mb-4 space-y-4 sm:space-y-0 sm:space-x-6 sm:flex-row bg-gray-50 dark:bg-gray-800"
	65	+ >
	66	+ <button
	67	+ @click="closeModal"
	68	+ class="w-full px-5 py-3 text-sm font-medium leading-5 text-white text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 sm:px-4 sm:py-2 sm:w-auto active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:outline-none focus:shadow-outline-gray"
	69	+ >
	70	+ Отмена
	71	+ </button>
	72	+ <form id="form_modal_del" name="form_modal_del" action="/employer-profile/delete/{employer}/{user}" method="POST">
	73	+ @csrf
	74	+ @method('DELETE')
	75	+ <p id="url"></p>
	76	+ <button
	77	+ type="submit"
	78	+ class="w-full px-5 py-3 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg sm:w-auto sm:px-4 sm:py-2 active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
	79	+ >
	80	+ Удалить
	81	+ </button>
	82	+ </form>
	83	+
	84	+ </footer>
	85	+ </div>
	86	+</div>
	87	+<!-- End of modal backdrop -->