Skip to content

Commit b5e0134

Browse files
zcesurzcesur
committed
reorganize more
1 parent bb67b0b commit b5e0134

File tree

1 file changed

+175
-152
lines changed

1 file changed

+175
-152
lines changed

‎lib/algora_web/live/claim_live.ex‎

Lines changed: 175 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ defmodule AlgoraWeb.ClaimLive do
77
alias Algora.Bounties.Claim
88
alias Algora.Github
99
alias Algora.Repo
10+
alias Algora.Util
1011

1112
@impl true
1213
def mount(%{"group_id" => group_id}, _session, socket) do
@@ -118,176 +119,198 @@ defmodule AlgoraWeb.ClaimLive do
118119
def render(assigns) do
119120
~H"""
120121
<div class="container mx-auto py-8 px-4">
121-
<div class="space-y-8">
122-
<.header class="mb-8">
123-
<div class="grid gap-8 md:grid-cols-[2fr_1fr]">
124-
<div class="flex items-center gap-4">
125-
<.avatar class="h-12 w-12 rounded-full">
126-
<.avatar_image src={@source_or_target.repository.user.avatar_url} />
127-
<.avatar_fallback>
128-
{String.first(@source_or_target.repository.user.provider_login)}
129-
</.avatar_fallback>
130-
</.avatar>
131-
<div>
132-
<.link
133-
href={@source_or_target.url}
134-
class="text-xl font-semibold hover:underline"
135-
target="_blank"
136-
>
137-
{@source_or_target.title}
138-
</.link>
139-
<div class="text-sm text-muted-foreground">
140-
{@source_or_target.repository.user.provider_login}/{@source_or_target.repository.name}#{@source_or_target.number}
122+
<div class="grid gap-8 md:grid-cols-[2fr_1fr]">
123+
<div class="space-y-8">
124+
<.card>
125+
<.card_header>
126+
<div class="flex items-center gap-4">
127+
<.avatar class="h-12 w-12 rounded-full">
128+
<.avatar_image src={@source_or_target.repository.user.avatar_url} />
129+
<.avatar_fallback>
130+
{String.first(@source_or_target.repository.user.provider_login)}
131+
</.avatar_fallback>
132+
</.avatar>
133+
<div>
134+
<.link
135+
href={@source_or_target.url}
136+
class="text-xl font-semibold hover:underline"
137+
target="_blank"
138+
>
139+
{@source_or_target.title}
140+
</.link>
141+
<div class="text-sm text-muted-foreground">
142+
{@source_or_target.repository.user.provider_login}/{@source_or_target.repository.name}#{@source_or_target.number}
143+
</div>
141144
</div>
142145
</div>
143-
</div>
144-
<div class="mt-4 grid grid-cols-2 gap-8">
145-
<.stat_card title="Total Paid">
146-
<div class="text-success">
147-
{Money.to_string!(@total_paid)}
148-
</div>
149-
</.stat_card>
150-
<.stat_card title="Prize Pool">
151-
<div class="text-success">
152-
{Money.to_string!(@prize_pool)}
153-
</div>
154-
</.stat_card>
155-
</div>
156-
</div>
157-
</.header>
158-
159-
<div class="grid gap-8 md:grid-cols-[2fr_1fr]">
160-
<div class="space-y-8">
161-
<.card>
162-
<.card_header>
163-
<div class="grid grid-cols-1 sm:grid-cols-3">
164-
<%= for claim <- @claims do %>
165-
<div class="flex items-center gap-4">
166-
<.avatar>
167-
<.avatar_image src={claim.user.avatar_url} />
168-
<.avatar_fallback>{String.first(claim.user.name)}</.avatar_fallback>
169-
</.avatar>
170-
<div>
171-
<p class="font-medium">{claim.user.name}</p>
172-
<p class="text-sm text-muted-foreground">@{claim.user.handle}</p>
173-
</div>
174-
</div>
175-
<% end %>
176-
</div>
177-
</.card_header>
178-
<.card_content>
179-
<div class="prose dark:prose-invert">
180-
{Phoenix.HTML.raw(@source_body_html)}
181-
</div>
182-
</.card_content>
183-
</.card>
184-
</div>
146+
</.card_header>
147+
<.card_content>
148+
<div class="prose dark:prose-invert">
149+
{Phoenix.HTML.raw(@source_body_html)}
150+
</div>
151+
</.card_content>
152+
</.card>
153+
</div>
185154
186-
<div class="space-y-8">
187-
<.card>
188-
<.card_header>
155+
<div class="space-y-8">
156+
<.card>
157+
<.card_header>
158+
<div class="flex items-center justify-between">
189159
<.card_title>
190160
Claim
191161
</.card_title>
192-
</.card_header>
193-
<.card_content>
194-
<div class="space-y-2">
195-
<div class="flex justify-between text-sm">
196-
<span class="text-muted-foreground">Status</span>
197-
<span>{@primary_claim.status |> to_string() |> String.capitalize()}</span>
198-
</div>
199-
<div class="flex justify-between text-sm">
200-
<span class="text-muted-foreground">Submitted</span>
201-
<span>{Calendar.strftime(@primary_claim.inserted_at, "%B %d, %Y")}</span>
202-
</div>
203-
<div class="flex justify-between text-sm">
204-
<span class="text-muted-foreground">Last Updated</span>
205-
<span>{Calendar.strftime(@primary_claim.updated_at, "%B %d, %Y")}</span>
206-
</div>
162+
<.button>
163+
Reward bounty
164+
</.button>
165+
</div>
166+
</.card_header>
167+
<.card_content>
168+
<div class="space-y-2">
169+
<div class="flex justify-between text-sm">
170+
<span class="text-muted-foreground">Total prize pool</span>
171+
<span class="font-medium font-display tabular-nums">
172+
{Money.to_string!(@prize_pool)}
173+
</span>
207174
</div>
208-
</.card_content>
209-
</.card>
175+
<div class="flex justify-between text-sm">
176+
<span class="text-muted-foreground">Total paid</span>
177+
<span class="font-medium font-display tabular-nums">
178+
{Money.to_string!(@total_paid)}
179+
</span>
180+
</div>
181+
<div class="flex justify-between text-sm">
182+
<span class="text-muted-foreground">Status</span>
183+
<span>{@primary_claim.status |> to_string() |> String.capitalize()}</span>
184+
</div>
185+
<div class="flex justify-between text-sm">
186+
<span class="text-muted-foreground">Submitted</span>
187+
<span>{Calendar.strftime(@primary_claim.inserted_at, "%B %d, %Y")}</span>
188+
</div>
189+
<div class="flex justify-between text-sm">
190+
<span class="text-muted-foreground">Last updated</span>
191+
<span>{Calendar.strftime(@primary_claim.updated_at, "%B %d, %Y")}</span>
192+
</div>
193+
</div>
194+
</.card_content>
195+
</.card>
210196
211-
<.card>
212-
<.card_header>
197+
<.card>
198+
<.card_header>
199+
<div class="flex items-center justify-between">
213200
<.card_title>
214-
Sponsors
201+
Authors
215202
</.card_title>
216-
</.card_header>
217-
<.card_content>
218-
<div class="divide-y divide-border">
219-
<%= for sponsor <- @sponsors do %>
220-
<div class="flex items-center justify-between py-4">
203+
<.button variant="secondary">
204+
Split bounty
205+
</.button>
206+
</div>
207+
</.card_header>
208+
<.card_content>
209+
<div class="space-y-4">
210+
<%= for claim <- @claims do %>
211+
<div class="flex justify-between text-sm">
212+
<span>
221213
<div class="flex items-center gap-4">
222214
<.avatar>
223-
<.avatar_image src={sponsor.sponsor.avatar_url} />
224-
<.avatar_fallback>
225-
{String.first(sponsor.sponsor.name)}
226-
</.avatar_fallback>
215+
<.avatar_image src={claim.user.avatar_url} />
216+
<.avatar_fallback>{String.first(claim.user.name)}</.avatar_fallback>
227217
</.avatar>
228218
<div>
229-
<p class="font-medium">{sponsor.sponsor.name}</p>
230-
<p class="text-sm text-muted-foreground">@{sponsor.sponsor.handle}</p>
219+
<p class="font-medium">{claim.user.name}</p>
220+
<p class="text-sm text-muted-foreground">@{claim.user.handle}</p>
231221
</div>
232222
</div>
233-
<div class="text-right">
234-
<div class="text-sm font-medium">
235-
<%= case sponsor.status do %>
236-
<% :overpaid -> %>
237-
<div class="text-success">
238-
<span class="text-base font-semibold font-display tabular-nums">
239-
{Money.to_string!(Money.sub!(sponsor.paid, sponsor.tipped))}
240-
</span>
241-
paid
242-
</div>
243-
<div class="text-success">
244-
<span class="text-base font-semibold font-display tabular-nums">
245-
+{Money.to_string!(sponsor.tipped)}
246-
</span>
247-
tip!
248-
</div>
249-
<% :paid -> %>
250-
<div class="text-success">
251-
<span class="text-base font-semibold font-display tabular-nums">
252-
{Money.to_string!(sponsor.paid)}
253-
</span>
254-
paid
255-
</div>
256-
<% :partial -> %>
257-
<div class="text-success">
258-
<span class="text-base font-semibold font-display tabular-nums">
259-
{Money.to_string!(sponsor.paid)}
260-
</span>
261-
paid
262-
</div>
263-
<div class="text-muted-foreground">
264-
<span class="text-base font-semibold font-display tabular-nums">
265-
{Money.to_string!(Money.sub!(sponsor.pledged, sponsor.paid))}
266-
</span>
267-
pending
268-
</div>
269-
<% :pending -> %>
270-
<div class="text-muted-foreground">
271-
<span class="text-base font-semibold font-display tabular-nums">
272-
{Money.to_string!(sponsor.pledged)}
273-
</span>
274-
pending
275-
</div>
276-
<% :none -> %>
277-
<div class="text-success">
278-
<span class="text-base font-semibold font-display tabular-nums">
279-
{Money.to_string!(sponsor.pledged)}
280-
</span>
281-
</div>
282-
<% end %>
283-
</div>
223+
</span>
224+
<span class="text-foreground font-medium">
225+
<span>
226+
{Util.format_pct(claim.group_share)}
227+
</span>
228+
</span>
229+
</div>
230+
<% end %>
231+
</div>
232+
</.card_content>
233+
</.card>
234+
235+
<.card>
236+
<.card_header>
237+
<.card_title>
238+
Sponsors
239+
</.card_title>
240+
</.card_header>
241+
<.card_content>
242+
<div class="divide-y divide-border">
243+
<%= for sponsor <- @sponsors do %>
244+
<div class="flex items-center justify-between py-4">
245+
<div class="flex items-center gap-4">
246+
<.avatar>
247+
<.avatar_image src={sponsor.sponsor.avatar_url} />
248+
<.avatar_fallback>
249+
{String.first(sponsor.sponsor.name)}
250+
</.avatar_fallback>
251+
</.avatar>
252+
<div>
253+
<p class="font-medium">{sponsor.sponsor.name}</p>
254+
<p class="text-sm text-muted-foreground">@{sponsor.sponsor.handle}</p>
284255
</div>
285256
</div>
286-
<% end %>
287-
</div>
288-
</.card_content>
289-
</.card>
290-
</div>
257+
<div class="text-right">
258+
<div class="text-sm font-medium">
259+
<%= case sponsor.status do %>
260+
<% :overpaid -> %>
261+
<div class="text-success">
262+
<span class="text-base font-semibold font-display tabular-nums">
263+
{Money.to_string!(Money.sub!(sponsor.paid, sponsor.tipped))}
264+
</span>
265+
paid
266+
</div>
267+
<div class="text-success">
268+
<span class="text-base font-semibold font-display tabular-nums">
269+
+{Money.to_string!(sponsor.tipped)}
270+
</span>
271+
tip!
272+
</div>
273+
<% :paid -> %>
274+
<div class="text-success">
275+
<span class="text-base font-semibold font-display tabular-nums">
276+
{Money.to_string!(sponsor.paid)}
277+
</span>
278+
paid
279+
</div>
280+
<% :partial -> %>
281+
<div class="text-success">
282+
<span class="text-base font-semibold font-display tabular-nums">
283+
{Money.to_string!(sponsor.paid)}
284+
</span>
285+
paid
286+
</div>
287+
<div class="text-muted-foreground">
288+
<span class="text-base font-semibold font-display tabular-nums">
289+
{Money.to_string!(Money.sub!(sponsor.pledged, sponsor.paid))}
290+
</span>
291+
pending
292+
</div>
293+
<% :pending -> %>
294+
<div class="text-muted-foreground">
295+
<span class="text-base font-semibold font-display tabular-nums">
296+
{Money.to_string!(sponsor.pledged)}
297+
</span>
298+
pending
299+
</div>
300+
<% :none -> %>
301+
<div class="text-success">
302+
<span class="text-base font-semibold font-display tabular-nums">
303+
{Money.to_string!(sponsor.pledged)}
304+
</span>
305+
</div>
306+
<% end %>
307+
</div>
308+
</div>
309+
</div>
310+
<% end %>
311+
</div>
312+
</.card_content>
313+
</.card>
291314
</div>
292315
</div>
293316
</div>

0 commit comments

Comments
 (0)