Skip to content

Commit

Permalink
Migrate Organization Overview (#696)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonashendrickx
jonashendrickx authored Aug 24, 2024
1 parent ae98162 commit e27b3dd
Show file tree
Hide file tree
Showing 12 changed files with 476 additions and 111 deletions.
72 changes: 72 additions & 0 deletions src/AdminConsole/Components/Pages/Organization/Overview.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
@page "/Organization/Overview"

@inject IDataService DataService

<Page Title="@_title">
<div class="overflow-hidden bg-white shadow sm:rounded-md">
<ul role="list" class="divide-y divide-gray-200">
@if (_applications != null)
{
@foreach (var app in _applications)
{
<li id="@app.ListItemIdentifier">
<a href="@app.Url" class="block hover:bg-gray-50">
<div class="flex items-center px-4 py-4 sm:px-6">
<div class="flex min-w-0 flex-1 items-center">
<div class="min-w-0 flex-1 px-4 md:grid md:grid-cols-2 md:gap-4">
<div>
<p id="@app.NameIdentifier" class="truncate text-sm font-medium text-primary-500 flex items-center">
@app.Name (<UsersIcon Class="h-6 w-6" /> @app.Users)
</p>
<p id="@app.DescriptionIdentifier" class="mt-2 flex items-center text-sm text-gray-500">
<span class="truncate">@app.Description</span>
</p>
</div>
<div class="hidden md:block">
<div>
<p id="@app.CreatedAtIdentifier" class="text-sm text-gray-900">
Created: <LocalDateTime Value="@app.CreatedAt" />
</p>
<p class="mt-2 flex items-center text-sm text-gray-500">
App Id: @app.Id
</p>
@if (app.DeleteAt.HasValue)
{
<p id="@app.DeleteAtIdentifier" class="mt-2 text-sm text-red-900">
Being deleted at: <LocalDateTime Value="@app.DeleteAt.Value" />
</p>
}
</div>
</div>
</div>
</div>
<div>
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/>
</svg>
</div>
</div>
</a>
</li>
}
}
</ul>
</div>

@if (_canCreateApplication != null)
{
@if (_canCreateApplication.Value)
{
<a id="create-application-btn" href="/Organization/CreateApplication" class="btn-primary max-w-fit">Create Application</a>
}
else
{
<LinkAlert
id="upgrade-organization-alert"
LinkText="Upgrade"
LinkUrl="/billing/manage"
Message="You need to upgrade to a paid organization to create more applications."
Style="@ContextualStyles.Danger" />
}
}
</Page>
49 changes: 49 additions & 0 deletions src/AdminConsole/Components/Pages/Organization/Overview.razor.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
using Microsoft.AspNetCore.Components;

namespace Passwordless.AdminConsole.Components.Pages.Organization;

public partial class Overview : ComponentBase
{
private string? _title;

private bool? _canCreateApplication;

private IReadOnlyCollection<ApplicationViewModel>? _applications;

protected override async Task OnInitializedAsync()
{
_canCreateApplication = await DataService.AllowedToCreateApplicationAsync();
var organization = await DataService.GetOrganizationWithDataAsync();
if (organization == null)
{
throw new InvalidOperationException("Organization not found");
}

_title = $"{organization.Name} Applications";
_applications = organization.Applications
.Select(x => new ApplicationViewModel(
x.Id,
x.Name,
x.Description,
x.CreatedAt,
x.DeleteAt,
x.CurrentUserCount))
.ToList();
}

private record ApplicationViewModel(
string Id,
string Name,
string Description,
DateTime CreatedAt,
DateTime? DeleteAt,
int Users)
{
public string ListItemIdentifier => $"{Id}-list-item";
public string NameIdentifier => $"{Id}-name";
public string DescriptionIdentifier => $"{Id}-description";
public string CreatedAtIdentifier => $"{Id}-created-at";
public string DeleteAtIdentifier => $"{Id}-delete-at";
public string Url => DeleteAt.HasValue ? $"/app/{Id}/settings" : $"/app/{Id}/credentials/list";
}
}
0 ...dminConsole/Components/Shared/Alert.razor → ...sole/Components/Shared/Alerts/Alert.razor
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion ...nConsole/Components/Shared/Alert.razor.cs → ...e/Components/Shared/Alerts/Alert.razor.cs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
using Microsoft.AspNetCore.Components;

namespace Passwordless.AdminConsole.Components.Shared;
namespace Passwordless.AdminConsole.Components.Shared.Alerts;

public partial class Alert : ComponentBase
{
Expand Down
90 changes: 90 additions & 0 deletions src/AdminConsole/Components/Shared/Alerts/LinkAlert.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<div @attributes="AdditionalAttributes" class="@_containerClass">
<div class="flex">
<div class="flex-shrink-0">
@switch (Style)
{
case ContextualStyles.Danger:
<DangerAlertIcon class="h-5 w-5" Style="@ContextualStyles.Danger" />
break;
case ContextualStyles.Warning:
<WarningAlertIcon class="h-5 w-5" Style="@ContextualStyles.Warning" />
break;
case ContextualStyles.Success:
<SuccessAlertIcon class="h-5 w-5" Style="@ContextualStyles.Success" />
break;
case ContextualStyles.Info:
<InfoAlertIcon class="h-5 w-5" Style="@ContextualStyles.Info" />
break;
case ContextualStyles.Primary:
<InfoAlertIcon class="h-5 w-5" Style="@ContextualStyles.Primary" />
break;
case ContextualStyles.Secondary:
<InfoAlertIcon class="h-5 w-5" Style="@ContextualStyles.Secondary" />
break;
}
</div>
<div class="@_contentClass">
<p class="text-sm font-medium">@Message</p>
<p class="mt-3 text-sm md:ml-6 md:mt-0">
<a href="@LinkUrl" class="@_linkClass">
<span class="underline">@LinkText</span>
<span aria-hidden="true"> &rarr;</span>
</a>
</p>
</div>
</div>
</div>

@code {
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object>? AdditionalAttributes { get; set; }

[Parameter] public required string LinkText { get; set; }

[Parameter] public required string LinkUrl { get; set; }

[Parameter] public required string Message { get; set; }

[Parameter] public required ContextualStyles Style { get; set; }

private string? _containerClass;
private string? _contentClass;
private string? _linkClass;

protected override void OnInitialized()
{
switch (Style)
{
case ContextualStyles.Primary:
_containerClass = "container-primary";
_contentClass = "content-primary";
_linkClass = "link-primary";
break;
case ContextualStyles.Info:
_containerClass = "container-info";
_contentClass = "content-info";
_linkClass = "link-info";
break;
case ContextualStyles.Danger:
_containerClass = "container-danger";
_contentClass = "content-danger";
_linkClass = "link-danger";
break;
case ContextualStyles.Warning:
_containerClass = "container-warning";
_contentClass = "content-warning";
_linkClass = "link-warning";
break;
case ContextualStyles.Secondary:
_containerClass = "container-secondary";
_contentClass = "content-secondary";
_linkClass = "link-secondary";
break;
case ContextualStyles.Success:
_containerClass = "container-success";
_contentClass = "content-success";
_linkClass = "link-success";
break;
}
}
}
87 changes: 87 additions & 0 deletions src/AdminConsole/Components/Shared/Alerts/LinkAlert.razor.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
.container {
@apply rounded-md p-4 my-3 max-w-fit;
}

.icon {
@apply w-5 h-5;
}

.content {
@apply ml-3 flex justify-between;
}

.link {
@apply whitespace-nowrap font-medium;
}

.container-danger {
@apply container bg-red-50;
}

.content-danger {
@apply content text-red-800;
}

.link-danger {
@apply link text-red-700 hover:text-red-600
}

.container-info {
@apply container bg-blue-50;
}

.content-info {
@apply content text-blue-800;
}

.link-info {
@apply link text-blue-700 hover:text-blue-600
}

.container-primary {
@apply container bg-blue-50;
}

.content-primary {
@apply content text-blue-800;
}

.link-primary {
@apply link text-blue-700 hover:text-blue-600
}

.container-secondary {
@apply container bg-gray-50;
}

.content-secondary {
@apply content text-gray-800;
}

.link-secondary {
@apply link text-gray-700 hover:text-gray-600
}

.container-success {
@apply container bg-green-50;
}

.content-success {
@apply content text-green-800;
}

.link-success {
@apply link text-green-700 hover:text-green-600
}

.container-warning {
@apply container bg-yellow-50;
}

.content-warning {
@apply content text-yellow-800;
}

.link-warning {
@apply link text-yellow-700 hover:text-yellow-600
}
1 change: 1 addition & 0 deletions src/AdminConsole/Components/_Imports.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
@using Passwordless.AdminConsole.Authorization
@using Passwordless.AdminConsole.Components
@using Passwordless.AdminConsole.Components.Shared
@using Passwordless.AdminConsole.Components.Shared.Alerts
@using Passwordless.AdminConsole.Components.Shared.ApexCharts
@using Passwordless.AdminConsole.Components.Shared.Cards
@using Passwordless.AdminConsole.Components.Shared.Forms
Expand Down
66 changes: 0 additions & 66 deletions src/AdminConsole/Pages/Organization/Overview.cshtml
View file

This file was deleted.

Loading

0 comments on commit e27b3dd

Please sign in to comment.