|
| 1 | +defmodule AlgoraWeb.Admin.DevsLive do |
| 2 | + @moduledoc false |
| 3 | + use AlgoraWeb, :live_view |
| 4 | + |
| 5 | + alias Algora.Accounts.User |
| 6 | + |
| 7 | + @impl true |
| 8 | + def mount(_params, _session, socket) do |
| 9 | + # Define available options |
| 10 | + available_techs = Enum.take(AlgoraWeb.Components.TechBadge.langs(), 20) |
| 11 | + available_countries = Algora.PSP.ConnectCountries.list_codes() |
| 12 | + |
| 13 | + # Start with empty selections |
| 14 | + selected_techs = [] |
| 15 | + selected_countries = [] |
| 16 | + |
| 17 | + {:ok, |
| 18 | + socket |
| 19 | + |> assign(:page_title, "Developers") |
| 20 | + |> assign(:available_techs, available_techs) |
| 21 | + |> assign(:available_countries, available_countries) |
| 22 | + |> assign(:selected_techs, selected_techs) |
| 23 | + |> assign(:selected_countries, selected_countries) |
| 24 | + |> assign_matches()} |
| 25 | + end |
| 26 | + |
| 27 | + @impl true |
| 28 | + def handle_event("toggle_tech", %{"tech" => tech}, socket) do |
| 29 | + selected_techs = |
| 30 | + if tech in socket.assigns.selected_techs do |
| 31 | + List.delete(socket.assigns.selected_techs, tech) |
| 32 | + else |
| 33 | + [tech | socket.assigns.selected_techs] |
| 34 | + end |
| 35 | + |
| 36 | + {:noreply, |
| 37 | + socket |
| 38 | + |> assign(:selected_techs, selected_techs) |
| 39 | + |> assign_matches()} |
| 40 | + end |
| 41 | + |
| 42 | + @impl true |
| 43 | + def handle_event("toggle_country", %{"code" => code}, socket) do |
| 44 | + selected_countries = |
| 45 | + if code in socket.assigns.selected_countries do |
| 46 | + List.delete(socket.assigns.selected_countries, code) |
| 47 | + else |
| 48 | + [code | socket.assigns.selected_countries] |
| 49 | + end |
| 50 | + |
| 51 | + {:noreply, |
| 52 | + socket |
| 53 | + |> assign(:selected_countries, selected_countries) |
| 54 | + |> assign_matches()} |
| 55 | + end |
| 56 | + |
| 57 | + defp assign_matches(socket) do |
| 58 | + matches = |
| 59 | + [ |
| 60 | + tech_stack: socket.assigns.selected_techs, |
| 61 | + limit: 50, |
| 62 | + sort_by: [{"countries", socket.assigns.selected_countries}] |
| 63 | + ] |
| 64 | + |> Algora.Cloud.list_top_matches() |
| 65 | + |> Algora.Settings.load_matches_2() |
| 66 | + |
| 67 | + socket |
| 68 | + |> assign(:matches, matches) |
| 69 | + |> assign( |
| 70 | + :contributions_map, |
| 71 | + matches |> Enum.map(& &1.user) |> fetch_applicants_contributions(socket.assigns.selected_techs) |
| 72 | + ) |
| 73 | + end |
| 74 | + |
| 75 | + @impl true |
| 76 | + def render(assigns) do |
| 77 | + ~H""" |
| 78 | + <div class="container mx-auto max-w-7xl space-y-8 p-4 sm:p-6 lg:p-8"> |
| 79 | + <.section title="Developers"> |
| 80 | + <h3 class="pt-4 text-sm font-semibold text-foreground">Tech stack</h3> |
| 81 | + <div class="flex items-center flex-wrap gap-4 pt-4"> |
| 82 | + <%= for tech <- @available_techs do %> |
| 83 | + <.tech_badge |
| 84 | + class="cursor-pointer" |
| 85 | + phx-click="toggle_tech" |
| 86 | + phx-value-tech={tech} |
| 87 | + tech={tech} |
| 88 | + variant={if tech in @selected_techs, do: "success", else: "outline"} |
| 89 | + /> |
| 90 | + <% end %> |
| 91 | + </div> |
| 92 | + <h3 class="pt-8 text-sm font-semibold text-foreground">Countries</h3> |
| 93 | + <div class="flex items-center flex-wrap gap-4 pt-4"> |
| 94 | + <%= for code <- @available_countries do %> |
| 95 | + <.badge |
| 96 | + class="cursor-pointer" |
| 97 | + phx-click="toggle_country" |
| 98 | + phx-value-code={code} |
| 99 | + variant={if code in @selected_countries, do: "success", else: "outline"} |
| 100 | + > |
| 101 | + {Algora.Misc.CountryEmojis.get(code)} {code} |
| 102 | + </.badge> |
| 103 | + <% end %> |
| 104 | + </div> |
| 105 | +
|
| 106 | + <div class="pt-8 grid grid-cols-1 gap-4 lg:grid-cols-3"> |
| 107 | + <%= for match <- @matches do %> |
| 108 | + <div> |
| 109 | + <.match_card |
| 110 | + user={match.user} |
| 111 | + tech_stack={@selected_techs |> Enum.take(1)} |
| 112 | + contributions={Map.get(@contributions_map, match.user.id, [])} |
| 113 | + contract_type="bring_your_own" |
| 114 | + /> |
| 115 | + </div> |
| 116 | + <% end %> |
| 117 | + </div> |
| 118 | + </.section> |
| 119 | + </div> |
| 120 | + """ |
| 121 | + end |
| 122 | + |
| 123 | + defp match_card(assigns) do |
| 124 | + ~H""" |
| 125 | + <div class="h-full relative border ring-1 ring-transparent hover:ring-border transition-all bg-card group rounded-xl text-card-foreground shadow p-6"> |
| 126 | + <div class="w-full truncate"> |
| 127 | + <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> |
| 128 | + <div class="flex items-center gap-4"> |
| 129 | + <.link navigate={User.url(@user)}> |
| 130 | + <.avatar class="h-12 w-12 rounded-full"> |
| 131 | + <.avatar_image src={@user.avatar_url} alt={@user.name} /> |
| 132 | + <.avatar_fallback class="rounded-lg"> |
| 133 | + {Algora.Util.initials(@user.name)} |
| 134 | + </.avatar_fallback> |
| 135 | + </.avatar> |
| 136 | + </.link> |
| 137 | +
|
| 138 | + <div> |
| 139 | + <div class="flex items-center gap-1 text-base text-foreground"> |
| 140 | + <.link navigate={User.url(@user)} class="font-semibold hover:underline"> |
| 141 | + {@user.name} |
| 142 | + <span :if={@user.country}> |
| 143 | + {Algora.Misc.CountryEmojis.get(@user.country)} |
| 144 | + </span> |
| 145 | + </.link> |
| 146 | + </div> |
| 147 | + <div |
| 148 | + :if={@user.provider_meta} |
| 149 | + class="pt-0.5 flex items-center gap-x-2 gap-y-1 text-xs text-muted-foreground max-w-[250px] 2xl:max-w-none truncate" |
| 150 | + > |
| 151 | + <.link |
| 152 | + :if={@user.provider_login} |
| 153 | + href={"https://github.com/#{@user.provider_login}"} |
| 154 | + target="_blank" |
| 155 | + class="flex items-center gap-1 hover:underline" |
| 156 | + > |
| 157 | + <.icon name="github" class="shrink-0 h-4 w-4" /> |
| 158 | + <span class="line-clamp-1">{@user.provider_login}</span> |
| 159 | + </.link> |
| 160 | + <.link |
| 161 | + :if={@user.provider_meta["twitter_handle"]} |
| 162 | + href={"https://x.com/#{@user.provider_meta["twitter_handle"]}"} |
| 163 | + target="_blank" |
| 164 | + class="flex items-center gap-1 hover:underline" |
| 165 | + > |
| 166 | + <.icon name="tabler-brand-x" class="shrink-0 h-4 w-4" /> |
| 167 | + <span class="line-clamp-1"> |
| 168 | + {@user.provider_meta["twitter_handle"]} |
| 169 | + </span> |
| 170 | + </.link> |
| 171 | + </div> |
| 172 | + </div> |
| 173 | + </div> |
| 174 | + </div> |
| 175 | +
|
| 176 | + <div class="pt-2 flex items-center justify-center gap-2"> |
| 177 | + <.button |
| 178 | + phx-click="share_opportunity" |
| 179 | + phx-value-user_id={@user.id} |
| 180 | + phx-value-type="bounty" |
| 181 | + variant="outline" |
| 182 | + size="sm" |
| 183 | + > |
| 184 | + Bounty |
| 185 | + </.button> |
| 186 | + <.button |
| 187 | + phx-click="share_opportunity" |
| 188 | + phx-value-user_id={@user.id} |
| 189 | + phx-value-type="tip" |
| 190 | + variant="outline" |
| 191 | + size="sm" |
| 192 | + > |
| 193 | + Interview |
| 194 | + </.button> |
| 195 | + <.button |
| 196 | + phx-click="share_opportunity" |
| 197 | + phx-value-user_id={@user.id} |
| 198 | + phx-value-type="contract" |
| 199 | + phx-value-contract_type={@contract_type} |
| 200 | + variant="outline" |
| 201 | + size="sm" |
| 202 | + > |
| 203 | + Contract |
| 204 | + </.button> |
| 205 | + </div> |
| 206 | +
|
| 207 | + <div :if={@contributions != []} class="mt-4"> |
| 208 | + <p class="text-xs text-muted-foreground uppercase font-semibold"> |
| 209 | + Top contributions |
| 210 | + </p> |
| 211 | + <div class="flex flex-col gap-3 mt-2"> |
| 212 | + <%= for {owner, contributions} <- aggregate_contributions(@contributions) |> Enum.take(3) do %> |
| 213 | + <.link |
| 214 | + href={"https://github.com/#{owner.provider_login}/#{List.first(contributions).repository.name}/pulls?q=author%3A#{@user.provider_login}+is%3Amerged+"} |
| 215 | + target="_blank" |
| 216 | + rel="noopener" |
| 217 | + class="flex items-center gap-3 rounded-xl pr-2 bg-card/50 border border-border/50 hover:border-border transition-all" |
| 218 | + > |
| 219 | + <img |
| 220 | + src={owner.avatar_url} |
| 221 | + class="h-12 w-12 rounded-xl rounded-r-none md:saturate-0 group-hover:saturate-100 transition-all" |
| 222 | + alt={owner.name} |
| 223 | + /> |
| 224 | + <div class="w-full flex flex-col text-xs font-medium gap-0.5"> |
| 225 | + <span class="flex items-start justify-between gap-5"> |
| 226 | + <span class="font-display"> |
| 227 | + {if owner.type == :organization do |
| 228 | + owner.name |
| 229 | + else |
| 230 | + List.first(contributions).repository.name |
| 231 | + end} |
| 232 | + </span> |
| 233 | + <%= if tech = List.first(contributions).repository.tech_stack |> List.first() do %> |
| 234 | + <span class="flex items-center text-foreground text-[11px] gap-1"> |
| 235 | + <img |
| 236 | + src={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/#{String.downcase(tech)}/#{String.downcase(tech)}-original.svg"} |
| 237 | + class="w-4 h-4 invert saturate-0" |
| 238 | + /> {tech} |
| 239 | + </span> |
| 240 | + <% end %> |
| 241 | + </span> |
| 242 | + <div class="flex items-center gap-2 font-semibold"> |
| 243 | + <span class="flex items-center text-amber-300 text-xs"> |
| 244 | + <.icon name="tabler-star-filled" class="h-4 w-4 mr-1" /> |
| 245 | + {Algora.Util.format_number_compact( |
| 246 | + max(owner.stargazers_count, total_stars(contributions)) |
| 247 | + )} |
| 248 | + </span> |
| 249 | + <span class="flex items-center text-purple-400 text-xs"> |
| 250 | + <.icon name="tabler-git-pull-request" class="h-4 w-4 mr-1" /> |
| 251 | + {Algora.Util.format_number_compact(total_contributions(contributions))} |
| 252 | + </span> |
| 253 | + </div> |
| 254 | + </div> |
| 255 | + </.link> |
| 256 | + <% end %> |
| 257 | + </div> |
| 258 | + </div> |
| 259 | + </div> |
| 260 | + </div> |
| 261 | + """ |
| 262 | + end |
| 263 | + |
| 264 | + defp total_stars(contributions) do |
| 265 | + contributions |
| 266 | + |> Enum.map(& &1.repository.stargazers_count) |
| 267 | + |> Enum.sum() |
| 268 | + end |
| 269 | + |
| 270 | + defp total_contributions(contributions) do |
| 271 | + contributions |
| 272 | + |> Enum.map(& &1.contribution_count) |
| 273 | + |> Enum.sum() |
| 274 | + end |
| 275 | + |
| 276 | + defp aggregate_contributions(contributions) do |
| 277 | + groups = Enum.group_by(contributions, fn c -> c.repository.user end) |
| 278 | + |
| 279 | + contributions |
| 280 | + |> Enum.map(fn c -> {c.repository.user, groups[c.repository.user]} end) |
| 281 | + |> Enum.uniq_by(fn {owner, _} -> owner.id end) |
| 282 | + end |
| 283 | + |
| 284 | + defp fetch_applicants_contributions(users, tech_stack) do |
| 285 | + users |
| 286 | + |> Enum.map(& &1.id) |
| 287 | + |> Algora.Workspace.list_user_contributions(tech_stack: tech_stack) |
| 288 | + |> Enum.group_by(& &1.user.id) |
| 289 | + end |
| 290 | +end |
0 commit comments