Add filter for participants
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
This commit is contained in:
philipp lang
parent
657a648f46
commit
d4057ff08f
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue