Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

13715: Added edit button to the ContentPickerField Edit view #13764

Merged
merged 18 commits into from
Apr 19, 2024
Merged

13715: Added edit button to the ContentPickerField Edit view #13764

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
c056fcd
13715: First version added edit button
May 29, 2023
1e12649
13715: Forgot generated/minified js files and PR feedback
May 29, 2023
a4ff9af
Removed unnecessary @
May 31, 2023
0790489
Authorization checks and renaming
Jun 2, 2023
b2fd038
Forgot generated files
Jun 2, 2023
07e9a41
Merge with main
Aug 13, 2023
697a700
WIP
Aug 13, 2023
232acda
Implemented possibility to click ContentPickerField items
Aug 13, 2023
fdc8c33
Merge with main
Sep 11, 2023
901f87f
Implemented returnUrl for ContentPickerField Edit urls
Sep 11, 2023
2f84156
Merge with main
Jan 29, 2024
192c665
Merge with main
Mar 22, 2024
c42a9ac
13715: Removed unused using
Mar 22, 2024
42b8501
Merge branch 'main' into 13715-add-edit-button-contentpickerfield
MikeAlhayek Mar 22, 2024
56136b5
Open in new tab
Mar 26, 2024
c52d027
Merge branch '13715-add-edit-button-contentpickerfield' of https://gi…
Mar 26, 2024
72f4168
Merge remote-tracking branch 'official/main' into 13715-add-edit-butt…
Piedone Apr 19, 2024
a300fba
Rebuilding assets
Piedone Apr 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/OrchardCore.Modules/OrchardCore.ContentFields/Assets/js/vue-multiselect-wrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ function initVueMultiselect(element) {
if (element) {
var elementId = element.id;
var selectedItems = JSON.parse(element.dataset.selectedItems || "[]");
var editUrl = element.dataset.editUrl;
var searchUrl = element.dataset.searchUrl;
var multiple = JSON.parse(element.dataset.multiple);

Expand Down Expand Up @@ -99,6 +100,10 @@ function initVueMultiselect(element) {
// a single content item and we've just selected that one item.
this.searchBoxContainer.css("display", multiple ? "block" : "none");
},
edit: function(item) {
url = editUrl.replace('contentItemId', item.id);
window.open(url, '_blank').focus();
MikeAlhayek marked this conversation as resolved.
Show resolved Hide resolved
},
remove: function (item) {
this.arrayOfItems.splice(this.arrayOfItems.indexOf(item), 1);

Expand Down
5 changes: 3 additions & 2 deletions src/OrchardCore.Modules/OrchardCore.ContentFields/Views/ContentPickerField.Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
var partName = Model.PartFieldDefinition.PartDefinition.Name;
var fieldName = Model.PartFieldDefinition.Name;
var uniqueName = $"{Model.PartFieldDefinition.PartDefinition.Name}-{Model.PartFieldDefinition.Name}";
var editUrl = Url.RouteUrl(new { area = "OrchardCore.Contents", controller = "Admin", action = "Edit", contentItemId = "contentItemId" });
var searchUrl = Url.RouteUrl(new { area = "OrchardCore.ContentFields", controller = "ContentPickerAdmin", action = "SearchContentItems", part = partName, field = fieldName });
var vueElementId = $"ContentPicker_{partName}_{fieldName}_{Guid.NewGuid().ToString("n")}";
var multiple = settings.Multiple.ToString().ToLowerInvariant();
Expand All @@ -19,16 +20,16 @@
<div class="@Orchard.GetWrapperCssClasses("field-wrapper", $"field-wrapper-{uniqueName.HtmlClassify()}")" id="@Html.IdFor(x => x.ContentItemIds)_FieldWrapper">
<label asp-for="ContentItemIds" class="@Orchard.GetLabelCssClasses()">@Model.PartFieldDefinition.DisplayName()</label>
<div class="@Orchard.GetEndCssClasses()">
<div id="@vueElementId" class="vue-multiselect" data-part="@partName" data-field="@fieldName" data-editor-type="ContentPicker" data-selected-items="@selectedItems" data-search-url="@searchUrl" data-multiple="@multiple">
<div id="@vueElementId" class="vue-multiselect" data-part="@partName" data-field="@fieldName" data-editor-type="ContentPicker" data-selected-items="@selectedItems" data-edit-url="@editUrl" data-search-url="@searchUrl" data-multiple="@multiple">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why data-edit not data-view or data-display?

Also, you'll need to add a permission check to check if the user can view contentitem before displaying a button that could return 401.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wasn't sure about the naming of that, but since its calling the Edit endpoint I went that way. I would be fine with data-view-url if that fits better

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the permission I would need some guidance on how to do this the proper way, because I cant wrap the button with something like

@if (await AuthorizationService.AuthorizeAsync(User, CommonPermissions.EditContent, contentItem)
 {
       <button v-on:click="edit(item)" type="button" class="btn btn-success content-picker-default__list-item__edit"><i class="fa-solid fa-eye fa-sm" aria-hidden="true"></i></button>
}

Because vue is adding the element to the DOM. Any suggestions how to accomplish the check there?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update the VueMultiselectItemViewModel by adding a property called IsViewable and do the permission check in the ContentPickerFieldDisplayDriver driver then you would populate the URL if the IsViewable is true. Also, you would have to do similar check when the user selects a new item using the UI.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added checks for both possibilities, button doesn't show up now if the user can't Edit the type

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be can't View the item.


<ul class="mb-1 list-group w-lg-75 w-xxl-50 content-picker-default__list" v-show="arrayOfItems.length" v-cloak>
<draggable v-model="arrayOfItems">
<li v-for="(item, i) in arrayOfItems"
class="cursor-move list-group-item content-picker-default__list-item d-flex align-items-start justify-content-between"
:key="item.id">
<div class="align-items-center align-self-center"><span>{{ item.displayText }}</span> <span v-show="!item.hasPublished" class="text-muted small">(@T["Not published"])</span></div>

<div class="btn-group btn-group-sm align-items-center" role="group">
<button v-on:click="edit(item)" type="button" class="btn btn-secondary content-picker-default__list-item__edit"><i class="fa-solid fa-eye fa-sm" aria-hidden="true"></i></button>
dannyd89 marked this conversation as resolved.
Show resolved Hide resolved
<button v-on:click="remove(item)" type="button" class="btn btn-secondary content-picker-default__list-item__delete"><i class="fa-solid fa-trash fa-sm" aria-hidden="true"></i></button>
dannyd89 marked this conversation as resolved.
Show resolved Hide resolved
</div>
</li>
Expand Down
5 changes: 5 additions & 0 deletions src/OrchardCore.Modules/OrchardCore.ContentFields/wwwroot/Scripts/vue-multiselect-wrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ function initVueMultiselect(element) {
if (element) {
var elementId = element.id;
var selectedItems = JSON.parse(element.dataset.selectedItems || "[]");
var editUrl = element.dataset.editUrl;
var searchUrl = element.dataset.searchUrl;
var multiple = JSON.parse(element.dataset.multiple);
var debouncedSearch = debounce(function (vm, query) {
Expand Down Expand Up @@ -107,6 +108,10 @@ function initVueMultiselect(element) {
// a single content item and we've just selected that one item.
this.searchBoxContainer.css("display", multiple ? "block" : "none");
},
edit: function edit(item) {
url = editUrl.replace('contentItemId', item.id);
window.open(url, '_blank').focus();
},
remove: function remove(item) {
this.arrayOfItems.splice(this.arrayOfItems.indexOf(item), 1);

Expand Down
2 changes: 1 addition & 1 deletion ...hardCore.Modules/OrchardCore.ContentFields/wwwroot/Scripts/vue-multiselect-wrapper.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.