Component A

<template>
  <div>
    <button type="submit" class="btn btn-primary btn-style" @click.prevent="AddCommentDialog()">Comment</button>
    <button type="submit" class="btn btn-primary btn-style" @click.prevent="AddCharacterDialog()">Character</button>
    <button type="submit" class="btn btn-primary btn-style" @click.prevent="AddStatisticsDialog()">Statistics</button>
    <button type="submit" class="btn btn-primary btn-style" @click.prevent="AddAthleticTestDialog()">Athletic Test</button>
    <!--     <button
      type="submit"
      class="btn btn-primary btn-style"
      @click.prevent="wrireCharacter();"
    >Timetable</button>
    <button
      type="submit"
      class="btn btn-primary btn-style"
      @click.prevent="wrireCharacter();"
    >Statistics</button>-->
    <vue-good-table
      ref="sr-table"
      :ltr="true"
      :columns="columns"
      :rows="rows"
      :pagination-options="{ enabled: true, perPage: 10}"
      :search-options="{ enabled: false}"
      max-height="700px"
      :fixed-header="true"
      @on-row-click="onRowClick"
    >
      <template slot="table-row" slot-scope="props">
        <span v-if="props.column.field == 'details' && props.row.details != null">

          <span v-if="props.row.details.indexOf(',') == -1">{{props.row.details}}</span>
          <span v-else-if="props.row.details.split(',')[0] == 'character'">
              <span v-if="props.row.details.split(',')[1] === '1'"  title="Discipline" class="bg-success text-center text-white" style="padding:12px; vertical-align: middle; border-right: 1px solid #dee2e6;">1</span>
              <span v-else-if="props.row.details.split(',')[1] === '2'" title="Discipline" div class="bg-info text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">2</span>
              <span v-else-if="props.row.details.split(',')[1] === '3'" title="Discipline" div class="bg-warning text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">3</span>
              <span v-else-if="props.row.details.split(',')[1] === '4'" title="Discipline" div class="bg-danger text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">4</span>

              <span v-if="props.row.details.split(',')[2] === '1'" title="Commitment" class="bg-success text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6;">1</span>
              <span v-else-if="props.row.details.split(',')[2] === '2'" title="Commitment" div class="bg-info text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">2</span>
              <span v-else-if="props.row.details.split(',')[2] === '3'" title="Commitment" div class="bg-warning text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">3</span>
              <span v-else-if="props.row.details.split(',')[2] === '4'" title="Commitment" div class="bg-danger text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">4</span>

              <span v-if="props.row.details.split(',')[3] === '1'" title="Concentration" class="bg-success text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6;">1</span>
              <span v-else-if="props.row.details.split(',')[3] === '2'" title="Concentration" div class="bg-info text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">2</span>
              <span v-else-if="props.row.details.split(',')[3] === '3'" title="Concentration" div class="bg-warning text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">3</span>
              <span v-else-if="props.row.details.split(',')[3] === '4'" title="Concentration" div class="bg-danger text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">4</span>
          </span>
       <span v-else-if="props.row.details.split(',')[0] == 'statistics'">
            <div title="FGMA" class="d-inline-block ml-1">
              <div style="width: 130px" class="mr-1">
                <table>
                  <b>FGMA</b>
                </table>
                <table>{{props.row.details.split(',')[1]}}</table>
              </div>
            </div>
            <div v-if="props.row.details.split(',')[2] !=null" title="PMA2" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>PMA2</b>
                </table>
                <table>{{props.row.details.split(',')[2]}}</table>
              </div>
            </div>
            <div title="PMA3" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>PMA3</b>
                </table>
                <table>{{props.row.details.split(',')[3]}}</table>
              </div>
            </div>
            <div title="FTMA" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>FTMA</b>
                </table>
                <table>{{props.row.details.split(',')[4]}}</table>
              </div>
            </div>
            <div title="OFF" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>OFF</b>
                </table>
                <table>{{props.row.details.split(',')[5]}}</table>
              </div>
            </div>
            <div title="DEF" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>DEF</b>
                </table>
                <table>{{props.row.details.split(',')[6]}}</table>
              </div>
            </div>
            <div title="TOT" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>TOT</b>
                </table>
                <table>{{props.row.details.split(',')[7]}}</table>
              </div>
            </div>
            <div title="AST" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>AST</b>
                </table>
                <table>{{props.row.details.split(',')[8]}}</table>
              </div>
            </div>
            <div title="TO" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>TO</b>
                </table>
                <table>{{props.row.details.split(',')[10]}}</table>
              </div>
            </div>

            <div title="BS" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>BS</b>
                </table>
                <table>{{props.row.details.split(',')[11]}}</table>
              </div>
            </div>
            <div title="FPF" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>FPF</b>
                </table>
                <table>{{props.row.details.split(',')[13]}}</table>
              </div>
            </div>
            <div title="EFF" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>EFF</b>
                </table>
                <table>{{props.row.details.split(',')[14]}}</table>
              </div>
            </div>
            <div title="PTS" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>PTS</b>
                </table>
                <table>{{props.row.details.split(',')[15]}}</table>
              </div>
            </div>
            <div title="ST" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>ST</b>
                </table>
                <table>{{props.row.details.split(',')[9]}}</table>
              </div>
            </div>
            <div title="PF" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>PF</b>
                </table>
                <table>{{props.row.details.split(',')[12]}}</table>
              </div>
            </div>
          </span>

          <span v-else-if="props.row.details.split(',')[0] == 'athletics'">
            <div title="Athletes" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Athletes</b>
                </table>
                <table>{{props.row.details.split(',')[1]}}</table>
              </div>
            </div>
            <div v-if="props.row.details.split(',')[2] !=null" title="Testing Day" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Testing Day</b>
                </table>
                <table>{{props.row.details.split(',')[3]}}</table>
              </div>
            </div>
            <div title="Age" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Age</b>
                </table>
                <table>{{props.row.details.split(',')[3]}}</table>
              </div>
            </div>
            <div title="Bodyweight" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Bodyweight</b>
                </table>
                <table>{{props.row.details.split(',')[4]}}</table>
              </div>
            </div>
            <div title="Bodyfat" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Bodyfat</b>
                </table>
                <table>{{props.row.details.split(',')[5]}}</table>
              </div>
            </div>
            <div title="Height" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Height</b>
                </table>
                <table>{{props.row.details.split(',')[6]}}</table>
              </div>
            </div>
            <div title="StandReach" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Stand/Reach</b>
                </table>
                <table>{{props.row.details.split(',')[7]}}</table>
              </div>
            </div>
            <div title="Wingspan" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Wingspan</b>
                </table>
                <table>{{props.row.details.split(',')[8]}}</table>
              </div>
            </div>
            <div title="Birthday" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Birthday</b>
                </table>
                <table>{{props.row.details.split(',')[9]}}</table>
              </div>
            </div>
            <div title="FMS" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>FMS</b>
                </table>
                <table>{{props.row.details.split(',')[10]}}</table>
              </div>
            </div>
            <div title="SJ" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>SJ</b>
                </table>
                <table>{{props.row.details.split(',')[11]}}</table>
              </div>
            </div>
            <div title="CMJ" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>CMJ</b>
                </table>
                <table>{{props.row.details.split(',')[12]}}</table>
              </div>
            </div>
            <div title="AJ" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>AJ</b>
                </table>
                <table>{{props.row.details.split(',')[13]}}</table>
              </div>
            </div>
            <div title="DJ" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>DJ</b>
                </table>
                <table>{{props.row.details.split(',')[14]}}</table>
              </div>
            </div>
            <div title="ModTest" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>mod. T-Test</b>
                </table>
                <table>{{props.row.details.split(',')[15]}}</table>
              </div>
            </div>
            <div title="FMSprint" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>5m Sprint</b>
                </table>
                <table>{{props.row.details.split(',')[16]}}</table>
              </div>
            </div>
            <div title="ZEMSprint" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>10m Sprint</b>
                </table>
                <table>{{props.row.details.split(',')[17]}}</table>
              </div>
            </div>
            <div title="FZMSprint" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>15m Sprint</b>
                </table>
                <table>{{props.row.details.split(',')[18]}}</table>
              </div>
            </div>
            <div title="ZWMSprint" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>20m Sprint</b>
                </table>
                <table>{{props.row.details.split(',')[19]}}</table>
              </div>
            </div>
            <div title="BenchPress" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Bench Press</b>
                </table>
                <table>{{props.row.details.split(',')[20]}}</table>
              </div>
            </div>
            <div title="PullUps" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Pull ups reg.</b>
                </table>
                <table>{{props.row.details.split(',')[21]}}</table>
              </div>
            </div>
            <div title="BackSquat" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Back Squat</b>
                </table>
                <table>{{props.row.details.split(',')[22]}}</table>
              </div>
            </div>
            <div title="StraightHobLe" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Straight hob le.</b>
                </table>
                <table>{{props.row.details.split(',')[23]}}</table>
              </div>
            </div>
            <div title="StraightHobRi" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Straight hob ri.</b>
                </table>
                <table>{{props.row.details.split(',')[24]}}</table>
              </div>
            </div>
            <div title="LatBoundLe" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Lat. bound le.</b>
                </table>
                <table>{{props.row.details.split(',')[25]}}</table>
              </div>
            </div>
            <div title="LatBoundRi" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Lat bound ri.</b>
                </table>
                <table>{{props.row.details.split(',')[26]}}</table>
              </div>
            </div>
            <div title="TTest" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>T-Test</b>
                </table>
                <table>{{props.row.details.split(',')[27]}}</table>
              </div>
            </div>
            <div title="VerticalJump" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Vert. Jump</b>
                </table>
                <table>{{props.row.details.split(',')[27]}}</table>
              </div>
            </div>
            <div title="LateralJump" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>Lat. Jump</b>
                </table>
                <table>{{props.row.details.split(',')[28]}}</table>
              </div>
            </div>
            <div title="TWMSprint" class="d-inline-block ml-1">
              <div style="width: 130px">
                <table>
                  <b>20m Sprint</b>
                </table>
                <table>{{props.row.details.split(',')[29]}}</table>
              </div>
            </div>
          </span>


             <!--  <span v-if="props.row.details.split(',')[1] === '1'"  title="Discipline" class="bg-success text-center text-white" style="padding:12px; vertical-align: middle; border-right: 1px solid #dee2e6;">1</span>
              <span v-else-if="props.row.details.split(',')[1] === '2'" title="Discipline" div class="bg-info text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">2</span>
              <span v-else-if="props.row.details.split(',')[1] === '3'" title="Discipline" div class="bg-warning text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">3</span>
              <span v-else-if="props.row.details.split(',')[1] === '4'" title="Discipline" div class="bg-danger text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">4</span>

              <span v-if="props.row.details.split(',')[2] === '1'" title="Commitment" class="bg-success text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6;">1</span>
              <span v-else-if="props.row.details.split(',')[2] === '2'" title="Commitment" div class="bg-info text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">2</span>
              <span v-else-if="props.row.details.split(',')[2] === '3'" title="Commitment" div class="bg-warning text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">3</span>
              <span v-else-if="props.row.details.split(',')[2] === '4'" title="Commitment" div class="bg-danger text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">4</span>

              <span v-if="props.row.details.split(',')[3] === '1'" title="Concentration" class="bg-success text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6;">1</span>
              <span v-else-if="props.row.details.split(',')[3] === '2'" title="Concentration" div class="bg-info text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">2</span>
              <span v-else-if="props.row.details.split(',')[3] === '3'" title="Concentration" div class="bg-warning text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">3</span>
              <span v-else-if="props.row.details.split(',')[3] === '4'" title="Concentration" div class="bg-danger text-center text-white" style="padding:12px;  vertical-align: middle; border-right: 1px solid #dee2e6; ">4</span> -->

        </span>
        <span v-else-if="props.column.field == 'action'">
        <!-- src="https://thesite.sharepoint.com/sites/Playercard//Site Library/img/Entrance.png"-->

          <!--
          <span v-if="props.row.action === 'Entry'">
            <img src="https://thesite.sharepoint.com/DEV/BBUlm/Site%20Library/img/Entrance.png"    style="height:30px ;width:30px">Entrance
            <img src="https://thesite.sharepoint.com/sites/Playercard/Site Library/img/Entrance.png"    style="height:30px ;width:30px">Entry
          </span>
          -->

          <span v-if="props.row.action === 'AthleticTests'">
          <!--  <img src="https://thesite.sharepoint.com/DEV/BBUlm/Site%20Library/img/Sport.png"    style="height:30px ;width:30px">Athletic Test -->
            <img src="https://thesite.sharepoint.com/sites/Playercard/Site Library/img/Sport.png"    style="height:30px ;width:30px">Athletic Test
          </span>



          <span v-if="props.row.action === 'Social (Comment)'">
            <!-- <img src="https://thesite.sharepoint.com/DEV/BBUlm/Site%20Library/img/Social.png"    style="height:30px ;width:30px">Social -->
            <img src="https://thesite.sharepoint.com/sites/Playercard/Site Library/img/Social.png"    style="height:30px ;width:30px">Social (Comment)
          </span>

          <span v-if="props.row.action === 'Sport (Comment)'">
           <!-- <img src="https://thesite.sharepoint.com/DEV/BBUlm/Site%20Library/img/Sport.png"    style="height:30px ;width:30px">Sport -->
            <img src="https://thesite.sharepoint.com/sites/Playercard/Site Library/img/Sport.png"    style="height:30px ;width:30px">Sport (Comment)
          </span>

          <span v-if="props.row.action === 'School (Comment)'">
           <!-- <img src="https://thesite.sharepoint.com/DEV/BBUlm/Site%20Library/img/Social.png"    style="height:30px ;width:30px">School -->
            <img src="https://thesite.sharepoint.com/sites/Playercard/Site Library/img/Social.png"    style="height:30px ;width:30px">School (Comment)
          </span>

          <!--
          <span v-if="props.row.action === 'Exit'">
            <img src="https://thesite.sharepoint.com/DEV/BBUlm/Site%20Library/img/Exit.png"   style="height:30px ;width:30px">Exit
            <img src="https://thesite.sharepoint.com/sites/Playercard/Site Library/img/Exit.png"   style="height:30px ;width:30px">Exit
          </span>
          -->

          <span v-if="props.row.action === 'Character'">
          <!--  <img src="https://thesite.sharepoint.com/DEV/BBUlm/Site%20Library/img/Character.png"       style="height:30px ;width:30px">Character        -->
            <img src="https://thesite.sharepoint.com/sites/Playercard/Site Library/img/Character.png"       style="height:30px ;width:30px">Character
          </span>

          <span v-if="props.row.action === 'Statistics'">
          <!--  <img src="https://thesite.sharepoint.com/DEV/BBUlm/Site%20Library/img/flash.png"    style="height:30px ;width:30px">Statistics -->
            <img src="https://thesite.sharepoint.com/sites/Playercard/Site Library/img/flash.png"    style="height:30px ;width:30px">Statistics
          </span>

          <span v-if="(props.row.action === 'Others (Comment)')">
          <!--  <img src="https://thesite.sharepoint.com/DEV/BBUlm/Site%20Library/img/flash.png"    style="height:30px ;width:30px">Statistics -->
            <img src="https://thesite.sharepoint.com/sites/Playercard/Site Library/img/Character.png"    style="height:30px ;width:30px">Others (Comment)
          </span>

        </span>


        <span v-else>{{props.formattedRow[props.column.field]}}</span>
      </template>
    </vue-good-table>
  </div>
