Skip to content

C
check
Commit 4795158b by NGUYEN HOANG SON
Options

implement operation group master selection

parent 2ed8d07a
Showing with 98 additions and 256 deletions
abweb/common/category-modal.html
...@@ -2,18 +2,18 @@ ...@@ -2,18 +2,18 @@
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable overflow-auto" role="document"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable overflow-auto" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header bg-dark10"> <div class="modal-header bg-dark10">
<h5 class="modal-title">カテゴリー選択</h5> <h5 class="modal-title lang" lang="categorySelection"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<ul class="list-menu"> <ul class="list-menu" id="categoryListMenu">
<ul> <!-- <ul>
<li> <li>
<label> <label>
<input type="radio" name="category" checked> <input type="radio" name="category" checked>
<span>すべて</span> <span class="lang" lang="categoryAll"></span>
</label> </label>
</li> </li>
</ul> </ul>
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</button> </button>
<label> <label>
<input type="radio" name="category"> <input type="radio" name="category">
<span>全社</span> <span class="lang" lang="">全社</span>
</label> </label>
</a> </a>
</div> </div>
...@@ -43,42 +43,6 @@ ...@@ -43,42 +43,6 @@
<span>カテゴリー</span> <span>カテゴリー</span>
</label> </label>
</li> </li>
<li>
<label>
<input type="radio" name="category">
<span>カテゴリー</span>
</label>
</li>
<li>
<label>
<input type="radio" name="category">
<span>カテゴリー</span>
</label>
</li>
<li>
<label>
<input type="radio" name="category">
<span>カテゴリー</span>
</label>
</li>
<li>
<label>
<input type="radio" name="category">
<span>カテゴリー</span>
</label>
</li>
<li>
<label>
<input type="radio" name="category">
<span>カテゴリー</span>
</label>
</li>
<li>
<label>
<input type="radio" name="category">
<span>カテゴリー</span>
</label>
</li>
<li class="accordion" id="accordion1-1"> <li class="accordion" id="accordion1-1">
<div id="heading1-1"> <div id="heading1-1">
<a href="#" class="list-menu-link"> <a href="#" class="list-menu-link">
...@@ -119,118 +83,6 @@ ...@@ -119,118 +83,6 @@
</label> </label>
</a> </a>
</div> </div>
<div id="collapse1-3" class="collapse" aria-labelledby="heading1-3" data-parent="#accordion1-3">
<ul>
<li class="accordion" id="accordion1-4">
<div id="heading1-4">
<a href="#" class="list-menu-link">
<button type="button" class="collapsed" data-toggle="collapse" data-target="#collapse1-4" aria-expanded="true" aria-controls="collapse1-4">
<div class="arrow-icon"></div>
</button>
<label>
<input type="radio" name="category">
<span>カテゴリー</span>
</label>
</a>
</div>
<div id="collapse1-4" class="collapse" aria-labelledby="heading1-4" data-parent="#accordion1-4">
<ul>
<li class="accordion" id="accordion1-5">
<div id="heading1-5">
<a href="#" class="list-menu-link">
<button type="button" class="collapsed" data-toggle="collapse" data-target="#collapse1-5" aria-expanded="true" aria-controls="collapse1-5">
<div class="arrow-icon"></div>
</button>
<label>
<input type="radio" name="category">
<span>カテゴリー</span>
</label>
</a>
</div>
<div id="collapse1-5" class="collapse" aria-labelledby="heading1-5" data-parent="#accordion1-5">
<ul>
<li class="accordion" id="accordion1-6">
<div id="heading1-6">
<a href="#" class="list-menu-link">
<button type="button" class="collapsed" data-toggle="collapse" data-target="#collapse1-6" aria-expanded="true" aria-controls="collapse1-6">
<div class="arrow-icon"></div>
</button>
<label>
<input type="radio" name="category">
<span>カテゴリー</span>
</label>
</a>
</div>
<div id="collapse1-6" class="collapse" aria-labelledby="heading1-6" data-parent="#accordion1-6">
<ul>
<li class="accordion" id="accordion1-7">
<div id="heading1-7">
<a href="#" class="list-menu-link">
<button type="button" class="collapsed" data-toggle="collapse" data-target="#collapse1-7" aria-expanded="true" aria-controls="collapse1-7">
<div class="arrow-icon"></div>
</button>
<label>
<input type="radio" name="category">
<span>カテゴリー</span>
</label>
</a>
</div>
<div id="collapse1-7" class="collapse" aria-labelledby="heading1-7" data-parent="#accordion1-7">
<ul>
<li class="accordion" id="accordion1-8">
<div id="heading1-8">
<a href="#" class="list-menu-link">
<button type="button" class="collapsed" data-toggle="collapse" data-target="#collapse1-8" aria-expanded="true" aria-controls="collapse1-8">
<div class="arrow-icon"></div>
</button>
<label>
<input type="radio" name="category">
<span>カテゴリー</span>
</label>
</a>
</div>
<div id="collapse1-8" class="collapse" aria-labelledby="heading1-8" data-parent="#accordion1-8">
<ul>
<li class="accordion" id="accordion1-9">
<div id="heading1-9">
<a href="#" class="list-menu-link">
<button type="button" class="collapsed" data-toggle="collapse" data-target="#collapse1-9" aria-expanded="true" aria-controls="collapse1-9">
<div class="arrow-icon"></div>
</button>
<label>
<input type="radio" name="category">
<span>カテゴリー</span>
</label>
</a>
</div>
<div id="collapse1-9" class="collapse" aria-labelledby="heading1-9" data-parent="#accordion1-9">
<ul>
<li>
<label>
<input type="radio" name="category">
<span>カテゴリー</span>
</label>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -240,12 +92,12 @@ ...@@ -240,12 +92,12 @@
</li> </li>
</ul> </ul>
</div> </div>
</li> </li> -->
</ul> </ul>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-primary">選択</button> <button type="button" class="btn btn-primary lang" lang="selection" onclick="OL.onClickCategorySelection();"></button>
<button type="button" class="btn btn-tertiary" data-dismiss="modal">キャンセル</button> <button type="button" class="btn btn-tertiary lang" lang="dspCancel" data-dismiss="modal"></button>
</div> </div>
</div> </div>
</div> </div>
......
abweb/common/json/lang/lang-en.json
...@@ -108,6 +108,8 @@ ...@@ -108,6 +108,8 @@
"sortByName":"Name", "sortByName":"Name",
"sortByStartDate":"Start Date", "sortByStartDate":"Start Date",
"sortByEndDate":"End Date", "sortByEndDate":"End Date",
"sortByLastEdit":"Last Edit" "sortByLastEdit":"Last Edit",
"categorySelection":"Category Selection",
"categoryAll":"All"
} }
\ No newline at end of file
abweb/common/json/lang/lang-ja.json
...@@ -106,5 +106,7 @@ ...@@ -106,5 +106,7 @@
"sortByName":"作業名順", "sortByName":"作業名順",
"sortByStartDate":"新しい順", "sortByStartDate":"新しい順",
"sortByEndDate":"古い順", "sortByEndDate":"古い順",
"sortByLastEdit":"閲覧日順" "sortByLastEdit":"閲覧日順",
"categorySelection":"カテゴリー選択",
"categoryAll":"すべて"
} }
\ No newline at end of file
abweb/common/json/lang/lang-ko.json
...@@ -105,5 +105,7 @@ ...@@ -105,5 +105,7 @@
"sortByName":"Name", "sortByName":"Name",
"sortByStartDate":"Start Date", "sortByStartDate":"Start Date",
"sortByEndDate":"End Date", "sortByEndDate":"End Date",
"sortByLastEdit":"Last Edit" "sortByLastEdit":"Last Edit",
"categorySelection":"Category Selection",
"categoryAll":"All"
} }
\ No newline at end of file
abweb/html/index.html
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
<img src="../common/img/icon_search.svg" type="image" alt="" class="lang" lang="searchIcon" onclick="OL.search();"> <img src="../common/img/icon_search.svg" type="image" alt="" class="lang" lang="searchIcon" onclick="OL.search();">
</a> </a>
</div> </div>
<a href="#" class="mx-1" data-toggle="modal" data-target="#category-modal"> <a href="#" class="mx-1 d-none" id="operationGroupMasterButton" data-toggle="modal" data-target="#category-modal">
<img class="serarch-icon lang" lang="category" src="../common/img/icon_folder.svg" type="image" alt="" data-toggle="tooltip" data-placement="bottom" title="" onclick="OL.openCategory();"> <img class="serarch-icon lang" lang="category" src="../common/img/icon_folder.svg" type="image" alt="" data-toggle="tooltip" data-placement="bottom" title="" onclick="OL.openCategory();">
</a> </a>
<div class="c-dropdown"> <div class="c-dropdown">
......
abweb/js/operationList/operationList.js
...@@ -33,7 +33,6 @@ OL.init = function () { ...@@ -33,7 +33,6 @@ OL.init = function () {
TEMPLATE.loadHearder("#includedHeader"); TEMPLATE.loadHearder("#includedHeader");
TEMPLATE.loadMainNavsTitle('#includedMainTitle', 'workList', null, null); TEMPLATE.loadMainNavsTitle('#includedMainTitle', 'workList', null, null);
TEMPLATE.loadConfirmModal("#includedConfirmModal"); TEMPLATE.loadConfirmModal("#includedConfirmModal");
TEMPLATE.loadCategoryModal("#includedCategoryModal");
//get all data of operation list scene //get all data of operation list scene
OL.getAllDataWeb(sessionStorage.OL_searchKeyWord, sessionStorage.OL_sortIndex, sessionStorage.OL_searchStartDate, sessionStorage.OL_searchEndDate, sessionStorage.OL_operationGroupMasterId); OL.getAllDataWeb(sessionStorage.OL_searchKeyWord, sessionStorage.OL_sortIndex, sessionStorage.OL_searchStartDate, sessionStorage.OL_searchEndDate, sessionStorage.OL_operationGroupMasterId);
...@@ -42,7 +41,10 @@ OL.init = function () { ...@@ -42,7 +41,10 @@ OL.init = function () {
OL.createOperationList(OL.operationList); OL.createOperationList(OL.operationList);
//show category(operationGroupMaster) //show category(operationGroupMaster)
OL.createCategory(); $("#includedCategoryModal").load("../common/category-modal.html", function() {
OL.createCategory();
I18N.initi18n();
});
}; };
/** /**
...@@ -237,11 +239,9 @@ OL.createCategory = function () { ...@@ -237,11 +239,9 @@ OL.createCategory = function () {
if (!OL.isOperationGroupMaster) { if (!OL.isOperationGroupMaster) {
return; return;
} }
OL.initCategory(); OL.initCategory();
OL.createBreadcrumbList(); OL.createBreadcrumbList();
OL.createCategoryList(); OL.createCategoryList();
OL.acdMenu();
}; };
/** /**
...@@ -251,22 +251,7 @@ OL.initCategory = function () { ...@@ -251,22 +251,7 @@ OL.initCategory = function () {
if (!OL.isOperationGroupMaster) { if (!OL.isOperationGroupMaster) {
return; return;
} }
$('#operationGroupMasterButton').removeClass('d-none'); $('#operationGroupMasterButton').removeClass('d-none');
OL.setCategoryHeight();
$(window).resize(function () {
OL.setCategoryHeight();
});
};
/**
* change height category(operationGroupMaster)
*/
OL.setCategoryHeight = function () {
const CATEGORY_HEIGHT = $('footer').offset().top - $('#category-menu').offset().top;
$('#category-menu').css('overflow', 'scroll');
$('#category-menu').height(CATEGORY_HEIGHT);
$('#overlayDiv').height(CATEGORY_HEIGHT);
}; };
/** /**
...@@ -279,18 +264,26 @@ OL.createBreadcrumbList = function () { ...@@ -279,18 +264,26 @@ OL.createBreadcrumbList = function () {
$('#groupMasterPath').empty(); $('#groupMasterPath').empty();
if (typeof OL.operationGroupMasterId === 'undefined' || OL.operationGroupMasterId == 0) { if (typeof OL.operationGroupMasterId === 'undefined' || OL.operationGroupMasterId == 0) {
$('#groupMasterPath').append('<li class="breadcrumb-item"><a href="#" class="text-decoration-none text-dark">' + COMMON.getMsg('all') + '</a></li>'); $('#groupMasterPath').append('<li class="breadcrumb-item"><a href="#" class="text-decoration-none text-underline">' + I18N.i18nText('categoryAll') + '</a></li>');
} else { } else {
let treeList = []; let treeList = [];
OL.createBreadcrumbTree(treeList, OL.operationGroupMasterId); OL.createBreadcrumbTree(treeList, OL.operationGroupMasterId);
treeList.forEach(function (operationGroupMaster) { treeList.forEach(function (operationGroupMaster) {
$('#groupMasterPath').append( if (operationGroupMaster.operationGroupMasterId != OL.operationGroupMasterId) {
'<li class="breadcrumb-item"><a onclick="OL.changeOperationGroupMaster(' + $('#groupMasterPath').append(
operationGroupMaster.operationGroupMasterId + '<li class="breadcrumb-item"><a onclick="OL.changeOperationGroupMaster(' +
');" class="text-decoration-none text-dark">' + operationGroupMaster.operationGroupMasterId +
operationGroupMaster.operationGroupMasterName + ');" class="text-decoration-none text-underline">' +
'</a></li>', operationGroupMaster.operationGroupMasterName +
); '</a></li>',
);
} else {
$('#groupMasterPath').append(
'<li class="breadcrumb-item active" aria-current="page"><span>' +
operationGroupMaster.operationGroupMasterName +
'</span></li>',
);
}
}); });
} }
}; };
...@@ -320,87 +313,81 @@ OL.createCategoryList = function () { ...@@ -320,87 +313,81 @@ OL.createCategoryList = function () {
if (!OL.isOperationGroupMaster) { if (!OL.isOperationGroupMaster) {
return; return;
} }
//Create a side menu category structure //Create a side menu category structure
$('.group-category-list').remove(); var categoryListElement = $('#categoryListMenu');
categoryListElement.empty();
OL.operationGroupMaster.sort(function (a, b) { OL.operationGroupMaster.sort(function (a, b) {
if (a.operationGroupMasterLevel < b.operationGroupMasterLevel) return -1; if (a.operationGroupMasterLevel < b.operationGroupMasterLevel) return -1;
if (a.operationGroupMasterLevel > b.operationGroupMasterLevel) return 1; if (a.operationGroupMasterLevel > b.operationGroupMasterLevel) return 1;
return 1; return 1;
}); });
//common let allChecked = '';
const noCategory = $("<dl id='groupMasterId_0' class='group-category-list'><dt><a onclick='OL.changeOperationGroupMaster(0);'>" + COMMON.getMsg('all') + '</a></dt></dl>'); if (typeof OL.operationGroupMasterId === 'undefined' || OL.operationGroupMasterId == 0) {
allChecked = ' checked';
$('#category-menu').append(noCategory); }
const allCategory = $('<ul><li><label><input type="radio" name="category" value="0"' +
allChecked +
'><span class="lang" lang="categoryAll">' + I18N.i18nText('categoryAll') + '</span></label></li></ul>');
categoryListElement.append(allCategory);
//create category(operationGroupMaster) structure //create category(operationGroupMaster) structure
for (let i = 0; i < OL.operationGroupMaster.length; i++) { for (let i = 0; i < OL.operationGroupMaster.length; i++) {
if (OL.operationGroupMaster[i].operationGroupMasterLevel == 0) { const item = OL.operationGroupMaster[i];
const categoryParent = $( console.log(item);
'<dl id=groupMasterId_' + let inputLabel = $('<label>');
OL.operationGroupMaster[i].operationGroupMasterId + let inputRadio = $('<input type="radio" name="category">');
" class='group-category-list' style='overflow-x:auto;'><dt class='menu-ttl'><a onclick='OL.changeOperationGroupMaster(" + inputRadio.val(item.operationGroupMasterId);
OL.operationGroupMaster[i].operationGroupMasterId + if (OL.operationGroupMasterId && OL.operationGroupMasterId == item.operationGroupMasterId) {
");'>" + inputRadio.prop('checked', true);
OL.operationGroupMaster[i].operationGroupMasterName + }
'</a></dt></dl>', let groupSpan = $('<span>' + item.operationGroupMasterName + '</span>');
); inputLabel.append(inputRadio);
$('#category-menu').append(categoryParent); inputLabel.append(groupSpan);
if (item.operationGroupMasterLevel == 0) {
const accordionId = 'accordion' + item.operationGroupMasterId;
const headingId = 'heading' + item.operationGroupMasterId;
const collapseId = 'collapse' + item.operationGroupMasterId;
let categoryParentElm = $('<li class="accordion" id="' + accordionId + '" />');
let headingDiv = $('<div id="' + headingId + '" />');
let linkA = $('<a class="list-menu-link" />');
let collapseButton = $('<button type="button" class="collapsed" data-toggle="collapse" aria-expanded="true" />');
collapseButton.attr('data-target', '#' + collapseId);
collapseButton.attr('aria-controls', collapseId);
collapseButton.append('<div class="arrow-icon"></div>');
linkA.append(collapseButton);
linkA.append(inputLabel);
headingDiv.append(linkA);
categoryParentElm.append(headingDiv);
categoryListElement.append(categoryParentElm);
} else { } else {
if ($('#groupMasterId_' + OL.operationGroupMaster[i].parentOperationGroupMasterId + '>ul').length > 0) { let li = $('<li>');
const categoryChild = $( li.append(inputLabel);
"<li id='groupMasterId_" + let parentElm = $('#collapse' + item.parentOperationGroupMasterId + ' > ul');
OL.operationGroupMaster[i].operationGroupMasterId + if (typeof parentElm === 'undefined' || !parentElm || parentElm.length < 1) {
"' class=''><p class='category-li group-level-" + const accordionParentId = 'accordion' + item.parentOperationGroupMasterId;
OL.operationGroupMaster[i].operationGroupMasterLevel + const headingParentId = 'heading' + item.parentOperationGroupMasterId;
"'><a class='category-a' onclick='OL.changeOperationGroupMaster(" + const collapseParentId = 'collapse' + item.parentOperationGroupMasterId;
OL.operationGroupMaster[i].operationGroupMasterId + parentElm = $('<div id="' + collapseParentId + '" class="collapse">');
");'>" + parentElm.attr('data-parent', '#' + accordionParentId);
OL.operationGroupMaster[i].operationGroupMasterName + parentElm.attr('aria-labelledby', headingParentId);
'</a></p></li>', let ul = $('<ul>');
); ul.append(li);
$('#groupMasterId_' + OL.operationGroupMaster[i].parentOperationGroupMasterId + ' >ul').append(categoryChild); parentElm.append(ul);
$('#' + accordionParentId).append(parentElm);
} else { } else {
const groupParents = '#groupMasterId_' + OL.operationGroupMaster[i].parentOperationGroupMasterId; parentElm.append(li);
$(groupParents + ' > p').addClass('sub-menu-ttl');
const categoryChild = $(
"<ul style='display:none;' class=''><li class='' id='groupMasterId_" +
OL.operationGroupMaster[i].operationGroupMasterId +
"' class=''><p class='category-li group-level-" +
OL.operationGroupMaster[i].operationGroupMasterLevel +
"'><a class='category-a' onclick='OL.changeOperationGroupMaster(" +
OL.operationGroupMaster[i].operationGroupMasterId +
");'>" +
OL.operationGroupMaster[i].operationGroupMasterName +
'</a></p></li></ul>',
);
$('#groupMasterId_' + OL.operationGroupMaster[i].parentOperationGroupMasterId).append(categoryChild);
} }
} }
} }
}; };
/** /**
* Open/close category(operationGroupMaster) drawer menu * Handle onclick category selection button
*/ */
OL.acdMenu = function () { OL.onClickCategorySelection = function() {
//Hide accordion contents by default const operationGroupMasterId = $('input[name="category"]:checked').val();
$('.drawer-menu dd').css('display', 'none'); $('#category-modal .close').click();
$('.drawer-menu2 ul').css('display', 'none'); OL.changeOperationGroupMaster(operationGroupMasterId);
//second accordion
$('.drawer-menu dt').on('click', function () {
$('.sub-menu-ttl').removeClass('openAcd').next().slideUp('fast');
$('.drawer-menu dt').not(this).removeClass('open').next().slideUp('fast');
$(this).toggleClass('open').next().slideToggle('fast');
});
//third accordion
$('.sub-menu-ttl').on('click', function () {
$('.sub-menu-ttl').not($(this)).not($(this).parents().siblings('p')).removeClass('openAcd').next().slideUp('fast');
$(this).toggleClass('openAcd').next().slideToggle('fast');
});
}; };
/** /**
...@@ -513,12 +500,6 @@ OL.changeOperationGroupMaster = function (operationGroupMasterId) { ...@@ -513,12 +500,6 @@ OL.changeOperationGroupMaster = function (operationGroupMasterId) {
* open the category(OperationGroupMaster) * open the category(OperationGroupMaster)
*/ */
OL.openCategory = function () { OL.openCategory = function () {
window.scrollTo(0, 0);
if ($('#category-menu').hasClass('open')) {
$('body').css('overflow', 'visible');
} else {
$('body').css('overflow', 'hidden');
}
}; };
/** /**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment