initial commit

This commit is contained in:
Arno Kaimbacher 2023-03-03 16:54:28 +01:00
commit 4fc3bb0a01
202 changed files with 41729 additions and 0 deletions

View file

@ -0,0 +1,52 @@
<script setup>
import { Link } from "@inertiajs/vue3"
import BaseButton from "@/Components/BaseButton.vue"
import BaseButtons from "@/Components/BaseButtons.vue"
import {
mdiSquareEditOutline,
mdiTrashCan,
} from "@mdi/js"
const props = defineProps({
item: {
type: Object,
default: () => ({}),
},
menu: {
type: Object,
default: () => ({}),
},
can: {
type: Object,
default: () => ({}),
},
level: {
type: Number,
default: 0
},
})
</script>
<template>
<tr :key="item.id">
<td data-label="Name">
<div :style="{ 'margin-left': level * 20 + 'px' }">{{ item.name }}</div>
</td>
<td data-label="Description">
{{ item.description }}
</td>
<td data-label="Enabled">
{{ item.enabled }}
</td>
<td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
<BaseButtons type="justify-start lg:justify-end" no-wrap>
<BaseButton v-if="can.edit" :route-name="route('menu.item.edit', { menu: menu.id, item: item.id })"
color="info" :icon="mdiSquareEditOutline" small />
<BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small @click="destroy(item.id)" />
</BaseButtons>
</td>
</tr>
<template v-for="item in item.children">
<MenuItemList :item="item" :menu="menu" :can="can" :level="level + 1" />
</template>
</template>

View file

@ -0,0 +1,161 @@
<script setup>
import { Link } from '@inertiajs/vue3';
import { stardust } from '@eidellev/adonis-stardust/client';
import { computed } from 'vue';
const props = defineProps({
data: {
type: Object,
default: () => ({}),
},
});
const nextPageLink = computed(() => {
let url = new URL(document.location);
url.searchParams.set('page', props.data.current_page + 1);
return url.href;
// return url + '&page=' + (Number(props.data.current_page) + 1);
});
const prevPageLink = computed(() => {
let url = new URL(document.location);
url.searchParams.set('page', props.data.current_page - 1);
return url.href;
// return url + '&page=' + (props.data.current_page - 1);
});
const toPage = computed(() => {
let currentPage = props.data.current_page;
let perPage = props.data.per_page;
if (props.data.current_page == props.data.last_page) {
return props.data.total;
} else {
return currentPage * perPage;
}
});
const fromPage = computed(() => {
let currentPage = props.data.current_page;
let perPage = props.data.per_page;
return currentPage * perPage - (perPage - 1);
});
</script>
<!-- current_page:
1
first_page:
1
first_page_url:
'/?page=1'
last_page:
3
last_page_url:
'/?page=3'
next_page_url:
'/?page=2'
per_page:
5
previous_page_url:
null
total:
15 -->
<template>
<!-- <nav v-if="data.links.length > 3" -->
<nav v-if="data.total > 3" role="navigation" aria-label="Pagination Navigation"
class="flex items-center justify-between">
<div class="flex justify-between flex-1 sm:hidden">
<span v-if="data.current_page <= 1"
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
Previous
</span>
<Link v-else :href="data.previous_page_url"
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
Previous
</Link>
<Link v-if="data.current_page < data.last_page" :href="data.next_page_url"
class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
Next
</Link>
<span v-else
class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
Next
</span>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700 leading-5">
Showing
<span class="font-medium">{{ fromPage }}</span>
to
<span class="font-medium">{{ toPage }}</span>
of
<span class="font-medium">{{ data.total }}</span>
results
</p>
</div>
<div>
<span class="relative z-0 inline-flex shadow-sm rounded-md">
<span v-if="props.data.current_page <= 1" aria-disabled="true" aria-label="Previous">
<span
class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5"
aria-hidden="true">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</span>
</span>
<!-- <Link v-else :href="data.previous_page_url" rel="prev" -->
<Link v-else :href="prevPageLink" rel="prev"
class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
aria-label="Previous">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</Link>
<!-- <template v-for="(link, key) in data.links">
<template v-if="key > 0 && key < data.last_page + 1">
<span v-if="!link.active && link.url === null" :key="key" aria-disabled="true">
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ link.label }}</span>
</span>
<span v-else-if="link.active" :key="`current-${key}`" aria-current="page">
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">{{ link.label }}</span>
</span>
<Link v-else :key="`link-${key}`" :href="link.url" v-html="link.label" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="`Go to page ${link.label}`" />
</template>
</template> -->
<Link v-if="props.data.current_page < props.data.last_page" :href="nextPageLink" rel="next"
class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
aria-label="Next">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</Link>
<!-- else disabled link -->
<span v-else aria-disabled="true" aria-label="Next">
<span
class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5"
aria-hidden="true">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</span>
</span>
</span>
</div>
</div>
</nav>
</template>

View file

@ -0,0 +1,76 @@
<script setup>
import { ref, computed } from 'vue';
import { Link } from '@inertiajs/vue3';
import { stardust } from '@eidellev/adonis-stardust/client';
const props = defineProps({
label: {
type: String,
default: '',
},
attribute: {
type: String,
default: '',
},
search: {
type: String,
default: '',
},
});
const downFill = ref('lightgray');
const upFill = ref('lightgray');
const sortLink = computed(() => {
let url = new URL(document.location);
let sortValue = url.searchParams.get('sort');
if (sortValue == props.attribute) {
url.searchParams.set('sort', '-' + props.attribute);
upFill.value = 'black';
} else if (sortValue === '-' + props.attribute) {
url.searchParams.set('sort', props.attribute);
downFill.value = 'black';
} else {
url.searchParams.set('sort', props.attribute);
}
if (props.search == '') {
url.searchParams.delete('search');
} else {
url.searchParams.set('search', props.search);
}
return url.href;
});
</script>
<template>
<div class="flex items-center gap-4">
<Link :href="sortLink" class="no-underline hover:underline text-cyan-600 dark:text-cyan-400">
{{ label }}
</Link>
<div class="flex flex-col">
<svg
class="inline-block"
xmlns="http://www.w3.org/2000/svg"
width="15px"
height="15px"
viewBox="0 0 15 15"
fill="none"
>
<path d="M7.5 3L15 11H0L7.5 3Z" :fill="upFill" />
</svg>
<svg
class="inline-block"
xmlns="http://www.w3.org/2000/svg"
width="15px"
height="15px"
viewBox="0 0 15 15"
fill="none"
>
<path d="M7.49988 12L-0.00012207 4L14.9999 4L7.49988 12Z" :fill="downFill" />
</svg>
</div>
</div>
</template>