From d4057ff08f45c47706f0ab2750846d96a444e02b Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Sat, 13 Jul 2024 18:48:11 +0200
Subject: [PATCH] Add filter for participants

---
 resources/js/components/page/Filter.vue    | 28 ++++++--
 resources/js/composables/useBreakpoints.js | 20 ++++++
 resources/js/views/form/Index.vue          | 10 +--
 resources/js/views/form/Participants.vue   | 78 ++++++++++++----------
 resources/js/views/invoice/Index.vue       | 20 +++---
 resources/js/views/member/VIndex.vue       | 60 +++++++++--------
 6 files changed, 133 insertions(+), 83 deletions(-)

diff --git a/resources/js/components/page/Filter.vue b/resources/js/components/page/Filter.vue
index 94d07477..a8f939bb 100644
--- a/resources/js/components/page/Filter.vue
+++ b/resources/js/components/page/Filter.vue
@@ -1,14 +1,26 @@
 <template>
     <ui-popup v-if="visible === true" heading="Filtern" @close="visible = false">
         <div class="grid gap-3 md:grid-cols-2">
-            <slot></slot>
+            <slot name="fields"></slot>
         </div>
     </ui-popup>
-    <div class="px-6 py-2 border-b border-gray-600 items-center space-x-3" :class="visibleDesktop">
-        <slot></slot>
+    <div class="px-6 py-2 border-b border-gray-600" :class="visibleDesktopBlock">
+        <div class="flex items-end space-x-3">
+            <slot name="buttons"></slot>
+            <ui-icon-button v-if="filterable" icon="filter" @click="filterVisible = !filterVisible">Filtern</ui-icon-button>
+        </div>
+        <ui-box v-if="filterVisible" class="mt-3">
+            <div class="grid grid-cols-4 gap-3 items-end">
+                <slot name="fields"></slot>
+                <ui-icon-button class="col-start-1" icon="close" @click="filterVisible = false">Schließen</ui-icon-button>
+            </div>
+        </ui-box>
     </div>
     <div class="px-6 py-2 border-b border-gray-600 items-center space-x-3" :class="visibleMobile">
-        <ui-icon-button icon="filter" @click="visible = true">Filtern</ui-icon-button>
+        <div class="flex flex-col sm:flex-row items-stretch sm:items-end space-y-1 sm:space-y-0 sm:space-x-3">
+            <slot name="buttons"></slot>
+            <ui-icon-button v-if="filterable" icon="filter" @click="visible = true">Filtern</ui-icon-button>
+        </div>
     </div>
 </template>
 
@@ -18,12 +30,18 @@ import useBreakpoints from '../../composables/useBreakpoints.js';
 
 const visible = ref(false);
 
+const filterVisible = ref(false);
+
 const props = defineProps({
     breakpoint: {
         type: String,
         required: true,
     },
+    filterable: {
+        type: Boolean,
+        default: () => true,
+    },
 });
 
-const {visibleDesktop, visibleMobile} = useBreakpoints(props);
+const {visibleDesktopBlock, visibleMobile} = useBreakpoints(props);
 </script>
diff --git a/resources/js/composables/useBreakpoints.js b/resources/js/composables/useBreakpoints.js
index c54bd5fa..d00c9bb7 100644
--- a/resources/js/composables/useBreakpoints.js
+++ b/resources/js/composables/useBreakpoints.js
@@ -19,8 +19,28 @@ export default function (props) {
         }[props.breakpoint];
     });
 
+    const visibleMobileBlock = computed(() => {
+        return {
+            sm: 'block sm:hidden',
+            md: 'block md:hidden',
+            lg: 'block lg:hidden',
+            xl: 'block xl:hidden',
+        }[props.breakpoint];
+    });
+
+    const visibleDesktopBlock = computed(() => {
+        return {
+            sm: 'hidden sm:block',
+            md: 'hidden md:block',
+            lg: 'hidden lg:block',
+            xl: 'hidden xl:block',
+        }[props.breakpoint];
+    });
+
     return {
         visibleMobile,
         visibleDesktop,
+        visibleDesktopBlock,
+        visibleMobileBlock,
     };
 }
diff --git a/resources/js/views/form/Index.vue b/resources/js/views/form/Index.vue
index bdba101d..c74a590c 100644
--- a/resources/js/views/form/Index.vue
+++ b/resources/js/views/form/Index.vue
@@ -140,10 +140,12 @@
             <conditions-form id="filesettings" :single="single" :value="fileSettingPopup.properties.conditions" @save="saveFileConditions"> </conditions-form>
         </ui-popup>
 
-        <page-filter breakpoint="xl">
-            <f-text id="search" :model-value="getFilter('search')" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
-            <f-switch id="past" :model-value="getFilter('past')" label="vergangene zeigen" name="past" size="sm" @update:model-value="setFilter('past', $event)"></f-switch>
-            <f-switch id="inactive" :model-value="getFilter('inactive')" label="inaktive zeigen" name="inactive" size="sm" @update:model-value="setFilter('inactive', $event)"></f-switch>
+        <page-filter breakpoint="xl" :filterable="false">
+            <template #buttons>
+                <f-text id="search" :model-value="getFilter('search')" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
+                <f-switch id="past" :model-value="getFilter('past')" label="vergangene zeigen" name="past" size="sm" @update:model-value="setFilter('past', $event)"></f-switch>
+                <f-switch id="inactive" :model-value="getFilter('inactive')" label="inaktive zeigen" name="inactive" size="sm" @update:model-value="setFilter('inactive', $event)"></f-switch>
+            </template>
         </page-filter>
 
         <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm">
diff --git a/resources/js/views/form/Participants.vue b/resources/js/views/form/Participants.vue
index 1539bd27..edd35a5a 100644
--- a/resources/js/views/form/Participants.vue
+++ b/resources/js/views/form/Participants.vue
@@ -22,44 +22,48 @@
             </div>
         </ui-popup>
         <page-filter breakpoint="lg">
-            <ui-icon-button icon="plus" @click="editing = {participant: null, preview: JSON.stringify(meta.form_config)}">Hinzufügen</ui-icon-button>
-            <f-switch v-if="meta.has_nami_field" id="group_participants" v-model="groupParticipants" label="Gruppieren" size="sm" name="group_participants"></f-switch>
-            <f-multipleselect id="active_columns" v-model="activeColumnsConfig" :options="meta.columns" label="Aktive Spalten" size="sm"></f-multipleselect>
+            <template #buttons>
+                <ui-icon-button icon="plus" @click="editing = {participant: null, preview: JSON.stringify(meta.form_config)}">Hinzufügen</ui-icon-button>
+                <f-switch v-if="meta.has_nami_field" id="group_participants" v-model="groupParticipants" label="Gruppieren" size="sm" name="group_participants"></f-switch>
+                <f-multipleselect id="active_columns" v-model="activeColumnsConfig" :options="meta.columns" label="Aktive Spalten" size="sm"></f-multipleselect>
+            </template>
 
-            <template v-for="(filter, index) in meta.filters">
-                <f-select
-                    v-if="filter.base_type === 'CheckboxField'"
-                    :id="`filter-field-${index}`"
-                    :key="`filter-field-${index}`"
-                    v-model="innerFilter.data[filter.key]"
-                    :null-value="meta.default_filter_value"
-                    :name="`filter-field-${index}`"
-                    :options="checkboxFilterOptions"
-                    :label="filter.name"
-                    size="sm"
-                ></f-select>
-                <f-select
-                    v-if="filter.base_type === 'DropdownField'"
-                    :id="`filter-field-${index}`"
-                    :key="`filter-field-${index}`"
-                    v-model="innerFilter.data[filter.key]"
-                    :null-value="meta.default_filter_value"
-                    :name="`filter-field-${index}`"
-                    :options="dropdownFilterOptions(filter)"
-                    :label="filter.name"
-                    size="sm"
-                ></f-select>
-                <f-select
-                    v-if="filter.base_type === 'RadioField'"
-                    :id="`filter-field-${index}`"
-                    :key="`filter-field-${index}`"
-                    v-model="innerFilter.data[filter.key]"
-                    :null-value="meta.default_filter_value"
-                    :name="`filter-field-${index}`"
-                    :options="dropdownFilterOptions(filter)"
-                    :label="filter.name"
-                    size="sm"
-                ></f-select>
+            <template #fields>
+                <template v-for="(filter, index) in meta.filters">
+                    <f-select
+                        v-if="filter.base_type === 'CheckboxField'"
+                        :id="`filter-field-${index}`"
+                        :key="`filter-field-${index}`"
+                        v-model="innerFilter.data[filter.key]"
+                        :null-value="meta.default_filter_value"
+                        :name="`filter-field-${index}`"
+                        :options="checkboxFilterOptions"
+                        :label="filter.name"
+                        size="sm"
+                    ></f-select>
+                    <f-select
+                        v-if="filter.base_type === 'DropdownField'"
+                        :id="`filter-field-${index}`"
+                        :key="`filter-field-${index}`"
+                        v-model="innerFilter.data[filter.key]"
+                        :null-value="meta.default_filter_value"
+                        :name="`filter-field-${index}`"
+                        :options="dropdownFilterOptions(filter)"
+                        :label="filter.name"
+                        size="sm"
+                    ></f-select>
+                    <f-select
+                        v-if="filter.base_type === 'RadioField'"
+                        :id="`filter-field-${index}`"
+                        :key="`filter-field-${index}`"
+                        v-model="innerFilter.data[filter.key]"
+                        :null-value="meta.default_filter_value"
+                        :name="`filter-field-${index}`"
+                        :options="dropdownFilterOptions(filter)"
+                        :label="filter.name"
+                        size="sm"
+                    ></f-select>
+                </template>
             </template>
         </page-filter>
         <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm">
