<commit_before><template>
  <div class="main-content-container container-fluid px-4">
    <!-- Page Header -->
    <div class="page-header row no-gutters py-4">
      <div class="col-12 col-sm-4 text-center text-sm-left mb-0">
        <span class="text-uppercase page-subtitle">Viewing all</span>
        <h3 class="page-title">Repos</h3>
      </div>
    </div>



    <div class="row">
      <div class="col">
        <div class="card card-small mb-4">
          <div class="card-header border-bottom">
            <h6 class="m-0">Currently Stored Repos</h6>
          </div>

          <d-card-body v-if="!loadedRepos">
            <spinner></spinner>
          </d-card-body>

          <div v-if="loadedRepos" class="card-body p-0 pb-3 text-center">
            <table class="reposTable table mb-0">
              <thead class="bg-light">
                <tr>
                  <th scope="col" class="border-0" v-on:click="sortTable('url')">
                    <div class="row">
                      <div class="col col-9">URL</div>
                      <div class="arrow" v-bind:class="ascending ? 'arrow_up' : 'arrow_down'" v-if="'url' == sortColumn"></div>
                    </div>
                  </th>
                  <th scope="col" class="border-0" v-on:click="sortTable('rg_name')">
                    <div class="row">
                      <div class="col col-9">Repo Group Name</div>
                      <div class="arrow" v-bind:class="ascending ? 'arrow_up' : 'arrow_down'" v-if="'rg_name' == sortColumn"></div>
                    </div>
                  </th>
                  <!-- <th width="30%" scope="col" class="border-0" v-on:click="sortTable('description')">
                    <div class="row">
                      <div class="col col-9">Repo Description</div>
                      <div class="arrow" v-bind:class="ascending ? 'arrow_up' : 'arrow_down'" v-if="'description' == sortColumn"></div>
                    </div>
                  </th> -->
                  <!-- <th scope="col" class="border-0" v-on:click="sortTable('repo_count')">
                    <div class="row">
                      <div class="col col-9">Group's Repo Count</div>
                      <div class="arrow" v-bind:class="ascending ? 'arrow_up' : 'arrow_down'" v-if="'repo_count' == sortColumn"></div>
                    </div>
                  </th> -->
                  <th scope="col" class="border-0" v-on:click="sortTable('commits_all_time')">
                    <div class="row">
                      <div class="col col-9">Total Commit Count</div>
                      <div class="arrow" v-bind:class="ascending ? 'arrow_up' : 'arrow_down'" v-if="'commits_all_time' == sortColumn"></div>
                    </div>
                  </th>
                  <th scope="col" class="border-0" v-on:click="sortTable('issues_all_time')">
                    <div class="row">
                      <div class="col col-0">Total Issue Count</div>
                      <div class="arrow" v-bind:class="ascending ? 'arrow_up' : 'arrow_down'" v-if="'issues_all_time' == sortColumn"></div>
                    </div>
                  </th>
                  <!-- <th scope="col" class="border-0" v-on:click="sortTable('repo_status')">
                    <div class="row">
                      <div class="col col-9">Status</div>
                      <div class="col col-2 arrow" v-bind:class="ascending ? 'arrow_up' : 'arrow_down'" v-if="'repo_status' == sortColumn"></div>
                    </div>
                  </th> -->
                  <!-- <th scope="col" class="border-0">Options</th> -->
                </tr>
              </thead>
              <tbody>
                <tr v-for="repo in sortedRepos(sortColumn,ascending)" v-bind:item="repo" :key="repo.url">
                  <td>
                    <a href="#" @click="onGitRepo(repo.rg_name, repo.repo_name)">{{ repo.url }}</a>
                  </td>
                  <td>{{ repo.rg_name }}</td>
                  <!-- <td>{{ repo.description }}</td> -->
                  <!-- <td>{{ repo.repo_count }}</td> -->
                  <td>{{ repo.commits_all_time }}</td>
                  <td>{{ repo.issues_all_time }}</td>
                  <!-- <td>{{ repo.repo_status }}</td> -->
                  <!-- <td>
                    <div class="row">
                      <button :id="'favorite'+index" class="nav-link col col-2" style="margin-left: 2rem; margin-right: 1rem; padding: 0;border: none; background: none;">
                        <i class="material-icons" style="color:#007bff;">star_rate</i>
                        <div class="item-icon-wrapper"></div>
                      </button>
                      <d-tooltip :target="'#favorite'+index"
                                 container=".shards-demo--example--tooltip-01">
                        Consider this repo group as a "favorite" and our workers will regulaly update its metrics' data before others
                      </d-tooltip>
                      <button :id="'add_compare'+index" class="nav-link col col-2" style="padding: 0;border: none; background: none;" @click="addComparedRepo(repo)">
                        <i class="material-icons" style="color:#007bff;">library_add</i>
                        <div class="item-icon-wrapper"></div>
                      </button>
                      <d-tooltip :target="'#add_compare'+index"
                                 :triggers="['hover']"
                                 container=".shards-demo--example--tooltip-01">
                        Add this repo group to your current compared repos
                      </d-tooltip>
                    </div>
                  </td> -->
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Component from 'vue-class-component';
import Vue from 'vue';
import {mapActions, mapGetters, mapMutations} from "vuex";
import Spinner from '../components/Spinner.vue'
@Component({
  components: {
    Spinner,
  },
  methods: {
    ...mapActions('common',[
      'endpoint', // map `this.endpoint({...})` to `this.$store.dispatch('endpoint', {...})`
                  // uses: this.endpoint({endpoints: [], repos (optional): [], repoGroups (optional): []})
      'getRepoRelations',
      'loadRepos',
      'addRepo'
    ]),

    ...mapActions('compare',[
      'addComparedRepo',
      'setBaseRepo'
    ])
  },
  computed: {
    ...mapGetters('common', [
      'sortedRepos'
    ]),
  },
})

