Skip to content

Commit

Permalink
refactor code to components
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielsp45
danielsp45 committed Sep 26, 2023
1 parent 2720eb3 commit 84c99b9
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 73 deletions.
5 changes: 5 additions & 0 deletions assets/css/app.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* Hide password reveal button in MS Edge */
::-ms-reveal {
display: none;
}
68 changes: 68 additions & 0 deletions lib/atomic_web/components/forms.ex
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
defmodule AtomicWeb.Components.Forms do
@moduledoc false
use AtomicWeb, :component

def datetime_input(assigns) do
~H"""
<div>
<span class="font-sm pl-1 text-base text-gray-800 sm:text-lg">
<%= @label %>
</span>
<div>
<%= datetime_local_input(@forms, @id, phx_debounce: "blur", class: "block w-64 rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500") %>
<div class="text-red-500">
<%= error_tag(@forms, @id) %>
</div>
</div>
</div>
"""
end

def number_input(assigns) do
~H"""
<div>
<span class="font-sm pl-1 text-base text-gray-800 sm:text-lg">
<%= @label %>
</span>
<div>
<%= number_input(@forms, @id, prompt: @label, placeholder: @placeholder, class: "block w-64 rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500") %>
<div class="text-red-500">
<%= error_tag(@forms, @id) %>
</div>
</div>
</div>
"""
end

def text_input(assigns) do
~H"""
<div>
<span class="font-sm pl-1 text-base text-gray-800 sm:text-lg">
<%= @label %>
</span>
<div>
<%= text_input(@forms, @id, placeholder: @placeholder, phx_debounce: "blur", class: "block w-96 rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500 sm:w-80") %>
<div class="flex text-red-500">
<%= error_tag(@forms, @id) %>
</div>
</div>
</div>
"""
end

def textarea(assigns) do
~H"""
<div>
<span class="line-clamp-3 text-sm text-gray-700">
<span class="font-sm pl-1 text-base text-gray-800 sm:text-lg">
<%= @label %>
</span>
<%= textarea(@forms, @id, placeholder: @placeholder, rows: @rows, phx_debounce: "blur", class: "h-32 w-full rounded-md border-gray-300 font-medium shadow-sm focus:border-orange-500 focus:ring-orange-500 sm:text-sm") %>
</span>
<div class="flex text-red-500">
<%= error_tag(@forms, @id) %>
</div>
</div>
"""
end
end
9 changes: 5 additions & 4 deletions lib/atomic_web/live/activity_live/form_component.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
use AtomicWeb, :live_component

alias Atomic.Activities
alias AtomicWeb.Components.Forms

@impl true
def mount(socket) do
Expand Down Expand Up @@ -42,8 +43,8 @@ defmodule AtomicWeb.ActivityLive.FormComponent do

