From 1cf2f6083de212db57756f327237a9cec562d925 Mon Sep 17 00:00:00 2001
From: phlexplexico <flexing@phlexplexi.co>
Date: Tue, 26 Apr 2022 14:54:01 -0600
Subject: [PATCH] Fix my matches.

Server paginate/sort team tables.
---
 src/components/MatchesTable.vue | 44 ++++++++++++-----
 src/components/TeamsTable.vue   | 85 +++++++++++++++++++++++----------
 2 files changed, 92 insertions(+), 37 deletions(-)

diff --git a/src/components/MatchesTable.vue b/src/components/MatchesTable.vue
index e499452..09baee4 100644
--- a/src/components/MatchesTable.vue
+++ b/src/components/MatchesTable.vue
@@ -48,6 +48,18 @@
         {{ item.team2_string }}
       </div>
     </template>
+    <template v-slot:top>
+      <div v-if="isMyMatches && isThereCancelledMatches">
+        <v-toolbar flat>
+          <v-toolbar-title>
+            <v-btn primary @click="deleteCancelled" :loading="deletePending">
+              {{ $t("Matches.DeleteButton") }}
+            </v-btn>
+          </v-toolbar-title>
+        </v-toolbar>
+      </div>
+      <div v-else />
+    </template>
   </v-data-table>
 </template>
 
@@ -62,7 +74,8 @@ export default {
       isLoading: true,
       isThereCancelledMatches: false,
       totalMatches: -1,
-      options: {}
+      options: {},
+      deletePending: false
     };
   },
   computed: {
@@ -84,7 +97,8 @@ export default {
         },
         {
           text: this.$t("Matches.Status"),
-          value: "match_status"
+          value: "match_status",
+          sortable: false
         },
         {
           text: this.$t("Matches.Owner"),
@@ -92,12 +106,15 @@ export default {
           sortable: false
         }
       ];
+    },
+    isMyMatches() {
+      return this.$route.path == "/mymatches";
     }
   },
   watch: {
     options: {
-      handler() {
-        this.pageUpdate();
+      async handler() {
+        await this.pageUpdate();
       },
       deep: true
     }
@@ -118,14 +135,16 @@ export default {
       this.isLoading = false;
     },
     async pageUpdate() {
-      let count = await this.GetAllMatches();
+      let count =
+        this.$route.path == "/mymatches"
+          ? await this.GetMyMatches()
+          : await this.GetAllMatches();
       const { sortBy, sortDesc, page, itemsPerPage } = this.options;
       if (typeof count == "string") count = [];
       if (sortBy.length === 1 && sortDesc.length === 1) {
         count = count.sort((a, b) => {
           const sortA = a[sortBy[0]];
           const sortB = b[sortBy[0]];
-
           if (sortDesc[0]) {
             if (sortA < sortB) return 1;
             if (sortA > sortB) return -1;
@@ -144,11 +163,14 @@ export default {
       await this.pushMatchData(count);
       return;
     },
-    async checkRoute(offset, amount) {
-      let res;
-      if (offset < 0) res = await this.GetAllMatches();
-      else res = await this.GetPagedMatches(offset, amount);
-      return res;
+    async deleteCancelled() {
+      this.deletePending = true;
+      await this.DeleteMyCancelledMatches();
+      this.deletePending = false;
+      this.matches = [];
+      this.isLoading = true;
+      this.isThereCancelledMatches = false;
+      await this.pageUpdate();
     }
   }
 };
diff --git a/src/components/TeamsTable.vue b/src/components/TeamsTable.vue
index cfe97d9..86fdc0a 100644
--- a/src/components/TeamsTable.vue
+++ b/src/components/TeamsTable.vue
@@ -7,7 +7,8 @@
       :loading-text="$t('misc.LoadText')"
       :headers="headers"
       :items="teams"
-      :sort-by="['id']"
+      :options.sync="options"
+      :server-items-length="totalTeams"
       ref="TeamsTable"
     >
       <template v-slot:top>
@@ -112,12 +113,11 @@ export default {
         tournament_id: ""
       },
       responseSheet: false,
-      response: ""
+      response: "",
+      options: {},
+      totalTeams: -1
     };
   },
-  mounted() {
-    this.GetTeams();
-  },
   watch: {
     newImportDialog(val) {
       if (!val) {
@@ -126,6 +126,12 @@ export default {
           tournament_id: ""
         };
       }
+    },
+    options: {
+      handler() {
+        this.GetTeams();
+      },
+      deep: true
     }
   },
   computed: {
@@ -143,7 +149,8 @@ export default {
         },
         {
           text: this.$t("Team.TeamTag"),
-          value: "tag"
+          value: "tag",
+          sortable: false
         },
         {
           text: this.$t("Team.Flag"),
@@ -151,42 +158,68 @@ export default {
         },
         {
           text: this.$t("Team.Owner"),
-          value: "owner"
+          value: "owner",
+          sortable: false
         }
       ];
     }
   },
   methods: {
     async GetTeams() {
-      try {
-        const res =
-          this.$route.path == "/teams"
-            ? await this.GetAllTeams()
-            : await this.GetMyTeams();
-        await res.forEach(async team => {
-          const ownerRes = await this.GetUserData(team.user_id);
-          team.owner = ownerRes.name;
-          if (
-            team.user_id == this.user.id ||
-            team.public_team == 1 ||
-            (await this.IsAnyAdmin(this.user))
-          ) {
-            this.teams.push(team);
+      this.isLoading = true;
+      this.teams = [];
+      let count =
+        this.$route.path == "/teams"
+          ? await this.GetAllTeams()
+          : await this.GetMyTeams();
+
+      const { sortBy, sortDesc, page, itemsPerPage } = this.options;
+      if (typeof count == "string") count = [];
+      if (sortBy.length === 1 && sortDesc.length === 1) {
+        count = count.sort((a, b) => {
+          const sortA = a[sortBy[0]];
+          const sortB = b[sortBy[0]];
+          if (sortDesc[0]) {
+            if (sortA < sortB) return 1;
+            if (sortA > sortB) return -1;
+            return 0;
+          } else {
+            if (sortA < sortB) return -1;
+            if (sortA > sortB) return 1;
+            return 0;
           }
         });
-      } catch (err) {
-        console.error(err);
-      } finally {
-        this.isLoading = false;
       }
+
+      this.totalTeams = count.length;
+      if (itemsPerPage > 0) {
+        count = count.slice((page - 1) * itemsPerPage, page * itemsPerPage);
+      }
+
+      await count.forEach(async team => {
+        const ownerRes = await this.GetUserData(team.user_id);
+        team.owner = ownerRes.name;
+        if (
+          team.user_id == this.user.id ||
+          team.public_team == 1 ||
+          (await this.IsAnyAdmin(this.user))
+        ) {
+          this.teams.push(team);
+        }
+      });
+      this.isLoading = false;
       return;
     },
     async importChallongeTeams() {
       let importData = [this.challongeInfo];
       let isImport = await this.ImportChallongeTeams(importData);
-      if (isImport.includes("successfully")) {
+      console.log(isImport);
+      if (isImport.message.includes("successfully")) {
         this.teams = [];
         this.GetTeams();
+        this.response = isImport.message;
+        this.responseSheet = true;
+        this.newImportDialog = false;
       } else {
         this.response = this.$t("Seasons.ImportError");
         this.responseSheet = true;