style(company/report-form):fixed company rating styles and added cris…

…py tailwind form to report form

company/migrations/0003_rate.py

@@ -1,25 +1,46 @@
 # Generated by Django 4.2.5 on 2023-12-11 13:07
 
+import django.db.models.deletion
 from django.conf import settings
 from django.db import migrations, models
-import django.db.models.deletion
 
 
 class Migration(migrations.Migration):
-
     dependencies = [
         migrations.swappable_dependency(settings.AUTH_USER_MODEL),
-        ('company', '0002_alter_company_options'),
+        ("company", "0002_alter_company_options"),
     ]
 
     operations = [
         migrations.CreateModel(
-            name='Rate',
+            name="Rate",
             fields=[
-                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('score', models.DecimalField(decimal_places=2, max_digits=3)),
-                ('company', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='users_reviews', to='company.company')),
-                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='evaluated_companies', to=settings.AUTH_USER_MODEL)),
+                (
+                    "id",
+                    models.BigAutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                ("score", models.DecimalField(decimal_places=2, max_digits=3)),
+                (
+                    "company",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="users_reviews",
+                        to="company.company",
+                    ),
+                ),
+                (
+                    "user",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="evaluated_companies",
+                        to=settings.AUTH_USER_MODEL,
+                    ),
+                ),
             ],
         ),
     ]

company/models.py

@@ -23,7 +23,7 @@ def compute_score(self) -> float:
         score = 5 - min(sub_score, 5)
 
         return round(score, 2)
-    
+
     def compute_score_users(self) -> "float | str":
         rates = self.user_ratings.all()
         if len(rates) == 0:
@@ -32,7 +32,7 @@ def compute_score_users(self) -> "float | str":
             sub_score_users = 0
             for rate in rates:
                 sub_score_users += rate.score
-            score_users = round(sub_score_users/len(rates), 2)
+            score_users = round(sub_score_users / len(rates), 2)
         return score_users
 
     class Meta:
@@ -46,4 +46,4 @@ class Rate(models.Model):
     user = models.ForeignKey(
         "user.User", on_delete=models.CASCADE, related_name="rated_companies"
     )
-    score = models.IntegerField()
+    score = models.IntegerField()

company/templates/companies/company.html

@@ -8,7 +8,9 @@ <h1 class="text-2xl font-bold">{{ company.name }}</h1>
 </div>
 
 <div>
-  <div class="flex w-full mb-6">
+
+  <div class="flex items-center w-full mb-6">
+
     <div class="flex flex-col items-center gap-4 place-items-center">
       <img class="w-20 h-20" src="{{company.logo.url}}" alt="Logo Empresa" />
       {% if user.is_authenticated %}
@@ -22,56 +24,71 @@ <h1 class="text-2xl font-bold">{{ company.name }}</h1>
       {% endif %}
     </div>
 
-    <div class="mx-10 divider divider-horizontal"></div>
-    <div class="grid h-20 flex-grow place-items-center">
-      <div class="stat-title text-xl">Nota</div>
-      <div class="stat-value text-xl
-      {% if score > 3.75 %}
-       bg-green-400 
-      {% elif score > 2.5 %}
-       bg-yellow-400 
-      {% else %}
-       bg-red-400 
-      {% endif %}
-      bg-opacity-40 rounded-xl p-2">
-        {{score}}/5
-      </div>
+    <div class="mx-5 divider divider-horizontal"></div>
+
+    <div class="flex flex-col gap-6 items-center">
+      <h2 class="text-xl font-medium">Avaliações</h2>
+
+      <div class="flex flex-col gap-2 md:flex md:flex-row">
+
+        <div class="grid h-20 flex-grow place-items-center">
 
+          <div class="stat-title text-xl">Pense Nisso</div>
+
+          <div class="stat-value text-xl
+          {% if score > 3.75 %}
+           bg-green-400 
+          {% elif score > 2.5 %}
+           bg-yellow-400 
+          {% else %}
+           bg-red-400 
+          {% endif %}
+          bg-opacity-40 rounded-xl p-2">
+            {{score}}/5
+          </div>
 
