グループ検索画面実装

public/css/chat.css

@@ -759,3 +759,7 @@ a.article:hover {
   color: white;
   text-align: center;
 }
+
+.border-bottom-gray {
+  border-bottom: 1px solid #c4c4c4;
+}

public/index.html

@@ -221,7 +221,7 @@
     </div>
 
     <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
-      <div class="inbox_people">
+      <div class="inbox_people" >
         <div class="heading_srch">
           <div class="srch_bar">
             <div class="stylish-input-group">
@@ -232,14 +232,48 @@
             </div>
           </div>
         </div>
-        <div id="my_info" class="inbox_user row">
+        <div class="text-center border-bottom-gray">
+          <button type="button" class="btn btn-primary chat-list-type-btn" id="myGroupBtn"></button>
+          <button type="button" class="btn btn-primary chat-list-type-btn" id="allGroupBtn"></button>
         </div>
-
-        <label class="contact-seperator" id="favorite-seperator">Favorite</label>
-        <div id="favorite_list" class="inbox_user row">
+        <div id="myGroupArea">
+          <div id="my_info" class="inbox_user row">
+          </div>
+          <label class="contact-seperator" id="favorite-seperator">Favorite</label>
+          <div id="favorite_list" class="inbox_user row">
+          </div>
+          <label class="contact-seperator" id="mygroup-seperator">MY GROUP</label>
+          <div id="my_group_list" class="inbox_user row">
+          </div>
         </div>
-        <label class="contact-seperator" id="mygroup-seperator">MY GROUP</label>
-        <div id="my_group_list" class="inbox_user row">
+
+        <div id="allGroupArea">
+          <label class="contact-seperator" >GROUP PATH</label>
+          <div id="groupPathArea" style="float:left;">
+          </div>
+          <label class="contact-seperator" >MOVE BUTTON</label>
+          <div id="groupBtnArea">
+            <div class="user_list col-12" onclick="console.log('A');">
+              <div class="user_people">
+                <div class="user_ib">
+                  <h5>MOVE TO ROOT GROUP</h5>
+                </div>
+              </div>
+            </div>
+            <div class="user_list col-12" onclick="console.log('B');">
+              <div class="user_people">
+                <div class="user_ib">
+                  <h5>MOVE TO PARENTS GROUP</h5>
+                </div>
+              </div>
+            </div>
+          </div>
+          <label class="contact-seperator" id="childGroupSeperator">CHILD GROUP</label>
+          <div id="childGroupList" class="inbox_user row">
+          </div>
+          <label class="contact-seperator" id="groupUserSeperator">USERS IN GROUP</label>
+          <div id="userInGroupList" class="inbox_user row">
+          </div>
         </div>
 
 
@@ -452,7 +486,7 @@
   </div>
 </script>
 <script id="group-template" type="text/template">
-  <div class="group_list col-12" data-name="{{name}}">
+  <div class="group_list col-12" data-name="{{name}}" data-id="{{id}}">
     <div class="group_people">
       <div class="group_img">
         <img src="./images/group-image.png" alt="">
@@ -486,6 +520,9 @@
     </div>
   </div>
 </script>
+<script id="group-navigater-template" type="text/template">
+  <label data-name="{{name}}" data-id="{{id}}">{{name}}</label>
+</script>
 <script id="favorite-user-template" type="text/template">
   <div class="user_list col-12" data-name="{{name}}">
     <div class="user_people">

public/js/chat-db.js

@@ -56,4 +56,13 @@ CHAT_DB.getMyGroupUsers = function() {
         //String形式をJsonに変更してReturn
     	return JSON.parse(android.getMyGroupUsers());
     }
+};
+
+CHAT_DB.getGroupInfo = function(groupId) {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+    	return JSON.parse(android.getGroupInfo(groupId));
+    }
 };
\ No newline at end of file

public/js/chat-ui.js

@@ -479,6 +479,8 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
             $('#homeButton').show();
             $("#backButton").hide();
             $('.titleRoomName').show();
+            $('#myGroupArea').show();
+            $('#allGroupArea').hide();
             $('#my_info').show();
             $('#bottomNav').show();
             break;
@@ -869,6 +871,11 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
     $("#dmBtn").text(getLocalizedString("directMessageChatRoom"))
     $("#groupBtn").text(getLocalizedString("groupChatRoom"))
 
+    $("#myGroupBtn").text(getLocalizedString("myGroup"))
+    $("#allGroupBtn").text(getLocalizedString("allGroup"))
+
+
+
     $("#favorite-seperator").text(getLocalizedString("favorite"))
     $("#mygroup-seperator").text(getLocalizedString("mygroup"))
 }
