From a2947943eab77fd4bf40f5e05ea56284a22027b5 Mon Sep 17 00:00:00 2001
From: simba77 <simba7@inbox.ru>
Date: Mon, 4 Dec 2023 23:24:14 +0300
Subject: [PATCH] Added filter by date in closed deals

---
 .eslintrc.js                                  |   8 ++
 .../components/Forms/InputDateComponent.vue   | 117 ++++++++++++++++++
 assets/composable/useAnalytics.ts             |  10 +-
 assets/pages/Accounts/ClosedDealsPage.vue     |  19 ++-
 package-lock.json                             |  92 +++++++++++++-
 package.json                                  |   1 +
 src/Repository/DealRepository.php             |  29 +++--
 .../DTO/Deals/DealsFilterRequestDTO.php       |   4 +-
 src/Services/Deals/ClosedDealsService.php     |  18 +--
 9 files changed, 275 insertions(+), 23 deletions(-)
 create mode 100644 assets/components/Forms/InputDateComponent.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index 9415d48..fbb991d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,6 +19,14 @@ module.exports = {
     '@typescript-eslint/no-explicit-any': 'off',
     'vue/no-v-text-v-html-on-component': 'off',
     'vue/no-v-html': 'off',
+    'vue/max-attributes-per-line': ['error', {
+      'singleline': {
+        'max': 4
+      },
+      'multiline': {
+        'max': 1
+      }
+    }],
   },
   overrides: [
     {
diff --git a/assets/components/Forms/InputDateComponent.vue b/assets/components/Forms/InputDateComponent.vue
new file mode 100644
index 0000000..6c674ae
--- /dev/null
+++ b/assets/components/Forms/InputDateComponent.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed, reactive, useSlots } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import VueDatePicker from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+
+const slots = useSlots()
+
+interface InputProps {
+  modelValue: string | number
+  label?: string
+  placeholder?: string
+  name: string
+  id?: string
+  type?: string
+  enterKeyHint?: string
+  autocomplete?: string
+  error?: string | number | any[] | null
+  help?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  inputDelay?: number
+  usePhoneFormatter?: boolean
+}
+
+const props = withDefaults(defineProps<InputProps>(), {
+  modelValue: '',
+  label: '',
+  placeholder: '',
+  name: '',
+  id: '',
+  type: 'text',
+  enterKeyHint: '',
+  autocomplete: '',
+  error: null,
+  help: '',
+  disabled: false,
+  readonly: false,
+  required: false,
+  inputDelay: 0,
+  usePhoneFormatter: false
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const inputParams = reactive({
+  value: props.modelValue,
+  elementId: props.id ? props.id : props.name,
+  hasError: computed(() => !!props.error),
+  hasBefore: computed(() => !!slots.before),
+  errorMessage: computed(() => {
+    if (Array.isArray(props.error)) {
+      return props.error.join(',')
+    }
+    return props.error
+  })
+})
+
+const updateModelValue = useDebounceFn(() => {
+  emits('update:modelValue', inputParams.value)
+}, props.inputDelay)
+
+</script>
+
+<template>
+  <div>
+    <label v-if="label" class="text-sm font-medium text-gray-700 block mb-1" :for="inputParams.elementId">
+      {{ label }} <span v-if="required" class="text-danger">*</span>
+      <v-menu v-if="help" placement="auto" class="d-inline-block">
+        <span class="badge rounded-pill bg-primary form-help-badge">?</span>
+        <template #popper>
+          <div class="form-help-text" v-html="help" />
+        </template>
+      </v-menu>
+    </label>
+    <div
+      :class=" {
+        'disabled': disabled,
+        'has-before-icon': inputParams.hasBefore,
+        'is-invalid': inputParams.hasError,
+      }"
+    >
+      <vue-date-picker
+        v-model="inputParams.value"
+        :class=" {
+          'disabled': disabled,
+          'has-before-icon': inputParams.hasBefore,
+          'is-invalid': inputParams.hasError,
+        }"
+        input-class-name="form-input"
+        model-type="format"
+        :locale="'ru'"
+        :format="'dd.MM.yyyy'"
+        :enable-time-picker="false"
+        :auto-apply="true"
+        :placeholder="placeholder"
+        :name="name"
+        :disabled="disabled"
+        :required="required"
+        :readonly="readonly"
+        @update:model-value="updateModelValue"
+      />
+    </div>
+    <div v-if="inputParams.hasError" class="invalid-feedback" v-text="inputParams.errorMessage" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.help {
+  margin-top: 0.25rem;
+}
+
+.calendar-icon {
+  margin: -3px 0 0 8px;
+}
+</style>
diff --git a/assets/composable/useAnalytics.ts b/assets/composable/useAnalytics.ts
index 3331c32..390eccd 100644
--- a/assets/composable/useAnalytics.ts
+++ b/assets/composable/useAnalytics.ts
@@ -1,12 +1,12 @@
-import {ref} from "vue";
+import { ref } from "vue";
 import axios from "axios";
-import {ClosedDealsListItem, ClosedDealsSummary} from "@/types/analytics";
+import { ClosedDealsListItem, ClosedDealsSummary } from "@/types/analytics";
 
-const closedDeals = ref<{deals: ClosedDealsListItem[], summary: ClosedDealsSummary}>()
+const closedDeals = ref<{ deals: ClosedDealsListItem[], summary: ClosedDealsSummary }>()
 
 export default function () {
-  async function getClosedDeals() {
-    closedDeals.value = await axios.get('/api/analytics/closed-deals').then((response) => response.data);
+  async function getClosedDeals(filter: object = {}) {
+    closedDeals.value = await axios.get('/api/analytics/closed-deals', {params: filter}).then((response) => response.data);
   }
 
   return {
diff --git a/assets/pages/Accounts/ClosedDealsPage.vue b/assets/pages/Accounts/ClosedDealsPage.vue
index f732a06..2f89663 100644
--- a/assets/pages/Accounts/ClosedDealsPage.vue
+++ b/assets/pages/Accounts/ClosedDealsPage.vue
@@ -4,16 +4,33 @@ import useAnalytics from "@/composable/useAnalytics";
 import useAsync from "@/utils/use-async";
 import PreloaderComponent from "@/components/Common/PreloaderComponent.vue";
 import ClosedDealsTableComponent from "@/components/Analytics/ClosedDealsTableComponent.vue";
+import InputDateComponent from "@/components/Forms/InputDateComponent.vue";
+import { reactive } from "vue";
 
 const {closedDeals, getClosedDeals} = useAnalytics()
 
-const {loading, run} = useAsync(() => getClosedDeals())
+const filter = reactive({
+  startDate: '',
+  endDate: '',
+})
+
+const {loading, run} = useAsync(() => getClosedDeals(filter))
 
 run()
 </script>
 
 <template>
   <page-component title="Closed Deals">
+    {{ filter }}
+    <div class="mb-6 grid grid-flow-col auto-cols-max gap-4">
+      <div>
+        <input-date-component v-model="filter.startDate" name="startDate" label="Start Date" @update:model-value="run()" />
+      </div>
+      <div>
+        <input-date-component v-model="filter.endDate" name="endDate" label="End Date" @update:model-value="run()" />
+      </div>
+    </div>
+
     <preloader-component v-if="loading" />
     <div v-else-if="closedDeals">
       <closed-deals-table-component
diff --git a/package-lock.json b/package-lock.json
index 7b01311..edab713 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,10 +4,10 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "invest-stat-symfony",
       "dependencies": {
         "@headlessui/vue": "^1.7",
         "@heroicons/vue": "^2.0",
+        "@vuepic/vue-datepicker": "^7.3.0",
         "@vueuse/core": "^10.5",
         "floating-vue": "^2.0.0-beta.20",
         "pinia": "^2.1",
@@ -70,6 +70,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
+      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -1164,6 +1175,21 @@
         "@vue/language-core": "1.8.19"
       }
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-7.3.0.tgz",
+      "integrity": "sha512-bPMMEShIcOJaoGVnR7QZO4CzNLVDS08XPZKdLNMRDTdHv6cbAtgBCCItTtrr62bkp2kkw3m63ED+duhd/9PoYA==",
+      "dependencies": {
+        "date-fns": "^2.30.0",
+        "date-fns-tz": "^1.3.7"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/@vueuse/core": {
       "version": "10.5.0",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.5.0.tgz",
@@ -1877,6 +1903,29 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/date-fns-tz": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
+      "integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
+      "peerDependencies": {
+        "date-fns": ">=2.0.0"
+      }
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -3450,6 +3499,11 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
     "node_modules/regex-parser": {
       "version": "2.2.11",
       "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.11.tgz",
@@ -4492,6 +4546,14 @@
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
       "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw=="
     },
+    "@babel/runtime": {
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
+      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
+      "requires": {
+        "regenerator-runtime": "^0.14.0"
+      }
+    },
     "@esbuild/android-arm": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -5188,6 +5250,15 @@
         "@vue/language-core": "1.8.19"
       }
     },
+    "@vuepic/vue-datepicker": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-7.3.0.tgz",
+      "integrity": "sha512-bPMMEShIcOJaoGVnR7QZO4CzNLVDS08XPZKdLNMRDTdHv6cbAtgBCCItTtrr62bkp2kkw3m63ED+duhd/9PoYA==",
+      "requires": {
+        "date-fns": "^2.30.0",
+        "date-fns-tz": "^1.3.7"
+      }
+    },
     "@vueuse/core": {
       "version": "10.5.0",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.5.0.tgz",
@@ -5721,6 +5792,20 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "requires": {
+        "@babel/runtime": "^7.21.0"
+      }
+    },
+    "date-fns-tz": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
+      "integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
+      "requires": {}
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -6839,6 +6924,11 @@
         "picomatch": "^2.2.1"
       }
     },
