silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Add filter for participants
continuous-integration/drone/push Build is failing Details

This commit is contained in:
philipp lang 2024-07-13 18:48:11 +02:00
parent 657a648f46
commit d4057ff08f
6 changed files with 133 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
resources/js/components/page/Filter.vue
View File

@ -1,14 +1,26 @@
<template> <template>
<ui-popup v-if="visible === true" heading="Filtern" @close="visible = false"> <ui-popup v-if="visible === true" heading="Filtern" @close="visible = false">
<div class="grid gap-3 md:grid-cols-2"> <div class="grid gap-3 md:grid-cols-2">
<slot></slot> <slot name="fields"></slot>
</div> </div>
</ui-popup> </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>
<div class="px-6 py-2 border-b border-gray-600 items-center space-x-3" :class="visibleMobile"> <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> </div>
</template> </template>
@ -18,12 +30,18 @@ import useBreakpoints from '../../composables/useBreakpoints.js';
const visible = ref(false); const visible = ref(false);
const filterVisible = ref(false);
const props = defineProps({ const props = defineProps({
breakpoint: { breakpoint: {
type: String, type: String,
required: true, required: true,
}, },
filterable: {
type: Boolean,
default: () => true,
},
}); });
const {visibleDesktop, visibleMobile} = useBreakpoints(props); const {visibleDesktopBlock, visibleMobile} = useBreakpoints(props);
</script> </script>

20
resources/js/composables/useBreakpoints.js vendored
View File

@ -19,8 +19,28 @@ export default function (props) {
}[props.breakpoint]; }[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 { return {
visibleMobile, visibleMobile,
visibleDesktop, visibleDesktop,
visibleDesktopBlock,
visibleMobileBlock,
}; };
} }

10
resources/js/views/form/Index.vue
View File

@ -140,10 +140,12 @@
<conditions-form id="filesettings" :single="single" :value="fileSettingPopup.properties.conditions" @save="saveFileConditions"> </conditions-form> <conditions-form id="filesettings" :single="single" :value="fileSettingPopup.properties.conditions" @save="saveFileConditions"> </conditions-form>
</ui-popup> </ui-popup>
<page-filter breakpoint="xl"> <page-filter breakpoint="xl" :filterable="false">
<f-text id="search" :model-value="getFilter('search')" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text> <template #buttons>
<f-switch id="past" :model-value="getFilter('past')" label="vergangene zeigen" name="past" size="sm" @update:model-value="setFilter('past', $event)"></f-switch> <f-text id="search" :model-value="getFilter('search')" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
<f-switch id="inactive" :model-value="getFilter('inactive')" label="inaktive zeigen" name="inactive" size="sm" @update:model-value="setFilter('inactive', $event)"></f-switch> <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> </page-filter>
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm"> <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm">

78
resources/js/views/form/Participants.vue
View File

