Advertisement
Guest User

EditComment

a guest
Apr 10th, 2020
52
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <div class="container mt-2">
  3.         <div class="row">
  4.             <div class="d-inline col-lg-4 col-md-4 col-sm-4" padding="0px">
  5.                 Date
  6.                 <font color="red">*</font>
  7.             </div>
  8.             <div class="d-inline col-lg-8 col-md-8 col-sm-8" padding="0px">
  9.                 <date-picker
  10.                         v-model="commentData.customDate"
  11.                         :lang="lang"
  12.                         type="date"
  13.                         format="DD.MM.YYYY"
  14.                         confirm
  15.                 ></date-picker>
  16.             </div>
  17.         </div>
  18.         <div class="row">
  19.             <div class="d-inline col-lg-4 col-md-4 col-sm-4" padding="0px">
  20.                 Comment
  21.                 <font color="red">*</font>
  22.             </div>
  23.             <div class="d-inline col-lg-8 col-md-8 col-sm-8" padding="0px">
  24.                 <input v-model="commentData.comment" type="text" class="form-control" size="16">
  25.             </div>
  26.         </div>
  27.  
  28.         <div class="row">
  29.             <div class="d-inline col-lg-4 col-md-4 col-sm-4" padding="0px">
  30.                 Category
  31.                 <font color="red">*</font>
  32.             </div>
  33.             <div class="d-inline col-lg-8 col-md-8 col-sm-8" padding="0px">
  34.                 <select v-model="selectedCategory">
  35.                     <option>Social (Comment)</option>
  36.                     <option>Sport (Comment)</option>
  37.                     <option>School (Comment)</option>
  38.                     <option>Others (Comment)</option>
  39.                 </select>
  40.             </div>
  41.         </div>
  42.         <button type="submit" class="btn btn-primary" @click.prevent="saveComment()">Save</button>
  43.         <button type="submit" class="btn btn-primary float-right" @click.prevent="$emit('close')">Cancel</button>
  44.  
  45.     </div>
  46. </template>
  47.  
  48. <script>
  49.     import * as $ from "jquery";
  50.     import DatePicker from "vue2-datepicker";
  51.  
  52.     export default {
  53.         props: ["commentRecId"],
  54.         computed :{
  55.             statID(){
  56.                 return this.commentRecId;
  57.             }
  58.         },
  59.         components: { DatePicker },
  60.             data: function() {
  61.                 return {
  62.                     commentData: {
  63.                         comment: "",
  64.                         customDate: ""
  65.                     },
  66.                     selectedCategory: "",
  67.                     lang: {
  68.                         default: "en"
  69.                     },
  70.                 }
  71.             },
  72.             mounted: function() {
  73.                 var listCategory;
  74.                 var listComment;
  75.                 var listDate;
  76.  
  77.                 let siteUrl = 'https://basketballulm1.sharepoint.com/sites/Playercard/';
  78.                 let clientContext = new SP.ClientContext(siteUrl);
  79.                 let oList = clientContext.get_web().get_lists().getByTitle('Comment');
  80.                 let camlQuery = new SP.CamlQuery();
  81.  
  82.                 var statID = this.commentRecId;
  83.  
  84.                 console.log("Edit Comment this.statID: " + this.statID);
  85.  
  86.                 camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'ID\'/>' +
  87.                     '<Value Number=\'Text\'>'+statID+'</Value></Eq></Where></Query></View>');
  88.                 var collListItem = oList.getItems(camlQuery);
  89.                 clientContext.load(collListItem);
  90.                 console.log("clientContext loaded!");
  91.  
  92.                 // First we much execute the query to retrieve the items
  93.                 clientContext.executeQueryAsync(()=> {
  94.                         // Now colListItem is a collection, we must iterate through it
  95.                         var listItemEnumerator = collListItem.getEnumerator();
  96.  
  97.                         while (listItemEnumerator.moveNext()) {
  98.                             var oListItem = listItemEnumerator.get_current();
  99.                             listDate = oListItem.get_item('Date');
  100.                             listCategory = oListItem.get_item('Category');
  101.                             listComment = oListItem.get_item('Comment');
  102.                         }
  103.  
  104.                         console.log("listDate: " + listDate);
  105.                         console.log("listCategory " + listCategory);
  106.                         console.log("listComment: " + listComment);
  107.                         this.commentData.customDate = listDate;
  108.                         this.selectedCategory = listCategory;
  109.                         this.commentData.comment = listComment;
  110.  
  111.                         clientContext.executeQueryAsync(
  112.                             () => console.log('Item(s) edited')),
  113.                             () => console.log('Failed to edit item(s)');
  114.                     },
  115.                     ()=>console.log('Failed to retrieve items'));
  116.             },
  117.         methods: {
  118.             getFormDigest: function() {
  119.                 return $.ajax({
  120.                     //url: "/DEV/BBUlm" + "/_api/contextinfo",
  121.                     url: this.$store.state.baseUrlContextinfo,
  122.                     method: "POST",
  123.                     async: false,
  124.                     headers: {
  125.                         Accept: "application/json; odata=verbose"
  126.                     }
  127.                 });
  128.             },
  129.             saveComment: function() {
  130.  
  131.                 var playerID = this.$store.state.selectedPlayer.ID;
  132.                 // var playerName = this.$store.state.selectedPlayer.Name;
  133.                 var date = this.commentData.customDate.toISOString();
  134.                 // var $this = this;
  135.                 var listName = "Comment";
  136.                 var $this = this;
  137.                 var itemType = this.GetItemTypeForListName(listName);
  138.                 var item = {
  139.                     __metadata: {
  140.                         type: itemType
  141.                     },
  142.                     Comment: this.commentData.comment,
  143.                     Category: this.selectedCategory,
  144.                     Date: date,
  145.                     PlayerNameId: playerID
  146.                 };
  147.                 var baseUrl = this.$store.state.baseUrl;
  148.                 var filter = "$filter=id eq '" + this.text + "'";
  149.                 baseUrl += "GetByTitle('" + listName + "')/items"; // + filter;
  150.                 return this.getFormDigest(baseUrl).then(function(data) {
  151.                     $.ajax({
  152.                         url: baseUrl,
  153.                         type: "POST",
  154.                         contentType: "application/json;odata=verbose",
  155.                         data: JSON.stringify(item),
  156.                         headers: {
  157.                             Accept: "application/json;odata=verbose",
  158.                             "X-RequestDigest": data.d.GetContextWebInformation.FormDigestValue
  159.                         },
  160.                         async: false,
  161.                         success: function(data, textStatus, xhr) {
  162.                             $this.$emit("close");
  163.                             $this.writeHistory(data.d.ID);
  164.                             console.log("success!");
  165.                         },
  166.                         error: function(xhr, textStatus, errorThrown) {
  167.                             alert("error:" + JSON.stringify(xhr));
  168.                             $("#dialog" + "records").html(" [0]");
  169.                         }
  170.                     });
  171.                 });
  172.             },
  173.             writeHistory: function(commentRecId) {
  174.                 var playerID = this.$store.state.selectedPlayer.ID;
  175.                 var playerName = this.$store.state.selectedPlayer.Name;
  176.                 var $this = this;
  177.                 var listName = "History";
  178.                 //var customDate = this.commentData.customDate.toISOString();
  179.                 var CurrentDate = this.commentData.customDate.toISOString();
  180.                 var itemType = this.GetItemTypeForListName(listName);
  181.                 var item = {
  182.                     __metadata: {
  183.                         type: itemType
  184.                     },
  185.                     PlayerNameId: playerID,
  186.                     date: CurrentDate,
  187.                     act: this.selectedCategory,
  188.                     details: this.commentData.comment,
  189.                     CorrespondingListID: commentRecId.toString()
  190.                 };
  191.                 // var baseUrl = "/DEV/BBUlm" + "/_api/web/lists/";
  192.                 var baseUrl = this.$store.state.baseUrl;
  193.                 baseUrl += "GetByTitle('" + listName + "')/items";
  194.                 return this.getFormDigest(baseUrl).then(function(data) {
  195.                     $.ajax({
  196.                         url: baseUrl,
  197.                         type: "POST",
  198.                         contentType: "application/json;odata=verbose",
  199.                         data: JSON.stringify(item),
  200.                         headers: {
  201.                             Accept: "application/json;odata=verbose",
  202.                             "X-RequestDigest": data.d.GetContextWebInformation.FormDigestValue
  203.                         },
  204.                         async: false,
  205.                         success: function(data, textStatus, xhr) {
  206.                             $this.$emit("close");
  207.                         },
  208.                         error: function(xhr, textStatus, errorThrown) {
  209.                             alert("error:" + JSON.stringify(xhr));
  210.                             $("#dialog" + "records").html(" [0]");
  211.                         }
  212.                     });
  213.                 });
  214.             },
  215.             GetItemTypeForListName: function(name) {
  216.                 return (
  217.                     "SP.Data." +
  218.                     name.charAt(0).toUpperCase() +
  219.                     name
  220.                         .split(" ")
  221.                         .join("")
  222.                         .slice(1) +
  223.                     "ListItem"
  224.                 );
  225.             }
  226.         }
  227.     };
  228. </script>
  229.  
  230. <style scoped>
  231.     .v--modal {
  232.         padding: 10px;
  233.     }
  234.     .row {
  235.         margin-bottom: 20px;
  236.     }
  237.     select {
  238.         -webkit-appearance: menulist;
  239.         border-style: solid;
  240.     }
  241. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement