Add table

2021-04-11 02:55:26 +02:00 · 2021-04-11 02:55:26 +02:00 · cd954f1596
parent 21a8939fcc
commit cd954f1596
12 changed files with 178 additions and 29 deletions
--- a/app/Member/MemberController.php
+++ b/app/Member/MemberController.php
@ -12,7 +12,7 @@ class MemberController extends Controller
        session()->put('title', 'Mitglieder');

        return \Inertia::render('member/Index', [
-            'data' => MemberResource::collection(Member::search($request->query('search', null))->paginate(20))
+            'data' => MemberResource::collection(Member::search($request->query('search', null))->paginate(15))
        ]);
    }
 }
--- a/app/Member/MemberResource.php
+++ b/app/Member/MemberResource.php
@ -14,6 +14,15 @@ class MemberResource extends JsonResource
     */
    public function toArray($request)
    {
-        return parent::toArray($request);
+        return [
+            'firstname' => $this->firstname,
+            'lastname' => $this->lastname,
+            'address' => $this->address,
+            'zip' => $this->zip,
+            'location' => $this->location,
+            'send_newspaper' => $this->send_newspaper,
+            'birthday' => $this->birthday->format('d.m.Y'),
+            'joined_at' => $this->joined_at->format('d.m.Y'),
+        ];
    }
 }
