Guest User

Component A

a guest
Apr 10th, 2020
70
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div class="container">
  3.     <table class="table table-hover" id="tblScores">
  4.       <tbody>
  5.         <tr>
  6.           <th scope="row">Date</th>
  7.           <td style="text-align: left">{{this.date}}</td>
  8.         </tr>
  9.         <tr>
  10.           <th scope="row">Category</th>
  11.           <td style="text-align: left">{{this.action}}</td>
  12.         </tr>
  13.         <tr>
  14.           <th scope="row">Comment</th>
  15.           <td style="text-align: left">{{this.details}}</td>
  16.         </tr>
  17.       </tbody>
  18.     </table>
  19.  
  20.     <button type="submit" class="btn btn-primary float-right" @click.prevent="$emit('close')">Close</button>
  21.     <button class="btn btn-primary float-sm-right" style="margin-right:10px" @click.prevent="deleteItem()">Delete</button>
  22.     <button class="btn btn-primary float-sm-right" style="margin-right:10px" @click.prevent="editItem()">Edit</button>
  23.  
  24.     <EditComment v-bind:comment-rec-id="commentRecId" v-if="showEdit"></EditComment>
  25.   </div>
  26. </template>
  27.  
  28. <script>
  29. import * as $ from "jquery";
  30. import EditComment from "./EditComment.vue";
  31.  
  32.  
  33. export default {
  34.   props: ["commentRecId"],
  35.   data: function() {
  36.     return {
  37.       date: "",
  38.       action: "",
  39.       details: ""
  40.     };
  41.   },
  42.  
  43.   mounted: function() {
  44.     this.showEdit = true;
  45.     this.loadComments();
  46.   },
  47.   components: {
  48.     appAddComment: EditComment
  49.   },
  50.   methods: {
  51.     loadComments: function() {
  52.       this.showEdit = true;
  53.       console.log("this.ShowEdit in ShowComment: " + this.showEdit);
  54.       console.log("commentRecID in ShowComment: " + this.commentRecId);
  55.       var playerID = this.$store.state.selectedPlayer.ID;
  56.       //var baseUrl = "/DEV/BBUlm" + "/_api/web/lists/";
  57.       var baseUrl = this.$store.state.baseUrl;
  58.       var listName = "Comment";
  59.       var filter = "$filter=ID eq '" + this.commentRecId + "'";
  60.       baseUrl += "GetByTitle('" + listName + "')/items?" + filter;
  61.       var $this = this;
  62.  
  63.       console.log("ShowComment this.commentRecId: " + this.commentRecId);
  64.       $.ajax({
  65.         url: baseUrl,
  66.         type: "GET",
  67.         headers: {
  68.           Accept: "application/json;odata=verbose"
  69.         },
  70.         async: false,
  71.         success: function(data, textStatus, xhr) {
  72.           $this.commentsData(data.d.results);
  73.         },
  74.         error: function(xhr, textStatus, errorThrown) {
  75.           alert("error:" + JSON.stringify(xhr));
  76.           $("#start" + "records").html(" [0]");
  77.         }
  78.       });
  79.     },
  80.     commentsData: function(data) {
  81.       //this.date = data[0].Date;
  82.       this.date = this.getJSONDateAsString(data[0].Date, "dd.MM.yyyy");
  83.       this.action = data[0].Category;
  84.       this.details = data[0].Comment;
  85.     },
  86.     getJSONDateAsString: function(jsdatevalue, returnFormat) {
  87.       if ((jsdatevalue == "") | (jsdatevalue == null)) {
  88.         return "";
  89.       }
  90.       return new Date(jsdatevalue).toString(returnFormat);
  91.     },
  92.     deleteItem: function() {
  93.       let siteUrl = 'https://site.sharepoint.com/sites/Playercard/';
  94.       let clientContext = new SP.ClientContext(siteUrl);
  95.       let oList = clientContext.get_web().get_lists().getByTitle('Comment');
  96.       let oListItem = oList.getItemById(parseInt(this.commentRecId));
  97.       oListItem.deleteObject();
  98.       clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded1), Function.createDelegate(this, this.onQueryFailed1));
  99.       this.deleteFromHistory();
  100.     },
  101.  
  102.     onQuerySucceeded1: function(){
  103.       console.log('Item deleted: ' + this.commentRecId);
  104.     },
  105.  
  106.     onQueryFailed1: function(sender, args){
  107.       console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
  108.     },
  109.  
  110.     deleteFromHistory: function(){
  111.       let siteUrl = 'https://site.sharepoint.com/sites/Playercard/';
  112.       let clientContext = new SP.ClientContext(siteUrl);
  113.       let oList = clientContext.get_web().get_lists().getByTitle('History');
  114.       var statID = this.commentRecId;
  115.       // console.log("statID: " + statID);
  116.  
  117.       let camlQuery = new SP.CamlQuery();
  118.       camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'CorrespondingListID\'/>' +
  119.               '<Value Type=\'Text\'>'+statID+'</Value></Eq></Where></Query></View>');
  120.  
  121.       var collListItem = oList.getItems(camlQuery);
  122.       clientContext.load(collListItem);
  123.       console.log("collListItem: " + collListItem);
  124.  
  125.       // First we much execute the query to retrieve the items
  126.       clientContext.executeQueryAsync(()=> {
  127.                 // Now colListItem is a collection, we must iterate through it
  128.                 var listItemEnumerator = collListItem.getEnumerator();
  129.  
  130.                 while (listItemEnumerator.moveNext()) {
  131.                   var item = listItemEnumerator.get_current();
  132.                   // if we try item.deleteObject() the collection will be modified and it will throw an exception
  133.                   oList.getItemById(item.get_id()).deleteObject();
  134.                 }
  135.                 // Finally execute the delete statements
  136.                 clientContext.executeQueryAsync(
  137.                         () => console.log('Item(s) deleted')),
  138.                         () => console.log('Failed to delete item(s)');
  139.               },
  140.               ()=>console.log('Failed to retrieve items'));
  141.       location.reload();
  142.     },
  143.  
  144.     onQuerySucceeded2: function(){
  145.       console.log('History Comment deleted: ' + this.commentRecId);
  146.  
  147.     },
  148.  
  149.     onQueryFailed2: function(sender, args){
  150.       console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
  151.     },
  152.  
  153.     editItem: function(){
  154.       var playerID = this.$store.state.selectedPlayer.ID;
  155.       this.$modal.show(
  156.               EditComment,
  157.               {
  158.                 text: playerID
  159.               },
  160.               {
  161.                 draggable: true,
  162.                 width: 400,
  163.                 height: 400
  164.               })
  165.     }
  166.   }
  167. };
  168. </script>
  169.  
  170. <style scoped>
  171. .v--modal {
  172.   padding-top: 15px;
  173.   padding-left: 10px;
  174. }
  175. /* #tblScores tr,
  176. #tblScores td,
  177. #tblScores th {
  178.   border: 0 !important;
  179. } */
  180. </style>
RAW Paste Data