add is national in project list front

Author: gheorghelupu17

app/Http/Controllers/ProjectController.php

@@ -9,6 +9,7 @@
 use App\Http\Filters\CountiesFilter;
 use App\Http\Filters\ProjectCategoriesFilter;
 use App\Http\Filters\ProjectDatesFilter;
+use App\Http\Filters\ProjectNationalFilter;
 use App\Http\Filters\ProjectStatusFilter;
 use App\Http\Filters\SearchFilter;
 use App\Http\Requests\Project\DonateRequest;
@@ -51,6 +52,7 @@ protected function projectList(Request $request, string $view): Response
                 AllowedFilter::custom('status', new ProjectStatusFilter),
                 AllowedFilter::custom('volunteers', new AcceptsVolunteersFilter),
                 AllowedFilter::custom('search', new SearchFilter),
+                AllowedFilter::custom('is_national', new ProjectNationalFilter),
             ])
             ->allowedSorts([
                 AllowedSort::field('publish_date', 'start'),

app/Http/Filters/ProjectNationalFilter.php

@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Filters;
+
+use Illuminate\Database\Eloquent\Builder;
+use Spatie\QueryBuilder\Filters\Filter;
+
+class ProjectNationalFilter implements Filter
+{
+    public function __invoke(Builder $query, $value, string $property): Builder
+    {
+        if ($value) {
+            return $query->where('is_national', true);
+        }
+
+        if (! $value) {
+            return $query->where('is_national', false);
+        }
+
+        return $query;
+    }
+}

resources/js/Pages/Public/Projects/Index.vue

@@ -67,6 +67,17 @@
                 @update:modelValue="applyFilters"
             />
 
+            <Select
+                class="relative md:col-span-6 lg:col-span-3"
+                :label="$t('is_national')"
+                v-model="filter.is_national"
+                :options="{
+                    true: $t('yes'),
+                    false: $t('no'),
+                }"
+                @update:modelValue="applyFilters"
+            />
+
             <Select
                 class="relative md:col-span-6 lg:col-span-3"
                 :label="$t('county')"
@@ -114,56 +125,57 @@
 </template>
 
 <script setup>
-    import { ref } from 'vue';
-    import { ViewBoardsIcon, ViewGridIcon, LocationMarkerIcon, XIcon } from '@heroicons/vue/solid';
-    import route from '@/Helpers/useRoute';
-    import PageLayout from '@/Layouts/PageLayout.vue';
-    import Sort from '@/Components/filters/Sort.vue';
-    import SearchFilter from '@/Components/filters/SearchFilter.vue';
-    import PaginatedGrid from '@/Components/templates/PaginatedGrid.vue';
-    import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
-    import Map from '@/Components/maps/Map.vue';
-    import DatePicker from '@/Components/form/DatePicker.vue';
-    import Select from '@/Components/form/Select.vue';
-    import useFilters from '@/Helpers/useFilters.js';
-
-    const props = defineProps({
-        collection: {
-            type: Object,
-        },
-        counties: {
-            type: Array,
-        },
-        categories: {
-            type: Array,
-        },
-        pins: {
-            type: Array,
-        },
-        view: {
-            type: String,
-            default: 'list',
-            validator: (view) => ['list', 'map'].includes(view),
-        },
-    });
-
-    const filter = ref({
-        county: props.collection.filter?.county || [],
-        status: props.collection.filter?.status || null,
-        category: props.collection.filter?.category || [],
-        date: props.collection.filter?.date || [],
-        search: props.collection.filter?.search || null,
-    });
-
-    let url = route(props.view === 'map' ? 'projects.map' : 'projects.index');
-    const scrollTarget = ref(null);
-
-    function applySelectedCountyFromMap(id) {
-        filter.value.county = [id];
-        applyFilters();
-
-        scrollTarget.value.scrollIntoView();
-    }
-
-    const { applyFilters, clearFilters } = useFilters(filter, props.collection.sort, url);
+import { ref } from 'vue';
+import { ViewBoardsIcon, ViewGridIcon, LocationMarkerIcon, XIcon } from '@heroicons/vue/solid';
+import route from '@/Helpers/useRoute';
+import PageLayout from '@/Layouts/PageLayout.vue';
+import Sort from '@/Components/filters/Sort.vue';
+import SearchFilter from '@/Components/filters/SearchFilter.vue';
+import PaginatedGrid from '@/Components/templates/PaginatedGrid.vue';
+import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
+import Map from '@/Components/maps/Map.vue';
+import DatePicker from '@/Components/form/DatePicker.vue';
+import Select from '@/Components/form/Select.vue';
+import useFilters from '@/Helpers/useFilters.js';
+
+const props = defineProps({
+    collection: {
+        type: Object,
+    },
+    counties: {
+        type: Array,
+    },
+    categories: {
+        type: Array,
+    },
+    pins: {
+        type: Array,
+    },
+    view: {
+        type: String,
+        default: 'list',
+        validator: (view) => ['list', 'map'].includes(view),
+    },
+});
+
+const filter = ref({
+    county: props.collection.filter?.county || [],
+    status: props.collection.filter?.status || null,
+    category: props.collection.filter?.category || [],
+    is_national: props.collection.filter?.is_national || null,
+    date: props.collection.filter?.date || [],
+    search: props.collection.filter?.search || null,
+});
+
+let url = route(props.view === 'map' ? 'projects.map' : 'projects.index');
+const scrollTarget = ref(null);
+
+function applySelectedCountyFromMap(id) {
+    filter.value.county = [id];
+    applyFilters();
+
+    scrollTarget.value.scrollIntoView();
+}
+
+const { applyFilters, clearFilters } = useFilters(filter, props.collection.sort, url);
 </script>