351 lines
17 KiB
Plaintext
351 lines
17 KiB
Plaintext
@using Radzen.Blazor
|
||
@using NetinaShop.AdminPanel.PWA.Extensions
|
||
|
||
@inject ISnackbar Snackbar
|
||
@inject IRestWrapper RestWrapper
|
||
@inject IUserUtility UserUtility
|
||
@inject IDialogService DialogService
|
||
|
||
<head>
|
||
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
|
||
</head>
|
||
|
||
<MudDialog class="mx-auto">
|
||
<DialogContent>
|
||
<MudContainer class="h-full">
|
||
<MudTabs Outlined="true" Elevation="0" Rounded="true" Centered="true">
|
||
<MudTabPanel class="h-full" Text="اطلاعات کلی" Icon="@Icons.Material.Outlined.Info">
|
||
<div class="h-full">
|
||
<MudStack Spacing="0" class="mt-4">
|
||
|
||
<MudText Typo="Typo.h6">اطلاعات کلی</MudText>
|
||
<MudText Typo="Typo.caption">اطلاعات کلی محصول را به دقت وارد کنید</MudText>
|
||
</MudStack>
|
||
<MudGrid>
|
||
|
||
<MudItem lg="4" md="6">
|
||
<MudTextField @bind-Value="@ViewModel.PageDto.PersianName" T="string" Label="نام فارسی محصول" Variant="Variant.Outlined" />
|
||
</MudItem>
|
||
<MudItem lg="4" md="6">
|
||
<MudTextField @bind-Value="@ViewModel.PageDto.EnglishName" T="string" Label="نام انگلیسی محصول" Variant="Variant.Outlined" />
|
||
</MudItem>
|
||
<MudItem lg="4" md="6">
|
||
|
||
<MudAutocomplete Required="true" ToStringFunc="dto => dto.Name" @bind-Value="@ViewModel.SelectedCategory"
|
||
SearchFunc="ViewModel.SearchProductCategory"
|
||
T="ProductCategorySDto"
|
||
Label="دسته بندی"
|
||
Variant="Variant.Outlined">
|
||
<ProgressIndicatorInPopoverTemplate>
|
||
<MudList Clickable="false">
|
||
<MudListItem>
|
||
<div class="flex flex-row w-full mx-auto">
|
||
<MudProgressCircular class="my-auto mr-1 -ml-4" Size="Size.Small" Indeterminate="true" />
|
||
<p class="font-bold my-1 mx-auto text-md">منتظر بمانید</p>
|
||
</div>
|
||
</MudListItem>
|
||
</MudList>
|
||
</ProgressIndicatorInPopoverTemplate>
|
||
<ItemTemplate Context="e">
|
||
<p>@e.Name</p>
|
||
</ItemTemplate>
|
||
</MudAutocomplete>
|
||
</MudItem>
|
||
<MudItem lg="4" md="6">
|
||
|
||
<MudAutocomplete Required="true" ToStringFunc="dto => dto.Name" @bind-Value="@ViewModel.SelectedBrand"
|
||
SearchFunc="ViewModel.SearchBrand"
|
||
T="BrandSDto"
|
||
Label="برند"
|
||
Variant="Variant.Outlined">
|
||
<ProgressIndicatorInPopoverTemplate>
|
||
<MudList Clickable="false">
|
||
<MudListItem>
|
||
<div class="flex flex-row w-full mx-auto">
|
||
<MudProgressCircular class="my-auto mr-1 -ml-4" Size="Size.Small" Indeterminate="true" />
|
||
<p class="font-bold my-1 mx-auto text-md">منتظر بمانید</p>
|
||
</div>
|
||
</MudListItem>
|
||
</MudList>
|
||
</ProgressIndicatorInPopoverTemplate>
|
||
<ItemTemplate Context="e">
|
||
<p>@e.Name</p>
|
||
</ItemTemplate>
|
||
</MudAutocomplete>
|
||
</MudItem>
|
||
<MudItem lg="4" md="6">
|
||
<MudTextField @bind-Value="@ViewModel.PageDto.Cost" T="double" Label="قیمت محصول" Adornment="Adornment.End" Format="N0" AdornmentText="ریالــ" Variant="Variant.Outlined" />
|
||
</MudItem>
|
||
<MudItem lg="4" md="6">
|
||
<MudTextField @bind-Value="@ViewModel.PageDto.PackingCost" T="double" Label="مبلغ بسته بندی" Format="N0" Adornment="Adornment.End" AdornmentText="ریالــ" Variant="Variant.Outlined" />
|
||
</MudItem>
|
||
<MudItem lg="4" md="6">
|
||
<MudTextField @bind-Value="@ViewModel.PageDto.Stock" T="int" Format="N0" Label="موجودی انبار" Variant="Variant.Outlined" />
|
||
</MudItem>
|
||
<MudItem lg="4" md="6">
|
||
<MudTextField @bind-Value="@ViewModel.PageDto.MaxOrderCount" T="int" Format="N0" Label="بیشترین خرید" Variant="Variant.Outlined" />
|
||
</MudItem>
|
||
<MudItem lg="4" md="6">
|
||
<MudTextField @bind-Value="@ViewModel.PageDto.Warranty" T="string" Label="گارانتی" Variant="Variant.Outlined" />
|
||
</MudItem>
|
||
<MudItem lg="4" md="6">
|
||
<MudSelect T="bool" @bind-Value="@ViewModel.PageDto.HasExpressDelivery" Label="آیا ارسال سریع دارد ؟" ToStringFunc="b=>b.ToPersianString()" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
|
||
<MudSelectItem T="bool" Value="true" />
|
||
<MudSelectItem T="bool" Value="false" />
|
||
</MudSelect>
|
||
</MudItem>
|
||
<MudItem lg="4" md="6">
|
||
<MudSelect T="bool" @bind-Value="@ViewModel.PageDto.BeDisplayed" Label="آیا نمایش داده شود است ؟" ToStringFunc="b=>b.ToPersianString()" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
|
||
<MudSelectItem T="bool" Value="true" />
|
||
<MudSelectItem T="bool" Value="false" />
|
||
</MudSelect>
|
||
</MudItem>
|
||
<MudItem lg="12" md="12">
|
||
<MudStack>
|
||
<MudTextField @bind-Value="@ViewModel.PageDto.Tags" T="string" Label="تگ ها" HelperText="تگ ها را با , میتوانید جدا کنید" HelperTextOnFocus="true" Variant="Variant.Outlined" />
|
||
</MudStack>
|
||
</MudItem>
|
||
<MudItem lg="12" md="12">
|
||
<MudTextField class="-mt-3" @bind-Value="@ViewModel.PageDto.Summery" T="string" Label="توضیحاتــ" Variant="Variant.Outlined"></MudTextField>
|
||
</MudItem>
|
||
</MudGrid>
|
||
</div>
|
||
</MudTabPanel>
|
||
<MudTabPanel Text="ویژگی های کلی" Icon="@Icons.Material.Outlined.AutoGraph">
|
||
<div class="min-h-[33rem]">
|
||
|
||
<MudStack class="mt-4" Spacing="0">
|
||
|
||
<MudText Typo="Typo.h6">ویژگی های کلی</MudText>
|
||
<MudText Typo="Typo.caption">می توانید ویگی های تکمیلی محصول را کامل وارد کنید</MudText>
|
||
</MudStack>
|
||
<MudGrid>
|
||
|
||
<MudItem lg="4" md="6">
|
||
<MudTextField @bind-Value="@ViewModel.SpecificationTitle" T="string" Label="عنوان" Variant="Variant.Outlined"></MudTextField>
|
||
</MudItem>
|
||
|
||
<MudItem lg="4" md="6">
|
||
<MudTextField @bind-Value="@ViewModel.SpecificationValue" T="string" Label="مقدار" Variant="Variant.Outlined"></MudTextField>
|
||
</MudItem>
|
||
|
||
<MudItem lg="4" md="12">
|
||
<MudButton Variant="Variant.Filled"
|
||
Size="Size.Large"
|
||
Color="Color.Info"
|
||
class="w-full py-3 mt-2"
|
||
OnClick="ViewModel.AddSpecification"
|
||
StartIcon="@Icons.Material.Outlined.Add">افزودن</MudButton>
|
||
</MudItem>
|
||
|
||
<MudItem sm="12">
|
||
<MudDataGrid Items="@ViewModel.Specifications" Elevation="0" Outlined="true" Bordered="true" Striped="true" Filterable="false" SortMode="@SortMode.None" Groupable="false">
|
||
<Columns>
|
||
<PropertyColumn Property="x => x.Title" Title="عنوان" />
|
||
<PropertyColumn Property="x => x.Value" Title="مقدار" />
|
||
<TemplateColumn T="SpecificationSDto" CellClass="d-flex justify-end">
|
||
<CellTemplate>
|
||
<MudStack Row>
|
||
<MudButton DisableElevation="true"
|
||
Size="@Size.Small"
|
||
Variant="@Variant.Filled"
|
||
OnClick="()=>ViewModel.RemoveSpecification(context.Item)"
|
||
Color="@Color.Error"
|
||
StartIcon="@Icons.Material.Outlined.Delete">حذف</MudButton>
|
||
</MudStack>
|
||
</CellTemplate>
|
||
</TemplateColumn>
|
||
</Columns>
|
||
</MudDataGrid>
|
||
</MudItem>
|
||
</MudGrid>
|
||
</div>
|
||
</MudTabPanel>
|
||
<MudTabPanel Text="توضیحات تکمیلی" Icon="@Icons.Material.Outlined.Article">
|
||
|
||
<div class="min-h-[33rem]">
|
||
<MudStack class="mt-4" Spacing="0">
|
||
|
||
<MudText Typo="Typo.h6">توضیحات تکمیلی</MudText>
|
||
<MudText Typo="Typo.caption">می توانید توضیحاتــ تکمیلی محصول را کامل وارد کنید</MudText>
|
||
</MudStack>
|
||
<MudGrid>
|
||
<MudItem sm="12">
|
||
|
||
<RichTextEditorUi @bind-Text="@ViewModel.PageDto.ExpertCheck" />
|
||
|
||
</MudItem>
|
||
</MudGrid>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
|
||
|
||
|
||
var myInterval = setInterval(()=>{
|
||
lunchEditor()
|
||
console.log("retry to load editor")
|
||
},50)
|
||
|
||
function lunchEditor() {
|
||
if (document.querySelector('.editor')) {
|
||
ClassicEditor
|
||
.create(document.querySelector('.editor'), {
|
||
// Editor configuration.
|
||
})
|
||
.then(editor => {
|
||
window.editor = editor;
|
||
clearInterval(myInterval)
|
||
console.info("Editor Lunched , Interval Cleared !")
|
||
})
|
||
.catch(handleSampleError);
|
||
}else return
|
||
}
|
||
function handleSampleError(error) {
|
||
const issueUrl = 'https://github.com/ckeditor/ckeditor5/issues';
|
||
|
||
const message = [
|
||
'Oops, something went wrong!',
|
||
`Please, report the following error on ${issueUrl} with the build id "pws0dnpd0jqj-zi42lsl7aqxa" and the error stack trace:`
|
||
].join('\n');
|
||
|
||
console.error(message);
|
||
console.error(error);
|
||
}
|
||
</script>
|
||
</MudTabPanel>
|
||
<MudTabPanel Text="تـــــصاویر" Icon="@Icons.Material.Outlined.ImageSearch">
|
||
|
||
<div class="min-h-[33rem]">
|
||
<MudStack class="mt-4 mb-2" Spacing="0">
|
||
|
||
<MudText Typo="Typo.h6">تصاویر محصول</MudText>
|
||
<MudText Typo="Typo.caption">می توانید برای محصول چند تصویر اپلود کنید</MudText>
|
||
</MudStack>
|
||
<MudStack Row="true">
|
||
<MudIconButton HtmlTag="label"
|
||
Color="Color.Info"
|
||
Variant="Variant.Outlined"
|
||
class="w-28 h-28"
|
||
Size="Size.Large"
|
||
Icon="@Icons.Material.Outlined.Wallpaper"
|
||
OnClick="async () => await ViewModel.SelectFileAsync()">
|
||
</MudIconButton>
|
||
@foreach (var item in ViewModel.Files)
|
||
{
|
||
<div class="w-28 h-28">
|
||
<MudImage Src="@item.GetLink()" Elevation="25" Class="rounded-lg w-28 h-28 absolute" />
|
||
|
||
<MudIconButton DisableElevation="true"
|
||
class="absolute m-1.5"
|
||
Size="@Size.Small"
|
||
Variant="@Variant.Filled"
|
||
OnClick="() => ViewModel.RemoveFile(item)"
|
||
Color="@Color.Error"
|
||
Icon="@Icons.Material.Outlined.Delete" />
|
||
@if (item.IsHeader)
|
||
{
|
||
<p class="bg-pink-500 px-1.5 py-0.5 absolute bottom-0 mr-2 rounded-lg text-white">هدر</p>
|
||
}
|
||
@if (item.IsPrimary)
|
||
{
|
||
<p class="bg-blue-500 px-1.5 py-0.5 absolute bottom-0 mr-2 rounded-lg text-white">اصلی</p>
|
||
}
|
||
</div>
|
||
}
|
||
|
||
</MudStack>
|
||
</div>
|
||
|
||
</MudTabPanel>
|
||
|
||
<MudTabPanel Text="پیشنهاد ویژه" Icon="@Icons.Material.Outlined.LocalOffer">
|
||
|
||
<div class="min-h-[33rem]">
|
||
<MudGrid>
|
||
|
||
<MudItem sm="12">
|
||
<MudSwitch @bind-Value="@ViewModel.IsSpecialOffer"
|
||
class="mt-2"
|
||
Size="Size.Large"
|
||
T="bool"
|
||
Label="آیا محصول در فروش ویژه میباشد ؟"
|
||
Color="Color.Info" />
|
||
</MudItem>
|
||
|
||
<MudItem md="4">
|
||
|
||
<MudSelect Disabled="@ViewModel.IsSpecialOffer.Not()" T="DiscountAmountType" ValueChanged="@ViewModel.AmountTypeChanged" Label="نوع تخفیفـــ" ToStringFunc="b=>b.ToDisplay()" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
|
||
<MudSelectItem T="DiscountAmountType" Value="DiscountAmountType.Percent" />
|
||
<MudSelectItem T="DiscountAmountType" Value="DiscountAmountType.Amount" />
|
||
</MudSelect>
|
||
</MudItem>
|
||
|
||
<MudItem md="4">
|
||
<MudTextField Disabled="@ViewModel.IsPercentType.Not()" @bind-Value="@ViewModel.Discount.DiscountPercent" Format="N0" T="int" Label="درصد تخفیف" Variant="Variant.Outlined" />
|
||
</MudItem>
|
||
|
||
<MudItem md="4">
|
||
<MudTextField Disabled="@ViewModel.IsAmountType.Not()" @bind-Value="@ViewModel.Discount.DiscountAmount" Format="N0" T="long" Label="مبلغ تخفیفــ" Adornment="Adornment.End" AdornmentText="ریالــ" Variant="Variant.Outlined" />
|
||
</MudItem>
|
||
|
||
|
||
<MudItem sm="6">
|
||
<MudDatePicker Disabled="@ViewModel.IsSpecialOffer.Not()" @bind-Date="@ViewModel.StartDate" UseShortNames="false" TitleDateFormat="dddd, dd MMMM" Label="تاریخ شروع تخفیفــ" Variant="Variant.Outlined" Culture="@PersianCultureInfo.GetPersianCulture()" />
|
||
|
||
</MudItem>
|
||
<MudItem sm="6">
|
||
<MudDatePicker Disabled="@ViewModel.IsSpecialOffer.Not()" @bind-Date="@ViewModel.ExpireDate" UseShortNames="false" TitleDateFormat="dddd, dd MMMM" Label="تاریخ پایان تخفیفــ" Variant="Variant.Outlined" Culture="@PersianCultureInfo.GetPersianCulture()" />
|
||
|
||
</MudItem>
|
||
|
||
|
||
</MudGrid>
|
||
</div>
|
||
</MudTabPanel>
|
||
</MudTabs>
|
||
</MudContainer>
|
||
</DialogContent>
|
||
<DialogActions>
|
||
<MudStack Row="true" class="w-full h-fit mx-4 bottom-0">
|
||
|
||
@if (ViewModel.IsEditing)
|
||
{
|
||
<BaseButtonUi class="w-64 rounded-md" IsProcessing="@ViewModel.IsProcessing"
|
||
Icon="@Icons.Material.Outlined.Check"
|
||
Variant="Variant.Filled" Color="Color.Success"
|
||
Content="ثبت ویرایش" OnClickCallback="ViewModel.SubmitEditAsync" />
|
||
}
|
||
else
|
||
{
|
||
<BaseButtonUi class="w-64 rounded-md" IsProcessing="@ViewModel.IsProcessing"
|
||
Icon="@Icons.Material.Outlined.Check"
|
||
Variant="Variant.Filled" Color="Color.Success"
|
||
Content="تایید" OnClickCallback="ViewModel.SubmitCreateAsync" />
|
||
}
|
||
<MudSpacer />
|
||
<MudButton Variant="Variant.Outlined" Size="Size.Large" Color="Color.Error" OnClick="ViewModel.Cancel">بستن</MudButton>
|
||
</MudStack>
|
||
</DialogActions>
|
||
</MudDialog>
|
||
|
||
@code {
|
||
[CascadingParameter]
|
||
MudDialogInstance MudDialog { get; set; }
|
||
|
||
[Parameter]
|
||
public ProductSDto? Product { get; set; }
|
||
|
||
public ProductActionDialogBoxViewModel ViewModel { get; set; }
|
||
|
||
protected override async Task OnInitializedAsync()
|
||
{
|
||
if (Product == null)
|
||
ViewModel = new ProductActionDialogBoxViewModel(Snackbar, RestWrapper, UserUtility, DialogService, MudDialog);
|
||
else
|
||
ViewModel = new ProductActionDialogBoxViewModel(Snackbar, RestWrapper, UserUtility, DialogService, MudDialog, Product);
|
||
await ViewModel.InitializeAsync();
|
||
await base.OnInitializedAsync();
|
||
}
|
||
|
||
} |