Api-PWA/DocuMed.PWA/Pages/HomePage.razor

@page "/HomePage"
@inject NavigationManager NavigationManager
@inject IUserUtility UserUtility
@inject ISnackbar Snackbar
@inject IRestWrapper RestWrapper


<MudStack class="w-screen h-screen bg-[#356859]">
    <div @onclick="ProfileClicked" class="flex flex-row mt-4 mb-3">
        <MudStack Row="true" >
            <MudAvatar Size="Size.Large" Class="mr-5">
                <MudImage
                    Src="https://qph.cf2.quoracdn.net/main-thumb-161841968-200-xtisrhulnnwiuyeojsvojtoqjrqsglrj.jpeg">
                </MudImage>
            </MudAvatar>
            <MudStack class="justify-center ">
                <p class="font-bold text-lg text-white font-iranyekan">@ViewModel?.User.FullName</p>
                <p class="-mt-3 text-white font-light font-iranyekan">@ViewModel?.User.PhoneNumber</p>
            </MudStack>
        </MudStack>
        <MudButton class="my-auto ml-5 mr-auto font-extrabold bg-white rounded-lg">@ViewModel?.User.SectionName</MudButton>
    </div>
    <div class="bg-[#EEEEEE] w-full h-full flex flex-col rounded-t-xl">
        <MudStack class="pb-20 bg-[#EEEEEE] rounded-t-xl">
            <div class="flex flex-row mx-5 mt-5">
                <div>
                    <p class="font-extrabold text-[#356859]">شرح حال های امروز شما</p>
                    <p class="text-xs font-light ">لیست شرح حال های انجام شده در امروز</p>
                </div>
                <MudButton DisableElevation="false" @onclick="CreateMedicalHistoryClicked" class="text-[#356859] my-auto mr-auto font-extrabold bg-white rounded-lg drop-shadow-md">+ افزودن</MudButton>
            </div>
            @if (@ViewModel.IsProcessing)
            {
                @for (int i = 0; i < 4; i++)
                {
                    <MudCard class="bg-transparent p-4 rounded-lg" Elevation="0">
                        <div class="flex flex-row">
                            <div class="mx-4 mb-3 basis-1/3">
                                <MudSkeleton SkeletonType="SkeletonType.Rectangle" Animation="Animation.Wave" />
                                <MudSkeleton class="mt-3 h-2" SkeletonType="SkeletonType.Rectangle" Animation="Animation.Wave" />
                            </div>

                            <MudSkeleton class="mx-4 mb-3 h-10 basis-1/4 mr-auto" SkeletonType="SkeletonType.Rectangle" Animation="Animation.Wave" />
                        </div>
                        
                        <div class="grid grid-cols-3">
                            <MudSkeleton class="mx-4" Animation="Animation.Wave" SkeletonType="SkeletonType.Text" />
                            <MudSkeleton class="mx-4" Animation="Animation.Wave" />
                            <MudSkeleton class="mx-4" Animation="Animation.Wave" />
                        </div>
                    </MudCard>
                }
            }
            else
            {
                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 ">
                    @foreach (var item in @ViewModel.PageDto)
                    {
                        <MedicalHistoryItemTemplate MedicalHistory="@item" />
                    }
                </div>
            }

        </MudStack>

        <MudPaper class="fixed bottom-0 py-1 left-0 z-50 w-full bg-white rounded-t-xl">
            <div class="grid h-full max-w-lg grid-cols-4 mx-auto font-medium">


                <button type="button" class="inline-flex flex-col items-center justify-center px-1 group">

                    <MudIcon Icon="@Icons.Material.Outlined.MedicalInformation"
                             class="w-8 h-8 mb-2 text-[--color-primary]" />
                    <span class="-mt-1 text-sm text-[--color-primary]">شرح حال</span>
                </button>

                <button @onclick="MedicalHistoryTemplatesClicked" type="button" class="inline-flex flex-col items-center justify-center px-1 group">

                    <MudIcon Icon="@Icons.Material.Outlined.Difference"
                             Class="w-8 h-8 mb-2 text-gray-400 group-hover:text-[--color-primary]" />
                    <span class="-mt-1 text-sm text-gray-400 group-hover:text-[--color-primary]">پیش نویس</span>
                </button>

                <button @onclick="MedicalOrdersClicked" type="button" class="inline-flex flex-col items-center justify-center px-1 py-1 group">

                    <MudIcon Icon="@Icons.Material.Outlined.PostAdd"
                             Class="w-8 h-8 mb-2 text-gray-400 group-hover:text-[--color-primary]" />
                    <span class="-mt-1 text-sm text-gray-400 group-hover:text-[--color-primary]">اوردر ها</span>
                </button>

                <button @onclick="ProfileClicked" type="button"
                    class="inline-flex flex-col items-center justify-center px-1 group">

                    <MudIcon Icon="@Icons.Material.Filled.PersonOutline"
                             Class="w-8 h-8 mb-2 text-gray-400 group-hover:text-[--color-primary]" />
                    <span class="-mt-1 text-sm text-gray-400 group-hover:text-[--color-primary]">پروفایل</span>
                </button>
            </div>
        </MudPaper>
    </div>
</MudStack>

@code {

    private HomePageViewModel ViewModel { get; set; }

    public void ProfileClicked() => NavigationManager.NavigateTo("ProfilePage");

    public void CreateMedicalHistoryClicked() => NavigationManager.NavigateTo("MedicalHistoryActionPage");

    public void MedicalHistoryTemplatesClicked() => NavigationManager.NavigateTo("MedicalHistoryTemplatesPage");

    public void MedicalOrdersClicked() => NavigationManager.NavigateTo("MedicalOrdersPage");

    protected override async Task OnInitializedAsync()
    {
        ViewModel = new HomePageViewModel(UserUtility,RestWrapper,Snackbar);
        await ViewModel.InitializeAsync();
        await base.OnInitializedAsync();
    }

}