Merge pull request #65 from openfoodfoundation/feature/merchant-appro…

…vals-main-dash Feature: Merchant dashboard voucher set approvals component
openfoodfoundation · Oct 22, 2024 · f711111 · f711111
2 parents c5898bb + 7c57dba
commit f711111
Show file tree

Hide file tree

Showing 6 changed files with 209 additions and 18 deletions.
diff --git a/app/Http/Controllers/Api/V1/ApiMyTeamVSMTARController.php b/app/Http/Controllers/Api/V1/ApiMyTeamVSMTARController.php
@@ -24,6 +24,7 @@
 use Knuckles\Scribe\Attributes\Endpoint;
 use Knuckles\Scribe\Attributes\Group;
 use Knuckles\Scribe\Attributes\QueryParam;
+use Knuckles\Scribe\Attributes\Response;
 use Knuckles\Scribe\Attributes\Subgroup;
 use Knuckles\Scribe\Attributes\UrlParam;
 
@@ -37,24 +38,104 @@ class ApiMyTeamVSMTARController extends Controller
      * Set the related data the GET request is allowed to ask for
      */
     public array $availableRelations = [
+        'voucherSet',
         'voucherSet.createdByTeam',
         'voucherSet.allocatedToServiceTeam',
+        'voucherSet.voucherSetMerchantTeamApprovalActionedRecord.merchantUser',
         'merchantTeam',
     ];
 
-    public static array $searchableFields = [];
+    public static array $searchableFields = [
+        'id',
+    ];
 
     /**
      * GET /
      *
-     * @hideFromAPIDocumentation
-     *
      * @return JsonResponse
+     *
+     * @throws DisallowedApiFieldException
      */
+
+    /**
+     * @throws DisallowedApiFieldException
+     */
+    #[Endpoint(
+        title        : 'GET /',
+        description  : 'Retrieve my voucher set merchant approval requests. Automatically filtered to you and your current team.',
+        authenticated: true
+    )]
+    #[Authenticated]
+    #[QueryParam(
+        name       : 'cached',
+        type       : 'bool',
+        description: 'Request the response to be cached. Default: `true`.',
+        required   : false,
+        example    : true
+    )]
+    #[QueryParam(
+        name       : 'page',
+        type       : 'int',
+        description: 'The pagination page number.',
+        required   : false,
+        example    : 1
+    )]
+    #[QueryParam(
+        name       : 'limit',
+        type       : 'int',
+        description: 'The number of entries returned per pagination page.',
+        required   : false,
+        example    : 50
+    )]
+    #[QueryParam(
+        name       : 'fields',
+        type       : 'string',
+        description: 'Comma-separated list of database fields to return within the object.',
+        required   : false,
+        example    : 'id,created_at'
+    )]
+    #[QueryParam(
+        name       : 'orderBy',
+        type       : 'comma-separated',
+        description: 'Order the data by a given field. Comma-separated string.',
+        required   : false,
+        example    : 'orderBy=id,desc'
+    )]
+    #[QueryParam(
+        name       : 'orderBy[]',
+        type       : 'comma-separated',
+        description: 'Compound `orderBy`. Order the data by a given field. Comma-separated string. Can not be used in conjunction as standard `orderBy`.',
+        required   : false,
+        example    : 'orderBy[]=id,desc&orderBy[]=created_at,asc'
+    )]
+    #[QueryParam(
+        name       : 'where',
+        type       : 'comma-separated',
+        description: 'Filter the request on a single field. Key-Value or Key-Operator-Value comma-separated string.',
+        required   : false,
+        example    : 'where=id,like,*550e*'
+    )]
+    #[QueryParam(
+        name       : 'where[]',
+        type       : 'comma-separated',
+        description: 'Compound `where`. Use when you need to filter on multiple `where`\'s. Note only AND is possible; ORWHERE is not available.',
+        required   : false,
+        example    : 'where[]=id,like,*550e*&where[]=created_at,>=,2024-01-01'
+    )]
+    #[Response(
+        content    : '{"meta":{"responseCode":200,"limit":50,"offset":0,"message":"","cached":false,"availableRelations":[]},"data":{"current_page":1,"data":[{"id": "2e9978b3-130a-3291-bd8f-246215c6d04d","created_by_team_id": 1, "created_at": "2024-01-01 00:00:00"}],"first_page_url": "https:\/\/vine.test\/api\/v1\/my-team-voucher-sets?page=1","from":null,"last_page":1,"last_page_url": "https:\/\/vine.test\/api\/v1\/my-team-voucher-sets?page=1","links":[{"url":null,"label":"&laquo; Previous","active":false},{"https:\/\/vine.test\/api\/v1\/my-team-voucher-sets?page=1","label":"1","active":true},{"url":null,"label":"Next &raquo;","active":false}],"next_page_url":null,"path": "https:\/\/vine.test\/api\/v1\/my-team-voucher-sets","per_page":1,"prev_page_url":null,"to":null,"total":0}}',
+        status     : 200,
+        description: ''
+    )]
     public function index(): JsonResponse
     {
-        $this->responseCode = 403;
-        $this->message      = ApiResponse::RESPONSE_METHOD_NOT_ALLOWED->value;
+        $this->query = VoucherSetMerchantTeamApprovalRequest::where(function ($query) {
+            $query->where('merchant_user_id', Auth::id())
+                ->where('merchant_team_id', Auth::user()->current_team_id);
+        })->with($this->associatedData);
+
+        $this->query = $this->updateReadQueryBasedOnUrl();
+        $this->data  = $this->query->paginate($this->limit);
 
         return $this->respond();
     }

