updates new preview

Controllers/ApiController.cs

@@ -59,6 +59,37 @@ namespace Journeys_WantHome.Controllers
             this._httpContextAccessor = httpContextAccessor;
         }
 
+        [Route("projectKolViewList")]
+        public ActionResult ProjectKolViewList(IFormCollection obj) {
+            projectKolViewResult ret = new projectKolViewResult();
+            authToken token = new authToken(this._httpContextAccessor);
+            if (token.user_isLogin == false)
+            {
+                HttpContext.Response.Cookies.Delete("token_key");
+                ret.ret = "no";
+                ret.err_code = "99999";
+                ret.message = "非登入狀態!";
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+            string project_uid = obj["project_uid"].ToString();
+
+            project objProj = conn.QueryFirstOrDefault<project>("select * from project where project_uid = @project_uid", new { project_uid = project_uid});
+
+            if (objProj != null)
+            {
+                ret.ret = "yes";
+                ret.detail = new projectKolView(objProj);
+            }
+            else {
+                ret.ret = "no";
+                ret.err_code = "00001";
+                ret.message = "無此project_uid資料!";
+            
+            }
+            return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+        }
+
         [Route("kolProjectViewList")]
         public ActionResult KolProjectViewList(IFormCollection obj) {
             kolProjectViewResult ret = new kolProjectViewResult();
@@ -1869,6 +1900,13 @@ namespace Journeys_WantHome.Controllers
         
     }
 
+    public class projectKolViewResult
+    {
+        public string ret { get; set; } = "no";
+        public string err_code { get; set; } = "0000";
+        public string message { get; set; } = "";
+        public projectKolView detail { get; set; } = new projectKolView();
+    }
     public class kolProjectViewResult
     {
         public string ret { get; set; } = "no";

Models/projectKolView.cs

@@ -0,0 +1,91 @@
+using Dapper;
+using Dapper.Contrib.Extensions;
+using NPOI.SS.Formula.Functions;
+using System.Data.SqlClient;
+using static DbTableClass;
+using static projectDetail;
+
+public class projectKolView : project
+{
+    DbConn dbConn = new DbConn();
+    SqlConnection conn = new SqlConnection(GlobalClass.appsettings("ConnectionStrings:SQLConnectionString"));
+
+    public List<kolDataQuility> kolList = new List<kolDataQuility>();
+
+    private project _project;
+
+    public projectKolView()
+    {
+        _project = new project();
+    }
+
+    public projectKolView(project projectObj)
+    {
+        Type projectType = projectObj.GetType();
+
+        foreach (var prop in projectType.GetProperties())
+        {
+            string propName = prop.Name;
+            var valueProperty = projectType.GetProperty(propName);
+            object propValue = valueProperty.GetValue(projectObj, null);
+
+            this.GetType().GetProperty(propName).SetValue(this, propValue);
+        }
+
+        _project = projectObj;
+        loadList();
+    }
+
+    public projectKolView(string project_uid)
+    {
+        _project = conn.QueryFirstOrDefault<project>("select * from project where project_uid = @project_uid", new { project_uid = project_uid });
+
+        if (_project != null)
+        {
+            Type dataType = _project.GetType();
+
+            foreach (var prop in dataType.GetProperties())
+            {
+                string propName = prop.Name;
+                var valueProperty = dataType.GetProperty(propName);
+                object propValue = valueProperty.GetValue(_project, null);
+
+                this.GetType().GetProperty(propName).SetValue(this, propValue);
+            }
+
+            loadList();
+        }
+    }
+
+    private void loadList()
+    {
+        kolList = conn.Query<kolDataQuility>("select A.kol_uid, A.kol_name, A.kol_photo, A.kol_descript, B.kolProject_uid, B.kolProject_isExec, B.kolProject_noExecReason, B.kolProject_memo, B.kolProject_modifydate from kol A, kolProject B where A.kol_uid = B.kol_uid and B.project_uid = @project_uid order by B.kolProject_modifydate desc", new { project_uid = _project.project_uid }).ToList();
+
+        foreach (kolDataQuility objItem in kolList) { 
+            List<kolProjectEvaluate> projectQuilitys = conn.Query<kolProjectEvaluate>("select * from kolProjectEvaluate where kolProject_uid = @kolProject_uid ", new { kolProject_uid = objItem.kolProject_uid }).ToList();
+        
+            objItem.kolProjectEvaluates = projectQuilitys;
+        }
+    }
+
+    public class kolDataQuility
+    {
+        public string kol_uid { get; set; } = "";
+
+        public string kol_name { get; set; } = "";
+
+        public string kol_photo { get; set; } = "";
+
+        public string kol_descript { get; set; } = "";
+
+        public string kolProject_uid { get; set; } = "";
+        public string kolProject_isExec { get; set; } = "N";
+        public string kolProject_noExecReason { get; set; } = "";
+        public string kolProject_memo { get; set; } = "";
+
+
+        public DateTime kolProject_modifydate { get; set; } = DateTime.Now;
+
+        public List<kolProjectEvaluate> kolProjectEvaluates = new List<kolProjectEvaluate>();
+    }
+}

Views/Home/KolList.cshtml

@@ -1089,7 +1089,7 @@
                 <!-- .modal-header -->
                 <div class="modal-header">
                     <h6 id="socialModalLabel" class="modal-title inline-editable">
-                        <span class="sr-only">KOL Profile</span> <input id="previewKol_name1" type="text" class="form-control form-control-lg" value="" placeholder="KOL Profile" readonly="readonly " required="">
+                        <span class="sr-only">合作項目</span> <input id="previewKol_name1" type="text" class="form-control form-control-lg" value="" placeholder="合作項目" readonly="readonly " required="">
                     </h6>
                     <button type="button" class="close" data-dismiss="modal">
                         <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

Views/Home/ProjectList.cshtml

@@ -255,7 +255,7 @@
                 <!-- .modal-header -->
                 <div class="modal-header">
                     <h6 id="socialModalLabel" class="modal-title inline-editable">
-                        <span class="sr-only">KOL Profile</span> <input id="previewKol_name1" type="text" class="form-control form-control-lg" value="" placeholder="KOL Profile" readonly="readonly " required="">
+                        <span class="sr-only">合作列表</span> <input id="previewKol_name1" type="text" class="form-control form-control-lg" value="" placeholder="" readonly="readonly" required="">
                     </h6>
                     <button type="button" class="close" data-dismiss="modal">
                         <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
@@ -269,22 +269,17 @@
                         <div class="card-body">
                             <h4 class="card-title"> 合作對象與評價 </h4><!-- .table-responsive -->
                             <div class="table-responsive">
-                                <table class="table table-hover" style="min-width: 678px" id="preview_kol_table">
+                                <table class="table table-hover" style="min-width: 578px" id="preview_kol_table">
                                     <thead>
                                         <tr>
                                             <th> 合作對象 </th>
-                                            <th> 平台 </th>
+                                            
-                                            <th> 規格 </th>
-                                            <th style="text-align: right;"> 報價 </th>
                                             <th> 執行 </th>
                                             <th> 評價 </th>
                                         </tr>
                                     </thead>
                                     <tbody>
                                         <tr>            
-                                            <td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
-                                            <td class="align-middle">  Instagram </td>
-                                            <td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
                                             <td class="align-middle"> 754000 </td>
                                             <td class="align-middle"> 754000 </td>
                                             <td class="align-middle"> 754000 </td>
@@ -305,3 +300,169 @@
         </div><!-- /.modal-dialog -->
     </div>
 </form><!-- /.modal -->
+
+
+                        <!-- .modal -->
+<form id="clientCasePreivewForm" name="clientCasePreviewForm">
+    <div class="modal fade" id="clientCasePreviewModal" tabindex="-1" role="dialog" aria-labelledby="clientCasePreviewModalLabel" data-backdrop="static" aria-hidden="true">
+        <!-- .modal-dialog -->
+        <div class="modal-dialog modal-lg" role="document">
+            <!-- .modal-content -->
+            <div class="modal-content">
+                <!-- .modal-header -->
+                <div class="modal-header">
+                    <h6 id="socialModalLabel" class="modal-title inline-editable">
+                        <span class="sr-only">合作狀況</span> <input id="previewKol_name1" type="text" class="form-control form-control-lg" value="" placeholder="合作項目" readonly="readonly " required="">
+                    </h6>
+                    <button type="button" class="close" data-dismiss="modal">
+                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
+                    </button>
+                </div><!-- /.modal-header -->
+                <!-- .modal-body -->
+                <div class="modal-body">
+                    <div class="form-row">
+                        <!-- form column -->
+                        <label for="input02" class="col-md-3">案件名稱</label> <!-- /form column -->
+                        <!-- form column -->
+                        <div class="col-md-9 mb-3">
+                            <input type="text" class="form-control" id="previewProject_name" value="" readonly="readonly">
+                        </div><!-- /form column -->
+                    </div>
+
+                    <div class="form-row">
+                        <!-- form column -->
+                        <label for="input03" class="col-md-3">合作形式</label> <!-- /form column -->
+                        <!-- form column -->
+                        <div class="col-md-9 mb-3">
+                            <input type="text" class="form-control" id="previewProject_Cooper" readonly="readonly"></input>
+                        </div><!-- /form column -->
+                    </div>
+
+                    <div class="col-md-12">
+                        <h2 class="card-title"> 報價 </h2><!-- .table-responsive -->
+                        <div class="table-responsive">
+                            <table class="table table-hover" style="min-width: 678px" id="previewPrice_table">
+                                <thead>
+                                    <tr>
+                                        <th style="width: 10%;"> 合作平台 </th>
+                                        <th style="width: 30%;"> 規格 </th>
+                                        <th style="width: 10%; text-align: right;"> 數量 </th>
+                                        <th style="width: 10%; text-align: right;"> 報價 </th>
+                                        <th> 報價日期</th>
+                      
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td class="align-middle">  Instagram </td>
+                                        <td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
+                                        <td class="align-middle"> zamy_ding </td>
+                                        <td class="align-middle"> 奎丁 </td>
+                                        <td class="align-middle"> 754000 </td>
+                                        
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div><!-- /.table-responsive -->
+                        
+                    </div>
+                    <div class="col-md-12">
+                        <!-- .form-group -->
+                        <div class="form-group">
+                            <h2 class="card-title">確認合作</h2>
+                            <div class="col-md-9 mb-3">
+                                <input type="text" class="form-control" id="previewProject_isCooper" readonly="readonly"></input>
+                            </div><!-- /form column -->
+                        </div><!-- /.form-group -->
+                        <div class="card-footer">&nbsp;</div>
+                    </div>
+                    <div class="col-md-12" id="fileDiv" style="display: none;">
+                        <h2 class="card-title"> 合約 </h2><!-- .table-responsive -->
+                        <div class="table-responsive">
+                            <table class="table table-hover" style="min-width: 678px" id="previewFile_table">
+                                <thead>
+                                    <tr>
+                                        <th> 檔名 </th>
+                                 
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
+                                    
+                                        
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div><!-- /.table-responsive -->
+                        
+                    </div>
+                    <div class="col-md-12" id="isCooperate_div">
+                        <div class="form-group">
+                            <h2 class="card-title">評價</h2>
+                            <!-- form column -->
+                            <div class="col-md-9 mb-3">
+                                <input type="text" class="form-control" id="previewProject_Quality" readonly="readonly"></input>
+                            </div><!-- /form column -->
+                        </div><!-- /.form-group -->
+                        <div class="card-footer">&nbsp;</div>
+                    </div>
+                    <div class="col-md-12" id="isCooperate2_div">
+                        <h2 class="card-title"> 上刊連結 </h2><!-- .table-responsive -->
+                        <div class="table-responsive">
+                            <table class="table table-hover" style="min-width: 678px" id="previewLink_table">
+                                <thead>
+                                    <tr>
+
+                                        <th> 連結 </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
+                                       
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div><!-- /.table-responsive -->
+                        
+                    </div>
+                    <div class="col-md-12" id="isCooperate3_div">
+                        <h2 class="card-title"> 截圖 </h2><!-- .table-responsive -->
+                        <div class="table-responsive">
+                            <table class="table table-hover" style="min-width: 678px" id="previewCut_table">
+                                <thead>
+                                    <tr>
+
+                                        <th style="width: 30%;"> 截圖 </th>
+                                        <th> 說明文字</th>
+                             
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
+                                        <td class="align-middle ">
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div><!-- /.table-responsive -->
+                        
+                    </div>
+                    <div class="col-md-12" >
+                        <!-- .form-group -->
+                        <div class="form-group">
+                                    <h2 for="lbl3" class="card-title">附註 <span class="badge badge-secondary"><em>選填</em></span></h2>
+                            <textarea class="form-control" id="previewkolProject_memo" rows="4" placeholder=""></textarea>
+                        </div><!-- /.form-group -->
+                    </div>
+                </div><!-- /.modal-body -->
+                <!-- .modal-footer -->
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-light" data-toggle="modal" data-target="#clientCasePreviewModal">Close</button>
+                </div><!-- /.modal-footer -->
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div>
+</form><!-- /.modal -->

wwwroot/assets/javascript/custom/kollist.js

@@ -976,7 +976,7 @@ $(document).ready(function () {
                             render: function render(data, type, row, meta) {
                                 var ret = '';
                                 ret += '<div class="user-avatar user-avatar-xxl">';
-                                ret += '    <a href="javascript: void();" data-uid="' + row.kol_uid + '" data-method="preview"><img src="' + row.kol_photo + '" alt=""></a>';
+                                ret += '    <a href="javascript: void(0);" data-uid="' + row.kol_uid + '" data-method="preview"><img src="' + row.kol_photo + '" alt=""></a>';
                                 ret += '</div>';
                                 return ret;
                                 //return row.gift_city + row.gift_area + row.gift_address;

wwwroot/assets/javascript/custom/projectlist.js

@@ -490,6 +490,153 @@ $(document).ready(function () {
     
 });
 
+function kolProjectPreview(obj) {
+    var uid = obj.getAttribute('data-uid');
+    alert(uid);
+
+    var formData = {
+            method: "get",
+            kolProject_uid: uid
+        }
+
+        $.ajax({
+            url: "/Api/kolProjectAddEditDelGet",
+            type: "post",
+            data: formData,
+            success: function (data, textStatus, jqXHR) {
+                if (data.ret == "yes") {
+                    var trList = $("#previewPrice_table").find("tbody").find("tr");
+                    $.each(trList, function (index, item) {
+                        $(item).remove();
+                    });
+
+                    var trList = $("#previewFile_table").find("tbody").find("tr");
+                    $.each(trList, function (index, item) {
+                        $(item).remove();
+                    });
+
+                    var trList = $("#previewLink_table").find("tbody").find("tr");
+                    $.each(trList, function (index, item) {
+                        $(item).remove();
+                    });
+
+                    var trList = $("#previewCut_table").find("tbody").find("tr");
+                    $.each(trList, function (index, item) {
+                        $(item).remove();
+                    });
+
+                    var obj = data.data;
+
+
+                    $('#previewProject_name').val('(' + obj.project.project_year + '年度' + obj.project.project_month + '月) ' + obj.project.project_name);
+
+                    var cooperStr = '';
+
+                    $.each(obj.kolCooperateTypeDetails, function () {
+                        cooperStr += this.optionItem_name + '/';
+                    });
+
+                    cooperStr = cooperStr.replace(/\/+$/, '');
+
+                    $('#previewProject_Cooper').val(cooperStr);
+
+                    $.each(obj.kolProjectPrices, function () {
+                        var trHtml = "";
+                        trHtml += '<tr>';
+                        trHtml += '     <td class="align-middle">  ' + this.optionItem_name + ' </td>';
+                        trHtml += '     <td class="align-middle"> ' + this.mediaItem_name + ' </td>';
+                        trHtml += '     <td class="align-middle" style="text-align: right;"> ' + this.kolProjectPrice_num + ' </td>';
+                        trHtml += '     <td class="align-middle" style="text-align: right;"> ' + AppendComma(this.kolProjectPrice_cost) + ' </td>';
+                        trHtml += '     <td class="align-middle"> ' + this.kolProjectPrice_date + ' </td>';
+                        
+                        trHtml += '</tr>';
+
+                        $('#previewPrice_table tbody').append(trHtml);
+                    });
+
+                    if (obj.kolProject.kolProject_isExec == 'Y') {
+                        $('#previewProject_isCooper').val('是');
+                    } else {
+                        $('#previewProject_isCooper').val('否');
+
+                        if (obj.kolProject.kolProject_noExecReason != '') {
+                            $('#previewProject_isCooper').val('否，原因【' + obj.kolProject.kolProject_noExecReason + '】');
+                        }
+                    }
+
+                    $.each(obj.kolProjectFiles, function () {
+                        var ret = '';
+
+                        ret += '    <a href="' + this.kolProjectFile_path + '" target="_blank">' + this.kolProjectFile_originFileName + '</a>';
+
+
+                        var trHtml = "";
+                        trHtml += '<tr>';
+                        trHtml += '     <td class="align-middle">  ' + ret + ' </td>';
+                        trHtml += '</tr>';
+
+                        $('#previewFile_table tbody').append(trHtml);
+                    });
+
+                    var qualityStr = '';
+
+                    $.each(obj.kolProjectEvaluates, function (key, value) {
+                        qualityStr += value.kolProjectEvaluate_text + "/";
+                    });
+
+                    qualityStr = qualityStr.replace(/\/+$/, '');
+
+                    $('#previewProject_Quality').val(qualityStr);
+
+                    $.each(obj.kolProjectLinks, function () {
+                        var trHtml = "";
+                        trHtml += '<tr>';
+                        trHtml += '     <td class="align-middle">  <a href="' + this.kolProjectLink_url + '" target="_blank" class="link">' + this.kolProjectLink_text + '</a></td>';
+                        
+                        trHtml += '</tr>';
+
+                        $('#previewLink_table tbody').append(trHtml);
+                    });
+
+                    $.each(obj.kolProjectImages, function () {
+                        var ret = '';
+                        ret += '<div class="user-avatar user-avatar-xxl">';
+                        ret += '    <a href="' + this.kolProjectImage_photo + '" target="_blank"><img style="border: 0;" src="' + this.kolProjectImage_photo + '" alt=""></a>';
+                        ret += '</div>';
+
+                        var trHtml = "";
+                        trHtml += '<tr>';
+                        trHtml += '     <td class="align-middle">  ' + ret + ' </td>';
+
+                        trHtml += '     <td class="align-middle"> ' + this.kolProjectImage_desc + ' </td>';
+                        
+                        trHtml += '</tr>';
+
+                        $('#previewCut_table tbody').append(trHtml);
+                    });
+
+
+                    $('#previewkolProject_memo').val(obj.kolProject.kolProject_memo);
+
+                    
+
+                    
+
+                    $('#clientCasePreviewModal').modal('toggle');
+                } else {
+                    alert(data.message);
+
+                    if (data.err_code == "9999") {
+                        location.href = "/Home/Index";
+                    }
+                }
+            },
+            error: function (jqXHR, textStatus, errorThrown) {
+                alert('網路或伺服器發生錯誤，請稍後重試!');
+            }
+        });
+}
+
 function buttonClick2(obj) {
     var type = obj.getAttribute('data-method');
     var uid = obj.getAttribute('data-uid');
@@ -505,7 +652,7 @@ function buttonClick2(obj) {
         }
 
         $.ajax({
-            url: "/Api/kolProjectViewList",
+            url: "/Api/projectKolViewList",
             type: "post",
             data: formData,
             success: function (data, textStatus, jqXHR) {
@@ -515,13 +662,10 @@ function buttonClick2(obj) {
                         $(item).remove();
                     });
 
-                    $.each(data.detail, function () {
+                    $.each(data.detail.kolList, function () {
                         var trHtml = "";
                         trHtml += '<tr>';
-                        trHtml += '     <td class="align-middle">  ' + this.kol_name + ' </td>';
+                        trHtml += '     <td class="align-middle">  <a href="javascript: void(0);" data-uid="' + this.kolProject_uid + '" onclick="kolProjectPreview(this);">' + this.kol_name + ' </td>';
-                        trHtml += '     <td class="align-middle"> ' + this.optionItem_name + ' </td>';
-                        trHtml += '     <td class="align-middle"> ' + this.mediaItem_name + ' </td>';
-                        trHtml += '     <td class="align-middle" style="text-align: right;"> ' + AppendComma(this.kolProjectPrice_cost) + ' </td>';
                         
                         var execStr = '';