+    "regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
     "regex-parser": {
       "version": "2.2.11",
       "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.11.tgz",
diff --git a/package.json b/package.json
index 79e92ec..38a65fd 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
   "dependencies": {
     "@headlessui/vue": "^1.7",
     "@heroicons/vue": "^2.0",
+    "@vuepic/vue-datepicker": "^7.3.0",
     "@vueuse/core": "^10.5",
     "floating-vue": "^2.0.0-beta.20",
     "pinia": "^2.1",
diff --git a/src/Repository/DealRepository.php b/src/Repository/DealRepository.php
index 9d3b505..5c8ad9d 100644
--- a/src/Repository/DealRepository.php
+++ b/src/Repository/DealRepository.php
@@ -10,7 +10,9 @@
 use App\Entity\Future;
 use App\Entity\Share;
 use App\Entity\User;
+use App\Request\DTO\Deals\DealsFilterRequestDTO;
 use App\Services\Deals\DealStatus;
+use Carbon\Carbon;
 use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
 use Doctrine\ORM\Query\Expr\Join;
 use Doctrine\Persistence\ManagerRegistry;
@@ -146,9 +148,9 @@ public function getAllTickersByStockMarket(string $stockMarket)
     /**
      * @return array<int, array{deal: Deal}>
      */
-    public function getClosedDealsForUserByFilter(User $user, array $filter = []): array
+    public function getClosedDealsForUserByFilter(User $user, ?DealsFilterRequestDTO $filter = null): array
     {
-        return $this->createQueryBuilder('d')
+        $builder = $this->createQueryBuilder('d')
             ->select(
                 [
                     'd as deal',
@@ -176,15 +178,28 @@ public function getClosedDealsForUserByFilter(User $user, array $filter = []): a
             ->andWhere('d.user = :user')
             ->andWhere('d.status = :status')
             ->setParameter('user', $user)
-            ->setParameter('status', DealStatus::Closed)
-            ->leftJoin(Share::class, 's', Join::WITH, 's.ticker = d.ticker AND s.stockMarket = d.stockMarket')
+            ->setParameter('status', DealStatus::Closed);
+
+        if ($filter) {
+            if (! empty($filter->startDate)) {
+                $builder->andWhere('d.updatedAt >= :updated_at')
+                    ->setParameter('updated_at', Carbon::createFromFormat('d.m.Y', $filter->startDate)->setTime(0, 0));
+            }
+            if (! empty($filter->endDate)) {
+                $builder->andWhere('d.updatedAt >= :updated_at')
+                    ->setParameter('updated_at', Carbon::createFromFormat('d.m.Y', $filter->startDate)->setTime(23, 59, 59));
+            }
+        }
+
+
+        $builder->leftJoin(Share::class, 's', Join::WITH, 's.ticker = d.ticker AND s.stockMarket = d.stockMarket')
             ->leftJoin(Bond::class, 'b', Join::WITH, 'b.ticker = d.ticker AND b.stockMarket = d.stockMarket')
             ->leftJoin(Future::class, 'f', Join::WITH, 'f.ticker = d.ticker AND f.stockMarket = d.stockMarket')
             ->orderBy('d.status', 'ASC')
             ->addOrderBy('s.type', 'DESC')
             ->addOrderBy('s.currency', 'ASC')
-            ->addOrderBy('d.id', 'ASC')
-            ->getQuery()
-            ->getResult();
+            ->addOrderBy('d.id', 'ASC');
+
+        return $builder->getQuery()->getResult();
     }
 }
diff --git a/src/Request/DTO/Deals/DealsFilterRequestDTO.php b/src/Request/DTO/Deals/DealsFilterRequestDTO.php
index 811fb62..c5ecc62 100644
--- a/src/Request/DTO/Deals/DealsFilterRequestDTO.php
+++ b/src/Request/DTO/Deals/DealsFilterRequestDTO.php
@@ -12,10 +12,10 @@ public function __construct(
         #[Assert\Length(min: 0)]
         public ?int $accountId = null,
 
-        #[Assert\Date]
+        #[Assert\DateTime(options: ['format' => 'd.m.Y'])]
         public ?string $startDate = null,
 
-        #[Assert\Date]
+        #[Assert\DateTime(options: ['format' => 'd.m.Y'])]
         public ?string $endDate = null,
     ) {
     }
diff --git a/src/Services/Deals/ClosedDealsService.php b/src/Services/Deals/ClosedDealsService.php
index 00737b9..44c894a 100644
--- a/src/Services/Deals/ClosedDealsService.php
+++ b/src/Services/Deals/ClosedDealsService.php
@@ -25,7 +25,7 @@ public function getDeals(User $user, ?DealsFilterRequestDTO $filterRequestDTO):
         $summarySellPrice = 0;
         $summaryProfit = 0;
 
-        $deals = $this->dealRepository->getClosedDealsForUserByFilter($user);
+        $deals = $this->dealRepository->getClosedDealsForUserByFilter($user, $filterRequestDTO);
         foreach ($deals as $deal) {
             $dealData = new DealData($deal, $deal['deal']->getAccount(), $this->currencyService);
 
@@ -43,12 +43,16 @@ public function getDeals(User $user, ?DealsFilterRequestDTO $filterRequestDTO):
             $summaryProfit += $dealData->getProfitInBaseCurrency();
         }
 
-        $summary = new SummaryForClosedDealsDTO(
-            round($summaryBuyPrice, 2),
-            round($summarySellPrice, 2),
-            round($summaryProfit, 2),
-            round($summaryProfit / $summaryBuyPrice * 100, 2)
-        );
+        if ($summaryBuyPrice > 0) {
+            $summary = new SummaryForClosedDealsDTO(
+                round($summaryBuyPrice, 2),
+                round($summarySellPrice, 2),
+                round($summaryProfit, 2),
+                round($summaryProfit / $summaryBuyPrice * 100, 2)
+            );
+        } else {
+            $summary = new SummaryForClosedDealsDTO(0, 0, 0, 0);
+        }
 
         return ['deals' => $dealsByTickers, 'summary' => $summary];
     }