Add multiple select for members
This commit is contained in:
Philipp Lang
parent
9e1fe63c33
commit
b2a7d2a760
|
|
@ -19,8 +19,8 @@ class FilterScope extends Filter
|
|||
public function __construct(
|
||||
public bool $ausstand = false,
|
||||
public ?string $billKind = null,
|
||||
public ?int $activityId = null,
|
||||
public ?int $subactivityId = null,
|
||||
public array $activityIds = [],
|
||||
public array $subactivityIds = [],
|
||||
public string $search = '',
|
||||
public ?int $groupId = null,
|
||||
) {
|
||||
|
|
@ -53,14 +53,14 @@ class FilterScope extends Filter
|
|||
$query->where('group_id', $this->groupId);
|
||||
}
|
||||
|
||||
if ($this->subactivityId || $this->activityId) {
|
||||
if (count($this->subactivityIds) + count($this->activityIds) > 0) {
|
||||
$query->whereHas('memberships', function ($q) {
|
||||
$q->active();
|
||||
if ($this->subactivityId) {
|
||||
$q->where('subactivity_id', $this->subactivityId);
|
||||
if (count($this->subactivityIds)) {
|
||||
$q->whereIn('subactivity_id', $this->subactivityIds);
|
||||
}
|
||||
if ($this->activityId) {
|
||||
$q->where('activity_id', $this->activityId);
|
||||
if (count($this->activityIds)) {
|
||||
$q->whereIn('activity_id', $this->activityIds);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<label class="field-wrap" :for="id" :class="`field-wrap-${size}`">
|
||||
<span v-if="label" class="field-label">
|
||||
{{ label }}
|
||||
<span v-show="required" class="text-red-800"> *</span>
|
||||
</span>
|
||||
<div class="relative real-field-wrap" :class="`size-${size}`">
|
||||
<div
|
||||
@click="visible = !visible"
|
||||
class="flex items-center border-gray-600 text-gray-300 leading-none border-solid bg-gray-700 w-full appearance-none outline-none rounded-lg size-sm text-xs px-1 border pr-6"
|
||||
v-text="`${value.length} Einträge ausgewählt`"
|
||||
></div>
|
||||
<div v-show="visible" class="absolute shadow-lg bg-gray-600 border border-gray-500 rounded-lg p-2 top-7">
|
||||
<div v-for="(option, index) in parsedOptions" class="flex items-center space-x-2" :key="index">
|
||||
<f-switch :id="`${id}-${index}`" size="sm" :items="value.includes(option.id)" :value="option.id" @input="trigger(option, $event)"></f-switch>
|
||||
<div class="text-sm text-gray-200" v-text="option.name"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-wrap">
|
||||
<div v-if="hint" v-tooltip="hint">
|
||||
<svg-sprite src="info-button" class="info-button"></svg-sprite>
|
||||
</div>
|
||||
<div class="px-1 relative" v-if="size != 'xs'">
|
||||
<svg-sprite class="chevron w-3 h-3 fill-current" src="chevron-down"></svg-sprite>
|
||||
</div>
|
||||
<div class="px-1 relative" v-if="size == 'xs'">
|
||||
<svg-sprite class="chevron w-2 h-2 fill-current" src="chevron-down"></svg-sprite>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import map from 'lodash/map';
|
||||
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: function () {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
id: {},
|
||||
inset: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
size: {
|
||||
default: function () {
|
||||
return 'base';
|
||||
},
|
||||
},
|
||||
emptyLabel: {
|
||||
default: false,
|
||||
type: Boolean,
|
||||
},
|
||||
value: {
|
||||
default: undefined,
|
||||
},
|
||||
label: {
|
||||
default: null,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
name: {
|
||||
required: true,
|
||||
},
|
||||
hint: {},
|
||||
options: {
|
||||
default: function () {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
parsedOptions() {
|
||||
return Array.isArray(this.options)
|
||||
? this.options
|
||||
: map(this.options, (value, key) => {
|
||||
return {name: value, id: key};
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
trigger(option, v) {
|
||||
var value = [...this.value];
|
||||
|
||||
this.$emit('input', value.includes(option.id) ? value.filter((cv) => cv !== option.id) : [...value, option.id]);
|
||||
},
|
||||
clear() {
|
||||
this.$emit('input', null);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scope>
|
||||
.inset-bg {
|
||||
background: linear-gradient(to bottom, hsl(247.5, 66.7%, 97.6%) 0%, hsl(247.5, 66.7%, 97.6%) 41%, hsl(0deg 0% 100%) 41%, hsl(180deg 0% 100%) 100%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -33,24 +33,24 @@
|
|||
label="Rechnung"
|
||||
size="sm"
|
||||
></f-select>
|
||||
<f-select
|
||||
id="activity_id"
|
||||
@input="setFilter('activity_id', $event)"
|
||||
<f-multipleselect
|
||||
id="activity_ids"
|
||||
@input="setFilter('activity_ids', $event)"
|
||||
:options="data.meta.filterActivities"
|
||||
:value="getFilter('activity_id')"
|
||||
label="Tätigkeit"
|
||||
:value="getFilter('activity_ids')"
|
||||
label="Tätigkeiten"
|
||||
size="sm"
|
||||
name="activity_id"
|
||||
></f-select>
|
||||
<f-select
|
||||
id="subactivity_id"
|
||||
@input="setFilter('subactivity_id', $event)"
|
||||
name="activity_ids"
|
||||
></f-multipleselect>
|
||||
<f-multipleselect
|
||||
id="subactivity_ids"
|
||||
@input="setFilter('subactivity_ids', $event)"
|
||||
:options="data.meta.filterSubactivities"
|
||||
:value="getFilter('subactivity_id')"
|
||||
label="Untertätigkeit"
|
||||
:value="getFilter('subactivity_ids')"
|
||||
label="Untertätigkeiten"
|
||||
size="sm"
|
||||
name="subactivity_id"
|
||||
></f-select>
|
||||
name="subactivity_ids"
|
||||
></f-multipleselect>
|
||||
<button class="btn btn-primary label mr-2" @click.prevent="exportMembers">
|
||||
<svg-sprite class="w-3 h-3 xl:mr-2" src="save"></svg-sprite>
|
||||
<span class="hidden xl:inline">Exportieren</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue