Guest User

Component B

a guest
Apr 10th, 2020
82
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.         components: { DatePicker },
  55.             data: function() {
  56.                 return {
  57.                     commentData: {
  58.                         comment: "",
  59.                         customDate: ""
  60.                     },
  61.                     selectedCategory: "",
  62.                     lang: {
  63.                         default: "en"
  64.                     },
  65.                 }
  66.             },
  67.             mounted: function() {
  68.                 var listCategory;
  69.                 var listComment;
  70.                 var listDate;
  71.  
  72.                 let siteUrl = 'https://site.sharepoint.com/sites/Playercard/';
  73.                 let clientContext = new SP.ClientContext(siteUrl);
  74.                 let oList = clientContext.get_web().get_lists().getByTitle('Comment');
  75.                 let camlQuery = new SP.CamlQuery();
  76.  
  77.                 var statID = this.commentRecId;
  78.                 console.log("Edit Comment this.commentRecId: " + statID);
  79.  
  80.                 camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'ID\'/>' +
  81.                     '<Value Number=\'Text\'>'+statID+'</Value></Eq></Where></Query></View>');
  82.                 var collListItem = oList.getItems(camlQuery);
  83.                 clientContext.load(collListItem);
  84.                 console.log("clientContext loaded!");
  85.  
  86.                 // First we much execute the query to retrieve the items
  87.                 clientContext.executeQueryAsync(()=> {
  88.                         // Now colListItem is a collection, we must iterate through it
  89.                         var listItemEnumerator = collListItem.getEnumerator();
  90.  
  91.                         while (listItemEnumerator.moveNext()) {
  92.                             var oListItem = listItemEnumerator.get_current();
  93.                             listDate = oListItem.get_item('Date');
  94.                             listCategory = oListItem.get_item('Category');
  95.                             listComment = oListItem.get_item('Comment');
  96.                         }
  97.  
  98.                         console.log("listDate: " + listDate);
  99.                         console.log("listCategory " + listCategory);
  100.                         console.log("listComment: " + listComment);
  101.                         this.commentData.customDate = listDate;
  102.                         this.selectedCategory = listCategory;
  103.                         this.commentData.comment = listComment;
  104.  
  105.                         clientContext.executeQueryAsync(
  106.                             () => console.log('Item(s) edited')),
  107.                             () => console.log('Failed to edit item(s)');
  108.                     },
  109.                     ()=>console.log('Failed to retrieve items'));
  110.             },
  111.         methods: {
  112.             getFormDigest: function() {
  113.                 return $.ajax({
  114.                     //url: "/DEV/BBUlm" + "/_api/contextinfo",
  115.                     url: this.$store.state.baseUrlContextinfo,
  116.                     method: "POST",
  117.                     async: false,
  118.                     headers: {
  119.                         Accept: "application/json; odata=verbose"
  120.                     }
  121.                 });
  122.             },
  123.             saveComment: function() {
  124.  
  125.                 var playerID = this.$store.state.selectedPlayer.ID;
  126.                 // var playerName = this.$store.state.selectedPlayer.Name;
  127.                 var date = this.commentData.customDate.toISOString();
  128.                 // var $this = this;
  129.                 var listName = "Comment";
  130.                 var $this = this;
  131.                 var itemType = this.GetItemTypeForListName(listName);
  132.                 var item = {
  133.                     __metadata: {
  134.                         type: itemType
  135.                     },
  136.                     Comment: this.commentData.comment,
  137.                     Category: this.selectedCategory,
  138.                     Date: date,
  139.                     PlayerNameId: playerID
  140.                 };
  141.                 var baseUrl = this.$store.state.baseUrl;
  142.                 var filter = "$filter=id eq '" + this.text + "'";
  143.                 baseUrl += "GetByTitle('" + listName + "')/items"; // + filter;
  144.                 return this.getFormDigest(baseUrl).then(function(data) {
  145.                     $.ajax({
  146.                         url: baseUrl,
  147.                         type: "POST",
  148.                         contentType: "application/json;odata=verbose",
  149.                         data: JSON.stringify(item),
  150.                         headers: {
  151.                             Accept: "application/json;odata=verbose",
  152.                             "X-RequestDigest": data.d.GetContextWebInformation.FormDigestValue
  153.                         },
  154.                         async: false,
  155.                         success: function(data, textStatus, xhr) {
  156.                             $this.$emit("close");
  157.                             $this.writeHistory(data.d.ID);
  158.                             console.log("success!");
  159.                         },
  160.                         error: function(xhr, textStatus, errorThrown) {
  161.                             alert("error:" + JSON.stringify(xhr));
  162.                             $("#dialog" + "records").html(" [0]");
  163.                         }
  164.                     });
  165.                 });
  166.             },
  167.             writeHistory: function(commentRecId) {
  168.                 var playerID = this.$store.state.selectedPlayer.ID;
  169.                 var playerName = this.$store.state.selectedPlayer.Name;
  170.                 var $this = this;
  171.                 var listName = "History";
  172.                 //var customDate = this.commentData.customDate.toISOString();
  173.                 var CurrentDate = this.commentData.customDate.toISOString();
  174.                 var itemType = this.GetItemTypeForListName(listName);
  175.                 var item = {
  176.                     __metadata: {
  177.                         type: itemType
  178.                     },
  179.                     PlayerNameId: playerID,
  180.                     date: CurrentDate,
  181.                     act: this.selectedCategory,
  182.                     details: this.commentData.comment,
  183.                     CorrespondingListID: commentRecId.toString()
  184.                 };
  185.                 // var baseUrl = "/DEV/BBUlm" + "/_api/web/lists/";
  186.                 var baseUrl = this.$store.state.baseUrl;
  187.                 baseUrl += "GetByTitle('" + listName + "')/items";
  188.                 return this.getFormDigest(baseUrl).then(function(data) {
  189.                     $.ajax({
  190.                         url: baseUrl,
  191.                         type: "POST",
  192.                         contentType: "application/json;odata=verbose",
  193.                         data: JSON.stringify(item),
  194.                         headers: {
  195.                             Accept: "application/json;odata=verbose",
  196.                             "X-RequestDigest": data.d.GetContextWebInformation.FormDigestValue
  197.                         },
  198.                         async: false,
  199.                         success: function(data, textStatus, xhr) {
  200.                             $this.$emit("close");
  201.                         },
  202.                         error: function(xhr, textStatus, errorThrown) {
  203.                             alert("error:" + JSON.stringify(xhr));
  204.                             $("#dialog" + "records").html(" [0]");
  205.                         }
  206.                     });
  207.                 });
  208.             },
  209.             GetItemTypeForListName: function(name) {
  210.                 return (
  211.                     "SP.Data." +
  212.                     name.charAt(0).toUpperCase() +
  213.                     name
  214.                         .split(" ")
  215.                         .join("")
  216.                         .slice(1) +
  217.                     "ListItem"
  218.                 );
  219.             }
  220.         }
  221.     };
  222. </script>
  223.  
  224. <style scoped>
  225.     .v--modal {
  226.         padding: 10px;
  227.     }
  228.     .row {
  229.         margin-bottom: 20px;
  230.     }
  231.     select {
  232.         -webkit-appearance: menulist;
  233.         border-style: solid;
  234.     }
  235. </style>
RAW Paste Data