--- a/package.json
+++ b/package.json
@ -9,8 +9,6 @@
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "img": "rm -R public/img && cd resources/img/svg && svg-sprite -s --symbol-dest=sprite *.svg && mv sprite/svg/sprite.symbol.svg ../sprite.svg && rm -R sprite && cd ../../../ && cp -R resources/img public/img"
-
-
    },
    "devDependencies": {
        "laravel-mix": "^6.0.1",
--- a/resources/img/sprite.svg
+++ b/resources/img/sprite.svg
@ -1 +1 @@
-<?xml version="1.0" encoding="iso-8859-1"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 512 512" id="loss" xmlns="http://www.w3.org/2000/svg"><path d="M448 281.6h-25.6c-7.68 0-12.8 5.12-12.8 12.8v115.2h51.2V294.4c0-7.68-5.12-12.8-12.8-12.8zM345.6 230.4H320c-7.68 0-12.8 5.12-12.8 12.8v166.4h51.2V243.2c0-7.68-5.12-12.8-12.8-12.8zM243.2 179.2h-25.6c-7.68 0-12.8 5.12-12.8 12.8v217.6H256V192c0-7.68-5.12-12.8-12.8-12.8zM140.8 102.4h-25.6c-7.68 0-12.8 5.12-12.8 12.8v294.4h51.2V115.2c0-7.68-5.12-12.8-12.8-12.8z"/><path d="M486.4 460.8H51.2V25.6C51.2 10.24 40.96 0 25.6 0 10.24 0 0 10.24 0 25.6v460.8C0 501.76 10.24 512 25.6 512h460.8c15.36 0 25.6-10.24 25.6-25.6 0-15.36-10.24-25.6-25.6-25.6z"/></symbol><symbol viewBox="0 0 512 512" id="user" xmlns="http://www.w3.org/2000/svg"><path d="M0 435.2V512h512v-76.8c0-171.52-512-171.52-512 0z"/><circle cx="256" cy="128" r="128"/></symbol></svg>
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 20 20" id="check" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></symbol><symbol viewBox="0 0 20 20" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></symbol><symbol viewBox="0 0 512 512" id="loss" xmlns="http://www.w3.org/2000/svg"><path d="M448 281.6h-25.6c-7.68 0-12.8 5.12-12.8 12.8v115.2h51.2V294.4c0-7.68-5.12-12.8-12.8-12.8zM345.6 230.4H320c-7.68 0-12.8 5.12-12.8 12.8v166.4h51.2V243.2c0-7.68-5.12-12.8-12.8-12.8zM243.2 179.2h-25.6c-7.68 0-12.8 5.12-12.8 12.8v217.6H256V192c0-7.68-5.12-12.8-12.8-12.8zM140.8 102.4h-25.6c-7.68 0-12.8 5.12-12.8 12.8v294.4h51.2V115.2c0-7.68-5.12-12.8-12.8-12.8z"/><path d="M486.4 460.8H51.2V25.6C51.2 10.24 40.96 0 25.6 0 10.24 0 0 10.24 0 25.6v460.8C0 501.76 10.24 512 25.6 512h460.8c15.36 0 25.6-10.24 25.6-25.6 0-15.36-10.24-25.6-25.6-25.6z"/></symbol><symbol viewBox="0 0 512 512" id="user" xmlns="http://www.w3.org/2000/svg"><path d="M0 435.2V512h512v-76.8c0-171.52-512-171.52-512 0z"/><circle cx="256" cy="128" r="128"/></symbol></svg>
--- a/resources/img/svg/check.svg
+++ b/resources/img/svg/check.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>
--- a/resources/img/svg/close.svg
+++ b/resources/img/svg/close.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
--- a/resources/js/app.js
+++ b/resources/js/app.js
@ -6,10 +6,14 @@ window.io = require('socket.io-client');
 import Sprite from './components/Sprite.js';

 import FText from './components/FText.vue';
+import Pages from './components/Pages.vue';
+import VBool from './components/VBool.vue';

 Vue.use(plugin)
 Vue.component('f-text', FText);
 Vue.component('sprite', Sprite);
+Vue.component('pages', Pages);
+Vue.component('v-bool', VBool);

 const el = document.getElementById('app')

--- a/resources/js/components/Pages.vue
+++ b/resources/js/components/Pages.vue
@ -0,0 +1,63 @@
+<template>
+    <div :class="{'hidden': value.last_page == 1, 'flex': value.last_page > 1}" class="justify-between items-baseline">
+        <div class="text-sm text-gray-500" v-html="desc"></div>
+        <div class="-mx-1 flex items-baseline">
+            <div class="pl-1 pr-3 text-gray-500 text-sm">Seite:</div>
+            <div class="px-1" v-for="(link, index) in links">
+                <inertia-link href="#" @click.prevent="goto(link)" class="rounded text-sm w-8 h-8 text-primary-100 flex items-center justify-center leading-none shadow" :key="index" v-text="link.page"
+                    :class="{'bg-primary-700': link.current, 'bg-primary-900': !link.current}"
+                ></inertia-link>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import mergesQueryString from '../mixins/mergesQueryString.js';
+
+export default {
+    mixins: [ mergesQueryString ],
+
+    props: {
+        only: {
+            required: true
+        },
+        value: {
+            required: true
+        },
+        preserve: {
+            default: false,
+            type: Boolean
+        }
+    },
+    methods: {
+        goto(page) {
+            this.$inertia.visit(this.qs({ page: page.page }), {
+                only: this.only,
+                preserveState: this.preserve
+            });
+        }
+    },
+
+    computed: {
+        links() {
+            var links = [];
+
+            var from = Math.max(1, this.value.current_page - 3);
+            var to = Math.min(this.value.last_page, this.value.current_page + 3);
+
+            for (var i = from; i <= to; i++) {
+                links.push({
+                    page: i,
+                    current: i === this.value.current_page
+                });
+            }
+
+            return links;
+        },
+        desc() {
+            return `${this.value.from} - ${this.value.to} von ${this.value.total} Einträgen`;
+        }
+    }
+};
+</script>
--- a/resources/js/components/VBool.vue
+++ b/resources/js/components/VBool.vue
@ -0,0 +1,19 @@
+<template>
+    <div class="rounded-full w-4 h-4 flex items-center justify-center leading-none" :class="{'bg-green-800': value, 'bg-red-800': !value}">
+        <sprite :class="{'text-green-100': value, 'text-red-100': !value}" class="w-2 h-2" :src="value ? 'check' : 'close'"></sprite>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {}
+    },
+
+    computed: {
+        t() {
+            return this.value ? 'Ja' : 'Nein';
+        }
+    }
+};
+</script>
--- a/resources/js/layouts/App.vue
+++ b/resources/js/layouts/App.vue
@ -9,8 +9,12 @@
            </div>
        </div>