export default class Repos extends Vue{
  colors: string[] = ["#343A40", "#24a2b7", "#159dfb", "#FF3647", "#4736FF","#3cb44b","#ffe119","#f58231","#911eb4","#42d4f4","#f032e6"];
  testEndpoints: string[] = ['issuesClosed', 'codeChangesLines', 'issueNew'];
  testTimeframes: string[] = ['past 1 month', 'past 3 months', 'past 2 weeks'];
  // repos: any[] = [];
  repo_groups:any[] = [];
  repo_relations:any[] =  [];
  themes: string[] = ['dark', 'info', 'royal-blue', 'warning'];
  loadedGroups: boolean = false;
  loadedSparks: boolean = false;

  loadedRepos: boolean = false;

  ascending:boolean = true;
  sortColumn: string ='url';
  getRepoRelations!: any
  sortedRepos!:any
  loadRepos!:any;

  addRepo!:any;
  setBaseRepo!:any;
  addComparedRepo!:any;


  created() {

    this.loadRepos().then(() => {
      this.loadedRepos = true
    })

  }

  sortTable(col: string) {
      if (this.sortColumn === col) {
        this.ascending = !this.ascending;
      } else {
        this.ascending = true;
        this.sortColumn = col;
      }
  }

  onGitRepo (rg_name: String, repo_name: String) {
    // this.$router.push({
    //   name: 'repo_overview',
    //   params: {group:e.rg_name, repo:e.repo_name, repo_group_id: e.repo_group_id, repo_id: e.repo_id, url:e.url}
    // }, () => {
    //   console.dir(e);
    // });
    if (typeof rg_name === 'undefined' || typeof repo_name === 'undefined') {
      window.alert('Error - repo name not found in store');
      console.log(this.sortedRepos(this.sortColumn,this.ascending));
    } else {
      this.$router.push(`repo/${rg_name}/${repo_name}/overview`, () => {
        console.log(`RG_NAME: ${rg_name}`);
        console.log(`REPO_NAME: ${repo_name}`);
      });
    }
  }
}