</template>

<script>
import * as $ from "jquery";
// import Character from "./Character/Character.vue";
import ShowAthleticTest from "./AthleticTest/ShowAthleticTest.vue"
import AddAthleticTest from "./AthleticTest/AddAthleticTest.vue"
import ShowCharacter from "./Character/ShowCharacter.vue";
import AddCharacter from "./Character/AddCharacter.vue";
import AddComment from "./Comment/AddComment.vue";
import ShowComment from "./Comment/ShowComment.vue";
import AddStatistics from "./Statistics/AddStatistics.vue";
import ShowStatistics from "./Statistics/ShowStatistics.vue";



export default {
   components: {
    // appCharacter: Character,
    appAddAthleticTest: AddAthleticTest,
    appAddCharacter: AddCharacter,
    appAddComment: AddComment,
    appShowAthleticTest: ShowAthleticTest,
    appShowCharacter: ShowCharacter,
    appShowComment: ShowComment,
    appAddStatistics: AddStatistics,
    appShowStatistics: ShowStatistics,

  },
  data: function() {

    return {
      baseImageUrl: this.$store.state.baseImageUrl,
      histories: [],

      columns: [
        {
          label: "Created On",
          field: "createdAt",
          type: "date",
          dateInputFormat: "dd.MM.yyyy",
          dateOutputFormat: "dd.MM.yyyy'",
          thClass: "text-left",
          tdClass: "text-center",
          width: '160px',
          filterOptions: {
            enabled: true,
            placeholder: "Date",
           // filterFn: this.myColumnFilter
          }
        },
        {
          label: "Action",
          field: "action",
          type: "string",
          width: '135px',
          filterOptions: {
            enabled: true,
            placeholder: "All",
            filterDropdownItems: [
              "Comment",
              "Character",
              "Statistics",
              "AthleticTest"
            ]
          }
        },
        {
          label: "Details",
          field: "details",
          type: "string",
          tdClass: "text-left",
          width: '700px',
          filterOptions: {
            enabled: true,
            placeholder: "Details"
          }
        },
      ],
      rows: []

    };
  },
  created: function() {
    var playerID = this.$store.state.selectedPlayer.ID;
    this.loadHistory(playerID);
  },
  methods: {
    loadHistory: function(playerID) {
      this.rows = [];
      // var baseUrl = "/DEV/BBUlm" + "/_api/web/lists/";
      var baseUrl = this.$store.state.baseUrl;
      var listName = "History";
      var select =
        "$select=id,act,details,date,CorrespondingListID,PlayerName/Name";
      var expand = "&$expand=PlayerName";
      var filter = "&$filter=PlayerNameId eq '" + playerID + "'";
      var orderby = "&$orderby=date desc ";
      baseUrl +=
        "GetByTitle('" +
        listName +
        "')/items?" +
        select +
        expand +
        filter +
        orderby; //+ select;
      var $this = this;
      $.ajax({
        url: baseUrl,
        type: "GET",
        headers: {
          Accept: "application/json;odata=verbose"
        },
        async: false,
        success: function(data, textStatus, xhr) {
          $this.HistorysData(data);
        },
        error: function(xhr, textStatus, errorThrown) {
          alert("error:" + JSON.stringify(xhr));
          $("#start" + "records").html(" [0]");
        }
      });
    },
    HistorysData: function(data) {
      var data = data.d.results;
      this.histories = [];
      var $this = this;
      for (var i = 0; i < data.length; i++) {
        // var Created = this.getJSONDateAsString(data[i].Date, "dd.MM.yyyy");

        $this.rows.push({
          createdAt: this.getJSONDateAsString(data[i].date, "dd.MM.yyyy"),
          action: data[i].act,
          details: data[i].details,
          correspondingListID: data[i].CorrespondingListID
        });
      }
    },
    AddCharacterDialog: function() {
      var SelectedPlayerID = this.$store.state.selectedPlayer.ID;
      var $this = this;
      this.$modal.show(
        AddCharacter,
        {
          text: SelectedPlayerID
        },
        {
          draggable: true,
          width: 400,
          height: 400
        },
        {
          closed: function(event) {
            $this.loadHistory(SelectedPlayerID);
          }
        }
      );
    },
    AddCommentDialog: function() {
      var SelectedPlayerID = this.$store.state.selectedPlayer.ID;
      var $this = this;
      this.$modal.show(
        AddComment,
        {
          text: SelectedPlayerID
        },
        {
          draggable: true,
          width: 400,
          height: 400
        },
        {
          closed: function(event) {
            $this.loadHistory(SelectedPlayerID);
          }
        }
      );
    },
    AddStatisticsDialog: function() {
      var SelectedPlayerID = this.$store.state.selectedPlayer.ID;
      var $this = this;
      this.$modal.show(
        AddStatistics,
        {
          text: SelectedPlayerID
        },
        {
          draggable: true,
          width: 550,
          height: 750
        },
        {
          closed: function(event) {
            $this.loadHistory(SelectedPlayerID);
          }
        }
      );
    },
    AddAthleticTestDialog: function() {
      var SelectedPlayerID = this.$store.state.selectedPlayer.ID;
      var $this = this;
      this.$modal.show(
        AddAthleticTest,
        {
          text: SelectedPlayerID
        },
        {
          draggable: true,
          width: 1200,
          height: 750
        },
        {
          closed: function(event) {
            $this.loadHistory(SelectedPlayerID);
          }
        }
      );
    },
    onRowClick(params) {
      var recordNumber = params.row.correspondingListID;
      if (params.row.action == "Character") {
        this.showCharacterDialog(recordNumber);
      }
      if (params.row.action == "Social (Comment)" || params.row.action == "Sport (Comment)" || params.row.action == 'Others (Comment)' || params.row.action == 'School (Comment)') {
        this.showCommentDialog(recordNumber);
      }
      if(params.row.action == "Statistics"){
        this.showStatisticsDialog(recordNumber);
      }
      if(params.row.action == "AthleticTests"){
        this.showAthleticTestDialog(recordNumber);
      }

      // showCharacterDialog
      // params.row - row object
      // params.pageIndex - index of this row on the current page.
      // params.selected - if selection is enabled this argument
      // indicates selected or not
      // params.event - click event
    },
    showCharacterDialog: function(recordNumber) {
      this.$modal.show(
        ShowCharacter,
        {
          characterRecID: recordNumber
        },
        {
          draggable: true,
          width: 400,
          height: 450
        },
        {
          closed: function(event) {}
        }
      );
    },
    showCommentDialog: function(recordNumber) {
      this.$modal.show(
        ShowComment,
        {
          commentRecId: recordNumber
        },
        {
          draggable: true,
          width: 400,
          height: 250
        },
        {
          closed: function(event) {}
        }
      );
    },
    showStatisticsDialog: function(recordNumber) {
      this.$modal.show(
        ShowStatistics,
        {
          statisticsRecID: recordNumber
        },
        {
          draggable: true,
          width: 1000,
          height: 500
        },
        {
          closed: function(event) {}
        }
      );
    },
    showAthleticTestDialog: function(recordNumber) {
      this.$modal.show(
        ShowAthleticTest,
        {
          athleticsRecID: recordNumber
        },
        {
          draggable: true,
          width: 1400,
          height: 700
        },
        {
          closed: function(event) {}
        }
      );
    },

    getJSONDateAsString: function(jsdatevalue, returnFormat) {
      if ((jsdatevalue == "") | (jsdatevalue == null)) {
        return "";
      }
      return new Date(jsdatevalue).toString(returnFormat);
    }
  }
};
</script>

<style scoped>
.btn-style {
  margin: 10px;
}
.vgt-right-align {
  text-align: center !important;
}
</style>