added date filter

resources/js/Pages/Client/Posts/Index.vue

@@ -21,9 +21,11 @@ import IsOnlineFilter from "@/componentss/shared/filter/filters/IsOnlineFilter.v
 import EventListSearch from "@/componentss/features/events/components/EventListSearch.vue";
 import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
 import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
+import DateFilter from "@/componentss/shared/filter/filters/DateFilter.vue";
 export default {
   name: "Index",
   components: {
+    DateFilter,
     BaseBreadcrumbs, BreadcrumbsItem,
     WhenVisible,
     EventListSearch, IsOnlineFilter, BasicPagination, EventArchiveListBreadcrumbs, BasicPageWrapper, BasicPageContainer,
@@ -76,7 +78,7 @@ export default {
   },
   computed: {
     hasActiveFilters() {
-      return this.filters.category_filter.value || this.filters.tag_filter.value || this.filters.search_filter.value;
+      return this.filters.category_filter.value || this.filters.tag_filter.value || this.filters.search_filter.value || this.filters.date_filter.value;
     }
   },
 
@@ -102,6 +104,7 @@ export default {
           <PostListSearch :search_filter="filters.search_filter" />
           <BasicListFilter>
             <SortingByFilter :sortingBy_filter="filters.sortingBy_filter" />
+            <DateFilter :date_filter="filters.date_filter" />
             <CategoryFilter :categories="categories" :category_filter="filters.category_filter" />
             <TagFilter :tags="tags" :tag_filter="filters.tag_filter" />
           </BasicListFilter>

resources/js/app.js

@@ -11,6 +11,7 @@ import {linksReform} from "@/mixins/LinksReform.js";
 import YSmartCaptcha from 'vue3-yandex-smartcaptcha'
 import cookieMixin from "@/mixins/cookieMixin.js";
 import store from '@/store/index.js';
+import '@vuepic/vue-datepicker/dist/main.css';
 
 
 

resources/js/componentss/shared/badge/BasicListBadge.vue

@@ -14,6 +14,7 @@ import TagBadge from "@/componentss/shared/badge/badges/TagBadge.vue";
 import SortingByBadge from "@/componentss/shared/badge/badges/SortingByBadge.vue";
 import IsOnlineBadge from "@/componentss/shared/badge/badges/IsOnlineBadge.vue";
 import EduBudgetBadge from "@/componentss/shared/badge/badges/EduBudgetBadge.vue";
+import DateBadge from "@/componentss/shared/badge/badges/DateBadge.vue";
 export default {
   name: "BasicListBadge",
   components: {
@@ -23,7 +24,8 @@ export default {
     TagBadge,
     SortingByBadge,
     IsOnlineBadge,
-    EduBudgetBadge
+    EduBudgetBadge,
+    DateBadge
   },
   data() {
     return {
@@ -37,7 +39,8 @@ export default {
         tag: 'TagBadge',
         sort: 'SortingByBadge',
         is_online: 'IsOnlineBadge',
-        budget: 'EduBudgetBadge'
+        budget: 'EduBudgetBadge',
+        date: 'DateBadge'
       };
       return componentMap[type] || null;
     },

resources/js/componentss/shared/badge/badges/DateBadge.vue

@@ -0,0 +1,64 @@
+<template>
+    <span v-if="this.filter.value !== null" class="inline-flex items-center gap-x-1.5 py-1.5 ps-3 pe-2 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+        Дата: {{ firstDate }} {{ secondDate }}
+        <button @click.prevent="clearFilter" type="button" class="shrink-0 size-4 inline-flex items-center justify-center rounded-full hover:bg-primary-lighter focus:outline-none focus:bg-blue-200 focus:text-blue-500">
+            <span class="sr-only">Remove badge</span>
+            <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M18 6 6 18"></path>
+                <path d="m6 6 12 12"></path>
+            </svg>
+        </button>
+    </span>
+</template>
+
+<script>
+import { Link } from "@inertiajs/vue3";
+import slugify from "slugify";
+
+export default {
+	name: "DateBadge",
+	components: { Link },
+	data() {
+		return {};
+	},
+  computed: {
+    firstDate() {
+      return this.filter.value[0]
+    },
+    secondDate() {
+      return this.filter.value[1] ? "- " + this.filter.value[1] : ""
+    },
+  },
+	methods: {
+		clearFilter() {
+			let url = new URL(window.location.href);
+
+			// Создаем массив для хранения всех ключей, которые нужно удалить
+			const keysToDelete = [];
+
+			// Перебираем все параметры и добавляем ключи, начинающиеся с 'category', в массив
+			for (const [key] of url.searchParams) {
+				if (key.startsWith(this.filter.param)) {
+					keysToDelete.push(key);
+				}
+			}
+
+			// Удаляем все ключи из массива
+			keysToDelete.forEach(key => url.searchParams.delete(key));
+
+			let newUrl = url.toString();
+			this.$inertia.visit(newUrl, {
+				method: 'get',
+			});
+		},
+	},
+	props: {
+		filter: {
+			type: Object,
+		},
+	},
+}
+</script>
+
+<style scoped>
+</style>

resources/js/componentss/shared/filter/filters/DateFilter.vue

@@ -0,0 +1,108 @@
+<template>
+
+  <div class="mt-2">
+    <VueDatePicker data-color="text-primary"
+                   cancel-text="Назад"
+                   select-text="Выбрать"
+                   :model-value="date"
+                   @update:model-value="filter"
+                   :hide-input-icon="false"
+                   placeholder="Выберете дату"
+                   v-model="date" locale="ru"
+                   range model-type="dd.MM.yyyy"
+                   :enable-time-picker="false"
+    >
+      <template #input-icon>
+        <BasicIcon class="input-slot-image w-4 h-4 ml-2 text-gray-600" name="calendar-date-range" />
+      </template>
+      <template #clear-icon="{ clear }">
+        <BasicIcon class="input-slot-image w-4 h-4 mr-2 text-gray-600" @click="clear" name="delete" />
+      </template>
+    </VueDatePicker>
+  </div>
+</template>
+<script>
+import {Link} from "@inertiajs/vue3";
+import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
+import {debounce} from "lodash";
+import VueDatePicker from '@vuepic/vue-datepicker';
+
+
+export default {
+	name: "DateFilter",
+	components: {
+		BasicIcon,
+		Link,
+    VueDatePicker
+	},
+	data() {
+		return {
+			date: this.date_filter.value ?? null,
+			}
+	},
+	methods: {
+    filter: debounce(function () {
+      let url = new URL(window.location.href);
+      // Создаем массив для хранения всех ключей, которые нужно удалить
+      const keysToDelete = [];
+
+      // Перебираем все параметры и добавляем ключи, начинающиеся с 'budget', в массив
+      for (const [key] of url.searchParams) {
+        if (key.startsWith('date')) {
+          keysToDelete.push(key);
+        }
+      }
+      // Удаляем все ключи из массива
+      keysToDelete.forEach(key => url.searchParams.delete(key));
+      url.searchParams.delete('page');
+      let newUrl = url.toString();
+      this.$inertia.visit(newUrl, {
+        method: 'get',
+        preserveState: true,
+        data: {
+          date: this.date,
+        },
+      });
+    }, 500),
+    clearFilter() {
+      let url = new URL(window.location.href);
+      // Создаем массив для хранения всех ключей, которые нужно удалить
+      const keysToDelete = [];
+
+      // Перебираем все параметры и добавляем ключи, начинающиеся с 'budget', в массив
+      for (const [key] of url.searchParams) {
+        if (key.startsWith('date')) {
+          keysToDelete.push(key);
+        }
+      }
+      // Удаляем все ключи из массива
+      keysToDelete.forEach(key => url.searchParams.delete(key));
+      this.budgetEdu = [];
+      let newUrl = url.toString();
+      this.$inertia.visit(newUrl, {
+        method: 'get',
+        preserveState: true,
+      });
+    },
+	},
+	props: {
+		date_filter: {
+			type: Object,
+		},
+	},
+}
+
+</script>
+
+
+<style>
+
+:root {
+  --dp-font-size: 0.875rem; /*Default font-size*/
+  --dp-border-radius: 0.5rem; /*Configurable border-radius*/
+  --dp-input-icon-padding: 30px !important; /*Padding on the left side of the input if icon is present*/
+}
+.dp--clear-btn {
+  color: #0d120a;
+}
+</style>