initial commit
This commit is contained in:
commit
4fc3bb0a01
202 changed files with 41729 additions and 0 deletions
52
resources/js/Components/Admin/MenuItemList.vue
Normal file
52
resources/js/Components/Admin/MenuItemList.vue
Normal 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>
|
161
resources/js/Components/Admin/Pagination.vue
Normal file
161
resources/js/Components/Admin/Pagination.vue
Normal 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>
|
76
resources/js/Components/Admin/Sort.vue
Normal file
76
resources/js/Components/Admin/Sort.vue
Normal 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>
|
Loading…
Add table
editor.link_modal.header
Reference in a new issue