@@ -923,7 +930,7 @@ CHAT_UI.refreshContactScreen = function() {
     const myNamecardTemplate = $('#my-namecard-template').html();
 
     if (IS_ONLINE == 'true') {
-        android.updateGroupInfo();
+        android.updateGroupInfo('0');
         android.updateMyInfo();
         android.updateGroupUser();
     }
@@ -1209,3 +1216,76 @@ CHAT_UI.showUserNamecard = function(shopMemberId) {
 //        keyboard: false
 //    })
 }
+
+$('#myGroupBtn').on('click', function (e){
+
+    $('#myGroupArea').show();
+    $('#allGroupArea').hide();
+});
+
+$('#allGroupBtn').on('click', function (e){
+    CHAT_UI.refesshAllGroupSearch('0')
+});
+
+CHAT_UI.refesshAllGroupSearch = function(groupId) {
+
+    if (IS_ONLINE == 'true') {
+        android.updateGroupInfo(groupId);
+    }
+
+
+    var result = CHAT_DB.getGroupInfo(groupId);
+
+    $('#childGroupList').html('');
+    $('#userInGroupList').html('');
+    $('#groupPathArea').html('');
+
+    const groupNaviTemplate = $('#group-navigater-template').html();
+    result.groupPathList.forEach(function(groupPath) {
+        let html = Mustache.render(groupNaviTemplate, {
+                        name: groupPath.groupName,
+                        id: groupPath.groupId
+                    });
+        let obj = $(jQuery.parseHTML(html)).on('click', function(){
+                        CHAT_UI.refesshAllGroupSearch(groupPath.groupId);
+                    });
+                    $('#groupPathArea').append(obj);
+    })
+
+    const groupTemplate = $('#group-template').html();
+    result.childGroupList.forEach(function(childGroup) {
+            let html = Mustache.render(groupTemplate, {
+                name: childGroup.groupName,
+                id: childGroup.groupId
+            });
+
+            let obj = $(jQuery.parseHTML(html)).on('click', function(){
+                CHAT_UI.refesshAllGroupSearch(childGroup.groupId);
+            });
+            $('#childGroupList').append(obj);
+        })
+
+    const userTemplate = $('#user-template').html();
+    result.groupUserList.forEach(function(groupUser) {
+            groupUser.profileImagePath = CHAT.getProfileImgUrl(groupUser.profileUrl)
+            let html = Mustache.render(userTemplate, {
+                id: groupUser.shopMemberId,
+                profileImage: groupUser.profileImagePath,
+                name: groupUser.shopMemberName
+            });
+
+            let obj = $(jQuery.parseHTML(html)).on('click', function(){
+                //TODO need onClick Action
+                if (IS_ONLINE == 'true') {
+                    android.updateUserInfo(groupUser.shopMemberId);
+                }
+
+            });
+
+            $('#userInGroupList').append(obj);
+        })
+
+    $('#myGroupArea').hide();
+    $('#allGroupArea').show();
+}
+

public/js/language_en.js

@@ -58,5 +58,9 @@ $.lang.en = {
     "directMessageChatRoom":"DM",
     "favorite":"Favorite List",
     "mygroup":"My Group",
-    "groupChatRoom":"Group"
+    "groupChatRoom":"Group",
+    "myGroup":"My Group",
+    "allGroup":"All Group",
+    "returnToRootGroup":"Return to Root Group",
+    "returnToParentGroup":"Return to Parent Group"
 }

public/js/language_ja.js

@@ -58,5 +58,9 @@ $.lang.ja = {
     "directMessageChatRoom":"DM",
     "favorite":"お気に入りリスト",
     "mygroup":"マイグループ",
-    "groupChatRoom":"グループ"
+    "groupChatRoom":"グループ",
+    "myGroup":"マイグループ",
+    "allGroup":"全グループ",
+    "returnToRootGroup":"トップグループに戻る",
+    "returnToParentGroup":"上位グループに戻る"
 }

public/js/language_ko.js

@@ -58,5 +58,9 @@ $.lang.ko = {
     "directMessageChatRoom":"DM",
     "favorite":"즐겨찾기리스트",
     "mygroup":"마이그룹",
-    "groupChatRoom":"그룹"
+    "groupChatRoom":"그룹",
+    "myGroup":"내그룹",
+    "allGroup":"전그룹",
+    "returnToRootGroup":"최상위그룹으로 돌아가기",
+    "returnToParentGroup":"상위그룹으로 돌아가기"
 }