diff --git a/app/Models/VoucherSet.php b/app/Models/VoucherSet.php
@@ -61,6 +61,11 @@ public function voucherSetMerchantTeamApprovalRequests(): HasMany
         return $this->hasMany(VoucherSetMerchantTeamApprovalRequest::class, 'voucher_set_id', 'id');
     }
 
+    public function voucherSetMerchantTeamApprovalActionedRecord(): BelongsTo
+    {
+        return $this->belongsTo(VoucherSetMerchantTeamApprovalRequest::class, 'merchant_approval_request_id', 'id');
+    }
+
     public function currencyCountry(): BelongsTo
     {
         return $this->belongsTo(Country::class, 'currency_country_id', 'id');

diff --git a/...omponents/App/MyTeamVoucherSetMerchantApprovals/MyTeamVoucherSetMerchantApprovalsList.vue b/...omponents/App/MyTeamVoucherSetMerchantApprovals/MyTeamVoucherSetMerchantApprovalsList.vue
@@ -0,0 +1,98 @@
+<script setup>
+
+import {onMounted, ref} from "vue";
+import PaginatorComponent from "@/Components/Admin/PaginatorComponent.vue";
+import {Link} from "@inertiajs/vue3";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+
+
+const myMerchantVoucherSetApprovals = ref({})
+
+
+onMounted(() => {
+    getData()
+});
+
+
+function getData(page = 1) {
+    axios.get('/my-team-vsmtar?cached=false&relations=voucherSet.allocatedToServiceTeam,voucherSet.voucherSetMerchantTeamApprovalActionedRecord.merchantUser&orderBy=id,desc&page=' + page).then(response => {
+        myMerchantVoucherSetApprovals.value = response.data.data
+
+    }).catch(error => {
+        console.log(error)
+    })
+}
+
+
+</script>
+
+<template>
+    <div v-if="myMerchantVoucherSetApprovals.data?.length" class="card">
+        <div class="card-header">
+            My Merchant Team Voucher Set Approvals
+        </div>
+
+        <div class="card-body">
+
+            <div v-for="approvalRequest in myMerchantVoucherSetApprovals.data">
+                <Link class="hover:no-underline hover:bg-gray-50" :href="'/my-voucher-set-merchant-team-approval-request/' + approvalRequest.id">
+                    <div class="border-b py-2 flex justify-between items-center">
+                        <div>
+
+                            <div class="capitalize">
+                                {{approvalRequest.voucher_set?.voucher_set_type}}
+
+                            </div>
+                            <div class="text-xs text-gray-500">
+                                <div>
+                                    Voucher Set #{{approvalRequest.voucher_set_id}}
+                                </div>
+                                #{{approvalRequest.id}}
+                            </div>
+                        </div>
+
+                        <div class="flex justify-end items-center">
+
+                            <div class="pr-2" v-if="!approvalRequest.voucher_set?.voucher_set_merchant_team_approval_actioned_record">
+                                <div v-if="approvalRequest.approval_status === 'ready'">
+                                    <PrimaryButton>
+                                        Please action!
+                                    </PrimaryButton>
+                                </div>
+                                <div class="text-lg text-green-200 font-bold" v-else-if="approvalRequest.approval_status === 'approved'">
+                                    Approved
+                                </div>
+                                <div class="text-lg text-red-200 font-bold" v-else-if="approvalRequest.approval_status === 'approved'">
+                                    Rejected
+                                </div>
+                            </div>
+                            <div v-else class="text-xs pr-4">
+                                Voucher set
+                                <span class="capitalize">
+                                    {{approvalRequest.voucher_set.voucher_set_merchant_team_approval_actioned_record.approval_status}}
+                                </span>
+                                by
+                                <span>
+                                     {{approvalRequest.voucher_set.voucher_set_merchant_team_approval_actioned_record?.merchant_user?.name}}
+                                </span>
+                            </div>
+
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                            </svg>
+
+                        </div>
+                    </div>
+                </Link>
+            </div>
+
+            <div class="flex justify-end items-center mt-4">
+                <div class="w-full lg:w-1/3">
+                    <PaginatorComponent
+                        @setDataPage="getData"
+                        :pagination-data="myMerchantVoucherSetApprovals"></PaginatorComponent>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Pages/App/VoucherSets/VoucherSetMerchantTeamApproval.vue b/resources/js/Pages/App/VoucherSets/VoucherSetMerchantTeamApproval.vue
@@ -143,9 +143,7 @@ function save() {
                         {{ voucherSetMerchantTeamApprovalRequest.approval_status }} at ({{ dayjs(voucherSetMerchantTeamApprovalRequest.approval_status_last_updated_at) }})
                     </div>
                 </div>
-
-
-                <div>
+                <div v-else>
                     <SecondaryButton @click="approved = false" class="mr-2" :class="{'opacity-50': approved}">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 mr-2 text-red-500">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 0 0 5.636 5.636m12.728 12.728A9 9 0 0 1 5.636 5.636m12.728 12.728L5.636 5.636"/>
@@ -158,16 +156,18 @@ function save() {
                         </svg>
                         Approve
                     </SecondaryButton>
-                </div>
 
-                <div>
-                    <PrimaryButton @click="save()" class="mt-4">
-                        Selected:
-                        <span v-if="approved" class="px-2 text-green-500">APPROVED</span>
-                        <span v-else class="px-2 text-red-500">REJECTED</span>
-                        > Click Here To Save
-                    </PrimaryButton>
+                    <div>
+                        <PrimaryButton @click="save()" class="mt-4">
+                            Selected:
+                            <span v-if="approved" class="px-2 text-green-500">APPROVED</span>
+                            <span v-else class="px-2 text-red-500">REJECTED</span>
+                            > Click Here To Save
+                        </PrimaryButton>
+                    </div>
                 </div>
+
+
             </div>
 
         </div>

diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
@@ -1,6 +1,8 @@
 <script setup>
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import {Head} from '@inertiajs/vue3';
+import MyTeamVoucherSetMerchantApprovalsList
+    from "@/Components/App/MyTeamVoucherSetMerchantApprovals/MyTeamVoucherSetMerchantApprovalsList.vue";
 </script>
 
 <template>
@@ -16,5 +18,10 @@ import {Head} from '@inertiajs/vue3';
             You're logged in!
 
         </div>
+
+        <div class="my-8">
+            <MyTeamVoucherSetMerchantApprovalsList></MyTeamVoucherSetMerchantApprovalsList>
+        </div>
+
     </AuthenticatedLayout>
 </template>
diff --git a/tests/Feature/API/App/VoucherSetApprovalRequests/VoucherSetApprovalRequestsGetTest.php b/tests/Feature/API/App/VoucherSetApprovalRequests/VoucherSetApprovalRequestsGetTest.php
@@ -110,7 +110,7 @@ public function itFailsToGetASingleItemWithoutAbility()
     }
 
     #[Test]
-    public function itCanNotGetAllItemsWithAbility()
+    public function itCanGetAllItemsWithAbility()
     {
         Event::fake();
 
@@ -128,7 +128,7 @@ public function itCanNotGetAllItemsWithAbility()
         ]);
 
         $response = $this->getJson($this->apiRoot . $this->endPoint);
-        $response->assertStatus(403);
+        $response->assertStatus(200);
     }
 
     #[Test]