Dataset page states

This commit is contained in:
Chris Bell 2025-07-02 15:26:14 -05:00
parent 4cbaa4f07f
commit 033e007758
5 changed files with 95 additions and 30 deletions

View File

@ -150,6 +150,11 @@
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: stretch;
}
form > * {
flex: 1;
}
label {
@ -160,7 +165,7 @@
}
input[type="text"], textarea, select {
width: 100%;
flex: 1;
padding: 12px;
border: 2px solid var(--primary-color);
border-radius: 6px;

View File

@ -4,4 +4,7 @@ namespace SessionZero.Pages.Library.Datasets;
public partial class DatasetEditor : ComponentBase
{
}
}

View File

@ -7,31 +7,71 @@
@inject SzfGenerator SzfGenerator
<NavLink class="button-secondary" href="/library/" style="align-self: flex-start;">
<img src="res/icons/outline/arrows/arrow-left.svg" class="button-icon" />
Back to Library
</NavLink>
@switch (_currentPageState)
{
case PageState.Main:
<NavLink class="button-secondary" href="/library/" style="align-self: flex-start;">
<img src="res/icons/outline/arrows/arrow-left.svg" class="button-icon" />
Back to Library
</NavLink>
<h1 class="page-title">Datasets</h1>
<h1 class="page-title">Datasets</h1>
<div class="library-card-container">
<div class="card" onclick="@(() => { })">
<img src="res/icons/outline/general/plus.svg" class="icon"/>
<h1>Create</h1>
<p>Create a new datasets</p>
</div>
<div class="library-card-container">
<div class="card" onclick="@(() => { SetPageState(PageState.Create); })">
<img src="res/icons/outline/general/plus.svg" class="icon"/>
<h1>Create</h1>
<p>Create a new datasets</p>
</div>
<div class="card" onclick="@(() => { })">
<img src="res/icons/outline/general/edit.svg" class="icon"/>
<h1>Manage</h1>
<p>Manage and edit saved datasets</p>
</div>
<div class="card" onclick="@(() => { SetPageState(PageState.List); })">
<img src="res/icons/outline/general/edit.svg" class="icon"/>
<h1>Manage</h1>
<p>Manage and edit saved datasets</p>
</div>
<div class="card" onclick="@(() => { })">
<img src="res/icons/outline/general/search.svg" class="icon"/>
<h1>SessionZeroDB</h1>
<p>Search online for new datasets (NOT FUNCTIONAL)</p>
</div>
</div>
<div class="card" onclick="@(() => { SetPageState(PageState.SessionZeroDB); })">
<img src="res/icons/outline/general/search.svg" class="icon"/>
<h1>SessionZeroDB</h1>
<p>Search online for new datasets (NOT FUNCTIONAL)</p>
</div>
</div>
break;
case PageState.Create:
<div class="button-secondary" href="/library/" style="align-self: flex-start;" onclick="@(() => { SetPageState(PageState.Main); })">
<img src="res/icons/outline/arrows/arrow-left.svg" class="button-icon" />
Go Back
</div>
<h1 class="page-title">Create Dataset</h1>
<DatasetEditor/>
break;
case PageState.List:
<div class="button-secondary" href="/library/" style="align-self: flex-start;" onclick="@(() => { SetPageState(PageState.Main); })">
<img src="res/icons/outline/arrows/arrow-left.svg" class="button-icon" />
Go Back
</div>
<h1 class="page-title">Manage Datasets</h1>
<p>Here you can manage your saved datasets</p>
break;
case PageState.SessionZeroDB:
<div class="button-secondary" href="/library/" style="align-self: flex-start;" onclick="@(() => { SetPageState(PageState.Main); })">
<img src="res/icons/outline/arrows/arrow-left.svg" class="button-icon" />
Go Back
</div>
<h1 class="page-title">SessionZeroDB</h1>
<p>This is where you will be able to search online for new datasets</p>
break;
default:
<NavLink class="button-secondary" href="/library/" style="align-self: flex-start;">
<img src="res/icons/outline/arrows/arrow-left.svg" class="button-icon" />
Back to Library
</NavLink>
<h1 class="page-title">Oops!</h1>
<p>Something went wrong.</p>
break;
}
<DatasetEditor></DatasetEditor>

View File

@ -4,5 +4,20 @@ namespace SessionZero.Pages.Library.Datasets;
public partial class Datasets : ComponentBase
{
private PageState _currentPageState = PageState.Main;
enum PageState
{
Main,
Create,
List,
View,
Edit,
SessionZeroDB
}
private void SetPageState(PageState state)
{
_currentPageState = state;
}
}

View File

@ -104,13 +104,15 @@ html, body, #app {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: flex-start;
justify-content: center;
margin: 0 auto;
max-width: 1200px;
}
.library-card-container .card {
flex: 1;
min-width: 250px;
max-width: calc(50% - 0.75rem);
flex: 1 1 300px;
max-width: 300px;
min-width: 300px;
padding: 1.5rem;
}