tsai
/
eventhub
mirror of https://github.com/abpframework/eventhub
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add abp tag helpers to edit organization and event page

pull/21/head
EngincanV 6 years ago
parent
0e820ed086
commit
026e00c5f2
6 changed files with 66 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 67
      src/EventHub.Web/Pages/Events/Edit.cshtml
  2. 2
      src/EventHub.Web/Pages/Events/Edit.cshtml.cs
  3. 9
      src/EventHub.Web/Pages/Events/Edit.js
  4. 47
      src/EventHub.Web/Pages/Organizations/Edit.cshtml
  5. 1
      src/EventHub.Web/Pages/Organizations/Edit.cshtml.cs
  6. 4
      src/EventHub.Web/Pages/Organizations/Edit.js

67
src/EventHub.Web/Pages/Events/Edit.cshtml
View File

@ -12,22 +12,10 @@
<input type="hidden" value="@Model.Url" id="event-detail-url"/> <input type="hidden" value="@Model.Url" id="event-detail-url"/>
<div class="container mb-4"> <div class="container mb-4">
<h1>Edit Event</h1> <h1>Edit Event</h1>
<abp-tabs tab-style="Pill">
<ul class="nav nav-pills mt-3 mb-3" id="pills-tab" role="tablist"> <abp-tab title="Event Information">
<li class="nav-item"> <form method="post" class="mt-3">
<a class="nav-link active" id="event-info-tab" data-toggle="pill" href="#event-info" role="tab" aria-controls="event-info" aria-selected="true">Event Information</a> <abp-input asp-for="Event.Id"/>
</li>
<li class="nav-item">
<a class="nav-link" id="event-timing-tab" data-toggle="pill" href="#event-timing" role="tab" aria-controls="event-timing" aria-selected="false">Event Timing</a>
</li>
<li class="nav-item">
<a class="nav-link" id="event-cover-image-tab" data-toggle="pill" href="#event-cover-image" role="tab" aria-controls="event-cover-image" aria-selected="false">Event Cover Image</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="event-info" role="tabpanel" aria-labelledby="event-info-tab">
<form method="post">
<abp-input asp-for="Event.Id" />
<abp-input asp-for="Event.Title"/> <abp-input asp-for="Event.Title"/>
<abp-input asp-for="Event.Description"/> <abp-input asp-for="Event.Description"/>
<abp-input asp-for="Event.IsOnline"/> <abp-input asp-for="Event.IsOnline"/>
@ -46,9 +34,9 @@
<abp-button size="Large" button-type="Primary" type="submit" text="@L["Submit"].Value"/> <abp-button size="Large" button-type="Primary" type="submit" text="@L["Submit"].Value"/>
</form> </form>
</div> </abp-tab>
<div class="tab-pane fade" id="event-timing" role="tabpanel" aria-labelledby="event-timing-tab"> <abp-tab title="Event Timing">
<div class="alert alert-info" role="alert"> <div class="alert alert-info mt-3" role="alert" >
Note: You can not change the event timing more than two times. Note: You can not change the event timing more than two times.
</div> </div>
<div class="alert alert-warning mt-3" role="alert"> <div class="alert alert-warning mt-3" role="alert">
@ -59,11 +47,11 @@
<abp-input asp-for="EventTiming.StartTime"/> <abp-input asp-for="EventTiming.StartTime"/>
<abp-input asp-for="EventTiming.EndTime"/> <abp-input asp-for="EventTiming.EndTime"/>
<abp-button size="Large" button-type="Primary" type="submit" text="@L["Submit"].Value"/> <abp-button size="Large" button-type="Primary" type="button" id="btn-event-timing" text="@L["Submit"].Value"/>
</form> </form>
</div> </abp-tab>
<div class="tab-pane fade" id="event-cover-image" role="tabpanel" aria-labelledby="event-cover-image-tab"> <abp-tab title="Event Cover Image">
<form method="post" id="cover-image-form"> <form method="post" id="cover-image-form" class="mt-3">
<input type="hidden" id="event-id" value="@Model.Event.Id"/> <input type="hidden" id="event-id" value="@Model.Event.Id"/>
<abp-row> <abp-row>
<abp-column size="_12" v-align="Center"> <abp-column size="_12" v-align="Center">
@ -77,16 +65,27 @@
</div> </div>
</abp-column> </abp-column>
</abp-row> </abp-row>
<abp-button class="btn-block" id="event-cover-image-btnSubmit" button-type="Primary" type="submit" text="@L["Submit"].Value" /> <abp-button class="btn-block" id="event-cover-image-btnSubmit" button-type="Primary" type="submit" text="@L["Submit"].Value" />
</form> </form>
</div> </abp-tab>
<abp-modal centered="true" scrollable="true" size="Small" id="cover-image-preview-modal"> </abp-tabs>
<abp-modal-header title="Cover Image Preview"></abp-modal-header> <abp-modal centered="true" scrollable="true" size="Large" id="event-timing-preview-modal">
<abp-modal-body> <abp-modal-header title="Event Timing Preview"></abp-modal-header>
<img class="img-fluid" id="img-upload" alt="event-cover-image-preview"/> <abp-modal-body>
</abp-modal-body> If you change the event times, an informational email will be sent to all attendees.
<abp-modal-footer buttons="@(AbpModalButtons.Close)"></abp-modal-footer> </abp-modal-body>
</abp-modal> <abp-modal-footer>
</div> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" id="event-timing-confirm" class="btn btn-success">Confirm</button>
</abp-modal-footer>
</abp-modal>
<abp-modal centered="true" scrollable="true" size="Small" id="cover-image-preview-modal">
<abp-modal-header title="Cover Image Preview"></abp-modal-header>
<abp-modal-body>
<img class="img-fluid" id="img-upload" alt="event-cover-image-preview"/>
</abp-modal-body>
<abp-modal-footer buttons="@(AbpModalButtons.Close)"></abp-modal-footer>
</abp-modal>
</div> </div>

