feat: add styling to activity certificates (#306)

Co-authored-by: Rui Lopes <76881129+RuiL1904@users.noreply.github.com>
cesium · Sep 25, 2023 · 2b9b137 · 2b9b137
1 parent e8a33fd
commit 2b9b137
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 37 deletions.
diff --git a/config/config.exs b/config/config.exs
@@ -80,7 +80,7 @@ config :icons,
 config :atomic, Atomic.Scheduler,
   jobs: [
     # Runs every midnight:
-    {"@daily", {Atomic.Quantum.CertificateDelivery, :send_certificates, []}}
+    {"0 0 * * *", {Atomic.Quantum.CertificateDelivery, :send_certificates, []}}
   ]
 
 # Import environment specific config. This must remain at the bottom

diff --git a/lib/atomic/quantum/certificate_delivery.ex b/lib/atomic/quantum/certificate_delivery.ex
@@ -17,6 +17,7 @@ defmodule Atomic.Quantum.CertificateDelivery do
   alias Atomic.Mailer
   alias Atomic.Repo
   alias Atomic.Activities.{Activity, ActivityEnrollment}
+  alias Atomic.Organizations.Organization
   alias AtomicWeb.ActivityEmails
 
   @doc """
@@ -31,10 +32,18 @@ defmodule Atomic.Quantum.CertificateDelivery do
   def send_certificates do
     included_enrollments()
     |> Enum.each(fn enrollment ->
-      case generate_certificate(enrollment) do
+      activity =
+        Repo.get_by!(Activity, id: enrollment.activity_id)
+        |> Repo.preload([:organization])
+
+      case generate_certificate(enrollment, activity, activity.organization) do
         {:ok, certificate} ->
           Mailer.deliver(
-            ActivityEmails.activity_certificate_email(enrollment, certificate,
+            ActivityEmails.activity_certificate_email(
+              enrollment,
+              activity,
+              activity.organization,
+              certificate,
               to: enrollment.user.email
             )
           )
@@ -56,11 +65,17 @@ defmodule Atomic.Quantum.CertificateDelivery do
 
   # It uses `wkhtmltopdf` to build it from an HTML template, which
   # is rendered beforehand.
-  defp generate_certificate(%ActivityEnrollment{} = enrollment) do
+  defp generate_certificate(
+         %ActivityEnrollment{} = enrollment,
+         %Activity{} = activity,
+         %Organization{} = organization
+       ) do
     # Create the string corresponding to the HTML to convert
     # to a PDF
     Phoenix.View.render_to_string(AtomicWeb.PDFView, "activity_certificate.html",
-      enrollment: enrollment
+      enrollment: enrollment,
+      activity: activity,
+      organization: organization
     )
     |> PdfGenerator.generate(
       delete_temporary: true,
@@ -76,7 +91,7 @@ defmodule Atomic.Quantum.CertificateDelivery do
         "--margin-bottom",
         "0",
         "-O",
-        "lanpe"
+        "landscape"
       ]
     )
   end

diff --git a/lib/atomic_web/emails/activity_emails.ex b/lib/atomic_web/emails/activity_emails.ex
@@ -4,10 +4,12 @@ defmodule AtomicWeb.ActivityEmails do
   """
   use Phoenix.Swoosh, view: AtomicWeb.EmailView
 
-  def activity_certificate_email(enrollment, certificate, to: email) do
+  def activity_certificate_email(enrollment, activity, organizations, certificate, to: email) do
     base_email(to: email)
-    |> subject("[Atomic] Certificado de Participação em \"#{enrollment.activity.title}\"")
+    |> subject("[Atomic] Certificado de Participação em \"#{activity.title}\"")
     |> assign(:enrollment, enrollment)
+    |> assign(:activity, activity)
+    |> assign(:organizations, organizations)
     |> attachment(certificate)
     |> render_body("activity_certificate.html")
   end

diff --git a/lib/atomic_web/templates/email/activity_certificate.html.eex b/lib/atomic_web/templates/email/activity_certificate.html.eex
@@ -8,7 +8,7 @@
         <div>
             <p>Bom dia <%= @enrollment.user.name %>,</p>
 
-            <p>Gostávamos de agradecer a tua participação na atividade <%= @enrollment.activity.title %>. Enviamos, em anexo,
+            <p>Gostávamos de agradecer a tua participação na atividade <%= @activity.title %>. Enviamos, em anexo,
             o certificado de participação. Alternativamente, podes consultar o certificado no teu perfil da plataforma.
             </p>
 

diff --git a/lib/atomic_web/templates/pdf/activity_certificate.html.eex b/lib/atomic_web/templates/pdf/activity_certificate.html.eex
@@ -1,19 +1,73 @@
 <!DOCTYPE html>
 <html>
-   <head>
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
-   </head>
-   <body>
-        <div>
-            <h1>Certificado de Participação</h1>
-            <h2><%= @enrollment.activity.title %></h2>
-
-            <p>
-            Certifica-se que <%= @enrollment.user.name %> participou na atividade <%= @enrollment.activity.title %>.
-             </p>
-
-            <p>Este certificado foi gerado automaticamente pela plataforma <i>open-source</i> de gestão de núcleos <a href="https://github.com/cesium/atomic">Atomic</a></p>
-        </div>
-    </body>
+<head>
+    <title>Certificado <%= @activity.title %></title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <style>
+        /* Inline styles */
+        .container {
+            background: url('<%= AtomicWeb.Endpoint.url() <> "/images/atomic_background.svg" %>') no-repeat center;
+            text-align: center;
+            width: 1500px;
+            height: 1045px;
+            margin: auto;
+            padding: 0;
+        }
+        .title {
+            font-size: 62px;
+            color: #fb923c;
+            font-weight: bolder;
+            padding-top: 36px;
+            margin-bottom: 120px;
+        }
+        .content {
+            font-size: 24px;
+            text-align: justify;
+            padding: 32px;
+        }
+        .name {
+            font-size: 72px;
+            font-weight: bold;
+            text-align: center;
+            text-decoration: underline;
+            width: 100%;
+            display: block;
+            margin-top: 32px;
+            margin-bottom: 32px;
+        }
+        .organization {
+            font-size: 24px;
+            text-align: justify;
+        }
+        .note {
+            position: absolute;
+            bottom: 0;
+            font-size: 12px;
+            text-align: center;
+            padding-left: 24px;
+            padding-right: 24px;
+            padding-bottom: 10px;
+        }
+        .note a {
+            color: indigo;
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="title">Certificado de Participação</div>
+        <p class="content">
+            Para os devidos efeitos, certifica-se que
+        </p>
+        <span class="name"><%= @enrollment.user.name %></span>
+        <p class="content">
+            participou na atividade <span class="organization"><%= @activity.title %></span>, organizada pelo(a) <span class="organization"><%= @organization.name %></span>.
+        </p>
+        <p class="note">
+            Este certificado foi gerado automaticamente pela plataforma <i>open-source</i> de gestão de núcleos <a href="https://github.com/cesium/atomic">Atomic</a>, sendo da exclusiva responsabilidade do Centro de Estudantes de Engenharia de Informática da Universidade do Minho, com a devida autorização da organização dinamizadora da atividade.
+        </p>
+    </div>
+</body>
 </html>
diff --git a/lib/atomic_web/views/helpers.ex b/lib/atomic_web/views/helpers.ex
@@ -272,22 +272,22 @@ defmodule AtomicWeb.Helpers do
     |> URI.to_string()
   end
 
-  @doc """
-    Appends two lists when a condition is true
+  @doc ~S"""
+  Appends two lists when a condition is true
 
-    ## Examples
+  ## Examples
 
-        iex> append_if([1, 2, 3], true, [4])
-        [1, 2, 3, 4]
+      iex> append_if([1, 2, 3], true, [4])
+      [1, 2, 3, 4]
 
-        iex> append_if([1, 2, 3], false, [4])
-        [1, 2, 3]
+      iex> append_if([1, 2, 3], false, [4])
+      [1, 2, 3]
 
-        iex> append_if([1, 2, 3], false, [4])
-        [1, 2, 3]
+      iex> append_if([1, 2, 3], false, [4])
+      [1, 2, 3]
 
-        iex> append_if([1, 2, 3], true, [4, 5, 6])
-        [1, 2, 3, 4, 5, 6]
+      iex> append_if([1, 2, 3], true, [4, 5, 6])
+      [1, 2, 3, 4, 5, 6]
   """
   def append_if(list, condition, item) when is_list(item) do
     if condition do

diff --git a/mix.exs b/mix.exs
@@ -86,7 +86,7 @@ defmodule Atomic.MixProject do
       # tools
       {:timex, "~> 3.0"},
       {:qrcode_ex, "~> 0.1.1"},
-      {:pdf_generator, "~>0.6.2"},
+      {:pdf_generator, "~> 0.6.2"},
       {:quantum, "~> 3.0"},
       {:credo, "~> 1.6", only: [:dev, :test], runtime: false}
     ]