-      <p class="flex items-center text-sm text-gray-500 dark:text-gray-400"> Critérios de avaliação do site <button data-popover-target="popover-description" data-popover-placement="bottom-end" type="button"><svg class="w-4 h-4 ms-2 text-gray-400 hover:text-gray-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg><span class="sr-only">Show information</span></button></p>
-      <div data-popover id="popover-description" role="tooltip" class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
-          <div class="p-3 space-y-2">
-              <h3 class="font-semibold text-gray-900 dark:text-white">Critérios de Avaliação</h3>
-              <p>O Pense Nisso e sua equipe de moderação acredita no uso da tecnologia para divulgar informação segura e confiável. Para complementar o alcance e praticidade de nosa plataforma desenvolvemos um sistema de avaliação de empresas próprio baseado em alguns parâmetros de nossa base de dados para melhor atender nossos usuários. </p>
-              <h3 class="font-semibold text-gray-900 dark:text-white">Cálculo da Nota</h3>
-              <p>O cálculo envolvido nesse sistema de notas leva em consideração uma relação exponencial entre a nota e as denúncias que recebemos a todo momento. Levando em conta não somente a quantidade de denúnicas, mas também a gravidade e o tempo desde quando ocorreram.</p>
-        </svg></a>
+          <p class="flex items-center text-sm text-gray-500 dark:text-gray-400"> Critérios de avaliação <button data-popover-target="popover-description" data-popover-placement="bottom-end" type="button"><svg class="w-4 h-4 ms-2 text-gray-400 hover:text-gray-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg><span class="sr-only">Show information</span></button></p>
+
+          <div data-popover id="popover-description" role="tooltip" class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
+
+              <div class="p-3 space-y-2">
+                  <h3 class="font-semibold text-gray-900 dark:text-white">Critérios de Avaliação</h3>
+                  <p>O Pense Nisso e sua equipe de moderação acredita no uso da tecnologia para divulgar informação segura e confiável. Para complementar o alcance e praticidade de nosa plataforma desenvolvemos um sistema de avaliação de empresas próprio baseado em alguns parâmetros de nossa base de dados para melhor atender nossos usuários. </p>
+                  <h3 class="font-semibold text-gray-900 dark:text-white">Cálculo da Nota</h3>
+                  <p>O cálculo envolvido nesse sistema de notas leva em consideração uma relação exponencial entre a nota e as denúncias que recebemos a todo momento. Levando em conta não somente a quantidade de denúnicas, mas também a gravidade e o tempo desde quando ocorreram.</p>
+                  </svg></a>
+              </div>
+
+              <div data-popper-arrow></div>
           </div>
-          <div data-popper-arrow></div>
-      </div>
 
+        </div>
 
-    </div>
+        <div class="grid h-20 flex-grow place-items-center">  
 
-    <div class="mx-3 divider-horizontal"></div>
-    <div class="grid h-20 flex-grow place-items-center">  
-      <div class="stat-title text-xl">Nota Usuários</div>
-      <div class="stat-value text-xl
-      {% if score_users > 3.75 %}
-       bg-green-400 
-      {% elif score_users > 2.5 %}
-       bg-yellow-400 
-      {% else %}
-       bg-red-400 
-      {% endif %}
-      bg-opacity-40 rounded-xl p-2">
-        {{score_users}}/5
-      </div>
+          <div class="stat-title text-xl">Cosumidores</div>
+
+          <div class="stat-value text-xl
+          {% if score_users > 3.75 %}
+           bg-green-400 
+          {% elif score_users > 2.5 %}
+           bg-yellow-400 
+          {% else %}
+           bg-red-400 
+          {% endif %}
+          bg-opacity-40 rounded-xl p-2">
+            {{score_users}}/5
+          </div>
+
+        </div>
+
+    </div>
 
+    <div class="flex flex-col items-center">
       {% if user.is_authenticated %}
         {% if user in user_ratings %}
-          <p>você já avaliou esta empresa</p>
-          <a class="btn" href="{% url "company:change" company.id%}">Mudar Avaliação</a>
+          <p>Você já avaliou esta empresa</p>
+          <a class="btn bg-blue-700 bg-opacity-20 hover:bg-blue-700 hover:bg-opacity-40" href="{% url "company:change" company.id%}">Mudar Avaliação</a>
         {% else %}
           <form method="post">
             {% csrf_token %}
@@ -84,27 +101,28 @@ <h3 class="font-semibold text-gray-900 dark:text-white">Cálculo da Nota</h3>
               <input type="radio" name="rate" class="mask mask-star-2 bg-orange-400" value="5"/>
             </div>
 
-            <input type="submit" value="Avaliar" class="btn normal-case bg-slate-300">
+            <input type="submit" value="Avaliar" class="btn normal-case bg-blue-700 bg-opacity-20 hover:bg-blue-700 hover:bg-opacity-40">
           </form>
         {% endif %}  
 
       {% endif %}
-
     </div>
-
-  </div>
 
-<div class="description px-4 py-2 w-80 bg-blue-700 bg-opacity-20 rounded-[10px] my-6">
+  </div> 
+</div>
+</div>
+
+<div class="w-10/12 description px-4 py-2 w-80 bg-blue-700 bg-opacity-20 rounded-[10px] my-6">
   <h3 class="flex flex-row items-center gap-2 text-lg font-bold"><ion-icon name="chatbox-ellipses"></ion-icon> Sobre a empresa</h3>
   <p>{{ company.description }}</p>
 </div>
 
