implement notification select

abvw/common/css/newdash/app.css

@@ -11038,7 +11038,7 @@ ul.card-list > li:not(.selected):not(.not-found):hover{
 }
 
 .select-card-list .arrow-icon {
-    background-image: url("../img/icon_arrow_down.svg");
+    background-image: url("/abvw/common/img/icon_arrow_down.svg");
     background-size: contain;
     background-repeat: no-repeat;
     width: 14px;
@@ -20590,7 +20590,7 @@ button {
     list-style: none;
 }
 .list-menu button .arrow-icon{
-    background-image: url("../img/icon_arrow_right.svg");
+    background-image: url("/abvw/common/img/icon_arrow_right.svg");
     background-size: contain;
     width: 17px;
     height: 17px;

abvw/common/json/lang/lang-en.json

@@ -73,6 +73,7 @@
 "sender":"Sender",
 "content":"Content",
 "operationSelection":"Operation select",
-"selection":"Selection"
+"selection":"Selection",
+"templateSelection":"Template selection"
 
 }
\ No newline at end of file

abvw/common/json/lang/lang-ja.json

@@ -73,5 +73,6 @@
 "sender":"送信者",
 "content":"内容",
 "operationSelection":"作業選択",
-"selection":"選択"
+"selection":"選択",
+"templateSelection":"テンプレート選択"
 }
\ No newline at end of file

abvw/common/json/lang/lang-ko.json

@@ -73,5 +73,6 @@
 "sender":"Sender",
 "content":"Content",
 "operationSelection":"Operation select",
-"selection":"Selection"
+"selection":"Selection",
+"templateSelection":"Template selection"
 }
\ No newline at end of file

abvw/html/notification-content.html

+<!-- select template modal -->
+<div class="modal fade" id="select-template-modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+    <div class="modal-content">
+      <div class="modal-header bg-dark10">
+          <h5 class="modal-title lang" lang="templateSelection"></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="card-list select-card-list" id="notificationSelectList">
+          <li class="accordion" id="accordion1">
+            <div class="card mb-2 selected" id="heading1">
+              <a href="#" class="d-flex text-decoration-none">
+                <div class="pl-5 py-3 h-100 w-100 align-self-center select-label">
+                  タイトルテキスト
+                </div>
+                <div class="flex-shrink-1 mx-3 align-self-center">
+                  <button class="btn btn-link border collapsed" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
+                    <div class="arrow-icon"></div>
+                  </button>
+                </div>
+              </a>
+            </div>
+            <div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion1">
+                <div class="card-body">
+                  テンプレートの内容が入ります。テンプレートの内容が入ります。テンプレートの内容が入ります。テンプレートの内容が入りま
+                  す。テンプレートの内容が入ります。テンプレートの内容が入ります。テンプレートの内容が入ります。テンプレートの内容が入
+                  ります。テンプレートの内容が入ります。テンプレートの内容が入ります。テンプレートの内容が入ります。
+                </div>
+            </div>
+          </li>
+          <li class="accordion" id="accordion2">
+            <div class="card mb-2" id="heading2">
+              <a href="#" class="d-flex text-decoration-none">
+                <div class="pl-5 py-3 h-100 w-100 align-self-center select-label">
+                  タイトルテキスト
+                </div>
+                <div class="flex-shrink-1 mx-3 align-self-center">
+                  <button class="btn btn-link border collapsed" type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="true" aria-controls="collapse2">
+                    <div class="arrow-icon"></div>
+                  </button>
+                </div>
+              </a>
+            </div>
+            <div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordion2">
+                <div class="card-body">
+                  テンプレートの内容が入ります。テンプレートの内容が入ります。テンプレートの内容が入ります。テンプレートの内容が入りま
+                  す。テンプレートの内容が入ります。テンプレートの内容が入ります。テンプレートの内容が入ります。テンプレートの内容が入
+                  ります。テンプレートの内容が入ります。テンプレートの内容が入ります。テンプレートの内容が入ります。
+                </div>
+            </div>
+          </li>
+        </ul>
+
+      </div>
+      <div class="modal-footer">
+          <button type="button" class="btn btn-primary lang" lang="selection"></button>
+          <button type="button" class="btn btn-tertiary lang" lang="dspCancel" data-dismiss="modal"></button>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