</script><commit_msg>adjust routing logic in Repos.vue (tracking down fix for url bug when navigating to overview)<commit_after><template>
  <div class="main-content-container container-fluid px-4">
    <!-- Page Header -->
    <div class="page-header row no-gutters py-4">
      <div class="col-12 col-sm-4 text-center text-sm-left mb-0">
        <span class="text-uppercase page-subtitle">Viewing all</span>
        <h3 class="page-title">Repos</h3>
      </div>
    </div>



    <div class="row">
      <div class="col">
        <div class="card card-small mb-4">
          <div class="card-header border-bottom">
            <h6 class="m-0">Currently Stored Repos</h6>
          </div>

          <d-card-body v-if="!loadedRepos">
            <spinner></spinner>
          </d-card-body>

          <div v-if="loadedRepos" class="card-body p-0 pb-3 text-center">
            <table class="reposTable table mb-0">
              <thead class="bg-light">
                <tr>
                  <th scope="col" class="border-0" v-on:click="sortTable('url')">
                    <div class="row">
                      <div class="col col-9">URL</div>
                      <div class="arrow" v-bind:class="ascending ? 'arrow_up' : 'arrow_down'" v-if="'url' == sortColumn"></div>
                    </div>
                  </th>
                  <th scope="col" class="border-0" v-on:click="sortTable('rg_name')">
                    <div class="row">
                      <div class="col col-9">Repo Group Name</div>
                      <div class="arrow" v-bind:class="ascending ? 'arrow_up' : 'arrow_down'" v-if="'rg_name' == sortColumn"></div>
                    </div>
                  </th>
                  <!-- <th width="30%" scope="col" class="border-0" v-on:click="sortTable('description')">
                    <div class="row">
                      <div class="col col-9">Repo Description</div>
                      <div class="arrow" v-bind:class="ascending ? 'arrow_up' : 'arrow_down'" v-if="'description' == sortColumn"></div>
                    </div>
                  </th> -->
                  <!-- <th scope="col" class="border-0" v-on:click="sortTable('repo_count')">
                    <div class="row">
                      <div class="col col-9">Group's Repo Count</div>
                      <div class="arrow" v-bind:class="ascending ? 'arrow_up' : 'arrow_down'" v-if="'repo_count' == sortColumn"></div>
                    </div>
                  </th> -->
                  <th scope="col" class="border-0" v-on:click="sortTable('commits_all_time')">
                    <div class="row">
                      <div class="col col-9">Total Commit Count</div>
                      <div class="arrow" v-bind:class="ascending ? 'arrow_up' : 'arrow_down'" v-if="'commits_all_time' == sortColumn"></div>
                    </div>
                  </th>
                  <th scope="col" class="border-0" v-on:click="sortTable('issues_all_time')">
                    <div class="row">
                      <div class="col col-0">Total Issue Count</div>
                      <div class="arrow" v-bind:class="ascending ? 'arrow_up' : 'arrow_down'" v-if="'issues_all_time' == sortColumn"></div>
                    </div>
                  </th>
                  <!-- <th scope="col" class="border-0" v-on:click="sortTable('repo_status')">
                    <div class="row">
                      <div class="col col-9">Status</div>
                      <div class="col col-2 arrow" v-bind:class="ascending ? 'arrow_up' : 'arrow_down'" v-if="'repo_status' == sortColumn"></div>
                    </div>
                  </th> -->
                  <!-- <th scope="col" class="border-0">Options</th> -->
                </tr>
              </thead>
              <tbody>
                <tr v-for="repo in sortedRepos(sortColumn,ascending)" v-bind:item="repo" :key="repo.url">
                  <td>
                    <a href="#" @click="onGitRepo(repo.rg_name, repo.repo_name)">{{ repo.url }}</a>
                  </td>
                  <td>{{ repo.rg_name }}</td>
                  <!-- <td>{{ repo.description }}</td> -->
                  <!-- <td>{{ repo.repo_count }}</td> -->
                  <td>{{ repo.commits_all_time }}</td>
                  <td>{{ repo.issues_all_time }}</td>
                  <!-- <td>{{ repo.repo_status }}</td> -->
                  <!-- <td>
                    <div class="row">
                      <button :id="'favorite'+index" class="nav-link col col-2" style="margin-left: 2rem; margin-right: 1rem; padding: 0;border: none; background: none;">
                        <i class="material-icons" style="color:#007bff;">star_rate</i>
                        <div class="item-icon-wrapper"></div>
                      </button>
                      <d-tooltip :target="'#favorite'+index"
                                 container=".shards-demo--example--tooltip-01">
                        Consider this repo group as a "favorite" and our workers will regulaly update its metrics' data before others
                      </d-tooltip>
                      <button :id="'add_compare'+index" class="nav-link col col-2" style="padding: 0;border: none; background: none;" @click="addComparedRepo(repo)">
                        <i class="material-icons" style="color:#007bff;">library_add</i>
                        <div class="item-icon-wrapper"></div>
                      </button>
                      <d-tooltip :target="'#add_compare'+index"
                                 :triggers="['hover']"
                                 container=".shards-demo--example--tooltip-01">
                        Add this repo group to your current compared repos
                      </d-tooltip>
                    </div>
                  </td> -->
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Component from 'vue-class-component';
import Vue from 'vue';
import {mapActions, mapGetters, mapMutations} from "vuex";
import Spinner from '../components/Spinner.vue'
@Component({
  components: {
    Spinner,
  },
  methods: {
    ...mapActions('common',[
      'endpoint', // map `this.endpoint({...})` to `this.$store.dispatch('endpoint', {...})`
                  // uses: this.endpoint({endpoints: [], repos (optional): [], repoGroups (optional): []})
      'getRepoRelations',
      'loadRepos',
      'addRepo'
    ]),

    ...mapActions('compare',[
      'addComparedRepo',
      'setBaseRepo'
    ])
  },
  computed: {
    ...mapGetters('common', [
      'sortedRepos'
    ]),
  },
})

