From da0b327ac5883d693a9732e6d3493be76e3df003 Mon Sep 17 00:00:00 2001
From: Clivern <hello@clivern.com>
Date: Tue, 25 Oct 2022 12:48:45 +0200
Subject: [PATCH] feat: show description

---
 .../templates/page/projects.html.heex         | 24 +++++++++++++++++++
 .../templates/page/snapshots.html.heex        | 24 +++++++++++++++++++
 lib/lynx_web/templates/page/teams.html.heex   | 24 +++++++++++++++++++
 priv/static/theme/app/backend.js              | 12 ++++++++++
 4 files changed, 84 insertions(+)

diff --git a/lib/lynx_web/templates/page/projects.html.heex b/lib/lynx_web/templates/page/projects.html.heex
index 6c64ce4..7ed7efe 100644
--- a/lib/lynx_web/templates/page/projects.html.heex
+++ b/lib/lynx_web/templates/page/projects.html.heex
@@ -290,6 +290,7 @@
                                         <td style="text-align: center">${project.team.name}</td>
                                         <td style="text-align: center">${formatDatetime(project.createdAt)}</td>
                                         <td>
+                                            <button @click="showProjectInfoAction(project.description)" class="btn btn-dashed btn-sm text-black-100 border-black-100 hp-hover-text-color-black-80 hp-hover-border-color-black-80" data-bs-toggle="modal" data-bs-target="#show_project_info_modal"><%= gettext "Info" %></button>
                                             <button @click="viewProjectAction(project.id)" class="btn btn-dashed btn-sm text-warning-100 border-warning-100 hp-hover-text-color-warning-80 hp-hover-border-color-warning-80"><%= gettext "View" %></button>
                                             <button @click="editProjectAction(project.id)" class="btn btn-dashed btn-sm text-black-100 border-black-100 hp-hover-text-color-black-80 hp-hover-border-color-black-80" data-bs-toggle="modal" data-bs-target="#edit_project_modal"><%= gettext "Edit" %></button>
                                             <button @click="deleteProjectAction(project.id)" class="btn btn-dashed btn-sm text-danger border-danger hp-hover-text-color-danger-2 hp-hover-border-color-danger-2"><%= gettext "Delete" %></button>
@@ -331,6 +332,29 @@
                 </div>
             </div>
 
+            <div class="modal fade" id="show_project_info_modal" tabindex="-1" aria-labelledby="showProjectInfoLabel" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-centered">
+                    <div class="modal-content">
+                        <div class="modal-header py-16 px-24">
+                            <h5 class="modal-title" id="showProjectInfoLabel"><%= gettext "Project Info" %></h5>
+                            <button type="button" class="btn-close hp-bg-none d-flex align-items-center justify-content-center" data-bs-dismiss="modal" aria-label="Close">
+                                <i class="ri-close-line hp-text-color-dark-0 lh-1" style="font-size: 24px;"></i>
+                            </button>
+                        </div>
+
+                        <div class="divider m-0"></div>
+
+                        <div class="modal-body">
+                            <div class="row gx-8">
+                                <div class="col-12">
+                                    <div class="mb-24" id="project_info_modal_content"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <div class="modal fade" id="add_project_modal" tabindex="-1" aria-labelledby="addNewProjectLabel" aria-hidden="true" data-action={Routes.team_path(@conn, :list)}>
                 <div class="modal-dialog modal-dialog-centered">
                     <div class="modal-content">
diff --git a/lib/lynx_web/templates/page/snapshots.html.heex b/lib/lynx_web/templates/page/snapshots.html.heex
index 4dc319b..55e9f84 100644
--- a/lib/lynx_web/templates/page/snapshots.html.heex
+++ b/lib/lynx_web/templates/page/snapshots.html.heex
@@ -313,6 +313,7 @@
                                         <td style="text-align: center">${snapshot.team.name}</td>
                                         <td style="text-align: center">${formatDatetime(snapshot.createdAt)}</td>
                                         <td>
+                                            <button @click="showSnapshotInfoAction(snapshot.description)" class="btn btn-dashed btn-sm text-black-100 border-black-100 hp-hover-text-color-black-80 hp-hover-border-color-black-80" data-bs-toggle="modal" data-bs-target="#show_snapshot_info_modal"><%= gettext "Info" %></button>
                                             <button @click="restoreSnapshotAction(snapshot.id)" class="btn btn-dashed btn-sm text-warning-100 border-warning-100 hp-hover-text-color-warning-80 hp-hover-border-color-warning-80"><%= gettext "Restore" %></button>
                                             <button @click="deleteSnapshotAction(snapshot.id)" class="btn btn-dashed btn-sm text-danger border-danger hp-hover-text-color-danger-2 hp-hover-border-color-danger-2"><%= gettext "Delete" %></button>
                                         </td>
@@ -353,6 +354,29 @@
                 </div>
             </div>
 
