update filiter

Views/Home/KolList.cshtml

@@ -10,6 +10,7 @@
     <script src="~/assets/vendor/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
     <script src="~/assets/javascript/pages/dataTables.bootstrap.js"></script>
     <script src="~/assets/javascript/custom/kollist.js" asp-append-version="true"></script>
+  
 }
 <!-- .page-inner -->
 <div class="page-inner">
@@ -27,9 +28,61 @@
         <h1 class="page-title"> KOL清單 </h1>
         <p class="text-muted">  </p><!-- /title -->
     </header><!-- /.page-title-bar -->
-    <!-- .page-section -->
+
+
     <div class="page-section">
-        <button type="button" id="kolNewModal" class="btn btn-primary btn-floated position-absolute" title="Add new client"><i class="fa fa-plus"></i></button>
+        <div class="row">
+            <div class="col-lg-12">
+                <!-- #accordion2 -->
+                <div id="accordion1" class="card-expansion">
+                    <!-- .card -->
+                    <div class="card card-expansion-item expanded">
+                        <div class="card-header border-0" id="headingOne1">
+                            <button id="adv-search-btn" class="btn btn-reset d-flex justify-content-between w-100" data-toggle="collapse" data-target="#collapseOne1" aria-expanded="false" aria-controls="collapseOne1"><span>進階搜尋</span> <span class="collapse-indicator"><i class="fa fa-fw fa-chevron-down"></i></span></button>
+                        </div>
+                        <div>
+                            <div id="collapseOne1" class="collapse" aria-labelledby="headingOne1" data-parent="#accordion1">
+                                <div class="card-body pt-0">
+                                    <div class="col-md-12" id="kolMedia2_div">
+                                        <div class="form-group">
+                                        </div>
+                                    </div>
+                                    <div class="col-md-12" id="kolMakeup2_div">
+                                        <div class="form-group">
+                                        </div>
+                                    </div>
+                                    <div class="col-md-12" id="kolStyle2_div">
+                                        <div class="form-group">
+                                        </div>
+                                    </div>
+                                    <div class="col-md-12" id="kolFansType2_div">
+                                        <div class="form-group">
+
+                                        </div>
+                                    </div>
+                                    <div class="col-md-12">
+                                        <div class="form-group">
+                                            <label for="kol_tags2">合作過產品類型</label> <select type="text" id="kol_tags2" class="form-control"></select>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+        <!-- .page-section -->
+    <div class="page-section">
+        <button type="button" id="kolNewModal" class="btn btn-primary btn-floated" title="Add new client"><i class="fa fa-plus"></i></button>
+        
+
+        
+        
+
         <!-- .card -->
         <div class="card card-fluid">
             <!-- .card-body -->

Views/Home/ProjectList.cshtml

@@ -28,9 +28,10 @@
         <h1 class="page-title"> 專案清單 </h1>
         <p class="text-muted">  </p><!-- /title -->
     </header><!-- /.page-title-bar -->
+    
     <!-- .page-section -->
     <div class="page-section">
-        <button type="button" id="projectNewModal" class="btn btn-primary btn-floated position-absolute" title="Add new client"><i class="fa fa-plus"></i></button>
+        <button type="button" id="projectNewModal" class="btn btn-primary btn-floated" title="Add new client"><i class="fa fa-plus"></i></button>
         <!-- .card -->
         <div class="card card-fluid">
             <!-- .card-body -->

wwwroot/assets/javascript/custom/kollist.js

