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

Add mobile version for member filter
continuous-integration/drone/push Build is passing Details
continuous-integration/drone/tag Build is passing Details

This commit is contained in:
philipp lang 2023-08-20 23:37:11 +02:00
parent 232917a8e6
commit 391de0edde
4 changed files with 64 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/img/svg/filter.svg Executable file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12 12l8-8V0H0v4l8 8v8l4-4v-4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 108 B

29
resources/js/components/page/Filter.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<ui-popup v-if="visible === true" heading="Filtern" @close="visible = false">
<div class="grid gap-3 md:grid-cols-2">
<slot></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>
<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>
</template>
<script setup>
import {defineProps, ref} from 'vue';
import useBreakpoints from '../../composables/useBreakpoints.js';
const visible = ref(false);
const props = defineProps({
breakpoint: {
type: String,
required: true,
},
});
const {visibleDesktop, visibleMobile} = useBreakpoints(props);
</script>

26
resources/js/composables/useBreakpoints.js vendored Normal file
View File

@ -0,0 +1,26 @@
import {computed} from 'vue';
export default function (props) {
const visibleMobile = computed(() => {
return {
sm: 'flex sm:hidden',
md: 'flex md:hidden',
lg: 'flex lg:hidden',
xl: 'flex xl:hidden',
}[props.breakpoint];
});
const visibleDesktop = computed(() => {
return {
sm: 'hidden sm:flex',
md: 'hidden md:flex',
lg: 'hidden lg:flex',
xl: 'hidden xl:flex',
}[props.breakpoint];
});
return {
visibleMobile,
visibleDesktop,
};
}

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

@ -19,7 +19,7 @@
</div>
</div>
</ui-popup>
<div class="px-6 py-2 flex border-b border-gray-600 items-center space-x-3">
<page-filter breakpoint="xl">
<f-text id="search" :model-value="getFilter('search')" name="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
@ -63,17 +63,17 @@
<ui-sprite class="w-3 h-3 xl:mr-2" src="save"></ui-sprite>
<span class="hidden xl:inline">Exportieren</span>
</button>
</div>
</page-filter>
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm hidden md:table">
<thead>
<th></th>
<th>Nachname</th>
<th>Vorname</th>
<th class="hidden 2xl:table-cell">Ort</th>
<th class="!hidden 2xl:!table-cell">Ort</th>
<th>Tags</th>
<th class="hidden xl:table-cell">Alter</th>
<th v-show="hasModule('bill')" class="hidden xl:table-cell">Rechnung</th>
<th class="!hidden xl:!table-cell">Alter</th>
<th v-show="hasModule('bill')" class="!hidden xl:!table-cell">Rechnung</th>
<th v-show="hasModule('bill')">Ausstand</th>
<th></th>
</thead>
@ -82,12 +82,12 @@
<td><ui-age-groups :member="member"></ui-age-groups></td>
<td v-text="member.lastname"></td>
<td v-text="member.firstname"></td>
<td class="hidden 2xl:table-cell" v-text="member.full_address"></td>
<td class="!hidden 2xl:!table-cell" v-text="member.full_address"></td>
<td>
<tags :member="member"></tags>
</td>
<td class="hidden xl:table-cell" v-text="member.age"></td>
<td v-show="hasModule('bill')" class="hidden xl:table-cell">
<td class="!hidden xl:!table-cell" v-text="member.age"></td>
<td v-show="hasModule('bill')" class="!hidden xl:!table-cell">
<ui-label :value="member.bill_kind_name" fallback="kein"></ui-label>
</td>
<td v-show="hasModule('bill')">