ContributorListTable.vue

<template>
  <section>
    <div class="h-1/2 overflow-y-auto shadow-md sm:rounded-lg">
      <h2 v-if="error" class="text-red-500">
        {{ errorMsg }}
      </h2>
      <h5 v-if="!showTable" class="text-center">
        No contribution made yet.
      </h5>
      
             <table v-else  class="w-full table-auto text-left text-gray-500 dark:text-gray-400">
        <thead class="
            sticky top-0
            bg-gray-50
            text-gray-700
            uppercase
            dark:bg-gray-700 dark:text-gray-400
          ">
          <tr class="p-8 sticky top-0">
            <th v-for="item in tableHeader" :key="item" scope="col" class="px-6 py-3">
              {{ item }}
            </th>
          </tr>
        </thead>

        <tbody class="overflow-y-scroll w-full" style="height: 2vh;" >



          <tr v-for="items in topContributors" :key="items.id"
            class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
            <td scope="row" class="
                px-6
                py-4
                font-medium
                text-gray-900
                dark:text-white
                whitespace-nowrap
              ">
              {{ items.fullName }}
            </td>
            <td scope="row" class="
                px-6
                py-4
                font-medium
                text-gray-900
                dark:text-white
                whitespace-nowrap
              ">
              <span class="
                  bg-blue-100
                  text-blue-800
                  font-semibold
                  mr-2
                  px-2.5
                  py-0.5
                  rounded
                  dark:bg-blue-200 dark:text-blue-800
                ">
                {{ items.contribution }}
              </span>
            </td>
          </tr>

        </tbody>


      </table>
      </div>
    
  
  </section>
</template>

<script>
let host = require('@/components/js/const').apiHost;
export default {
  props: ['id', 'entity'],
  data() {
    return {
      tableHeader: ['Name', 'Contributions'],

      isDev: process.env.NODE_ENV === 'development',
      topContributors: null,
      error: false,
      errorMsg: '',
      showTable: true,
    };
  },
  mounted() {
    this.getContributors();
  },

  methods: {
    async getContributors() {
      if (this.isDev) {
        host = require('@/components/js/const').devApiHost;
      }

      try {
        const res = await fetch(
          `${host}/api/update-item/filterContributors/${this.entity}/${this.id}`
        );
        if (!res.ok) {
          this.error = true;
          this.errorMsg = `${res.status} Internal Error, please write a mail to DDCode Admin`;

          return;
        }

        this.error = false;
        this.errorMsg = '';
        const response = await res.json();

        const convertedArray = response.entries.map((e) => ({
          id: e.id,
          username: e.username,
          fullName: e.full_name,
          contribution: e.SubmittedUpdateItems.length,
        }));

        let sortedArray = convertedArray.sort(
          (a, b) => b.contribution - a.contribution
        );

        // const sorted = [...new Set(convertedArray)].sort((a, b) => b.contribution - a.contribution);
        let syncedList = sortedArray.filter((list) => list.contribution > 0);
        if (syncedList.length === 0) {
          this.showTable = false;
          return;
        }
        this.showTable = true;
        let rank = 1;
        for (let i in syncedList) {
          if (
            i > 0 &&
            syncedList[i].contribution < syncedList[i - 1].contribution
          ) {
            rank += 1;
          }
          syncedList[i].rank = rank;
        }

        let top10Contributors = syncedList.filter((list) => list.rank <= 10);

        this.topContributors = top10Contributors;
      } catch (err) {
        this.error = true;
        this.errorMsg = `${err.message} Internal Error, please write a mail to DDCode Admin`;
        console.log(err);
      }
    },
  },
};
</script>

<style>
</style>