add url image product

gestaoRaul/products/models.py

@@ -15,4 +15,4 @@ class Product(models.Model):
     active = models.BooleanField(default=True)
 
     def __str__(self) -> str:
-        return self.name
+        return f"{self.id} - {self.name} - {self.price} - {self.category} - {self.cuisine} - {self.active} "

gestaoRaul/products/templates/products.html

@@ -36,6 +36,8 @@ Produtos
         <td id="name-{{product.id}}" >{{product.name}}</td>
         <td id="price-{{product.id}}" >R$ {{product.price}}</td>
         <td class="hide-on-mobile" id="quantity-{{product.id}}" >{{product.quantity}}</td>
+        <td hidden class="hide-on-mobile" id="image-{{product.id}}" >{{product.image}}</td>
+
         <td class="hide-on-mobile" id="category-{{product.id}}" >{{product.category.name}}</td>
         <td >
           <div class="grid-buttons">
@@ -86,15 +88,20 @@ Produtos
   </body>
   
     <dialog  id='Modal-create-product'  >
-      <article >
-        <form action="{% url 'create_product' %}" id="productForm" method="post" >
+      <article id="modal-product" class="modal-product">
+        <form style="z-index: 1000; position: relative;" action="{% url 'create_product' %}" id="productForm" method="post" >
 
           {% csrf_token %}
             <h2>Cadastro de Produto</h2>
+            <!-- <div style="height: 200px;border-radius: 15px;">
+            <img  id="image-product" src="" alt="">
+            </div> -->
             <input  type="text" id="productId" name="productId"  hidden >
             <input  type="text" id="productName" name="name" required placeholder="Nome">
              <input type="number" step="0.01" id="productPrice" name="price" required placeholder="Preço">
              <input type="number" step="1" id="productqtd" name="qtd"  placeholder="Quantidade">
+              <input  type="text" id="url-image" name="image" required placeholder="URL da imagem">
+
               <div>
              <input type="checkbox" id="cuisine" name="cuisine" placeholder="Cozinha">Cozinha
             </div>

gestaoRaul/products/views.py

@@ -10,6 +10,10 @@ from gestaoRaul.decorators import group_required
 def products(request):
     protucts = Product.objects.all()
     categories = Categories.objects.all()
+    # teste = Product.objects.get(id=389)
+    # teste.image = "https://ehgomes.com.br/wp-content/uploads/2023/08/Vectorizer.AI-A-Ferramenta-que-Transforma-Imagens-em-Vetores.webp"
+    # teste.save()
+    # print((teste.image))
     return render(request, 'products.html', {'products': protucts, 'categories': categories})
 
 @group_required(groupName='Garçom')
@@ -51,6 +55,7 @@ def editProduct(request, productId):
     product.description = request.POST.get('description')
     product.price = request.POST.get('price')
     product.quantity = request.POST.get('qtd')
+    product.image = request.POST.get('image')
     product.cuisine = True if request.POST.get('cuisine') else False
     product.category = Categories.objects.get(id = int(request.POST.get('select-categorie')))
     product.save()

gestaoRaul/templates/static/products/css/products.css

@@ -30,6 +30,26 @@
     width: 100%; 
   }
 
+  .modal-product{
+        /* position: relative; */
+    width: 100%;
+    /* height: 400px;  */
+    background-image: url('https://placehold.co/600x800/efc7b8/49291c?text=Sem_Imagem'); /* URL da imagem */
+    background-size: cover; 
+    background-position: center;
+    background-repeat: no-repeat; 
+
+  }
+  .modal-product::before{
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+     background-color: rgba(0, 0, 0, 0.6); 
+  }
+
 
   @media (max-width: 768px) {
     .hide-on-mobile {

gestaoRaul/templates/static/products/js/products.js

@@ -5,6 +5,9 @@ function openModal() {
     var productPrice = document.getElementById('productPrice');
     var productDescription = document.getElementById('productDescription');
     var productqtd = document.getElementById('productqtd');
+    var urlImage = document.getElementById('url-image');
+    var imageProduct = document.getElementById('image-product');
+
     var productCuisine = document.getElementById('cuisine');
 
     var categorie = document.getElementById('select-categorie');
@@ -18,6 +21,7 @@ function openModal() {
     productPrice.value = '';
     productDescription.value ='';
     productqtd.value = '';
+    urlImage.value = '';
     productCuisine.checked = false
     categorie.value = 1;
 }
@@ -38,6 +42,10 @@ function editProduct(id) {
     var productPrice = document.getElementById('productPrice');
     var productDescription = document.getElementById('productDescription');
     var productqtd = document.getElementById('productqtd');
+    var urlImage = document.getElementById('url-image');
+    var imageProduct = document.getElementById('modal-product');
+
+
     var productCuisine = document.getElementById('cuisine');
     var categorie = document.getElementById('select-categorie');
 
@@ -49,6 +57,8 @@ function editProduct(id) {
     productPrice.value = preco;
     productDescription.value = document.getElementById('description-'+id).value;
     productqtd.value = document.getElementById('quantity-'+id).innerHTML;
+    urlImage.value = document.getElementById('image-'+id).innerHTML;
+    imageProduct.style.backgroundImage = urlImage.value != '' ?`url('${urlImage.value}'`  : `url('https://placehold.co/600x800/efc7b8/49291c?text=${productName.value}')`;
     productCuisine.checked = document.getElementById('cuisine-'+id).value == 'True' ? true : false;
     categorie.value = document.getElementById('h-category-'+id).value;