templates/CatalogueVue/_modal_edit.html.twig line 1

Open in your IDE?
  1. {# templates/catalogue/_modal_edit.html.twig #}
  3. <style>
  4. .ce-section {
  5. font-size: 11px; font-weight: 700; text-transform: uppercase;
  6. letter-spacing: .06em; color: #6c757d;
  7. margin: 14px 0 8px; padding-bottom: 4px;
  8. border-bottom: 1px solid #e9ecef;
  9. }
  10. .ce-label {
  11. font-size: 10px; font-weight: 700; color: #495057;
  12. text-transform: uppercase; letter-spacing: .04em;
  13. margin-bottom: 2px; display: block;
  14. }
  15. .ce-prix-calc {
  16. background: #e7f1ff; border: 1px solid #b8daff;
  17. border-radius: 6px; padding: 8px 12px;
  18. font-size: 12px; color: #004085; font-weight: 600;
  19. margin-bottom: 10px;
  20. }
  21. .ce-badge-translate {
  22. font-size: 10px; background: #d4edda; color: #155724;
  23. border: 1px solid #c3e6cb; border-radius: 20px;
  24. padding: 2px 8px; margin-left: 6px; font-weight: 600;
  25. }
  26. /* Uniformiser les champs du form Symfony */
  27. #ceForm .form-group { margin-bottom: 8px; }
  28. #ceForm label { font-size: 10px; font-weight: 700; color: #495057;
  29. text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
  30. #ceForm .form-control { font-size: 13px; height: calc(1.5em + .5rem + 2px); padding: .25rem .5rem; }
  31. #ceForm select.form-control { height: calc(1.5em + .5rem + 2px); }
  32. #ceForm textarea.form-control { height: auto; }
  33. </style>
  35. {# ── Info traduction ── #}
  36. <div class="alert alert-info py-2 px-3 mb-2" style="font-size:12px">
  37. <i class="fas fa-language mr-1"></i>
  38. <strong>{{ 'article.edit_modal.info_banner_bold'|trans }}</strong>
  39. {{ 'article.edit_modal.info_banner_text'|trans }}
  40. <span class="ce-badge-translate">{{ 'article.edit_modal.ai_badge'|trans }}</span>
  41. </div>
  43. {{ form_start(form, {'attr': {'id': 'ceForm'}}) }}
  45. {# ── Section : Informations principales ── #}
  46. <div class="ce-section"><i class="fas fa-tag mr-1"></i> {{ 'article.edit_modal.section_main_info'|trans }}</div>
  48. <div class="form-row">
  49. <div class="col-12 form-group">
  50. {{ form_label(form.designation, 'article.edit_modal.label_designation'|trans) }}
  51. {{ form_widget(form.designation, {'attr': {'class': 'form-control form-control-sm'}}) }}
  52. </div>
  53. </div>
  55. <div class="form-row">
  56. <div class="col-12 form-group">
  57. {{ form_label(form.description, 'article.edit_modal.label_description'|trans) }}
  58. {{ form_widget(form.description, {'attr': {'class': 'form-control form-control-sm', 'rows': '2'}}) }}
  59. </div>
  60. </div>
  62. <div class="form-row">
  63. <div class="col-md-4 form-group">
  64. {{ form_label(form.typeArticle, 'article.edit_modal.label_type_article'|trans) }}
  65. {{ form_widget(form.typeArticle, {'attr': {'class': 'form-control form-control-sm'}}) }}
  66. </div>
  67. <div class="col-md-4 form-group">
  68. {{ form_label(form.unite, 'article.edit_modal.label_unite'|trans) }}
  69. {{ form_widget(form.unite, {'attr': {'class': 'form-control form-control-sm'}}) }}
  70. </div>
  71. <div class="col-md-4 form-group">
  72. {{ form_label(form.codeArticle, 'article.edit_modal.label_code_article'|trans) }}
  73. {{ form_widget(form.codeArticle, {'attr': {'class': 'form-control form-control-sm'}}) }}
  74. </div>
  75. </div>
  77. {# ── Section : Catégories ── #}
  78. <div class="ce-section"><i class="fas fa-folder mr-1"></i> {{ 'article.edit_modal.section_categories'|trans }}</div>
  80. <div class="form-row">
  81. <div class="col-md-6 form-group">
  82. {{ form_label(form.categorycatalogue, 'article.edit_modal.label_categorie'|trans) }}
  83. {{ form_widget(form.categorycatalogue, {'attr': {'class': 'form-control form-control-sm'}}) }}
  84. </div>
  85. <div class="col-md-6 form-group">
  86. {{ form_label(form.sousCategoryCatalogue, 'article.edit_modal.label_sous_categorie'|trans) }}
  87. {{ form_widget(form.sousCategoryCatalogue, {'attr': {'class': 'form-control form-control-sm'}}) }}
  88. </div>
  89. </div>
  91. {# ── Section : Asset ── #}
  92. <div class="ce-section"><i class="fas fa-laptop mr-1"></i> {{ 'article.edit_modal.section_asset'|trans }}</div>
  94. <div class="form-row">
  95. <div class="col-md-6 form-group">
  96. {{ form_label(form.assetCodeFamille, 'article.edit_modal.label_famille_asset'|trans) }}
  97. {{ form_widget(form.assetCodeFamille, {'attr': {'class': 'form-control form-control-sm', 'id': 'ce_famille'}}) }}
  98. </div>
  99. <div class="col-md-6 form-group">
  100. {{ form_label(form.assetCodeCategory, 'article.edit_modal.label_categorie_asset'|trans) }}
  101. {{ form_widget(form.assetCodeCategory, {'attr': {'class': 'form-control form-control-sm', 'id': 'ce_category'}}) }}
  102. </div>
  103. </div>
  105. {# ── Section : Prix ── #}
  106. <div class="ce-section"><i class="fas fa-money-bill-wave mr-1"></i> {{ 'article.edit_modal.section_prix'|trans }}</div>
  108. <div class="ce-prix-calc">
  109. <i class="fas fa-calculator mr-1"></i>
  110. {{ 'article.edit_modal.prix_ht_calc'|trans }} <strong id="ce-ht-display">{{ catalogue.prixHT }}</strong> {{ 'article.edit_modal.currency'|trans }}
  111. &nbsp;|&nbsp;
  112. {{ 'article.edit_modal.taxe_calc'|trans }} <strong id="ce-taxe-display">{{ catalogue.taxe ?? 0 }}</strong>%
  113. &nbsp;|&nbsp;
  114. {{ 'article.edit_modal.prix_ttc_calc'|trans }} <strong id="ce-ttc-display">{{ catalogue.prix }}</strong> {{ 'article.edit_modal.currency'|trans }}
  115. </div>
  117. <div class="form-row">
  118. <div class="col-md-6 form-group">
  119. <label class="ce-label">{{ 'article.edit_modal.label_prix_ht'|trans }}</label>
  120. <input type="number" name="form[prixHT]" id="ce-prixHT"
  121. class="form-control form-control-sm"
  122. value="{{ catalogue.prixHT }}"
  123. step="0.01" min="0"
  124. oninput="ceCalcPrix()">
  125. </div>
  126. <div class="col-md-6 form-group">
  127. <label class="ce-label">{{ 'article.edit_modal.label_taxe'|trans }}</label>
  128. <select name="form[taxe]" id="ce-taxe"
  129. class="form-control form-control-sm"
  130. onchange="ceCalcPrix()">
  131. {% for tax in ['0', '10', '18', '19.25', '20'] %}
  132. <option value="{{ tax }}"
  133. {{ catalogue.taxe == tax ? 'selected' : '' }}>
  134. {{ tax }}%
  135. </option>
  136. {% endfor %}
  137. </select>
  138. </div>
  139. </div>
  141. {# ── Section : MRP & Stock ── #}
  142. <div class="ce-section"><i class="fas fa-boxes mr-1"></i> {{ 'article.edit_modal.section_stock_mrp'|trans }}</div>
  144. <div class="form-row">
  145. <div class="col-md-4 form-group">
  146. {{ form_label(form.typeMRP, 'article.edit_modal.label_type_mrp'|trans) }}
  147. {{ form_widget(form.typeMRP, {'attr': {'class': 'form-control form-control-sm'}}) }}
  148. </div>
  149. <div class="col-md-4 form-group">
  150. <label class="ce-label">{{ 'article.edit_modal.label_stock_min'|trans }}</label>
  151. <input type="number" name="form[minStock]"
  152. class="form-control form-control-sm"
  153. value="{{ catalogue.minStock }}" min="0">
  154. </div>
  155. <div class="col-md-4 form-group">
  156. <label class="ce-label">{{ 'article.edit_modal.label_stock_max'|trans }}</label>
  157. <input type="number" name="form[maxStock]"
  158. class="form-control form-control-sm"
  159. value="{{ catalogue.maxStock }}" min="0">
  160. </div>
  161. <div class="col-md-4 form-group">
  162. <label class="ce-label">{{ 'article.edit_modal.label_stock_securite'|trans }}</label>
  163. <input type="number" name="form[stockSecurite]"
  164. class="form-control form-control-sm"
  165. value="{{ catalogue.stockSecurite }}" min="0">
  166. </div>
  167. <div class="col-md-4 form-group">
  168. <label class="ce-label">{{ 'article.edit_modal.label_delai_fournisseur'|trans }}</label>
  169. <input type="number" name="form[supplierLeadTime]"
  170. class="form-control form-control-sm"
  171. value="{{ catalogue.supplierLeadTime }}" min="0">
  172. </div>
  173. <div class="col-md-4 form-group">
  174. <label class="ce-label">{{ 'article.edit_modal.label_delai_approvisionnement'|trans }}</label>
  175. <input type="number" name="form[procurementLeadTime]"
  176. class="form-control form-control-sm"
  177. value="{{ catalogue.procurementLeadTime }}" min="0">
  178. </div>
  179. <div class="col-md-4 form-group">
  180. <label class="ce-label">{{ 'article.edit_modal.label_consommation_mensuelle'|trans }}</label>
  181. <input type="number" name="form[monthlyConsumption]"
  182. class="form-control form-control-sm"
  183. value="{{ catalogue.monthlyConsumption }}" min="0">
  184. </div>
  185. </div>
  187. {# ── Boutons ── #}
  188. <div class="d-flex justify-content-end mt-3" style="gap:8px">
  189. <button type="button" class="btn btn-sm btn-secondary"
  190. data-dismiss="modal">
  191. <i class="fas fa-times mr-1"></i> {{ 'action.annuler'|trans }}
  192. </button>
  193. <button type="submit" class="btn btn-sm btn-primary" id="ce-submit-btn">
  194. <i class="fas fa-save mr-1"></i> {{ 'article.edit_modal.btn_save_translate'|trans }}
  195. </button>
  196. </div>
  198. {{ form_end(form) }}
  199. <script>
  200. function ceCalcPrix() {
  201. const ht = parseFloat(document.getElementById('ce-prixHT').value) || 0;
  202. const taxe = parseFloat(document.getElementById('ce-taxe').value) || 0;
  203. const ttc = ht * (1 + taxe / 100);
  204. document.getElementById('ce-ht-display').textContent = Math.round(ht).toLocaleString('fr-FR');
  205. document.getElementById('ce-taxe-display').textContent = taxe;
  206. document.getElementById('ce-ttc-display').textContent = Math.round(ttc).toLocaleString('fr-FR');
  207. }
  209. document.getElementById('ce_famille')?.addEventListener('change', function() {
  210. const familleId = this.value;
  211. const catSelect = document.getElementById('ce_category');
  212. if (!catSelect) return;
  214. catSelect.innerHTML = '<option>{{ 'article.edit_modal.js_loading_categories'|trans|e('js') }}</option>';
  216. if (!familleId) {
  217. catSelect.innerHTML = '<option value="">{{ 'article.edit_modal.js_choose_category_asset'|trans|e('js') }}</option>';
  218. return;
  219. }
  221. fetch('/api/asset-categories?famille=' + familleId)
  222. .then(r => r.json())
  223. .then(data => {
  224. catSelect.innerHTML = '<option value="">{{ 'article.edit_modal.js_choose_category_asset'|trans|e('js') }}</option>';
  225. data.forEach(c => {
  226. catSelect.innerHTML += `<option value="${c.id}">${c.libele} - ${c.nomequip}</option>`;
  227. });
  228. })
  229. .catch(() => {
  230. catSelect.innerHTML = '<option value="">{{ 'catalogue.modal.load_error'|trans|e('js') }}</option>';
  231. });
  232. });
  234. ceCalcPrix();
  235. </script>