@ -22,44 +22,48 @@
</div> </div>
</ui-popup> </ui-popup>
<page-filter breakpoint="lg"> <page-filter breakpoint="lg">
<ui-icon-button icon="plus" @click="editing = {participant: null, preview: JSON.stringify(meta.form_config)}">Hinzufügen</ui-icon-button> <template #buttons>
<f-switch v-if="meta.has_nami_field" id="group_participants" v-model="groupParticipants" label="Gruppieren" size="sm" name="group_participants"></f-switch> <ui-icon-button icon="plus" @click="editing = {participant: null, preview: JSON.stringify(meta.form_config)}">Hinzufügen</ui-icon-button>
<f-multipleselect id="active_columns" v-model="activeColumnsConfig" :options="meta.columns" label="Aktive Spalten" size="sm"></f-multipleselect> <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"> <template #fields>
<f-select <template v-for="(filter, index) in meta.filters">
v-if="filter.base_type === 'CheckboxField'" <f-select
:id="`filter-field-${index}`" v-if="filter.base_type === 'CheckboxField'"
:key="`filter-field-${index}`" :id="`filter-field-${index}`"
v-model="innerFilter.data[filter.key]" :key="`filter-field-${index}`"
:null-value="meta.default_filter_value" v-model="innerFilter.data[filter.key]"
:name="`filter-field-${index}`" :null-value="meta.default_filter_value"
:options="checkboxFilterOptions" :name="`filter-field-${index}`"
:label="filter.name" :options="checkboxFilterOptions"
size="sm" :label="filter.name"
></f-select> size="sm"
<f-select ></f-select>
v-if="filter.base_type === 'DropdownField'" <f-select
:id="`filter-field-${index}`" v-if="filter.base_type === 'DropdownField'"
:key="`filter-field-${index}`" :id="`filter-field-${index}`"
v-model="innerFilter.data[filter.key]" :key="`filter-field-${index}`"
:null-value="meta.default_filter_value" v-model="innerFilter.data[filter.key]"
:name="`filter-field-${index}`" :null-value="meta.default_filter_value"
:options="dropdownFilterOptions(filter)" :name="`filter-field-${index}`"
:label="filter.name" :options="dropdownFilterOptions(filter)"
size="sm" :label="filter.name"
></f-select> size="sm"
<f-select ></f-select>
v-if="filter.base_type === 'RadioField'" <f-select
:id="`filter-field-${index}`" v-if="filter.base_type === 'RadioField'"
:key="`filter-field-${index}`" :id="`filter-field-${index}`"
v-model="innerFilter.data[filter.key]" :key="`filter-field-${index}`"
:null-value="meta.default_filter_value" v-model="innerFilter.data[filter.key]"
:name="`filter-field-${index}`" :null-value="meta.default_filter_value"
:options="dropdownFilterOptions(filter)" :name="`filter-field-${index}`"
:label="filter.name" :options="dropdownFilterOptions(filter)"
size="sm" :label="filter.name"
></f-select> size="sm"
></f-select>
</template>
</template> </template>
</page-filter> </page-filter>
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm"> <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm">

20
resources/js/views/invoice/Index.vue
View File

@ -72,15 +72,17 @@
</section> </section>
</form> </form>
</ui-popup> </ui-popup>
<page-filter breakpoint="xl"> <page-filter breakpoint="xl" :filterable="false">
<f-multipleselect <template #buttons>
id="statuses" <f-multipleselect
:options="meta.statuses" id="statuses"
:model-value="getFilter('statuses')" :options="meta.statuses"
label="Status" :model-value="getFilter('statuses')"
size="sm" label="Status"
@update:model-value="setFilter('statuses', $event)" size="sm"
></f-multipleselect> @update:model-value="setFilter('statuses', $event)"
></f-multipleselect>
</template>
</page-filter> </page-filter>
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm"> <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm">
<thead> <thead>

60
resources/js/views/member/VIndex.vue
View File

@ -39,34 +39,38 @@
</button> </button>
</ui-popup> </ui-popup>
<page-filter breakpoint="xl"> <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-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 <f-multipleselect
id="group_ids" id="group_ids"
:options="meta.groups" :options="meta.groups"
:model-value="getFilter('group_ids')" :model-value="getFilter('group_ids')"
label="Gruppierungen" label="Gruppierungen"
size="sm" size="sm"
@update:model-value="setFilter('group_ids', $event)" @update:model-value="setFilter('group_ids', $event)"
></f-multipleselect> ></f-multipleselect>
<f-select <f-select
v-show="hasModule('bill')" v-show="hasModule('bill')"
id="billKinds" id="billKinds"
name="billKinds" name="billKinds"
:options="meta.billKinds" :options="meta.billKinds"
:model-value="getFilter('bill_kind')" :model-value="getFilter('bill_kind')"
label="Rechnung" label="Rechnung"
size="sm" size="sm"
@update:model-value="setFilter('bill_kind', $event)" @update:model-value="setFilter('bill_kind', $event)"
></f-select> ></f-select>
<button class="btn btn-primary label mr-2" @click.prevent="membershipFilters = getFilter('memberships')"> <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> <ui-sprite class="w-3 h-3 xl:mr-2" src="filter"></ui-sprite>
<span class="hidden xl:inline">Mitgliedschaften</span> <span class="hidden xl:inline">Mitgliedschaften</span>
</button> </button>
<button class="btn btn-primary label mr-2" @click.prevent="exportMembers"> </template>
<ui-sprite class="w-3 h-3 xl:mr-2" src="save"></ui-sprite> <template #buttons>
<span class="hidden xl:inline">Exportieren</span> <f-text id="search" :model-value="getFilter('search')" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
</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>
</page-filter> </page-filter>
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm hidden md:table"> <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm hidden md:table">