2
src/EventHub.Web/Pages/Events/Edit.cshtml.cs
View File

@ -168,7 +168,7 @@ namespace EventHub.Web.Pages.Events
[Required] [Required]
[DataType(DataType.Upload)] [DataType(DataType.Upload)]
[MaxFileSize(EventConsts.MaxCoverImageFileSize)] // [MaxFileSize(EventConsts.MaxCoverImageFileSize)]
[AllowedExtensions(new string[] { ".jpg", ".png", ".jpeg" })] [AllowedExtensions(new string[] { ".jpg", ".png", ".jpeg" })]
public IFormFile CoverImageFile { get; set; } public IFormFile CoverImageFile { get; set; }
} }

9
src/EventHub.Web/Pages/Events/Edit.js
View File

@ -19,6 +19,15 @@ $(function () {
} }
}); });
$("#btn-event-timing").click(function () {
$("#event-timing-preview-modal").modal("show");
});
$("#event-timing-confirm").click(function () {
$("#Event_Timing_Form").submit();
$("#event-timing-preview-modal").modal("hide");
})
$("#Event_Timing_Form").submit(function (e) { $("#Event_Timing_Form").submit(function (e) {
e.preventDefault(); e.preventDefault();

47
src/EventHub.Web/Pages/Organizations/Edit.cshtml
View File

@ -2,6 +2,7 @@
@inject IHtmlLocalizer<EventHubResource> L @inject IHtmlLocalizer<EventHubResource> L
@using EventHub.Localization @using EventHub.Localization
@using Microsoft.AspNetCore.Mvc.Localization @using Microsoft.AspNetCore.Mvc.Localization
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@model EventHub.Web.Pages.Organizations.EditPageModel @model EventHub.Web.Pages.Organizations.EditPageModel
@section scripts { @section scripts {
@ -11,28 +12,20 @@
<div class="container mb-4"> <div class="container mb-4">
<h1>@L["EditOrganization"]</h1> <h1>@L["EditOrganization"]</h1>
<ul class="nav nav-pills mt-3 mb-3" id="pills-tab" role="tablist"> <abp-tabs tab-style="Pill">
<li class="nav-item"> <abp-tab title="@(L["ProfileInfo"].Value)">
<a class="nav-link active" id="profile-info-tab" data-toggle="pill" href="#profile-info" role="tab" aria-controls="profile-info" aria-selected="true">@L["ProfileInfo"]</a> <abp-dynamic-form abp-model="Organization" submit-button="true" class="mt-3"/>
</li> </abp-tab>
<li class="nav-item"> <abp-tab title="@(L["ProfilePicture"].Value)">
<a class="nav-link" id="profile-picture-tab" data-toggle="pill" href="#profile-picture" role="tab" aria-controls="profile-picture" aria-selected="false">@L["ProfilePicture"]</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="profile-info" role="tabpanel" aria-labelledby="profile-info-tab">
<abp-dynamic-form abp-model="Organization" submit-button="true"/>
</div>
<div class="tab-pane fade" id="profile-picture" role="tabpanel" aria-labelledby="profile-picture-tab">
<form method="post" id="EditOrganizationProfileForm" enctype="multipart/form-data"> <form method="post" id="EditOrganizationProfileForm" enctype="multipart/form-data">
<input type="hidden" id="organization-id" value="@Model.Organization.Id"/> <input type="hidden" id="organization-id" value="@Model.Organization.Id"/>
<input type="hidden" id="organization-name" value="@Model.Name" /> <input type="hidden" id="organization-name" value="@Model.Name"/>
<abp-row> <abp-row>
<abp-column size="_12" v-align="Center"> <abp-column size="_12" v-align="Center">
<div class="form-group"> <div class="form-group">
<label>@L["ProfilePicture"]</label> <label>@L["ProfilePicture"]</label>
<div class="custom-file"> <div class="custom-file">
<input id="organization-profile-picture" type="file" class="custom-file-input form-control"> <input id="organization-profile-picture" type="file" class="custom-file-input form-control" required="required">
<label id="choose-cover-image" class="custom-file-label" for="customFile">@L["ChooseOrganizationProfilePicture"]</label> <label id="choose-cover-image" class="custom-file-label" for="customFile">@L["ChooseOrganizationProfilePicture"]</label>
<small id="Organization_ProfilePictureInfoText" class="form-text text-muted mt-2">@L["OrganizationProfilePictureInfo"]</small> <small id="Organization_ProfilePictureInfoText" class="form-text text-muted mt-2">@L["OrganizationProfilePictureInfo"]</small>
</div> </div>
@ -43,18 +36,14 @@
@L["Submit"] @L["Submit"]
</button> </button>
</form> </form>
<div class="modal fade" id="picturePreviewModal" role="dialog"> </abp-tab>
<div class="modal-dialog"> </abp-tabs>
<div class="modal-content">
<div class="modal-body"> <abp-modal centered="true" scrollable="true" size="Large" id="profile-picture">
<img class="img-fluid" id="img-upload" alt=""/> <abp-modal-header title="Profile Picture Preview"></abp-modal-header>
</div> <abp-modal-body>
<div class="modal-footer"> <img class="img-fluid" id="img-upload" alt=""/>
<button type="button" class="btn btn-primary btn-block" data-dismiss="modal">@L["Close"]</button> </abp-modal-body>
</div> <abp-modal-footer buttons="@(AbpModalButtons.Close)"></abp-modal-footer>
</div> </abp-modal>
</div>
</div>
</div>
</div>
</div> </div>

1
src/EventHub.Web/Pages/Organizations/Edit.cshtml.cs
View File

@ -86,6 +86,7 @@ namespace EventHub.Web.Pages.Organizations
[Required] [Required]
public Guid OrganizationId { get; set; } public Guid OrganizationId { get; set; }
[Required]
[DataType(DataType.Upload)] [DataType(DataType.Upload)]
[MaxFileSize(OrganizationConsts.MaxProfilePictureFileSize)] [MaxFileSize(OrganizationConsts.MaxProfilePictureFileSize)]
[AllowedExtensions(new string[] { ".jpg", ".png", ".jpeg" })] [AllowedExtensions(new string[] { ".jpg", ".png", ".jpeg" })]

4
src/EventHub.Web/Pages/Organizations/Edit.js
View File

@ -76,6 +76,10 @@ $(function () {
var organizationId = document.getElementById("organization-id").value; var organizationId = document.getElementById("organization-id").value;
var organizationName = document.getElementById("organization-name").value; var organizationName = document.getElementById("organization-name").value;
if(!$(this).valid()) {
return false;
}
if(file === undefined) { if(file === undefined) {
file = null; file = null;
} }

Write Preview
Loading…
Cancel
Save