-<div class="top-report px-4 py-2 w-80 bg-red-200 rounded-[10px] my-6">
+<div class="w-10/12 top-report px-4 py-2 w-80 bg-red-200 rounded-[10px] my-6">
   <h3 class="flex flex-row items-center gap-2 text-lg font-bold"><ion-icon class="text-red-600" name="alert-circle"></ion-icon> Principal Denuncia</h3>
 </div>
 
-<div>
-  <ul class="my-8 infos-pages flex flex-row justify-around items-center">
+<div class="w-10/12">
+  <ul class="w-full my-8 infos-pages flex flex-row justify-around items-center">
     <li><a href="{% url 'company:reports' company.id %}" class="btn">Denúncias</a></li>
     <li><a href="{% url 'company:lawsuits' company.id %}" class="btn">Processos</a></li>
     <li><a href="{% url 'company:news' company.id %}" class="btn">Notícias</a></li>

company/tests.py

@@ -50,16 +50,16 @@ def test_update_company_score(self):
         )
         self.assertEquals(self.company.compute_score(), 3.89)
         print("Teste Company-Model-3: Score atualizado com sucesso")
-    
+
     def test_rating(self):
         self.assertEquals(self.company.compute_score_users(), 5)
         print("Teste Company-Model-4: Rate computado com sucesso")
-    
+
     def test_new_rating(self):
         Rate.objects.create(company=self.company, user=self.user2, score=4)
         self.assertEquals(self.company.compute_score_users(), 4.5)
         print("Teste Company-Model-5: Rate atualizado com sucesso")
-    
+
 
 class CompanyViewTest(TestCase):
     def setUp(self):

company/views.py

@@ -34,7 +34,7 @@ def post(self, request: HttpRequest, *args, **kwargs) -> HttpResponse:
         context = self.get_context_data(**kwargs)
         print(request.user)
         rate = Rate(company=context["company"], user=request.user, score=int(query))
-        
+
         rate.save()
         return super().render_to_response(self.get_context_data(**kwargs))
 
@@ -46,6 +46,7 @@ def change_rate(request: HttpRequest, company_id: int) -> HttpResponse:
 
     return redirect("company:company", pk=company_id)
 
+
 def favorite_company(request: HttpRequest, company_id: int) -> HttpResponse:
     company = get_object_or_404(Company, pk=company_id)
     if company in request.user.favorite_companies.all():

infos/forms.py

@@ -1,4 +1,5 @@
 from django import forms
+from django.forms import widgets
 
 from company.models import Company
 
@@ -29,8 +30,14 @@ class ReportForm(forms.Form):
         empty_label=STRING_EMPTY_CATEGORY,
     )
     link = forms.URLField(label=STRING_LINK)
-    description = forms.CharField(label=STRING_DESCRIPTION, max_length=300)
-    date = forms.DateField(label=STRING_DATE)
+    description = forms.CharField(
+        label=STRING_DESCRIPTION,
+        max_length=300,
+        widget=forms.Textarea(attrs={"cols": "45", "rows": "8"}),
+    )
+    date = forms.DateField(
+        label=STRING_DATE, widget=widgets.DateInput(attrs={"type": "date"})
+    )
     contact_permission = forms.BooleanField(
         label=STRING_CONTACT, required=False, initial=False
     )

infos/templates/report.html

@@ -1,4 +1,5 @@
 {% extends "report_template.html" %}
+{% load crispy_forms_tags %}
 
 {% block title %}
 Denuncie - Pense Nisso
@@ -7,7 +8,9 @@
 {% block form_content %}
     <form action="/info/report/" method="post">
         {% csrf_token %}
-        {{ form }}
-        <input type="submit" value="Enviar">
+        {{ form|crispy }}
+        <div class="flex flex-nowrap justify-center space-x-10 mt-2 w-full">
+            <input class="text-white my-3 btn bg-red-500 hover:bg-red-600"type="submit" value="Enviar Denúncia">
+        </div>
     </form>
 {% endblock %}

infos/templates/report_template.html

@@ -1,15 +1,18 @@
 {% extends "global/base.html" %}
 
 {% block content %}
-<center>
-    <h1>
-        Denuncie uma Empresa
+<div class="flex flex-column justify-center items-center bg-red-400 text-white w-full h-10 text-center my-6">
+    <h1 class="text-2xl font-bold">
+        <ion-icon name="megaphone"></ion-icon> Denuncie
     </h1>
-    <p>
-        {% block errors %}
-        {% endblock %}
-    </p>
+</div>
+
+<p>
+    {% block errors %}
+    {% endblock %}
+</p>
+<div class="flex flex-col justify-start">
     {% block form_content %}
     {% endblock %}
-</center>
+</div>
 {% endblock %}