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.username }}
            </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.filteredEntries.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;
        }

        if (this.id === 'all' && this.entity === 'all') {
          this.topContributors = syncedList;
        } else {
          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`;
        
      }
    },
  },
};
</script>

<style>
</style>