Add filter for participants

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">
+    <div class="px-6 py-2 border-b border-gray-600" :class="visibleDesktopBlock">
-        <slot></slot>
+        <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>

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,
     };
 }

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">
+        <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">

resources/js/views/form/Participants.vue

@@ -22,10 +22,13 @@
             </div>
         </ui-popup>
         <page-filter breakpoint="lg">
+            <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 #fields>
                 <template v-for="(filter, index) in meta.filters">
                     <f-select
                         v-if="filter.base_type === 'CheckboxField'"
@@ -61,6 +64,7 @@
                         size="sm"
                     ></f-select>
                 </template>
+            </template>
         </page-filter>
         <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm">
             <thead>

resources/js/views/invoice/Index.vue

@@ -72,7 +72,8 @@
                 </section>
             </form>
         </ui-popup>
-        <page-filter breakpoint="xl">
+        <page-filter breakpoint="xl" :filterable="false">
+            <template #buttons>
                 <f-multipleselect
                     id="statuses"
                     :options="meta.statuses"
@@ -81,6 +82,7 @@
                     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>

resources/js/views/member/VIndex.vue

@@ -39,7 +39,7 @@
             </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>
+            <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"
@@ -63,10 +63,14 @@
                     <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">