@impl true
def handle_event("toggle_option", %{"id" => id}, socket) do
updated_departments =
Enum.map(socket.assigns.departments, fn option ->
updated_speakers =
Enum.map(socket.assigns.speakers, fn option ->
if option.id == id do
%{option | selected: !option.selected}
else
Expand All @@ -53,8 +54,8 @@ defmodule AtomicWeb.ActivityLive.FormComponent do

{:noreply,
socket
|> assign(:speakers, updated_departments)
|> assign(:selected_speakers, Enum.filter(updated_departments, & &1.selected))}
|> assign(:speakers, updated_speakers)
|> assign(:selected_speakers, Enum.filter(updated_speakers, & &1.selected))}
end

@impl true
Expand Down
83 changes: 14 additions & 69 deletions lib/atomic_web/live/activity_live/form_component.html.heex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
</div>

<div class="flex flex-col-reverse xl:flex-row">
<!-- Image uploader component -->
<div class="w-full xl:w-1/3">
<div class="py-6 px-4 sm:px-6 shrink-0 1.5xl:py-5 1.5xl:px-6 1.5xl:shrink-0">
<span class="pl-1 mb-1 text-base font-sm text-gray-800 sm:text-lg">
Expand Down Expand Up @@ -77,101 +78,53 @@
<div class="flex flex-col">
<div class="flex pt-6 flex-col md:flex-row justify-center md:justify-start">
<div class="flex flex-col gap-y-1">
<span class="pl-1 text-base font-sm text-gray-800 sm:text-lg">
Starting date
</span>
<div>
<%= datetime_local_input(f, :start, phx_debounce: "blur", class: "w-64 block border-gray-300 rounded-md shadow-sm focus:ring-orange-500 focus:border-orange-500") %>
<div class="text-red-500">
<%= error_tag(f, :start) %>
</div>
</div>
<Forms.datetime_input id={:start} forms={f} label="Starting date" />
</div>

<div class="flex flex-col md:ml-8 gap-y-1 mt-4 sm:mt-0">
<span class="pl-1 text-base font-sm text-gray-800 sm:text-lg">
Finishing date
</span>
<div>
<%= datetime_local_input(f, :finish, phx_debounce: "blur", class: "w-64 block border-gray-300 rounded-md shadow-sm focus:ring-orange-500 focus:border-orange-500") %>
<div class="text-red-500">
<%= error_tag(f, :finish) %>
</div>
</div>
<Forms.datetime_input id={:finish} forms={f} label="Finishing date" />
</div>
</div>

<div class="flex flex-row mt-4 flex-col md:flex-row justify-center md:justify-start">
<div class="flex flex-col gap-y-1">
<span class="pl-1 text-base font-sm text-gray-800 sm:text-lg">
Minimum entries
</span>
<div>
<%= number_input(f, :minimum_entries, prompt: "Minimum entries", placeholder: "Choose minimum entries", class: "w-64 block border-gray-300 rounded-md shadow-sm focus:ring-orange-500 focus:border-orange-500") %>
<div class="text-red-500">
<%= error_tag(f, :minimum_entries) %>
</div>
</div>
<Forms.number_input id={:minimum_entries} forms={f} label="Minimum entries" placeholder="Choose minimum entries" />
</div>

<div class="flex flex-col md:ml-8 gap-y-1 mt-4 sm:mt-0">
<span class="pl-1 text-base font-sm text-gray-800 sm:text-lg">
Maximum entries
</span>
<div>
<%= number_input(f, :maximum_entries, prompt: "Maximum entries", placeholder: "Choose maximum entries", class: "w-64 block border-gray-300 rounded-md shadow-sm focus:ring-orange-500 focus:border-orange-500") %>
<div class="text-red-500">
<%= error_tag(f, :maximum_entries) %>
</div>
</div>
<Forms.number_input id={:maximum_entries} forms={f} label="Maximum entries" placeholder="Choose maximum entries" />
</div>
</div>

<div class="flex flex-row mt-4 flex-col md:flex-row justify-center md:justify-start">
<%= inputs_for f, :location, fn fl -> %>
<div class="flex flex-col gap-y-1">
<span class="pl-1 text-base font-sm text-gray-800 sm:text-lg">
Location
</span>
<div>
<%= text_input(fl, :name, placeholder: "Choose location name", phx_debounce: "blur", class: "w-96 sm:w-80 block border-gray-300 rounded-md shadow-sm focus:ring-orange-500 focus:border-orange-500") %>
<div class="flex text-red-500">
<%= error_tag(fl, :name) %>
</div>
</div>
<Forms.text_input id={:name} forms={fl} label="Location" placeholder="Choose location name" />
</div>

<div class="flex flex-col md:ml-8 gap-y-1 mt-4 sm:mt-0">
<span class="pl-1 text-base font-sm text-gray-800 sm:text-lg">
URL
</span>
<div>
<%= url_input(fl, :url, placeholder: "Choose event URL", phx_debounce: "blur", class: "w-96 sm:w-80 block border-gray-300 rounded-md shadow-sm focus:ring-orange-500 focus:border-orange-500") %>
<div class="flex text-red-500">
<%= error_tag(fl, :url) %>
</div>
</div>
<Forms.text_input id={:url} forms={fl} label="URL" placeholder="Choose event URL" />
</div>
<% end %>
</div>

<div class="flex flex-row mt-4 flex-col md:flex-row justify-center md:justify-start">
<!-- Multiselect dropdown component -->
<div class="flex flex-col gap-y-1">
<div x-data="{
open: false,
toggle() { this.open = this.open ? this.close() : true },
close() { this.open = false },
}" @keydown.escape.prevent.stop="close()" @focusin.window="! $refs.panel.contains($event.target) && close()">
open: false,
toggle() { this.open = this.open ? this.close() : true },
close() { this.open = false },
}" @keydown.escape.prevent.stop="close()">
<span class="font-sm pl-1 text-base text-gray-800 sm:text-lg">
Speakers
</span>
<div class="relative mt-2">
<button
@click="toggle()"
:aria-expanded="open"
class="relative w-96 cursor-default rounded-md bg-white py-1.5 pr-10 pl-3 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-orange-500 focus:ring-indigo-600 sm:w-80 sm:text-sm sm:leading-6"
class="relative w-96 sm:w-80 cursor-default rounded-md bg-white py-1.5 pr-10 pl-3 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-orange-500 sm:text-sm sm:leading-6"
type="button"
aria-expanded="true"
aria-labelledby="listbox-label"
>
<span class="font-sm block truncate pl-1 text-base sm:text-lg">
Expand Down Expand Up @@ -237,15 +190,7 @@
</div>

<div class="flex-grow mt-4">
<span class="text-sm text-gray-700 line-clamp-3">
<span class="pl-1 text-base font-sm text-gray-800 sm:text-lg">
Description
</span>
<%= textarea(f, :description, placeholder: "Choose description", rows: 15, phx_debounce: "blur", class: "focus:ring-orange-500 h-32 font-medium focus:border-orange-500 w-full shadow-sm sm:text-sm border-gray-300 rounded-md") %>
</span>
<div class="flex text-red-500">
<%= error_tag(f, :description) %>
</div>
<Forms.textarea id={:description} forms={f} label="Description" placeholder="Choose description" rows={15} />
</div>
</div>
</div>
Expand Down

0 comments on commit 84c99b9

Please sign in to comment.