templates/admin/category/edit/editCategory.html.twig line 1

Open in your IDE?
  1. {% extends 'admin/baseAdmin.html.twig' %}
  2. {% block page_title %}Modifier Categorie{% endblock %}
  3. {% block breadcump_main %}Categorie{% endblock %}
  4. {% block breadcump_subtitle %}Modification de catégorie{% endblock %}
  5. {% block menu_left_sidebar %}
  6.     {% include 'include/menu/menuAdmin.html.twig' with { menu_active_event : '2'} %}
  7. {% endblock %}
  8. {% block stylesheets %}
  9.     <link href="{{ asset('admin/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css">
  10.     <link href="{{ asset('admin/css/tailwind.min.css') }}" rel="stylesheet" type="text/css">
  11.     <link href="{{ asset('admin/css/tailwind2.css') }}" rel="stylesheet" type="text/css">
  13. {% endblock %}
  14. {% block title %}{{"Modifier categorie"|trans }}{% endblock %} 
  15. {% block content %}
  16.             <div class="container-fluid">
  18.                 <div class="row">
  19.                     <div class="col-xl-12 px-0">
  20.                         <div class="card">
  21.                             <div class="card-body">
  22.                                 <form class="p-1 " method="post" action="{{ path('edit_category',{'id':category.id})}}" enctype="multipart/form-data"  >
  23.                                     <div class="row">
  24.                                         <h5 class="text-base col-md-2 col-sm-12 px-0 ">Image du category </h5>
  25.                                         <div class="m-auto my-1 relative col-10">
  26.                                             <label for="avatar-upload" class="relative flex justify-center" style="cursor: pointer;">
  27.                                                 <img class="w-full h-72 rounded-lg m-auto object-cover" src="{{ asset(''~category.image)}}" alt="category image" id="avatar-img">
  28.                                                 <div class="h-10 w-10 bg-orange rounded-full flex  items-center justify-center" style="position: absolute;right: 43%;bottom: 4px;font-size: 43px;">
  29.                                                     <i class="bx bxs-image-alt text-xl text-white"></i>
  30.                                                 </div>
  31.                                                 <input type="file" id="avatar-upload" name='image' value="{{ category.image }}" style="display: none;" accept="image/*" onchange="changeAvatar(event)">
  32.                                             </label>
  33.                                         </div>
  34.                                     </div>
  35.                                     <h5 class="text-base sm:text-lg font-semibold mt-5 ">Information General du category</h5>
  36.                                     <p class="pb-4 text-gray-700 text-xs sm:text-sm">Decrivez la category par ses caracteristiques. </p>
  37.                                     <div class="row mb-4">
  38.                                         <div class="form-floating col-md-12 col-sm-12 ">
  39.                                             <input type="text" name="name" value="{{ category.name }}"
  40.                                                    class="form-control sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 ps-5"
  41.                                                    id="nom" placeholder="">
  42.                                             <label class="mb-2 ms-2 ps-5 text-sm font-medium text-gray-900 " for="nom">Nom du Category</label>
  43.                                             <div class="absolute" style="top: 11px;left: 17px;color: #a1a1a1;">
  44.                                                 <i class="bx bx-grid-small" style="font-size: 36px;"></i>
  45.                                             </div>
  46.                                         </div>
  47.                                     </div>
  49.                                     <div class="row mb-4">
  50.                                         <div class="form-floating">
  51.                                             <textarea class="form-control px-5" placeholder="description du category" id="floatingTextarea2" name='description' style="height: 100px">{{ category.description }}</textarea>
  52.                                             <label class="mb-2 ms-2 ps-5 text-sm font-medium text-gray-900 " for="floatingTextarea2">Description du Category</label>
  53.                                             <div class="absolute" style="top: 15px;left: 23px;color: #a1a1a1;">
  54.                                                 <i class="bx bx-notepad text-2xl"></i>
  55.                                             </div>
  56.                                         </div>
  58.                                     </div>
  60.                                     <div class="form-floating col-md-12 col-sm-12  mb-4">
  61.                                         <input value="{{ category.ordre }}" type="number" name="ordre"
  62.                                                class="form-control sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 ps-5"
  63.                                                id="nom" placeholder="">
  64.                                         <label class="mb-2 ms-2 ps-5 text-sm font-medium text-gray-900 " for="nom">Category order</label>
  65.                                         <div class="absolute" style="top: 15px;left: 13px;color: #a1a1a1;">
  66.                                             <i class="bx bx-sort-a-z" style="font-size: 29px;"></i>
  67.                                         </div>
  68.                                     </div>
  70.                                     <div class="mb-3 flex items-center text-base">
  71.                                         <label for="example-color-input" class="pr-24">Color</label>
  72.                                         <div class="">
  73.                                             <input class="form-control form-control-color mw-100" type="color" name='color' value="{{ category.color }}" id="example-color-input">
  74.                                         </div>
  75.                                         <p class="text-xs text-gray-500 pl-4">*Color principale de la sous categorie</p>
  76.                                     </div>
  80.                                     <div class="flex gap-20 mt-4">
  81.                                         <label for="example-text-input" class="block font-medium text-gray-700  dark:text-zink-200 text-13">Visibilite du Category :</label>
  82.                                         <div class=" flex gap-2">
  83.                                             <!-- "Afficher" button -->
  84.                                             <button type="button" class="flex font-medium items-center px-2 text-gray-900 text-lg w-full">
  85.                                                 <div class="flex items-center">
  86.                                                     <div class="relative inline-block w-10 mr-2 align-middle transition duration-200 ease-in">
  87.                                                         <input type="radio" name="visibility" id="radio-show" class="absolute block w-5 h-5 transition duration-300 ease-linear border-2 border-gray-200 rounded-sm appearance-none cursor-pointer bg-white/80 peer/published checked:bg-white checked:right-0 checked:border-green-500 arrow-none">
  88.                                                         <label for="radio-show" class="block h-5 overflow-hidden transition duration-300 ease-linear border rounded-sm cursor-pointer border-slate-200 bg-slate-200 peer-checked/published:bg-green-500 peer-checked/published:border-green-500"></label>
  89.                                                     </div>
  90.                                                 </div>
  91.                                                 <span class="text-sm font-medium" for="radio-show">Afficher</span>
  92.                                             </button>
  94.                                             <!-- "Masquer" button -->
  95.                                             <button type="button" class="flex font-medium items-center px-2 text-gray-900 text-lg w-full">
  96.                                                 <div class="flex items-center">
  97.                                                     <div class="relative inline-block w-10 mr-2 align-middle transition duration-200 ease-in">
  98.                                                         <input type="radio" name="visibility" id="radio-hide" class="absolute block w-5 h-5 transition duration-300 ease-linear border-2 border-gray-200 rounded-sm appearance-none cursor-pointer bg-white/80 peer/published checked:bg-white checked:right-0 checked:border-green-500 arrow-none">
  99.                                                         <label for="radio-hide" class="block h-5 overflow-hidden transition duration-300 ease-linear border rounded-sm cursor-pointer border-slate-200 bg-slate-200 peer-checked/published:bg-green-500 peer-checked/published:border-green-500"></label>
  100.                                                     </div>
  101.                                                 </div>
  102.                                                 <span class="text-sm font-medium" for="radio-hide">Masquer  </span>
  103.                                             </button>
  104.                                         </div>
  105.                                     </div>
  107.                                     <div class="divider mt-16"></div>
  109.                                     <div class="flex mt-4 row">
  110.                                         <div class="col-md-6">
  111.                                             <p class="text-xs  text-gray-900 mb-2">En cliquant sur le bouton de Enregistrer, vous mettez à jours les informations envoyé dans ce formulaire </p>
  112.                                         </div>
  113.                                         <div class="col-md flex justify-end">
  114.                                             <button type="reset" style=" color: #ffaa00; border: 1px solid;" class="font-medium h-10  py-2.5 rounded-lg text-center text-sm  w-40 me-2">
  115.                                                 Annuler</button>
  116.                                             <button type="submit" style=" background: #ffaa00;" class="font-medium hover:bg-primary-700 h-10  py-2.5 rounded-lg text-center text-sm text-white w-40">Enregistrer</button>
  117.                                         </div>
  118.                                     </div>
  119.                                 </form>
  120.                             </div>
  121.                             <!-- end card body -->
  122.                         </div>
  123.                         <!-- end card -->
  124.                     </div>
  125.                     <!-- end col -->
  128.                     <!-- end col -->
  129.                 </div>
  132.             </div> <!-- container-fluid -->
  133. {% endblock %}
  134. {% block javascripts %}
  135.     <!-- apexcharts -->
  136.     <script src="{{ asset('admin/libs/parsleyjs/parsley.min.js')}}"></script>
  137.     <script src="{{ asset('admin/libs/select2/js/select2.min.js')}}"></script>
  138.     <script src="{{ asset('admin/libs/bootstrap-maxlength/bootstrap-maxlength.min.js')}}"></script>
  140.     <script src="{{ asset('admin/js/pages/form-validation.init.js')}}"></script>
  142.     <script src="{{ asset('admin/js/app.js')}}"></script>
  143.     <script>
  144.                                         /*
  145.                                          Template Name: Skote - Admin & Dashboard Template
  146.                                          Author: Themesbrand
  147.                                          Website: https://themesbrand.com/
  148.                                          Contact: themesbrand@gmail.com
  149.                                          File: Form Advanced Js File
  150.                                          */
  152.                                         !function ($) {
  153.                                             "use strict";
  155.                                             var AdvancedForm = function () { };
  157.                                             AdvancedForm.prototype.init = function () {
  159.                                                 // Select2
  160.                                                 if ($('.select2').length > 0) {
  161.                                                     $(".select2").select2();
  162.                                                 }
  163.                                                 if ($('.select2-tags').length > 0) {
  164.                                                     $(".select2-tags").select2({
  165.                                                         tags: true
  166.                                                     });
  167.                                                 }
  168.                                                 if ($('.select2-limiting-3').length > 0) {
  169.                                                     $(".select2-limiting-3").select2({
  170.                                                         maximumSelectionLength: 3
  171.                                                     });
  172.                                                 }
  174.                                                 //Bootstrap-MaxLength
  175.                                                 $('input#defaultconfig').maxlength({
  176.                                                     warningClass: "badge bg-info",
  177.                                                     limitReachedClass: "badge bg-warning"
  178.                                                 });
  180.                                                 $('input#thresholdconfig').maxlength({
  181.                                                     threshold: 20,
  182.                                                     warningClass: "badge bg-info",
  183.                                                     limitReachedClass: "badge bg-warning"
  184.                                                 });
  186.                                                 $('input#moreoptions').maxlength({
  187.                                                     alwaysShow: true,
  188.                                                     warningClass: "badge bg-success",
  189.                                                     limitReachedClass: "badge bg-danger"
  190.                                                 });
  192.                                                 $('input#alloptions').maxlength({
  193.                                                     alwaysShow: true,
  194.                                                     warningClass: "badge bg-success",
  195.                                                     limitReachedClass: "badge bg-danger",
  196.                                                     separator: ' out of ',
  197.                                                     preText: 'You typed ',
  198.                                                     postText: ' chars available.',
  199.                                                     validate: true
  200.                                                 });
  202.                                                 $('textarea#textarea').maxlength({
  203.                                                     alwaysShow: true,
  204.                                                     warningClass: "badge bg-info",
  205.                                                     limitReachedClass: "badge bg-warning"
  206.                                                 });
  208.                                                 $('input#placement').maxlength({
  209.                                                     alwaysShow: true,
  210.                                                     placement: 'top-left',
  211.                                                     warningClass: "badge bg-info",
  212.                                                     limitReachedClass: "badge bg-warning"
  213.                                                 });
  215.                                             },
  216.                                                     //init
  217.                                                     $.AdvancedForm = new AdvancedForm, $.AdvancedForm.Constructor = AdvancedForm
  218.                                         }(window.jQuery),
  219.                                                 //Datepicker
  220.                                                         function ($) {
  221.                                                             "use strict";
  222.                                                             $.AdvancedForm.init();
  223.                                                         }(window.jQuery);
  225.     </script>
  226. {% endblock %}