diff --git a/resources/js/views/invoice/Index.vue b/resources/js/views/invoice/Index.vue
index 98b294b8..4e9fd0b7 100644
--- a/resources/js/views/invoice/Index.vue
+++ b/resources/js/views/invoice/Index.vue
@@ -72,15 +72,17 @@
                 </section>
             </form>
         </ui-popup>
-        <page-filter breakpoint="xl">
-            <f-multipleselect
-                id="statuses"
-                :options="meta.statuses"
-                :model-value="getFilter('statuses')"
-                label="Status"
-                size="sm"
-                @update:model-value="setFilter('statuses', $event)"
-            ></f-multipleselect>
+        <page-filter breakpoint="xl" :filterable="false">
+            <template #buttons>
+                <f-multipleselect
+                    id="statuses"
+                    :options="meta.statuses"
+                    :model-value="getFilter('statuses')"
+                    label="Status"
+                    size="sm"
+                    @update:model-value="setFilter('statuses', $event)"
+                ></f-multipleselect>
+            </template>
         </page-filter>
         <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm">
             <thead>
diff --git a/resources/js/views/member/VIndex.vue b/resources/js/views/member/VIndex.vue
index 8b56a7b8..2879ae21 100644
--- a/resources/js/views/member/VIndex.vue
+++ b/resources/js/views/member/VIndex.vue
@@ -39,34 +39,38 @@
             </button>
         </ui-popup>
         <page-filter breakpoint="xl">
-            <f-text id="search" :model-value="getFilter('search')" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
-            <f-switch v-show="hasModule('bill')" id="ausstand" :model-value="getFilter('ausstand')" label="Nur Ausstände" size="sm" @update:model-value="setFilter('ausstand', $event)"></f-switch>
-            <f-multipleselect
-                id="group_ids"
-                :options="meta.groups"
-                :model-value="getFilter('group_ids')"
-                label="Gruppierungen"
-                size="sm"
-                @update:model-value="setFilter('group_ids', $event)"
-            ></f-multipleselect>
-            <f-select
-                v-show="hasModule('bill')"
-                id="billKinds"
-                name="billKinds"
-                :options="meta.billKinds"
-                :model-value="getFilter('bill_kind')"
-                label="Rechnung"
-                size="sm"
-                @update:model-value="setFilter('bill_kind', $event)"
-            ></f-select>
-            <button class="btn btn-primary label mr-2" @click.prevent="membershipFilters = getFilter('memberships')">
-                <ui-sprite class="w-3 h-3 xl:mr-2" src="filter"></ui-sprite>
-                <span class="hidden xl:inline">Mitgliedschaften</span>
-            </button>
-            <button class="btn btn-primary label mr-2" @click.prevent="exportMembers">
-                <ui-sprite class="w-3 h-3 xl:mr-2" src="save"></ui-sprite>
-                <span class="hidden xl:inline">Exportieren</span>
-            </button>
+            <template #fields>
+                <f-switch v-show="hasModule('bill')" id="ausstand" :model-value="getFilter('ausstand')" label="Nur Ausstände" size="sm" @update:model-value="setFilter('ausstand', $event)"></f-switch>
+                <f-multipleselect
+                    id="group_ids"
+                    :options="meta.groups"
+                    :model-value="getFilter('group_ids')"
+                    label="Gruppierungen"
+                    size="sm"
+                    @update:model-value="setFilter('group_ids', $event)"
+                ></f-multipleselect>
+                <f-select
+                    v-show="hasModule('bill')"
+                    id="billKinds"
+                    name="billKinds"
+                    :options="meta.billKinds"
+                    :model-value="getFilter('bill_kind')"
+                    label="Rechnung"
+                    size="sm"
+                    @update:model-value="setFilter('bill_kind', $event)"
+                ></f-select>
+                <button class="btn btn-primary label mr-2" @click.prevent="membershipFilters = getFilter('memberships')">
+                    <ui-sprite class="w-3 h-3 xl:mr-2" src="filter"></ui-sprite>
+                    <span class="hidden xl:inline">Mitgliedschaften</span>
+                </button>
+            </template>
+            <template #buttons>
+                <f-text id="search" :model-value="getFilter('search')" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
+                <button class="btn btn-primary label mr-2" @click.prevent="exportMembers">
+                    <ui-sprite class="w-3 h-3 xl:mr-2" src="save"></ui-sprite>
+                    <span class="hidden xl:inline">Exportieren</span>
+                </button>
+            </template>
         </page-filter>
 
         <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm hidden md:table">