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

Add tooltip to select option

pull/21733/head
liangshiwei 2 years ago
parent
3b733e6805
commit
7b34f2cc4f
4 changed files with 111 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/CreateModal.cshtml
  2. 27
      modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/UpdateModal.cshtml
  3. 46
      modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/createModal.js
  4. 47
      modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/updateModal.js

12
modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/CreateModal.cshtml
View File

@ -62,16 +62,8 @@
<abp-input asp-for="ViewModel.DisplayName"/>
<div class="mb-3">
<label class="form-label" for="requiredPermissionName">@L["RequiredPermissionName"].Value</label>
<select id="requiredPermissionName" asp-for="ViewModel.RequiredPermissionName"
class="auto-complete-select"
data-autocomplete-api-url="/api/cms-kit-admin/menu-items/lookup/permissions"
data-autocomplete-display-property="displayName"
data-autocomplete-value-property="name"
data-autocomplete-items-property="items"
data-autocomplete-filter-param-name="filter"
data-autocomplete-allow-clear="true"
data-autocomplete-parent-selector="#menu-create-modal">
</select>
<select asp-for="ViewModel.RequiredPermissionName" id="requiredPermissionName" class="form-control"></select>
<div id="tooltip_container"></div>
</div>
<abp-input asp-for="ViewModel.IsActive"/>
<abp-input asp-for="ViewModel.Icon"/>

27
modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/UpdateModal.cshtml
View File

@ -66,22 +66,27 @@
<abp-input asp-for="ViewModel.DisplayName"/>
<div class="mb-3">
<label class="form-label" for="requiredPermissionName">@L["RequiredPermissionName"].Value</label>
<select id="requiredPermissionName" asp-for="ViewModel.RequiredPermissionName"
class="auto-complete-select"
data-autocomplete-api-url="/api/cms-kit-admin/menu-items/lookup/permissions"
data-autocomplete-display-property="displayName"
data-autocomplete-value-property="name"
data-autocomplete-items-property="items"
data-autocomplete-filter-param-name="filter"
data-autocomplete-allow-clear="true"
data-autocomplete-parent-selector="#menu-update-modal">
<select asp-for="ViewModel.RequiredPermissionName" id="requiredPermissionName" class="form-control">
@if(Model.ViewModel.RequiredPermissionName != null)
{
var selectedPermission = Model.Permissions.FirstOrDefault(p => p.Name == Model.ViewModel.RequiredPermissionName);
<option selected value="@Model.ViewModel.RequiredPermissionName">@(selectedPermission == null ? Model.ViewModel.RequiredPermissionName : selectedPermission.DisplayName)</option>
if (selectedPermission != null)
{
<option
data-bs-toggle="tooltip"
data-bs-container="#tooltip_container"
data-bs-placement="top"
title="@selectedPermission.DisplayName"
selected
value="@Model.ViewModel.RequiredPermissionName">@selectedPermission.Name</option>
}
else
{
<option selected value="@Model.ViewModel.RequiredPermissionName">@Model.ViewModel.RequiredPermissionName</option>
}
}
</select>
<div id="tooltip_container"></div>
</div>
<abp-input asp-for="ViewModel.IsActive"/>
<abp-input asp-for="ViewModel.Icon"/>

46
modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/createModal.js
View File

@ -8,6 +8,7 @@ $(function () {
var $url = $('#ViewModel_Url');
var $displayName = $('#ViewModel_DisplayName');
var $menuItemForm = $('#menu-item-form');
var $selectRequiredPermission = $('#requiredPermissionName');
$pageId.on('change', function (params) {
$url.prop('disabled', $pageId.val());
@ -20,6 +21,51 @@ $(function () {
}
})
function initSelectRequiredPermission(){
function formatDisplayName(item) {
if (!item.id) {
return item.text;
}
var $displayName = $(`<span data-bs-toggle="tooltip" data-bs-container="#tooltip_container" data-bs-placement="top" title="${item.displayName}">${item.id}</span>`);
$displayName.tooltip();
return $displayName;
}
$selectRequiredPermission.select2({
ajax:{
url: '/api/cms-kit-admin/menu-items/lookup/permissions',
delay: 250,
dataType: "json",
data: function (params) {
let query = {};
query["filter"] = params.term;
return query;
},
processResults: function (data) {
let retVal = [];
let items = data["items"];
$('body').tooltip('dispose');
items.forEach(function (item, index) {
retVal.push({
id: item["name"],
text: item["name"],
displayName: item["displayName"]
})
});
return {
results: retVal
};
}
},
templateResult: formatDisplayName,
width: '100%',
dropdownParent: $('#menu-create-modal'),
language: abp.localization.currentCulture.cultureName
});
}
initSelectRequiredPermission();
$menuItemForm.on('submit', function (e) {
$('[href="#url"]').tab('show');
});

47
modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/updateModal.js
View File

@ -8,6 +8,7 @@ $(function () {
var $url = $('#ViewModel_Url');
var $displayName = $('#ViewModel_DisplayName');
var $menuItemForm = $('#menu-item-form');
var $selectRequiredPermission = $('#requiredPermissionName');
$pageId.on('change', function (params) {
$url.prop('disabled', $pageId.val());
@ -21,6 +22,52 @@ $(function () {
$pageId.trigger('change');
function initSelectRequiredPermission(){
function formatDisplayName(item) {
if (!item.id) {
return item.text;
}
var $displayName = $(`<span data-bs-container="#tooltip_container" data-bs-toggle="tooltip" data-bs-placement="top" title="${item.displayName}">${item.id}</span>`);
$displayName.tooltip();
return $displayName;
}
$selectRequiredPermission.select2({
ajax:{
url: '/api/cms-kit-admin/menu-items/lookup/permissions',
delay: 250,
dataType: "json",
data: function (params) {
let query = {};
query["filter"] = params.term;
return query;
},
processResults: function (data) {
let retVal = [];
let items = data["items"];
$('body').tooltip('dispose');
items.forEach(function (item, index) {
retVal.push({
id: item["name"],
text: item["name"],
displayName: item["displayName"]
})
});
return {
results: retVal
};
}
},
templateResult: formatDisplayName,
width: '100%',
dropdownParent: $('#menu-update-modal'),
language: abp.localization.currentCulture.cultureName
});
}
initSelectRequiredPermission();
$('[data-ts-toggle="tooltip"]').tooltip()
$menuItemForm.on('submit', function (e) {
$('[href="#url"]').tab('show');
});

Write Preview
Loading…
Cancel
Save