+            <div class="modal fade" id="show_snapshot_info_modal" tabindex="-1" aria-labelledby="showSnapshotInfoLabel" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-centered">
+                    <div class="modal-content">
+                        <div class="modal-header py-16 px-24">
+                            <h5 class="modal-title" id="showSnapshotInfoLabel"><%= gettext "Snapshot Info" %></h5>
+                            <button type="button" class="btn-close hp-bg-none d-flex align-items-center justify-content-center" data-bs-dismiss="modal" aria-label="Close">
+                                <i class="ri-close-line hp-text-color-dark-0 lh-1" style="font-size: 24px;"></i>
+                            </button>
+                        </div>
+
+                        <div class="divider m-0"></div>
+
+                        <div class="modal-body">
+                            <div class="row gx-8">
+                                <div class="col-12">
+                                    <div class="mb-24" id="snapshot_info_modal_content"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <div class="modal fade" id="add_snapshot_modal" tabindex="-1" aria-labelledby="addNewSnapshotLabel" aria-hidden="true" data-team={Routes.team_path(@conn, :list)} data-project={Routes.project_path(@conn, :list)} data-environment={Routes.environment_path(@conn, :list, "UUID")}>
                 <div class="modal-dialog modal-dialog-centered">
                     <div class="modal-content">
diff --git a/lib/lynx_web/templates/page/teams.html.heex b/lib/lynx_web/templates/page/teams.html.heex
index 3be9cdc..2032844 100644
--- a/lib/lynx_web/templates/page/teams.html.heex
+++ b/lib/lynx_web/templates/page/teams.html.heex
@@ -290,6 +290,7 @@
                                         <td style="text-align: center">${team.projectsCount}</td>
                                         <td style="text-align: center">${formatDatetime(team.createdAt)}</td>
                                         <td>
+                                            <button @click="showTeamInfoAction(team.description)" class="btn btn-dashed btn-sm text-black-100 border-black-100 hp-hover-text-color-black-80 hp-hover-border-color-black-80" data-bs-toggle="modal" data-bs-target="#show_team_info_modal"><%= gettext "Info" %></button>
                                             <button @click="editTeamAction(team.id)" class="btn btn-dashed btn-sm text-black-100 border-black-100 hp-hover-text-color-black-80 hp-hover-border-color-black-80" data-bs-toggle="modal" data-bs-target="#edit_team_modal"><%= gettext "Edit" %></button>
                                             <button @click="deleteTeamAction(team.id)" class="btn btn-dashed btn-sm text-danger border-danger hp-hover-text-color-danger-2 hp-hover-border-color-danger-2"><%= gettext "Delete" %></button>
                                         </td>
@@ -330,6 +331,29 @@
                 </div>
             </div>
 
+            <div class="modal fade" id="show_team_info_modal" tabindex="-1" aria-labelledby="showTeamInfoLabel" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-centered">
+                    <div class="modal-content">
+                        <div class="modal-header py-16 px-24">
+                            <h5 class="modal-title" id="showTeamInfoLabel"><%= gettext "Team Info" %></h5>
+                            <button type="button" class="btn-close hp-bg-none d-flex align-items-center justify-content-center" data-bs-dismiss="modal" aria-label="Close">
+                                <i class="ri-close-line hp-text-color-dark-0 lh-1" style="font-size: 24px;"></i>
+                            </button>
+                        </div>
+
+                        <div class="divider m-0"></div>
+
+                        <div class="modal-body">
+                            <div class="row gx-8">
+                                <div class="col-12">
+                                    <div class="mb-24" id="team_info_modal_content"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <div class="modal fade" id="add_team_modal" tabindex="-1" aria-labelledby="addNewTeamLabel" aria-hidden="true" data-action={Routes.user_path(@conn, :list)}>
                 <div class="modal-dialog modal-dialog-centered">
                     <div class="modal-content">
diff --git a/priv/static/theme/app/backend.js b/priv/static/theme/app/backend.js
index f53f0c8..c7b01fd 100644
--- a/priv/static/theme/app/backend.js
+++ b/priv/static/theme/app/backend.js
@@ -431,6 +431,10 @@ lynx_app.teams_list = (Vue, axios, $) => {
             }
         },
         methods: {
+            showTeamInfoAction(description) {
+                $("div#team_info_modal_content").text(description);
+            },
+
             editTeamAction(id) {
                 let current = $('form#update_team_form input[name="uuid"]').val()
                 if (current != "") {
@@ -762,6 +766,10 @@ lynx_app.projects_list = (Vue, axios, $) => {
             }
         },
         methods: {
+            showProjectInfoAction(description) {
+                $("div#project_info_modal_content").text(description);
+            },
+
             editProjectAction(id) {
                 let current = $('form#update_project_form input[name="uuid"]').val()
                 if (current != "") {
@@ -1243,6 +1251,10 @@ lynx_app.snapshots_list = (Vue, axios, $) => {
             }
         },
         methods: {
+            showSnapshotInfoAction(description) {
+                $("div#snapshot_info_modal_content").text(description);
+            },
+
             formatDatetime(datatime) {
                 return format_datetime(datatime);
             },