abvw/js/notification-content/notification-content.js

+/**
+ * Operation Select js in operation-select.html
+ *
+ * @since 1.0 check web
+ */
+var NotificationSelect = {};
+
+NotificationSelect.nameSelected="";
+NotificationSelect.valueSelected="";
+/**
+ * default operation select data JSON
+ */
+NotificationSelect.defaultNotificationSelectJson = [];
+
+/**
+ * get operation select data from cms
+ * @param {function} callback 
+ */
+NotificationSelect.getNotificationSelectData = function (callback) {
+    let param = {
+        sid: COMMON.getSid(),
+    };
+    const url = CONSTANT.URL.CMS.BASE + ClientData.userInfo_accountPath() + CONSTANT.URL.CMS.API.BASE + 'pushMessageTemplate/';
+    COMMON.cmsAjax(url, param, false, function (json) {
+        if (callback) {
+            callback(json);
+        }
+    }, function() {
+        console.log('NotificationSelect.getNotificationSelectData error');
+        if (callback) {
+            callback(NotificationSelect.defaultNotificationSelectJson);
+        }
+    });
+};
+
+/**
+ * handle click operation setting
+ */
+NotificationSelect.selectOperationClick = function () {
+    $('.select-card-list .card .select-label').on('click', function () {
+        $(this).closest('.select-card-list').find('.card').removeClass('selected');
+        $(this).closest('.card').addClass('selected');
+        NotificationSelect.nameSelected = $(this).text();
+        NotificationSelect.valueSelected = $(this).closest('.accordion').find('.card-body').text();
+    });
+};
+
+/**
+ * init data, action when screen onload
+ */
+NotificationSelect.init = function () {
+    NotificationSelect.getNotificationSelectData(function (data) {
+        NotificationSelect.createNotificationSelectList(data);
+    });
+    NotificationSelect.selectOperationClick();
+};
+
+/**
+ * Implement notification select html
+ * @returns 
+ */
+ NotificationSelect.createNotificationSelectList = function(data) {
+	$("#notificationSelectList").empty();
+	if (typeof data === 'undefined' || data.length < 1) return;
+    let classSelected = "selected";
+	for (let i = 0; i < data.length; i++) {
+		
+        let divName = $("<div class='pl-5 py-3 h-100 w-100 align-self-center select-label'>" + data[i].name + "</div>");
+        let divIcon = $("<div class='flex-shrink-1 mx-3 align-self-center'>"
+                      + "<button class='btn btn-link border collapsed' type='button' data-toggle='collapse' data-target='#collapse" +  i + "' aria-expanded='true' aria-controls='collapse" +  i + "'>"
+                      + "<div class='arrow-icon'></div>"
+                      + "</button></div>");
+
+		let ahrefName =  $("<a href='#' class='d-flex text-decoration-none'></a>");
+        let divParentName =  $("<div class='card mb-2 " + classSelected + "' id='heading" +  i + "'></div>");
+        classSelected = "";
+
+        let divValue =  $("<div id='collapse" +  i + "' class='collapse' aria-labelledby='heading" +  i + "' data-parent='#accordion" +  i + "'></div>");
+        let divBodyValue =  $("<div class='card-body'>" +  data[i].value + "</div>");
+
+		let messageli = $("<li class='accordion' id='accordion" +  i + "'></li>");
+		
+		ahrefName.append(divName);
+		ahrefName.append(divIcon);
+        divParentName.append(ahrefName);
+        divValue.append(divBodyValue);
+		messageli.append(divParentName);
+		messageli.append(divValue);
+		$("#notificationSelectList").append(messageli);
+	}
+}
+

abvw/js/template/template.js

@@ -42,3 +42,11 @@ TEMPLATE.loadOperationSelect = function(elmentId) {
         $("#confirm-modal").modal();
     });
 };
+
+/** Template load notification content*/
+TEMPLATE.loadOperationSelect = function(elmentId) {
+    $(elmentId).load("notification-content.html", function() {
+        NotificationSelect.init();
+        I18N.initi18n();
+    }); 
+}