@@ -14,6 +14,7 @@ var kolProjectPos;
 $(document).ready(function () {
     delMedia = '';
     loadTagsInput();
+    loadTagsInput2();
     loadMedia();
     loadKolMakeupCheckboxItem();
     loadKolStyleCheckboxItem();
@@ -1088,6 +1089,85 @@ $(document).ready(function () {
                         $('#kol_tags').find('[value="' + tag.text + '"]').replaceWith('<option selected value="' + obj.id + '">' + obj.text + '</option>');
 
                         
+                    } else {
+                        alert(data.message);
+
+                        if (data.err_code == "99999") {
+                            location.href = "/Root/Login";
+                        }
+                    }
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    alert('網路或伺服器發生錯誤，請稍後重試!');
+                }
+            });
+        });
+    }
+
+    function loadTagsInput2() {
+        $('#kol_tags2').select2({
+            width: '100%',
+            tags: true,
+            tokenSeparators: [',', ' '],
+            multiple: true,
+            minimumInputLength: 0,
+            placeholder: '輸入Tag用空白或逗號分隔關鍵字',
+            ajax: {
+                url: '/Api/queryTags',
+                dataType: 'json',
+                delay: 500,
+                type: 'post',
+                // 要送出的資料
+                data: function (params) {
+                    // 在伺服器會得到一個 POST 'search' 
+                    return {
+                        search: params.term
+                    };
+                },
+                processResults: function (data, params) {
+                    console.log(data.data)
+
+                    // 一定要返回 results 物件
+                    return {
+                        results: data.data,
+
+                    }
+                }
+            },
+            createTag: function (params) {
+                return null;
+                let term = $.trim(params.term);
+                if (term.length < 2) {
+                    return null
+                }
+
+                return {
+                    id: term,
+                    text: term,
+                    // add indicator:
+                    isNew: true
+                };
+
+
+            }
+        });
+
+        $('#kol_tags2').on('select2:select', function (e) {
+            let tag = e.params.data;
+            var formData = {
+                search: tag.text
+            }
+
+            $.ajax({
+                url: "/Api/updateTags",
+                type: "post",
+                data: formData,
+                success: function (data, textStatus, jqXHR) {
+                    var obj = data.data;
+                    if (data.ret == "yes") {
+                        $('#kol_tags').find('[value="' + tag.text + '"]').replaceWith('<option selected value="' + obj.id + '">' + obj.text + '</option>');
+
+
                     } else {
                         alert(data.message);
 
@@ -1640,7 +1720,7 @@ function loadMedia() {
         success: function (data, textStatus, jqXHR) {
             if (data.ret == "yes") {
                 var obj = data.optionItems;
- 
+                var items2 = "";
                 $.each(obj, function (i, item) {
                     $("#media_select").append($("<option>", {
                         value: item.optionItem_uid,
@@ -1652,10 +1732,14 @@ function loadMedia() {
                         text: item.optionItem_name
                     }));
 
+                    items2 += optionItemHtml2(item);
+
                     loadkolMediaSpec();
                 });
 
-                
+                items2 = "<label class=\"d-block\">平台</label>" + items2;
+
+                $('#kolMedia2_div').children().first().html(items2);
             } else {
                 alert(data.message);
 
@@ -1684,7 +1768,7 @@ function loadMedia() {
         success: function (data, textStatus, jqXHR) {
             if (data.ret == "yes") {
                 var obj = data.mediaSpecList;
-
+                
                 $('#kolProjectSpec_select option').remove();
                 $.each(obj, function (i, item) {
                     $("#kolProjectSpec_select").append($("<option>", {
@@ -1695,7 +1779,7 @@ function loadMedia() {
                     
                 });
 
-
+                
             } else {
                 alert(data.message);
 
@@ -1722,14 +1806,18 @@ function loadKolFansTypeCheckboxItem() {
             if (data.ret == "yes") {
                 var obj = data.optionItems;
                 var items = "";
+                var items2 = "";
                 $.each(obj, function (index, item) {
                     items += optionItemHtml(item);
+                    items2 += optionItemHtml2(item);
                 });
 
                 items = "<label class=\"d-block\">粉絲輪廓</label>" + items;
+                items2 = "<label class=\"d-block\">粉絲輪廓</label>" + items2;
 
 
                 $('#kolFansType_div').children().first().html(items);
+                $('#kolFansType2_div').children().first().html(items2);
 
             } else {
                 alert(data.message);
@@ -1758,14 +1846,17 @@ function loadKolStyleCheckboxItem() {
             if (data.ret == "yes") {
                 var obj = data.optionItems;
                 var items = "";
+                var items2 = "";
                 $.each(obj, function (index, item) {
                     items += optionItemHtml(item);
+                    items2 += optionItemHtml2(item);
                 });
 
                 items = "<label class=\"d-block\">KOL 類型</label>" + items;
-
+                items2 = "<label class=\"d-block\">KOL 類型</label>" + items2;
 
                 $('#kolStyle_div').children().html(items);
+                $('#kolStyle2_div').children().html(items2);
 
             } else {
                 alert(data.message);
@@ -1794,14 +1885,18 @@ function loadKolMakeupCheckboxItem() {
             if (data.ret == "yes") {
                 var obj = data.optionItems;
                 var items = "";
+                var items2 = "";
                 $.each(obj, function (index, item) {
                     items += optionItemHtml(item);
+                    items2 += optionItemHtml2(item);
                 });
 
                 items = "<label class=\"d-block\">成員</label>" + items;
+                items2 = "<label class=\"d-block\">成員組成</label>" + items2;
 
 
                 $('#kolMakeup_div').children().html(items);
+                $('#kolMakeup2_div').children().html(items2);
 
             } else {
                 alert(data.message);
@@ -1827,6 +1922,16 @@ function optionItemHtml(item) {
     return html;
 }
 
+function optionItemHtml2(item) {
+    var html = "";
+
+    html += "<div class=\"custom-control custom-control-inline custom-checkbox\">";
+    html += "   <input type=\"checkbox\" class=\"custom-control-input\" name=\"" + item.option_uid + "2[]\" value=\"" + item.optionItem_uid + "\" id=\"" + item.optionItem_uid + "_2\"> <label class=\"custom-control-label\" for=\"" + item.optionItem_uid + "_2\">" + item.optionItem_name + "</label>";
+    html += "</div>";
+
+    return html;
+}
+
 function loadyearmonth() {
     var actualDate = new Date(); // convert to actual date