wrangling a form to create groups using LiveView #220

Author: nelsonic

BUILDIT.md

@@ -31,6 +31,7 @@ it in **30 minutes**. 🏁
   - [10.6 Group _People_](#106-group-people)
   - [10.7 _Test_ `group_people.ex`](#107-test-group_peopleex)
   - [10.8 Make `group_people_test.exs` pass](#108-make-group_people_testexs-pass)
+    - [10.9.1 Add Font Awesome Icons](#1091-add-font-awesome-icons)
 
 <br />
 
@@ -351,7 +352,8 @@ You should see the following:
 ![groups-liveview](https://user-images.githubusercontent.com/194400/197360963-fedeccf7-a096-4a94-b95d-4457cae72f0b.png)
 
 Don't worry, all of this UI will be replaced shortly.
-This is just to confirm we have Tailwind and LiveView working.
+This is just to confirm we have 
+`Tailwind` and `LiveView` _working_.
 
 ## 10.5 Create `groups_live_test.exs`
 
@@ -684,3 +686,5 @@ of a **_single_ page**
 because we expect this to be
 used in the context of our **Mobile-first `App`**.
 
+### 10.9.1 Add Font Awesome Icons
+

assets/css/app.css

@@ -2,6 +2,7 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+
 /* This file is for your main application css. */
 
 /* @import "./phoenix.css"; */

config/config.exs

@@ -47,7 +47,7 @@ config :auth_plug,
   api_key: System.get_env("AUTH_API_KEY")
 
 config :tailwind,
-  version: "3.2.0",
+  version: "3.1.8",
   default: [
     args: ~w(
       --config=tailwind.config.js

lib/auth/init/roles.ex

@@ -3,57 +3,57 @@ defmodule Auth.InitRoles do
   def roles do
     [
       %{
-        name: "superadmin", 
-        desc: "With great power comes great responsibility", 
+        name: "superadmin",
+        desc: "With great power comes great responsibility",
         person_id: 1,
         # id: 1,
         permissions: "grant_admin_role"
       },
       %{
-        name: "admin", 
-        desc: "Can perform all system administration tasks", 
+        name: "admin",
+        desc: "Can perform all system administration tasks",
         person_id: 1,
         # id: 2,
         permissions: "manage_people, grant_non_admin_role"
       },
       %{
-        name: "moderator", 
-        desc: "Can view and neutrally moderate any content. Can ban rule-breakers. Cannot delete.", 
+        name: "moderator",
+        desc: "Can view and neutrally moderate any content. Can ban rule-breakers. Cannot delete.",
         person_id: 1,
         # id: 3,
         permissions: "edit_any_content, lock_content, unpublish_content, ban_rule_breaking_people, view_deleted"
       },
       %{
-        name: "creator", 
-        desc: "Can create any content. Can edit and delete their own content.", 
+        name: "creator",
+        desc: "Can create any content. Can edit and delete their own content.",
         person_id: 1,
         # id: 4,
         permissions: "create_content, upload_images, edit_own_content, delete_own_content, invite_people"
       },
       %{
-        name: "commenter", 
-        desc: "Can comment on content where commenting is available.", 
+        name: "commenter",
+        desc: "Can comment on content where commenting is available.",
         person_id: 1,
         # id: 5,
         permissions: "comment, flag_comments, flag_content"
       },
       %{
-        name: "subscriber", 
-        desc: "Subscribes for updates e.g. newsletter or content from a specific person. Cannot comment until verified.", 
+        name: "subscriber",
+        desc: "Subscribes for updates e.g. newsletter or content from a specific person. Cannot comment until verified.",
         person_id: 1,
         # id: 6,
         permissions: "subscribe, give_feedback"
       },
       %{
-        name: "banned", 
-        desc: "Can still login to see their content but cannot perform any other action.", 
+        name: "banned",
+        desc: "Can still login to see their content but cannot perform any other action.",
         person_id: 1,
         # id: 7,
         permissions: "view_content, view_profile, delete_own_content, delete_own_profile"
       },
       %{
-        name: "app_admin", 
-        desc: "Can manage their own App(s).", 
+        name: "app_admin",
+        desc: "Can manage their own App(s).",
         person_id: 1,
         # id: 8,
         permissions: "manage_own_apps, create_content, upload_images, edit_own_content, delete_own_content, invite_people"
@@ -66,4 +66,4 @@ defmodule Auth.InitRoles do
       Auth.Role.upsert_role(role)
     end)
   end
-end
+end

lib/auth_web.ex

@@ -59,6 +59,14 @@ defmodule AuthWeb do
     end
   end
 
+  def component do
+    quote do
+      use Phoenix.Component
+
+      unquote(view_helpers())
+    end
+  end
+
   def router do
     quote do
       use Phoenix.Router
@@ -80,6 +88,7 @@ defmodule AuthWeb do
     quote do
       # Use all HTML functionality (forms, tags, etc)
       use Phoenix.HTML
+      import Phoenix.Component
       use PetalComponents
 
       # Import LiveView and .heex helpers (live_render, live_patch, <.form>, etc)

lib/auth_web/endpoint.ex

@@ -10,11 +10,9 @@ defmodule AuthWeb.Endpoint do
     signing_salt: "Fir8x4nA"
   ]
 
-  socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]
+  socket "/live", Phoenix.LiveView.Socket,
+  websocket: [connect_info: [session: @session_options]]
 
-  # socket "/socket", AuthWeb.UserSocket,
-  #   websocket: true,
-  #   longpoll: false
 
   # Serve at "/" the static files from "priv/static" directory.
   #
@@ -35,10 +33,6 @@ defmodule AuthWeb.Endpoint do
     plug Phoenix.Ecto.CheckRepoStatus, otp_app: :auth
   end
 
-  # plug Phoenix.LiveDashboard.RequestLogger,
-  #   param_key: "request_logger",
-  #   cookie_key: "request_logger"
-
   plug Plug.RequestId
   plug Plug.Telemetry, event_prefix: [:phoenix, :endpoint]
 

lib/auth_web/live/groups_live.ex

@@ -1,7 +1,28 @@
 defmodule AuthWeb.GroupsLive do
   use AuthWeb, :live_view
+  alias Phoenix.Socket.Broadcast
+  @topic "live"
 
   def mount(_params, _session, socket) do
     {:ok, socket}
   end
+
+
+  @impl true
+  def handle_event("create", %{"name" => name, "desc" => desc}, socket) do
+    # person_id = get_person_id(socket.assigns)
+
+    # Item.create_item_with_tags(%{
+    #   text: text,
+    #   # person_id: person_id,
+    #   status: 2,
+    #   tags: tags
+    # })
+    dbg(name)
+    dbg(desc)
+
+    AuthWeb.Endpoint.broadcast(@topic, "update", :create)
+    {:noreply, socket}
+  end
+
 end

lib/auth_web/live/groups_live.html.heex

@@ -1,5 +1,67 @@
-<h1 class="w-full text-center text-2xl text-white font-bold 
-    bg-gradient-to-r from-green-400 to-blue-500 p-4">
-  <!-- <a class="float-left" href="/">back to the app</a> -->
-  Groups LiveView!
-</h1>
+<div class="text-center text-2xl text-white font-bold 
+    bg-emerald-400 p-4">
+  <div class="inline-flex items-center px-2 py-1 mr-2 h-9
+   text-gray-800 rounded-md"
+    phx-click="delete" phx-value-id={}>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" 
+      viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" 
+      class="w-8 h-8 mr-2">
+      <path stroke-linecap="round" stroke-linejoin="round" 
+      d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+    </svg>
+    Groups
+  </div>
+</div>
+
+
+<!--  New Button Works just hiding it for now ...
+<button class="inline-flex items-center px-2 py-1 mr-2 h-9
+bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-md"
+  phx-click="delete" phx-value-id={}>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" 
+      viewBox="0 0 24 24" 
+      stroke-width="1.5" stroke="currentColor" 
+      class="w-6 h-6 float-right">
+    <path stroke-linecap="round" stroke-linejoin="round" 
+      d="M12 4.5v15m7.5-7.5h-15" />
+  </svg>
+  New
+</button>
+-->
+
+<div class="px-1">
+<form phx-submit="create" 
+  class="w-full lg:w-3/4 lg:max-w-lg text-center mx-auto">
+
+  <div class="py-2 px-2 border-2 border-indigo-600">
+    <label>Group name:</label>
+    <input type="text" placeholder="short and descriptive" name="name">
+  </div>
+
+  <div class="py-2 px-2 border-2 border-red-600">
+    <label>Description:</label>
+    <input type="text" placeholder="more detail as needed" name="desc">
+  </div>
+
+    <div class="flex justify-end mr-1">
+      <button class="inline-flex items-center px-2 py-1 mt-1 h-9
+        bg-green-700 hover:bg-green-800 text-white rounded-md">
+        <svg xmlns="http://www.w3.org/2000/svg" 
+          class="h-5 w-5 mr-2" fill="none" 
+          viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+            d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z"
+          />
+        </svg>
+        Create
+      </button>
+    </div>
+
+
+  <p class="pt-3">
+  List the groups I am a member of,
+  or hide this section.
+  </p>
+
+  </form>
+</div>