Iniziata creazione pagina contatti
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
@using Template.Shared.Core.Entity
|
||||
|
||||
<div class="contact-card">
|
||||
<div class="contact-left-section">
|
||||
<div class="contact-body-section">
|
||||
<div class="title-section">
|
||||
<MudText Class="contact-title" Typo="Typo.body1" HtmlTag="h3">@Contact.PersonaRif</MudText>
|
||||
</div>
|
||||
|
||||
@if (Contact.Mansione is not null)
|
||||
{
|
||||
<MudText Class="contact-subtitle" Typo="Typo.body1" HtmlTag="p">@Contact.Mansione</MudText>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-right-section">
|
||||
<MudIcon Color="Color.Success" Disabled="@(Contact.NumCellulare.IsNullOrEmpty())" Size="Size.Large" Icon="@Icons.Material.Outlined.Phone" />
|
||||
<MudIcon Color="Color.Info" Disabled="@(Contact.EMail.IsNullOrEmpty())" Size="Size.Large" Icon="@Icons.Material.Filled.MailOutline" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public VtbCliePersRif Contact { get; set; } = new();
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
.contact-card {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: .5rem .5rem;
|
||||
border-radius: 16px;
|
||||
line-height: normal;
|
||||
box-shadow: var(--custom-box-shadow);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact-card.memo { border-left: 5px solid var(--mud-palette-info-darken); }
|
||||
|
||||
.contact-card.interna { border-left: 5px solid var(--mud-palette-success-darken); }
|
||||
|
||||
.contact-card.commessa { border-left: 5px solid var(--mud-palette-warning); }
|
||||
|
||||
.contact-left-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contact-hours { font-weight: 700; }
|
||||
|
||||
.contact-hours-section ::deep .mud-chip { margin: 5px 0 0 !important; }
|
||||
|
||||
.contact-body-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title-section ::deep > .contact-title {
|
||||
font-weight: 800 !important;
|
||||
margin: 0 !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.contact-body-section ::deep > .contact-subtitle {
|
||||
color: var(--mud-palette-gray-darker);
|
||||
margin: .2rem 0 !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.contact-info-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.contact-right-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
@using Template.Shared.Core.Entity
|
||||
@using Template.Shared.Core.Interface
|
||||
@inject IManageDataService ManageData
|
||||
|
||||
<div class="user-card-card">
|
||||
<div class="user-card-left-section">
|
||||
<div class="user-card-body-section">
|
||||
<div class="title-section">
|
||||
<MudIcon @onclick="OpenUser" Color="Color.Primary" Icon="@Icons.Material.Filled.Person" Size="Size.Large" />
|
||||
|
||||
<div class="user-card-right-section">
|
||||
<div class="user-card-title">
|
||||
<MudText Typo="Typo.body1" @onclick="OpenUser" HtmlTag="h3">@User.RagSoc</MudText>
|
||||
<MudIcon @onclick="ShowCommesse" Color="Color.Info" Icon="@Icons.Material.Outlined.Info" Size="Size.Medium"/>
|
||||
</div>
|
||||
|
||||
<div class="user-card-subtitle @(ShowSectionCommesse ? "show" : "")">
|
||||
@if (ShowSectionCommesse && IsLoading)
|
||||
{
|
||||
<MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7" />
|
||||
}
|
||||
else
|
||||
{
|
||||
@if (!Commesse.IsNullOrEmpty())
|
||||
{
|
||||
<div @onclick="OpenUser" class="container-commesse">
|
||||
@foreach (var commessa in Commesse!)
|
||||
{
|
||||
<div class="commessa">
|
||||
<span>@($"{commessa.CodAnag} - {commessa.Descrizione}")</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span>Nessuna commessa presente</span>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public AnagClie User { get; set; } = new();
|
||||
|
||||
private List<JtbComt>? Commesse { get; set; }
|
||||
private bool IsLoading { get; set; } = true;
|
||||
private bool ShowSectionCommesse { get; set; }
|
||||
|
||||
private void OpenUser() =>
|
||||
NavigationManager.NavigateTo($"/User/{User.CodAnag}");
|
||||
|
||||
private async Task ShowCommesse()
|
||||
{
|
||||
ShowSectionCommesse = !ShowSectionCommesse;
|
||||
|
||||
if (ShowSectionCommesse)
|
||||
{
|
||||
Commesse = await ManageData.GetTable<JtbComt>(x => x.CodAnag.Equals(User.CodAnag));
|
||||
IsLoading = false;
|
||||
StateHasChanged();
|
||||
return;
|
||||
}
|
||||
|
||||
IsLoading = true;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
.user-card-card { width: 100%; }
|
||||
|
||||
.user-card-card.memo { border-left: 5px solid var(--mud-palette-info-darken); }
|
||||
|
||||
.user-card-card.interna { border-left: 5px solid var(--mud-palette-success-darken); }
|
||||
|
||||
.user-card-card.commessa { border-left: 5px solid var(--mud-palette-warning); }
|
||||
|
||||
.user-card-left-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: .75rem;
|
||||
}
|
||||
|
||||
.user-card-hours { font-weight: 700; }
|
||||
|
||||
.user-card-hours-section ::deep .mud-chip { margin: 5px 0 0 !important; }
|
||||
|
||||
.user-card-body-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.user-card-right-section {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--card-border-color);
|
||||
}
|
||||
|
||||
.user-card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding-left: .25rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.user-card-title ::deep > h3 {
|
||||
font-weight: 700 !important;
|
||||
margin: 0 !important;
|
||||
line-height: normal !important;
|
||||
font-size: .85rem;
|
||||
}
|
||||
|
||||
.user-card-body-section ::deep > .user-card-subtitle {
|
||||
color: var(--mud-palette-gray-darker);
|
||||
margin: .2rem 0 !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.user-card-info-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.title-section ::deep > .mud-icon-root {
|
||||
background: var(--gray-for-shadow);
|
||||
padding: .25rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-card-subtitle {
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
transition: max-height 0.4s ease, opacity 0.4s ease;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.user-card-subtitle.show {
|
||||
max-height: 250px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.container-commesse {
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.commessa {
|
||||
color: var(--mud-palette-text-secondary);
|
||||
font-weight: 700;
|
||||
font-size: small;
|
||||
}
|
||||
Reference in New Issue
Block a user