export default class Repos extends Vue{
  colors: string[] = ["#343A40", "#24a2b7", "#159dfb", "#FF3647", "#4736FF","#3cb44b","#ffe119","#f58231","#911eb4","#42d4f4","#f032e6"];
  testEndpoints: string[] = ['issuesClosed', 'codeChangesLines', 'issueNew'];
  testTimeframes: string[] = ['past 1 month', 'past 3 months', 'past 2 weeks'];
  // repos: any[] = [];
  repo_groups:any[] = [];
  repo_relations:any[] =  [];
  themes: string[] = ['dark', 'info', 'royal-blue', 'warning'];
  loadedGroups: boolean = false;
  loadedSparks: boolean = false;

  loadedRepos: boolean = false;

  ascending:boolean = true;
  sortColumn: string ='url';
  getRepoRelations!: any
  sortedRepos!:any
  loadRepos!:any;

  addRepo!:any;
  setBaseRepo!:any;
  addComparedRepo!:any;


  created() {

    this.loadRepos().then(() => {
      this.loadedRepos = true
    })

  }

  sortTable(col: string) {
      if (this.sortColumn === col) {
        this.ascending = !this.ascending;
      } else {
        this.ascending = true;
        this.sortColumn = col;
      }
  }

  onGitRepo (rg_name: String, repo_name: String) {
    // this.$router.push({
    //   name: 'repo_overview',
    //   params: {group:e.rg_name, repo:e.repo_name, repo_group_id: e.repo_group_id, repo_id: e.repo_id, url:e.url}
    // }, () => {
    //   console.dir(e);
    // });
    if (rg_name == null || repo_name == null ) {
      window.alert('Error - repo name not found in store');
      console.log(this.sortedRepos(this.sortColumn,this.ascending));
    } else {
      this.$router.push(`repo/${rg_name}/${repo_name}/overview`, () => {
        console.log(`RG_NAME: ${rg_name}`);
        console.log(`REPO_NAME: ${repo_name}`);
      });
    }
  }
}

</script>
{'fraction_non_alphanumeric': 0.17804950790337012, 'fraction_numerical': 0.011333134506412169, 'mean_word_length': 1.7744497766010259, 'pattern_counts': {'":': 0, '<': 289, '<?xml version=': 0, '>': 295, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1656148', 'n_tokens_mistral': 5306, 'n_tokens_neox': 4988, 'n_words': 975}