feat: support to edit teams

README.md

@@ -1,16 +1,16 @@
 <p align="center">
-    <img alt="Lynx Logo" src="/assets/img/logo.png?v=0.12.0" width="250" />
+    <img alt="Lynx Logo" src="/assets/img/logo.png?v=0.12.1" width="250" />
     <h3 align="center">Lynx</h3>
     <p align="center">A Fast, Secure and Reliable Terraform Backend, Set up in Minutes.</p>
     <p align="center">
         <a href="https://github.com/Clivern/Lynx/actions/workflows/ci.yml">
             <img src="https://github.com/Clivern/Lynx/actions/workflows/server_ci.yml/badge.svg"/>
         </a>
         <a href="https://github.com/Clivern/Lynx/releases">
-            <img src="https://img.shields.io/badge/Version-0.12.0-1abc9c.svg">
+            <img src="https://img.shields.io/badge/Version-0.12.1-1abc9c.svg">
         </a>
         <a href="https://hub.docker.com/r/clivern/lynx/tags">
-            <img src="https://img.shields.io/badge/Docker-0.12.0-1abc9c.svg">
+            <img src="https://img.shields.io/badge/Docker-0.12.1-1abc9c.svg">
         </a>
         <a href="https://github.com/Clivern/terraform-provider-lynx">
             <img src="https://img.shields.io/badge/Terraform-Provider-yellow.svg">

api.yml

@@ -7,7 +7,7 @@ info:
   license:
     name: MIT License
     url: https://github.com/Clivern/Lynx/blob/main/LICENSE
-  version: 0.12.0
+  version: 0.12.1
 externalDocs:
   description: Find out more about lynx
   url: https://github.com/Clivern/Lynx

docker-compose-cluster.yml

@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   app1:
-    image: clivern/lynx:0.12.0
+    image: clivern/lynx:0.12.1
     environment:
       APP_NAME: Lynx
       APP_PORT: 4001
@@ -27,7 +27,7 @@ services:
       - db
 
   app2:
-    image: clivern/lynx:0.12.0
+    image: clivern/lynx:0.12.1
     environment:
       APP_NAME: Lynx
       APP_PORT: 4002
@@ -52,7 +52,7 @@ services:
       - db
 
   app3:
-    image: clivern/lynx:0.12.0
+    image: clivern/lynx:0.12.1
     environment:
       APP_NAME: Lynx
       APP_PORT: 4003

docker-compose-nginx.yml

@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   app:
-    image: clivern/lynx:0.12.0
+    image: clivern/lynx:0.12.1
     environment:
       APP_NAME: Lynx
       APP_PORT: 4000

docker-compose.yml

@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   app:
-    image: clivern/lynx:0.12.0
+    image: clivern/lynx:0.12.1
     environment:
       APP_NAME: Lynx
       APP_PORT: 4000

docs/index.md

@@ -21,8 +21,8 @@ hero:
       icon: edit
 
   download_link:
-    label: Latest Release v0.12.0
-    url: https://github.com/Clivern/Lynx/releases/tag/0.12.0
+    label: Latest Release v0.12.1
+    url: https://github.com/Clivern/Lynx/releases/tag/0.12.1
 
 features:
   rows:

lib/lynx_web/router.ex

@@ -133,7 +133,7 @@ defmodule LynxWeb.Router do
 
   defp add_server_header(conn, _opts) do
     conn
-    |> put_resp_header("x-server-version", "lynx/0.12.0")
+    |> put_resp_header("x-server-version", "lynx/0.12.1")
   end
 
   # Enables LiveDashboard only for development

lib/lynx_web/templates/page/teams.html.heex

@@ -2,6 +2,7 @@
   var _globals = {
     new_team: '<%= gettext "Team created successfully!" %>',
     delete_team_message: '<%= gettext "Team deleted successfully!" %>',
+    update_team_message: '<%= gettext "Team updated successfully!" %>',
     delete_team_alert: '<%= gettext "You are trying to delete a team! are you sure?" %>',
     delete_team_endpoint: '<%= Routes.team_path(@conn, :delete, "UUID") %>',
     update_team_endpoint: '<%= Routes.team_path(@conn, :update, "UUID") %>'
@@ -294,10 +295,8 @@
                                         <td style="text-align: center">${team.projectsCount}</td>
                                         <td style="text-align: center">${formatDatetime(team.createdAt)}</td>
                                         <td>
-                                            <!--
                                             <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>
+                                            <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>
                                       </tr>
                                       <tr v-if="teams.length == 0">
@@ -348,7 +347,7 @@
 
                         <div class="divider m-0"></div>
 
-                        <form action={Routes.team_path(@conn, :create)} method="post" v-on:submit.prevent="addTeamAction">
+                        <form id="add_team_form" action={Routes.team_path(@conn, :create)} method="post" v-on:submit.prevent="addTeamAction">
                             <div class="modal-body">
                                 <div class="row gx-8">
                                     <div class="col-12">
@@ -393,7 +392,7 @@
                     </div>
                 </div>
             </div>
-            <!--
+
             <div class="modal fade" id="edit_team_modal" tabindex="-1" aria-labelledby="editTeamLabel" aria-hidden="true" data-action={Routes.user_path(@conn, :list)}>
                 <div class="modal-dialog modal-dialog-centered">
                     <div class="modal-content">
@@ -413,14 +412,14 @@
                                     <div class="col-12">
                                         <div class="mb-24">
                                             <label class="form-label"><%= gettext "Name" %></label>
-                                            <input type="text" v-model="teamName" @input="slugifyTeamName" class="form-control" name="name" required="required" minlength="2" maxlength="60">
+                                            <input type="text" class="form-control" name="name" required="required" minlength="2" maxlength="60">
                                         </div>
                                     </div>
 
                                     <div class="col-12">
                                         <div class="mb-24">
                                             <label class="form-label"><%= gettext "Slug" %></label>
-                                            <input type="text" v-model="teamSlug" class="form-control" name="slug" required="required" minlength="2" maxlength="60">
+                                            <input type="text" class="form-control" name="slug" required="required" minlength="2" maxlength="60">
                                         </div>
                                     </div>
 
@@ -452,7 +451,6 @@
                     </div>
                 </div>
             </div>
-            -->
         </div>
 
         <footer class="w-100 py-18 px-16 py-sm-24 px-sm-32 hp-bg-color-black-20 hp-bg-color-dark-90">

mix.exs

@@ -5,7 +5,7 @@
 defmodule Lynx.MixProject do
   use Mix.Project
 
-  @version "0.12.0"
+  @version "0.12.1"
 
   def get_version, do: @version
 

priv/static/theme/app/backend.js

@@ -386,7 +386,7 @@ lynx_app.add_team_modal = (Vue, axios, $) => {
                     inputs[item.name] = item.value;
                 });
 
