small updates to admin team page

openfoodfoundation · Aug 19, 2024 · 4180116 · 4180116
1 parent 78f873c
commit 4180116
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 26 deletions.
diff --git a/resources/js/Components/Admin/AdminTeamMerchantTeamsComponent.vue b/resources/js/Components/Admin/AdminTeamMerchantTeamsComponent.vue
@@ -1,9 +1,11 @@
 <script setup>
 import {onMounted, ref} from "vue";
+import {Link} from '@inertiajs/vue3';
 import AdminTeamDetailsComponent from "@/Components/Admin/AdminTeamDetailsComponent.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import Swal from "sweetalert2";
 import AdminTeamSelectComponent from "@/Components/Admin/AdminTeamSelectComponent.vue";
+import PaginatorComponent from "@/Components/Admin/PaginatorComponent.vue";
 
 const $props = defineProps({
     teamId: {
@@ -31,16 +33,22 @@ function addNewMerchant() {
     addingNewMerchant.value = true
 }
 
-function getMerchants() {
-    axios.get('/admin/team-merchant-teams?cached=false&where[]=team_id,' + $props.teamId + '&relations=merchantTeam').then(response => {
+function cancelAddingNewMerchant() {
+    addingNewMerchant.value = false
+    creatingNewTeamMerchant.value = false
+    teamAddingAsMerchant.value = {}
+}
+
+function getMerchants(page = 1) {
+    axios.get('/admin/team-merchant-teams?cached=false&where[]=team_id,' + $props.teamId + '&page=' + page + '&relations=merchantTeam').then(response => {
         merchants.value = response.data.data
     }).catch(error => {
         console.log(error)
     })
 }
 
-function getMerchantTeams() {
-    axios.get('/admin/team-merchant-teams?cached=false&where[]=merchant_team_id,' + $props.teamId + '&relations=team').then(response => {
+function getMerchantTeams(page = 1) {
+    axios.get('/admin/team-merchant-teams?cached=false&where[]=merchant_team_id,' + $props.teamId + '&page=' + page + '&relations=team').then(response => {
         merchantTeams.value = response.data.data
     }).catch(error => {
         console.log(error)
@@ -79,9 +87,16 @@ function teamSelected(team) {
 
 <template>
     <div class="flex justify-end">
-        <PrimaryButton @click="addNewMerchant()" class="ms-4">
-            Add Merchant Team
-        </PrimaryButton>
+        <div v-if="!addingNewMerchant && !creatingNewTeamMerchant">
+            <PrimaryButton @click="addNewMerchant()" class="ms-4">
+                Add Merchant Team
+            </PrimaryButton>
+        </div>
+        <div v-else>
+            <PrimaryButton @click="cancelAddingNewMerchant()" class="ms-4">
+                Cancel
+            </PrimaryButton>
+        </div>
     </div>
 
     <div v-if="addingNewMerchant">
@@ -94,7 +109,6 @@ function teamSelected(team) {
         <PrimaryButton @click="submitTeamMerchant()" class="">
             Add
         </PrimaryButton>
-
     </div>
 
     <div v-else>
@@ -109,7 +123,16 @@ function teamSelected(team) {
             </div>
 
             <div v-for="merchant in merchants.data" class="border-b py-1">
-                <AdminTeamDetailsComponent :team="merchant.merchant_team"/>
+                <Link :href="route('admin.team', merchant.merchant_team_id)">
+                    <AdminTeamDetailsComponent :team="merchant.merchant_team"/>
+                </Link>
+            </div>
+            <div class="flex justify-end items-center mt-4">
+                <div class="w-full lg:w-1/3">
+                    <PaginatorComponent
+                        @setDataPage="getMerchants"
+                        :pagination-data="merchants"></PaginatorComponent>
+                </div>
             </div>
         </div>
 
@@ -124,7 +147,16 @@ function teamSelected(team) {
             </div>
 
             <div v-for="merchantTeam in merchantTeams.data" class="border-b py-1">
-                <AdminTeamDetailsComponent :team="merchantTeam.team"/>
+                <Link :href="route('admin.team', merchantTeam.team_id)">
+                    <AdminTeamDetailsComponent :team="merchantTeam.team"/>
+                </Link>
+            </div>
+            <div class="flex justify-end items-center mt-4">
+                <div class="w-full lg:w-1/3">
+                    <PaginatorComponent
+                        @setDataPage="getMerchantTeams"
+                        :pagination-data="merchantTeams"></PaginatorComponent>
+                </div>
             </div>
         </div>
 

diff --git a/resources/js/Components/Admin/AdminTeamSelectComponent.vue b/resources/js/Components/Admin/AdminTeamSelectComponent.vue
@@ -41,10 +41,6 @@ function createExcludeTeamIdsArray() {
             }
         })
     }
-
-    if ($props.teamId) {
-        excludeTeamIdsArray.value.push($props.teamId)
-    }
 }
 
 function searchTeam() {
@@ -91,10 +87,13 @@ function teamSelected(team) {
 
         <div v-if="searchStr.length > 0 && teams.total > 0" class="mt-4">
             <div v-for="team in teams.data" class="border-b py-1">
-                <button @click="teamSelected(team)" class="cursor-pointer flex justify-start items-end"
-                        :class="{'text-gray-500 cursor-not-allowed': excludeTeamIdsArray.includes(team.id)}"
-                :disabled="excludeTeamIdsArray.includes(team.id)">
+                <button @click="teamSelected(team)" class="flex justify-start items-end"
+                        :class="{'text-gray-500 cursor-not-allowed': (excludeTeamIdsArray.includes(team.id) || team.id === $props.teamId),
+                        'cursor-pointer': (!excludeTeamIdsArray.includes(team.id) && team.id !== $props.teamId)}"
+                :disabled="(excludeTeamIdsArray.includes(team.id) || team.id === $props.teamId)">
                     <AdminTeamDetailsComponent :team="team"/>
+                    <span v-if="excludeTeamIdsArray.includes(team.id)" class="text-red-500 text-xs italic pl-2">***Already added</span>
+                    <span v-if="team.id === $props.teamId" class="text-red-500 text-xs italic pl-2">***Own team cannot be added</span>
                 </button>
             </div>
             <div class="text-red-500 text-sm mt-4 cursor-pointer hover:underline" @click="startCreatingNewTeam()">

diff --git a/resources/js/Components/Admin/AdminTeamServiceTeamsComponent.vue b/resources/js/Components/Admin/AdminTeamServiceTeamsComponent.vue
@@ -1,9 +1,11 @@
 <script setup>
 import {onMounted, ref} from "vue";
+import {Link} from '@inertiajs/vue3';
 import AdminTeamDetailsComponent from "@/Components/Admin/AdminTeamDetailsComponent.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import Swal from "sweetalert2";
 import AdminTeamSelectComponent from "@/Components/Admin/AdminTeamSelectComponent.vue";
+import PaginatorComponent from "@/Components/Admin/PaginatorComponent.vue";
 
 const $props = defineProps({
     teamId: {
@@ -31,16 +33,22 @@ function addNewService() {
     addingNewService.value = true
 }
 
-function getServices() {
-    axios.get('/admin/team-service-teams?cached=false&where[]=team_id,' + $props.teamId + '&relations=serviceTeam').then(response => {
+function cancelAddingNewService() {
+    addingNewService.value = false
+    creatingNewTeamService.value = false
+    teamAddingAsService.value = {}
+}
+
+function getServices(page = 1) {
+    axios.get('/admin/team-service-teams?cached=false&where[]=team_id,' + $props.teamId + '&page=' + page + '&relations=serviceTeam').then(response => {
         services.value = response.data.data
     }).catch(error => {
         console.log(error)
     })
 }
 
-function getServiceTeams() {
-    axios.get('/admin/team-service-teams?cached=false&where[]=service_team_id,' + $props.teamId + '&relations=team').then(response => {
+function getServiceTeams(page = 1) {
+    axios.get('/admin/team-service-teams?cached=false&where[]=service_team_id,' + $props.teamId + '&page=' + page + '&relations=team').then(response => {
         serviceTeams.value = response.data.data
     }).catch(error => {
         console.log(error)
@@ -79,9 +87,16 @@ function teamSelected(team) {
 
 <template>
     <div class="flex justify-end">
-        <PrimaryButton @click="addNewService()" class="ms-4">
-            Add Service Team
-        </PrimaryButton>
+        <div v-if="!addingNewService && !creatingNewTeamService">
+            <PrimaryButton @click="addNewService()" class="ms-4">
+                Add Service Team
+            </PrimaryButton>
+        </div>
+        <div v-else>
+            <PrimaryButton @click="cancelAddingNewService()" class="ms-4">
+                Cancel
+            </PrimaryButton>
+        </div>
     </div>
 
     <div v-if="addingNewService">
@@ -108,7 +123,16 @@ function teamSelected(team) {
             </div>
 
             <div v-for="service in services.data" class="border-b py-1">
-                <AdminTeamDetailsComponent :team="service.service_team"/>
+                <Link :href="route('admin.team', service.service_team_id)">
+                    <AdminTeamDetailsComponent :team="service.service_team"/>
+                </Link>
+            </div>
+            <div class="flex justify-end items-center mt-4">
+                <div class="w-full lg:w-1/3">
+                    <PaginatorComponent
+                        @setDataPage="getServices"
+                        :pagination-data="services"></PaginatorComponent>
+                </div>
             </div>
         </div>
 
@@ -123,7 +147,16 @@ function teamSelected(team) {
             </div>
 
             <div v-for="serviceTeam in serviceTeams.data" class="border-b py-1">
-                <AdminTeamDetailsComponent :team="serviceTeam.team"/>
+                <Link :href="route('admin.team', serviceTeam.team_id)">
+                    <AdminTeamDetailsComponent :team="serviceTeam.team"/>
+                </Link>
+            </div>
+            <div class="flex justify-end items-center mt-4">
+                <div class="w-full lg:w-1/3">
+                    <PaginatorComponent
+                        @setDataPage="getServiceTeams"
+                        :pagination-data="serviceTeams"></PaginatorComponent>
+                </div>
             </div>
         </div>