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 @@
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable overflow-auto" role="document">
<div class="modal-content">
<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">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<ul class="list-menu">
<ul>
<ul class="list-menu" id="categoryListMenu">
<!-- <ul>
<li>
<label>
<input type="radio" name="category" checked>
<span>すべて</span>
<span class="lang" lang="categoryAll"></span>
</label>
</li>
</ul>
......@@ -25,7 +25,7 @@
</button>
<label>
<input type="radio" name="category">
<span>全社</span>
<span class="lang" lang="">全社</span>
</label>
</a>
</div>
......@@ -43,42 +43,6 @@
<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>
<label>
<input type="radio" name="category">
<span>カテゴリー</span>
</label>
</li>
<li class="accordion" id="accordion1-1">
<div id="heading1-1">
<a href="#" class="list-menu-link">
......@@ -119,118 +83,6 @@
</label>
</a>
</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>
</ul>
</div>
......@@ -240,12 +92,12 @@
</li>
</ul>
</div>
</li>
</li> -->
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">選択</button>
<button type="button" class="btn btn-tertiary" data-dismiss="modal">キャンセル</button>
<button type="button" class="btn btn-primary lang" lang="selection" onclick="OL.onClickCategorySelection();"></button>
<button type="button" class="btn btn-tertiary lang" lang="dspCancel" data-dismiss="modal"></button>
</div>
</div>
</div>
......
abweb/common/json/lang/lang-en.json
......@@ -108,6 +108,8 @@
"sortByName":"Name",
"sortByStartDate":"Start 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 @@
"sortByName":"作業名順",
"sortByStartDate":"新しい順",
"sortByEndDate":"古い順",
"sortByLastEdit":"閲覧日順"
"sortByLastEdit":"閲覧日順",
"categorySelection":"カテゴリー選択",
"categoryAll":"すべて"
}
\ No newline at end of file
abweb/common/json/lang/lang-ko.json
......@@ -105,5 +105,7 @@
"sortByName":"Name",
"sortByStartDate":"Start 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 @@
<img src="../common/img/icon_search.svg" type="image" alt="" class="lang" lang="searchIcon" onclick="OL.search();">
</a>
</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();">
</a>
<div class="c-dropdown">
......
abweb/js/operationList/operationList.js
......@@ -33,7 +33,6 @@ OL.init = function () {
TEMPLATE.loadHearder("#includedHeader");
TEMPLATE.loadMainNavsTitle('#includedMainTitle', 'workList', null, null);
TEMPLATE.loadConfirmModal("#includedConfirmModal");
TEMPLATE.loadCategoryModal("#includedCategoryModal");
//get all data of operation list scene
OL.getAllDataWeb(sessionStorage.OL_searchKeyWord, sessionStorage.OL_sortIndex, sessionStorage.OL_searchStartDate, sessionStorage.OL_searchEndDate, sessionStorage.OL_operationGroupMasterId);
......@@ -42,7 +41,10 @@ OL.init = function () {
OL.createOperationList(OL.operationList);
//show category(operationGroupMaster)
OL.createCategory();
$("#includedCategoryModal").load("../common/category-modal.html", function() {
OL.createCategory();
I18N.initi18n();
});
};
/**
......@@ -237,11 +239,9 @@ OL.createCategory = function () {
if (!OL.isOperationGroupMaster) {
return;
}
OL.initCategory();
OL.createBreadcrumbList();
OL.createCategoryList();
OL.acdMenu();
};
/**
......@@ -251,22 +251,7 @@ OL.initCategory = function () {
if (!OL.isOperationGroupMaster) {
return;
}
$('#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 () {
$('#groupMasterPath').empty();
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 {
let treeList = [];
OL.createBreadcrumbTree(treeList, OL.operationGroupMasterId);
treeList.forEach(function (operationGroupMaster) {
$('#groupMasterPath').append(
'<li class="breadcrumb-item"><a onclick="OL.changeOperationGroupMaster(' +
operationGroupMaster.operationGroupMasterId +
');" class="text-decoration-none text-dark">' +
operationGroupMaster.operationGroupMasterName +
'</a></li>',
);
if (operationGroupMaster.operationGroupMasterId != OL.operationGroupMasterId) {
$('#groupMasterPath').append(
'<li class="breadcrumb-item"><a onclick="OL.changeOperationGroupMaster(' +
operationGroupMaster.operationGroupMasterId +
');" class="text-decoration-none text-underline">' +
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 () {
if (!OL.isOperationGroupMaster) {
return;
}
//Create a side menu category structure
$('.group-category-list').remove();
var categoryListElement = $('#categoryListMenu');
categoryListElement.empty();
OL.operationGroupMaster.sort(function (a, b) {
if (a.operationGroupMasterLevel < b.operationGroupMasterLevel) return -1;
if (a.operationGroupMasterLevel > b.operationGroupMasterLevel) return 1;
return 1;
});
//common
const noCategory = $("<dl id='groupMasterId_0' class='group-category-list'><dt><a onclick='OL.changeOperationGroupMaster(0);'>" + COMMON.getMsg('all') + '</a></dt></dl>');
$('#category-menu').append(noCategory);
let allChecked = '';
if (typeof OL.operationGroupMasterId === 'undefined' || OL.operationGroupMasterId == 0) {
allChecked = ' checked';
}
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
for (let i = 0; i < OL.operationGroupMaster.length; i++) {
if (OL.operationGroupMaster[i].operationGroupMasterLevel == 0) {
const categoryParent = $(
'<dl id=groupMasterId_' +
OL.operationGroupMaster[i].operationGroupMasterId +
" class='group-category-list' style='overflow-x:auto;'><dt class='menu-ttl'><a onclick='OL.changeOperationGroupMaster(" +
OL.operationGroupMaster[i].operationGroupMasterId +
");'>" +
OL.operationGroupMaster[i].operationGroupMasterName +
'</a></dt></dl>',
);
$('#category-menu').append(categoryParent);
const item = OL.operationGroupMaster[i];
console.log(item);
let inputLabel = $('<label>');
let inputRadio = $('<input type="radio" name="category">');
inputRadio.val(item.operationGroupMasterId);
if (OL.operationGroupMasterId && OL.operationGroupMasterId == item.operationGroupMasterId) {
inputRadio.prop('checked', true);
}
let groupSpan = $('<span>' + item.operationGroupMasterName + '</span>');
inputLabel.append(inputRadio);
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 {
if ($('#groupMasterId_' + OL.operationGroupMaster[i].parentOperationGroupMasterId + '>ul').length > 0) {
const categoryChild = $(
"<li 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>',
);
$('#groupMasterId_' + OL.operationGroupMaster[i].parentOperationGroupMasterId + ' >ul').append(categoryChild);
let li = $('<li>');
li.append(inputLabel);
let parentElm = $('#collapse' + item.parentOperationGroupMasterId + ' > ul');
if (typeof parentElm === 'undefined' || !parentElm || parentElm.length < 1) {
const accordionParentId = 'accordion' + item.parentOperationGroupMasterId;
const headingParentId = 'heading' + item.parentOperationGroupMasterId;
const collapseParentId = 'collapse' + item.parentOperationGroupMasterId;
parentElm = $('<div id="' + collapseParentId + '" class="collapse">');
parentElm.attr('data-parent', '#' + accordionParentId);
parentElm.attr('aria-labelledby', headingParentId);
let ul = $('<ul>');
ul.append(li);
parentElm.append(ul);
$('#' + accordionParentId).append(parentElm);
} else {
const groupParents = '#groupMasterId_' + OL.operationGroupMaster[i].parentOperationGroupMasterId;
$(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);
parentElm.append(li);
}
}
}
};
/**
* Open/close category(operationGroupMaster) drawer menu
* Handle onclick category selection button
*/
OL.acdMenu = function () {
//Hide accordion contents by default
$('.drawer-menu dd').css('display', 'none');
$('.drawer-menu2 ul').css('display', 'none');
//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');
});
OL.onClickCategorySelection = function() {
const operationGroupMasterId = $('input[name="category"]:checked').val();
$('#category-modal .close').click();
OL.changeOperationGroupMaster(operationGroupMasterId);
};
/**
......@@ -513,12 +500,6 @@ OL.changeOperationGroupMaster = function (operationGroupMasterId) {
* open the category(OperationGroupMaster)
*/
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