-                inputs["members"] = $("[name='members']").val();
+                inputs["members"] = $("form#add_team_form select[name='members']").val();
 
                 axios.post(_form.attr('action'), inputs)
                     .then((response) => {
@@ -432,11 +432,24 @@ lynx_app.teams_list = (Vue, axios, $) => {
         },
         methods: {
             editTeamAction(id) {
-                console.log("Edit team with ID:", id);
-                //$('input[name="uuid"]').val(id);
-                //$('form#update_team_form').attr('action', function(i, val) {
-                //    return val.replace('UUID', id);
-                //});
+                $('input[name="uuid"]').val(id);
+
+                $('form#update_team_form').attr('action', function(i, val) {
+                    return val.replace('UUID', id);
+                });
+
+                axios.get($("#update_team_form").attr("action"))
+                    .then((response) => {
+                        if (response.status >= 200) {
+                            $('form#update_team_form input[name="name"]').val(response.data.name);
+                            $('form#update_team_form input[name="slug"]').val(response.data.slug);
+                            $('form#update_team_form textarea[name="description"]').val(response.data.description);
+                            $('form#update_team_form select[name="members"]').val(response.data.members);
+                        }
+                    })
+                    .catch((error) => {
+                        show_notification(error.response.data.errorMessage);
+                    });
             },
 
             formatDatetime(datatime) {
@@ -500,6 +513,71 @@ lynx_app.teams_list = (Vue, axios, $) => {
     });
 }
 
+lynx_app.edit_team_modal = (Vue, axios, $) => {
+
+    return new Vue({
+        delimiters: ['${', '}'],
+        el: '#edit_team_modal',
+        data() {
+            return {
+                isInProgress: false,
+                users: []
+            }
+        },
+        mounted() {
+            this.loadData();
+        },
+        methods: {
+            loadData() {
+                axios.get($("#edit_team_modal").attr("data-action"), {
+                        params: {
+                            offset: 0,
+                            limit: 10000
+                        }
+                    })
+                    .then((response) => {
+                        if (response.status >= 200) {
+                            this.users = response.data.users;
+                        }
+                    })
+                    .catch((error) => {
+                        show_notification(error.response.data.errorMessage);
+                    });
+            },
+            updateTeamAction(event) {
+                event.preventDefault();
+                this.isInProgress = true;
+
+                let inputs = {};
+                let _self = $(event.target);
+                let _form = _self.closest("form");
+
+                _form.serializeArray().map((item, index) => {
+                    inputs[item.name] = item.value;
+                });
+
+                inputs["members"] = $("form#update_team_form select[name='members']").val();
+
+                axios.put(_form.attr('action'), inputs)
+                    .then((response) => {
+                        if (response.status >= 200) {
+                            show_notification(_globals.update_team_message);
+
+                            setTimeout(() => {
+                                location.reload();
+                            }, 2000);
+                        }
+                    })
+                    .catch((error) => {
+                        this.isInProgress = false;
+                        // Show error
+                        show_notification(error.response.data.errorMessage);
+                    });
+            }
+        }
+    });
+}
+
 // Users list
 lynx_app.users_list = (Vue, axios, $) => {
 
@@ -528,6 +606,7 @@ lynx_app.users_list = (Vue, axios, $) => {
                 $('form#update_user_form').attr('action', function(i, val) {
                     return val.replace('UUID', id);
                 });
+
                 axios.get($("#update_user_form").attr("action"))
                     .then((response) => {
                         if (response.status >= 200) {
@@ -1319,4 +1398,12 @@ $(document).ready(() => {
             $
         );
     }
+
+    if (document.getElementById("edit_team_modal")) {
+        lynx_app.edit_team_modal(
+            Vue,
+            axios,
+            $
+        );
+    }
 });