-        <div class="flex-grow ml-56 bg-gray-900">
-            <slot></slot>
+        <div class="flex-grow ml-56 bg-gray-900 flex flex-col">
+            <div class="h-16 text-xl font-semibold text-white flex items-center pl-5 border-b border-gray-600" v-html="$page.props.title"></div>
+
+            <div class="flex-grow">
+                <slot></slot>
+            </div>
        </div>

    </div>
--- a/resources/js/mixins/mergesQueryString.js
+++ b/resources/js/mixins/mergesQueryString.js
@ -0,0 +1,24 @@
+import queryString from 'query-string';
+
+export default {
+    methods: {
+        qs(merge) {
+            var c = queryString.parse(window.location.search);
+
+            var m = { ...c, ...merge };
+            var mn = {};
+
+            Object.keys(m).forEach((k) => {
+                console.log(m[k]);
+                if (m[k] !== null && !isNaN(m[k])) {
+                    mn[k] = m[k];
+                }
+            });
+
+            var merged = queryString.stringify(mn);
+
+            return window.location.pathname + (merged ? '?'+merged : '');
+        }
+    }
+};
+
--- a/resources/js/views/member/Index.vue
+++ b/resources/js/views/member/Index.vue
@ -1,33 +1,59 @@
 <template>
    <div>
-        <!--
-        <v-table :headers="[
-            {text: 'Nachname', value: 'lastname', align: 'left'},
-            {text: 'Vorname', value: 'firstname', align: 'left'},
-            {text: 'Adresse', value: 'address', align: 'left'},
-        ]" :items="data" actions>
-            <template slot="Nachname" slot-scope="{item}">
-                {{item.lastname}}
-            </template>
-            <template slot="Vorname" slot-scope="{item}">
-                {{item.firstname}}
-            </template>
-            <template slot="Adresse" slot-scope="{item}">
-                {{item.address}} {{item.zip}}, {{item.city}}
-            </template>
-            <template slot="Aktion" slot-scope="{item}"></template>
-        </v-table>
-        -->
+        <div class="member-table">
+            <header>
+                <div class="px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b">Nachname</div>
+                <div class="px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b">Vorname</div>
+                <div class="px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b">Straße</div>
+                <div class="px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b">PLZ</div>
+                <div class="px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b">Ort</div>
+                <div class="px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b">Z</div>
+                <div class="px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b">Geburtstag</div>
+                <div class="px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b">Eintritt</div>
+            </header>
+
+            <inertia-link :href="`/member/${member.id}`" :key="index" v-for="member, index in data.data" class="text-gray-200 transition-all duration-500 rounded flex hover:bg-gray-600">
+                <div class="py-1 px-6" v-text="member.firstname"></div>
+                <div class="py-1 px-6" v-text="member.lastname"></div>
+                <div class="py-1 px-6" v-text="`${member.address}`"></div>
+                <div class="py-1 px-6" v-text="`${member.zip}`"></div>
+                <div class="py-1 px-6" v-text="`${member.location}`"></div>
+                <div class="py-1 px-6">
+                    <v-bool v-model="member.send_newspaper"></v-bool>
+                </div>
+                <div class="py-1 px-6" v-text="`${member.birthday}`"></div>
+                <div class="py-1 px-6" v-text="`${member.joined_at}`"></div>
+            </inertia-link>
+
+        </div>
+
+        <div class="px-6">
+            <pages class="mt-4" :value="data.meta" :only="['data']"></pages>
+        </div>
    </div>
 </template>

 <script>
-    import App from '../../layouts/App';
+import App from '../../layouts/App';

-    export default {
-        layout: App,
+export default {
+    layout: App,

-        props: ['data']
+    props:{
+        data: {}
    }
+}
 </script>

+<style scoped>
+.member-table {
+    display: table;
+    width: 100%;
+}
+.member-table > * {
+    display: table-row;
+}
+.member-table > * > * {
+    display: table-cell;
+}
+</style>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>`